Skip to content

Commit a933a9b

Browse files
chrisledetchrisledet
committed
improve page load and cleaned up code
- move util functions into the only places that invoke them - embed stylesheet on HTML page - convert rom loading into function from class - reduce function body clutter overall
1 parent 2f0544f commit a933a9b

File tree

7 files changed

+157
-207
lines changed

7 files changed

+157
-207
lines changed

‎css/style.css

-116
This file was deleted.

‎index.html

+111-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,117 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>chip8.js</title>
6-
<link rel="stylesheet" type="text/css" href="css/style.css">
6+
<style type="text/css">
7+
body {
8+
margin: 0;
9+
font-family: "Consolas", "Lucida Console", "Liberation Mono", Monospace, Courier;
10+
background: #262626;
11+
color: #46FF00;
12+
}
13+
14+
a {
15+
color: #46FF00;
16+
}
17+
18+
a:visited {
19+
color: #46FF00;
20+
}
21+
22+
.container {
23+
margin: 0 auto;
24+
width: 330px;
25+
display: flex;
26+
justify-content: center;
27+
flex-wrap: wrap;
28+
}
29+
30+
#display {
31+
width: 320px;
32+
height: 320px;
33+
34+
background: #262626;
35+
border: 5px solid;
36+
padding: 5px;
37+
box-sizing: border-box;
38+
}
39+
40+
.storage {
41+
width: 315px;
42+
display: flex;
43+
justify-content: space-between;
44+
padding: 5px;
45+
}
46+
47+
.controls {
48+
width: 320px;
49+
display: flex;
50+
flex-wrap: wrap;
51+
justify-content: center;
52+
box-sizing: border-box;
53+
padding: 10px;
54+
}
55+
56+
.keypad {
57+
display: flex;
58+
flex-wrap: wrap;
59+
justify-content: space-between;
60+
}
61+
62+
.key {
63+
width: 90px;
64+
padding: 5px;
65+
margin: 5px 5px;
66+
}
67+
68+
.subtitle {
69+
font-size: 13px;
70+
font-style: normal;
71+
font-weight: normal;
72+
}
73+
74+
#rom-selector {
75+
width: 160px;
76+
height: 32px;
77+
}
78+
79+
#rom-uploader {
80+
display: none;
81+
}
82+
83+
uploader-label {
84+
cursor: pointer;
85+
}
86+
87+
pre {
88+
margin: 5px 0;
89+
padding: 10px;
90+
white-space: pre-wrap;
91+
display: block;
92+
border: 1px solid;
93+
font-family: "Share Tech Mono";
94+
}
95+
96+
.keybindings {
97+
display: inline-block;
98+
width: 200px;
99+
float: left;
100+
}
101+
102+
.keybindings table tr td {
103+
padding: 14px 14px;
104+
border: 1px solid;
105+
}
106+
107+
.tweak {
108+
display: inline-block;
109+
width: 375px;
110+
float: right;
111+
}
112+
113+
.tweak-header {
114+
cursor: help;
115+
}
116+
</style>
7117
</head>
8118
<body>
9119
<div class='container'>

‎index.js

+19-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import System from "./js/System.js";
2-
import RomLoader from "./js/RomLoader.js";
32

3+
// gather all the DOM objects
44
const displaySource = document.getElementById("display");
55
const resumeSwitch = document.getElementById("resume");
66
const uploader = document.getElementById("rom-uploader");
@@ -14,37 +14,41 @@ Array.from(keyButtons).forEach(b => {
1414
}
1515
})
1616

17+
18+
// set up virtual machine
1719
// TODO: figure out audio sources
1820
// let audioSource from "../sounds/beep.wav";
19-
2021
const vm = new System(displaySource, null);
22+
const readROMFile = (file, callback) => {
23+
let reader = new FileReader();
2124

22-
resumeSwitch.onclick = () => {
23-
vm.start();
24-
};
25+
reader.onload = (e) => {
26+
let buffer = e.target.result;
27+
let romData = new Uint8Array(buffer);
28+
callback(romData);
29+
};
2530

26-
stopSwitch.onclick = () => {
27-
vm.stop();
28-
};
31+
reader.readAsArrayBuffer(file);
32+
}
33+
34+
// set up DOM events and listeners
35+
resumeSwitch.onclick = () => vm.start();
36+
stopSwitch.onclick = () => vm.stop();
2937

3038
uploader.onchange = (e) => {
3139
if (e.target.files.length < 1) { return; }
3240
const romFile = e.target.files[0];
33-
new RomLoader(romFile, (rom) => {
34-
vm.boot(rom);
35-
});
41+
readROMFile(romFile, (rom) => vm.boot(rom));
3642
};
3743

38-
romSelector.onchange = (e) => {
44+
romSelector.onchange = (e) => {
3945
if (e.target.value === "Select ROM") { return; }
4046
const romName = e.target.value;
4147

4248
fetch("./roms/" + romName)
4349
.then(r => r.blob())
4450
.then((blob) => {
45-
new RomLoader(blob, (rom) => {
46-
vm.boot(rom);
47-
});
51+
readROMFile(blob, (rom) => { vm.boot(rom); });
4852
});
4953
};
5054

‎js/CPU.js

+16-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
1-
import Util from "./Util.js";
1+
const rnd = () => Math.floor(Math.random() * (0xFF - 0x0)) + 0x0;
2+
3+
const byteToSwitch = (b) => {
4+
return [
5+
(b & 0x80) == 0x80,
6+
(b & 0x40) == 0x40,
7+
(b & 0x20) == 0x20,
8+
(b & 0x10) == 0x10,
9+
(b & 0x08) == 0x08,
10+
(b & 0x04) == 0x04,
11+
(b & 0x02) == 0x02,
12+
(b & 0x01) == 0x01
13+
];
14+
}
215

316
export default class CPU {
417
constructor(display, audio) {
@@ -253,7 +266,7 @@ export default class CPU {
253266
break;
254267
case 0xC:
255268
// Sets VX to the result of a bitwise and operation on a random number and NN.
256-
this.v[x] = Util.rnd() & nn;
269+
this.v[x] = rnd() & nn;
257270
break;
258271
case 0xD:
259272
// Draw a sprite at position VX, VY with N bytes of sprite data starting at the address stored in I
@@ -266,7 +279,7 @@ export default class CPU {
266279
// what sprite are we looking for
267280
let sprite = this.memory[this.i + spriteIndex];
268281
// convert sprite opscode into switches
269-
let spritePixelStates = Util.byteToSwitch(sprite);
282+
let spritePixelStates = byteToSwitch(sprite);
270283

271284
this.v[0xF] = 0;
272285

‎js/RomLoader.js

-20
This file was deleted.

0 commit comments

Comments
 (0)