<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>ZIP Game Loader</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:'Segoe UI',sans-serif;background:#0a0a1a;color:#fff;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
        #uploader{background:#16213e;border:2px dashed #0f3460;border-radius:20px;padding:60px 40px;text-align:center;max-width:600px;width:100%;transition:all .3s}
        #uploader.dragover{border-color:#e94560;background:#1a1a3e}
        #uploader .icon{font-size:80px;display:block;margin-bottom:20px}
        #uploader h1{font-size:28px;margin-bottom:10px;color:#e94560}
        #uploader p{color:#a8d8ea;font-size:16px;margin-bottom:20px}
        #fileInput{display:none}
        .btn{background:#e94560;color:#fff;border:none;padding:14px 40px;font-size:18px;border-radius:12px;cursor:pointer;font-weight:bold;transition:all .3s}
        .btn:hover{background:#c73652;transform:scale(1.05)}
        #status{margin-top:20px;padding:15px;border-radius:10px;font-size:14px;display:none;background:#0a0a1a;border:1px solid #2a3a6a;max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}
        #status.show{display:block}
        #status.success{border-color:#4caf50;color:#4caf50}
        #status.error{border-color:#f44336;color:#f44336}
        .file-info{font-size:13px;color:#aaa;margin-top:12px}
        .progress-bar{width:100%;height:4px;background:#0a0a1a;border-radius:2px;margin-top:15px;overflow:hidden;display:none}
        .progress-bar.active{display:block}
        .progress-bar .fill{height:100%;background:linear-gradient(90deg,#e94560,#ff6b81);width:0%;transition:width .3s}
        #gameContainer{width:100vw;height:100vh;position:fixed;top:0;left:0;background:#000;z-index:1000;display:none}
        #gameContainer.active{display:block}
        #gameContainer iframe{width:100%;height:100%;border:none}
        .back-btn{position:fixed;top:20px;left:20px;z-index:1001;background:rgba(0,0,0,0.7);color:#fff;border:1px solid #fff;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;display:none}
        .back-btn.show{display:block}
        .back-btn:hover{background:rgba(255,255,255,0.2)}
    </style>
</head>
<body>

    <div id="uploader">
        <span class="icon">📦</span>
        <h1>Upload Game ZIP</h1>
        <p>Drag & drop your ZIP file here or click to select</p>
        <button class="btn" id="selectBtn">📁 Choose ZIP file</button>
        <input type="file" id="fileInput" accept=".zip">
        <div class="file-info" id="fileInfo">No file chosen</div>
        <div class="progress-bar" id="progressBar">
            <div class="fill" id="progressFill"></div>
        </div>
        <div id="status"></div>
    </div>

    <div id="gameContainer">
        <iframe id="gameFrame" sandbox="allow-scripts allow-same-origin allow-forms allow-modals" allow="autoplay; fullscreen"></iframe>
    </div>
    <button class="back-btn" id="backBtn">✕ Close</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <script>
        const uploader = document.getElementById('uploader');
        const fileInput = document.getElementById('fileInput');
        const selectBtn = document.getElementById('selectBtn');
        const fileInfo = document.getElementById('fileInfo');
        const statusDiv = document.getElementById('status');
        const progressBar = document.getElementById('progressBar');
        const progressFill = document.getElementById('progressFill');
        const gameContainer = document.getElementById('gameContainer');
        const gameFrame = document.getElementById('gameFrame');
        const backBtn = document.getElementById('backBtn');

        let isProcessing = false;

        selectBtn.addEventListener('click', () => fileInput.click());
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) handleFile(e.target.files[0]);
        });

        uploader.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploader.classList.add('dragover');
        });
        uploader.addEventListener('dragleave', (e) => {
            e.preventDefault();
            uploader.classList.remove('dragover');
        });
        uploader.addEventListener('drop', (e) => {
            e.preventDefault();
            uploader.classList.remove('dragover');
            if (e.dataTransfer.files.length > 0) {
                const file = e.dataTransfer.files[0];
                if (file.name.endsWith('.zip')) handleFile(file);
                else showStatus('❌ Only ZIP files allowed!', 'error');
            }
        });

        backBtn.addEventListener('click', () => {
            gameContainer.classList.remove('active');
            backBtn.classList.remove('show');
            document.body.style.overflow = 'auto';
            gameFrame.src = 'about:blank';
            uploader.style.display = 'block';
        });

        function readFileAsArrayBuffer(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = (e) => resolve(e.target.result);
                reader.onerror = (e) => reject(e.target.error);
                reader.readAsArrayBuffer(file);
            });
        }

        function showStatus(msg, type = '') {
            statusDiv.textContent = msg;
            statusDiv.className = 'show ' + type;
        }

        function getMimeType(filename) {
            const ext = filename.split('.').pop().toLowerCase();
            const map = {
                'js': 'text/javascript', 'mjs': 'text/javascript',
                'css': 'text/css',
                'html': 'text/html', 'htm': 'text/html',
                'webp': 'image/webp', 'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg',
                'gif': 'image/gif', 'svg': 'image/svg+xml',
                'json': 'application/json',
                'wasm': 'application/wasm',
                'ttf': 'font/ttf', 'woff': 'font/woff', 'woff2': 'font/woff2',
                'ogg': 'audio/ogg', 'wav': 'audio/wav', 'mp3': 'audio/mpeg',
                'atlas': 'text/plain', 'isr': 'application/octet-stream', 'swf': 'application/x-shockwave-flash'
            };
            return map[ext] || '';
        }

        function resolvePath(base, relative) {
            // Simple path resolution (handles . and ..)
            const parts = base.split('/');
            if (base.endsWith('/')) parts.pop();
            const relParts = relative.split('/');
            for (const part of relParts) {
                if (part === '.' || part === '') continue;
                if (part === '..') parts.pop();
                else parts.push(part);
            }
            return parts.join('/');
        }

        async function handleFile(file) {
            if (isProcessing) return;
            isProcessing = true;

            fileInfo.textContent = `📄 ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
            showStatus('⏳ Processing...', 'loading');
            progressBar.classList.add('active');
            progressFill.style.width = '10%';

            try {
                const arrayBuffer = await readFileAsArrayBuffer(file);
                progressFill.style.width = '30%';

                const zip = await JSZip.loadAsync(arrayBuffer);
                progressFill.style.width = '50%';

                const blobUrls = {};
                const files = Object.keys(zip.files);
                let count = 0;

                for (const filename of files) {
                    const fileEntry = zip.files[filename];
                    if (fileEntry.dir) continue;

                    const mime = getMimeType(filename);
                    try {
                        const rawBlob = await fileEntry.async('blob');
                        const finalBlob = mime ? rawBlob.slice(0, rawBlob.size, mime) : rawBlob;
                        blobUrls[filename] = URL.createObjectURL(finalBlob);
                    } catch (e) {
                        console.warn('Failed to extract:', filename, e);
                    }

                    count++;
                    const pct = 50 + (count / files.length) * 30;
                    progressFill.style.width = Math.min(pct, 80) + '%';
                }

                progressFill.style.width = '80%';

                let indexName = null;
                for (const filename of Object.keys(zip.files)) {
                    const lower = filename.toLowerCase();
                    if (lower.endsWith('index.html') || lower.endsWith('index.htm')) {
                        indexName = filename;
                        break;
                    }
                }
                if (!indexName) {
                    for (const filename of Object.keys(zip.files)) {
                        const lower = filename.toLowerCase();
                        if (lower.endsWith('.html') || lower.endsWith('.htm')) {
                            indexName = filename;
                            break;
                        }
                    }
                }
                if (!indexName) throw new Error('No HTML file found in ZIP!');

                const indexDir = indexName.substring(0, indexName.lastIndexOf('/') + 1) || '';

                const iframeHtml = `
                <!DOCTYPE html>
                <html>
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
                    <title>Game</title>
                    <style>
                        html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:#000; }
                        #loading {
                            position: fixed;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            color: #fff;
                            font-family: Arial, sans-serif;
                            font-size: 20px;
                            z-index: 9999;
                            text-align: center;
                        }
                        #loading .spinner {
                            display: inline-block;
                            width: 40px;
                            height: 40px;
                            border: 4px solid #333;
                            border-top-color: #e94560;
                            border-radius: 50%;
                            animation: spin 0.8s linear infinite;
                            margin-bottom: 16px;
                        }
                        @keyframes spin { to { transform: rotate(360deg); } }
                    </style>
                </head>
                <body>
                    <div id="loading">
                        <div class="spinner"></div>
                        <div>Loading game...</div>
                    </div>

                    <script>
                        const ASSETS = ${JSON.stringify(blobUrls)};
                        const INDEX_DIR = '${indexDir}';

                        function resolvePath(base, rel) {
                            const parts = base.split('/');
                            if (base.endsWith('/')) parts.pop();
                            const relParts = rel.split('/');
                            for (const p of relParts) {
                                if (p === '.' || p === '') continue;
                                if (p === '..') parts.pop();
                                else parts.push(p);
                            }
                            return parts.join('/');
                        }

                        function rewriteURL(url) {
                            if (!url || typeof url !== 'string') return url;
                            if (url.startsWith('blob:') || url.startsWith('data:') || 
                                url.startsWith('http://') || url.startsWith('https://')) {
                                return url;
                            }

                            // Try exact match
                            if (ASSETS[url]) return ASSETS[url];

                            // Try resolve relative to index directory
                            let resolved = url;
                            if (!url.startsWith('/')) {
                                resolved = resolvePath(INDEX_DIR, url);
                            } else {
                                resolved = url.substring(1); // remove leading slash
                            }
                            if (ASSETS[resolved]) return ASSETS[resolved];

                            // Try just filename (with query strip)
                            const filename = url.split('/').pop().split('?')[0];
                            if (ASSETS[filename]) return ASSETS[filename];

                            // Search all keys
                            for (const key of Object.keys(ASSETS)) {
                                if (key.endsWith(filename) || key.includes(filename)) {
                                    return ASSETS[key];
                                }
                            }

                            // Try with common prefixes
                            const prefixes = ['', 'assets/', 'js/', 'css/', 'img/', 'audio/', 'dat/', 'fnt/', 'src/', 'lib/', 'scripts/'];
                            for (const prefix of prefixes) {
                                const withPrefix = resolvePath(INDEX_DIR, prefix + url);
                                if (ASSETS[withPrefix]) return ASSETS[withPrefix];
                                // without index dir
                                if (ASSETS[prefix + url]) return ASSETS[prefix + url];
                            }

                            return url;
                        }

                        // --- Interceptors ---

                        const OriginalURL = window.URL;
                        const SafeURL = function(url, base) {
                            try {
                                if (typeof url === 'string' && (url.startsWith('blob:') || url.startsWith('data:') || 
                                    url.startsWith('http://') || url.startsWith('https://'))) {
                                    return new OriginalURL(url, base);
                                }
                                const rewritten = rewriteURL(url);
                                if (rewritten && rewritten !== url) {
                                    return new OriginalURL(rewritten, base);
                                }
                                return new OriginalURL('about:blank');
                            } catch(e) {
                                return new OriginalURL('about:blank');
                            }
                        };
                        SafeURL.prototype = OriginalURL.prototype;
                        Object.assign(SafeURL, OriginalURL);
                        window.URL = SafeURL;

                        const OriginalWorker = window.Worker;
                        window.Worker = function(scriptURL, options) {
                            try {
                                const rewritten = rewriteURL(scriptURL);
                                return new OriginalWorker(rewritten, options);
                            } catch(e) {
                                return fetch(rewriteURL(scriptURL))
                                    .then(r => r.text())
                                    .then(code => {
                                        const blob = new Blob([code], { type: 'application/javascript' });
                                        const blobUrl = URL.createObjectURL(blob);
                                        return new OriginalWorker(blobUrl, options);
                                    })
                                    .catch(() => {
                                        const blob = new Blob(['// empty worker'], { type: 'application/javascript' });
                                        const blobUrl = URL.createObjectURL(blob);
                                        return new OriginalWorker(blobUrl, options);
                                    });
                            }
                        };
                        window.Worker.prototype = OriginalWorker.prototype;
                        Object.setPrototypeOf(window.Worker, OriginalWorker);

                        const OriginalSharedWorker = window.SharedWorker;
                        if (OriginalSharedWorker) {
                            window.SharedWorker = function(scriptURL, options) {
                                try {
                                    const rewritten = rewriteURL(scriptURL);
                                    return new OriginalSharedWorker(rewritten, options);
                                } catch(e) {
                                    return new OriginalSharedWorker('about:blank', options);
                                }
                            };
                            window.SharedWorker.prototype = OriginalSharedWorker.prototype;
                            Object.setPrototypeOf(window.SharedWorker, OriginalSharedWorker);
                        }

                        const OriginalWebSocket = window.WebSocket;
                        if (OriginalWebSocket) {
                            window.WebSocket = function(url, protocols) {
                                try {
                                    return new OriginalWebSocket(rewriteURL(url), protocols);
                                } catch(e) {
                                    return new OriginalWebSocket('about:blank', protocols);
                                }
                            };
                            window.WebSocket.prototype = OriginalWebSocket.prototype;
                            Object.setPrototypeOf(window.WebSocket, OriginalWebSocket);
                        }

                        const OriginalEventSource = window.EventSource;
                        if (OriginalEventSource) {
                            window.EventSource = function(url, eventSourceInitDict) {
                                try {
                                    return new OriginalEventSource(rewriteURL(url), eventSourceInitDict);
                                } catch(e) {
                                    return new OriginalEventSource('about:blank', eventSourceInitDict);
                                }
                            };
                            window.EventSource.prototype = OriginalEventSource.prototype;
                            Object.setPrototypeOf(window.EventSource, OriginalEventSource);
                        }

                        const origFetch = 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 origFetch.call(this, resource, init);
                        };

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

                        const origOpenWin = window.open;
                        window.open = function(url, name, features) {
                            return origOpenWin.call(this, rewriteURL(url), name, features);
                        };

                        const origLocationAssign = location.assign;
                        location.assign = function(url) {
                            return origLocationAssign.call(this, rewriteURL(url));
                        };
                        const origLocationReplace = location.replace;
                        location.replace = function(url) {
                            return origLocationReplace.call(this, rewriteURL(url));
                        };
                        const locDesc = Object.getOwnPropertyDescriptor(Location.prototype, 'href');
                        if (locDesc) {
                            Object.defineProperty(Location.prototype, 'href', {
                                set: function(value) {
                                    try { locDesc.set.call(this, rewriteURL(value)); } catch(e) {}
                                },
                                get: locDesc.get,
                                configurable: true
                            });
                        }

                        // Image/Media setters
                        const imgDesc = Object.getOwnPropertyDescriptor(Image.prototype, 'src');
                        if (imgDesc) {
                            Object.defineProperty(Image.prototype, 'src', {
                                set(value) { try { imgDesc.set.call(this, rewriteURL(value)); } catch(e) {} },
                                get: imgDesc.get,
                                configurable: true
                            });
                        }

                        const imgElemDesc = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'src');
                        if (imgElemDesc) {
                            Object.defineProperty(HTMLImageElement.prototype, 'src', {
                                set(value) { try { imgElemDesc.set.call(this, rewriteURL(value)); } catch(e) {} },
                                get: imgElemDesc.get,
                                configurable: true
                            });
                        }
                        const imgSrcsetDesc = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'srcset');
                        if (imgSrcsetDesc) {
                            Object.defineProperty(HTMLImageElement.prototype, 'srcset', {
                                set(value) {
                                    try {
                                        const parts = value.split(',').map(p => {
                                            const [url, ...rest] = p.trim().split(/\s+/);
                                            return rewriteURL(url) + (rest.length ? ' ' + rest.join(' ') : '');
                                        });
                                        imgSrcsetDesc.set.call(this, parts.join(', '));
                                    } catch(e) {}
                                },
                                get: imgSrcsetDesc.get,
                                configurable: true
                            });
                        }

                        const linkDesc = Object.getOwnPropertyDescriptor(HTMLLinkElement.prototype, 'href');
                        if (linkDesc) {
                            Object.defineProperty(HTMLLinkElement.prototype, 'href', {
                                set(value) { try { linkDesc.set.call(this, rewriteURL(value)); } catch(e) {} },
                                get: linkDesc.get,
                                configurable: true
                            });
                        }

                        const mediaDesc = Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'src');
                        if (mediaDesc) {
                            Object.defineProperty(HTMLMediaElement.prototype, 'src', {
                                set(value) { try { mediaDesc.set.call(this, rewriteURL(value)); } catch(e) {} },
                                get: mediaDesc.get,
                                configurable: true
                            });
                        }

                        const posterDesc = Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'poster');
                        if (posterDesc) {
                            Object.defineProperty(HTMLVideoElement.prototype, 'poster', {
                                set(value) { try { posterDesc.set.call(this, rewriteURL(value)); } catch(e) {} },
                                get: posterDesc.get,
                                configurable: true
                            });
                        }

                        const OrigAudio = window.Audio;
                        window.Audio = function(src) {
                            const audio = new OrigAudio();
                            if (src) { try { audio.src = rewriteURL(src); } catch(e) {} }
                            return audio;
                        };
                        window.Audio.prototype = OrigAudio.prototype;

                        const OrigFontFace = window.FontFace;
                        window.FontFace = function(family, source, descriptors) {
                            if (typeof source === 'string') {
                                source = source.replace(/url\\(['"]?(.*?)['"]?\\)/g, (match, url) => {
                                    return \`url("\${rewriteURL(url)}")\`;
                                });
                            }
                            return new OrigFontFace(family, source, descriptors);
                        };
                        window.FontFace.prototype = OrigFontFace.prototype;

                        // CSS interception
                        const origInsertRule = CSSStyleSheet.prototype.insertRule;
                        CSSStyleSheet.prototype.insertRule = function(rule, index) {
                            if (typeof rule === 'string') {
                                rule = rule.replace(/url\\(['"]?(.*?)['"]?\\)/g, (match, url) => {
                                    return \`url("\${rewriteURL(url)}")\`;
                                });
                            }
                            return origInsertRule.call(this, rule, index);
                        };
                        const origAddRule = CSSStyleSheet.prototype.addRule;
                        if (origAddRule) {
                            CSSStyleSheet.prototype.addRule = function(selector, style, index) {
                                if (style) {
                                    style = style.replace(/url\\(['"]?(.*?)['"]?\\)/g, (match, url) => {
                                        return \`url("\${rewriteURL(url)}")\`;
                                    });
                                }
                                return origAddRule.call(this, selector, style, index);
                            };
                        }

                        // Override style element content
                        const styleProto = HTMLStyleElement.prototype;
                        const styleTextDesc = Object.getOwnPropertyDescriptor(styleProto, 'textContent');
                        if (styleTextDesc) {
                            Object.defineProperty(styleProto, 'textContent', {
                                set: function(value) {
                                    if (typeof value === 'string') {
                                        value = value.replace(/url\\(['"]?(.*?)['"]?\\)/g, (match, url) => {
                                            return \`url("\${rewriteURL(url)}")\`;
                                        });
                                    }
                                    styleTextDesc.set.call(this, value);
                                },
                                get: styleTextDesc.get,
                                configurable: true
                            });
                        }
                        const styleInnerDesc = Object.getOwnPropertyDescriptor(styleProto, 'innerHTML');
                        if (styleInnerDesc) {
                            Object.defineProperty(styleProto, 'innerHTML', {
                                set: function(value) {
                                    if (typeof value === 'string') {
                                        value = value.replace(/url\\(['"]?(.*?)['"]?\\)/g, (match, url) => {
                                            return \`url("\${rewriteURL(url)}")\`;
                                        });
                                    }
                                    styleInnerDesc.set.call(this, value);
                                },
                                get: styleInnerDesc.get,
                                configurable: true
                            });
                        }

                        // setAttribute interceptor
                        const origSetAttr = Element.prototype.setAttribute;
                        Element.prototype.setAttribute = function(name, value) {
                            const tags = {
                                'SCRIPT': ['src'],
                                'LINK': ['href'],
                                'IMG': ['src', 'srcset'],
                                'SOURCE': ['src', 'srcset'],
                                'IFRAME': ['src'],
                                'AUDIO': ['src'],
                                'VIDEO': ['src', 'poster'],
                                'TRACK': ['src'],
                                'EMBED': ['src'],
                                'OBJECT': ['data'],
                                'STYLE': ['href'] // not typical but just in case
                            };
                            const tag = this.tagName;
                            if (tags[tag] && tags[tag].includes(name) && typeof value === 'string') {
                                try { value = rewriteURL(value); } catch(e) {}
                            }
                            return origSetAttr.call(this, name, value);
                        };

                        // createElement interceptor for script and others
                        const origCreateElement = document.createElement;
                        document.createElement = function(tagName, options) {
                            const el = origCreateElement.call(this, tagName, options);
                            const tag = tagName.toLowerCase();
                            if (tag === 'script') {
                                const origSet = el.setAttribute.bind(el);
                                el.setAttribute = function(name, value) {
                                    if (name === 'src') {
                                        try { value = rewriteURL(value); } catch(e) {}
                                    }
                                    return origSet(name, value);
                                };
                                Object.defineProperty(el, 'src', {
                                    set(value) { try { el.setAttribute('src', rewriteURL(value)); } catch(e) {} },
                                    get() { return el.getAttribute('src'); },
                                    configurable: true
                                });
                            } else if (tag === 'link' || tag === 'img' || tag === 'audio' || tag === 'video' || tag === 'source' || tag === 'iframe' || tag === 'embed' || tag === 'object') {
                                // Already handled by setAttribute interceptor, but also add property setters for safety
                                const props = ['src', 'href', 'srcset', 'poster', 'data'];
                                for (const prop of props) {
                                    if (prop in el) {
                                        const desc = Object.getOwnPropertyDescriptor(el.constructor.prototype, prop);
                                        if (desc) {
                                            Object.defineProperty(el, prop, {
                                                set(value) { try { desc.set.call(this, rewriteURL(value)); } catch(e) {} },
                                                get: desc.get,
                                                configurable: true
                                            });
                                        }
                                    }
                                }
                            }
                            return el;
                        };

                        // MutationObserver to catch any added elements
                        const observer = new MutationObserver((mutations) => {
                            for (const mutation of mutations) {
                                for (const node of mutation.addedNodes) {
                                    if (node.nodeType === 1) {
                                        // Process element and all descendants
                                        const process = (el) => {
                                            const tags = {
                                                'SCRIPT': 'src',
                                                'LINK': 'href',
                                                'IMG': ['src', 'srcset'],
                                                'SOURCE': ['src', 'srcset'],
                                                'IFRAME': 'src',
                                                'AUDIO': 'src',
                                                'VIDEO': ['src', 'poster'],
                                                'TRACK': 'src',
                                                'EMBED': 'src',
                                                'OBJECT': 'data',
                                                'STYLE': 'href'
                                            };
                                            const tag = el.tagName;
                                            if (tags[tag]) {
                                                const attrs = Array.isArray(tags[tag]) ? tags[tag] : [tags[tag]];
                                                for (const attr of attrs) {
                                                    const val = el.getAttribute(attr);
                                                    if (val) {
                                                        const rewritten = rewriteURL(val);
                                                        if (rewritten !== val) {
                                                            try { el.setAttribute(attr, rewritten); } catch(e) {}
                                                        }
                                                    }
                                                }
                                            }
                                            // Also handle style attribute (inline style)
                                            if (el.hasAttribute('style')) {
                                                let style = el.getAttribute('style');
                                                style = style.replace(/url\\(['"]?(.*?)['"]?\\)/g, (match, url) => {
                                                    return \`url("\${rewriteURL(url)}")\`;
                                                });
                                                try { el.setAttribute('style', style); } catch(e) {}
                                            }
                                            // Process children
                                            for (const child of el.children) {
                                                process(child);
                                            }
                                        };
                                        process(node);
                                    }
                                }
                            }
                        });
                        observer.observe(document.documentElement, { childList: true, subtree: true });

                        // ---- LOAD GAME ----
                        async function loadGame() {
                            try {
                                const indexUrl = rewriteURL('${indexName}');
                                const response = await fetch(indexUrl);
                                if (!response.ok) throw new Error('Cannot load index.html');

                                let html = await response.text();

                                // Rewrite all src/href/data in HTML
                                html = html.replace(/(src|href|data|poster)=["']([^"']+)["']/g, (match, attr, value) => {
                                    if (value.startsWith('http') || value.startsWith('blob:') || value.startsWith('data:')) {
                                        return match;
                                    }
                                    try {
                                        return \`\${attr}="\${rewriteURL(value)}"\`;
                                    } catch(e) {
                                        return match;
                                    }
                                });

                                // Also rewrite url() in inline styles
                                html = html.replace(/url\\(['"]?(.*?)['"]?\\)/g, (match, url) => {
                                    try {
                                        return \`url("\${rewriteURL(url)}")\`;
                                    } catch(e) {
                                        return match;
                                    }
                                });

                                const loading = document.getElementById('loading');
                                if (loading) loading.remove();

                                document.open();
                                document.write(html);
                                document.close();

                                setTimeout(() => {
                                    window.dispatchEvent(new Event('resize'));
                                }, 200);
                            } catch (err) {
                                console.error(err);
                                const loading = document.getElementById('loading');
                                if (loading) {
                                    loading.innerHTML = '<div style="color:#f44336;">❌ Error: ' + err.message + '</div>';
                                }
                            }
                        }

                        if (document.readyState === 'complete') {
                            loadGame();
                        } else {
                            window.addEventListener('load', loadGame);
                        }
                    <\/script>
                </body>
                </html>
                `;

                const iframeBlob = new Blob([iframeHtml], { type: 'text/html' });
                const iframeUrl = URL.createObjectURL(iframeBlob);
                gameFrame.src = iframeUrl;

                progressFill.style.width = '100%';
                showStatus('✅ Game loaded!', 'success');

                setTimeout(() => {
                    uploader.style.display = 'none';
                    gameContainer.classList.add('active');
                    backBtn.classList.add('show');
                    document.body.style.overflow = 'hidden';
                }, 500);

            } catch (err) {
                console.error(err);
                showStatus('❌ Error: ' + err.message + '\n' + (err.stack || ''), 'error');
                progressFill.style.width = '0%';
            } finally {
                isProcessing = false;
                setTimeout(() => {
                    progressBar.classList.remove('active');
                }, 2000);
            }
        }

        (function() {
            if (typeof JSZip === 'undefined') {
                const check = setInterval(() => {
                    if (typeof JSZip !== 'undefined') {
                        clearInterval(check);
                        console.log('JSZip ready');
                    }
                }, 100);
            }
        })();
    </script>
</body>
</html>

This is the code, yes it is AI my bad

Help #33

Description

Activity

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions