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

base menu bar

Browse source
This commit is contained in:
Ethan O'Brien 2023-06-27 11:54:35 -05:00
parent 92b2bf696c
commit 5b2bd40087
3 changed files with 137 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/GameManager.js
View file

@ -9,7 +9,8 @@ class EJS_GameManager {
loadState: this.Module.cwrap('load_state', 'number', ['string', 'number']), loadState: this.Module.cwrap('load_state', 'number', ['string', 'number']),
screenshot: this.Module.cwrap('cmd_take_screenshot', '', []), screenshot: this.Module.cwrap('cmd_take_screenshot', '', []),
simulateInput: this.Module.cwrap('simulate_input', 'null', ['number', 'number', 'number']), simulateInput: this.Module.cwrap('simulate_input', 'null', ['number', 'number', 'number']),
toggleMainLoop: this.Module.cwrap('toggleMainLoop', 'null', ['number']) toggleMainLoop: this.Module.cwrap('toggleMainLoop', 'null', ['number']),
getCoreOptions: this.Module.cwrap('get_core_options', 'string', [])
} }
} }
restart() { restart() {
@ -79,6 +80,9 @@ class EJS_GameManager {
toggleMainLoop(playing) { toggleMainLoop(playing) {
this.functions.toggleMainLoop(playing); this.functions.toggleMainLoop(playing);
} }
getCoreOptions() {
return this.functions.getCoreOptions();
}
} }

83
src/css/main.css
View file

@ -468,3 +468,86 @@
.ejs_dpad_down_pressed .ejs_dpad_vertical:after { .ejs_dpad_down_pressed .ejs_dpad_vertical:after {
border-top-color:#fff border-top-color:#fff
} }
.ejs_settings_parent {
background: rgba(16,16,16,0.9);
border-radius: 4px;
bottom: 100%;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
color: #4f5b5f;
font-size: 16px;
margin-bottom: 10px;
position: absolute;
right: -3px;
text-align: left;
white-space: nowrap;
z-index: 3;
}
.ejs_settings_parent::after {
border: 4px solid transparent;
border-top-color: rgba(16,16,16,0.9);
content: '';
height: 0;
position: absolute;
right: 15px;
top: 100%;
width: 0;
}
.ejs_settings_parent>div {
overflow: hidden;
transition: height .35s cubic-bezier(0.4,0,0.2,1),width .35s cubic-bezier(0.4,0,0.2,1);
}
.ejs_setting_home {
max-height: 385px;
overflow: auto;
padding: 7px;
}
.ejs_settings_main_bar {
align-items: center;
color: #999;
display: flex;
font-size: 13px;
padding: 4px 11px;
user-select: none;
width: 100%;
padding-right: 28px;
background: transparent;
border: 0;
border-radius: 3px;
flex-shrink: 0;
overflow: visible;
position: relative;
transition: all .3s ease;
box-sizing: border-box;
}
.ejs_settings_main_bar::after {
border: 4px solid transparent;
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
border-left-color: rgba(79,91,95,0.8);
right: 5px;
}
.ejs_settings_main_bar>span {
align-items: inherit;
display: flex;
width: 100%;
}
.ejs_settings_main_bar:hover {
background: rgba(var(--ejs-primary-color),1);
color: #fff;
cursor: pointer;
}
.ejs_settings_main_bar:hover::after {
border-left-color: currentColor;
}
.ejs_settings_main_bar_selected {
align-items: center;
display: flex;
margin-left: auto;
margin-right: -5px;
overflow: hidden;
padding-left: 25px;
pointer-events: none;
}

52
src/emulator.js
View file

@ -453,6 +453,7 @@ class EmulatorJS {
this.virtualGamepad.style.display = ""; this.virtualGamepad.style.display = "";
} }
this.setupSettingsMenu();
this.handleResize(); this.handleResize();
} }
bindListeners() { bindListeners() {
@ -622,7 +623,7 @@ class EmulatorJS {
this.elements.parent.appendChild(this.elements.menu); this.elements.parent.appendChild(this.elements.menu);
//Now add buttons //Now add buttons
const addButton = (title, image, callback) => { const addButton = (title, image, callback, element) => {
const button = this.createElement("button"); const button = this.createElement("button");
button.type = "button"; button.type = "button";
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@ -636,7 +637,11 @@ class EmulatorJS {
button.classList.add("ejs_menu_button"); button.classList.add("ejs_menu_button");
button.appendChild(svg); button.appendChild(svg);
button.appendChild(text); button.appendChild(text);
this.elements.menu.appendChild(button); if (element) {
element.appendChild(button);
} else {
this.elements.menu.appendChild(button);
}
if (callback instanceof Function) { if (callback instanceof Function) {
this.addEventListener(button, 'click', callback); this.addEventListener(button, 'click', callback);
} }
@ -692,6 +697,14 @@ class EmulatorJS {
spacer.style = "flex:1;"; spacer.style = "flex:1;";
this.elements.menu.appendChild(spacer); this.elements.menu.appendChild(spacer);
this.settingParent = this.createElement("div");
addButton("Settings", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"/></svg>', () => {
console.log("settings");
}, this.settingParent);
this.elements.menu.appendChild(this.settingParent);
const enter = addButton("Enter Fullscreen", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M208 281.4c-12.5-12.5-32.76-12.5-45.26-.002l-78.06 78.07l-30.06-30.06c-6.125-6.125-14.31-9.367-22.63-9.367c-4.125 0-8.279 .7891-12.25 2.43c-11.97 4.953-19.75 16.62-19.75 29.56v135.1C.0013 501.3 10.75 512 24 512h136c12.94 0 24.63-7.797 29.56-19.75c4.969-11.97 2.219-25.72-6.938-34.87l-30.06-30.06l78.06-78.07c12.5-12.49 12.5-32.75 .002-45.25L208 281.4zM487.1 0h-136c-12.94 0-24.63 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.87l30.06 30.06l-78.06 78.07c-12.5 12.5-12.5 32.76 0 45.26l22.62 22.62c12.5 12.5 32.76 12.5 45.26 0l78.06-78.07l30.06 30.06c9.156 9.141 22.87 11.84 34.87 6.937C504.2 184.6 512 172.9 512 159.1V23.1C512 10.74 501.3 0 487.1 0z"/></svg>', () => { const enter = addButton("Enter Fullscreen", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M208 281.4c-12.5-12.5-32.76-12.5-45.26-.002l-78.06 78.07l-30.06-30.06c-6.125-6.125-14.31-9.367-22.63-9.367c-4.125 0-8.279 .7891-12.25 2.43c-11.97 4.953-19.75 16.62-19.75 29.56v135.1C.0013 501.3 10.75 512 24 512h136c12.94 0 24.63-7.797 29.56-19.75c4.969-11.97 2.219-25.72-6.938-34.87l-30.06-30.06l78.06-78.07c12.5-12.49 12.5-32.75 .002-45.25L208 281.4zM487.1 0h-136c-12.94 0-24.63 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.87l30.06 30.06l-78.06 78.07c-12.5 12.5-12.5 32.76 0 45.26l22.62 22.62c12.5 12.5 32.76 12.5 45.26 0l78.06-78.07l30.06 30.06c9.156 9.141 22.87 11.84 34.87 6.937C504.2 184.6 512 172.9 512 159.1V23.1C512 10.74 501.3 0 487.1 0z"/></svg>', () => {
if (this.elements.parent.requestFullscreen) { if (this.elements.parent.requestFullscreen) {
@ -1410,10 +1423,43 @@ class EmulatorJS {
} }
handleResize() { handleResize() {
if (!this.Module) return;
const dpr = window.devicePixelRatio || 1; const dpr = window.devicePixelRatio || 1;
const positionInfo = this.game.getBoundingClientRect(); const positionInfo = this.game.getBoundingClientRect();
const width = positionInfo.width * dpr; const width = positionInfo.width * dpr;
const height = (positionInfo.height * dpr); const height = (positionInfo.height * dpr);
Module.setCanvasSize(width, height); this.Module.setCanvasSize(width, height);
}
setupSettingsMenu() {
const main = this.createElement("div");
main.classList.add("ejs_settings_parent");
const home = this.createElement("div");
home.classList.add("ejs_setting_home");
const addToMenu = (title, options) => {
const menuOption = this.createElement("div");
menuOption.classList.add("ejs_settings_main_bar");
const span = this.createElement("span");
span.innerText = title;
const current = this.createElement("div");
current.innerText = "boogers";
current.classList.add("ejs_settings_main_bar_selected");
span.appendChild(current);
menuOption.appendChild(span);
home.appendChild(menuOption);
}
addToMenu("Test", [1, 2, 3]);
addToMenu("Test2");
addToMenu("Testertthgfd");
main.appendChild(home);
this.settingParent.appendChild(main);
this.settingParent.style.position = "relative";
} }
} }