From 00a6db332b02d31a400efe430cd4b061857759da Mon Sep 17 00:00:00 2001
From: Allan Niles <allancoding.dev@gmail.com>
Date: Thu, 26 Dec 2024 12:57:32 -0700
Subject: [PATCH 1/7] add Offline Cores

---
 index.html | 1258 ++++++++++++++++++++++++++++++----------------------
 sw.js      |  185 +++++---
 2 files changed, 859 insertions(+), 584 deletions(-)
diff --git a/index.html b/index.html
index 1951b8b..4bd0015 100644
--- a/index.html
+++ b/index.html
@@ -1,532 +1,742 @@
 <!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">
+  <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;
+      }
+
+      .offline-cores {
+        margin: 1em 0;
+        font-size: 18px;
+      }
+
+      #cores-form {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        max-height: 160px;
+        overflow-y: auto;
+        padding: 10px 0;
+      }
+    </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">
+        <option value="stable">Loading...</option>
+      </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 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>
+        <div class="options">
+          <p id="offline-status">Offline Status: CHECKING</p>
+          <div class="offline-cores">
+            Offline Cores will only use the stable release. Stable cores will auto cache on use.<br />Select cores to cache:
+            <form id="cores-form"></form>
+            <br />
+            <button onclick="cacheListCores()">Cache Selected Cores</button>
+          </div>
+          <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 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 class="bottom">
+          <button onclick="closeSettings()">Close</button>
         </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 = URL.createObjectURL(new Blob([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 = "https://ads.emulatorjs.org/";
-                if (core === "psp") {
-                    window.EJS_threads = true;
-                }
-                window.EJS_ready = function() {
-                    detectAdBlock("data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9PC9zdHlsZT48Ym9keSBzdHlsZT0ibWFyZ2luOjAiPjxkaXYgaWQ9ImFkYmxvY2siPjxoMT5IaSBBZGJsb2NrIFVzZXIhPC9oMT48cD5BZHMgb24gdGhpcyBwYWdlIG1heSBjb21lIGFuZCBnbyBkZXBlbmRpbmcgb24gaG93IG1hbnkgcGVvcGxlIGFyZSBmdW5kaW5nIHRoaXMgcHJvamVjdC48YnI+WW91IGNhbiBoZWxwIGZ1bmQgdGhpcyBwcm9qZWN0IG9uPGEgaHJlZj0iaHR0cHM6Ly9wYXRyZW9uLmNvbS9FbXVsYXRvckpTIj5wYXRyZW9uPC9hPjwvcD48L2Rpdj48L2JvZHk+PC9odG1sPg==");
-                }
-                
-                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);
-                    }
-                });
+      </div>
+    </div>
+    <div class="popup-overlay"></div>
+    <script>
+      if ("serviceWorker" in navigator) {
+        const req = navigator.serviceWorker
+          .register("/sw.js")
+          .then((registration) => {
+            console.log(
+              "Service Worker registered with scope:",
+              registration.scope
+            );
+          })
+          .catch((error) => {
+            console.log("Service Worker registration failed:", error);
+          });
+
+        navigator.serviceWorker.addEventListener("message", (event) => {
+          if (event.data.type === "CACHE_UPDATE") {
+            savedCDNFiles(event.data.url);
+            cacheCore();
+          }
+        });
+      }
+      const corePath = "https://cdn.emulatorjs.org/stable/data/cores/";
+      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";
+        }
+      });
+      loadJSON(corePath + "cores.json", (response) => {
+        const cacheCores =
+          JSON.parse(localStorage.getItem("cachedCores")) || [];
+        const cores = JSON.parse(response);
+        for (const core of cores) {
+          const label = document.createElement("label");
+          const input = document.createElement("input");
+          input.type = "checkbox";
+          input.name = "core";
+          input.value = core.name;
+          if (cacheCores.includes(core.name)) {
+            input.checked = true;
+          }
+          label.appendChild(input);
+          label.appendChild(document.createTextNode(core.name));
+          document.getElementById("cores-form").appendChild(label);
+        }
+      });
+      function savedCDNFiles(url) {
+        const cachedFiles =
+          JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
+        cachedFiles.push(url);
+        localStorage.setItem("cachedCDNFiles", JSON.stringify(cachedFiles));
+      }
+      function cacheCore() {
+        const files = JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
+        const cacheCores =
+          JSON.parse(localStorage.getItem("cachedCores")) || [];
+        const cores = files
+          .filter((item) => item.endsWith(".json"))
+          .map((item) => item.split("/").pop().split(".")[0]);
+        const urlsToCache = [];
+        for (core of cores) {
+          if (cacheCores.includes(core)) {
+            continue;
+          }
+          urlsToCache.push(corePath + "reports/" + core + ".json");
+          urlsToCache.push(corePath + core + "-wasm.data");
+          urlsToCache.push(corePath + core + "-thread-wasm.data");
+          urlsToCache.push(corePath + core + "-legacy-wasm.data");
+          urlsToCache.push(corePath + core + "-thread-legacy-wasm.data");
+          cacheCores.push(core);
+        }
+        if (urlsToCache.length > 0) {
+          cacheUrls(urlsToCache);
+          localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
+        }
+      }
+      function cacheListCores() {
+        const cacheCores =
+          JSON.parse(localStorage.getItem("cachedCores")) || [];
+        const cores = document.getElementsByName("core");
+        const urlsToCache = [];
+        const urlsToRemove = [];
+        for (const core of cores) {
+          if (core.checked && !cacheCores.includes(core.value)) {
+            urlsToCache.push(corePath + "reports/" + core + ".json");
+            urlsToCache.push(corePath + core.value + "-wasm.data");
+            urlsToCache.push(corePath + core.value + "-thread-wasm.data");
+            urlsToCache.push(corePath + core.value + "-legacy-wasm.data");
+            urlsToCache.push(
+              corePath + core.value + "-thread-legacy-wasm.data"
+            );
+            cacheCores.push(core.value);
+          }
+          if (!core.checked && cacheCores.includes(core.value)) {
+            urlsToRemove.push(corePath + "reports/" + core + ".json");
+            urlsToRemove.push(corePath + core.value + "-wasm.data");
+            urlsToRemove.push(corePath + core.value + "-thread-wasm.data");
+            urlsToRemove.push(corePath + core.value + "-legacy-wasm.data");
+            urlsToRemove.push(
+              corePath + core.value + "-thread-legacy-wasm.data"
+            );
+            cacheCores.splice(cacheCores.indexOf(core.value), 1);
+          }
+        }
+        if (urlsToCache.length > 0) {
+          cacheUrls(urlsToCache);
+        }
+        if (urlsToRemove.length > 0) {
+          removeUrls(urlsToRemove);
+        }
+        localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
+        closeSettings();
+      }
+      function cacheUrls(urls) {
+        if (navigator.serviceWorker.controller) {
+          navigator.serviceWorker.controller.postMessage({
+            type: "CACHE_URLS",
+            urls: urls,
+          });
+        }
+        urls.forEach(savedCDNFiles);
+      }
+      function removeUrls(urls) {
+        if (navigator.serviceWorker.controller) {
+          navigator.serviceWorker.controller.postMessage({
+            type: "REMOVE_URLS",
+            urls: urls,
+          });
+        }
+      }
+      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/";
+        });
+      }
+      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",
+      };
+      input.addEventListener("change", async () => {
+        const url = URL.createObjectURL(new Blob([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 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 = "https://ads.emulatorjs.org/";
+        window.EJS_videoRotation = 0;
+        if (core === "psp") {
+          window.EJS_threads = true;
+        }
+        window.EJS_ready = function () {
+          detectAdBlock(
+            "data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9YSB7Y29sb3I6ICMwMGFmZTQ7fTwvc3R5bGU+PGJvZHkgc3R5bGU9Im1hcmdpbjowIj48ZGl2IGlkPSJhZGJsb2NrIj48aDE+SGkgQWRibG9jayBVc2VyITwvaDE+PHA+QWRzIG9uIHRoaXMgcGFnZSBtYXkgY29tZSBhbmQgZ28gZGVwZW5kaW5nIG9uIGhvdyBtYW55IHBlb3BsZSBhcmUgZnVuZGluZyB0aGlzIHByb2plY3QuPGJyPllvdSBjYW4gaGVscCBmdW5kIHRoaXMgcHJvamVjdCBvbiA8YSBocmVmPSJodHRwczovL3BhdHJlb24uY29tL0VtdWxhdG9ySlMiPnBhdHJlb248L2E+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;
+              }
             });
-        </script>
-    </body>
+          }
+          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>
diff --git a/sw.js b/sw.js
index 68f07b5..41ab774 100644
--- a/sw.js
+++ b/sw.js
@@ -1,75 +1,140 @@
 const CACHE_NAME = "offline-demo";
 const OFFLINE_FILES = [
-    "index.html",
-    "404.html",
-    "favicon.ico",
-    "manifest.json",
-    "img/icon.png",
-    "img/logo.png",
-    "img/logo-light.png",
-    "img/screenshot.png",
-    "img/mobile_screenshot.png",
-    "https://cdn.emulatorjs.org/versions.json",
-
-    // Only cache stable assets offline...?
-    "https://cdn.emulatorjs.org/stable/data/loader.js",
-    "https://cdn.emulatorjs.org/stable/data/emulator.min.js",
-    "https://cdn.emulatorjs.org/stable/data/emulator.min.css",
-    "https://cdn.emulatorjs.org/stable/data/compression/extract7z.js",
-    "https://cdn.emulatorjs.org/stable/data/compression/extractzip.js",
-    "https://cdn.emulatorjs.org/stable/data/compression/libunrar.js",
-    "https://cdn.emulatorjs.org/stable/data/compression/libunrar.wasm"
+  "index.html",
+  "404.html",
+  "favicon.ico",
+  "manifest.json",
+  "img/icon.png",
+  "img/logo.png",
+  "img/logo-light.png",
+  "img/screenshot.png",
+  "img/mobile_screenshot.png",
+  "https://cdn.emulatorjs.org/versions.json",
+  "https://cdn.emulatorjs.org/stable/data/loader.js",
+  "https://cdn.emulatorjs.org/stable/data/version.json",
+  "https://cdn.emulatorjs.org/stable/data/emulator.min.js",
+  "https://cdn.emulatorjs.org/stable/data/emulator.min.css",
+  "https://cdn.emulatorjs.org/stable/data/cores/cores.json",
+  "https://cdn.emulatorjs.org/stable/data/compression/extract7z.js",
+  "https://cdn.emulatorjs.org/stable/data/compression/extractzip.js",
+  "https://cdn.emulatorjs.org/stable/data/compression/libunrar.js",
+  "https://cdn.emulatorjs.org/stable/data/compression/libunrar.wasm",
 ];
+let cacheStatus = false;
 
 self.addEventListener("install", (event) => {
-    event.waitUntil(
-        (async () => {
-            const cache = await caches.open(CACHE_NAME);
-            await cache.addAll(OFFLINE_FILES);
-        })()
-    );
-    self.skipWaiting();
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      await cache.addAll(OFFLINE_FILES);
+    })()
+  );
+  self.skipWaiting();
 });
 
 self.addEventListener("activate", (event) => {
-    self.clients.claim();
+  self.clients.claim();
 });
 
-function getCacheUrl(url) {
-    if (url === "/") {
-        return "index.html";
-    } else if (url === "/versions") {
-        return "https://cdn.emulatorjs.org/versions.json";
-    } else if (url.startsWith("/")) {
-        return url.slice(1);
+self.addEventListener("message", async (event) => {
+  if (event.data && event.data.type === "CACHE_URLS") {
+    const urls = event.data.urls;
+    for (const url of urls) {
+      while (cacheStatus) {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+      cacheStatus = true;
+      try {
+        const cache = await caches.open(CACHE_NAME);
+        const response = await fetch(url);
+        if (response && response.status === 200) {
+          await cache.put(url, response.clone());
+        }
+      } finally {
+        cacheStatus = false;
+      }
     }
-    return url;
+  }
+  if (event.data && event.data.type === "REMOVE_URLS") {
+    const urls = event.data.urls;
+    const cache = await caches.open(CACHE_NAME);
+    for (const url of urls) {
+      await cache.delete(url);
+    }
+  }
+});
+
+function cacheUpdate(fileUrl) {
+  self.clients.matchAll().then((clients) => {
+    clients.forEach((client) => {
+      client.postMessage({
+        type: "CACHE_UPDATE",
+        url: fileUrl,
+      });
+    });
+  });
+}
+
+function getCacheUrl(url) {
+  if (url === "/") {
+    return "index.html";
+  } else if (url === "/versions") {
+    return "https://cdn.emulatorjs.org/versions.json";
+  } else if (url.startsWith("/")) {
+    return url.slice(1);
+  }
+  return url;
 }
 
 self.addEventListener("fetch", (event) => {
-    event.respondWith(
-        (async () => {
-            const requestURL = new URL(event.request.url);
-            let url = (requestURL.hostname === "cdn.emulatorjs.org") ? event.request.url : requestURL.pathname;
-            const cache = await caches.open(CACHE_NAME);
-            if (requestURL.hostname === "cdn.emulatorjs.org" && !OFFLINE_FILES.includes(event.request.url)) {
-                return await fetch(event.request);
-            }
-            try {
-                const req = (url === "/versions") ? "https://cdn.emulatorjs.org/versions.json" : event.request;
-                const res = await fetch(req);
-                if (!res.status.toString().startsWith('2')) {
-                    throw new Error('status code not ok');
-                }
-                cache.put(getCacheUrl(url), res.clone());
-                return res;
-            } catch(e) {
-                url = getCacheUrl(url);
-                if (!OFFLINE_FILES.includes(url)) {
-                    url = "404.html";
-                }
-                return await cache.match(url);
-            }
-        })()
-    );
+  event.respondWith(
+    (async () => {
+      const requestURL = new URL(event.request.url);
+      let url =
+        requestURL.hostname === "cdn.emulatorjs.org"
+          ? event.request.url
+          : requestURL.pathname;
+      const cache = await caches.open(CACHE_NAME);
+      if (
+        event.request.url.startsWith("https://cdn.emulatorjs.org/stable/data/")
+      ) {
+        const cachedResponse = await cache.match(event.request);
+        if (cachedResponse) {
+          return cachedResponse;
+        }
+        cacheStatus = true;
+        const networkResponse = await fetch(event.request);
+        if (networkResponse && networkResponse.status === 200) {
+          cache.put(event.request, networkResponse.clone());
+          cacheUpdate(event.request.url);
+        }
+        cacheStatus = false;
+        return networkResponse;
+      }
+      if (
+        requestURL.hostname === "cdn.emulatorjs.org" &&
+        !OFFLINE_FILES.includes(event.request.url)
+      ) {
+        return await fetch(event.request);
+      }
+      try {
+        const req =
+          url === "/versions"
+            ? "https://cdn.emulatorjs.org/versions.json"
+            : event.request;
+        const res = await fetch(req);
+        if (!res.status.toString().startsWith("2")) {
+          throw new Error("status code not ok");
+        }
+        cache.put(getCacheUrl(url), res.clone());
+        return res;
+      } catch (e) {
+        url = getCacheUrl(url);
+        if (!OFFLINE_FILES.includes(url)) {
+          url = "404.html";
+        }
+        return await cache.match(url);
+      }
+    })()
+  );
 });

From 82839e18b8ac027b18333b7aa0e6acdabc10f6d5 Mon Sep 17 00:00:00 2001
From: Allan Niles <allancoding.dev@gmail.com>
Date: Thu, 26 Dec 2024 17:09:13 -0700
Subject: [PATCH 2/7] fix formating

---
 index.html | 1484 ++++++++++++++++++++++++++--------------------------
 sw.js      |  236 ++++-----
 2 files changed, 862 insertions(+), 858 deletions(-)

diff --git a/index.html b/index.html
index 4bd0015..ffe19c8 100644
--- a/index.html
+++ b/index.html
@@ -1,742 +1,746 @@
 <!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;
-      }
-
-      .offline-cores {
-        margin: 1em 0;
-        font-size: 18px;
-      }
-
-      #cores-form {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        max-height: 160px;
-        overflow-y: auto;
-        padding: 10px 0;
-      }
-    </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">
-        <option value="stable">Loading...</option>
-      </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>
-          <div class="offline-cores">
-            Offline Cores will only use the stable release. Stable cores will auto cache on use.<br />Select cores to cache:
-            <form id="cores-form"></form>
-            <br />
-            <button onclick="cacheListCores()">Cache Selected Cores</button>
-          </div>
-          <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")
-          .then((registration) => {
-            console.log(
-              "Service Worker registered with scope:",
-              registration.scope
-            );
-          })
-          .catch((error) => {
-            console.log("Service Worker registration failed:", error);
-          });
-
-        navigator.serviceWorker.addEventListener("message", (event) => {
-          if (event.data.type === "CACHE_UPDATE") {
-            savedCDNFiles(event.data.url);
-            cacheCore();
-          }
-        });
-      }
-      const corePath = "https://cdn.emulatorjs.org/stable/data/cores/";
-      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";
-        }
-      });
-      loadJSON(corePath + "cores.json", (response) => {
-        const cacheCores =
-          JSON.parse(localStorage.getItem("cachedCores")) || [];
-        const cores = JSON.parse(response);
-        for (const core of cores) {
-          const label = document.createElement("label");
-          const input = document.createElement("input");
-          input.type = "checkbox";
-          input.name = "core";
-          input.value = core.name;
-          if (cacheCores.includes(core.name)) {
-            input.checked = true;
-          }
-          label.appendChild(input);
-          label.appendChild(document.createTextNode(core.name));
-          document.getElementById("cores-form").appendChild(label);
-        }
-      });
-      function savedCDNFiles(url) {
-        const cachedFiles =
-          JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
-        cachedFiles.push(url);
-        localStorage.setItem("cachedCDNFiles", JSON.stringify(cachedFiles));
-      }
-      function cacheCore() {
-        const files = JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
-        const cacheCores =
-          JSON.parse(localStorage.getItem("cachedCores")) || [];
-        const cores = files
-          .filter((item) => item.endsWith(".json"))
-          .map((item) => item.split("/").pop().split(".")[0]);
-        const urlsToCache = [];
-        for (core of cores) {
-          if (cacheCores.includes(core)) {
-            continue;
-          }
-          urlsToCache.push(corePath + "reports/" + core + ".json");
-          urlsToCache.push(corePath + core + "-wasm.data");
-          urlsToCache.push(corePath + core + "-thread-wasm.data");
-          urlsToCache.push(corePath + core + "-legacy-wasm.data");
-          urlsToCache.push(corePath + core + "-thread-legacy-wasm.data");
-          cacheCores.push(core);
-        }
-        if (urlsToCache.length > 0) {
-          cacheUrls(urlsToCache);
-          localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
-        }
-      }
-      function cacheListCores() {
-        const cacheCores =
-          JSON.parse(localStorage.getItem("cachedCores")) || [];
-        const cores = document.getElementsByName("core");
-        const urlsToCache = [];
-        const urlsToRemove = [];
-        for (const core of cores) {
-          if (core.checked && !cacheCores.includes(core.value)) {
-            urlsToCache.push(corePath + "reports/" + core + ".json");
-            urlsToCache.push(corePath + core.value + "-wasm.data");
-            urlsToCache.push(corePath + core.value + "-thread-wasm.data");
-            urlsToCache.push(corePath + core.value + "-legacy-wasm.data");
-            urlsToCache.push(
-              corePath + core.value + "-thread-legacy-wasm.data"
-            );
-            cacheCores.push(core.value);
-          }
-          if (!core.checked && cacheCores.includes(core.value)) {
-            urlsToRemove.push(corePath + "reports/" + core + ".json");
-            urlsToRemove.push(corePath + core.value + "-wasm.data");
-            urlsToRemove.push(corePath + core.value + "-thread-wasm.data");
-            urlsToRemove.push(corePath + core.value + "-legacy-wasm.data");
-            urlsToRemove.push(
-              corePath + core.value + "-thread-legacy-wasm.data"
-            );
-            cacheCores.splice(cacheCores.indexOf(core.value), 1);
-          }
-        }
-        if (urlsToCache.length > 0) {
-          cacheUrls(urlsToCache);
-        }
-        if (urlsToRemove.length > 0) {
-          removeUrls(urlsToRemove);
-        }
-        localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
-        closeSettings();
-      }
-      function cacheUrls(urls) {
-        if (navigator.serviceWorker.controller) {
-          navigator.serviceWorker.controller.postMessage({
-            type: "CACHE_URLS",
-            urls: urls,
-          });
-        }
-        urls.forEach(savedCDNFiles);
-      }
-      function removeUrls(urls) {
-        if (navigator.serviceWorker.controller) {
-          navigator.serviceWorker.controller.postMessage({
-            type: "REMOVE_URLS",
-            urls: urls,
-          });
-        }
-      }
-      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/";
-        });
-      }
-      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",
-      };
-      input.addEventListener("change", async () => {
-        const url = URL.createObjectURL(new Blob([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 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 = "https://ads.emulatorjs.org/";
-        window.EJS_videoRotation = 0;
-        if (core === "psp") {
-          window.EJS_threads = true;
-        }
-        window.EJS_ready = function () {
-          detectAdBlock(
-            "data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9YSB7Y29sb3I6ICMwMGFmZTQ7fTwvc3R5bGU+PGJvZHkgc3R5bGU9Im1hcmdpbjowIj48ZGl2IGlkPSJhZGJsb2NrIj48aDE+SGkgQWRibG9jayBVc2VyITwvaDE+PHA+QWRzIG9uIHRoaXMgcGFnZSBtYXkgY29tZSBhbmQgZ28gZGVwZW5kaW5nIG9uIGhvdyBtYW55IHBlb3BsZSBhcmUgZnVuZGluZyB0aGlzIHByb2plY3QuPGJyPllvdSBjYW4gaGVscCBmdW5kIHRoaXMgcHJvamVjdCBvbiA8YSBocmVmPSJodHRwczovL3BhdHJlb24uY29tL0VtdWxhdG9ySlMiPnBhdHJlb248L2E+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>
+<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;
+		}
+
+		.offline-cores {
+			margin: 1em 0;
+			font-size: 18px;
+		}
+
+		#cores-form {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			max-height: 160px;
+			overflow-y: auto;
+			padding: 10px 0;
+		}
+	</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">
+			<option value="stable">Loading...</option>
+		</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>
+				<div class="offline-cores">
+					Offline Cores will only use the stable release. Stable cores will
+					auto cache on use.<br />Select cores to cache:
+					<form id="cores-form"></form>
+					<br />
+					<button onclick="cacheListCores()">Cache Selected Cores</button>
+				</div>
+				<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")
+				.then((registration) => {
+					console.log(
+						"Service Worker registered with scope:",
+						registration.scope
+					);
+				})
+				.catch((error) => {
+					console.log("Service Worker registration failed:", error);
+				});
+
+			navigator.serviceWorker.addEventListener("message", (event) => {
+				if (event.data.type === "CACHE_UPDATE") {
+					savedCDNFiles(event.data.url);
+					cacheCore();
+				}
+			});
+		}
+		
+		const corePath = "https://cdn.emulatorjs.org/stable/data/cores/";
+		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";
+			}
+		});
+
+		loadJSON(corePath + "cores.json", (response) => {
+			const cacheCores =
+				JSON.parse(localStorage.getItem("cachedCores")) || [];
+			const cores = JSON.parse(response);
+			for (const core of cores) {
+				const label = document.createElement("label");
+				const input = document.createElement("input");
+				input.type = "checkbox";
+				input.name = "core";
+				input.value = core.name;
+				if (cacheCores.includes(core.name)) {
+					input.checked = true;
+				}
+				label.appendChild(input);
+				label.appendChild(document.createTextNode(core.name));
+				document.getElementById("cores-form").appendChild(label);
+			}
+		});
+
+		function savedCDNFiles(url) {
+			const cachedFiles =
+				JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
+			cachedFiles.push(url);
+			localStorage.setItem("cachedCDNFiles", JSON.stringify(cachedFiles));
+		}
+
+		function cacheCore() {
+			const files = JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
+			const cacheCores =
+				JSON.parse(localStorage.getItem("cachedCores")) || [];
+			const cores = files
+				.filter((item) => item.endsWith(".json"))
+				.map((item) => item.split("/").pop().split(".")[0]);
+			const urlsToCache = [];
+			for (core of cores) {
+				if (cacheCores.includes(core)) {
+					continue;
+				}
+				urlsToCache.push(corePath + "reports/" + core + ".json");
+				urlsToCache.push(corePath + core + "-wasm.data");
+				urlsToCache.push(corePath + core + "-thread-wasm.data");
+				urlsToCache.push(corePath + core + "-legacy-wasm.data");
+				urlsToCache.push(corePath + core + "-thread-legacy-wasm.data");
+				cacheCores.push(core);
+			}
+			if (urlsToCache.length > 0) {
+				cacheUrls(urlsToCache);
+				localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
+			}
+		}
+
+		function cacheListCores() {
+			const cacheCores =
+				JSON.parse(localStorage.getItem("cachedCores")) || [];
+			const cores = document.getElementsByName("core");
+			const urlsToCache = [];
+			const urlsToRemove = [];
+			for (const core of cores) {
+				if (core.checked && !cacheCores.includes(core.value)) {
+					urlsToCache.push(corePath + "reports/" + core + ".json");
+					urlsToCache.push(corePath + core.value + "-wasm.data");
+					urlsToCache.push(corePath + core.value + "-thread-wasm.data");
+					urlsToCache.push(corePath + core.value + "-legacy-wasm.data");
+					urlsToCache.push(
+						corePath + core.value + "-thread-legacy-wasm.data"
+					);
+					cacheCores.push(core.value);
+				}
+				if (!core.checked && cacheCores.includes(core.value)) {
+					urlsToRemove.push(corePath + "reports/" + core + ".json");
+					urlsToRemove.push(corePath + core.value + "-wasm.data");
+					urlsToRemove.push(corePath + core.value + "-thread-wasm.data");
+					urlsToRemove.push(corePath + core.value + "-legacy-wasm.data");
+					urlsToRemove.push(
+						corePath + core.value + "-thread-legacy-wasm.data"
+					);
+					cacheCores.splice(cacheCores.indexOf(core.value), 1);
+				}
+			}
+			if (urlsToCache.length > 0) {
+				cacheUrls(urlsToCache);
+			}
+			if (urlsToRemove.length > 0) {
+				removeUrls(urlsToRemove);
+			}
+			localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
+			closeSettings();
+		}
+
+		function cacheUrls(urls) {
+			if (navigator.serviceWorker.controller) {
+				navigator.serviceWorker.controller.postMessage({
+					type: "CACHE_URLS",
+					urls: urls,
+				});
+			}
+			urls.forEach(savedCDNFiles);
+		}
+
+		function removeUrls(urls) {
+			if (navigator.serviceWorker.controller) {
+				navigator.serviceWorker.controller.postMessage({
+					type: "REMOVE_URLS",
+					urls: urls,
+				});
+			}
+		}
+
+		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 = URL.createObjectURL(new Blob([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 = "https://ads.emulatorjs.org/";
+			window.EJS_videoRotation = 0;
+			if (core === "psp") {
+				window.EJS_threads = true;
+			}
+			window.EJS_ready = function () {
+				detectAdBlock(
+					"data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9YSB7Y29sb3I6ICMwMGFmZTQ7fTwvc3R5bGU+PGJvZHkgc3R5bGU9Im1hcmdpbjowIj48ZGl2IGlkPSJhZGJsb2NrIj48aDE+SGkgQWRibG9jayBVc2VyITwvaDE+PHA+QWRzIG9uIHRoaXMgcGFnZSBtYXkgY29tZSBhbmQgZ28gZGVwZW5kaW5nIG9uIGhvdyBtYW55IHBlb3BsZSBhcmUgZnVuZGluZyB0aGlzIHByb2plY3QuPGJyPllvdSBjYW4gaGVscCBmdW5kIHRoaXMgcHJvamVjdCBvbiA8YSBocmVmPSJodHRwczovL3BhdHJlb24uY29tL0VtdWxhdG9ySlMiPnBhdHJlb248L2E+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>
\ No newline at end of file
diff --git a/sw.js b/sw.js
index 41ab774..89e734c 100644
--- a/sw.js
+++ b/sw.js
@@ -1,140 +1,140 @@
 const CACHE_NAME = "offline-demo";
 const OFFLINE_FILES = [
-  "index.html",
-  "404.html",
-  "favicon.ico",
-  "manifest.json",
-  "img/icon.png",
-  "img/logo.png",
-  "img/logo-light.png",
-  "img/screenshot.png",
-  "img/mobile_screenshot.png",
-  "https://cdn.emulatorjs.org/versions.json",
-  "https://cdn.emulatorjs.org/stable/data/loader.js",
-  "https://cdn.emulatorjs.org/stable/data/version.json",
-  "https://cdn.emulatorjs.org/stable/data/emulator.min.js",
-  "https://cdn.emulatorjs.org/stable/data/emulator.min.css",
-  "https://cdn.emulatorjs.org/stable/data/cores/cores.json",
-  "https://cdn.emulatorjs.org/stable/data/compression/extract7z.js",
-  "https://cdn.emulatorjs.org/stable/data/compression/extractzip.js",
-  "https://cdn.emulatorjs.org/stable/data/compression/libunrar.js",
-  "https://cdn.emulatorjs.org/stable/data/compression/libunrar.wasm",
+	"index.html",
+	"404.html",
+	"favicon.ico",
+	"manifest.json",
+	"img/icon.png",
+	"img/logo.png",
+	"img/logo-light.png",
+	"img/screenshot.png",
+	"img/mobile_screenshot.png",
+	"https://cdn.emulatorjs.org/versions.json",
+	"https://cdn.emulatorjs.org/stable/data/loader.js",
+	"https://cdn.emulatorjs.org/stable/data/version.json",
+	"https://cdn.emulatorjs.org/stable/data/emulator.min.js",
+	"https://cdn.emulatorjs.org/stable/data/emulator.min.css",
+	"https://cdn.emulatorjs.org/stable/data/cores/cores.json",
+	"https://cdn.emulatorjs.org/stable/data/compression/extract7z.js",
+	"https://cdn.emulatorjs.org/stable/data/compression/extractzip.js",
+	"https://cdn.emulatorjs.org/stable/data/compression/libunrar.js",
+	"https://cdn.emulatorjs.org/stable/data/compression/libunrar.wasm",
 ];
 let cacheStatus = false;
 
 self.addEventListener("install", (event) => {
-  event.waitUntil(
-    (async () => {
-      const cache = await caches.open(CACHE_NAME);
-      await cache.addAll(OFFLINE_FILES);
-    })()
-  );
-  self.skipWaiting();
+	event.waitUntil(
+		(async () => {
+			const cache = await caches.open(CACHE_NAME);
+			await cache.addAll(OFFLINE_FILES);
+		})()
+	);
+	self.skipWaiting();
 });
 
 self.addEventListener("activate", (event) => {
-  self.clients.claim();
+	self.clients.claim();
 });
 
 self.addEventListener("message", async (event) => {
-  if (event.data && event.data.type === "CACHE_URLS") {
-    const urls = event.data.urls;
-    for (const url of urls) {
-      while (cacheStatus) {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-      }
-      cacheStatus = true;
-      try {
-        const cache = await caches.open(CACHE_NAME);
-        const response = await fetch(url);
-        if (response && response.status === 200) {
-          await cache.put(url, response.clone());
-        }
-      } finally {
-        cacheStatus = false;
-      }
-    }
-  }
-  if (event.data && event.data.type === "REMOVE_URLS") {
-    const urls = event.data.urls;
-    const cache = await caches.open(CACHE_NAME);
-    for (const url of urls) {
-      await cache.delete(url);
-    }
-  }
+	if (event.data && event.data.type === "CACHE_URLS") {
+		const urls = event.data.urls;
+		for (const url of urls) {
+			while (cacheStatus) {
+				await new Promise((resolve) => setTimeout(resolve, 1000));
+			}
+			cacheStatus = true;
+			try {
+				const cache = await caches.open(CACHE_NAME);
+				const response = await fetch(url);
+				if (response && response.status === 200) {
+					await cache.put(url, response.clone());
+				}
+			} finally {
+				cacheStatus = false;
+			}
+		}
+	}
+	if (event.data && event.data.type === "REMOVE_URLS") {
+		const urls = event.data.urls;
+		const cache = await caches.open(CACHE_NAME);
+		for (const url of urls) {
+			await cache.delete(url);
+		}
+	}
 });
 
 function cacheUpdate(fileUrl) {
-  self.clients.matchAll().then((clients) => {
-    clients.forEach((client) => {
-      client.postMessage({
-        type: "CACHE_UPDATE",
-        url: fileUrl,
-      });
-    });
-  });
+	self.clients.matchAll().then((clients) => {
+		clients.forEach((client) => {
+			client.postMessage({
+				type: "CACHE_UPDATE",
+				url: fileUrl,
+			});
+		});
+	});
 }
 
 function getCacheUrl(url) {
-  if (url === "/") {
-    return "index.html";
-  } else if (url === "/versions") {
-    return "https://cdn.emulatorjs.org/versions.json";
-  } else if (url.startsWith("/")) {
-    return url.slice(1);
-  }
-  return url;
+	if (url === "/") {
+		return "index.html";
+	} else if (url === "/versions") {
+		return "https://cdn.emulatorjs.org/versions.json";
+	} else if (url.startsWith("/")) {
+		return url.slice(1);
+	}
+	return url;
 }
 
 self.addEventListener("fetch", (event) => {
-  event.respondWith(
-    (async () => {
-      const requestURL = new URL(event.request.url);
-      let url =
-        requestURL.hostname === "cdn.emulatorjs.org"
-          ? event.request.url
-          : requestURL.pathname;
-      const cache = await caches.open(CACHE_NAME);
-      if (
-        event.request.url.startsWith("https://cdn.emulatorjs.org/stable/data/")
-      ) {
-        const cachedResponse = await cache.match(event.request);
-        if (cachedResponse) {
-          return cachedResponse;
-        }
-        cacheStatus = true;
-        const networkResponse = await fetch(event.request);
-        if (networkResponse && networkResponse.status === 200) {
-          cache.put(event.request, networkResponse.clone());
-          cacheUpdate(event.request.url);
-        }
-        cacheStatus = false;
-        return networkResponse;
-      }
-      if (
-        requestURL.hostname === "cdn.emulatorjs.org" &&
-        !OFFLINE_FILES.includes(event.request.url)
-      ) {
-        return await fetch(event.request);
-      }
-      try {
-        const req =
-          url === "/versions"
-            ? "https://cdn.emulatorjs.org/versions.json"
-            : event.request;
-        const res = await fetch(req);
-        if (!res.status.toString().startsWith("2")) {
-          throw new Error("status code not ok");
-        }
-        cache.put(getCacheUrl(url), res.clone());
-        return res;
-      } catch (e) {
-        url = getCacheUrl(url);
-        if (!OFFLINE_FILES.includes(url)) {
-          url = "404.html";
-        }
-        return await cache.match(url);
-      }
-    })()
-  );
+	event.respondWith(
+		(async () => {
+			const requestURL = new URL(event.request.url);
+			let url =
+				requestURL.hostname === "cdn.emulatorjs.org"
+					? event.request.url
+					: requestURL.pathname;
+			const cache = await caches.open(CACHE_NAME);
+			if (
+				event.request.url.startsWith("https://cdn.emulatorjs.org/stable/data/")
+			) {
+				const cachedResponse = await cache.match(event.request);
+				if (cachedResponse) {
+					return cachedResponse;
+				}
+				cacheStatus = true;
+				const networkResponse = await fetch(event.request);
+				if (networkResponse && networkResponse.status === 200) {
+					cache.put(event.request, networkResponse.clone());
+					cacheUpdate(event.request.url);
+				}
+				cacheStatus = false;
+				return networkResponse;
+			}
+			if (
+				requestURL.hostname === "cdn.emulatorjs.org" &&
+				!OFFLINE_FILES.includes(event.request.url)
+			) {
+				return await fetch(event.request);
+			}
+			try {
+				const req =
+					url === "/versions"
+						? "https://cdn.emulatorjs.org/versions.json"
+						: event.request;
+				const res = await fetch(req);
+				if (!res.status.toString().startsWith("2")) {
+					throw new Error("status code not ok");
+				}
+				cache.put(getCacheUrl(url), res.clone());
+				return res;
+			} catch (e) {
+				url = getCacheUrl(url);
+				if (!OFFLINE_FILES.includes(url)) {
+					url = "404.html";
+				}
+				return await cache.match(url);
+			}
+		})()
+	);
 });

From 3519dd6ef64aa08bdffcad210f5efa7867ebdfe4 Mon Sep 17 00:00:00 2001
From: Allan Niles <allancoding.dev@gmail.com>
Date: Thu, 26 Dec 2024 17:16:21 -0700
Subject: [PATCH 3/7] fix html formating

---
 index.html | 1221 ++++++++++++++++++++++++++--------------------------
 1 file changed, 610 insertions(+), 611 deletions(-)

diff --git a/index.html b/index.html
index ffe19c8..54353b2 100644
--- a/index.html
+++ b/index.html
@@ -1,258 +1,257 @@
 <!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;
-		}
+	<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,
-		#box,
-		#top {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-		}
+			body {
+				margin: 0;
+				overflow: hidden;
+			}
 
-		#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;
-		}
+			body,
+			#box,
+			#top {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+			}
 
-		#box:hover,
-		#box[drag] {
-			border-color: #38f;
-			color: #ddd;
-		}
+			#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;
+			}
 
-		#input {
-			cursor: pointer;
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			opacity: 0;
-		}
+			#box:hover,
+			#box[drag] {
+				border-color: #38f;
+				color: #ddd;
+			}
 
-		#display {
-			width: 100%;
-			height: 100%;
-		}
+			#input {
+				cursor: pointer;
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+				opacity: 0;
+			}
 
-		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;
-		}
+			#display {
+				width: 100%;
+				height: 100%;
+			}
 
-		select:hover,
-		button:hover {
-			background-color: #666;
-			color: #ddd;
-		}
+			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;
+			}
 
-		.logo {
-			width: 130px;
-			height: 130px;
-			filter: drop-shadow(0 0 10px white);
-		}
+			select:hover,
+			button:hover {
+				background-color: #666;
+				color: #ddd;
+			}
 
-		#top,
-		#version {
-			margin: 5px;
-		}
+			.logo {
+				width: 130px;
+				height: 130px;
+				filter: drop-shadow(0 0 10px white);
+			}
 
-		#version button {
-			fill: #aaa;
-			width: auto;
-			padding: 0.2em 0.3em;
-			text-align: center;
-			margin: 0.5em 0.1em;
-		}
+			#top,
+			#version {
+				margin: 5px;
+			}
 
-		#version svg {
-			margin-top: 0.05em;
-			margin-left: 0.05em;
-			width: 1.8em;
-		}
+			#version button {
+				fill: #aaa;
+				width: auto;
+				padding: 0.2em 0.3em;
+				text-align: center;
+				margin: 0.5em 0.1em;
+			}
 
-		.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;
-		}
+			#version svg {
+				margin-top: 0.05em;
+				margin-left: 0.05em;
+				width: 1.8em;
+			}
 
-		.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;
-		}
+			.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;
+			}
 
-		.show {
-			visibility: visible;
-		}
+			.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;
+			}
 
-		.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 {
+				visibility: visible;
+			}
 
-		.show~.popup-overlay {
-			opacity: 1;
-			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;
+			}
 
-		.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-overlay {
+				opacity: 1;
+				visibility: visible;
+			}
 
-		.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-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;
+			}
 
-		.popup .title,
-		.popup .options p {
-			display: flex;
-			align-items: center;
-		}
+			.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 .options p {
-			margin: 1em 0;
-			font-size: 18px;
-		}
+			.popup .title,
+			.popup .options p {
+				display: flex;
+				align-items: center;
+			}
 
-		.popup .title h1 {
-			margin: 0 0 0.3em;
-			font-size: 48px;
-		}
+			.popup .options p {
+				margin: 1em 0;
+				font-size: 18px;
+			}
 
-		.popup .options button {
-			width: auto;
-			padding: 0 0.5em;
-			font-weight: bold;
-			margin: 0 0.5em;
-			font-size: 14px;
-			border-radius: 0.4em;
-		}
+			.popup .title h1 {
+				margin: 0 0 0.3em;
+				font-size: 48px;
+			}
 
-		.popup .bottom {
-			display: flex;
-			justify-content: flex-end;
-			align-items: center;
-			margin-top: 1em;
-		}
+			.popup .options button {
+				width: auto;
+				padding: 0 0.5em;
+				font-weight: bold;
+				margin: 0 0.5em;
+				font-size: 14px;
+				border-radius: 0.4em;
+			}
 
-		#installbox {
-			display: inline-flex;
-			align-items: baseline;
-		}
+			.popup .bottom {
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+				margin-top: 1em;
+			}
 
-		#installboxtext {
-			margin-top: 0 !important;
-		}
+			#installbox {
+				display: inline-flex;
+				align-items: baseline;
+			}
 
-		button:disabled {
-			background-color: #666;
-			color: #aaa;
-			cursor: not-allowed;
-		}
+			#installboxtext {
+				margin-top: 0 !important;
+			}
 
-		.hide {
-			display: none !important;
-		}
+			button:disabled {
+				background-color: #666;
+				color: #aaa;
+				cursor: not-allowed;
+			}
 
-		.offline-cores {
-			margin: 1em 0;
-			font-size: 18px;
-		}
+			.hide {
+				display: none !important;
+			}
 
-		#cores-form {
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-			max-height: 160px;
-			overflow-y: auto;
-			padding: 10px 0;
-		}
-	</style>
-</head>
+			.offline-cores {
+				margin: 1em 0;
+				font-size: 18px;
+			}
 
+			#cores-form {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				max-height: 160px;
+				overflow-y: auto;
+				padding: 10px 0;
+			}
+		</style>
+	</head>
 <body>
 	<div id="top">
 		<h1>EmulatorJS Demo</h1>
@@ -314,433 +313,433 @@ <h1>Settings</h1>
 		</div>
 	</div>
 	<div class="popup-overlay"></div>
-	<script>
-		if ("serviceWorker" in navigator) {
-			const req = navigator.serviceWorker
-				.register("/sw.js")
-				.then((registration) => {
-					console.log(
-						"Service Worker registered with scope:",
-						registration.scope
-					);
-				})
-				.catch((error) => {
-					console.log("Service Worker registration failed:", error);
-				});
-
-			navigator.serviceWorker.addEventListener("message", (event) => {
-				if (event.data.type === "CACHE_UPDATE") {
-					savedCDNFiles(event.data.url);
-					cacheCore();
-				}
-			});
-		}
-		
-		const corePath = "https://cdn.emulatorjs.org/stable/data/cores/";
-		loadJSON("/versions", (response) => {
-			if (!response) {
-				loadJSON("https://cdn.emulatorjs.org/versions.json", (resp) =>
-					loadVersions(resp)
+</body>
+<script>
+	if ("serviceWorker" in navigator) {
+		const req = navigator.serviceWorker
+			.register("/sw.js")
+			.then((registration) => {
+				console.log(
+					"Service Worker registered with scope:",
+					registration.scope
 				);
-				document.getElementById("offline-status").textContent =
-					"Offline Status: NOT INSTALLED";
-			} else {
-				loadVersions(response);
-				document.getElementById("offline-status").textContent =
-					"Offline Status: READY";
-			}
-		});
+			})
+			.catch((error) => {
+				console.log("Service Worker registration failed:", error);
+			});
 
-		loadJSON(corePath + "cores.json", (response) => {
-			const cacheCores =
-				JSON.parse(localStorage.getItem("cachedCores")) || [];
-			const cores = JSON.parse(response);
-			for (const core of cores) {
-				const label = document.createElement("label");
-				const input = document.createElement("input");
-				input.type = "checkbox";
-				input.name = "core";
-				input.value = core.name;
-				if (cacheCores.includes(core.name)) {
-					input.checked = true;
-				}
-				label.appendChild(input);
-				label.appendChild(document.createTextNode(core.name));
-				document.getElementById("cores-form").appendChild(label);
+		navigator.serviceWorker.addEventListener("message", (event) => {
+			if (event.data.type === "CACHE_UPDATE") {
+				savedCDNFiles(event.data.url);
+				cacheCore();
 			}
 		});
+	}
 
-		function savedCDNFiles(url) {
-			const cachedFiles =
-				JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
-			cachedFiles.push(url);
-			localStorage.setItem("cachedCDNFiles", JSON.stringify(cachedFiles));
-		}
-
-		function cacheCore() {
-			const files = JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
-			const cacheCores =
-				JSON.parse(localStorage.getItem("cachedCores")) || [];
-			const cores = files
-				.filter((item) => item.endsWith(".json"))
-				.map((item) => item.split("/").pop().split(".")[0]);
-			const urlsToCache = [];
-			for (core of cores) {
-				if (cacheCores.includes(core)) {
-					continue;
-				}
-				urlsToCache.push(corePath + "reports/" + core + ".json");
-				urlsToCache.push(corePath + core + "-wasm.data");
-				urlsToCache.push(corePath + core + "-thread-wasm.data");
-				urlsToCache.push(corePath + core + "-legacy-wasm.data");
-				urlsToCache.push(corePath + core + "-thread-legacy-wasm.data");
-				cacheCores.push(core);
+	const corePath = "https://cdn.emulatorjs.org/stable/data/cores/";
+	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";
+		}
+	});
+
+	loadJSON(corePath + "cores.json", (response) => {
+		const cacheCores =
+			JSON.parse(localStorage.getItem("cachedCores")) || [];
+		const cores = JSON.parse(response);
+		for (const core of cores) {
+			const label = document.createElement("label");
+			const input = document.createElement("input");
+			input.type = "checkbox";
+			input.name = "core";
+			input.value = core.name;
+			if (cacheCores.includes(core.name)) {
+				input.checked = true;
 			}
-			if (urlsToCache.length > 0) {
-				cacheUrls(urlsToCache);
-				localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
+			label.appendChild(input);
+			label.appendChild(document.createTextNode(core.name));
+			document.getElementById("cores-form").appendChild(label);
+		}
+	});
+
+	function savedCDNFiles(url) {
+		const cachedFiles =
+			JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
+		cachedFiles.push(url);
+		localStorage.setItem("cachedCDNFiles", JSON.stringify(cachedFiles));
+	}
+
+	function cacheCore() {
+		const files = JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
+		const cacheCores =
+			JSON.parse(localStorage.getItem("cachedCores")) || [];
+		const cores = files
+			.filter((item) => item.endsWith(".json"))
+			.map((item) => item.split("/").pop().split(".")[0]);
+		const urlsToCache = [];
+		for (core of cores) {
+			if (cacheCores.includes(core)) {
+				continue;
 			}
+			urlsToCache.push(corePath + "reports/" + core + ".json");
+			urlsToCache.push(corePath + core + "-wasm.data");
+			urlsToCache.push(corePath + core + "-thread-wasm.data");
+			urlsToCache.push(corePath + core + "-legacy-wasm.data");
+			urlsToCache.push(corePath + core + "-thread-legacy-wasm.data");
+			cacheCores.push(core);
+		}
+		if (urlsToCache.length > 0) {
+			cacheUrls(urlsToCache);
+			localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
 		}
+	}
 
-		function cacheListCores() {
-			const cacheCores =
-				JSON.parse(localStorage.getItem("cachedCores")) || [];
-			const cores = document.getElementsByName("core");
-			const urlsToCache = [];
-			const urlsToRemove = [];
-			for (const core of cores) {
-				if (core.checked && !cacheCores.includes(core.value)) {
-					urlsToCache.push(corePath + "reports/" + core + ".json");
-					urlsToCache.push(corePath + core.value + "-wasm.data");
-					urlsToCache.push(corePath + core.value + "-thread-wasm.data");
-					urlsToCache.push(corePath + core.value + "-legacy-wasm.data");
-					urlsToCache.push(
-						corePath + core.value + "-thread-legacy-wasm.data"
-					);
-					cacheCores.push(core.value);
-				}
-				if (!core.checked && cacheCores.includes(core.value)) {
-					urlsToRemove.push(corePath + "reports/" + core + ".json");
-					urlsToRemove.push(corePath + core.value + "-wasm.data");
-					urlsToRemove.push(corePath + core.value + "-thread-wasm.data");
-					urlsToRemove.push(corePath + core.value + "-legacy-wasm.data");
-					urlsToRemove.push(
-						corePath + core.value + "-thread-legacy-wasm.data"
-					);
-					cacheCores.splice(cacheCores.indexOf(core.value), 1);
-				}
-			}
-			if (urlsToCache.length > 0) {
-				cacheUrls(urlsToCache);
+	function cacheListCores() {
+		const cacheCores =
+			JSON.parse(localStorage.getItem("cachedCores")) || [];
+		const cores = document.getElementsByName("core");
+		const urlsToCache = [];
+		const urlsToRemove = [];
+		for (const core of cores) {
+			if (core.checked && !cacheCores.includes(core.value)) {
+				urlsToCache.push(corePath + "reports/" + core + ".json");
+				urlsToCache.push(corePath + core.value + "-wasm.data");
+				urlsToCache.push(corePath + core.value + "-thread-wasm.data");
+				urlsToCache.push(corePath + core.value + "-legacy-wasm.data");
+				urlsToCache.push(
+					corePath + core.value + "-thread-legacy-wasm.data"
+				);
+				cacheCores.push(core.value);
 			}
-			if (urlsToRemove.length > 0) {
-				removeUrls(urlsToRemove);
+			if (!core.checked && cacheCores.includes(core.value)) {
+				urlsToRemove.push(corePath + "reports/" + core + ".json");
+				urlsToRemove.push(corePath + core.value + "-wasm.data");
+				urlsToRemove.push(corePath + core.value + "-thread-wasm.data");
+				urlsToRemove.push(corePath + core.value + "-legacy-wasm.data");
+				urlsToRemove.push(
+					corePath + core.value + "-thread-legacy-wasm.data"
+				);
+				cacheCores.splice(cacheCores.indexOf(core.value), 1);
 			}
-			localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
-			closeSettings();
 		}
-
-		function cacheUrls(urls) {
-			if (navigator.serviceWorker.controller) {
-				navigator.serviceWorker.controller.postMessage({
-					type: "CACHE_URLS",
-					urls: urls,
-				});
-			}
-			urls.forEach(savedCDNFiles);
+		if (urlsToCache.length > 0) {
+			cacheUrls(urlsToCache);
 		}
+		if (urlsToRemove.length > 0) {
+			removeUrls(urlsToRemove);
+		}
+		localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
+		closeSettings();
+	}
 
-		function removeUrls(urls) {
-			if (navigator.serviceWorker.controller) {
-				navigator.serviceWorker.controller.postMessage({
-					type: "REMOVE_URLS",
-					urls: urls,
-				});
-			}
+	function cacheUrls(urls) {
+		if (navigator.serviceWorker.controller) {
+			navigator.serviceWorker.controller.postMessage({
+				type: "CACHE_URLS",
+				urls: urls,
+			});
 		}
+		urls.forEach(savedCDNFiles);
+	}
 
-		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/";
+	function removeUrls(urls) {
+		if (navigator.serviceWorker.controller) {
+			navigator.serviceWorker.controller.postMessage({
+				type: "REMOVE_URLS",
+				urls: urls,
 			});
 		}
+	}
+
+	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 = URL.createObjectURL(new Blob([input.files[0]]));
-			const parts = input.files[0].name.split(".");
+	input.addEventListener("change", async () => {
+		const url = URL.createObjectURL(new Blob([input.files[0]]));
+		const parts = input.files[0].name.split(".");
 
-			const core = await (async (ext) => {
-				if (["fds", "nes", "unif", "unf"].includes(ext)) return "nes";
+		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
-					)
+			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);
-					}
+			)
+				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 = "";
+				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 = "https://ads.emulatorjs.org/";
-			window.EJS_videoRotation = 0;
-			if (core === "psp") {
-				window.EJS_threads = true;
-			}
-			window.EJS_ready = function () {
-				detectAdBlock(
-					"data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9YSB7Y29sb3I6ICMwMGFmZTQ7fTwvc3R5bGU+PGJvZHkgc3R5bGU9Im1hcmdpbjowIj48ZGl2IGlkPSJhZGJsb2NrIj48aDE+SGkgQWRibG9jayBVc2VyITwvaDE+PHA+QWRzIG9uIHRoaXMgcGFnZSBtYXkgY29tZSBhbmQgZ28gZGVwZW5kaW5nIG9uIGhvdyBtYW55IHBlb3BsZSBhcmUgZnVuZGluZyB0aGlzIHByb2plY3QuPGJyPllvdSBjYW4gaGVscCBmdW5kIHRoaXMgcHJvamVjdCBvbiA8YSBocmVmPSJodHRwczovL3BhdHJlb24uY29tL0VtdWxhdG9ySlMiPnBhdHJlb248L2E+PC9wPjwvZGl2PjwvYm9keT48L2h0bWw+"
-				);
-			};
+				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 = "https://ads.emulatorjs.org/";
+		window.EJS_videoRotation = 0;
+		if (core === "psp") {
+			window.EJS_threads = true;
+		}
+		window.EJS_ready = function () {
+			detectAdBlock(
+				"data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9YSB7Y29sb3I6ICMwMGFmZTQ7fTwvc3R5bGU+PGJvZHkgc3R5bGU9Im1hcmdpbjowIj48ZGl2IGlkPSJhZGJsb2NrIj48aDE+SGkgQWRibG9jayBVc2VyITwvaDE+PHA+QWRzIG9uIHRoaXMgcGFnZSBtYXkgY29tZSBhbmQgZ28gZGVwZW5kaW5nIG9uIGhvdyBtYW55IHBlb3BsZSBhcmUgZnVuZGluZyB0aGlzIHByb2plY3QuPGJyPllvdSBjYW4gaGVscCBmdW5kIHRoaXMgcHJvamVjdCBvbiA8YSBocmVmPSJodHRwczovL3BhdHJlb24uY29tL0VtdWxhdG9ySlMiPnBhdHJlb248L2E+PC9wPjwvZGl2PjwvYm9keT48L2h0bWw+"
+			);
+		};
 
-			script.src = cdn + "loader.js";
-			document.body.appendChild(script);
-		});
+		script.src = cdn + "loader.js";
+		document.body.appendChild(script);
+	});
 
-		box.ondragover = () => box.setAttribute("drag", true);
-		box.ondragleave = () => box.removeAttribute("drag");
+	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) {
+	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;
 			}
-			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 + ")";
+		} 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 {
-					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/";
+					callback(null);
 				}
-				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;
+		};
+		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;
 			}
-			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"))
+				localStorage.getItem("version") &&
+				localStorage.getItem("version") === version
 			) {
-				installButton.style.display = "none";
-				installBoxText.innerHTML = "PWA's are not supported on this browser.";
-				return;
+				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 (
-				window.matchMedia("(display-mode: standalone)").matches ||
-				overide
+				navigator.userAgent.includes("Safari") &&
+				!navigator.userAgent.includes("Chrome")
 			) {
-				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.";
+					"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);
 			}
-		}
-		document.addEventListener("visibilitychange", function () {
-			window.matchMedia("(display-mode: standalone)").addListener((event) => {
-				if (event.matches) {
-					checkinstall(true);
-				}
-			});
 		});
-	</script>
-</body>
+	});
+</script>
 </html>
\ No newline at end of file

From 8fc1e234823c1446227b719ce77088f65d9eb881 Mon Sep 17 00:00:00 2001
From: Allan Niles <allancoding.dev@gmail.com>
Date: Thu, 26 Dec 2024 17:20:35 -0700
Subject: [PATCH 4/7] use spaces not tabs

---
 index.html | 1465 ++++++++++++++++++++++++++--------------------------
 sw.js      |  236 ++++-----
 2 files changed, 845 insertions(+), 856 deletions(-)

diff --git a/index.html b/index.html
index 54353b2..5f802d3 100644
--- a/index.html
+++ b/index.html
@@ -1,745 +1,734 @@
 <!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;
-			}
-
-			.offline-cores {
-				margin: 1em 0;
-				font-size: 18px;
-			}
-
-			#cores-form {
-				display: flex;
-				flex-direction: column;
-				align-items: flex-start;
-				max-height: 160px;
-				overflow-y: auto;
-				padding: 10px 0;
-			}
-		</style>
-	</head>
+<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;
+        }
+
+        .offline-cores {
+            margin: 1em 0;
+            font-size: 18px;
+        }
+
+        #cores-form {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            max-height: 160px;
+            overflow-y: auto;
+            padding: 10px 0;
+        }
+    </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">
-			<option value="stable">Loading...</option>
-		</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>
-				<div class="offline-cores">
-					Offline Cores will only use the stable release. Stable cores will
-					auto cache on use.<br />Select cores to cache:
-					<form id="cores-form"></form>
-					<br />
-					<button onclick="cacheListCores()">Cache Selected Cores</button>
-				</div>
-				<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>
+    <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">
+            <option value="stable">Loading...</option>
+        </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>
+                <div class="offline-cores">
+                    Offline Cores will only use the stable release. Stable cores will
+                    auto cache on use.<br />Select cores to cache:
+                    <form id="cores-form"></form>
+                    <br />
+                    <button onclick="cacheListCores()">Cache Selected Cores</button>
+                </div>
+                <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>
 </body>
 <script>
-	if ("serviceWorker" in navigator) {
-		const req = navigator.serviceWorker
-			.register("/sw.js")
-			.then((registration) => {
-				console.log(
-					"Service Worker registered with scope:",
-					registration.scope
-				);
-			})
-			.catch((error) => {
-				console.log("Service Worker registration failed:", error);
-			});
-
-		navigator.serviceWorker.addEventListener("message", (event) => {
-			if (event.data.type === "CACHE_UPDATE") {
-				savedCDNFiles(event.data.url);
-				cacheCore();
-			}
-		});
-	}
-
-	const corePath = "https://cdn.emulatorjs.org/stable/data/cores/";
-	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";
-		}
-	});
-
-	loadJSON(corePath + "cores.json", (response) => {
-		const cacheCores =
-			JSON.parse(localStorage.getItem("cachedCores")) || [];
-		const cores = JSON.parse(response);
-		for (const core of cores) {
-			const label = document.createElement("label");
-			const input = document.createElement("input");
-			input.type = "checkbox";
-			input.name = "core";
-			input.value = core.name;
-			if (cacheCores.includes(core.name)) {
-				input.checked = true;
-			}
-			label.appendChild(input);
-			label.appendChild(document.createTextNode(core.name));
-			document.getElementById("cores-form").appendChild(label);
-		}
-	});
-
-	function savedCDNFiles(url) {
-		const cachedFiles =
-			JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
-		cachedFiles.push(url);
-		localStorage.setItem("cachedCDNFiles", JSON.stringify(cachedFiles));
-	}
-
-	function cacheCore() {
-		const files = JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
-		const cacheCores =
-			JSON.parse(localStorage.getItem("cachedCores")) || [];
-		const cores = files
-			.filter((item) => item.endsWith(".json"))
-			.map((item) => item.split("/").pop().split(".")[0]);
-		const urlsToCache = [];
-		for (core of cores) {
-			if (cacheCores.includes(core)) {
-				continue;
-			}
-			urlsToCache.push(corePath + "reports/" + core + ".json");
-			urlsToCache.push(corePath + core + "-wasm.data");
-			urlsToCache.push(corePath + core + "-thread-wasm.data");
-			urlsToCache.push(corePath + core + "-legacy-wasm.data");
-			urlsToCache.push(corePath + core + "-thread-legacy-wasm.data");
-			cacheCores.push(core);
-		}
-		if (urlsToCache.length > 0) {
-			cacheUrls(urlsToCache);
-			localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
-		}
-	}
-
-	function cacheListCores() {
-		const cacheCores =
-			JSON.parse(localStorage.getItem("cachedCores")) || [];
-		const cores = document.getElementsByName("core");
-		const urlsToCache = [];
-		const urlsToRemove = [];
-		for (const core of cores) {
-			if (core.checked && !cacheCores.includes(core.value)) {
-				urlsToCache.push(corePath + "reports/" + core + ".json");
-				urlsToCache.push(corePath + core.value + "-wasm.data");
-				urlsToCache.push(corePath + core.value + "-thread-wasm.data");
-				urlsToCache.push(corePath + core.value + "-legacy-wasm.data");
-				urlsToCache.push(
-					corePath + core.value + "-thread-legacy-wasm.data"
-				);
-				cacheCores.push(core.value);
-			}
-			if (!core.checked && cacheCores.includes(core.value)) {
-				urlsToRemove.push(corePath + "reports/" + core + ".json");
-				urlsToRemove.push(corePath + core.value + "-wasm.data");
-				urlsToRemove.push(corePath + core.value + "-thread-wasm.data");
-				urlsToRemove.push(corePath + core.value + "-legacy-wasm.data");
-				urlsToRemove.push(
-					corePath + core.value + "-thread-legacy-wasm.data"
-				);
-				cacheCores.splice(cacheCores.indexOf(core.value), 1);
-			}
-		}
-		if (urlsToCache.length > 0) {
-			cacheUrls(urlsToCache);
-		}
-		if (urlsToRemove.length > 0) {
-			removeUrls(urlsToRemove);
-		}
-		localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
-		closeSettings();
-	}
-
-	function cacheUrls(urls) {
-		if (navigator.serviceWorker.controller) {
-			navigator.serviceWorker.controller.postMessage({
-				type: "CACHE_URLS",
-				urls: urls,
-			});
-		}
-		urls.forEach(savedCDNFiles);
-	}
-
-	function removeUrls(urls) {
-		if (navigator.serviceWorker.controller) {
-			navigator.serviceWorker.controller.postMessage({
-				type: "REMOVE_URLS",
-				urls: urls,
-			});
-		}
-	}
-
-	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 = URL.createObjectURL(new Blob([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 = "https://ads.emulatorjs.org/";
-		window.EJS_videoRotation = 0;
-		if (core === "psp") {
-			window.EJS_threads = true;
-		}
-		window.EJS_ready = function () {
-			detectAdBlock(
-				"data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9YSB7Y29sb3I6ICMwMGFmZTQ7fTwvc3R5bGU+PGJvZHkgc3R5bGU9Im1hcmdpbjowIj48ZGl2IGlkPSJhZGJsb2NrIj48aDE+SGkgQWRibG9jayBVc2VyITwvaDE+PHA+QWRzIG9uIHRoaXMgcGFnZSBtYXkgY29tZSBhbmQgZ28gZGVwZW5kaW5nIG9uIGhvdyBtYW55IHBlb3BsZSBhcmUgZnVuZGluZyB0aGlzIHByb2plY3QuPGJyPllvdSBjYW4gaGVscCBmdW5kIHRoaXMgcHJvamVjdCBvbiA8YSBocmVmPSJodHRwczovL3BhdHJlb24uY29tL0VtdWxhdG9ySlMiPnBhdHJlb248L2E+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);
-			}
-		});
-	});
+    if ("serviceWorker" in navigator) {
+        const req = navigator.serviceWorker
+            .register("/sw.js")
+            .then((registration) => {
+                console.log(
+                    "Service Worker registered with scope:",
+                    registration.scope
+                );
+            })
+            .catch((error) => {
+                console.log("Service Worker registration failed:", error);
+            });
+
+        navigator.serviceWorker.addEventListener("message", (event) => {
+            if (event.data.type === "CACHE_UPDATE") {
+                savedCDNFiles(event.data.url);
+                cacheCore();
+            }
+        });
+    }
+
+    const corePath = "https://cdn.emulatorjs.org/stable/data/cores/";
+    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";
+        }
+    });
+
+    loadJSON(corePath + "cores.json", (response) => {
+        const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
+        const cores = JSON.parse(response);
+        for (const core of cores) {
+            const label = document.createElement("label");
+            const input = document.createElement("input");
+            input.type = "checkbox";
+            input.name = "core";
+            input.value = core.name;
+            if (cacheCores.includes(core.name)) {
+                input.checked = true;
+            }
+            label.appendChild(input);
+            label.appendChild(document.createTextNode(core.name));
+            document.getElementById("cores-form").appendChild(label);
+        }
+    });
+
+    function savedCDNFiles(url) {
+        const cachedFiles =
+            JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
+        cachedFiles.push(url);
+        localStorage.setItem("cachedCDNFiles", JSON.stringify(cachedFiles));
+    }
+
+    function cacheCore() {
+        const files = JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
+        const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
+        const cores = files
+            .filter((item) => item.endsWith(".json"))
+            .map((item) => item.split("/").pop().split(".")[0]);
+        const urlsToCache = [];
+        for (core of cores) {
+            if (cacheCores.includes(core)) {
+                continue;
+            }
+            urlsToCache.push(corePath + "reports/" + core + ".json");
+            urlsToCache.push(corePath + core + "-wasm.data");
+            urlsToCache.push(corePath + core + "-thread-wasm.data");
+            urlsToCache.push(corePath + core + "-legacy-wasm.data");
+            urlsToCache.push(corePath + core + "-thread-legacy-wasm.data");
+            cacheCores.push(core);
+        }
+        if (urlsToCache.length > 0) {
+            cacheUrls(urlsToCache);
+            localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
+        }
+    }
+
+    function cacheListCores() {
+        const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
+        const cores = document.getElementsByName("core");
+        const urlsToCache = [];
+        const urlsToRemove = [];
+        for (const core of cores) {
+            if (core.checked && !cacheCores.includes(core.value)) {
+                urlsToCache.push(corePath + "reports/" + core + ".json");
+                urlsToCache.push(corePath + core.value + "-wasm.data");
+                urlsToCache.push(corePath + core.value + "-thread-wasm.data");
+                urlsToCache.push(corePath + core.value + "-legacy-wasm.data");
+                urlsToCache.push(corePath + core.value + "-thread-legacy-wasm.data");
+                cacheCores.push(core.value);
+            }
+            if (!core.checked && cacheCores.includes(core.value)) {
+                urlsToRemove.push(corePath + "reports/" + core + ".json");
+                urlsToRemove.push(corePath + core.value + "-wasm.data");
+                urlsToRemove.push(corePath + core.value + "-thread-wasm.data");
+                urlsToRemove.push(corePath + core.value + "-legacy-wasm.data");
+                urlsToRemove.push(corePath + core.value + "-thread-legacy-wasm.data");
+                cacheCores.splice(cacheCores.indexOf(core.value), 1);
+            }
+        }
+        if (urlsToCache.length > 0) {
+            cacheUrls(urlsToCache);
+        }
+        if (urlsToRemove.length > 0) {
+            removeUrls(urlsToRemove);
+        }
+        localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
+        closeSettings();
+    }
+
+    function cacheUrls(urls) {
+        if (navigator.serviceWorker.controller) {
+            navigator.serviceWorker.controller.postMessage({
+                type: "CACHE_URLS",
+                urls: urls,
+            });
+        }
+        urls.forEach(savedCDNFiles);
+    }
+
+    function removeUrls(urls) {
+        if (navigator.serviceWorker.controller) {
+            navigator.serviceWorker.controller.postMessage({
+                type: "REMOVE_URLS",
+                urls: urls,
+            });
+        }
+    }
+
+    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 = URL.createObjectURL(new Blob([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 = "https://ads.emulatorjs.org/";
+        window.EJS_videoRotation = 0;
+        if (core === "psp") {
+            window.EJS_threads = true;
+        }
+        window.EJS_ready = function () {
+            detectAdBlock(
+                "data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9YSB7Y29sb3I6ICMwMGFmZTQ7fTwvc3R5bGU+PGJvZHkgc3R5bGU9Im1hcmdpbjowIj48ZGl2IGlkPSJhZGJsb2NrIj48aDE+SGkgQWRibG9jayBVc2VyITwvaDE+PHA+QWRzIG9uIHRoaXMgcGFnZSBtYXkgY29tZSBhbmQgZ28gZGVwZW5kaW5nIG9uIGhvdyBtYW55IHBlb3BsZSBhcmUgZnVuZGluZyB0aGlzIHByb2plY3QuPGJyPllvdSBjYW4gaGVscCBmdW5kIHRoaXMgcHJvamVjdCBvbiA8YSBocmVmPSJodHRwczovL3BhdHJlb24uY29tL0VtdWxhdG9ySlMiPnBhdHJlb248L2E+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>
 </html>
\ No newline at end of file
diff --git a/sw.js b/sw.js
index 89e734c..7cef09d 100644
--- a/sw.js
+++ b/sw.js
@@ -1,140 +1,140 @@
 const CACHE_NAME = "offline-demo";
 const OFFLINE_FILES = [
-	"index.html",
-	"404.html",
-	"favicon.ico",
-	"manifest.json",
-	"img/icon.png",
-	"img/logo.png",
-	"img/logo-light.png",
-	"img/screenshot.png",
-	"img/mobile_screenshot.png",
-	"https://cdn.emulatorjs.org/versions.json",
-	"https://cdn.emulatorjs.org/stable/data/loader.js",
-	"https://cdn.emulatorjs.org/stable/data/version.json",
-	"https://cdn.emulatorjs.org/stable/data/emulator.min.js",
-	"https://cdn.emulatorjs.org/stable/data/emulator.min.css",
-	"https://cdn.emulatorjs.org/stable/data/cores/cores.json",
-	"https://cdn.emulatorjs.org/stable/data/compression/extract7z.js",
-	"https://cdn.emulatorjs.org/stable/data/compression/extractzip.js",
-	"https://cdn.emulatorjs.org/stable/data/compression/libunrar.js",
-	"https://cdn.emulatorjs.org/stable/data/compression/libunrar.wasm",
+    "index.html",
+    "404.html",
+    "favicon.ico",
+    "manifest.json",
+    "img/icon.png",
+    "img/logo.png",
+    "img/logo-light.png",
+    "img/screenshot.png",
+    "img/mobile_screenshot.png",
+    "https://cdn.emulatorjs.org/versions.json",
+    "https://cdn.emulatorjs.org/stable/data/loader.js",
+    "https://cdn.emulatorjs.org/stable/data/version.json",
+    "https://cdn.emulatorjs.org/stable/data/emulator.min.js",
+    "https://cdn.emulatorjs.org/stable/data/emulator.min.css",
+    "https://cdn.emulatorjs.org/stable/data/cores/cores.json",
+    "https://cdn.emulatorjs.org/stable/data/compression/extract7z.js",
+    "https://cdn.emulatorjs.org/stable/data/compression/extractzip.js",
+    "https://cdn.emulatorjs.org/stable/data/compression/libunrar.js",
+    "https://cdn.emulatorjs.org/stable/data/compression/libunrar.wasm",
 ];
 let cacheStatus = false;
 
 self.addEventListener("install", (event) => {
-	event.waitUntil(
-		(async () => {
-			const cache = await caches.open(CACHE_NAME);
-			await cache.addAll(OFFLINE_FILES);
-		})()
-	);
-	self.skipWaiting();
+    event.waitUntil(
+        (async () => {
+            const cache = await caches.open(CACHE_NAME);
+            await cache.addAll(OFFLINE_FILES);
+        })()
+    );
+    self.skipWaiting();
 });
 
 self.addEventListener("activate", (event) => {
-	self.clients.claim();
+    self.clients.claim();
 });
 
 self.addEventListener("message", async (event) => {
-	if (event.data && event.data.type === "CACHE_URLS") {
-		const urls = event.data.urls;
-		for (const url of urls) {
-			while (cacheStatus) {
-				await new Promise((resolve) => setTimeout(resolve, 1000));
-			}
-			cacheStatus = true;
-			try {
-				const cache = await caches.open(CACHE_NAME);
-				const response = await fetch(url);
-				if (response && response.status === 200) {
-					await cache.put(url, response.clone());
-				}
-			} finally {
-				cacheStatus = false;
-			}
-		}
-	}
-	if (event.data && event.data.type === "REMOVE_URLS") {
-		const urls = event.data.urls;
-		const cache = await caches.open(CACHE_NAME);
-		for (const url of urls) {
-			await cache.delete(url);
-		}
-	}
+    if (event.data && event.data.type === "CACHE_URLS") {
+        const urls = event.data.urls;
+        for (const url of urls) {
+            while (cacheStatus) {
+                await new Promise((resolve) => setTimeout(resolve, 1000));
+            }
+            cacheStatus = true;
+            try {
+                const cache = await caches.open(CACHE_NAME);
+                const response = await fetch(url);
+                if (response && response.status === 200) {
+                    await cache.put(url, response.clone());
+                }
+            } finally {
+                cacheStatus = false;
+            }
+        }
+    }
+    if (event.data && event.data.type === "REMOVE_URLS") {
+        const urls = event.data.urls;
+        const cache = await caches.open(CACHE_NAME);
+        for (const url of urls) {
+            await cache.delete(url);
+        }
+    }
 });
 
 function cacheUpdate(fileUrl) {
-	self.clients.matchAll().then((clients) => {
-		clients.forEach((client) => {
-			client.postMessage({
-				type: "CACHE_UPDATE",
-				url: fileUrl,
-			});
-		});
-	});
+    self.clients.matchAll().then((clients) => {
+        clients.forEach((client) => {
+            client.postMessage({
+                type: "CACHE_UPDATE",
+                url: fileUrl,
+            });
+        });
+    });
 }
 
 function getCacheUrl(url) {
-	if (url === "/") {
-		return "index.html";
-	} else if (url === "/versions") {
-		return "https://cdn.emulatorjs.org/versions.json";
-	} else if (url.startsWith("/")) {
-		return url.slice(1);
-	}
-	return url;
+    if (url === "/") {
+        return "index.html";
+    } else if (url === "/versions") {
+        return "https://cdn.emulatorjs.org/versions.json";
+    } else if (url.startsWith("/")) {
+        return url.slice(1);
+    }
+    return url;
 }
 
 self.addEventListener("fetch", (event) => {
-	event.respondWith(
-		(async () => {
-			const requestURL = new URL(event.request.url);
-			let url =
-				requestURL.hostname === "cdn.emulatorjs.org"
-					? event.request.url
-					: requestURL.pathname;
-			const cache = await caches.open(CACHE_NAME);
-			if (
-				event.request.url.startsWith("https://cdn.emulatorjs.org/stable/data/")
-			) {
-				const cachedResponse = await cache.match(event.request);
-				if (cachedResponse) {
-					return cachedResponse;
-				}
-				cacheStatus = true;
-				const networkResponse = await fetch(event.request);
-				if (networkResponse && networkResponse.status === 200) {
-					cache.put(event.request, networkResponse.clone());
-					cacheUpdate(event.request.url);
-				}
-				cacheStatus = false;
-				return networkResponse;
-			}
-			if (
-				requestURL.hostname === "cdn.emulatorjs.org" &&
-				!OFFLINE_FILES.includes(event.request.url)
-			) {
-				return await fetch(event.request);
-			}
-			try {
-				const req =
-					url === "/versions"
-						? "https://cdn.emulatorjs.org/versions.json"
-						: event.request;
-				const res = await fetch(req);
-				if (!res.status.toString().startsWith("2")) {
-					throw new Error("status code not ok");
-				}
-				cache.put(getCacheUrl(url), res.clone());
-				return res;
-			} catch (e) {
-				url = getCacheUrl(url);
-				if (!OFFLINE_FILES.includes(url)) {
-					url = "404.html";
-				}
-				return await cache.match(url);
-			}
-		})()
-	);
+    event.respondWith(
+        (async () => {
+            const requestURL = new URL(event.request.url);
+            let url =
+                requestURL.hostname === "cdn.emulatorjs.org"
+                    ? event.request.url
+                    : requestURL.pathname;
+            const cache = await caches.open(CACHE_NAME);
+            if (
+                event.request.url.startsWith("https://cdn.emulatorjs.org/stable/data/")
+            ) {
+                const cachedResponse = await cache.match(event.request);
+                if (cachedResponse) {
+                    return cachedResponse;
+                }
+                cacheStatus = true;
+                const networkResponse = await fetch(event.request);
+                if (networkResponse && networkResponse.status === 200) {
+                    cache.put(event.request, networkResponse.clone());
+                    cacheUpdate(event.request.url);
+                }
+                cacheStatus = false;
+                return networkResponse;
+            }
+            if (
+                requestURL.hostname === "cdn.emulatorjs.org" &&
+                !OFFLINE_FILES.includes(event.request.url)
+            ) {
+                return await fetch(event.request);
+            }
+            try {
+                const req =
+                    url === "/versions"
+                        ? "https://cdn.emulatorjs.org/versions.json"
+                        : event.request;
+                const res = await fetch(req);
+                if (!res.status.toString().startsWith("2")) {
+                    throw new Error("status code not ok");
+                }
+                cache.put(getCacheUrl(url), res.clone());
+                return res;
+            } catch (e) {
+                url = getCacheUrl(url);
+                if (!OFFLINE_FILES.includes(url)) {
+                    url = "404.html";
+                }
+                return await cache.match(url);
+            }
+        })()
+    );
 });

From aea4ccbe65e3771ea1f8a3762f54436adfe78c3b Mon Sep 17 00:00:00 2001
From: Allan Niles <allancoding.dev@gmail.com>
Date: Thu, 26 Dec 2024 17:26:07 -0700
Subject: [PATCH 5/7] html formating

---
 index.html | 1364 ++++++++++++++++++++++++++--------------------------
 1 file changed, 682 insertions(+), 682 deletions(-)

diff --git a/index.html b/index.html
index 5f802d3..6f0dd1f 100644
--- a/index.html
+++ b/index.html
@@ -1,734 +1,734 @@
 <!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;
-        }
+    <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 {
+                margin: 0;
+                overflow: hidden;
+            }
 
-        body,
-        #box,
-        #top {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-        }
+            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 {
+                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;
-        }
+            #box:hover,
+            #box[drag] {
+                border-color: #38f;
+                color: #ddd;
+            }
 
-        #input {
-            cursor: pointer;
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-        }
+            #input {
+                cursor: pointer;
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                opacity: 0;
+            }
 
-        #display {
-            width: 100%;
-            height: 100%;
-        }
+            #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,
+            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;
-        }
+            select:hover,
+            button:hover {
+                background-color: #666;
+                color: #ddd;
+            }
 
-        .logo {
-            width: 130px;
-            height: 130px;
-            filter: drop-shadow(0 0 10px white);
-        }
+            .logo {
+                width: 130px;
+                height: 130px;
+                filter: drop-shadow(0 0 10px white);
+            }
 
-        #top,
-        #version {
-            margin: 5px;
-        }
+            #top,
+            #version {
+                margin: 5px;
+            }
 
-        #version button {
-            fill: #aaa;
-            width: auto;
-            padding: 0.2em 0.3em;
-            text-align: center;
-            margin: 0.5em 0.1em;
-        }
+            #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;
-        }
+            #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 {
+                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;
-        }
+            .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;
-        }
+            .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;
-        }
+            .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;
-        }
+            .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;
-        }
+            .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;
-        }
+            .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 .title,
+            .popup .options p {
+                display: flex;
+                align-items: center;
+            }
 
-        .popup .options p {
-            margin: 1em 0;
-            font-size: 18px;
-        }
+            .popup .options p {
+                margin: 1em 0;
+                font-size: 18px;
+            }
 
-        .popup .title h1 {
-            margin: 0 0 0.3em;
-            font-size: 48px;
-        }
+            .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 .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;
-        }
+            .popup .bottom {
+                display: flex;
+                justify-content: flex-end;
+                align-items: center;
+                margin-top: 1em;
+            }
 
-        #installbox {
-            display: inline-flex;
-            align-items: baseline;
-        }
+            #installbox {
+                display: inline-flex;
+                align-items: baseline;
+            }
 
-        #installboxtext {
-            margin-top: 0 !important;
-        }
+            #installboxtext {
+                margin-top: 0 !important;
+            }
 
-        button:disabled {
-            background-color: #666;
-            color: #aaa;
-            cursor: not-allowed;
-        }
+            button:disabled {
+                background-color: #666;
+                color: #aaa;
+                cursor: not-allowed;
+            }
 
-        .hide {
-            display: none !important;
-        }
+            .hide {
+                display: none !important;
+            }
 
-        .offline-cores {
-            margin: 1em 0;
-            font-size: 18px;
-        }
+            .offline-cores {
+                margin: 1em 0;
+                font-size: 18px;
+            }
 
-        #cores-form {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            max-height: 160px;
-            overflow-y: auto;
-            padding: 10px 0;
-        }
-    </style>
-</head>
+            #cores-form {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                max-height: 160px;
+                overflow-y: auto;
+                padding: 10px 0;
+            }
+        </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">
-            <option value="stable">Loading...</option>
-        </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>
-                <div class="offline-cores">
-                    Offline Cores will only use the stable release. Stable cores will
-                    auto cache on use.<br />Select cores to cache:
-                    <form id="cores-form"></form>
-                    <br />
-                    <button onclick="cacheListCores()">Cache Selected Cores</button>
+    <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">
+                <option value="stable">Loading...</option>
+            </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>
-                <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 class="options">
+                    <p id="offline-status">Offline Status: CHECKING</p>
+                    <div class="offline-cores">
+                        Offline Cores will only use the stable release. Stable cores will
+                        auto cache on use.<br />Select cores to cache:
+                        <form id="cores-form"></form>
+                        <br />
+                        <button onclick="cacheListCores()">Cache Selected Cores</button>
+                    </div>
+                    <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 class="bottom">
-                <button onclick="closeSettings()">Close</button>
             </div>
         </div>
-    </div>
-    <div class="popup-overlay"></div>
-</body>
-<script>
-    if ("serviceWorker" in navigator) {
-        const req = navigator.serviceWorker
-            .register("/sw.js")
-            .then((registration) => {
-                console.log(
-                    "Service Worker registered with scope:",
-                    registration.scope
-                );
-            })
-            .catch((error) => {
-                console.log("Service Worker registration failed:", error);
-            });
-
-        navigator.serviceWorker.addEventListener("message", (event) => {
-            if (event.data.type === "CACHE_UPDATE") {
-                savedCDNFiles(event.data.url);
-                cacheCore();
+        <div class="popup-overlay"></div>
+        <script>
+            if ("serviceWorker" in navigator) {
+                const req = navigator.serviceWorker
+                    .register("/sw.js")
+                    .then((registration) => {
+                        console.log(
+                            "Service Worker registered with scope:",
+                            registration.scope
+                        );
+                    })
+                    .catch((error) => {
+                        console.log("Service Worker registration failed:", error);
+                    });
+    
+                navigator.serviceWorker.addEventListener("message", (event) => {
+                    if (event.data.type === "CACHE_UPDATE") {
+                        savedCDNFiles(event.data.url);
+                        cacheCore();
+                    }
+                });
             }
-        });
-    }
-
-    const corePath = "https://cdn.emulatorjs.org/stable/data/cores/";
-    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";
-        }
-    });
-
-    loadJSON(corePath + "cores.json", (response) => {
-        const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
-        const cores = JSON.parse(response);
-        for (const core of cores) {
-            const label = document.createElement("label");
-            const input = document.createElement("input");
-            input.type = "checkbox";
-            input.name = "core";
-            input.value = core.name;
-            if (cacheCores.includes(core.name)) {
-                input.checked = true;
-            }
-            label.appendChild(input);
-            label.appendChild(document.createTextNode(core.name));
-            document.getElementById("cores-form").appendChild(label);
-        }
-    });
-
-    function savedCDNFiles(url) {
-        const cachedFiles =
-            JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
-        cachedFiles.push(url);
-        localStorage.setItem("cachedCDNFiles", JSON.stringify(cachedFiles));
-    }
-
-    function cacheCore() {
-        const files = JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
-        const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
-        const cores = files
-            .filter((item) => item.endsWith(".json"))
-            .map((item) => item.split("/").pop().split(".")[0]);
-        const urlsToCache = [];
-        for (core of cores) {
-            if (cacheCores.includes(core)) {
-                continue;
-            }
-            urlsToCache.push(corePath + "reports/" + core + ".json");
-            urlsToCache.push(corePath + core + "-wasm.data");
-            urlsToCache.push(corePath + core + "-thread-wasm.data");
-            urlsToCache.push(corePath + core + "-legacy-wasm.data");
-            urlsToCache.push(corePath + core + "-thread-legacy-wasm.data");
-            cacheCores.push(core);
-        }
-        if (urlsToCache.length > 0) {
-            cacheUrls(urlsToCache);
-            localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
-        }
-    }
-
-    function cacheListCores() {
-        const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
-        const cores = document.getElementsByName("core");
-        const urlsToCache = [];
-        const urlsToRemove = [];
-        for (const core of cores) {
-            if (core.checked && !cacheCores.includes(core.value)) {
-                urlsToCache.push(corePath + "reports/" + core + ".json");
-                urlsToCache.push(corePath + core.value + "-wasm.data");
-                urlsToCache.push(corePath + core.value + "-thread-wasm.data");
-                urlsToCache.push(corePath + core.value + "-legacy-wasm.data");
-                urlsToCache.push(corePath + core.value + "-thread-legacy-wasm.data");
-                cacheCores.push(core.value);
-            }
-            if (!core.checked && cacheCores.includes(core.value)) {
-                urlsToRemove.push(corePath + "reports/" + core + ".json");
-                urlsToRemove.push(corePath + core.value + "-wasm.data");
-                urlsToRemove.push(corePath + core.value + "-thread-wasm.data");
-                urlsToRemove.push(corePath + core.value + "-legacy-wasm.data");
-                urlsToRemove.push(corePath + core.value + "-thread-legacy-wasm.data");
-                cacheCores.splice(cacheCores.indexOf(core.value), 1);
-            }
-        }
-        if (urlsToCache.length > 0) {
-            cacheUrls(urlsToCache);
-        }
-        if (urlsToRemove.length > 0) {
-            removeUrls(urlsToRemove);
-        }
-        localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
-        closeSettings();
-    }
-
-    function cacheUrls(urls) {
-        if (navigator.serviceWorker.controller) {
-            navigator.serviceWorker.controller.postMessage({
-                type: "CACHE_URLS",
-                urls: urls,
+    
+            const corePath = "https://cdn.emulatorjs.org/stable/data/cores/";
+            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";
+                }
             });
-        }
-        urls.forEach(savedCDNFiles);
-    }
-
-    function removeUrls(urls) {
-        if (navigator.serviceWorker.controller) {
-            navigator.serviceWorker.controller.postMessage({
-                type: "REMOVE_URLS",
-                urls: urls,
+    
+            loadJSON(corePath + "cores.json", (response) => {
+                const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
+                const cores = JSON.parse(response);
+                for (const core of cores) {
+                    const label = document.createElement("label");
+                    const input = document.createElement("input");
+                    input.type = "checkbox";
+                    input.name = "core";
+                    input.value = core.name;
+                    if (cacheCores.includes(core.name)) {
+                        input.checked = true;
+                    }
+                    label.appendChild(input);
+                    label.appendChild(document.createTextNode(core.name));
+                    document.getElementById("cores-form").appendChild(label);
+                }
             });
-        }
-    }
-
-    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 = URL.createObjectURL(new Blob([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",
+    
+            function savedCDNFiles(url) {
+                const cachedFiles =
+                    JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
+                cachedFiles.push(url);
+                localStorage.setItem("cachedCDNFiles", JSON.stringify(cachedFiles));
+            }
+    
+            function cacheCore() {
+                const files = JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
+                const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
+                const cores = files
+                    .filter((item) => item.endsWith(".json"))
+                    .map((item) => item.split("/").pop().split(".")[0]);
+                const urlsToCache = [];
+                for (core of cores) {
+                    if (cacheCores.includes(core)) {
+                        continue;
+                    }
+                    urlsToCache.push(corePath + "reports/" + core + ".json");
+                    urlsToCache.push(corePath + core + "-wasm.data");
+                    urlsToCache.push(corePath + core + "-thread-wasm.data");
+                    urlsToCache.push(corePath + core + "-legacy-wasm.data");
+                    urlsToCache.push(corePath + core + "-thread-legacy-wasm.data");
+                    cacheCores.push(core);
+                }
+                if (urlsToCache.length > 0) {
+                    cacheUrls(urlsToCache);
+                    localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
+                }
+            }
+    
+            function cacheListCores() {
+                const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
+                const cores = document.getElementsByName("core");
+                const urlsToCache = [];
+                const urlsToRemove = [];
+                for (const core of cores) {
+                    if (core.checked && !cacheCores.includes(core.value)) {
+                        urlsToCache.push(corePath + "reports/" + core + ".json");
+                        urlsToCache.push(corePath + core.value + "-wasm.data");
+                        urlsToCache.push(corePath + core.value + "-thread-wasm.data");
+                        urlsToCache.push(corePath + core.value + "-legacy-wasm.data");
+                        urlsToCache.push(corePath + core.value + "-thread-legacy-wasm.data");
+                        cacheCores.push(core.value);
+                    }
+                    if (!core.checked && cacheCores.includes(core.value)) {
+                        urlsToRemove.push(corePath + "reports/" + core + ".json");
+                        urlsToRemove.push(corePath + core.value + "-wasm.data");
+                        urlsToRemove.push(corePath + core.value + "-thread-wasm.data");
+                        urlsToRemove.push(corePath + core.value + "-legacy-wasm.data");
+                        urlsToRemove.push(corePath + core.value + "-thread-legacy-wasm.data");
+                        cacheCores.splice(cacheCores.indexOf(core.value), 1);
+                    }
+                }
+                if (urlsToCache.length > 0) {
+                    cacheUrls(urlsToCache);
+                }
+                if (urlsToRemove.length > 0) {
+                    removeUrls(urlsToRemove);
+                }
+                localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
+                closeSettings();
+            }
+    
+            function cacheUrls(urls) {
+                if (navigator.serviceWorker.controller) {
+                    navigator.serviceWorker.controller.postMessage({
+                        type: "CACHE_URLS",
+                        urls: urls,
+                    });
+                }
+                urls.forEach(savedCDNFiles);
+            }
+    
+            function removeUrls(urls) {
+                if (navigator.serviceWorker.controller) {
+                    navigator.serviceWorker.controller.postMessage({
+                        type: "REMOVE_URLS",
+                        urls: urls,
+                    });
+                }
+            }
+    
+            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 = URL.createObjectURL(new Blob([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 = "https://ads.emulatorjs.org/";
+                window.EJS_videoRotation = 0;
+                if (core === "psp") {
+                    window.EJS_threads = true;
+                }
+                window.EJS_ready = function () {
+                    detectAdBlock(
+                        "data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9YSB7Y29sb3I6ICMwMGFmZTQ7fTwvc3R5bGU+PGJvZHkgc3R5bGU9Im1hcmdpbjowIj48ZGl2IGlkPSJhZGJsb2NrIj48aDE+SGkgQWRibG9jayBVc2VyITwvaDE+PHA+QWRzIG9uIHRoaXMgcGFnZSBtYXkgY29tZSBhbmQgZ28gZGVwZW5kaW5nIG9uIGhvdyBtYW55IHBlb3BsZSBhcmUgZnVuZGluZyB0aGlzIHByb2plY3QuPGJyPllvdSBjYW4gaGVscCBmdW5kIHRoaXMgcHJvamVjdCBvbiA8YSBocmVmPSJodHRwczovL3BhdHJlb24uY29tL0VtdWxhdG9ySlMiPnBhdHJlb248L2E+PC9wPjwvZGl2PjwvYm9keT48L2h0bWw+"
+                    );
                 };
-                const button = document.createElement("button");
-                const select = document.createElement("select");
-
-                for (const type in cores) {
+    
+                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 = cores[type];
-                    option.textContent = type;
+                    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);
                 }
-
-                button.onclick = () => resolve(select[select.selectedIndex].value);
-                button.textContent = "Load game";
-                box.innerHTML = "";
-
-                box.appendChild(select);
-                box.appendChild(button);
+            }
+    
+            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");
             });
-        })(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 = "https://ads.emulatorjs.org/";
-        window.EJS_videoRotation = 0;
-        if (core === "psp") {
-            window.EJS_threads = true;
-        }
-        window.EJS_ready = function () {
-            detectAdBlock(
-                "data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9YSB7Y29sb3I6ICMwMGFmZTQ7fTwvc3R5bGU+PGJvZHkgc3R5bGU9Im1hcmdpbjowIj48ZGl2IGlkPSJhZGJsb2NrIj48aDE+SGkgQWRibG9jayBVc2VyITwvaDE+PHA+QWRzIG9uIHRoaXMgcGFnZSBtYXkgY29tZSBhbmQgZ28gZGVwZW5kaW5nIG9uIGhvdyBtYW55IHBlb3BsZSBhcmUgZnVuZGluZyB0aGlzIHByb2plY3QuPGJyPllvdSBjYW4gaGVscCBmdW5kIHRoaXMgcHJvamVjdCBvbiA8YSBocmVmPSJodHRwczovL3BhdHJlb24uY29tL0VtdWxhdG9ySlMiPnBhdHJlb248L2E+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);
+    
+            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 {
-                    callback(null);
+                    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.";
                 }
             }
-        };
-        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) {
+            document.addEventListener("visibilitychange", function () {
+                window.matchMedia("(display-mode: standalone)").addListener((event) => {
+                    if (event.matches) {
                         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>
+            });
+        </script>
+    </body>
 </html>
\ No newline at end of file

From df5d8e2a83f7b5c9f8ebd0bee3f7a9bc6985a699 Mon Sep 17 00:00:00 2001
From: Allan Niles <allancoding.dev@gmail.com>
Date: Thu, 26 Dec 2024 17:45:20 -0700
Subject: [PATCH 6/7] dumb auto formating

---
 index.html | 180 +++++++++++++++++------------------------------------
 sw.js      |  19 ++----
 2 files changed, 62 insertions(+), 137 deletions(-)

diff --git a/index.html b/index.html
index 6f0dd1f..e5c9a87 100644
--- a/index.html
+++ b/index.html
@@ -233,10 +233,6 @@
                 cursor: not-allowed;
             }
 
-            .hide {
-                display: none !important;
-            }
-
             .offline-cores {
                 margin: 1em 0;
                 font-size: 18px;
@@ -252,7 +248,6 @@
             }
         </style>
     </head>
-
     <body>
         <div id="top">
             <h1>EmulatorJS Demo</h1>
@@ -266,20 +261,9 @@ <h1>EmulatorJS Demo</h1>
             <select id="version-select">
                 <option value="stable">Loading...</option>
             </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" />
+                    <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>
@@ -290,19 +274,13 @@ <h1>Settings</h1>
                 </div>
                 <div class="options">
                     <p id="offline-status">Offline Status: CHECKING</p>
-                    <div class="offline-cores">
-                        Offline Cores will only use the stable release. Stable cores will
-                        auto cache on use.<br />Select cores to cache:
+                    <div class="offline-cores">Offline Cores will only use the stable release.
+                        <br>Stable cores will auto cache on use. Select cores to cache:
                         <form id="cores-form"></form>
                         <br />
                         <button onclick="cacheListCores()">Cache Selected Cores</button>
+                        <button id="remove-version" onclick="removeallsaved()">Remove All</button>
                     </div>
-                    <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>
@@ -316,18 +294,13 @@ <h1>Settings</h1>
         <div class="popup-overlay"></div>
         <script>
             if ("serviceWorker" in navigator) {
-                const req = navigator.serviceWorker
-                    .register("/sw.js")
+                const req = navigator.serviceWorker.register("/sw.js")
                     .then((registration) => {
-                        console.log(
-                            "Service Worker registered with scope:",
-                            registration.scope
-                        );
+                        console.log("Service Worker registered with scope:", registration.scope);
                     })
                     .catch((error) => {
                         console.log("Service Worker registration failed:", error);
                     });
-    
                 navigator.serviceWorker.addEventListener("message", (event) => {
                     if (event.data.type === "CACHE_UPDATE") {
                         savedCDNFiles(event.data.url);
@@ -335,22 +308,20 @@ <h1>Settings</h1>
                     }
                 });
             }
-    
+
             const corePath = "https://cdn.emulatorjs.org/stable/data/cores/";
             loadJSON("/versions", (response) => {
                 if (!response) {
                     loadJSON("https://cdn.emulatorjs.org/versions.json", (resp) =>
                         loadVersions(resp)
                     );
-                    document.getElementById("offline-status").textContent =
-                        "Offline Status: NOT INSTALLED";
+                    document.getElementById("offline-status").textContent = "Offline Status: NOT INSTALLED";
                 } else {
                     loadVersions(response);
-                    document.getElementById("offline-status").textContent =
-                        "Offline Status: READY";
+                    document.getElementById("offline-status").textContent = "Offline Status: READY";
                 }
             });
-    
+
             loadJSON(corePath + "cores.json", (response) => {
                 const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
                 const cores = JSON.parse(response);
@@ -368,20 +339,18 @@ <h1>Settings</h1>
                     document.getElementById("cores-form").appendChild(label);
                 }
             });
-    
+
             function savedCDNFiles(url) {
                 const cachedFiles =
                     JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
                 cachedFiles.push(url);
                 localStorage.setItem("cachedCDNFiles", JSON.stringify(cachedFiles));
             }
-    
+
             function cacheCore() {
                 const files = JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
                 const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
-                const cores = files
-                    .filter((item) => item.endsWith(".json"))
-                    .map((item) => item.split("/").pop().split(".")[0]);
+                const cores = files.filter((item) => item.endsWith(".json")).map((item) => item.split("/").pop().split(".")[0]);
                 const urlsToCache = [];
                 for (core of cores) {
                     if (cacheCores.includes(core)) {
@@ -399,7 +368,7 @@ <h1>Settings</h1>
                     localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
                 }
             }
-    
+
             function cacheListCores() {
                 const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
                 const cores = document.getElementsByName("core");
@@ -432,7 +401,15 @@ <h1>Settings</h1>
                 localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
                 closeSettings();
             }
-    
+
+            function removeallsaved() {
+                const cores = document.getElementsByName("core");
+                for (const core of cores) {
+                    core.checked = false;
+                }
+                cacheListCores()
+            }
+
             function cacheUrls(urls) {
                 if (navigator.serviceWorker.controller) {
                     navigator.serviceWorker.controller.postMessage({
@@ -442,7 +419,7 @@ <h1>Settings</h1>
                 }
                 urls.forEach(savedCDNFiles);
             }
-    
+
             function removeUrls(urls) {
                 if (navigator.serviceWorker.controller) {
                     navigator.serviceWorker.controller.postMessage({
@@ -451,56 +428,32 @@ <h1>Settings</h1>
                     });
                 }
             }
-    
+
             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.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/";
+                    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 = URL.createObjectURL(new Blob([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 (["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",
@@ -509,7 +462,7 @@ <h1>Settings</h1>
                             "Nintendo DS": "nds",
                             "Nintendo Entertainment System": "nes",
                             "Super Nintendo Entertainment System": "snes",
-                            PlayStation: "psx",
+                            "PlayStation": "psx",
                             "Virtual Boy": "vb",
                             "Sega Mega Drive": "segaMD",
                             "Sega Master System": "segaMS",
@@ -525,37 +478,36 @@ <h1>Settings</h1>
                             "NEC PC-FX": "pcfx",
                             "SNK NeoGeo Pocket (Color)": "ngp",
                             "Bandai WonderSwan (Color)": "ws",
-                            ColecoVision: "coleco",
+                            "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();
@@ -563,9 +515,9 @@ <h1>Settings</h1>
                 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 = "";
@@ -579,24 +531,20 @@ <h1>Settings</h1>
                     window.EJS_threads = true;
                 }
                 window.EJS_ready = function () {
-                    detectAdBlock(
-                        "data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9YSB7Y29sb3I6ICMwMGFmZTQ7fTwvc3R5bGU+PGJvZHkgc3R5bGU9Im1hcmdpbjowIj48ZGl2IGlkPSJhZGJsb2NrIj48aDE+SGkgQWRibG9jayBVc2VyITwvaDE+PHA+QWRzIG9uIHRoaXMgcGFnZSBtYXkgY29tZSBhbmQgZ28gZGVwZW5kaW5nIG9uIGhvdyBtYW55IHBlb3BsZSBhcmUgZnVuZGluZyB0aGlzIHByb2plY3QuPGJyPllvdSBjYW4gaGVscCBmdW5kIHRoaXMgcHJvamVjdCBvbiA8YSBocmVmPSJodHRwczovL3BhdHJlb24uY29tL0VtdWxhdG9ySlMiPnBhdHJlb248L2E+PC9wPjwvZGl2PjwvYm9keT48L2h0bWw+"
-                    );
+                    detectAdBlock("data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9YSB7Y29sb3I6ICMwMGFmZTQ7fTwvc3R5bGU+PGJvZHkgc3R5bGU9Im1hcmdpbjowIj48ZGl2IGlkPSJhZGJsb2NrIj48aDE+SGkgQWRibG9jayBVc2VyITwvaDE+PHA+QWRzIG9uIHRoaXMgcGFnZSBtYXkgY29tZSBhbmQgZ28gZGVwZW5kaW5nIG9uIGhvdyBtYW55IHBlb3BsZSBhcmUgZnVuZGluZyB0aGlzIHByb2plY3QuPGJyPllvdSBjYW4gaGVscCBmdW5kIHRoaXMgcHJvamVjdCBvbiA8YSBocmVmPSJodHRwczovL3BhdHJlb24uY29tL0VtdWxhdG9ySlMiPnBhdHJlb248L2E+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 + '"]'
-                    );
+                    const adframe = document.querySelector('iframe[src="' + window.EJS_AdUrl + '"]');
                     var adpage = adframe.contentWindow.document;
                     window.EJS_AdUrl = adframe.src;
                     if (!adpage) {
@@ -609,7 +557,7 @@ <h1>Settings</h1>
                     window.EJS_adBlocked(url);
                 }
             }
-    
+
             function loadJSON(url, callback) {
                 var xobj = new XMLHttpRequest();
                 xobj.overrideMimeType("application/json");
@@ -625,7 +573,7 @@ <h1>Settings</h1>
                 };
                 xobj.send();
             }
-    
+
             function addOptions(select, options, default_option, github) {
                 for (const version in options) {
                     const option = document.createElement("option");
@@ -635,10 +583,7 @@ <h1>Settings</h1>
                     } else {
                         option.textContent = version;
                     }
-                    if (
-                        localStorage.getItem("version") &&
-                        localStorage.getItem("version") === 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)) {
@@ -648,24 +593,24 @@ <h1>Settings</h1>
                     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;
@@ -674,7 +619,7 @@ <h1>Settings</h1>
                 installButton.disabled = false;
                 console.log("Supported");
             });
-    
+
             installButton.addEventListener("click", async () => {
                 if (!installPrompt) {
                     return;
@@ -683,14 +628,10 @@ <h1>Settings</h1>
                 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"))
-                ) {
+                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;
@@ -702,12 +643,8 @@ <h1>Settings</h1>
                     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";
+                    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) {
@@ -718,8 +655,7 @@ <h1>Settings</h1>
                             }
                         });
                     }
-                    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.";
+                    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 () {
diff --git a/sw.js b/sw.js
index 7cef09d..1c15112 100644
--- a/sw.js
+++ b/sw.js
@@ -90,14 +90,9 @@ self.addEventListener("fetch", (event) => {
     event.respondWith(
         (async () => {
             const requestURL = new URL(event.request.url);
-            let url =
-                requestURL.hostname === "cdn.emulatorjs.org"
-                    ? event.request.url
-                    : requestURL.pathname;
+            let url = requestURL.hostname === "cdn.emulatorjs.org" ? event.request.url : requestURL.pathname;
             const cache = await caches.open(CACHE_NAME);
-            if (
-                event.request.url.startsWith("https://cdn.emulatorjs.org/stable/data/")
-            ) {
+            if (event.request.url.startsWith("https://cdn.emulatorjs.org/stable/data/")) {
                 const cachedResponse = await cache.match(event.request);
                 if (cachedResponse) {
                     return cachedResponse;
@@ -111,17 +106,11 @@ self.addEventListener("fetch", (event) => {
                 cacheStatus = false;
                 return networkResponse;
             }
-            if (
-                requestURL.hostname === "cdn.emulatorjs.org" &&
-                !OFFLINE_FILES.includes(event.request.url)
-            ) {
+            if (requestURL.hostname === "cdn.emulatorjs.org" && !OFFLINE_FILES.includes(event.request.url)) {
                 return await fetch(event.request);
             }
             try {
-                const req =
-                    url === "/versions"
-                        ? "https://cdn.emulatorjs.org/versions.json"
-                        : event.request;
+                const req = url === "/versions" ? "https://cdn.emulatorjs.org/versions.json" : event.request;
                 const res = await fetch(req);
                 if (!res.status.toString().startsWith("2")) {
                     throw new Error("status code not ok");

From 7415f1293808cff66edf9c98f76406630ed1845a Mon Sep 17 00:00:00 2001
From: Allan Niles <allancoding.dev@gmail.com>
Date: Fri, 27 Dec 2024 22:06:18 -0700
Subject: [PATCH 7/7] offline cores are manual

---
 .gitignore |   1 +
 index.html | 116 +++++++++++++++++++++++------------------------------
 sw.js      |  36 ++++-------------
 3 files changed, 58 insertions(+), 95 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c6f9a44
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.vscode/settings.json
diff --git a/index.html b/index.html
index e5c9a87..295f788 100644
--- a/index.html
+++ b/index.html
@@ -274,12 +274,14 @@ <h1>Settings</h1>
                 </div>
                 <div class="options">
                     <p id="offline-status">Offline Status: CHECKING</p>
-                    <div class="offline-cores">Offline Cores will only use the stable release.
-                        <br>Stable cores will auto cache on use. Select cores to cache:
-                        <form id="cores-form"></form>
+                    <div class="offline-cores">Offline Cores will only use the stable release. Latest stable release is: <span id="latest-stable"></span>
+                        <br>Select cores to cache:
+                        <form id="cores-form">
+                            <p>Loading...</p>
+                        </form>
                         <br />
-                        <button onclick="cacheListCores()">Cache Selected Cores</button>
-                        <button id="remove-version" onclick="removeallsaved()">Remove All</button>
+                        <button onclick="cacheCores()">Cache/Update Selected</button>
+                        <button onclick="removeAllsCores()">Remove All</button>
                     </div>
                     <div id="installbox">
                         <p id="installboxtext">Install PWA:</p>
@@ -301,15 +303,8 @@ <h1>Settings</h1>
                     .catch((error) => {
                         console.log("Service Worker registration failed:", error);
                     });
-                navigator.serviceWorker.addEventListener("message", (event) => {
-                    if (event.data.type === "CACHE_UPDATE") {
-                        savedCDNFiles(event.data.url);
-                        cacheCore();
-                    }
-                });
             }
 
-            const corePath = "https://cdn.emulatorjs.org/stable/data/cores/";
             loadJSON("/versions", (response) => {
                 if (!response) {
                     loadJSON("https://cdn.emulatorjs.org/versions.json", (resp) =>
@@ -322,74 +317,61 @@ <h1>Settings</h1>
                 }
             });
 
-            loadJSON(corePath + "cores.json", (response) => {
-                const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
-                const cores = JSON.parse(response);
-                for (const core of cores) {
-                    const label = document.createElement("label");
-                    const input = document.createElement("input");
-                    input.type = "checkbox";
-                    input.name = "core";
-                    input.value = core.name;
-                    if (cacheCores.includes(core.name)) {
-                        input.checked = true;
-                    }
-                    label.appendChild(input);
-                    label.appendChild(document.createTextNode(core.name));
-                    document.getElementById("cores-form").appendChild(label);
-                }
-            });
-
-            function savedCDNFiles(url) {
-                const cachedFiles =
-                    JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
-                cachedFiles.push(url);
-                localStorage.setItem("cachedCDNFiles", JSON.stringify(cachedFiles));
-            }
+            const corePath = "https://cdn.emulatorjs.org/stable/data/cores/";
 
-            function cacheCore() {
-                const files = JSON.parse(localStorage.getItem("cachedCDNFiles")) || [];
-                const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
-                const cores = files.filter((item) => item.endsWith(".json")).map((item) => item.split("/").pop().split(".")[0]);
-                const urlsToCache = [];
-                for (core of cores) {
-                    if (cacheCores.includes(core)) {
-                        continue;
+            function loadCoreList() {
+                loadJSON(corePath + "cores.json", (response) => {
+                    const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
+                    const cores = JSON.parse(response);
+                    document.getElementById("cores-form").innerHTML = "";
+                    for (const core of cores) {
+                        const label = document.createElement("label");
+                        const input = document.createElement("input");
+                        input.type = "checkbox";
+                        input.name = "core";
+                        input.value = core.name;
+                        if (cacheCores.some(arr => arr[0] === core.name)) {
+                            input.checked = true;
+                        }
+                        label.appendChild(input);
+                        const cachedCore = cacheCores.find(arr => arr[0] === core.name);
+                        const additionalText = cachedCore ? ` (${cachedCore[1]})` : "";
+                        label.appendChild(document.createTextNode(core.name + additionalText));
+                        document.getElementById("cores-form").appendChild(label);
                     }
-                    urlsToCache.push(corePath + "reports/" + core + ".json");
-                    urlsToCache.push(corePath + core + "-wasm.data");
-                    urlsToCache.push(corePath + core + "-thread-wasm.data");
-                    urlsToCache.push(corePath + core + "-legacy-wasm.data");
-                    urlsToCache.push(corePath + core + "-thread-legacy-wasm.data");
-                    cacheCores.push(core);
-                }
-                if (urlsToCache.length > 0) {
-                    cacheUrls(urlsToCache);
-                    localStorage.setItem("cachedCores", JSON.stringify(cacheCores));
-                }
+                });  
             }
 
-            function cacheListCores() {
+            function cacheCores() {
                 const cacheCores = JSON.parse(localStorage.getItem("cachedCores")) || [];
                 const cores = document.getElementsByName("core");
+                const stable = localStorage.getItem("latest-stable");
                 const urlsToCache = [];
                 const urlsToRemove = [];
                 for (const core of cores) {
-                    if (core.checked && !cacheCores.includes(core.value)) {
-                        urlsToCache.push(corePath + "reports/" + core + ".json");
+                    const cachedCore = cacheCores.find(arr => arr[0] === core.value);
+                    if (core.checked && (!cachedCore || cachedCore[1] !== stable)) {
+                        urlsToCache.push(corePath + "reports/" + core.value + ".json");
                         urlsToCache.push(corePath + core.value + "-wasm.data");
                         urlsToCache.push(corePath + core.value + "-thread-wasm.data");
                         urlsToCache.push(corePath + core.value + "-legacy-wasm.data");
                         urlsToCache.push(corePath + core.value + "-thread-legacy-wasm.data");
-                        cacheCores.push(core.value);
+                        if (cachedCore) {
+                            cachedCore[1] = stable;
+                        } else {
+                            cacheCores.push([core.value, stable]);
+                        }
                     }
-                    if (!core.checked && cacheCores.includes(core.value)) {
-                        urlsToRemove.push(corePath + "reports/" + core + ".json");
+                    if (!core.checked && cacheCores.some(arr => arr[0] === core.value)) {
+                        urlsToRemove.push(corePath + "reports/" + core.value + ".json");
                         urlsToRemove.push(corePath + core.value + "-wasm.data");
                         urlsToRemove.push(corePath + core.value + "-thread-wasm.data");
                         urlsToRemove.push(corePath + core.value + "-legacy-wasm.data");
                         urlsToRemove.push(corePath + core.value + "-thread-legacy-wasm.data");
-                        cacheCores.splice(cacheCores.indexOf(core.value), 1);
+                        const index = cacheCores.findIndex(arr => arr[0] === core.value);
+                        if (index !== -1) {
+                            cacheCores.splice(index, 1);
+                        }
                     }
                 }
                 if (urlsToCache.length > 0) {
@@ -402,12 +384,12 @@ <h1>Settings</h1>
                 closeSettings();
             }
 
-            function removeallsaved() {
+            function removeAllsCores() {
                 const cores = document.getElementsByName("core");
                 for (const core of cores) {
                     core.checked = false;
                 }
-                cacheListCores()
+                cacheCores()
             }
 
             function cacheUrls(urls) {
@@ -417,7 +399,6 @@ <h1>Settings</h1>
                         urls: urls,
                     });
                 }
-                urls.forEach(savedCDNFiles);
             }
 
             function removeUrls(urls) {
@@ -432,6 +413,8 @@ <h1>Settings</h1>
             function loadVersions(response) {
                 const version_select = document.getElementById("version-select");
                 var versions = JSON.parse(response);
+                document.getElementById("latest-stable").textContent = versions.github;
+                localStorage.setItem("latest-stable", versions.github);
                 version_select.innerHTML = "";
                 addOptions(version_select, versions.releases, versions.default, versions.github);
                 addOptions(version_select, versions.versions, versions.default);
@@ -474,6 +457,7 @@ <h1>Settings</h1>
                             "Sega Saturn": "segaSaturn",
                             "Atari 7800": "atari7800",
                             "Atari 2600": "atari2600",
+                            "Arcade": "arcade",
                             "NEC TurboGrafx-16/SuperGrafx/PC Engine": "pce",
                             "NEC PC-FX": "pcfx",
                             "SNK NeoGeo Pocket (Color)": "ngp",
@@ -526,7 +510,6 @@ <h1>Settings</h1>
                 window.EJS_pathtodata = cdn;
                 window.EJS_startOnLoaded = true;
                 window.EJS_AdUrl = "https://ads.emulatorjs.org/";
-                window.EJS_videoRotation = 0;
                 if (core === "psp") {
                     window.EJS_threads = true;
                 }
@@ -595,6 +578,7 @@ <h1>Settings</h1>
             }
 
             function openSettings() {
+                loadCoreList();
                 document.getElementById("popup-settings").classList.add("show");
                 if (localStorage.getItem("pwa") == "false") {
                     checkinstall();
diff --git a/sw.js b/sw.js
index 1c15112..8d534fe 100644
--- a/sw.js
+++ b/sw.js
@@ -11,7 +11,6 @@ const OFFLINE_FILES = [
     "img/mobile_screenshot.png",
     "https://cdn.emulatorjs.org/versions.json",
     "https://cdn.emulatorjs.org/stable/data/loader.js",
-    "https://cdn.emulatorjs.org/stable/data/version.json",
     "https://cdn.emulatorjs.org/stable/data/emulator.min.js",
     "https://cdn.emulatorjs.org/stable/data/emulator.min.css",
     "https://cdn.emulatorjs.org/stable/data/cores/cores.json",
@@ -64,17 +63,6 @@ self.addEventListener("message", async (event) => {
     }
 });
 
-function cacheUpdate(fileUrl) {
-    self.clients.matchAll().then((clients) => {
-        clients.forEach((client) => {
-            client.postMessage({
-                type: "CACHE_UPDATE",
-                url: fileUrl,
-            });
-        });
-    });
-}
-
 function getCacheUrl(url) {
     if (url === "/") {
         return "index.html";
@@ -90,34 +78,24 @@ self.addEventListener("fetch", (event) => {
     event.respondWith(
         (async () => {
             const requestURL = new URL(event.request.url);
-            let url = requestURL.hostname === "cdn.emulatorjs.org" ? event.request.url : requestURL.pathname;
+            let url = (requestURL.hostname === "cdn.emulatorjs.org") ? event.request.url : requestURL.pathname;
             const cache = await caches.open(CACHE_NAME);
-            if (event.request.url.startsWith("https://cdn.emulatorjs.org/stable/data/")) {
-                const cachedResponse = await cache.match(event.request);
+            if (requestURL.hostname === "cdn.emulatorjs.org" && !OFFLINE_FILES.includes(event.request.url)) {
+                const cachedResponse = await caches.match(event.request);
                 if (cachedResponse) {
                     return cachedResponse;
                 }
-                cacheStatus = true;
-                const networkResponse = await fetch(event.request);
-                if (networkResponse && networkResponse.status === 200) {
-                    cache.put(event.request, networkResponse.clone());
-                    cacheUpdate(event.request.url);
-                }
-                cacheStatus = false;
-                return networkResponse;
-            }
-            if (requestURL.hostname === "cdn.emulatorjs.org" && !OFFLINE_FILES.includes(event.request.url)) {
                 return await fetch(event.request);
             }
             try {
-                const req = url === "/versions" ? "https://cdn.emulatorjs.org/versions.json" : event.request;
+                const req = (url === "/versions") ? "https://cdn.emulatorjs.org/versions.json" : event.request;
                 const res = await fetch(req);
-                if (!res.status.toString().startsWith("2")) {
-                    throw new Error("status code not ok");
+                if (!res.status.toString().startsWith('2')) {
+                    throw new Error('status code not ok');
                 }
                 cache.put(getCacheUrl(url), res.clone());
                 return res;
-            } catch (e) {
+            } catch(e) {
                 url = getCacheUrl(url);
                 if (!OFFLINE_FILES.includes(url)) {
                     url = "404.html";
