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:
+21
-3
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user