download.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flash compiler</title>
    <meta name="theme-color" content="#37528c" />
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #37528c;
            color: #fff;
            overflow: hidden;
            height: 100vh;
            width: 100vw;
        }
        #loading-screen, #offline-screen {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #37528cd3;
            color: #fff;
            text-align: center;
            padding: 0;
            margin: 0;
        }
        #loading-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s;
        }
        #progress-bar {
            width: 80%;
            max-width: 600px;
            background-color: #4a6ebd;
            border-radius: 5px;
            overflow: hidden;
            margin-top: 20px;
            border: solid 1px #2d4372;
        }
        #progress-bar div {
            height: 20px;
            width: 0;
            background-color: #537bd1;
            text-align: center;
            line-height: 20px;
            color: #fff;
            font-weight: bold;
        }
        #download-button {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #4364ac;
            border: none;
            color: #fff;
            padding: 15px 30px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            border: solid 1px #2d4372;
            opacity: 0;
            transition: opacity 0.5s;
        }
    </style>
</head>
<body>
    <div id="loading-screen">
        <h1>Preparing game files...</h1>
        <div id="progress-bar"><div></div></div>
    </div>
    <div id="offline-screen">
        <h1>The game failed to download</h1>
        <p>Please ensure you have an active internet connection or try again later.</p>
    </div>
    <button id="download-button">Download [gamename]</button>
    <script>
        try {
            var getGameFromUrl = async function() {
                var urlParams = new URLSearchParams(window.location.search);
                var gameName = urlParams.get('game');
                if (!gameName) {
                    alert('No game specified in URL');
                    document.getElementById('loading-screen').style.display = 'none';
                    return;
                } document.title = "Compiling " + gameName;

                var loadingScreen = document.getElementById('loading-screen');
                var progressBar = document.getElementById('progress-bar').firstElementChild;
                var downloadButton = document.getElementById('download-button');
                var offlineScreen = document.getElementById('offline-screen');
                
                loadingScreen.style.display = 'flex';
                offlineScreen.style.display = 'none';
                downloadButton.style.display = 'none';
    
                var response = await fetch('games/' + gameName + '.swf');
                if (!response.ok) {
                    loadingScreen.style.display = 'none';
                    document.getElementById('offline-screen').style.display = 'block';
                    return;
                }
    
                var reader = response.body.getReader();
                var contentLength = +response.headers.get('Content-Length');
                var receivedLength = 0;
                var chunks = [];
                
                while (true) {
                    var result = await reader.read();
                    if (result.done) break;
                    chunks.push(result.value);
                    receivedLength += result.value.length;
                    progressBar.style.width = (receivedLength / contentLength * 100) + '%';
                    progressBar.textContent = Math.round(receivedLength / contentLength * 100) + '%';
                }
    
                var arrayBuffer = new Uint8Array(await new Response(new Blob(chunks)).arrayBuffer());
                var base64 = btoa(
                    arrayBuffer.reduce(function(data, byte) {
                        return data + String.fromCharCode(byte);
                    }, '')
                );
                var dataUri = 'data:application/x-shockwave-flash;base64,' + base64;
    
                var downloadHtml = `
<!DOCTYPE html>
<!-- Compiled from ${window.location.href} -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${gameName}.swf</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #000;
            color: #fff;
            overflow: hidden;
            height: 100vh;
            width: 100vw;
        }
        #offline-screen {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            color: #000;
            text-align: center;
            padding-top: 20%;
        }
    </style>
    <script>
        function fixruffle() {
            try {
                var shadowHost = document.querySelector('ruffle-object');
                var shadowRoot = shadowHost.shadowRoot;
                var container = shadowRoot.querySelector('#container');
                
                var style = document.createElement('style');
                style.textContent = \`
                  #save-manager, #volume-controls-modal {
                    width: 100vw;
                    height: 100vh;
                  }
                  #modal-area {
                    /*margin-top: calc(50% - 350px);*/
                    margin-top: 15vh;
                    width: 70vw;
                    height: 60vh;
                    max-height: 70vh;
                    min-width: 250px;
                    min-height: 100px;
                    max-width: 90vh
                  }
                  #volume-controls-modal > div:nth-child(1) {
                      margin-top: 40vh;
                  }
                \`;
                
                shadowRoot.appendChild(style);

                if (container) {
                    container.style.width = '100vw';
                    container.style.height = '100vh';
                }
            } catch(err) {
                console.warn("Ignored error:", err)
            }
        }

        function displaymessage(msg, time) {
          const message = document.createElement("div");
          message.innerHTML = msg;
          message.style.position = "fixed";
          message.style.top = "0";
          message.style.right = "0";
          message.style.zIndex = "9999";
          message.style.backgroundColor = "#333";
          message.style.color = "#fff";
          message.style.padding = "10px";
          message.style.opacity = "0";
          message.style.transition = "opacity 0.5s";
          document.body.appendChild(message);
          
          setTimeout(() => {
              message.style.opacity = "1";
          }, 100);
          setTimeout(() => {
              message.style.opacity = "0";
          }, time);
          setTimeout(() => {
              document.body.removeChild(message);
          }, time+600);
        }

        var ruffleused = false;
        function loadruffle() { 
            document.getElementById('gameListContainer').style.display = 'none';
            setTimeout(function () {
                fixruffle();
            }, 1000);
            setTimeout(function () {
                fixruffle();
            }, 500);
            setTimeout(function () {
                fixruffle();
            }, 3000);
            
            var ruffleScript = document.createElement('script');
            ruffleScript.src = 'https://unpkg.com/@ruffle-rs/ruffle';
            ruffleScript.onload = function() {
                document.getElementById('offline-screen').style.display = 'none';
            };
            ruffleScript.onerror = function() {
                document.getElementById('offline-screen').style.display = 'block';
            };
            if (!ruffleused) {
                document.head.appendChild(ruffleScript);
                ruffleused = true;
            }

            setTimeout(function() {
                if (!ruffleused) {
                    document.getElementById('offline-screen').style.display = 'block';
                }
            }, 3000);
        }
    <\/script>
</head>
<body onload="loadruffle()">
    <object id="game-object" type="application/x-shockwave-flash" data="${dataUri}" width="100%" height="100%">
        <param name="movie" value="${dataUri}" />
        <param name="allowScriptAccess" value="always" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
    </object>
    <div id="gameListContainer" style="display: none;"></div>
    <div id="offline-screen">
        <h1>Ruffle failed to load</h1>
        <p>Please ensure you have an active internet connection or try again later.</p>
    </div>
</body>
</html>`;
    
                var blob = new Blob([downloadHtml], { type: 'text/html' });
                var url = URL.createObjectURL(blob);
                downloadButton.textContent = 'Download ' + gameName;
                downloadButton.style.display = 'block';
                setTimeout(function() {
                    downloadButton.style.opacity = 1;
                    document.title = "Download " + gameName;
                }, 500);
    
                downloadButton.addEventListener('click', function() {
                    var a = document.createElement('a');
                    a.href = url;
                    a.download = gameName + '.html';
                    a.click();
                });
    
                loadingScreen.style.opacity = 0;
                setTimeout(function() {
                    loadingScreen.style.display = 'none';
                }, 500);
            }
    
            getGameFromUrl();
        } catch(err) {
            document.getElementById('offline-screen').style.display = 'block';
        }
    </script>
</body>
</html>