Tabs vraiment bien

39 ace

Remixer Ouvrir dans l'éditeur Publiez votre code

HTML

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <base href="https://cdn.jsdelivr.net/gh/web-ports/tabs@main/">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | TABS</title>
    <style>
      body {
        background-color: black;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #gameContainer {
        width: 100vw !important;
        height: 100vh !important;
      }
      canvas {
        width: 100% !important;
        height: 100% !important;
      }
      #loading-text {
        font-weight: bold;
        background: linear-gradient(
          270deg,
          #ff0000,
          #ff7f00,
          #ffff00,
          #00ff00,
          #0000ff,
          #4b0082,
          #8f00ff
        );
        background-size: 400% 400%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: rainbow 3s ease infinite;
      }

@keyframes rainbow {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
    </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="gameContainer"></div>
    <script src="Build/UnityLoader.js"></script>
    <script>
      const loadingText = document.querySelector("#loading-text");
      let loadedBytes = 0;

async function fetchWithProgress(url) {
        const response = await fetch(url);
        const reader = response.body.getReader();
        const chunks = [];

while (true) {
          const { done, value } = await reader.read();
          if (done) break;

loadedBytes += value.length;
          chunks.push(value);

const mbDone = (loadedBytes / (1024 * 1024)).toFixed(2);
          const mbTotal = '1746.00';
          loadingText.textContent = `LOADING... ${mbDone} MB / ${mbTotal} MB`;
        }

// Return a Blob directly from chunks to prevent array allocation duplication
        return new Blob(chunks);
      }

async function mergeFiles(fileParts, cacheKey) {
        const cache = await caches.open("tabs-cache");
        const cachedResponse = await cache.match(cacheKey);

if (cachedResponse) {
          const blob = await cachedResponse.blob();
          return URL.createObjectURL(blob);
        }

// Fetch sequentially instead of all parts parallel via Promise.all to reduce total concurrent memory overhead
        const blobs = [];
        for (const part of fileParts) {
          const partBlob = await fetchWithProgress(part);
          blobs.push(partBlob);
        }

const mergedBlob = new Blob(blobs);
        
        // Cache the response asynchronously without holding unnecessary references
        cache.put(cacheKey, new Response(mergedBlob)).catch(console.error);

return URL.createObjectURL(mergedBlob);
      }

function getParts(file, start, end) {
        const parts = [];
        for (let i = start; i <= end; i++) {
          parts.push(`${file}.part${i}`);
        }
        return parts;
      }

(async () => {
        // Fetch files sequentially to avoid memory spikes caused by downloading data and WASM simultaneously
        const dataUrl = await mergeFiles(getParts("Build/tabs.data.unityweb", 1, 86), "tabs.data.unityweb");
        const wasmUrl = await mergeFiles(getParts("Build/tabs.wasm.code.unityweb", 1, 3), "tabs.wasm.code.unityweb");

const unityInstance = UnityLoader.instantiate("gameContainer", "Build/tabs.json");
        loadingText.remove();
      })();
    </script>
  </body>
</html>

CSS