Gorilla Tag WebGL: Load & Play Online

1,923 jb557134

HTML

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <base href="https://cdn.jsdelivr.net/gh/web-ports/gorilla-tag@latest/">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | gorilla tag web</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background: #231F20;
        }

#unity-container {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
  </head>
  <body>
	<div id="loading-text" style="color: white; font-size: 48px; font-family: cursive; text-align: center; margin-top: 20px;"> LOADING... </div>
    <div id="unity-container" class="unity-desktop" hidden>
      <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></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 = '150.89';
                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 buffers = await Promise.all(
                fileParts.map(part => fetchWithProgress(part))
            );
            const mergedBlob = new Blob(buffers);
            return URL.createObjectURL(mergedBlob);
        }

};
            document.body.appendChild(script);
        })();
    </script>
  </body>
</html>

CSS