EmulatorJS/index.html

215 lines
7.9 KiB
HTML
Raw Normal View History

2022-04-30 08:49:23 +00:00
<!DOCTYPE html>
2022-02-18 18:43:44 +00:00
<html>
2022-04-30 00:01:21 +00:00
<head>
2022-04-30 08:49:23 +00:00
<title>EmulatorJS</title>
2022-05-19 08:29:22 +00:00
<link rel = icon href = docs/favicon.ico sizes = "16x16 32x32 48x48 64x64" type = image/vnd.microsoft.icon>
2022-04-30 08:49:23 +00:00
<meta name = viewport content = "width = device-width, initial-scale = 1">
2022-04-30 00:01:21 +00:00
<style>
2022-04-30 08:49:23 +00:00
body, html {
height: 100%;
}
body {
font-family: monospace;
font-weight: bold;
font-size: 20px;
2022-04-30 00:01:21 +00:00
margin: 0;
2022-04-30 08:49:23 +00:00
overflow: hidden;
background-color: #222
2022-04-30 00:01:21 +00:00
}
2022-04-30 08:49:23 +00:00
body, #box {
display: flex;
align-items: center;
justify-content: center;
2022-04-30 00:01:21 +00:00
}
2022-04-30 08:49:23 +00:00
#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
2022-04-30 00:01:21 +00:00
}
2022-04-30 08:49:23 +00:00
#input {
cursor: pointer;
2022-04-30 00:01:21 +00:00
position: absolute;
2022-04-30 08:49:23 +00:00
left: 0;
top: 0;
2022-04-30 00:01:21 +00:00
width: 100%;
height: 100%;
2022-04-30 08:49:23 +00:00
opacity: 0
}
#display {
width: 100%;
height: 100%
2022-04-30 00:01:21 +00:00
}
2022-04-30 08:49:23 +00:00
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
2022-04-30 00:01:21 +00:00
}
2022-04-30 08:49:23 +00:00
select:hover, button:hover {
background-color: #666;
color: #ddd
2022-04-30 00:01:21 +00:00
}
</style>
2022-04-30 08:49:23 +00:00
</head>
<body>
<div id = box>
<input type = file id = input>
Drag ROM file or click here
</div>
2022-02-20 21:51:44 +00:00
<script>
2022-04-30 08:49:23 +00:00
input.onchange = async () => {
2023-07-28 13:49:10 +00:00
const url = new Blob([input.files[0]])
2022-04-30 08:49:23 +00:00
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"
2022-05-05 19:45:43 +00:00
if (["z64", "n64"].includes(ext))
return "n64"
if (["pce"].includes(ext))
return "pce"
2023-08-30 20:16:17 +00:00
if (["ngp", "ngc"].includes(ext))
return "ngp"
2023-08-31 14:30:20 +00:00
if (["ws", "wsc"].includes(ext))
return "ws"
if (["col", "cv"].includes(ext))
return "coleco"
2022-04-30 08:49:23 +00:00
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",
2023-08-30 20:16:17 +00:00
"NEC TurboGrafx-16/SuperGrafx/PC Engine": "pce",
2023-08-31 15:51:41 +00:00
"NEC PC-FX": "pcfx",
2023-08-31 14:30:20 +00:00
"SNK NeoGeo Pocket (Color)": "ngp",
"Bandai WonderSwan (Color)": "ws",
"ColecoVision": "coleco"
2022-04-30 08:49:23 +00:00
}
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/";
2022-08-10 17:12:47 +00:00
window.EJS_startOnLoaded = true;
if (window.location.hostname === "demo.emulatorjs.org") {
window.EJS_AdUrl = "https://ads.emulatorjs.org/";
window.EJS_ready = function() {
2023-09-28 23:31:27 +00:00
detectAdBlock("data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9PC9zdHlsZT48Ym9keSBzdHlsZT0ibWFyZ2luOjAiPjxkaXYgaWQ9ImFkYmxvY2siPjxoMT5IaSBBZGJsb2NrIFVzZXIhPC9oMT48cD5BZHMgb24gdGhpcyBwYWdlIG1heSBjb21lIGFuZCBnbyBkZXBlbmRpbmcgb24gaG93IG1hbnkgcGVvcGxlIGFyZSBmdW5kaW5nIHRoaXMgcHJvamVjdC48YnI+WW91IGNhbiBoZWxwIGZ1bmQgdGhpcyBwcm9qZWN0IG9uPGEgaHJlZj0iaHR0cHM6Ly9wYXRyZW9uLmNvbS9FbXVsYXRvckpTIj5wYXRyZW9uPC9hPjwvcD48L2Rpdj48L2JvZHk+PC9odG1sPg==");
}
}
2022-08-10 20:18:48 +00:00
script.src = "data/loader.js";
document.body.appendChild(script);
2022-04-30 08:49:23 +00:00
}
2023-09-28 23:31:27 +00:00
function detectAdBlock(url) {
let adBlockEnabled = false;
try {
2023-09-28 23:31:27 +00:00
window.EJS_AdUrl = document.querySelector('iframe[src="'+window.EJS_AdUrl+'"]').src;
} catch (e) {
2023-09-28 23:31:27 +00:00
adBlockEnabled = true;
}
if (adBlockEnabled) {
window.EJS_adBlocked(url);
}
}
box.ondragover = () => box.setAttribute("drag", true);
box.ondragleave = () => box.removeAttribute("drag");
2022-02-20 21:51:44 +00:00
</script>
</body>
2022-11-20 23:39:48 +00:00
</html>