From 8fbba189cbbe80d98b5ea54e80e67d788ffc7b87 Mon Sep 17 00:00:00 2001
From: Michael Green <84688932+michael-j-green@users.noreply.github.com>
Date: Mon, 4 Mar 2024 12:56:10 +1100
Subject: [PATCH] [Request] Display the file name of the ROM/disk when using
M3U lists (#787)
---
data/emulator.css | 44 +++++++--
data/emulator.js | 232 +++++++++++++++++++++++++++++++++++++++++++---
2 files changed, 254 insertions(+), 22 deletions(-)
diff --git a/data/emulator.css b/data/emulator.css
index 18a6043..68e362a 100644
--- a/data/emulator.css
+++ b/data/emulator.css
@@ -287,8 +287,11 @@
.ejs_svg_rotate {
transform: rotate(90deg);
}
+.ejs_small_screen .ejs_settings_parent::before {
+ border: none;
+}
.ejs_small_screen .ejs_settings_parent::after {
- right: 15px;
+ border: none;
}
.ejs_small_screen .ejs_settings_center_right {
right: -35%
@@ -374,12 +377,15 @@
.ejs_big_screen .ejs_settings_parent {
right: -3px;
}
-.ejs_big_screen .ejs_settings_parent::after {
+/* .ejs_big_screen .ejs_settings_parent::after {
right: 15px;
-}
+} */
.ejs_big_screen .ejs_settings_text {
display: none;
}
+.ejs_big_screen .ejs_disks_text {
+ display: none;
+}
.ejs_big_screen .ejs_menu_bar_spacer {
flex:1;
}
@@ -764,8 +770,11 @@
.ejs_settings_parent {
animation: ejs_settings_parent_animation .2s ease;
- background: rgba(16,16,16,0.9);
+ background: rgba(29, 29, 29, 0.9);
border-radius: 4px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: rgba(49, 49, 49, 0.9);
bottom: 100%;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
color: #4f5b5f;
@@ -775,15 +784,36 @@
text-align: left;
white-space: nowrap;
z-index: 9999;
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
}
-.ejs_settings_parent::after {
- border: 4px solid transparent;
- border-top-color: rgba(16,16,16,0.9);
+/* .ejs_settings_parent::after {
+ border: 5px solid transparent;
+ border-top-color: rgba(119, 119, 119, 0.9);
content: '';
height: 0;
position: absolute;
top: 100%;
width: 0;
+} */
+.ejs_settings_parent::before, .ejs_settings_parent::after {
+ position: absolute;
+ right: 15px;
+ width: 0;
+ height: 0;
+ content: '';
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-top-width: 5px;
+ border-top-style: solid;
+}
+.ejs_settings_parent::before {
+ top: calc(100% + 1px);
+ border-top-color: rgba(49, 49, 49, 0.9);
+}
+.ejs_settings_parent::after {
+ top: 100%;
+ border-top-color: rgba(29, 29, 29, 0.9);
}
.ejs_settings_transition {
overflow: hidden;
diff --git a/data/emulator.js b/data/emulator.js
index f420fd1..ff97cdb 100644
--- a/data/emulator.js
+++ b/data/emulator.js
@@ -1124,6 +1124,11 @@ class EmulatorJS {
}
this.Module.resumeMainLoop();
this.checkSupportedOpts();
+ this.setupDisksMenu();
+ // hide the disks menu if the disk count is not greater than 1
+ if (!(this.gameManager.getDiskCount() > 1)) {
+ this.diskParent.style.display = 'none';
+ }
this.setupSettingsMenu();
this.loadSettings();
this.updateCheatUI();
@@ -1575,7 +1580,7 @@ class EmulatorJS {
let timeout = null;
let ignoreEvents = false;
const hide = () => {
- if (this.paused || this.settingsMenuOpen) return;
+ if (this.paused || this.settingsMenuOpen || this.disksMenuOpen) return;
this.elements.menu.classList.add("ejs_menu_bar_hidden");
}
@@ -1880,6 +1885,30 @@ class EmulatorJS {
}
});
+ this.diskParent = this.createElement("div");
+ this.diskParent.id = "ejs_disksMenu";
+ this.disksMenuOpen = false;
+ const diskButton = addButton("Disks", '', () => {
+ this.disksMenuOpen = !this.disksMenuOpen;
+ diskButton[1].classList.toggle("ejs_svg_rotate", this.disksMenuOpen);
+ this.disksMenu.style.display = this.disksMenuOpen ? "" : "none";
+ diskButton[2].classList.toggle("ejs_disks_text", this.disksMenuOpen);
+ }, this.diskParent, true);
+ this.elements.menu.appendChild(this.diskParent);
+ this.closeDisksMenu = () => {
+ if (!this.disksMenu) return;
+ this.disksMenuOpen = false;
+ diskButton[1].classList.toggle("ejs_svg_rotate", this.disksMenuOpen);
+ diskButton[2].classList.toggle("ejs_disks_text", this.disksMenuOpen);
+ this.disksMenu.style.display = "none";
+ }
+ this.addEventListener(this.elements.parent, "mousedown touchstart", (e) => {
+ if (this.isChild(this.disksMenu, e.target)) return;
+ if (e.pointerType === "touch") return;
+ if (e.target === diskButton[0] || e.target === diskButton[2]) return;
+ this.closeDisksMenu();
+ })
+
this.settingParent = this.createElement("div");
this.settingsMenuOpen = false;
const settingButton = addButton("Settings", '', () => {
@@ -1902,6 +1931,7 @@ class EmulatorJS {
if (e.target === settingButton[0] || e.target === settingButton[2]) return;
this.closeSettingsMenu();
})
+
this.addEventListener(this.canvas, "click", (e) => {
if (e.pointerType === "touch") return;
if (this.getCore(true) === "nds" && !this.paused) {
@@ -3906,6 +3936,191 @@ class EmulatorJS {
this.gameManager.setVariable(option, value);
this.saveSettings();
}
+ setupDisksMenu() {
+ this.disksMenu = this.createElement("div");
+ this.disksMenu.classList.add("ejs_settings_parent");
+ const nested = this.createElement("div");
+ nested.classList.add("ejs_settings_transition");
+ this.disks = {};
+
+ const home = this.createElement("div");
+ home.style.overflow = "auto";
+ const menus = [];
+ this.handleDisksResize = () => {
+ let needChange = false;
+ if (this.disksMenu.style.display !== "") {
+ this.disksMenu.style.opacity = "0";
+ this.disksMenu.style.display = "";
+ needChange = true;
+ }
+ let height = this.elements.parent.getBoundingClientRect().height;
+ let w2 = this.diskParent.parentElement.getBoundingClientRect().width;
+ let disksX = this.diskParent.getBoundingClientRect().x;
+ if (w2 > window.innerWidth) disksX += (w2 - window.innerWidth);
+ const onTheRight = disksX > (w2-15)/2;
+ if (height > 375) height = 375;
+ home.style['max-height'] = (height - 95) + "px";
+ nested.style['max-height'] = (height - 95) + "px";
+ for (let i=0; i {
+ this.disks[title] = newValue;
+ funcs.forEach(e => e(title));
+ }
+ let allOpts = {};
+
+ const addToMenu = (title, id, options, defaultOption) => {
+ const span = this.createElement("span");
+ span.innerText = title;
+
+ const current = this.createElement("div");
+ current.innerText = "";
+ current.classList.add("ejs_settings_main_bar_selected");
+ span.appendChild(current);
+
+ const menu = this.createElement("div");
+ menus.push(menu);
+ menu.style.overflow = "auto";
+ menu.setAttribute("hidden", "");
+ const button = this.createElement("button");
+ const goToHome = () => {
+ const homeSize = this.getElementSize(home);
+ nested.style.width = (homeSize.width+20) + "px";
+ nested.style.height = homeSize.height + "px";
+ menu.setAttribute("hidden", "");
+ home.removeAttribute("hidden");
+ }
+ this.addEventListener(button, "click", goToHome);
+
+ button.type = "button";
+ button.classList.add("ejs_back_button");
+ menu.appendChild(button);
+ const pageTitle = this.createElement("span");
+ pageTitle.innerText = title;
+ pageTitle.classList.add("ejs_menu_text_a");
+ button.appendChild(pageTitle);
+
+ const optionsMenu = this.createElement("div");
+ optionsMenu.classList.add("ejs_setting_menu");
+
+ let buttons = [];
+ let opts = options;
+ if (Array.isArray(options)) {
+ opts = {};
+ for (let i=0; i {
+ if (id !== title) return;
+ for (let j=0; j {
+ this.disks[id] = opt;
+ for (let j=0; j 1) {
+ const diskLabels = {};
+ let isM3U = false;
+ let disks = {};
+ if (this.fileName.split(".").pop() === "m3u") {
+ disks = this.gameManager.Module.FS.readFile(this.fileName, { encoding: 'utf8' }).split("\n");
+ isM3U = true;
+ }
+ for (let i=0; i= 2) {
+ // has a label - use that instead
+ diskLabel = diskLabelValues[1];
+ }
+ diskLabels[i.toString()] = diskLabel;
+ }
+ }
+ addToMenu(this.localization("Disk"), "disk", diskLabels, this.gameManager.getCurrentDisk().toString());
+ }
+
+ this.disksMenu.appendChild(nested);
+
+ this.diskParent.appendChild(this.disksMenu);
+ this.diskParent.style.position = "relative";
+
+ const homeSize = this.getElementSize(home);
+ nested.style.width = (homeSize.width+20) + "px";
+ nested.style.height = homeSize.height + "px";
+
+ this.disksMenu.style.display = "none";
+
+ if (this.debug) {
+ console.log("Available core options", allOpts);
+ }
+
+ if (this.config.defaultOptions) {
+ for (const k in this.config.defaultOptions) {
+ this.changeDiskOption(k, this.config.defaultOptions[k]);
+ }
+ }
+ }
setupSettingsMenu() {
this.settingsMenu = this.createElement("div");
this.settingsMenu.classList.add("ejs_settings_parent");
@@ -3996,8 +4211,6 @@ class EmulatorJS {
const optionsMenu = this.createElement("div");
optionsMenu.classList.add("ejs_setting_menu");
- //optionsMenu.style["max-height"] = "385px";
- //optionsMenu.style.overflow = "auto";
let buttons = [];
let opts = options;
@@ -4054,18 +4267,7 @@ class EmulatorJS {
nested.appendChild(menu);
}
- //addToMenu("Test", 'test', {a:1, b:2, c:3}, 2);
- //addToMenu("Test2", 'test_2', [4, 5, 6]);
- //addToMenu("Testertthgfd", 'booger', [7, 8, 9]);
-
- if (this.gameManager.getDiskCount() > 1) {
- const diskLabels = {};
- for (let i=0; i