index.html

<!DOCTYPE html>
<html>
    <head>
        <title>EmulatorJS | Demo</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/vnd.microsoft.icon">
        <link rel="apple-touch-icon" href="img/icon.png" />
        <link rel="manifest" href="manifest.json" />
        <meta name="theme-color" content="#000"/>
        <style>
            body, html {
                height: 100%;
                background-color: black;
                color: white;
            }

            body {
                margin: 0;
                overflow: hidden;
            }

            body, #box, #top {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }

            #box {
                color: #aaa;
                height: 20em;
                width: 30em;
                max-width: 80%;
                max-height: 80%;
                background-color: #333;
                border-radius: 0.4em;
                border: 2px solid #555;
                position: relative;
                flex-direction: column;
                transition-duration: 0.2s;
                overflow: hidden;
                font-family: monospace;
                font-weight: bold;
                font-size: 20px;
                margin: 5px;
                padding: 10px;
                text-align: center;
            }

            #box:hover, #box[drag] {
                border-color: #38f;
                color: #ddd
            }

            #input {
                cursor: pointer;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }

            #display {
                width: 100%;
                height: 100%
            }

            select, button {
                padding: 0 0.4em;
                margin: 0.5em 0.1em;
                width: 15em;
                max-width: 100%;
                font-family: monospace;
                font-weight: bold;
                font-size: 16px;
                background-color: #444;
                color: #aaa;
                border-radius: 0.4em;
                border: 1px solid #555;
                cursor: pointer;
                transition-duration: 0.2s;
                vertical-align:top;
                height: 2.5em;
            }

            select:hover, button:hover {
                background-color: #666;
                color: #ddd
            }

            .logo {
                width: 130px;
                height: 130px;
                filter: drop-shadow(0 0 10px white);
            }

            #top, #version {
                margin: 5px;
            }

            #version button {
                fill: #aaa;
                width: auto;
                padding: 0.2em 0.3em;
                text-align: center;
                margin: 0.5em 0.1em;
            }
            #version svg {
                margin-top: 0.05em;
                margin-left: 0.05em;
                width: 1.8em;
            }
            .popup {
                position: fixed;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                z-index: 2000;
                visibility: hidden;
                -webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
                backface-visibility: hidden;
            }
            .popup .content {
                background-color: #333;
                border-radius: 0.4em;
                border: 2px solid #555;
                padding: 1em;
                max-width: 80%;
                max-height: 80%;
                min-width: 30%;
                width: min-content;
                position: fixed;
            }
            .show {
                visibility: visible;
            }
            .popup-overlay {
                position: fixed;
                width: 100%;
                height: 100%;
                visibility: hidden;
                top: 0;
                left: 0;
                z-index: 1000;
                opacity: 0;
                background-color: rgba(0, 0, 0, 0.5);
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
            }
            .show ~ .popup-overlay {
                opacity: 1;
                visibility: visible;
            }
            .popup-animate .content {
                -webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
                -ms-transform: translateX(-50%) translateY(-50%) scale(0.7);
                transform: translateX(-50%) translateY(-50%) scale(0.7);
                opacity: 0;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
            }
            .show.popup-animate .content {
                -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
                -ms-transform: translateX(-50%) translateY(-50%) scale(1);
                transform: translateX(-50%) translateY(-50%) scale(1);
                opacity: 1;
            }
            .popup .title, .popup .options p {
                display: flex;
                align-items: center;
            }
            .popup .options p {
                margin: 1em 0;
                font-size: 18px;
            }
            .popup .title h1 {
                margin: 0 0 0.3em;
                font-size: 48px;
            }
            .popup .options button {
                width: auto;
                padding: 0 0.5em;
                font-weight: bold;
                margin: 0 0.5em;
                font-size: 14px;
                border-radius: 0.4em;
            }
            .popup .bottom {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-top: 1em;
            }
            #installbox {
                display: inline-flex;
                align-items: baseline;
            }
            #installboxtext {
                margin-top: 0 !important;
            }
            button:disabled {
                background-color: #666;
                color: #aaa;
                cursor: not-allowed;
            }
            .hide {
                display: none !important;
            }
        </style>
    </head>
    <body>
        <div id="top">
            <h1>EmulatorJS Demo</h1>
            <img src="img/logo-light.png" alt="Logo" class="logo">
        </div>
        <div id="box">
            <input type="file" id="input">
            Drag ROM file or click here
        </div>
        <div id="version">
            <select id="version-select"></select>
            <button id="download" class="hide" onclick="downloadversion()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2m2.354 6.854-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708"/>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 16 16">
                    <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2m2.354 4.854-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708"/>
                </svg>
            </button>
            <button id="settings" onclick="openSettings()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
                </svg>
            </button>
        </div>
        <div id="popup-settings" class="popup popup-animate">
            <div class="content">
                <div class="title">
                    <h1>Settings</h1>
                </div>
                <div class="options">
                    <p id="offline-status">Offline Status: CHECKING</p>
                    <p>Offline Cores will be available soon.</p>
                    <p class="hide">Remove All Saved Versions: <button id="remove-version" onclick="removeallsaved()">Remove All</button></p>
                    <div id="installbox"><p id="installboxtext">Install PWA:</p> <button id="install">Install</button></div>
                    </div>
                <div class="bottom">
                    <button onclick="closeSettings()">Close</button>
                </div>
            </div>
        </div>
        <div class="popup-overlay"></div>
        <script>
            if ("serviceWorker" in navigator) {
                const req = navigator.serviceWorker.register("sw.js");
                console.log(req);
            };
            loadJSON("/versions", (response) => {
                if (!response) {
                    loadJSON("https://cdn.emulatorjs.org/versions.json", resp => loadVersions(resp));
                    document.getElementById("offline-status").textContent = "Offline Status: NOT INSTALLED";
                } else {
                    loadVersions(response);
                    document.getElementById("offline-status").textContent = "Offline Status: READY";
                }
            });
            function loadVersions(response) {
                const version_select = document.getElementById("version-select");
                var versions = JSON.parse(response);
                version_select.innerHTML = "";
                addOptions(version_select, versions.releases, versions.default, versions.github);
                addOptions(version_select, versions.versions, versions.default);
                version_select.addEventListener("change", () => {
                    localStorage.setItem("version", version_select[version_select.selectedIndex].textContent);
                    window.cdn = "https://cdn.emulatorjs.org/" + version_select[version_select.selectedIndex].value + "data/";
                });
            }
            input.addEventListener("change", async () => {
                const url = input.files[0];
                const parts = input.files[0].name.split(".");

                const core = await (async (ext) => {
                    if (["fds", "nes", "unif", "unf"].includes(ext))
                        return "nes"

                    if (["smc", "fig", "sfc", "gd3", "gd7", "dx2", "bsx", "swc"].includes(ext))
                        return "snes"

                    if (["z64", "n64"].includes(ext))
                        return "n64"

                    if (["pce"].includes(ext))
                        return "pce"

                    if (["ngp", "ngc"].includes(ext))
                        return "ngp"

                    if (["ws", "wsc"].includes(ext))
                        return "ws"

                    if (["col", "cv"].includes(ext))
                        return "coleco"

                    if (["d64"].includes(ext))
                        return "vice_x64"

                    if (["nds", "gba", "gb", "z64", "n64"].includes(ext))
                        return ext

                    return await new Promise(resolve => {
                        const cores = {
                            "Nintendo 64": "n64",
                            "Nintendo Game Boy": "gb",
                            "Nintendo Game Boy Advance": "gba",
                            "Nintendo DS": "nds",
                            "Nintendo Entertainment System": "nes",
                            "Super Nintendo Entertainment System": "snes",
                            "PlayStation": "psx",
                            "Virtual Boy": "vb",
                            "Sega Mega Drive": "segaMD",
                            "Sega Master System": "segaMS",
                            "Sega CD": "segaCD",
                            "Atari Lynx": "lynx",
                            "Sega 32X": "sega32x",
                            "Atari Jaguar": "jaguar",
                            "Sega Game Gear": "segaGG",
                            "Sega Saturn": "segaSaturn",
                            "Atari 7800": "atari7800",
                            "Atari 2600": "atari2600",
                            "NEC TurboGrafx-16/SuperGrafx/PC Engine": "pce",
                            "NEC PC-FX": "pcfx",
                            "SNK NeoGeo Pocket (Color)": "ngp",
                            "Bandai WonderSwan (Color)": "ws",
                            "ColecoVision": "coleco",
                            "Commodore 64": "vice_x64",
                            "PlayStation Portable": "psp"
                        }

                        const button = document.createElement("button")
                        const select = document.createElement("select")

                        for (const type in cores) {
                            const option = document.createElement("option")

                            option.value = cores[type]
                            option.textContent = type
                            select.appendChild(option)
                        }

                        button.onclick = () => resolve(select[select.selectedIndex].value)
                        button.textContent = "Load game"
                        box.innerHTML = ""

                        box.appendChild(select)
                        box.appendChild(button)
                    })
                })(parts.pop())

                const div = document.createElement("div")
                const sub = document.createElement("div")
                const script = document.createElement("script")

                sub.id = "game"
                div.id = "display"

                const top = document.getElementById("top");
                const version = document.getElementById("version");
                top.remove();
                version.remove();
                box.remove();
                div.appendChild(sub)
                document.body.appendChild(div)

                const cdn = window.cdn || "https://cdn.emulatorjs.org/stable/data/"

                window.EJS_player = "#game";
                window.EJS_gameName = parts.shift();
                window.EJS_biosUrl = "";
                window.EJS_gameUrl = url;
                window.EJS_core = core;
                window.EJS_pathtodata = cdn;
                window.EJS_startOnLoaded = true;
                window.EJS_AdUrl = "ads.html";
                if (core === "psp") {
                    window.EJS_threads = true;
                }
                window.EJS_ready = function() {
                    detectAdBlock("data:text/html;base64,DQo8aHRtbD48c3R5bGU+I2FkYmxvY2t7YmFja2dyb3VuZC1jb2xvcjpyZ2JhKDAsMCwwLC44KTtwb3NpdGlvbjpmaXhlZDt3aWR0aDoxMDAlO2hlaWdodDoxMDAlO3RvcDowO2xlZnQ6MDt6LWluZGV4OjEwMDA7dGV4dC1hbGlnbjpjZW50ZXI7Y29sb3I6I2ZmZn1ib2R5LGh0bWx7YmFja2dyb3VuZC1jb2xvcjp0cmFuc3BhcmVudH1hIHtjb2xvcjogIzAwYWZlNDt9PC9zdHlsZT48Ym9keSBzdHlsZT0ibWFyZ2luOjAiPjxkaXYgaWQ9ImFkYmxvY2siPjxoMT5IaSBBZGJsb2NrIFVzZXIhPC9oMT48cD5BZHMgb24gdGhpcyBwYWdlIG1heSBjb21lIGFuZCBnbyBkZXBlbmRpbmcgb24gaG93IG1hbnkgcGVvcGxlIGFyZSBmdW5kaW5nIHRoaXMgcHJvamVjdC48YnI+WW91IGNhbiBoZWxwIGZ1bmQgdGhpcyBwcm9qZWN0IG9uIDxhIHRhcmdldD0iX2Fib3V0IiBocmVmPSJodHRwczovL3BhdHJlb24uY29tL0VtdWxhdG9ySlMiPnBhdHJlb248L2E+PC9wPjwvZGl2PjwvYm9keT48L2h0bWw+");
                }
                
                script.src = cdn + "loader.js";
                document.body.appendChild(script);
            });

            box.ondragover = () => box.setAttribute("drag", true);
            box.ondragleave = () => box.removeAttribute("drag");

            function detectAdBlock(url) {
                let adBlockEnabled = false;
                try {
                    const adframe = document.querySelector('iframe[src="'+window.EJS_AdUrl+'"]');
                    var adpage = adframe.contentWindow.document;
                    window.EJS_AdUrl = adframe.src;
                    if (!adpage) {
                        adBlockEnabled = true;
                    }
                } catch (e) {
                    adBlockEnabled = true;
                }
                if (adBlockEnabled) {
                    window.EJS_adBlocked(url);
                    
                }
            }

            function loadJSON(url, callback) {
                var xobj = new XMLHttpRequest();
                xobj.overrideMimeType("application/json");
                xobj.open('GET', url, true);

                xobj.onreadystatechange = function () {
                    if (xobj.readyState === 4) {
                        if (xobj.status === 200) {
                            callback(xobj.responseText);
                        } else {
                            callback(null);
                        }
                    }
                };

                xobj.send();
            }


            function addOptions(select, options, default_option, github) {
                for (const version in options) {
                    const option = document.createElement("option");
                    option.value = options[version];
                    if (version == "stable"){
                        option.textContent = "stable ("+github+")";
                    } else {
                        option.textContent = version;
                    }
                    if (localStorage.getItem("version") && localStorage.getItem("version") === version) {
                        option.selected = true;
                        window.cdn = "https://cdn.emulatorjs.org/" + option.value + "data/";
                    } else if (version.includes(default_option)) {
                        option.selected = true;
                        window.cdn = "https://cdn.emulatorjs.org/" + option.value + "data/";
                    }
                    select.appendChild(option);
                }
            }

            function openSettings() {
                document.getElementById("popup-settings").classList.add("show");
                if (localStorage.getItem("pwa") == "false") {
                    checkinstall();
                }
            }

            function closeSettings() {
                document.getElementById("popup-settings").classList.remove("show");
            }

            let installPrompt = null;
            const installButton = document.querySelector("#install");
            const installBox = document.querySelector("#installbox");
            const installBoxText = document.querySelector("#installboxtext");
            localStorage.setItem("pwa", "false");

            window.addEventListener("beforeinstallprompt", (event) => {
                event.preventDefault();
                installPrompt = event;
                localStorage.setItem("pwa", "true");
                installButton.textContent = "Install";
                installButton.disabled = false;
                console.log("Supported");
            });
            installButton.addEventListener("click", async () => {
                if (!installPrompt) {
                    return;
                }
                const result = await installPrompt.prompt();
                console.log(`Install prompt was: ${result.outcome}`);
                installPrompt = null;
            });
            function checkinstall(overide) {
                console.log("Checking install");
                if (navigator.userAgent.includes("Firefox") || (navigator.userAgent.includes("OPR") && !navigator.userAgent.includes("Mobile"))) {
                    installButton.style.display = "none";
                    installBoxText.innerHTML = "PWA's are not supported on this browser.";
                    return;
                }
                if (window.matchMedia('(display-mode: standalone)').matches || overide) {
                    installButton.textContent = "Installed";
                    installButton.disabled = true;
                    installButton.style.display = "inline";
                    installBoxText.innerHTML = "Install PWA: ";
                } else {
                    installButton.style.display = "none";
                    if (navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome")) {
                        installBoxText.innerHTML = "PWA's are supported on this browser, but prompt is not supported.<br> Please install manually";
                        return;
                    }
                    if ('getInstalledRelatedApps' in navigator) {
                        navigator.getInstalledRelatedApps().then((relatedApps) => {
                            if (relatedApps.length > 0) {
                                checkinstall(true);
                                return;
                            }
                        });
                    }
                    installBoxText.innerHTML = "PWA is either already installed, or prompt is not supported on this browser.<br> Please install manually.<br>Note: PWA's are not supported in Incognito/Private mode.";
                }
                
            }
            document.addEventListener('visibilitychange', function() {
                window.matchMedia('(display-mode: standalone)').addListener(event => {
                    if (event.matches) {
                        checkinstall(true);
                    }
                });
            });
        </script>
    </body>
</html>