Add per-round edit button to scoresheet

A ✎ button next to each round label opens the score entry form
pre-populated with that round's scores. Submitting replaces the round
in place instead of appending a new one.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.tsx

@@ -24,6 +24,7 @@ export default function App() {
   const [game, setGame] = useState<GameState | null>(loadGame)
   const [page, setPage] = useState<Page>(() => (game ? 'scoresheet' : 'title'))
   const [previousPlayers, setPreviousPlayers] = useState<string[] | undefined>(undefined)
+  const [editingRound, setEditingRound] = useState<number | null>(null)
 
   function handleNewGame() {
     setPreviousPlayers(game?.players)
@@ -39,15 +40,24 @@ export default function App() {
     setPage('scoresheet')
   }
 
+  function handleEditRound(i: number) {
+    setEditingRound(i)
+    setPage('enterscores')
+  }
+
   function handleSubmitScores(scores: number[]) {
-    const updated: GameState = { ...game!, rounds: [...game!.rounds, scores] }
+    const rounds = editingRound !== null
+      ? game!.rounds.map((r, i) => (i === editingRound ? scores : r))
+      : [...game!.rounds, scores]
+    const updated: GameState = { ...game!, rounds }
     saveGame(updated)
     setGame(updated)
+    setEditingRound(null)
     setPage('scoresheet')
   }
 
   if (page === 'title') return <TitleScreen onNewGame={handleNewGame} />
   if (page === 'setup') return <PlayerSetup onStart={handleStart} initialNames={previousPlayers} />
-  if (page === 'scoresheet') return <ScoreSheet game={game!} onScoreRound={() => setPage('enterscores')} onNewGame={handleNewGame} />
-  if (page === 'enterscores') return <EnterScores game={game!} onSubmit={handleSubmitScores} />
+  if (page === 'scoresheet') return <ScoreSheet game={game!} onScoreRound={() => setPage('enterscores')} onNewGame={handleNewGame} onEditRound={handleEditRound} />
+  if (page === 'enterscores') return <EnterScores game={game!} onSubmit={handleSubmitScores} initialValues={editingRound !== null ? game!.rounds[editingRound] : undefined} />
 }

src/pages/EnterScores.tsx

@@ -8,10 +8,13 @@ import styles from './EnterScores.module.css'
 interface Props {
   game: GameState
   onSubmit: (scores: number[]) => void
+  initialValues?: number[]
 }
 
-export default function EnterScores({ game, onSubmit }: Props) {
-  const [values, setValues] = useState<string[]>(() => game.players.map(() => ''))
+export default function EnterScores({ game, onSubmit, initialValues }: Props) {
+  const [values, setValues] = useState<string[]>(() =>
+    game.players.map((_, i) => initialValues ? String(initialValues[i]) : '')
+  )
 
   function updateValue(i: number, v: string) {
     setValues(vs => vs.map((val, idx) => (idx === i ? v : val)))

src/pages/ScoreSheet.module.css

@@ -28,6 +28,20 @@
   font-size: 0.75rem;
   color: #666;
   white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.editBtn {
+  background: none;
+  border: none;
+  padding: 0;
+  min-height: unset;
+  font-size: 0.85rem;
+  color: #aaa;
+  line-height: 1;
+  box-shadow: none;
 }
 
 .scoreCell {

src/pages/ScoreSheet.tsx

@@ -9,9 +9,10 @@ interface Props {
   game: GameState
   onScoreRound: () => void
   onNewGame: () => void
+  onEditRound: (i: number) => void
 }
 
-export default function ScoreSheet({ game, onScoreRound, onNewGame }: Props) {
+export default function ScoreSheet({ game, onScoreRound, onNewGame, onEditRound }: Props) {
   const [confirmingNewGame, setConfirmingNewGame] = useState(false)
 
   const totals = computeRunningTotals(game.rounds)
@@ -62,7 +63,10 @@ export default function ScoreSheet({ game, onScoreRound, onNewGame }: Props) {
 
           {game.rounds.map((roundScores, i) => (
             <Fragment key={i}>
-              <div className={styles.labelCell}>Round {i + 1}</div>
+              <div className={styles.labelCell}>
+                <button className={styles.editBtn} onClick={() => onEditRound(i)}>✎</button>
+                Round {i + 1}
+              </div>
               {roundScores.map((score, j) => (
                 <div key={j} className={styles.scoreCell + (j === winnerIndex ? ' ' + styles.winnerCell : '')}>{score}</div>
               ))}