Actual fire
This commit is contained in:
parent
114baa07b4
commit
4caf3df9db
|
|
@ -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}
|
||||||
|
|
|
||||||
43
index.html
43
index.html
|
|
@ -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,14 +27,13 @@
|
||||||
<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">
|
||||||
|
|
@ -48,29 +47,37 @@
|
||||||
<textarea class="textarea" data-control="program"></textarea>
|
<textarea class="textarea" data-control="program"></textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column">
|
<div class="tile is-child notification" id="instructions-box">
|
||||||
<div class="box">
|
|
||||||
<h2 class="title">Instructions</h2>
|
<h2 class="title">Instructions</h2>
|
||||||
|
<div class="table-container">
|
||||||
<table class="table is-striped is-hoverable" id="instructions-help"></table>
|
<table class="table is-striped is-hoverable" id="instructions-help"></table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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
19
ui.css
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
38
ui.mjs
38
ui.mjs
|
|
@ -23,6 +23,12 @@ const SamplePrograms = [
|
||||||
`
|
`
|
||||||
]
|
]
|
||||||
|
|
||||||
|
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":
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue