mirror of
https://github.com/EmulatorJS/EmulatorJS.git
synced 2024-09-20 02:46:23 +00:00
[Request] Display the file name of the ROM/disk when using M3U lists (#787)
This commit is contained in:
parent
ae0ea3cc99
commit
8fbba189cb
2 changed files with 254 additions and 22 deletions
|
@ -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;
|
||||
|
|
232
data/emulator.js
232
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", '<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 473.109 473.109"><path d="M340.963,101.878H12.105C5.423,101.878,0,107.301,0,113.983v328.862c0,6.68,5.423,12.105,12.105,12.105h328.857 c6.685,0,12.104-5.426,12.104-12.105V113.983C353.067,107.301,347.647,101.878,340.963,101.878z M67.584,120.042h217.895v101.884 H67.584V120.042z M296.076,429.228H56.998V278.414h239.079V429.228z M223.947,135.173h30.269v72.638h-30.269V135.173z M274.13,315.741H78.933v-12.105H274.13V315.741z M274.13,358.109H78.933v-12.105H274.13V358.109z M274.13,398.965H78.933v-12.105 H274.13V398.965z M473.109,30.263v328.863c0,6.68-5.426,12.105-12.105,12.105H384.59v-25.724h31.528V194.694H384.59v-56.489h20.93 V36.321H187.625v43.361h-67.583v-49.42c0-6.682,5.423-12.105,12.105-12.105H461.01C467.695,18.158,473.109,23.581,473.109,30.263z M343.989,51.453h30.269v31.321c-3.18-1.918-6.868-3.092-10.853-3.092h-19.416V51.453z M394.177,232.021h-9.581v-12.105h9.581 V232.021z M384.59,262.284h9.581v12.105h-9.581V262.284z M384.59,303.14h9.581v12.104h-9.581V303.14z"/></svg>', () => {
|
||||
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", '<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>', () => {
|
||||
|
@ -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<menus.length; i++) {
|
||||
menus[i].style['max-height'] = (height - 95) + "px";
|
||||
}
|
||||
this.disksMenu.classList.toggle("ejs_settings_center_left", !onTheRight);
|
||||
this.disksMenu.classList.toggle("ejs_settings_center_right", onTheRight);
|
||||
if (needChange) {
|
||||
this.disksMenu.style.display = "none";
|
||||
this.disksMenu.style.opacity = "";
|
||||
}
|
||||
}
|
||||
|
||||
home.classList.add("ejs_setting_menu");
|
||||
nested.appendChild(home);
|
||||
let funcs = [];
|
||||
this.changeDiskOption = (title, newValue) => {
|
||||
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<options.length; i++) {
|
||||
opts[options[i]] = options[i];
|
||||
}
|
||||
}
|
||||
allOpts[id] = opts;
|
||||
|
||||
funcs.push((title) => {
|
||||
if (id !== title) return;
|
||||
for (let j=0; j<buttons.length; j++) {
|
||||
buttons[j].classList.toggle("ejs_option_row_selected", buttons[j].getAttribute("ejs_value") === this.disks[id]);
|
||||
}
|
||||
this.menuOptionChanged(id, this.disks[id]);
|
||||
current.innerText = opts[this.disks[id]];
|
||||
});
|
||||
|
||||
for (const opt in opts) {
|
||||
const optionButton = this.createElement("button");
|
||||
buttons.push(optionButton);
|
||||
optionButton.setAttribute("ejs_value", opt);
|
||||
optionButton.type = "button";
|
||||
optionButton.value = opts[opt];
|
||||
optionButton.classList.add("ejs_option_row");
|
||||
optionButton.classList.add("ejs_button_style");
|
||||
|
||||
this.addEventListener(optionButton, "click", (e) => {
|
||||
this.disks[id] = opt;
|
||||
for (let j=0; j<buttons.length; j++) {
|
||||
buttons[j].classList.remove("ejs_option_row_selected");
|
||||
}
|
||||
optionButton.classList.add("ejs_option_row_selected");
|
||||
this.menuOptionChanged(id, opt);
|
||||
current.innerText = opts[opt];
|
||||
goToHome();
|
||||
})
|
||||
if (defaultOption === opt) {
|
||||
optionButton.classList.add("ejs_option_row_selected");
|
||||
this.menuOptionChanged(id, opt);
|
||||
current.innerText = opts[opt];
|
||||
}
|
||||
|
||||
const msg = this.createElement("span");
|
||||
msg.innerText = opts[opt];
|
||||
optionButton.appendChild(msg);
|
||||
|
||||
optionsMenu.appendChild(optionButton);
|
||||
}
|
||||
|
||||
home.appendChild(optionsMenu);
|
||||
|
||||
nested.appendChild(menu);
|
||||
}
|
||||
|
||||
if (this.gameManager.getDiskCount() > 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<this.gameManager.getDiskCount(); i++) {
|
||||
// default if not an m3u loaded rom is "Disk x"
|
||||
// if m3u, then use the file name without the extension
|
||||
// if m3u, and contains a |, then use the string after the | as the disk label
|
||||
if (!isM3U) {
|
||||
diskLabels[i.toString()] = "Disk "+(i+1);
|
||||
} else {
|
||||
// get disk name from m3u
|
||||
const diskLabelValues = disks[i].split("|");
|
||||
// remove the file extension from the disk file name
|
||||
let diskLabel = diskLabelValues[0].replace("." + diskLabelValues[0].split(".").pop(), "");
|
||||
if (diskLabelValues.length >= 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<this.gameManager.getDiskCount(); i++) {
|
||||
diskLabels[i.toString()] = "Disk "+(i+1);
|
||||
}
|
||||
addToMenu(this.localization("Disk"), "disk", diskLabels, this.gameManager.getCurrentDisk().toString());
|
||||
}
|
||||
|
||||
|
||||
if (window.EJS_SHADERS) {
|
||||
addToMenu(this.localization('Shaders'), 'shader', {
|
||||
'disabled': this.localization("Disabled"),
|
||||
|
|
Loading…
Reference in a new issue