From 208d19a5d8e576d9737803a5160347a952a5041c Mon Sep 17 00:00:00 2001
From: Ethan O'Brien <77750390+ethanaobrien@users.noreply.github.com>
Date: Mon, 3 Jul 2023 22:56:43 -0500
Subject: [PATCH] Add demo index.html

---
 a.html     |  20 ++++++
 index.html | 204 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 205 insertions(+), 19 deletions(-)
 create mode 100644 a.html
diff --git a/a.html b/a.html
new file mode 100644
index 0000000..34bc038
--- /dev/null
+++ b/a.html
@@ -0,0 +1,20 @@
+<div style='width:640px;height:480px;max-width:100%'>
+    <div id='game'></div>
+</div>
+
+<script type='text/javascript'>
+    EJS_player = '#game';
+    EJS_core = 'nes';
+    EJS_gameUrl = 'roms/mega_mountain.nes';
+    EJS_DEBUG_XX = true;
+    //EJS_AdUrl = "https://www.google.com/search?igu=1";
+    /*
+    EJS_Buttons = {
+        mute: false,
+        volume: true,
+    }*/
+    EJS_volume = 1;
+    //EJS_startOnLoaded = true;
+    //EJS_loadStateURL = "mega_mountain.state";
+</script>
+<script src='data/loader.js'></script>
diff --git a/index.html b/index.html
index 34bc038..e1807c5 100644
--- a/index.html
+++ b/index.html
@@ -1,20 +1,186 @@
-<div style='width:640px;height:480px;max-width:100%'>
-    <div id='game'></div>
-</div>
+<!DOCTYPE html>
+<html>
+    <head>
+        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8832864985153925" crossorigin="anonymous"></script>
+        <title>EmulatorJS</title>
 
-<script type='text/javascript'>
-    EJS_player = '#game';
-    EJS_core = 'nes';
-    EJS_gameUrl = 'roms/mega_mountain.nes';
-    EJS_DEBUG_XX = true;
-    //EJS_AdUrl = "https://www.google.com/search?igu=1";
-    /*
-    EJS_Buttons = {
-        mute: false,
-        volume: true,
-    }*/
-    EJS_volume = 1;
-    //EJS_startOnLoaded = true;
-    //EJS_loadStateURL = "mega_mountain.state";
-</script>
-<script src='data/loader.js'></script>
+        <link rel = icon href = docs/favicon.ico sizes = "16x16 32x32 48x48 64x64" type = image/vnd.microsoft.icon>
+        <meta name = viewport content = "width = device-width, initial-scale = 1">
+
+        <style>
+            body, html {
+                height: 100%;
+            }
+
+            body {
+                font-family: monospace;
+                font-weight: bold;
+                font-size: 20px;
+                margin: 0;
+                overflow: hidden;
+                background-color: #222
+            }
+
+            body, #box {
+                display: flex;
+                align-items: center;
+                justify-content: 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
+            }
+
+            #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.6em 0.4em;
+                margin: 0.5em;
+                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
+            }
+
+            select:hover, button:hover {
+                background-color: #666;
+                color: #ddd
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id = box>
+            <input type = file id = input>
+            Drag ROM file or click here
+        </div>
+
+        <script>
+            input.onchange = 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 (["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"
+                        }
+
+                        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"
+
+                box.remove()
+                div.appendChild(sub)
+                document.body.appendChild(div)
+
+                window.EJS_player = "#game"
+                window.EJS_gameName = parts.shift()
+                window.EJS_biosUrl = ""
+                window.EJS_gameUrl = url
+                window.EJS_core = core
+                window.EJS_pathtodata = "data/"
+                window.EJS_startOnLoaded = true;
+
+                if (window.location.hostname === "demo.emulatorjs.org") {
+                    window.EJS_AdUrl = "https://ads.emulatorjs.org/";
+                }
+                
+
+                script.src = "data/loader.js"
+                document.body.appendChild(script)
+            }
+
+            box.ondragover = () => box.setAttribute("drag", true)
+            box.ondragleave = () => box.removeAttribute("drag")
+        </script>
+    </body>
+</html>
