selenite/frontend
1
0
Fork 0
mirror of https://gitlab.com/skysthelimit.dev/selenite.git synced 2025-06-16 10:32:08 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update semag/geojump/index.html

Browse Source
This commit is contained in:
LEGALISE_PIRACY 2024-03-10 03:52:21 +00:00
parent 491ffd8f65
commit 67d7de611f
1 changed files with 104 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

209
semag/geojump/index.html
View File

@ -3,91 +3,90 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Geometry Jump</title> <title>Geometry Jump</title>>
<link rel="canonical" href="https://geometryjump.com" data-react-helmet="true"> <style>
<style> html {
html { box-sizing: border-box;
box-sizing: border-box; }
} *, *:before, *:after {
*, *:before, *:after { box-sizing: inherit;
box-sizing: inherit; }
} body {
body { margin: 0;
margin: 0; background: #444;
background: #444; }
} #gameContainer {
#gameContainer { width: 100vw;
width: 100vw; height: 100vh;
height: 100vh; }
} canvas {
canvas { width: 100%;
width: 100%; height: 100%;
height: 100%; display: block;
display: block; }
} /* try to handle mobile dialog */
/* try to handle mobile dialog */ canvas + * {
canvas + * { z-index: 2;
z-index: 2; }
} .logo {
.logo { display: block;
display: block; max-width: 100vw;
max-width: 100vw; max-height: 70vh;
max-height: 70vh; }
}
.progress {
.progress { margin: 1.5em;
margin: 1.5em; border: 1px solid white;
border: 1px solid white; width: 50vw;
width: 50vw; display: none;
display: none; }
} .progress .full {
.progress .full { margin: 2px;
margin: 2px; background: white;
background: white; height: 1em;
height: 1em; transform-origin: top left;
transform-origin: top left; }
}
#loader {
#loader { position: absolute;
position: absolute; left: 0;
left: 0; top: 0;
top: 0; width: 100vw;
width: 100vw; height: 100vh;
height: 100vh; display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: center;
align-items: center; justify-content: center;
justify-content: center; background-color:black;
background-color:black; }
}
.spinner,
.spinner, .spinner:after {
.spinner:after { border-radius: 50%;
border-radius: 50%; width: 5em;
width: 5em; height: 5em;
height: 5em; }
} .spinner {
.spinner { margin: 10px;
margin: 10px; font-size: 10px;
font-size: 10px; position: relative;
position: relative; text-indent: -9999em;
text-indent: -9999em; border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-top: 1.1em solid rgba(255, 255, 255, 0.2); border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2); border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); border-left: 1.1em solid #ffffff;
border-left: 1.1em solid #ffffff; transform: translateZ(0);
transform: translateZ(0); animation: spinner-spin 1.1s infinite linear;
animation: spinner-spin 1.1s infinite linear; }
} @keyframes spinner-spin {
@keyframes spinner-spin { 0% {
0% { transform: rotate(0deg);
transform: rotate(0deg); }
} 100% {
100% { transform: rotate(360deg);
transform: rotate(360deg); }
} }
}
</style> </style>
</head> </head>
<body> <body>
@ -99,25 +98,25 @@
</div> </div>
</body> </body>
<script src="Build/UnityLoader.js"></script> <script src="Build/UnityLoader.js"></script>
<script> <script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/geo.json", {onProgress: UnityProgress}); var gameInstance = UnityLoader.instantiate("gameContainer", "Build/geo.json", {onProgress: UnityProgress});
function UnityProgress(gameInstance, progress) { function UnityProgress(gameInstance, progress) {
if (!gameInstance.Module) { if (!gameInstance.Module) {
return; return;
} }
const loader = document.querySelector("#loader"); const loader = document.querySelector("#loader");
if (!gameInstance.progress) { if (!gameInstance.progress) {
const progress = document.querySelector("#loader .progress"); const progress = document.querySelector("#loader .progress");
progress.style.display = "block"; progress.style.display = "block";
gameInstance.progress = progress.querySelector(".full"); gameInstance.progress = progress.querySelector(".full");
loader.querySelector(".spinner").style.display = "none"; loader.querySelector(".spinner").style.display = "none";
} }
gameInstance.progress.style.transform = `scaleX(${progress})`; gameInstance.progress.style.transform = `scaleX(${progress})`;
if (progress === 1 && !gameInstance.removeTimeout) { if (progress === 1 && !gameInstance.removeTimeout) {
gameInstance.removeTimeout = setTimeout(function() { gameInstance.removeTimeout = setTimeout(function() {
loader.style.display = "none"; loader.style.display = "none";
}, 2000); }, 2000);
} }
} }
</script> </script>
</html> </html>