Skip to content

Commit 2a8c072

Browse files
matheussiqueira-devmatheussiqueira-dev
committed
Revamp UI and optimize simulation
1 parent c465048 commit 2a8c072

File tree

5 files changed

+851
-217
lines changed

5 files changed

+851
-217
lines changed

‎controls.js‎

Lines changed: 23 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,42 @@
1-
class Controls{
2-
constructor(type){
3-
this.forward=false;
4-
this.left=false;
5-
this.right=false;
6-
this.reverse=false;
1+
class Controls {
2+
constructor(type) {
3+
this.forward = false;
4+
this.left = false;
5+
this.right = false;
6+
this.reverse = false;
77

8-
switch(type){
8+
switch (type) {
99
case "KEYS":
1010
this.#addKeyboardListeners();
1111
break;
1212
case "DUMMY":
13-
this.forward=true;
13+
this.forward = true;
1414
break;
1515
}
1616
}
1717

18-
#addKeyboardListeners(){
19-
document.onkeydown=(event)=>{
20-
switch(event.key){
18+
#addKeyboardListeners() {
19+
const updateKey = (event, isDown) => {
20+
switch (event.key) {
2121
case "ArrowLeft":
22-
this.left=true;
22+
this.left = isDown;
2323
break;
2424
case "ArrowRight":
25-
this.right=true;
25+
this.right = isDown;
2626
break;
2727
case "ArrowUp":
28-
this.forward=true;
28+
this.forward = isDown;
2929
break;
3030
case "ArrowDown":
31-
this.reverse=true;
31+
this.reverse = isDown;
3232
break;
33+
default:
34+
return;
3335
}
34-
}
35-
document.onkeyup=(event)=>{
36-
switch(event.key){
37-
case "ArrowLeft":
38-
this.left=false;
39-
break;
40-
case "ArrowRight":
41-
this.right=false;
42-
break;
43-
case "ArrowUp":
44-
this.forward=false;
45-
break;
46-
case "ArrowDown":
47-
this.reverse=false;
48-
break;
49-
}
50-
}
36+
event.preventDefault();
37+
};
38+
39+
window.addEventListener("keydown", (event) => updateKey(event, true));
40+
window.addEventListener("keyup", (event) => updateKey(event, false));
5141
}
52-
}
42+
}

‎index.html‎

Lines changed: 110 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,124 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="pt-BR">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Self-driving Car - Neural Evolution</title>
6+
<title>Neural Drive Lab | Self-Driving Car</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
79
<link rel="stylesheet" href="style.css">
810
</head>
911
<body>
10-
<div id="app-container">
11-
<canvas id="carCanvas"></canvas>
12-
13-
<div id="controlPanel">
14-
<h2>🚗 Neural Drive</h2>
15-
16-
<div class="stat-item">
17-
<div class="stat-label">Generation</div>
18-
<div class="stat-value" id="generation">1</div>
12+
<main class="app-shell">
13+
<section id="controlPanel" class="panel" aria-label="Painel de controle">
14+
<div class="panel-header">
15+
<span class="eyebrow">Autonomous Lab</span>
16+
<h1>Neural Drive</h1>
17+
<p class="panel-subtitle">Simulação evolutiva em tempo real.</p>
18+
<div class="chip-row">
19+
<span class="chip">Neuroevolution</span>
20+
<span class="chip">Canvas 2D</span>
21+
</div>
1922
</div>
20-
21-
<div class="stat-item">
22-
<div class="stat-label">Population</div>
23-
<div class="stat-value" id="population">100</div>
23+
24+
<div class="stats-grid" aria-live="polite">
25+
<div class="stat-item">
26+
<span class="stat-label">Geração</span>
27+
<span class="stat-value" id="generation">1</span>
28+
</div>
29+
30+
<div class="stat-item">
31+
<span class="stat-label">População</span>
32+
<span class="stat-value" id="population">100</span>
33+
</div>
34+
35+
<div class="stat-item emphasis">
36+
<span class="stat-label">Melhor distância</span>
37+
<div class="stat-inline">
38+
<span class="stat-value" id="bestDistance">0</span>
39+
<span class="stat-unit">m</span>
40+
</div>
41+
</div>
42+
43+
<div class="stat-item">
44+
<span class="stat-label">Carros ativos</span>
45+
<span class="stat-value" id="aliveCars">100</span>
46+
</div>
47+
48+
<div class="stat-item">
49+
<span class="stat-label">FPS</span>
50+
<span class="stat-value" id="fps">60</span>
51+
</div>
52+
53+
<div class="stat-item">
54+
<span class="stat-label">Velocidade</span>
55+
<span class="stat-value" id="simSpeed">1x</span>
56+
</div>
2457
</div>
25-
26-
<div class="stat-item">
27-
<div class="stat-label">Best Distance</div>
28-
<div class="stat-value" id="bestDistance">0</div>
29-
<span class="info-badge">meters</span>
58+
59+
<div class="controls-group">
60+
<div class="control-row toggles">
61+
<label class="toggle">
62+
<input type="checkbox" id="toggleSensors" checked>
63+
<span>Mostrar sensores</span>
64+
</label>
65+
<label class="toggle">
66+
<input type="checkbox" id="toggleGhosts" checked>
67+
<span>Mostrar frota</span>
68+
</label>
69+
<label class="toggle">
70+
<input type="checkbox" id="toggleNetwork" checked>
71+
<span>Mostrar rede</span>
72+
</label>
73+
</div>
74+
75+
<div class="control-row">
76+
<label for="speedSelect">Ritmo da simulação</label>
77+
<div class="select">
78+
<select id="speedSelect">
79+
<option value="1" selected>1x (Real)</option>
80+
<option value="2">2x</option>
81+
<option value="4">4x</option>
82+
</select>
83+
</div>
84+
</div>
3085
</div>
31-
32-
<div class="stat-item">
33-
<div class="stat-label">Alive Cars</div>
34-
<div class="stat-value" id="aliveCars">100</div>
35-
</div>
36-
86+
3787
<div class="button-group">
38-
<button class="primary" onclick="save()">💾 Save Best Brain</button>
39-
<button class="secondary" onclick="resetGeneration()">🔄 Reset Generation</button>
40-
<button class="danger" onclick="discard()">🗑️ Delete Saved</button>
88+
<button class="primary" id="saveBrain" type="button">Salvar melhor cérebro</button>
89+
<button class="secondary" id="resetGeneration" type="button">Nova geração</button>
90+
<button class="ghost" id="pauseResume" type="button">Pausar</button>
91+
<button class="danger" id="discardBrain" type="button">Excluir salvo</button>
92+
</div>
93+
94+
<div class="panel-footer">
95+
<span class="status-dot" id="statusDot" data-state="running"></span>
96+
<span id="simStatus">Simulação ativa</span>
97+
</div>
98+
</section>
99+
100+
<section class="canvas-card" data-surface="road">
101+
<div class="canvas-header">
102+
<div>
103+
<p class="canvas-title">Road View</p>
104+
<p class="canvas-subtitle">Foco no melhor carro</p>
105+
</div>
106+
<span class="badge" id="roadBadge">Live</span>
107+
</div>
108+
<canvas id="carCanvas" aria-label="Simulação da pista"></canvas>
109+
</section>
110+
111+
<section class="canvas-card" data-surface="network">
112+
<div class="canvas-header">
113+
<div>
114+
<p class="canvas-title">Neural Map</p>
115+
<p class="canvas-subtitle">Pesos e ativações</p>
116+
</div>
117+
<span class="badge" id="networkBadge">Live</span>
41118
</div>
42-
</div>
43-
44-
<canvas id="networkCanvas"></canvas>
45-
</div>
119+
<canvas id="networkCanvas" aria-label="Visualização da rede neural"></canvas>
120+
</section>
121+
</main>
46122

47123
<script src="visualizer.js"></script>
48124
<script src="network.js"></script>
@@ -53,4 +129,4 @@ <h2>🚗 Neural Drive</h2>
53129
<script src="car.js"></script>
54130
<script src="main.js"></script>
55131
</body>
56-
</html>
132+
</html>

0 commit comments

Comments
 (0)