hypper sand box

427 beans

Remix Open In Editor Fullscreen Discuss Publish Your Code

<head>
      <base href="https://cdn.jsdelivr.net/gh/faralong/test@main/hype/">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

</head>
  <body style="margin:0;padding:0" class="noselect">
    
    <canvas id="unity-canvas"
      style="position:fixed;top:0;left:0;width:100%;height:100%;outline:none"></canvas>

async function unzipWebpFromExternalBins(binUrls) {
    const blobUrls = {};
    const bytes = await fetchAndCombineZip(binUrls);
    const zip = await JSZip.loadAsync(bytes);
    for (const [filename, file] of Object.entries(zip.files)) {
        if (!file.dir) {
            let mime = '';
            if (filename.endsWith('.js') || filename.endsWith('.mjs')) {
                mime = 'text/javascript';
            } else if (filename.endsWith('.css')) {
                mime = 'text/css';
            } else if (filename.endsWith('.html')) {
                mime = 'text/html';
            } else if (filename.endsWith('.wasm.br')) {
                mime = 'application/wasm';
            } else if (filename.endsWith('.js.br')) {
                mime = 'application/javascript';
            } else if (filename.endsWith('.jpg') || filename.endsWith('.jpeg')) {
                mime = 'image/jpeg';
            }
            const rawBlob = await file.async("blob");
            const blob = mime ? new Blob([rawBlob], { type: mime }) : rawBlob;
            const blobUrl = URL.createObjectURL(blob);
            console.log("Extracted:", filename);
            blobUrls[filename] = blobUrl;
        }
    }
    return blobUrls;
}

let blobUrlss = "";
let binParts = [
  "parts_1.bin",
  "parts_2.bin",
  "parts_3.bin",
  "parts_4.bin",
];

unzipWebpFromExternalBins(binParts).then(blobUrls => {
    blobUrlss = blobUrls;
    const ORIGINAL_CREATE_ELEMENT = document.createElement;
    const ORIGINAL_SET_ATTRIBUTE = Element.prototype.setAttribute;

document.createElement = function(tagName) {
        const el = ORIGINAL_CREATE_ELEMENT.call(this, tagName);

if (tagName.toLowerCase() === 'script') {
            Object.defineProperty(el, 'src', {
                set(newSrc) {
                    const filename = extractFilename(newSrc);
                    const replacement = blobUrlss[filename];
                    if (replacement) {
                        ORIGINAL_SET_ATTRIBUTE.call(el, 'src', replacement);
                    } else {
                        ORIGINAL_SET_ATTRIBUTE.call(el, 'src', newSrc);
                    }
                },
                get() {
                    return el.getAttribute('src');
                },
                configurable: true
            });
        }

return el;
    };

Element.prototype.setAttribute = function(name, value) {
        if (this.tagName === 'SCRIPT' && name === 'src') {
            const filename = extractFilename(value);
            const replacement = blobUrlss[filename];
            if (replacement) {
                return ORIGINAL_SET_ATTRIBUTE.call(this, name, replacement);
            }
        }
        return ORIGINAL_SET_ATTRIBUTE.call(this, name, value);
    };

function extractFilename(url) {
        try {
            return new URL(url, location.href).pathname.split('/').pop();
        } catch {
            return url.split('/').pop(); 
        }
    }

const imageSrcDescriptor = Object.getOwnPropertyDescriptor(Image.prototype, 'src');
    Object.defineProperty(Image.prototype, 'src', {
      set(value) {
        const newURL = rewriteURL(value);
        imageSrcDescriptor.set.call(this, newURL);
      },
      get: imageSrcDescriptor.get,
      configurable: true,
      enumerable: true,
    });

const scriptSrcDescriptor = Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, 'src');
    Object.defineProperty(HTMLScriptElement.prototype, 'src', {
      set(value) {
        const newURL = rewriteURL(value);
        scriptSrcDescriptor.set.call(this, newURL);
      },
      get: scriptSrcDescriptor.get,
      configurable: true,
      enumerable: true,
    });

const linkHrefDescriptor = Object.getOwnPropertyDescriptor(HTMLLinkElement.prototype, 'href');
    Object.defineProperty(HTMLLinkElement.prototype, 'href', {
      set(value) {
        const newURL = rewriteURL(value);
        linkHrefDescriptor.set.call(this, newURL);
      },
      get: linkHrefDescriptor.get,
      configurable: true,
      enumerable: true,
    });

const mediaSrcDescriptor = Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'src');
    Object.defineProperty(HTMLMediaElement.prototype, 'src', {
      set(value) {
        const newURL = rewriteURL(value);
        mediaSrcDescriptor.set.call(this, newURL);
      },
      get: mediaSrcDescriptor.get,
      configurable: true,
      enumerable: true,
    });

// fetch
    const originalFetch = window.fetch;
    window.fetch = function(resource, init) {
      if (typeof resource === "string") {
        resource = rewriteURL(resource);
      } else if (resource instanceof Request) {
        resource = new Request(rewriteURL(resource.url), resource);
      }
      return originalFetch.call(this, resource, init);
    };

// XMLHttpRequest
    const originalOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, ...rest) {
      const newURL = rewriteURL(url);
      return originalOpen.call(this, method, newURL, ...rest);
    };

const OriginalAudio = window.Audio;
    window.Audio = function(src) {
      const audio = new OriginalAudio();
      if (src) {
        audio.src = rewriteURL(src);
      }
      return audio;
    };
    window.Audio.prototype = OriginalAudio.prototype;

function rewriteURL(original) {
      var trimmed = original.split("/").pop();
      if (trimmed.includes("?")) trimmed = trimmed.split("?")[0]
      return blobUrlss[trimmed] || original;
    }

window.addEventListener("load", function () {
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("ServiceWorker.js");
      }
    });

function setFocus() {
      window.focus();
      canvas.focus();
    }
    window.addEventListener("touchstart", setFocus);
    window.addEventListener("pointerdown", setFocus);
    window.addEventListener("resize", setFocus);
});
    </script>
	<script>
function resizeCanvas() {
    const canvas = document.getElementById("unity-canvas");
   
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    canvas.style.width = window.innerWidth + "px";
    canvas.style.height = window.innerHeight + "px";
}

window.addEventListener("load", resizeCanvas);
window.addEventListener("resize", resizeCanvas);
</script>

</body>
</html>

CSS

hypper sand box

Recommended