shell.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' 'unsafe-inline' data: blob:;">
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
    <link rel="apple-touch-icon" href="assets/apple-touch-icon.png">
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#2c2c2c">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Carousel</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #2c2c2c;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }
        
        #canvas-container {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        canvas {
            touch-action: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            outline: none;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        #status {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-align: center;
            z-index: 1000;
        }
        
        .spinner {
            height: 30px;
            width: 30px;
            margin: 20px;
            display: inline-block;
            vertical-align: top;
            animation: rotation 1s linear infinite;
            border: 4px solid #ffffff;
            border-top: 4px solid #787878;
            border-radius: 100%;
        }
        
        @keyframes rotation {
            from {transform: rotate(0deg)}
            to {transform: rotate(359deg)}
        }

        @media (max-width: 768px) {
            canvas {
                width: 100%;
                height: auto;
            }
        }
    </style>
</head>
<body>
    <div id="status">Loading...</div>
    <div class="spinner" id='spinner'></div>
    <div class="emscripten" id="canvas-container">
        <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
        <input type="text" id="hidden-input" style="position: absolute; opacity: 0; height: 0; width: 0;">
    </div>
    <script type='text/javascript'>
        var statusElement = document.getElementById('status');
        var spinnerElement = document.getElementById('spinner');
        var canvas = document.getElementById('canvas');
        var container = document.getElementById('canvas-container');

        function resizeCanvas() {
            var windowWidth = window.innerWidth;
            var windowHeight = window.innerHeight;
            var scale = Math.min(windowWidth / 800, windowHeight / 600);
            
            canvas.style.width = Math.floor(800 * scale) + 'px';
            canvas.style.height = Math.floor(600 * scale) + 'px';
        }

        window.addEventListener('resize', resizeCanvas);
        window.addEventListener('orientationchange', resizeCanvas);

        var Module = {
            preRun: [],
            postRun: [
                function() {
                    statusElement.style.display = 'none';
                    spinnerElement.style.display = 'none';
                    resizeCanvas();
                }
            ],
            print: (function() {
                return function(text) {
                    if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
                    console.log(text);
                };
            })(),
            printErr: function(text) {
                if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
                console.error(text);
            },
            canvas: (function() {
                canvas.addEventListener("webglcontextlost", function(e) { 
                    alert('WebGL context lost. You will need to reload the page.'); 
                    e.preventDefault(); 
                }, false);
                return canvas;
            })(),
            setStatus: function(text) {
                if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
                if (text === Module.setStatus.last.text) return;
                var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
                var now = Date.now();
                if (m && now - Module.setStatus.last.time < 30) return;
                Module.setStatus.last.time = now;
                Module.setStatus.last.text = text;
                if (m) {
                    text = m[1];
                    spinnerElement.hidden = false;
                } else {
                    if (!text) spinnerElement.hidden = true;
                }
                statusElement.innerHTML = text;
            }
        };
        Module.setStatus('Downloading...');
        window.onerror = function() {
            Module.setStatus('Exception thrown, see JavaScript console');
            spinnerElement.style.display = 'none';
            Module.setStatus = function(text) {
                if (text) console.error('[post-exception status] ' + text);
            };
        };

        document.addEventListener('DOMContentLoaded', function() {
            const hiddenInput = document.getElementById('hidden-input');

            function focusInput(e) {
                hiddenInput.focus();
                if (e.type === 'touchstart') {
                    e.preventDefault();
                    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
                        hiddenInput.click();
                    }
                }
            }

            canvas.addEventListener('click', focusInput);
            canvas.addEventListener('touchstart', focusInput);


            hiddenInput.addEventListener('keydown', function(e) {
                if (e.key === 'Backspace') {
                    Module.ccall('ProcessKeyPress', 'void', ['number'], [8]);
                    e.preventDefault();
                }
                else if (e.key === 'Enter') {
                    Module.ccall('ProcessKeyPress', 'void', ['number'], [13]);
                    hiddenInput.value = '';
                    e.preventDefault();
                }
            });

            hiddenInput.addEventListener('input', function(e) {
                if (e.data) {
                    for (let i = 0; i < e.data.length; i++) {
                        const key = e.data.charCodeAt(i);
                        if (key >= 32 && key <= 125) {
                            Module.ccall('ProcessKeyPress', 'void', ['number'], [key]);
                        }
                    }
                }
                hiddenInput.value = '';
            });

            hiddenInput.focus();
        });

    mergeInto(LibraryManager.library, {
        js_saveToLocalStorage: function(key, value) {
            var keyStr = UTF8ToString(key);
            var valueStr = UTF8ToString(value);
            try {
                localStorage.setItem(keyStr, valueStr);
            } catch(e) {
                console.error("Failed to save to localStorage:", e);
            }
        },
        js_loadFromLocalStorage: function(key) {
            var keyStr = UTF8ToString(key);
            try {
                var value = localStorage.getItem(keyStr);
                if (value === null) return 0;
                var bufferSize = lengthBytesUTF8(value) + 1;
                var buffer = _malloc(bufferSize);
                stringToUTF8(value, buffer, bufferSize);
                return buffer;
            } catch(e) {
                console.error("Failed to load from localStorage:", e);
                return 0;
            }
        }
    });
    
    </script>
    {{{ SCRIPT }}}

    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('./service-worker.js')
                    .then(registration => {
                        console.log('ServiceWorker registration successful');
                    })
                    .catch(err => {
                        console.log('ServiceWorker registration failed: ', err);
                    });
            });
        }
    </script>
</body>
</html>