Skip to content

Commit 2f0544f

Browse files
chrisledetchrisledet
committed
layout and input changes
- add button for keypad input - center content within 320px box - use flex box to layout items
1 parent 2346f7f commit 2f0544f

File tree

3 files changed

+130
-139
lines changed

3 files changed

+130
-139
lines changed

‎css/style.css

+59-66
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);
1+
/*@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);*/
22

33
body {
4-
margin: 0 auto;
5-
width: 700px;
6-
font-family: "Share Tech Mono";
4+
margin: 0;
5+
font-family: "Consolas", "Lucida Console", "Liberation Mono";
76
background: #262626;
87
color: #46FF00;
98
}
@@ -16,15 +15,54 @@ a:visited {
1615
color: #46FF00;
1716
}
1817

18+
.container {
19+
margin: 0 auto;
20+
width: 330px;
21+
display: flex;
22+
justify-content: center;
23+
flex-wrap: wrap;
24+
}
25+
26+
.container {
27+
display: flex;
28+
justify-content: center;
29+
flex-wrap: wrap;
30+
}
31+
1932
#display {
20-
width: 640px;
33+
width: 320px;
2134
height: 320px;
22-
display: block;
23-
padding-left: 0;
24-
padding-right: 0;
25-
margin-left: auto;
26-
margin-right: auto;
27-
margin-top: 3%;
35+
36+
background: #262626;
37+
border: 5px solid;
38+
padding: 5px;
39+
box-sizing: border-box;
40+
}
41+
42+
.storage {
43+
width: 315px;
44+
display: flex;
45+
justify-content: space-between;
46+
padding: 5px;
47+
}
48+
49+
.controls {
50+
width: 320px;
51+
display: flex;
52+
flex-wrap: wrap;
53+
justify-content: center;
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;
2866
}
2967

3068
.subtitle {
@@ -33,24 +71,18 @@ a:visited {
3371
font-weight: normal;
3472
}
3573

36-
.container {
37-
width: 700px;
38-
margin: 0 auto;
39-
background: #262626;
40-
border: 1px solid;
74+
#rom-selector {
75+
width: 160px;
76+
height: 32px;
4177
}
4278

43-
.controls {
44-
display: -webkit-box;
45-
display: -webkit-flex;
46-
display: -ms-flexbox;
47-
display: flex;
48-
-webkit-box-pack: justify;
49-
-webkit-justify-content: space-between;
50-
-ms-flex-pack: justify;
51-
justify-content: space-between;
52-
padding-top: 10px;
53-
width: 700px;
79+
#rom-uploader {
80+
display: none;
81+
}
82+
83+
uploader-label {
84+
cursor: pointer;
85+
5486
}
5587

5688
pre {
@@ -82,42 +114,3 @@ pre {
82114
.tweak-header {
83115
cursor: help;
84116
}
85-
86-
/*
87-
Credit Notice
88-
Button styles were originally written as "Simple Button Styles" by Simon Busborg: http://codepen.io/simonbusborg/pen/cyxad
89-
*/
90-
91-
.button {
92-
border: 0 none;
93-
border-radius: 36px;
94-
color: #fff;
95-
cursor: pointer;
96-
display: inline-block;
97-
font-size: 14px;
98-
padding: 12px 45px;
99-
text-transform: none;
100-
-webkit-transition: all 100ms ease-in-out;
101-
transition: all 100ms ease-in-out;
102-
width: auto;
103-
text-align: center;
104-
}
105-
106-
.button:hover {
107-
opacity: .7;
108-
}
109-
110-
.button.--light {
111-
background: #ecf0f1;
112-
color: #34495e;
113-
}
114-
115-
.button.--red {
116-
background: #e74c3c;
117-
color: #FFFFFF;
118-
}
119-
120-
.button.--green {
121-
background: #4ac15a;
122-
color: #FFFFFF;
123-
}

‎index.html

+63-66
Original file line numberDiff line numberDiff line change
@@ -6,74 +6,71 @@
66
<link rel="stylesheet" type="text/css" href="css/style.css">
77
</head>
88
<body>
9-
<h2>chip8.js <span class="subtitle">by <a href="https://chrisledet.com">Chris Ledet</a></span></h2>
109
<div class='container'>
11-
<canvas id="display" width="640px" height="320px"></canvas>
12-
</div>
13-
<div class="controls">
14-
<select id="rom-selector">
15-
<option>Select ROM</option>
16-
<option>15PUZZLE</option>
17-
<option>BLITZ</option>
18-
<option>BRIX</option>
19-
<option>CONNECT4</option>
20-
<option>GUESS</option>
21-
<option>HIDDEN</option>
22-
<option>INVADERS</option>
23-
<option>KALEID</option>
24-
<option>MAZE</option>
25-
<option>MERLIN</option>
26-
<option>MISSILE</option>
27-
<option>PONG</option>
28-
<option>PONG2</option>
29-
<option>PUZZLE</option>
30-
<option>SYZYGY</option>
31-
<option>TANK</option>
32-
<option>TETRIS</option>
33-
<option>TICTAC</option>
34-
<option>UFO</option>
35-
<option>VBRIX</option>
36-
<option>VERS</option>
37-
<option>WIPEOFF</option>
38-
</select>
39-
or
40-
Upload
41-
<input type="file" id="rom-uploader">
42-
<div class="button center --red" id="stop">Stop</div>
43-
<div class="button center --green" id="resume">Resume</div>
44-
</div>
45-
<div class="keybindings">
46-
<h3>Default keybindings</h3>
47-
<table>
48-
<tr>
49-
<td>1</td><td>2</td><td>3</td><td>4</td>
50-
</tr>
51-
<tr>
52-
<td>5(Q)</td><td>6(W)</td><td>7(E)</td><td>8(R)</td>
53-
</tr>
54-
<tr>
55-
<td>9(A)</td><td>A(S)</td><td>B(D)</td><td>C(F)</td>
56-
</tr>
57-
<tr>
58-
<td>D(Z)</td><td>E(X)</td><td>F(C)</td><td>0(V)</td>
59-
</tr>
60-
</table>
61-
</div>
62-
<div class="tweak">
63-
<h3 class="tweak-header" title="You can tweak the VM using the web console">Settings</h3>
64-
<p>
65-
<strong>Change frequency</strong> <i>(restart required)</i>
66-
<pre>
67-
// set to 1000Hz
68-
window.chip8vm.clockRate = 1000;</pre>
69-
</p>
10+
<div>
11+
<h2>chip8.js <span class="subtitle">by <a href="https://chrisledet.com">Chris Ledet</a></span></h2>
12+
</div>
13+
14+
<div class="storage">
15+
<select id="rom-selector">
16+
<option>Select ROM</option>
17+
<option>15PUZZLE</option>
18+
<option>BLITZ</option>
19+
<option>BRIX</option>
20+
<option>CONNECT4</option>
21+
<option>GUESS</option>
22+
<option>HIDDEN</option>
23+
<option>INVADERS</option>
24+
<option>KALEID</option>
25+
<option>MAZE</option>
26+
<option>MERLIN</option>
27+
<option>MISSILE</option>
28+
<option>PONG</option>
29+
<option>PONG2</option>
30+
<option>PUZZLE</option>
31+
<option>SYZYGY</option>
32+
<option>TANK</option>
33+
<option>TETRIS</option>
34+
<option>TICTAC</option>
35+
<option>UFO</option>
36+
<option>VBRIX</option>
37+
<option>VERS</option>
38+
<option>WIPEOFF</option>
39+
</select>
40+
41+
<div>
42+
<label class="uploader-label" for="rom-uploader">or Upload ROM</label>
43+
<input type="file" id="rom-uploader" name="rom-uploader">
44+
</div>
45+
</div>
46+
47+
<canvas id="display" width="320px" height="320px"></canvas>
48+
49+
<div class="controls">
50+
<div>
51+
<button class="button red" id="stop">Stop</button>
52+
<button class="button green" id="resume">Resume</button>
53+
</div>
7054

71-
<p>
72-
<strong>Add or update a keybinding</strong>
73-
<pre>
74-
// map "G" to 1
75-
window.chip8vm.keybindings[71] = 1;</pre>
76-
</p>
55+
<div class="keypad">
56+
<button data-input="0x1" class="key">1</button>
57+
<button data-input="0x2" class="key">2</button>
58+
<button data-input="0x3" class="key">3</button>
59+
<button data-input="0x4" class="key">4</button>
60+
<button data-input="0x5" class="key">5</button>
61+
<button data-input="0x6" class="key">6</button>
62+
<button data-input="0x7" class="key">7</button>
63+
<button data-input="0x8" class="key">8</button>
64+
<button data-input="0x9" class="key">9</button>
65+
<button data-input="0xA" class="key">A</button>
66+
<button data-input="0xB" class="key">B</button>
67+
<button data-input="0xC" class="key">C</button>
68+
<button data-input="0xD" class="key">D</button>
69+
<button data-input="0xE" class="key">E</button>
70+
<button data-input="0xF" class="key">F</button>
71+
<button data-input="0x10" class="key">0</button>
72+
</div>
73+
</div>
7774
</div>
7875
<script type="module" src="index.js"></script>
7976
</body>

‎index.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,19 @@ const resumeSwitch = document.getElementById("resume");
66
const uploader = document.getElementById("rom-uploader");
77
const romSelector = document.getElementById("rom-selector");
88
const stopSwitch = document.getElementById("stop");
9+
const keyButtons = document.getElementsByClassName("key")
10+
Array.from(keyButtons).forEach(b => {
11+
b.onclick = (e) => {
12+
const input = Number(e.target.dataset.input);
13+
if (!isNaN(input)) vm.setInput(input);
14+
}
15+
})
16+
917
// TODO: figure out audio sources
1018
// let audioSource from "../sounds/beep.wav";
1119

1220
const vm = new System(displaySource, null);
1321

14-
/* event handlers */
15-
document.onkeydown = e => {
16-
const input = vm.keybindings[e.keyCode] || 0;
17-
console.log("input", input);
18-
vm.setInput(input);
19-
};
20-
2122
resumeSwitch.onclick = () => {
2223
vm.start();
2324
};

0 commit comments

Comments
 (0)