feat: implement complete score tracking system

- Track score (starts at 0)
- +1 score and +1 correct for each correct character typed
- -1 score and +1 missed for each wrong character typed
- +1 deaths for each collision with ship
- Score resets when game starts
- All metrics exposed through ScoreManager
- Updated example app UI with colorful scoreboard showing:
  - Time (gray)
  - Score (neutral)
  - Correct (green)
  - Missed (yellow)
  - Deaths (red)
  - Keystrokes (neutral)
- Uses grid layout for organized metric display
- Score cannot go below 0 (clamped to minimum)
This commit is contained in:
2025-11-03 23:04:26 +00:00
parent 08c2d40d23
commit 7ee42a8dc1
6 changed files with 74 additions and 8 deletions
+21 -3
View File
@@ -17,12 +17,30 @@ function App() {
<div className="relative mx-auto my-4 w-fit space-y-4">
<h1 className="text-2xl font-bold text-center">Typing Chud</h1>
<div className="flex gap-4 justify-center text-sm font-mono">
<div className="grid grid-cols-6 gap-2 justify-center text-sm font-mono">
<div className="px-3 py-1 bg-muted rounded">
Time: {formatTime(scoreManager.timeValue)}
<div className="text-xs text-muted-foreground">Time</div>
<div className="font-bold">{formatTime(scoreManager.timeValue)}</div>
</div>
<div className="px-3 py-1 bg-muted rounded">
Keystrokes: {scoreManager.totalKeystrokes}
<div className="text-xs text-muted-foreground">Score</div>
<div className="font-bold">{scoreManager.score}</div>
</div>
<div className="px-3 py-1 bg-green-900 rounded">
<div className="text-xs text-green-200">Correct</div>
<div className="font-bold text-green-100">{scoreManager.correct}</div>
</div>
<div className="px-3 py-1 bg-yellow-900 rounded">
<div className="text-xs text-yellow-200">Missed</div>
<div className="font-bold text-yellow-100">{scoreManager.missed}</div>
</div>
<div className="px-3 py-1 bg-red-900 rounded">
<div className="text-xs text-red-200">Deaths</div>
<div className="font-bold text-red-100">{scoreManager.deaths}</div>
</div>
<div className="px-3 py-1 bg-muted rounded">
<div className="text-xs text-muted-foreground">Keystrokes</div>
<div className="font-bold">{scoreManager.totalKeystrokes}</div>
</div>
</div>