import { Core } from /**/"./core/Core.js"; import { Debugger } from /**/"./debugger/Debugger.js"; import { Disassembler } from /**/"./core/Disassembler.js"; import { Toolkit } from /**/"./toolkit/Toolkit.js"; // Front-end emulator application class App extends Toolkit.App { ///////////////////////// Initialization Methods ////////////////////////// constructor(bundle) { super({ style: { display : "grid", gridTemplateRows: "max-content auto" }, visibility: true, visible : false }); // Configure instance fields this.bundle = bundle; this.debugMode = true; this.dualMode = false; this.text = null; } async init() { // Theme Object.assign(document.body.style, { margin:"0", overflow:"hidden" }); this.stylesheet(/**/"web/theme/kiosk.css", false); this.stylesheet(/**/"web/theme/vbemu.css", false); this._theme = "auto"; this.themes = { dark : this.stylesheet(/**/"web/theme/dark.css" ), light : this.stylesheet(/**/"web/theme/light.css" ), virtual: this.stylesheet(/**/"web/theme/virtual.css") }; // Watch for dark mode preference changes this.isDark = window.matchMedia("(prefers-color-scheme: dark)"); this.isDark.addEventListener("change", e=>this.onDark()); this.onDark(); // Locales await this.addLocale(/**/"web/locale/en-US.json"); for (let id of [].concat(navigator.languages, ["en-US"])) { if (this.setLocale(id)) break; } this.setTitle("{app.title}", true); // Element document.body.append(this.element); window.addEventListener("resize", e=>{ this.element.style.height = window.innerHeight + "px"; this.element.style.width = window.innerWidth + "px"; }); window.dispatchEvent(new Event("resize")); this.addEventListener("keydown", e=>this.onKeyDown(e)); // Menus this.menuBar = new Toolkit.MenuBar(this); this.menuBar.setLabel("{menu._}", true); this.add(this.menuBar); this.initFileMenu (); this.initEmulationMenu(); this.initDebugMenu (0, this.debugMode); this.initDebugMenu (1, this.debugMode && this.dualMode); this.initThemeMenu (); // Fallback for bubbled key events document.body.addEventListener("focusout", e=>this.onBlur(e)); window .addEventListener("keydown" , e=>this.onKey (e)); window .addEventListener("keyup" , e=>this.onKey (e)); // Temporary: Faux game mode display this.display = new Toolkit.Component(this, { class : "tk display", style : { position: "relative" }, visible: !this.debugMode }); this.image1 = new Toolkit.Component(this, { style: { background: "#000000", position : "absolute" }}); this.display.add(this.image1); this.image2 = new Toolkit.Component(this, { style: { background: "#000000", position : "absolute" }}); this.display.add(this.image2); this.display.addEventListener("resize", e=>this.onDisplay()); this.add(this.display); // Temporary: Faux debug mode display this.desktop = new Toolkit.Desktop(this, { visible: this.debugMode }); this.add(this.desktop); // Emulation core this.core = await new Core().init(); let sims = (await this.core.create(2)).sims; this.core.onsubscription = (k,m)=>this.onSubscription(k, m); // Debugging managers this.dasm = new Disassembler(); this.debug = new Array(sims.length); for (let x = 0; x < sims.length; x++) { let dbg = this.debug[x] = new Debugger(this, sims[x], x); if (x == 0 && !this.dualMode) { dbg.cpu .substitute("#", ""); dbg.memory.substitute("#", ""); } this.desktop.add(dbg.cpu); this.desktop.add(dbg.memory); } // Reveal the application this.visible = true; this.restoreFocus(); } // Initialize File menu initFileMenu() { let bar = this.menuBar; let item = bar.file = new Toolkit.MenuItem(this); item.setText("{menu.file._}"); bar.add(item); let menu = item.menu = new Toolkit.Menu(this); item = bar.file.loadROM0 = new Toolkit.MenuItem(this); item.setText("{menu.file.loadROM}"); item.substitute("#", this.dualMode ? " 1" : "", false); item.addEventListener("action", e=>this.onLoadROM(0)); menu.add(item); item = bar.file.loadROM1 = new Toolkit.MenuItem(this, { visible: this.dualMode }); item.setText("{menu.file.loadROM}"); item.substitute("#", " 2", false); item.addEventListener("action", e=>this.onLoadROM(1)); menu.add(item); item = bar.file.dualMode = new Toolkit.MenuItem(this, { checked: this.dualMode, type: "checkbox" }); item.setText("{menu.file.dualMode}"); item.addEventListener("action", e=>this.onDualMode()); menu.add(item); item = bar.file.debugMode = new Toolkit.MenuItem(this, { checked: this.debugMode, disabled: true, type: "checkbox" }); item.setText("{menu.file.debugMode}"); item.addEventListener("action", e=>this.onDebugMode()); menu.add(item); menu.addSeparator(); item = new Toolkit.MenuItem(this); item.setText("Export source...", false); item.addEventListener("action", ()=>this.bundle.save()); menu.add(item); } // Initialize Emulation menu initEmulationMenu() { let bar = this.menuBar; let item = bar.emulation = new Toolkit.MenuItem(this); item.setText("{menu.emulation._}"); bar.add(item); let menu = item.menu = new Toolkit.Menu(this); item = bar.emulation.run = new Toolkit.MenuItem(this, { disabled: true }); item.setText("{menu.emulation.run}"); menu.add(item); item = bar.emulation.reset0 = new Toolkit.MenuItem(this); item.setText("{menu.emulation.reset}"); item.substitute("#", this.dualMode ? " 1" : "", false); item.addEventListener("action", e=>this.onReset(0)); menu.add(item); item = bar.emulation.reset1 = new Toolkit.MenuItem(this, { visible: this.dualMode }); item.setText("{menu.emulation.reset}"); item.substitute("#", " 2", false); item.addEventListener("action", e=>this.onReset(1)); menu.add(item); item = bar.emulation.linkSims = new Toolkit.MenuItem(this, { disabled: true, type: "checkbox", visible: this.dualMode }); item.setText("{menu.emulation.linkSims}"); menu.add(item); } // Initialize Debug menu initDebugMenu(index, visible) { let bar = this.menuBar; let item = bar["debug" + index] = new Toolkit.MenuItem(this, { visible: visible }), top = item; item.setText("{menu.debug._}"); item.substitute("#", index == 0 ? this.dualMode ? "1" : "" : " 2", false); bar.add(item); let menu = item.menu = new Toolkit.Menu(this); item = top.console = new Toolkit.MenuItem(this, { disabled: true }); item.setText("{menu.debug.console}"); menu.add(item); item = top.memory = new Toolkit.MenuItem(this); item.setText("{menu.debug.memory}"); item.addEventListener("action", e=>this.showWindow(this.debug[index].memory)); menu.add(item); item = top.cpu = new Toolkit.MenuItem(this); item.setText("{menu.debug.cpu}"); item.addEventListener("action", e=>this.showWindow(this.debug[index].cpu)); menu.add(item); item=top.breakpoints = new Toolkit.MenuItem(this, { disabled: true }); item.setText("{menu.debug.breakpoints}"); menu.add(item); menu.addSeparator(); item = top.palettes = new Toolkit.MenuItem(this, { disabled: true }); item.setText("{menu.debug.palettes}"); menu.add(item); item = top.characters = new Toolkit.MenuItem(this, { disabled: true }); item.setText("{menu.debug.characters}"); menu.add(item); item = top.bgMaps = new Toolkit.MenuItem(this, { disabled: true }); item.setText("{menu.debug.bgMaps}"); menu.add(item); item = top.backgrounds = new Toolkit.MenuItem(this, { disabled:true }); item.setText("{menu.debug.backgrounds}"); menu.add(item); item = top.objects = new Toolkit.MenuItem(this, { disabled: true }); item.setText("{menu.debug.objects}"); menu.add(item); item = top.frameBuffers = new Toolkit.MenuItem(this, {disabled: true}); item.setText("{menu.debug.frameBuffers}"); menu.add(item); } // Initialize Theme menu initThemeMenu() { let bar = this.menuBar; let item = bar.theme = new Toolkit.MenuItem(this); item.setText("{menu.theme._}"); bar.add(item); let menu = item.menu = new Toolkit.Menu(this); item = bar.theme.auto = new Toolkit.MenuItem(this, { checked: true, type: "checkbox" }); item.setText("{menu.theme.auto}"); item.theme = "auto"; item.addEventListener("action", e=>this.theme = "auto"); menu.add(item); item = bar.theme.light = new Toolkit.MenuItem(this, { checked: false, type: "checkbox" }); item.setText("{menu.theme.light}"); item.theme = "light"; item.addEventListener("action", e=>this.theme = "light"); menu.add(item); item = bar.theme.dark = new Toolkit.MenuItem(this, { checked: false, type: "checkbox" }); item.setText("{menu.theme.dark}"); item.theme = "dark"; item.addEventListener("action", e=>this.theme = "dark"); menu.add(item); item = bar.theme.light = new Toolkit.MenuItem(this, { checked: false, type: "checkbox" }); item.setText("{menu.theme.virtual}"); item.theme = "virtual"; item.addEventListener("action", e=>this.theme = "virtual"); menu.add(item); } ///////////////////////////// Event Handlers ////////////////////////////// // All elements have lost focus onBlur(e) { if ( e.relatedTarget == null || e.relatedTarget == document.body ) this.restoreFocus(); } // Dark mode preference changed onDark() { if (this._theme != "auto") return; let isDark = this.isDark.matches; this.themes.light.disabled = isDark; this.themes.dark .disabled = !isDark; } // Game mode display resized onDisplay() { let bounds = this.display.element.getBoundingClientRect(); let width = Math.max(1, bounds.width); let height = Math.max(1, bounds.height); let scale, x1, y1, x2, y2; // Single mode if (!this.dualMode) { this.image2.visible = false; scale = Math.max(1, Math.min( Math.floor(width / 384), Math.floor(height / 224) )); x1 = Math.max(0, Math.floor((width - 384 * scale) / 2)); y1 = Math.max(0, Math.floor((height - 224 * scale) / 2)); x2 = y2 = 0; } // Dual mode else { this.image2.visible = true; // Horizontal orientation if (true) { scale = Math.max(1, Math.min( Math.floor(width / 768), Math.floor(height / 224) )); let gap = Math.max(0, width - 768 * scale); gap = gap < 0 ? 0 : Math.floor(gap / 3) + (gap%3==2 ? 1 : 0); x1 = gap; x2 = Math.max(384 * scale, width - 384 * scale - gap); y1 = y2 = Math.max(0, Math.floor((height - 224 * scale) / 2)); } // Vertical orientation else { scale = Math.max(1, Math.min( Math.floor(width / 384), Math.floor(height / 448) )); let gap = Math.max(0, height - 448 * scale); gap = gap < 0 ? 0 : Math.floor(gap / 3) + (gap%3==2 ? 1 : 0); x1 = x2 = Math.max(0, Math.floor((width - 384 * scale) / 2)); y1 = gap; y2 = Math.max(224 * scale, height - 224 * scale - gap); } } width = 384 * scale + "px"; height = 224 * scale + "px"; Object.assign(this.image1.element.style, { left: x1+"px", top: y1+"px", width: width, height: height }); Object.assign(this.image2.element.style, { left: x2+"px", top: y2+"px", width: width, height: height }); } // File -> Debug mode onDebugMode() { this.debugMode =!this.debugMode; this.display.visible =!this.debugMode; this.desktop.visible = this.debugMode; this.configMenus(); this.onDisplay(); } // Emulation -> Dual mode onDualMode() { this.setDualMode(!this.dualMode); this.configMenus(); this.onDisplay(); } // Key press onKeyDown(e) { // Take no action if (!e.altKey || e.key != "F10" || this.menuBar.contains(document.activeElement)) return; // Move focus into the menu bar this.menuBar.focus(); Toolkit.handle(e); } // File -> Load ROM async onLoadROM(index) { // Add a file picker to the document let file = document.createElement("input"); file.type = "file"; file.style.position = "absolute"; file.style.visibility = "hidden"; document.body.appendChild(file); // Prompt the user to select a file await new Promise(resolve=>{ file.addEventListener("input", resolve); file.click(); }); file.remove(); // No file was selected file = file.files[0]; if (!file) return; // Load the file let data = null; try { data = new Uint8Array(await file.arrayBuffer()); } catch { alert(this.localize("{menu.file.loadROMError}")); return; } // Attempt to process the file as an ISX binary try { data = Debugger.isx(data).toROM(); } catch { } // Error checking if ( data.length < 1024 || data.length > 0x1000000 || (data.length & data.length - 1) ) { alert(this.localize("{menu.file.loadROMInvalid}")); return; } // Load the ROM into simulation memory let rep = await this.core.setROM(this.debug[index].sim, data, { refresh: true }); if (!rep.success) { alert(this.localize("{menu.file.loadROMError}")); return; } this.debug[index].followPC(0xFFFFFFF0); } // Emulation -> Reset async onReset(index) { await this.core.reset(this.debug[index].sim, { refresh: true }); this.debug[index].followPC(0xFFFFFFF0); } // Core subscription onSubscription(key, msg) { let target = this.debug; // Handler object for (let x = 1; x < key.length - 1; x++) target = target[key[x]]; target[key[key.length - 1]].call(target, msg); } ///////////////////////////// Public Methods ////////////////////////////// // Specify document title setTitle(title, localize) { this.setString("text", title, localize); } // Specify the color theme get theme() { return this._theme; } set theme(theme) { switch (theme) { case "light": case "dark": case "virtual": this._theme = theme; for (let entry of Object.entries(this.themes)) entry[1].disabled = entry[0] != theme; break; default: this._theme = "auto"; this.themes["virtual"].disabled = true; this.onDark(); } for (let item of this.menuBar.theme.menu.children) item.checked = item.theme == theme; } ///////////////////////////// Package Methods ///////////////////////////// // Configure components for automatic localization, or localize a message localize(a, b) { // Default behavior if (a && a != this) return super.localize(a, b); // Update localization strings if (this.text != null) { let text = this.text; document.title = !text[1] ? text[0] : this.localize(text[0], this.substitutions); } } // Return focus to the most recent focused element restoreFocus() { // Focus was successfully restored if (super.restoreFocus()) return true; // Select the foremost visible window let wnd = this.desktop.getActiveWindow(); if (wnd) { wnd.focus(); return true; } // Select the menu bar this.menuBar.focus(); return true; } // Perform a Run Next command on one of the simulations runNext(index, options) { let debugs = [ this.debug[index] ]; if (this.dualMode) debugs.push(this.debug[index ^ 1]); let ret = this.core.runNext(debugs.map(d=>d.sim), options); if (ret instanceof Promise) ret.then(msg=>{ for (let x = 0; x < debugs.length; x++) debugs[x].followPC(msg.pcs[x]); }); } // Perform a Single Step command on one of the simulations singleStep(index, options) { let debugs = [ this.debug[index] ]; if (this.dualMode) debugs.push(this.debug[index ^ 1]); let ret = this.core.singleStep(debugs.map(d=>d.sim), options); if (ret instanceof Promise) ret.then(msg=>{ for (let x = 0; x < debugs.length; x++) debugs[x].followPC(msg.pcs[x]); }); } ///////////////////////////// Private Methods ///////////////////////////// // Configure menu item visibility configMenus() { let bar = this.menuBar; bar.file.debugMode .checked = this.debugMode; bar.file.loadROM1 .visible = this.dualMode; bar.emulation.reset1 .visible = this.dualMode; bar.emulation.linkSims.visible = this.dualMode; bar.debug0 .visible = this.debugMode; bar.debug1 .visible = this.debugMode && this.dualMode; } // Specify whether dual mode is active setDualMode(dualMode) { // Update state if (dualMode == this.dualMode) return; this.dualMode = dualMode; // Working variables let index = dualMode ? " 1" : ""; // Update menus let bar = this.menuBar; bar.file.loadROM0 .substitute("#", index, false); bar.debug0 .substitute("#", index, false); bar.emulation.reset0.substitute("#", index, false); bar.file.dualMode .checked = this.dualMode; // Update sim 1 debug windows let dbg = this.debug[0]; dbg.cpu .substitute("#", index); dbg.memory.substitute("#", index); // Re-show any sim 2 debug windows that were previously visible if (dualMode) { for (let wnd of this.desktop.children) { if (wnd.index == 1 && wnd.wasVisible) wnd.visible = true; } } // Hide any visible sim 2 debug windows else for (let wnd of this.desktop.children) { if (wnd.index == 0) continue; wnd.wasVisible = wnd.visible; wnd.visible = false; } } // Ensure a debugger window is visible showWindow(wnd) { let adjust = false; // The window is already visible if (wnd.visible) { // The window is already in the foreground if (wnd == this.desktop.getActiveWindow()) ;//adjust = true; // Bring the window to the foreground else this.desktop.bringToFront(wnd); } // The window is not visible else { adjust = !wnd.shown; wnd.visible = true; this.desktop.bringToFront(wnd); } // Adjust the window position if (adjust) { let bounds = this.desktop.element.getBoundingClientRect(); wnd.left = Math.max(0, (bounds.width - wnd.outerWidth ) / 2); wnd.top = Math.max(0, (bounds.height - wnd.outerHeight) / 2); } // Transfer focus into the window wnd.focus(); } // Install a stylesheet. Returns the resulting element stylesheet(filename, disabled = true) { let ret = document.createElement("link"); ret.href = filename; ret.rel = "stylesheet"; ret.type = "text/css"; ret.disabled = disabled; document.head.append(ret); return ret; } ///////////////////////////// Program Methods ///////////////////////////// // Program entry point static main(bundle) { new App(bundle).init(); } } export { App };