Hollow Knight WebGL: Load, Cache, and Play

10 poooky

<head>
    <base href="https://cdn.jsdelivr.net/gh/aukak/hollow-knight@2fc2e7149f0d5b2609b135ab48f00fd973930635/">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | Hollow Knight</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 hidden id="unity-container" class="unity-desktop">
        <canvas id="unity-canvas"></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 id="unity-mobile-warning"> WebGL builds are not supported on mobile devices. </div>
    </div>
    <script>
        const DB_NAME = "cachedb";
        const STORE_NAME = "files";

function openCacheDB() {
            return new Promise((resolve, reject) => {
                const req = indexedDB.open(DB_NAME, 1);

req.onupgradeneeded = () => {
                    const db = req.result;
                    if (!db.objectStoreNames.contains(STORE_NAME)) {
                        db.createObjectStore(STORE_NAME);
                    }
                };

req.onsuccess = () => resolve(req.result);
                req.onerror = () => reject(req.error);
            });
        }

async function saveToCache(key, blob) {
            const db = await openCacheDB();
            return new Promise((resolve, reject) => {
                const tx = db.transaction(STORE_NAME, "readwrite");
                tx.objectStore(STORE_NAME).put(blob, key);
                tx.oncomplete = () => resolve();
                tx.onerror = () => reject(tx.error);
            });
        }

async function loadFromCache(key) {
            const db = await openCacheDB();
            return new Promise((resolve, reject) => {
                const tx = db.transaction(STORE_NAME, "readonly");
                const req = tx.objectStore(STORE_NAME).get(key);
                req.onsuccess = () => resolve(req.result || null);
                req.onerror = () => reject(req.error);
            });
        }

async function deleteFromCache(key) {
            const db = await openCacheDB();
            return new Promise((resolve, reject) => {
                const tx = db.transaction(STORE_NAME, "readwrite");
                tx.objectStore(STORE_NAME).delete(key);
                tx.oncomplete = () => resolve();
                tx.onerror = () => reject(tx.error);
            });
        }
    </script>
    <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 = '912.81';
                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 cached = await loadFromCache(cacheKey);
            if (cached) {
                return URL.createObjectURL(cached);
            }
            const buffers = await Promise.all(
                fileParts.map(part => fetchWithProgress(part))
            );
            const mergedBlob = new Blob(buffers);
            await saveToCache(cacheKey, mergedBlob);
            return URL.createObjectURL(mergedBlob);
        }

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

</body>

</html>

CSS

Hollow Knight WebGL: Load, Cache, and Play

Recommended