Webleb - UI Elements - escape road 3

HTML CSS JS

<head>
	<base href="https://cdn.jsdelivr.net/gh/genizy/escape-road-3@main/">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="game.css">
	<meta name="robots" content="noindex, nofollow">
	<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500&display=swap" rel="stylesheet">
	<title>Escape Road 3</title>
	<meta name="description" content=""/>
	<style type="text/css">
		.jss1:before {
			top: 0;
			width: 100%;
			filter: blur(16px);
			height: 100%;
			content: "";
			display: block;
			opacity: .5;
			z-index: 0;
			position: absolute;
			background-size: cover;
			background-image: url("loading.png")
		}
	</style> 
</head>

<body>
<div id="unity-container" style="display: none;">
	<canvas id="unity-canvas"></canvas> 
</div>
<div id="loadingBlock" style="">
	<div id="loading-text"
    style="color: white; font-size: 48px; font-family: cursive; text-align: center; margin-top: 20px;"> LOADING...
  </div>
	<div class="jss31 jss34 jss1">
	<div style="position: absolute; font-family: Arial, Helvetica, sans-serif;	bottom: 10px; right: 10px; font-size: 18px; color: #ffffff; opacity: 0.5;">26041006</div>
		<div class="spinner"></div>
		<div class="jss31 jss34 jss48" style="flex: 1 1 0%;">
			<div class="jss32">
				<div class="jss7 jss9 jss20 jss3">
					<div class="jss125">
						<div class="jss123">
						 <img src="logo.png">
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="jss31 jss34" style="flex: 3 1 0%;">
			<div class="jss32">
				<div class="jss31 jss34 jss39 jss50 gameloader">
					<div class="jss32">
						<div class="gameloader-game-name">Escape Road 3</div>
					</div>
					<div class="jss32">
						<div class="jss32 gameloader-logo">
							<img id="game-logo" src="loading.png">
						</div>
					</div>
					<div class="jss32">
						<div>
							<div class="gameloader-progressbar">
								<div class="gameloader-progressbar-progress" id="progress_fill"
										 style="width: 0%;"></div>
							</div>
							<div class="gameloader-progress-info">Game Loading...</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	<script>
    var loadingText = document.querySelector("#loading-text");
    let totalBytes = 0;
    let loadedBytes = 0;

async function fetchWithProgress(url) {
      const response = await fetch(url);
      const reader = response.body.getReader();
      let chunks = [];
      let received = 0;
      while (true) {
        const {
          done,
          value
        } = await reader.read();
        if (done) break;
        received += value.length;
        loadedBytes += value.length;
        chunks.push(value);
        let mbDone = (loadedBytes / (1024 * 1024)).toFixed(2);
        let mbTotal = '162.42';
        loadingText.textContent = `LOADING... ${mbDone} MB / ${mbTotal} MB`;
      }
      let fullBuffer = new Uint8Array(received);
      let offset = 0;
      for (let chunk of chunks) {
        fullBuffer.set(chunk, offset);
        offset += chunk.length;
      }
      return fullBuffer.buffer;
    }

async function mergeFiles(fileParts, cacheKey) {
      const cache = await caches.open("gash-cache");
      const cachedResponse = await cache.match(cacheKey);
      if (cachedResponse) {
        const blob = await cachedResponse.blob();
        return URL.createObjectURL(blob);
      }
      const buffers = await Promise.all(
        fileParts.map(part => fetchWithProgress(part))
      );
      const mergedBlob = new Blob(buffers);
      const response = new Response(mergedBlob);
      await cache.put(cacheKey, response);
      return URL.createObjectURL(mergedBlob);
    }

function getParts(file, start, end) {
      let parts = [];
      for (let i = start; i <= end; i++) {
        parts.push(file + ".part" + i);
      }
      return parts;
    }
    (async () => {
      const [dataUrl, wasmUrl] = await Promise.all([
        mergeFiles(getParts("Build/escape-road-3-v26041006.data", 1, 7), "escape-road-3-v26041006.data"),
        mergeFiles(getParts("Build/escape-road-3-v26041006.wasm", 1, 3), "escape-road-3-v26041006.wasm")
      ]);

Preview

Open Advanced Editor Full Screen

HTML CSS JS

Preview

Validating your code, please wait...