Skip to content

Commit a80dfc1

Browse files
winstliuwinstliu
committed
Use modern CSS rather than nested tables
This raises the browser requirement to: - Firefox 52 (March 2017) - Chrome 57 (March 2017) - Edge 16 (October 2017) - Safari 10.1 (March 2017)
1 parent b420a18 commit a80dfc1

File tree

3 files changed

+126
-122
lines changed

3 files changed

+126
-122
lines changed

‎ibcm/ibcm.css

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,64 @@
44
/* Created Day 01.12.2006 */
55
/* ======================================================== */
66

7+
* {
8+
box-sizing: border-box;
9+
}
10+
11+
.grid {
12+
display: grid;
13+
grid-template-columns: 1fr 1fr;
14+
row-gap: 1rem;
15+
}
16+
17+
.grid .settings {
18+
grid-column: 1 / 3;
19+
}
20+
21+
.controls .internal {
22+
position: sticky;
23+
top: 1rem;
24+
}
25+
26+
.divider {
27+
margin: 1.5rem 0;
28+
}
29+
30+
.input-group {
31+
display: grid;
32+
margin-bottom: 1.5rem;
33+
grid-template-columns: 1fr 1fr;
34+
}
35+
36+
.input-group label {
37+
text-align: right;
38+
margin-right: 0.5rem;
39+
}
40+
41+
.control-grid {
42+
display: flex;
43+
flex-direction: row;
44+
justify-content: center;
45+
}
46+
47+
.control-grid button {
48+
margin: 0 0.25rem;
49+
}
50+
51+
.output-group {
52+
text-align: center;
53+
}
54+
55+
.output-group label {
56+
display: inline-block;
57+
margin-bottom: 0.5rem;
58+
}
59+
760
body {
861
margin: 0px;
962
background: url(img/top_bg.gif);
1063
background-repeat: repeat-x;
1164
font-family: Verdana, Arial, sans-serif;
12-
font-size: .6em;
1365
}
1466

1567
p {

‎ibcm/simulator.html

Lines changed: 68 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -29,128 +29,80 @@ <h2><a href="./index.html" title="Back to main page">IBCM Interface</a></h2>
2929
</div> <!-- id="top" -->
3030

3131
<!-- Main Content Container -->
32-
<div id="content2">
32+
<div>
3333
<p class="center"><a href="directions.html">Directions for how to use this simulator</a> are available.</p>
34-
<table border="7" cellpadding="10">
35-
<!-- Browse section -->
36-
<tr>
37-
<td colspan="2" align="center">
38-
<p class="center">
39-
Load IBCM file:
40-
<input type="file" name="userfile" id="userfile" />
41-
</p>
42-
<p class="center danger" id="error">
43-
</p>
44-
<p class="center">
45-
Load all of memory:
46-
<input type="checkbox" id="loadmem" name="loadmem">
47-
(leave unchecked if unsure)
48-
</p>
49-
<p class="center">
50-
Enable watchdog timer:
51-
<input type="checkbox" id="watchtimer" name="watchtimer">
52-
(check to guard against infinite loops)
53-
</p>
54-
<p id="watchwarning" class="center danger"></p>
55-
</td>
56-
</tr>
57-
58-
<!-- Mem Table -->
59-
<tr>
60-
<td>
61-
<div id="tabletitle">
62-
<table border="7" width="300">
63-
<tr>
64-
<th>Mem</th>
65-
<th>Value</th>
66-
<th>PC</th>
67-
</tr>
68-
</table>
69-
</div>
70-
<div id="tbl-container">
71-
<div id="memtable"></div>
72-
</div> <!-- id="tbl-container" -->
73-
</td>
74-
75-
<!-- Accum and Input Section -->
76-
<td valign="top">
77-
78-
<table border=0>
79-
<tr>
80-
<td>
81-
<p class="righttitle">Accumulator (hex): </p>
82-
</td>
83-
<td>&nbsp;<input name="accum" id="accum" type="text" value="0000" readonly="readonly"/></td>
84-
</tr>
85-
<tr>
86-
<td>&nbsp;</td>
87-
<td>&nbsp;</td>
88-
</tr>
89-
<tr>
90-
<td>
91-
<p class="righttitle">PC (hex): </p>
92-
</td>
93-
<td>&nbsp;<input name="pc" id="pc" type="text" value="0000" readonly="readonly"/></td>
94-
</tr>
95-
<tr>
96-
<td>&nbsp;</td>
97-
<td>&nbsp;</td>
98-
</tr>
99-
<tr>
100-
<td>
101-
<p class="righttitle">
102-
<div id="bptitle">Breakpoint (4 digits): </div>
103-
</p>
104-
</td>
105-
<td>&nbsp;<input name="breakpoint" id="breakpoint" type="text" value="" /></td>
106-
</tr>
107-
<tr>
108-
<td>&nbsp;</td>
109-
<td>&nbsp;</td>
110-
</tr>
34+
<div class="grid">
35+
<div class="settings">
36+
<p class="center">
37+
Load IBCM file:
38+
<input type="file" id="userfile" />
39+
</p>
40+
<p class="center danger" id="error">
41+
</p>
42+
<p class="center">
43+
Load all of memory:
44+
<input type="checkbox" id="loadmem">
45+
(leave unchecked if unsure)
46+
</p>
47+
<p class="center">
48+
Enable watchdog timer:
49+
<input type="checkbox" id="watchtimer">
50+
(check to guard against infinite loops)
51+
</p>
52+
<p id="watchwarning" class="center danger"></p>
53+
</div>
54+
<div class="table">
55+
<table border="7" width="300" id="instructionsTable">
56+
<thead>
11157
<tr>
112-
<td>
113-
<p class="righttitle">
114-
<div id="inputtitle">Input: </div>
115-
</p>
116-
</td>
117-
<td>&nbsp;<input name="input" id="input" type="text" value="0" /></td>
58+
<th>Mem</th>
59+
<th>Value</th>
60+
<th>PC</th>
11861
</tr>
119-
</table>
120-
121-
<p>&nbsp;</p><hr /><p>&nbsp;</p>
122-
123-
<table border="5" cellpadding="25">
124-
<tr>
125-
<td><input name="Runner" type="button" value="Run" onclick='run_simulator()'/></td>
126-
<td><input name="Stepper" type="button" value="Step" onclick="step_simulator()" /></td>
127-
</tr>
128-
<tr>
129-
<td><input name="Resetter" type="button" value="Reset" onclick="reset()" /></td>
130-
<td><input name="Reverter" type="button" value="Revert" onclick="revert()" /></td>
131-
</tr>
132-
</table>
133-
134-
<p>&nbsp;</p>
135-
136-
<hr />
137-
138-
<p>&nbsp;</p>
139-
140-
<!-- Display Section -->
141-
<p class="center">Output</p>
142-
<textarea name="output" id="output" cols="40" rows="15" readonly="readonly"></textarea>
143-
144-
<!-- Separation Divider -->
145-
<div id="clear"></div>
146-
</td>
147-
</tr>
148-
</table>
149-
</div> <!-- id="content2" -->
62+
</thead>
63+
<tbody>
64+
</tbody>
65+
</table>
66+
</div>
67+
<div class="controls">
68+
<div class="internal">
69+
<div>
70+
<div class="input-group">
71+
<label for="accum">Accumulator (hex):</label>
72+
<input id="accum" type="text" value="0000" readonly="readonly"/>
73+
</div>
74+
<div class="input-group">
75+
<label for="pc">PC (hex):</label>
76+
<input id="pc" type="text" value="0000" readonly="readonly"/>
77+
</div>
78+
<div class="input-group">
79+
<label id="bptitle" for="breakpoint">Breakpoint (4 digits):</label>
80+
<input id="breakpoint" type="text" value="" />
81+
</div>
82+
<div class="input-group">
83+
<label id="inputtitle" for="input">Input:</label>
84+
<input id="input" type="text" value="0" />
85+
</div>
86+
</div>
87+
<hr class="divider">
88+
<div class="control-grid">
89+
<button onclick="run_simulator()">Run</button>
90+
<button onclick="step_simulator()">Step</button>
91+
<button onclick="reset()">Reset</button>
92+
<button onclick="revert()">Revert</button>
93+
</div>
94+
<hr class="divider">
95+
<div class="output-group">
96+
<label for="output">Output</label>
97+
<textarea id="output" cols="40" rows="15" readonly="readonly"></textarea>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
150103

151104
<!-- Footer -->
152105
<div id="footer"></div>
153-
154106
</div> <!-- id="wrap" -->
155107

156108
<script src="simulator.js"></script>

‎ibcm/simulator.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const INSTRUCTION_REGEX = /[a-fA-F0-9]{4}/;
22
const WATCHDOG_MAX_LIMIT = 10000;
33

4-
const instructions = [];
4+
let instructions = [];
55

66
let pc = "0000";
77
let pchexbak = "0000";
@@ -35,6 +35,8 @@ function readIBCMFile(event) {
3535
}
3636

3737
function processIBCMFile(text) {
38+
instructions = []; // Reset instructions array
39+
3840
const lines = text.split(/\r?\n/) // Split on newlines
3941
let currentLine = 0; // Zero-indexed indicator of which line we are parsing
4042
for (let line of lines) {
@@ -67,15 +69,13 @@ function processIBCMFile(text) {
6769
}
6870

6971
function create_ibcm_memory_table() {
70-
let str = "<table id=\"tbl\" BORDER=\"7\" width=\"98%\">\n";
7172
const top = loadmemInput.checked ? 4096 : 100;
7273

7374
for (let i = 0; i < top; i++) {
7475
const divname = i.toString(16).padStart(4, '0');
75-
str += "<tr><td>" + divname + "</td><td><input type=\"text\" id=\"v" + divname + "\" class=\"address\" size=5></td><td><div id=\"pc" + divname + "\"></div></td></tr>\n";
76+
const elem = "<tr><td>" + divname + "</td><td><input type=\"text\" id=\"v" + divname + "\" class=\"address\" size=5></td><td><div id=\"pc" + divname + "\"></div></td></tr>";
77+
document.getElementById("instructionsTable").getElementsByTagName('tbody')[0].innerHTML += elem;
7678
}
77-
str += "</table>";
78-
document.getElementById("memtable").innerHTML = str;
7979
}
8080

8181
function init() {

0 commit comments

Comments
 (0)