diff --git a/app/_boot.js b/app/_boot.js index bd7c912..7ceb52d 100644 --- a/app/_boot.js +++ b/app/_boot.js @@ -284,6 +284,19 @@ for (let file of manifest) { // Program startup let run = async function() { + + // Fonts + for (let file of Object.values(Bundle.files)) { + if (!file.name.endsWith(".woff2")) + continue; + let family = "/" + file.name; + family = family.substring(family.lastIndexOf("/") + 1, family.length - 6); + let font = new FontFace(family, file.data); + await font.load(); + document.fonts.add(font); + } + + // Scripts await Bundle.run("app/App.js"); await Bundle.run("app/Debugger.js"); await Bundle.run("app/toolkit/Toolkit.js"); diff --git a/app/theme/Inconsolata_SemiExpanded-Regular.woff2 b/app/theme/Inconsolata_SemiExpanded-Regular.woff2 new file mode 100644 index 0000000..4b4cec4 Binary files /dev/null and b/app/theme/Inconsolata_SemiExpanded-Regular.woff2 differ diff --git a/app/theme/Roboto-Regular.woff2 b/app/theme/Roboto-Regular.woff2 new file mode 100644 index 0000000..0167f19 Binary files /dev/null and b/app/theme/Roboto-Regular.woff2 differ diff --git a/app/theme/dark.css b/app/theme/dark.css index 94b3087..8f618ee 100644 --- a/app/theme/dark.css +++ b/app/theme/dark.css @@ -1,14 +1,17 @@ :root { - --control : #222222; - --control-focus : #444444; - --control-shadow : #999999; - --control-text : #cccccc; - --desktop : #111111; - --window-blur : #555555; - --window-blur-text : #cccccc; - --window-close : #ee9999; - --window-close-blur: #998080; - --window-close-text: #ffffff; - --window-focus : #007ACC; - --window-focus-text: #ffffff; + --control : #222222; + --control-focus : #444444; + --control-shadow : #999999; + --control-text : #cccccc; + --desktop : #111111; + --window-blur : #555555; + --window-blur-text : #cccccc; + --window-close-blur : #998080; + --window-close-blur-border : #999999; + --window-close-blur-text : #ffffff; + --window-close-focus : #ee9999; + --window-close-focus-border: #999999; + --window-close-focus-text : #ffffff; + --window-focus : #007ACC; + --window-focus-text : #ffffff; } \ No newline at end of file diff --git a/app/theme/kiosk.css b/app/theme/kiosk.css index b5f7429..6e634a3 100644 --- a/app/theme/kiosk.css +++ b/app/theme/kiosk.css @@ -1,15 +1,15 @@ /* Common styles for all themes */ :root { - --font-dialog: Arial, sans-serif; - --font-hex : Consolas, monospace; - --font-size : 12; + --font-dialog: "Roboto-Regular", sans-serif; + --font-hex : "Inconsolata_SemiExpanded-Regular", monospace; + --font-size : 12px; } :root { color : var(--control-text); font-family: var(--font-dialog); - font-size : calc(1px * var(--font-size)); + font-size : var(--font-size); } body { @@ -160,8 +160,9 @@ body { [role="dialog"] [name="title-close"] { align-items : center; - background : var(--window-close); - box-shadow : 0 0 0 1px var(--control-shadow); + background : var(--window-close-focus); + box-shadow : 0 0 0 1px var(--window-close-focus-border); + color : var(--window-close-focus-text); display : flex; height : 13px; justify-content: center; @@ -172,30 +173,23 @@ body { [role="dialog"][focus="false"] [name="title-close"] { background: var(--window-close-blur); -} - -[role="dialog"] [name="title-close"]:focus { - background: var(--control-focus); + box-shadow: 0 0 0 1px var(--window-close-blur-border); + color : var(--window-close-blur-text); } [role="dialog"] [name="title-close"][active] { - box-shadow: 0 0 0 1px var(--control-shadow); + box-shadow: 0 0 0 1px var(--window-close-focus-border); margin : 0; } [role="dialog"] [name="title-close"]:after { - color : var(--window-close-text); content : '\00d7'; font-size : 13px; line-height: 13px; } [role="dialog"] [name="title-close"][active]:after { - color : var(--window-close-text); - content : '\00d7'; - font-size : 13px; - line-height: 13px; - margin : 1px -1px -1px 1px; + margin: 1px -1px -1px 1px; } [role="dialog"] [name="client"] { @@ -207,8 +201,17 @@ body { /******************************* Memory Window *******************************/ [window="memory"] [name="client"] { - align-items: center; - column-gap : calc(1px * var(--font-size) / 2); + align-items: start; + column-gap : calc(var(--font-size) / 2); +} + +[window="memory"] [name="client"] > *:not(:nth-child(1n+1)) { + text-align: center; +} + +[window="memory"] [name="client"] > *:nth-child(17n+2), +[window="memory"] [name="client"] > *:nth-child(17n+10) { + margin-left: calc(var(--font-size) / 2); } [window="memory"] [name="address"], diff --git a/app/theme/light.css b/app/theme/light.css index a07fd6a..5d766d7 100644 --- a/app/theme/light.css +++ b/app/theme/light.css @@ -1,14 +1,17 @@ :root { - --control : #eeeeee; - --control-focus : #cccccc; - --control-shadow : #999999; - --control-text : #000000; - --desktop : #cccccc; - --window-blur : #cccccc; - --window-blur-text : #444444; - --window-close : #ee9999; - --window-close-blur: #d4c4c4; - --window-close-text: #ffffff; - --window-focus : #80ccff; - --window-focus-text: #000000; + --control : #eeeeee; + --control-focus : #cccccc; + --control-shadow : #999999; + --control-text : #000000; + --desktop : #cccccc; + --window-blur : #cccccc; + --window-blur-text : #444444; + --window-close-blur : #d4c4c4; + --window-close-blur-border : #999999; + --window-close-blur-text : #ffffff; + --window-close-focus : #ee9999; + --window-close-focus-border: #999999; + --window-close-focus-text : #ffffff; + --window-focus : #80ccff; + --window-focus-text : #000000; } diff --git a/app/theme/virtual.css b/app/theme/virtual.css index dd41b56..9e55a6e 100644 --- a/app/theme/virtual.css +++ b/app/theme/virtual.css @@ -1,16 +1,19 @@ :root { - --control : #000000; - --control-focus : #550000; - --control-shadow : #aa0000; - --control-text : #ff0000; - --desktop : #000000; - --window-blur : #000000; - --window-blur-text : #aa0000; - --window-close : #aa0000; - --window-close-blur: #550000; - --window-close-text: #ff0000; - --window-focus : #550000; - --window-focus-text: #ff0000; + --control : #000000; + --control-focus : #550000; + --control-shadow : #aa0000; + --control-text : #ff0000; + --desktop : #000000; + --window-blur : #000000; + --window-blur-text : #aa0000; + --window-close-blur : #550000; + --window-close-blur-border : #aa0000; + --window-close-blur-text : #aa0000; + --window-close-focus : #aa0000; + --window-close-focus-border: #ff0000; + --window-close-focus-text : #ff0000; + --window-focus : #550000; + --window-focus-text : #ff0000; } [filter="true"] { diff --git a/app/windows/MemoryWindow.js b/app/windows/MemoryWindow.js index 0bfe4a1..f15d848 100644 --- a/app/windows/MemoryWindow.js +++ b/app/windows/MemoryWindow.js @@ -14,14 +14,13 @@ globalThis.MemoryWindow = class MemoryWindow extends Toolkit.Window { // Configure element this.element.setAttribute("window", "memory"); + this.element.addEventListener("wheel", e=>this.onwheel(e)); // Configure client - this.client.setLayout("grid", { columns: "repeat(19, max-content)" }); + this.client.setLayout("grid", { columns: "repeat(17, max-content)" }); this.client.element.style.gridAutoRows = "max-content"; this.client.setOverflow("auto", "hidden"); this.client.addResizeListener(b=>this.refresh(b.height)); - this.client.element.addEventListener("keydown", e=>this.onkeydown(e)); - this.client.element.addEventListener("wheel", e=>this.onwheel(e)); // Configure properties this.setProperty("sim", ""); @@ -151,7 +150,7 @@ globalThis.MemoryWindow = class MemoryWindow extends Toolkit.Window { this.refresh(); break; - default: console.log(e.key); return; + default: return super.onkeydown(e); } // Configure event @@ -186,7 +185,6 @@ MemoryWindow.Row = class Row { // Configure instance fields this.bytes = new Array(16); this.client = client; - this.spacers = new Array(2); // Address label this.address = client.add(client.newLabel({ text: "\u00a0" })); @@ -194,11 +192,6 @@ MemoryWindow.Row = class Row { // Byte labels for (let x = 0; x < 16; x++) { - if ((x & 7) == 0) { - let lbl = this.spacers[x / 8] = - client.add(client.newLabel({ text: "" })); - lbl.element.setAttribute("name", "byte"); - } let lbl = this.bytes[x] = client.add(client.newLabel({ text: "\u00a0" })); lbl.element.setAttribute("name", "byte"); @@ -215,8 +208,6 @@ MemoryWindow.Row = class Row { this.client.remove(this.address); for (let bytel of this.bytes) this.client.remove(bytel); - for (let spacer of this.spacers) - this.client.remove(spacer); } // Update the output labels with emulation state content