-
Notifications
You must be signed in to change notification settings - Fork 31
/
computer1.html
82 lines (81 loc) · 3.13 KB
/
computer1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
<title>Little Virtual Computer 1</title>
<style type="text/css">
body {
font-size: 12px;
font-family: sans-serif;
}
label {
display: block;
}
textarea {
display: block;
font-family: monospace;
}
#debugger.fullspeed, #debugger.fullspeed input, #debugger.fullspeed textarea {
background: #eee;
color: #999;
}
#debuggerMessageArea {
font-weight: bold;
}
#programMemoryView {
width: 350px;
border: solid 1px grey;
}
.tablerow {
font-family: monospace;
margin: 0;
}
</style>
</head>
<body>
<div style="background-color: #eee;padding: 1em;margin: 1em 0;font-size: 1.3em">
<h1 style="margin: 0.2em 0; font-weight: normal">Little Virtual Computer</h1>
This is a simple simulated computer. You can read the source code <a href="https://github.com/jsdf/little-virtual-computer/blob/master/computer1.js">here</a>. Click 'run/pause' to make it go, or load a different program with the program selector in the bottom left.
</div>
<div style="display: flex;">
<div style="width: 620px">
<div style="width: 600px; height: 600px">
<canvas id="canvas"></canvas>
</div>
<div style="margin-top: 10px">
<label>
program:
<select id="programSelector" onchange="SimulatorUI.selectProgram()"></select>
<button id="loadProgramButton" onclick="Simulation.loadProgramAndReset()">load program</button>
</label>
<textarea id="program" rows="10" cols="80" onchange="SimulatorUI.editProgramText()" onkeyup="SimulatorUI.editProgramText()" style="margin-top: 10px">
</textarea>
</div>
</div>
<div style="flex: 1">
<div style="height: 30px">
<button id="runButton" onclick="Simulation.runStop()">run/pause</button>
<button id="stepButton" onclick="Simulation.stepOnce()">step</button>
<button onclick="Simulation.loadProgramAndReset()">reset</button>
<span id="running"></span>
</div>
<label>slow-mo speed <input id="speed" type="range" min="-500" max="-1" value="-1" onchange="SimulatorUI.setSpeed()" /></label>
<label>full speed <input id="fullspeed" type="checkbox" checked onchange="SimulatorUI.setFullspeed()" /></label>
<div id="debugger" style="width: 400px">
<div id="debuggerMessageArea" style="height: 20px"></div>
<label>program counter <input id="programCounter" /></label>
working memory (slots 0 - 999):
<textarea id="workingMemoryView" readonly rows="10" cols="40"></textarea>
program memory (slots 1000 - 1999):
<div id="programMemoryView"></div>
input memory (slots 2000 - 2051):
<textarea id="inputMemoryView" readonly rows="8" cols="40"></textarea>
video memory (slots 2100 - 2999):
<textarea id="videoMemoryView" readonly rows="10" cols="40"></textarea>
audio memory (slots 3000 - 3000):
<textarea id="audioMemoryView" readonly rows="10" cols="40"></textarea>
</div>
</div>
</div>
<script type="text/javascript" src="./computer1.js"></script>
</body>
</html>