Don't count the last game round as a skip

Author: miorel

src/App.tsx

@@ -80,9 +80,12 @@ export default function App() {
     case "post-game": {
       const wordsGuessed = countIf(
         state.finishedRounds,
-        (round) => round.didGuess,
+        (round) => round.status === "guessed",
+      );
+      const wordsSkipped = countIf(
+        state.finishedRounds,
+        (round) => round.status === "skipped",
       );
-      const wordsSkipped = state.finishedRounds.length - wordsGuessed;
 
       return (
         <Container finishedRounds={state.finishedRounds}>

src/Rounds.tsx

@@ -12,11 +12,17 @@ type Props = {
 export default function Rounds({ currentRound, finishedRounds }: Props) {
   return (
     <div className={`${styles.container} centered-container flex-col`}>
-      {finishedRounds.map(({ wordUnscrambled: word, didGuess }, index) => (
+      {finishedRounds.map(({ wordUnscrambled: word, status }, index) => (
         <Word
           key={index}
           word={word}
-          color={didGuess ? "positive" : "negative"}
+          color={
+            status === "guessed"
+              ? "positive"
+              : status === "skipped"
+                ? "negative"
+                : undefined
+          }
         />
       ))}
       {currentRound && <Word word={currentRound.wordScrambled} />}

src/hooks/useAppState.ts

@@ -7,7 +7,7 @@ import scrambleString from "../util/scrambleString";
 export type Round = Readonly<{
   wordUnscrambled: string;
   wordScrambled: string;
-  didGuess: boolean;
+  status?: "guessed" | "skipped";
 }>;
 
 function getNewRound(
@@ -21,7 +21,6 @@ function getNewRound(
       return {
         wordUnscrambled: word,
         wordScrambled: scrambleString(word, bannedWords),
-        didGuess: false,
       };
     } catch {
       console.warn("Struggled to scramble " + word);
@@ -59,7 +58,9 @@ function getNewRoundState(state: InGameState, didGuess: boolean): InGameState {
     currentRound: getNewRound(state.wordPack, state.bannedWords),
     finishedRounds: [
       ...state.finishedRounds,
-      didGuess ? { ...state.currentRound, didGuess: true } : state.currentRound,
+      didGuess
+        ? { ...state.currentRound, status: didGuess ? "guessed" : "skipped" }
+        : state.currentRound,
     ],
     guess: "",
   };