Skip to content

Commit 64600d7

Browse files
MathMan05MathMan05
committed
help menu
1 parent bf2e49e commit 64600d7

File tree

10 files changed

+200
-7
lines changed

10 files changed

+200
-7
lines changed

‎dist/webpage/fetches.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/webpage/fetches.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/webpage/index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/webpage/index.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/webpage/style.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,23 @@ body {
2727
margin-bottom: 3px;
2828
}
2929
}
30+
.heightLimitTable{
31+
height: 60vh;
32+
width:80vw;
33+
overflow:auto;
34+
tr:first-child{
35+
position: relative !important;
36+
background:white !important;
37+
}
38+
td{
39+
white-space:pre;
40+
}
41+
}
42+
dialog{
43+
border:black solid 2px;
44+
border-radius:6px;
45+
background:#f6f6f6;
46+
}
3047
.fileList {
3148
padding: 2px;
3249
border: solid black 1px;

‎dist/webpage/translations/en.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,15 @@
1313
"tools": "Tools",
1414
"help": "help"
1515
},
16+
"help":{
17+
"help":"Help",
18+
"webhelp":"Web RARS help",
19+
"dirs":"Directives",
20+
"riscv":"RISCV",
21+
"close":"Close",
22+
"basicInstructions":"Basic Instructions",
23+
"extInstructions":"Extended Instructions"
24+
},
1625
"run": {
1726
"run": "Run",
1827
"step": "Step",

‎src/webpage/fetches.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ type instructionType =
6868
type: "reallyfake";
6969
};
7070

71-
const instructions = (await (
72-
await fetch("./assembler/instructions.json")
73-
).json()) as instructionType[];
71+
const instructions = (
72+
(await (await fetch("./assembler/instructions.json")).json()) as instructionType[]
73+
).sort((a, b) => (a.name < b.name ? -1 : 1));
7474

7575
export {registerNames, instructions};

‎src/webpage/index.ts‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {Contextmenu} from "./contextMenu.js";
33
import {Editor} from "./editor/editor.js";
44
import {Console} from "./emulator/console.js";
55
import {Etab} from "./executeTab/etab.js";
6+
import {instructions} from "./fetches.js";
67
import {I18n} from "./i18n.js";
78
import {Project} from "./projects/project.js";
89
import {ProjFiles} from "./projects/projectFiles.js";
@@ -140,6 +141,146 @@ runButton.textContent = I18n.run.run();
140141
actionRow.append(runButton);
141142
menu.bindContextmenu(runButton, undefined, undefined, true);
142143

144+
const helpMenu = new Contextmenu("help");
145+
146+
helpMenu.addButton(
147+
() => I18n.help.help(),
148+
() => {
149+
const menu = document.createElement("dialog");
150+
document.body.append(menu);
151+
152+
const title = document.createElement("h2");
153+
title.textContent = I18n.help.webhelp();
154+
155+
const tabs = document.createElement("div");
156+
tabs.classList.add("flexltr", "tabStyle");
157+
158+
const body = document.createElement("div");
159+
body.classList.add("flexttb");
160+
161+
const riscv = document.createElement("button");
162+
riscv.textContent = I18n.help.riscv();
163+
let lastSelected = riscv;
164+
riscv.onclick = () => {
165+
body.innerHTML = "";
166+
lastSelected.classList.remove("selected");
167+
lastSelected = riscv;
168+
riscv.classList.add("selected");
169+
const riscvButtons = document.createElement("div");
170+
riscvButtons.classList.add("flexltr", "tabStyle");
171+
172+
const riscvBody = document.createElement("div");
173+
174+
const fakes = new Set(["fake", "veryFake"]);
175+
176+
const inst = document.createElement("button");
177+
riscvButtons.append(inst);
178+
let lastSelectedInst = inst;
179+
inst.textContent = I18n.help.basicInstructions();
180+
inst.onclick = () => {
181+
riscvBody.innerHTML = "";
182+
lastSelectedInst.classList.remove("selected");
183+
lastSelectedInst = inst;
184+
inst.classList.add("selected");
185+
const insts = document.createElement("table");
186+
const heightLimitTable = document.createElement("div");
187+
heightLimitTable.classList.add("heightLimitTable");
188+
const instList = instructions
189+
.filter((e) => !fakes.has(e.type))
190+
.map((e) => {
191+
const b = I18n.instructions[e.name as keyof typeof I18n.instructions];
192+
return [b.shortDesc(), b.addDescs, b.addDescs("$$$").split("$$$")[0].length] as const;
193+
});
194+
const spaces = instList.reduce((acc, cur) => Math.max(acc, cur[2]), 0);
195+
for (const [short, desc, len] of instList) {
196+
const tr = document.createElement("tr");
197+
const td = document.createElement("td");
198+
insts.append(tr);
199+
tr.append(td);
200+
td.textContent = desc(" ".repeat(spaces - len + 3) + short).split("\n")[0];
201+
}
202+
riscvBody.append(heightLimitTable);
203+
heightLimitTable.append(insts);
204+
};
205+
206+
const ainst = document.createElement("button");
207+
riscvButtons.append(ainst);
208+
ainst.textContent = I18n.help.extInstructions();
209+
ainst.onclick = () => {
210+
riscvBody.innerHTML = "";
211+
lastSelectedInst.classList.remove("selected");
212+
lastSelectedInst = ainst;
213+
ainst.classList.add("selected");
214+
const insts = document.createElement("table");
215+
const heightLimitTable = document.createElement("div");
216+
heightLimitTable.classList.add("heightLimitTable");
217+
const instList = instructions
218+
.filter((e) => fakes.has(e.type))
219+
.map((e) => {
220+
const b = I18n.instructions[e.name as keyof typeof I18n.instructions];
221+
return [b.shortDesc(), b.addDescs, b.addDescs("$$$").split("$$$")[0].length] as const;
222+
});
223+
const spaces = instList.reduce((acc, cur) => Math.max(acc, cur[2]), 0);
224+
for (const [short, desc, len] of instList) {
225+
const tr = document.createElement("tr");
226+
const td = document.createElement("td");
227+
insts.append(tr);
228+
tr.append(td);
229+
td.textContent = desc(" ".repeat(spaces - len + 3) + short).split("\n")[0];
230+
}
231+
riscvBody.append(heightLimitTable);
232+
heightLimitTable.append(insts);
233+
};
234+
235+
const dirs = document.createElement("button");
236+
riscvButtons.append(dirs);
237+
dirs.textContent = I18n.help.dirs();
238+
dirs.onclick = () => {
239+
riscvBody.innerHTML = "";
240+
lastSelectedInst.classList.remove("selected");
241+
lastSelectedInst = dirs;
242+
dirs.classList.add("selected");
243+
const insts = document.createElement("table");
244+
const heightLimitTable = document.createElement("div");
245+
heightLimitTable.classList.add("heightLimitTable");
246+
const keys = Object.keys(
247+
I18n.translations[0].directives,
248+
) as (keyof typeof I18n.directives)[] as (keyof typeof I18n.directives)[];
249+
const spaces = keys.reduce((acc, cur) => Math.max(acc, cur.length), 0);
250+
for (const key of keys) {
251+
const tr = document.createElement("tr");
252+
const td = document.createElement("td");
253+
insts.append(tr);
254+
tr.append(td);
255+
td.textContent = "." + key + " ".repeat(spaces - key.length + 3) + I18n.directives[key]();
256+
}
257+
riscvBody.append(heightLimitTable);
258+
heightLimitTable.append(insts);
259+
};
260+
261+
inst.click();
262+
263+
body.append(riscvButtons, riscvBody);
264+
};
265+
riscv.click();
266+
267+
tabs.append(riscv);
268+
const close = document.createElement("button");
269+
close.textContent = I18n.help.close();
270+
close.onclick = () => {
271+
menu.close();
272+
};
273+
menu.append(title, tabs, body, close);
274+
menu.setAttribute("closedBy", "any");
275+
menu.showModal();
276+
},
277+
);
278+
279+
const helpButton = document.createElement("button");
280+
helpButton.textContent = I18n.help.help();
281+
actionRow.append(helpButton);
282+
helpMenu.bindContextmenu(helpButton, undefined, undefined, true);
283+
143284
const area = document.getElementById("area") as HTMLElement;
144285
if (!area) throw Error("area not found");
145286
let editors: Editor[] = [];

‎src/webpage/style.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,23 @@ body {
2727
margin-bottom: 3px;
2828
}
2929
}
30+
.heightLimitTable{
31+
height: 60vh;
32+
width:80vw;
33+
overflow:auto;
34+
tr:first-child{
35+
position: relative !important;
36+
background:white !important;
37+
}
38+
td{
39+
white-space:pre;
40+
}
41+
}
42+
dialog{
43+
border:black solid 2px;
44+
border-radius:6px;
45+
background:#f6f6f6;
46+
}
3047
.fileList {
3148
padding: 2px;
3249
border: solid black 1px;

‎translations/en.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,15 @@
1313
"tools": "Tools",
1414
"help": "help"
1515
},
16+
"help":{
17+
"help":"Help",
18+
"webhelp":"Web RARS help",
19+
"dirs":"Directives",
20+
"riscv":"RISCV",
21+
"close":"Close",
22+
"basicInstructions":"Basic Instructions",
23+
"extInstructions":"Extended Instructions"
24+
},
1625
"run": {
1726
"run": "Run",
1827
"step": "Step",

0 commit comments

Comments
 (0)