diff --git a/src/GameManager.js b/src/GameManager.js
index 5ec2caf..35f1b48 100644
--- a/src/GameManager.js
+++ b/src/GameManager.js
@@ -9,7 +9,8 @@ class EJS_GameManager {
loadState: this.Module.cwrap('load_state', 'number', ['string', 'number']),
screenshot: this.Module.cwrap('cmd_take_screenshot', '', []),
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() {
@@ -79,6 +80,9 @@ class EJS_GameManager {
toggleMainLoop(playing) {
this.functions.toggleMainLoop(playing);
}
+ getCoreOptions() {
+ return this.functions.getCoreOptions();
+ }
}
diff --git a/src/css/main.css b/src/css/main.css
index 31efdaf..65d0e8d 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -468,3 +468,86 @@
.ejs_dpad_down_pressed .ejs_dpad_vertical:after {
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;
+}
diff --git a/src/emulator.js b/src/emulator.js
index 2ed98fc..76990bc 100644
--- a/src/emulator.js
+++ b/src/emulator.js
@@ -453,6 +453,7 @@ class EmulatorJS {
this.virtualGamepad.style.display = "";
}
+ this.setupSettingsMenu();
this.handleResize();
}
bindListeners() {
@@ -622,7 +623,7 @@ class EmulatorJS {
this.elements.parent.appendChild(this.elements.menu);
//Now add buttons
- const addButton = (title, image, callback) => {
+ const addButton = (title, image, callback, element) => {
const button = this.createElement("button");
button.type = "button";
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -636,7 +637,11 @@ class EmulatorJS {
button.classList.add("ejs_menu_button");
button.appendChild(svg);
button.appendChild(text);
- this.elements.menu.appendChild(button);
+ if (element) {
+ element.appendChild(button);
+ } else {
+ this.elements.menu.appendChild(button);
+ }
if (callback instanceof Function) {
this.addEventListener(button, 'click', callback);
}
@@ -692,6 +697,14 @@ class EmulatorJS {
spacer.style = "flex:1;";
this.elements.menu.appendChild(spacer);
+ this.settingParent = this.createElement("div");
+ addButton("Settings", '', () => {
+ console.log("settings");
+ }, this.settingParent);
+ this.elements.menu.appendChild(this.settingParent);
+
+
+
const enter = addButton("Enter Fullscreen", '', () => {
if (this.elements.parent.requestFullscreen) {
@@ -1410,10 +1423,43 @@ class EmulatorJS {
}
handleResize() {
+ if (!this.Module) return;
const dpr = window.devicePixelRatio || 1;
const positionInfo = this.game.getBoundingClientRect();
const width = positionInfo.width * 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";
}
}