Actual fire

This commit is contained in:
Neale Pickett 2022-05-27 16:59:40 -06:00
parent 114baa07b4
commit 4caf3df9db
5 changed files with 99 additions and 55 deletions

View File

@ -86,7 +86,7 @@ function CString(buf, includeNull=false) {
* @returns {String} Unescaped string * @returns {String} Unescaped string
*/ */
function Unescape(str) { function Unescape(str) {
return str.replace(/\\x([0-9]+)/, (_, p1) => String.fromCharCode(p1)) return str.replaceAll(/\\x([0-9]+)/g, (_, p1) => String.fromCharCode(p1))
} }
export {Stringify, Hexlify, Unhexlify, CString, Unescape} export {Stringify, Hexlify, Unhexlify, CString, Unescape}

BIN
fire.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

View File

@ -10,10 +10,10 @@
<link rel="stylesheet" href="ui.css"> <link rel="stylesheet" href="ui.css">
</head> </head>
<body> <body>
<section class="section"> <section class="container">
<div class="columns is-multiline"> <div class="tile is-ancestor">
<div class="column"> <div class="tile is-parent">
<div class="box"> <div class="tile is-child notification" id="cpu-box">
<div class="block is-flex is-justify-content-space-between is-align-items-end"> <div class="block is-flex is-justify-content-space-between is-align-items-end">
<div class="block"> <div class="block">
<span class="tag is-info">PC=<b data-value="pc"></b></span> <span class="tag is-info">PC=<b data-value="pc"></b></span>
@ -27,50 +27,57 @@
<button class="button is-primary" data-control="step"><i class="mdi mdi-skip-next"></i></button> <button class="button is-primary" data-control="step"><i class="mdi mdi-skip-next"></i></button>
</div> </div>
</div> </div>
<div class="block may-be-tall"> <div class="table-container">
<table class="table is-striped is-hoverable" id="instructions"></table> <table class="table is-striped is-hoverable" id="instructions"></table>
</div> </div>
</div> </div>
</div>
<div class="column"> <div class="tile is-vertical is-parent">
<div class="box"> <div class="tile is-child notification" id="io-box">
<div class="field"> <div class="field">
<label class="label">Input</label> <label class="label">Input</label>
<input class="input" data-control="input" placeholder="\x00 style escapes accepted" value="hello"> <input class="input" data-control="input" placeholder="\x00 style escapes accepted" value="hello">
</div>
<div class="field">
<label class="label">Output</label>
<output class="input" data-value="output"></output>
</div>
<div class="field">
<label class="label">Program</label>
<textarea class="textarea" data-control="program"></textarea>
</div>
</div> </div>
<div class="field">
<label class="label">Output</label> <div class="tile is-child notification" id="instructions-box">
<output class="input" data-value="output"></output> <h2 class="title">Instructions</h2>
</div> <div class="table-container">
<div class="field"> <table class="table is-striped is-hoverable" id="instructions-help"></table>
<label class="label">Program</label> </div>
<textarea class="textarea" data-control="program"></textarea>
</div> </div>
</div> </div>
</div>
<div class="column">
<div class="box">
<h2 class="title">Instructions</h2>
<table class="table is-striped is-hoverable" id="instructions-help"></table>
</div>
</div> </div>
</div> </div>
</section> </section>
<template id="instruction"> <template id="instruction">
<tr> <tr>
<th class="addr has-text-right"></th> <th class="addr has-text-right"><span data-fill="addr"></span></th>
<td class="name"></td> <td class="name"><span data-fill="name"></span></td>
<td class="args"></td> <td class="args"><span data-fill="args"></span></td>
<td class="hex"></td> <td class="hex"><span data-fill="hex"></span></td>
</tr> </tr>
</template> </template>
<template id="instruction-help"> <template id="instruction-help">
<tr> <tr>
<th class="num has-text-right"></th> <td class="name" data-fill="name"></td>
<td class="name"></td> <td class="args" data-fill="args"></td>
<td class="description"></td> <td class="hex">
<span data-fill="num"></span>
<span data-fill="args"></span>
</td>
<td class="description" data-fill="description"></td>
</tr> </tr>
</template> </template>

19
ui.css
View File

@ -1,7 +1,3 @@
.may-be-tall {
overflow-y: scroll;
max-height: 80vh;
}
#instructions th.addr { #instructions th.addr {
text-align: right; text-align: right;
@ -19,3 +15,18 @@ td.args {
td.hex { td.hex {
color: #777; color: #777;
} }
.ablaze {
background: url(fire.gif) bottom repeat-x;
}
@media screen and (min-width: 768px) {
#cpu-box {
max-height: 95vh;
}
.table-container {
max-height: calc(100% - 4em);
overflow-y: scroll;
}
}

60
ui.mjs
View File

@ -9,20 +9,26 @@ const SamplePrograms = [
06 06
`, `,
`05 31 `05 31
61 62 63 64 65 66 67 68 69 6a 00 61 62 63 64 65 66 67 68 69 6a 00
70 61 73 73 77 6f 72 64 00 70 61 73 73 77 6f 72 64 00
53 75 70 65 72 20 53 65 63 72 65 74 00 53 75 70 65 72 20 53 65 63 72 65 74 00
53 6f 72 72 79 2c 20 77 72 6f 6e 67 2e 00 53 6f 72 72 79 2c 20 77 72 6f 6e 67 2e 00
02 02 02 02
03 02 0d 03 02 0d
04 3b 04 3b
01 16 01 16
06 06
01 23 01 23
06 06
` `
] ]
function fill(element, values) {
for (let e of element.querySelectorAll("[data-fill]")) {
e.textContent = values[e.dataset.fill]
}
}
class UI { class UI {
constructor(program=[]) { constructor(program=[]) {
this.program = program this.program = program
@ -55,9 +61,12 @@ class UI {
let inst = Triscit.Instructions[i] let inst = Triscit.Instructions[i]
let doc = document.querySelector("template#instruction-help").content.cloneNode(true) let doc = document.querySelector("template#instruction-help").content.cloneNode(true)
let tr = doc.firstElementChild let tr = doc.firstElementChild
tr.querySelector(".num").textContent = i fill(tr, {
tr.querySelector(".name").textContent = inst.Name num: Binutils.Hexlify([i]),
tr.querySelector(".description").textContent = inst.Description args: inst.Args.join(" "),
name: inst.Name,
description: inst.Description,
})
ih.appendChild(doc) ih.appendChild(doc)
} }
@ -82,12 +91,17 @@ class UI {
for (let i of this.cpu.DisassembleProgram()) { for (let i of this.cpu.DisassembleProgram()) {
let doc = document.querySelector("template#instruction").content.cloneNode(true) let doc = document.querySelector("template#instruction").content.cloneNode(true)
let tr = doc.firstElementChild let tr = doc.firstElementChild
tr.querySelector(".addr").textContent = i.addr fill(tr, {
tr.querySelector(".name").textContent = i.name addr: Binutils.Hexlify([i.addr]),
tr.querySelector(".hex").textContent = Binutils.Hexlify(i.buf) name: i.name,
hex: Binutils.Hexlify(i.buf),
})
let args = tr.querySelector(".args") let args = tr.querySelector(".args")
for (let a of i.args) { for (let a of i.args) {
if (! isNaN(a)) {
a = Binutils.Hexlify([a])
}
args.textContent += `${a} ` args.textContent += `${a} `
} }
@ -95,6 +109,10 @@ class UI {
if (i.addr == this.cpu.PC) { if (i.addr == this.cpu.PC) {
tr.classList.add("is-selected") tr.classList.add("is-selected")
tr.scrollIntoView(false) tr.scrollIntoView(false)
// let top = tr.offsetTop
// let parent = tr.parentElement
// tr.parentElement.scrollTop = top
} }
} }
@ -120,6 +138,14 @@ class UI {
} }
} }
for (let cpuBox of document.querySelectorAll("#cpu-box")) {
if (this.cpu.Flags & Triscit.FLAG_ABLAZE) {
cpuBox.classList.add("ablaze")
} else {
cpuBox.classList.remove("ablaze")
}
}
for (let e of document.querySelectorAll("[data-value]")) { for (let e of document.querySelectorAll("[data-value]")) {
switch (e.dataset.value) { switch (e.dataset.value) {
case "pc": case "pc":