Skip to content

Commit c7cbd34

Browse files
maxpoletaevmaxpoletaev
committed
UI mprovements
1 parent 6615b80 commit c7cbd34

File tree

3 files changed

+56
-56
lines changed

3 files changed

+56
-56
lines changed

‎cmd/dendy-wasm/main.go‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ func main() {
4343

4444
for {
4545
nes.Tick()
46-
4746
if nes.FrameReady() {
4847
frame := nes.Frame()
4948
frameBytes := unsafe.Slice((*byte)(unsafe.Pointer(&frame[0])), len(frame)*4)

‎web/index.html‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -10,49 +10,51 @@
1010
</head>
1111
<body>
1212

13-
<div class="container">
14-
<div class="header">
15-
<h1>NES Emulator</h1>
16-
</div>
17-
18-
<div class="game-section">
19-
<div class="game-window">
20-
<canvas id="canvas"></canvas>
21-
</div>
22-
</div>
23-
24-
<div class="info-section">
25-
<div class="rom-upload">
26-
Select ROM: <input type="file" id="file-input" accept=".nes">
13+
<div class="container">
14+
<div class="game-section">
15+
<div class="game-window">
16+
<canvas id="canvas"></canvas>
17+
</div>
2718
</div>
2819

29-
<div class="controls-grid">
30-
<div class="control-item">
31-
<span class="control-key">WASD</span>
32-
<span class="control-action">D-Pad</span>
33-
</div>
34-
<div class="control-item">
35-
<span class="control-key">J</span>
36-
<span class="control-action">A Button</span>
20+
<div class="info-section">
21+
<div class="rom-upload">
22+
Select ROM: <input type="file" id="file-input" accept=".nes">
3723
</div>
38-
<div class="control-item">
39-
<span class="control-key">K</span>
40-
<span class="control-action">B Button</span>
41-
</div>
42-
<div class="control-item">
43-
<span class="control-key">Enter</span>
44-
<span class="control-action">Start</span>
45-
</div>
46-
<div class="control-item">
47-
<span class="control-key">Right Shift</span>
48-
<span class="control-action">Select</span>
49-
</div>
50-
<div class="control-item">
51-
<span class="control-key">⌘+R</span>
52-
<span class="control-action">Reset</span>
24+
25+
<div class="controls-grid">
26+
<div class="control-item">
27+
<span class="control-key">WASD</span>
28+
<span class="control-action">D-Pad</span>
29+
</div>
30+
<div class="control-item">
31+
<span class="control-key">J</span>
32+
<span class="control-action">B Button</span>
33+
</div>
34+
<div class="control-item">
35+
<span class="control-key">K</span>
36+
<span class="control-action">A Button</span>
37+
</div>
38+
<div class="control-item">
39+
<span class="control-key">Enter</span>
40+
<span class="control-action">Start</span>
41+
</div>
42+
<div class="control-item">
43+
<span class="control-key">Right Shift</span>
44+
<span class="control-action">Select</span>
45+
</div>
46+
<div class="control-item">
47+
<span class="control-key">⌘+R</span>
48+
<span class="control-action">Reset</span>
49+
</div>
5350
</div>
5451
</div>
52+
53+
<div class="source-link">
54+
<a href="https://github.com/maxpoletaev/dendy" target="_blank">https://github.com/maxpoletaev/dendy</a>
55+
</div>
5556
</div>
56-
</div>
57+
58+
<img src="https://mxp.goatcounter.com/count?p=/dendy" alt="" width="1" height="1">
5759
</body>
58-
</html>
60+
</html>

‎web/style.css‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ body {
22
margin: 0;
33
padding: 10px;
44
min-height: 100vh;
5-
background-color: #333;
5+
background-color: #49414b;
66
color: #2d3748;
77
display: flex;
88
justify-content: center;
@@ -39,6 +39,11 @@ body {
3939
width: 100%;
4040
}
4141

42+
.game-window {
43+
height: 480px;
44+
border-bottom: 2px solid #2d3748;
45+
}
46+
4247
.game-window canvas {
4348
display: block;
4449
}
@@ -67,7 +72,6 @@ body {
6772
display: grid;
6873
grid-template-columns: repeat(3, 1fr);
6974
gap: 10px;
70-
margin-bottom: 20px;
7175
}
7276

7377
.control-item {
@@ -122,18 +126,13 @@ body {
122126
color: #e53e3e;
123127
}
124128

125-
@media (max-width: 640px) {
126-
.container {
127-
width: 100%;
128-
margin: 10px;
129-
border-radius: 8px;
130-
}
131-
132-
.controls-grid {
133-
grid-template-columns: repeat(2, 1fr);
134-
}
129+
.source-link {
130+
position: relative;
131+
text-align: center;
132+
margin-bottom: 20px;
133+
font-size: 0.9em;
134+
}
135135

136-
.features {
137-
grid-template-columns: 1fr;
138-
}
139-
}
136+
.source-link a {
137+
color: #4a5568;
138+
}

0 commit comments

Comments
 (0)