ethanaobrien/EmulatorJS
1
0
Fork 0
mirror of https://github.com/EmulatorJS/EmulatorJS.git synced 2024-09-20 02:46:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add button toggle

Browse source
This commit is contained in:
Ethan O'Brien 2023-07-01 14:15:00 -05:00
parent b7d92d285d
commit c7d62abf3b
3 changed files with 37 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -8,12 +8,13 @@
EJS_gameUrl = 'mega_mountain.nes'; EJS_gameUrl = 'mega_mountain.nes';
EJS_DEBUG_XX = true; EJS_DEBUG_XX = true;
EJS_AdUrl = "https://www.google.com/search?igu=1"; EJS_AdUrl = "https://www.google.com/search?igu=1";
/*
EJS_Buttons = { EJS_Buttons = {
playPause: false, playPause: false,
restart: false, restart: false,
mute: false, mute: false,
settings: false, settings: true,
fullscreen: true, fullscreen: false,
saveState: false, saveState: false,
loadState: false, loadState: false,
screenRecord: false, screenRecord: false,
@ -24,6 +25,6 @@
quickLoad: false, quickLoad: false,
screenshot: false, screenshot: false,
cacheManager: false cacheManager: false
} }*/
</script> </script>
<script src='src/loader.js'></script> <script src='src/loader.js'></script>

41
src/emulator.js
View file

@ -706,9 +706,10 @@ class EmulatorJS {
li.appendChild(a); li.appendChild(a);
parent.appendChild(li); parent.appendChild(li);
hideMenu(); hideMenu();
return li;
} }
let screenshotUrl; let screenshotUrl;
addButton("Take Screenshot", false, () => { const screenshot = addButton("Take Screenshot", false, () => {
if (screenshotUrl) URL.revokeObjectURL(screenshotUrl); if (screenshotUrl) URL.revokeObjectURL(screenshotUrl);
const screenshot = this.gameManager.screenshot(); const screenshot = this.gameManager.screenshot();
const blob = new Blob([screenshot]); const blob = new Blob([screenshot]);
@ -720,11 +721,11 @@ class EmulatorJS {
a.click(); a.click();
hideMenu(); hideMenu();
}); });
addButton("Quick Save", false, () => { const qSave = addButton("Quick Save", false, () => {
this.gameManager.quickSave(); this.gameManager.quickSave();
hideMenu(); hideMenu();
}); });
addButton("Quick Load", false, () => { const qLoad = addButton("Quick Load", false, () => {
this.gameManager.quickLoad(); this.gameManager.quickLoad();
hideMenu(); hideMenu();
}); });
@ -736,9 +737,14 @@ class EmulatorJS {
} }
}); });
body.innerText = "Todo. Write about, include tabs on side with licenses, links to docs/repo/discord?"; body.innerText = "Todo. Write about, include tabs on side with licenses, links to docs/repo/discord?";
}); });
if (this.config.buttonOpts) {
if (!this.config.buttonOpts.screenshot) screenshot.setAttribute("hidden", "");
if (!this.config.buttonOpts.quickSave) qSave.setAttribute("hidden", "");
if (!this.config.buttonOpts.quickLoad) qLoad.setAttribute("hidden", "");
}
this.elements.contextmenu.appendChild(parent); this.elements.contextmenu.appendChild(parent);
this.elements.parent.appendChild(this.elements.contextmenu); this.elements.parent.appendChild(this.elements.contextmenu);
@ -859,7 +865,7 @@ class EmulatorJS {
//todo. Center text on not restart button //todo. Center text on not restart button
addButton("Restart", '<svg viewBox="0 0 512 512"><path d="M496 48V192c0 17.69-14.31 32-32 32H320c-17.69 0-32-14.31-32-32s14.31-32 32-32h63.39c-29.97-39.7-77.25-63.78-127.6-63.78C167.7 96.22 96 167.9 96 256s71.69 159.8 159.8 159.8c34.88 0 68.03-11.03 95.88-31.94c14.22-10.53 34.22-7.75 44.81 6.375c10.59 14.16 7.75 34.22-6.375 44.81c-39.03 29.28-85.36 44.86-134.2 44.86C132.5 479.9 32 379.4 32 256s100.5-223.9 223.9-223.9c69.15 0 134 32.47 176.1 86.12V48c0-17.69 14.31-32 32-32S496 30.31 496 48z"/></svg>', () => { const restartButton = addButton("Restart", '<svg viewBox="0 0 512 512"><path d="M496 48V192c0 17.69-14.31 32-32 32H320c-17.69 0-32-14.31-32-32s14.31-32 32-32h63.39c-29.97-39.7-77.25-63.78-127.6-63.78C167.7 96.22 96 167.9 96 256s71.69 159.8 159.8 159.8c34.88 0 68.03-11.03 95.88-31.94c14.22-10.53 34.22-7.75 44.81 6.375c10.59 14.16 7.75 34.22-6.375 44.81c-39.03 29.28-85.36 44.86-134.2 44.86C132.5 479.9 32 379.4 32 256s100.5-223.9 223.9-223.9c69.15 0 134 32.47 176.1 86.12V48c0-17.69 14.31-32 32-32S496 30.31 496 48z"/></svg>', () => {
this.gameManager.restart(); this.gameManager.restart();
}); });
const pauseButton = addButton("Pause", '<svg viewBox="0 0 320 512"><path d="M272 63.1l-32 0c-26.51 0-48 21.49-48 47.1v288c0 26.51 21.49 48 48 48L272 448c26.51 0 48-21.49 48-48v-288C320 85.49 298.5 63.1 272 63.1zM80 63.1l-32 0c-26.51 0-48 21.49-48 48v288C0 426.5 21.49 448 48 448l32 0c26.51 0 48-21.49 48-48v-288C128 85.49 106.5 63.1 80 63.1z"/></svg>', () => { const pauseButton = addButton("Pause", '<svg viewBox="0 0 320 512"><path d="M272 63.1l-32 0c-26.51 0-48 21.49-48 47.1v288c0 26.51 21.49 48 48 48L272 448c26.51 0 48-21.49 48-48v-288C320 85.49 298.5 63.1 272 63.1zM80 63.1l-32 0c-26.51 0-48 21.49-48 48v288C0 426.5 21.49 448 48 448l32 0c26.51 0 48-21.49 48-48v-288C128 85.49 106.5 63.1 80 63.1z"/></svg>', () => {
@ -883,7 +889,7 @@ class EmulatorJS {
let stateUrl; let stateUrl;
addButton("Save State", '<svg viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"/></svg>', async () => { const saveState = addButton("Save State", '<svg viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"/></svg>', async () => {
const state = await this.gameManager.getState(); const state = await this.gameManager.getState();
const called = this.callEvent("save", { const called = this.callEvent("save", {
screenshot: this.gameManager.screenshot(), screenshot: this.gameManager.screenshot(),
@ -898,15 +904,15 @@ class EmulatorJS {
a.download = this.getBaseFileName()+".state"; a.download = this.getBaseFileName()+".state";
a.click(); a.click();
}); });
addButton("Load State", '<svg viewBox="0 0 576 512"><path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"/></svg>', async () => { const loadState = addButton("Load State", '<svg viewBox="0 0 576 512"><path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"/></svg>', async () => {
const file = await this.selectFile(); const file = await this.selectFile();
const state = new Uint8Array(await file.arrayBuffer()); const state = new Uint8Array(await file.arrayBuffer());
this.gameManager.loadState(state); this.gameManager.loadState(state);
}); });
addButton("Control Settings", '<svg viewBox="0 0 640 512"><path fill="currentColor" d="M480 96H160C71.6 96 0 167.6 0 256s71.6 160 160 160c44.8 0 85.2-18.4 114.2-48h91.5c29 29.6 69.5 48 114.2 48 88.4 0 160-71.6 160-160S568.4 96 480 96zM256 276c0 6.6-5.4 12-12 12h-52v52c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-52H76c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h52v-52c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h52c6.6 0 12 5.4 12 12v40zm184 68c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-80c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"/></svg>', () => { const controlMenu = addButton("Control Settings", '<svg viewBox="0 0 640 512"><path fill="currentColor" d="M480 96H160C71.6 96 0 167.6 0 256s71.6 160 160 160c44.8 0 85.2-18.4 114.2-48h91.5c29 29.6 69.5 48 114.2 48 88.4 0 160-71.6 160-160S568.4 96 480 96zM256 276c0 6.6-5.4 12-12 12h-52v52c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-52H76c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h52v-52c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h52c6.6 0 12 5.4 12 12v40zm184 68c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-80c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"/></svg>', () => {
this.controlMenu.style.display = ""; this.controlMenu.style.display = "";
}); });
addButton("Cheats", '<svg viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z" class=""></path></svg>', () => { const cheatMenu = addButton("Cheats", '<svg viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z" class=""></path></svg>', () => {
this.cheatMenu.style.display = ""; this.cheatMenu.style.display = "";
}); });
@ -982,6 +988,23 @@ class EmulatorJS {
} }
}) })
if (this.config.buttonOpts) {
if (!this.config.buttonOpts.playPause) {
pauseButton.style.display = "none";
playButton.style.display = "none";
}
if (!this.config.buttonOpts.restart) restartButton.setAttribute("hidden", "");
if (!this.config.buttonOpts.settings) settingButton[0].setAttribute("hidden", "");
if (!this.config.buttonOpts.fullscreen) {
enter.style.display = "none";
exit.style.display = "none";
}
if (!this.config.buttonOpts.saveState) saveState.setAttribute("hidden", "");
if (!this.config.buttonOpts.loadState) loadState.setAttribute("hidden", "");
if (!this.config.buttonOpts.gamepad) controlMenu.setAttribute("hidden", "");
if (!this.config.buttonOpts.cheat) cheatMenu.setAttribute("hidden", "");
}
} }
createControlSettingMenu() { createControlSettingMenu() {
let buttonListeners = []; let buttonListeners = [];

1
src/loader.js
View file

@ -52,6 +52,7 @@
config.adUrl = window.EJS_AdUrl; config.adUrl = window.EJS_AdUrl;
config.adTimer = window.EJS_AdTimer config.adTimer = window.EJS_AdTimer
config.VirtualGamepadSettings = window.EJS_VirtualGamepadSettings; config.VirtualGamepadSettings = window.EJS_VirtualGamepadSettings;
config.buttonOpts = window.EJS_Buttons;
new EmulatorJS(EJS_player, config); new EmulatorJS(EJS_player, config);