From 51751c568b9f32d70bbbbdad4196881dfcc3d622 Mon Sep 17 00:00:00 2001 From: Alexander Bass Date: Thu, 15 Feb 2024 00:32:54 -0500 Subject: [PATCH] major ui enhancements --- index.html | 27 +++++++++++++++--- src/computer.ts | 12 ++++---- src/etc.ts | 8 +++--- src/ui.ts | 6 ++-- style.css | 73 ++++++++++++++++++++++++++++++++++++++++++------- 5 files changed, 99 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index 1bd1836..e0ae901 100644 --- a/index.html +++ b/index.html @@ -9,11 +9,30 @@
-
+
VIRTUAL 8-BIT COMPUTER
+
+
+
+
+
￩REGISTERS
+
MEMORY↯
+
+
+
+
- - - +
+ + + + +
diff --git a/src/computer.ts b/src/computer.ts index bedea5d..b914509 100644 --- a/src/computer.ts +++ b/src/computer.ts @@ -133,12 +133,6 @@ export class Computer { } switch (inst.instr) { - case Instr.Print: { - const [register_no] = inst.params; - const value = this.registers[register_no]; - // console.log(value); - break; - } case Instr.Goto: { const [parameter] = inst.params; // console.log(`Goto ${parameter}`); @@ -225,6 +219,12 @@ export class Computer { } break; } + case Instr.Print: { + const [register_no] = inst.params; + const value = this.registers[register_no]; + $("printout").textContent += this.registers[register_no].toString(10); + break; + } case Instr.PrintASCII: { const [register_num] = inst.params; const ASCIIbyte = this.registers[register_num]; diff --git a/src/etc.ts b/src/etc.ts index 0abc4aa..bf98aae 100644 --- a/src/etc.ts +++ b/src/etc.ts @@ -3,10 +3,10 @@ export type u8 = number; export const $ = (s: string): HTMLElement => document.getElementById(s) as HTMLElement; export function el(type: string, id?: string): HTMLElement { - const div = document.createElement(type); + const element = document.createElement(type); if (id === undefined) { - return div; + return element; } - div.id = id; - return div; + element.id = id; + return element; } diff --git a/src/ui.ts b/src/ui.ts index 410e930..29c174e 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -12,7 +12,7 @@ export class UI { constructor(parent: HTMLElement) { this.container = parent; - const program_mem = el("div", "program_memory"); + const program_mem = $("memory"); this.program_memory_cells = []; for (let i = 0; i < 256; i++) { const mem_cell = el("div", `p_${i}`); @@ -24,7 +24,7 @@ export class UI { this.program_memory = program_mem; this.register_cells = []; - const registers = el("div", "registers"); + const registers = $("registers"); for (let i = 0; i < 8; i++) { const reg_cell = el("div", `R_${i}`); reg_cell.textContent = "00"; @@ -64,7 +64,7 @@ export class UI { this.registers = registers; - this.container.append(registers, program_mem); + // this.container.append(registers, program_mem); this.step_func = null; this.auto_running = false; const pp_button = $("pause_play_button"); diff --git a/style.css b/style.css index c62cc46..e737286 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,17 @@ -#program_memory { +* { + box-sizing: border-box; +} + +#memory { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 5px; padding: 10px; + border: 5px solid yellow; + color: lightgray; } -#program_memory div { +#memory div { aspect-ratio: 1; text-align: center; margin: auto; @@ -18,11 +24,37 @@ body { font-family: monospace; } +#registers div { + max-height: min-content; + margin-block: auto; +} + +#subcontainer { + display: flex; + flex-direction: row; + column-gap: 15px; +} + +#labelcontainer { + column-gap: 18px; + font-size: 0.85em; + display: flex; + align-items: center; + justify-content: space-between; + user-select: none; +} + #main { display: flex; flex-direction: row; } +#title { + writing-mode: sideways-lr; + user-select: none; + text-orientation: mixed; +} + #printout { border: 4px dashed yellow; width: 1000px; @@ -32,26 +64,25 @@ body { word-break: break-all; } -#program_memory div.program_counter { +#memory div.program_counter { outline: 3px solid orange; } -#program_memory { - border: 5px solid yellow; -} - -#program_memory div.instruction_argument { +#memory div.instruction_argument { outline: 3px dashed purple; } -#program_memory div.current_instruction { +#memory div.current_instruction { outline: 3px dashed greenyellow; } #registers { border: 5px solid yellow; + border-bottom: none; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; max-width: fit-content; - display: flex; + display: grid; column-gap: 5px; + color: lightgray; padding: 10px; } @@ -60,3 +91,25 @@ body { max-width: min-content; max-height: min-content; } + +button, +label.button { + border: 4px solid yellow; + color: gray; + margin: 10px; + margin-inline: 8px; + padding: 10px; + font-size: 0.8em; + font-family: monospace; + background-color: transparent; + cursor: pointer; + user-select: none; +} +button:hover, +label.button:hover { + color: white; +} +#controls_bar { + margin-left: 1.12em; + display: flex; +}