wpmx 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wpmx",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A minimal, fast typing test for the terminal",
   "type": "module",
   "bin": {

package/src/app.tsx

@@ -21,9 +21,8 @@ export type GameResults = {
 
 export function App() {
   const { exit } = useApp();
-  const settings = loadSettings();
   const [screen, setScreen] = useState<Screen>("menu");
-  const [duration, setDuration] = useState<Duration>(settings.lastDuration);
+  const [duration, setDuration] = useState<Duration>(() => loadSettings().lastDuration);
   const [results, setResults] = useState<GameResults | null>(null);
   const [gameKey, setGameKey] = useState(0);
 

package/src/components/Game.tsx

@@ -1,6 +1,33 @@
 import { Box, Text, useInput } from "ink";
 import { useGame, type GameResults } from "../hooks/useGame.ts";
-import { useEffect } from "react";
+import { memo, useEffect, useMemo } from "react";
+
+const PastWord = memo(({ word, inputChars }: { word: string; inputChars: string[] }) => (
+  <Box marginRight={1}>
+    {word.split("").map((char, charIndex) => {
+      const inputChar = inputChars[charIndex];
+      return (
+        <Text key={charIndex} color={inputChar === char ? "green" : "red"}>
+          {char}
+        </Text>
+      );
+    })}
+    {inputChars.length > word.length &&
+      inputChars
+        .slice(word.length)
+        .map((char, i) => (
+          <Text key={`extra-${i}`} color="red" strikethrough>
+            {char}
+          </Text>
+        ))}
+  </Box>
+));
+
+const FutureWord = memo(({ word }: { word: string }) => (
+  <Box marginRight={1}>
+    <Text dimColor>{word}</Text>
+  </Box>
+));
 
 type GameProps = {
   duration: number;
@@ -31,32 +58,22 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
 
     if (key.backspace || key.delete) {
       game.handleBackspace();
-    } else if (input === " ") {
-      game.handleSpace();
-    } else if (input && !key.ctrl && !key.meta && input.length === 1) {
-      game.handleChar(input);
+    } else if (input && !key.ctrl && !key.meta) {
+      for (const char of input) {
+        if (char === " ") {
+          game.handleSpace();
+        } else if (char >= "!" && char <= "~") {
+          game.handleChar(char);
+        }
+      }
     }
   });
 
-  const liveWpm = game.isRunning && !game.isFinished
-    ? Math.round(
-        (() => {
-          let correct = 0;
-          for (let i = 0; i < game.currentWordIndex; i++) {
-            const word = game.words[i];
-            const input = game.charInputs[i].join("");
-            if (input === word) correct += word.length + 1;
-            else {
-              for (let j = 0; j < word.length; j++) {
-                if (input[j] === word[j]) correct++;
-              }
-            }
-          }
-          const elapsed = (duration - game.timeLeft) || 1;
-          return (correct / 5) / (elapsed / 60);
-        })()
-      )
-    : 0;
+  const liveWpm = useMemo(() => {
+    if (!game.isRunning || game.isFinished) return 0;
+    const elapsed = (duration - game.timeLeft) || 1;
+    return Math.round((game.correctCharsAcc / 5) / (elapsed / 60));
+  }, [game.correctCharsAcc, game.timeLeft, game.isRunning, game.isFinished, duration]);
 
   return (
     <Box flexDirection="column" paddingX={2} paddingY={1}>
@@ -70,36 +87,11 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
       </Box>
       <Box marginTop={1} flexWrap="wrap">
         {game.words.slice(0, Math.min(game.words.length, game.currentWordIndex + 30)).map((word, wordIndex) => {
-          const isCurrentWord = wordIndex === game.currentWordIndex;
-          const isPast = wordIndex < game.currentWordIndex;
-          const wordResult = game.wordResults[wordIndex];
-
-          if (isPast) {
-            const inputChars = game.charInputs[wordIndex];
-            return (
-              <Box key={wordIndex} marginRight={1}>
-                {word.split("").map((char, charIndex) => {
-                  const inputChar = inputChars[charIndex];
-                  const isCorrect = inputChar === char;
-                  return (
-                    <Text key={charIndex} color={isCorrect ? "green" : "red"}>
-                      {char}
-                    </Text>
-                  );
-                })}
-                {inputChars.length > word.length &&
-                  inputChars
-                    .slice(word.length)
-                    .map((char, i) => (
-                      <Text key={`extra-${i}`} color="red" strikethrough>
-                        {char}
-                      </Text>
-                    ))}
-              </Box>
-            );
+          if (wordIndex < game.currentWordIndex) {
+            return <PastWord key={wordIndex} word={word} inputChars={game.charInputs[wordIndex]} />;
           }
 
-          if (isCurrentWord) {
+          if (wordIndex === game.currentWordIndex) {
             return (
               <Box key={wordIndex} marginRight={1}>
                 {word.split("").map((char, charIndex) => {
@@ -118,15 +110,8 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
                       </Text>
                     );
                   }
-                  if (inputChar === char) {
-                    return (
-                      <Text key={charIndex} color="green">
-                        {char}
-                      </Text>
-                    );
-                  }
                   return (
-                    <Text key={charIndex} color="red">
+                    <Text key={charIndex} color={inputChar === char ? "green" : "red"}>
                       {char}
                     </Text>
                   );
@@ -144,11 +129,7 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
             );
           }
 
-          return (
-            <Box key={wordIndex} marginRight={1}>
-              <Text dimColor>{word}</Text>
-            </Box>
-          );
+          return <FutureWord key={wordIndex} word={word} />;
         })}
       </Box>
     </Box>

package/src/hooks/useGame.ts

@@ -8,8 +8,16 @@ export type GameState = {
   timeLeft: number;
   isRunning: boolean;
   isFinished: boolean;
-  wordResults: Array<"correct" | "incorrect" | "pending">;
+};
+
+export type GameHook = GameState & {
   charInputs: string[][];
+  correctCharsAcc: number;
+  startGame: () => void;
+  handleChar: (char: string) => void;
+  handleBackspace: () => void;
+  handleSpace: () => void;
+  getResults: () => GameResults;
 };
 
 export type GameResults = {
@@ -28,15 +36,29 @@ function generateWords(count: number): string[] {
 
 export function useGame(duration: number) {
   const wordCount = Math.max(duration * 3, 50);
-  const [state, setState] = useState<GameState>({
-    words: generateWords(wordCount),
-    currentWordIndex: 0,
-    currentInput: "",
-    timeLeft: duration,
-    isRunning: false,
-    isFinished: false,
-    wordResults: Array(wordCount).fill("pending"),
-    charInputs: Array(wordCount).fill(null).map(() => []),
+  const charInputsRef = useRef<string[][]>(
+    Array.from({ length: wordCount }, () => [])
+  );
+  const wordsRef = useRef<string[]>([]);
+  const currentWordIndexRef = useRef(0);
+  const isFinishedRef = useRef(false);
+  const isRunningRef = useRef(false);
+  const correctCharsAccRef = useRef(0);
+  const totalCharsAccRef = useRef(0);
+  const wordCorrectCharsRef = useRef<number[]>([]);
+  const wordTotalCharsRef = useRef<number[]>([]);
+
+  const [state, setState] = useState<GameState>(() => {
+    const generatedWords = generateWords(wordCount);
+    wordsRef.current = generatedWords;
+    return {
+      words: generatedWords,
+      currentWordIndex: 0,
+      currentInput: "",
+      timeLeft: duration,
+      isRunning: false,
+      isFinished: false,
+    };
   });
 
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -45,132 +67,123 @@ export function useGame(duration: number) {
   useEffect(() => {
     if (state.isRunning && !state.isFinished) {
       timerRef.current = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - startTimeRef.current) / 1000);
+        const newTimeLeft = Math.max(duration - elapsed, 0);
         setState((prev) => {
-          const newTimeLeft = prev.timeLeft - 1;
+          if (prev.timeLeft === newTimeLeft) return prev;
           if (newTimeLeft <= 0) {
             if (timerRef.current) clearInterval(timerRef.current);
+            isFinishedRef.current = true;
+            isRunningRef.current = false;
             return { ...prev, timeLeft: 0, isRunning: false, isFinished: true };
           }
           return { ...prev, timeLeft: newTimeLeft };
         });
-      }, 1000);
+      }, 200);
     }
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [state.isRunning, state.isFinished]);
+  }, [state.isRunning, state.isFinished, duration]);
 
   const startGame = useCallback(() => {
     startTimeRef.current = Date.now();
+    isRunningRef.current = true;
     setState((prev) => ({ ...prev, isRunning: true }));
   }, []);
 
   const handleChar = useCallback((char: string) => {
-    setState((prev) => {
-      if (prev.isFinished) return prev;
-      if (!prev.isRunning) {
-        startTimeRef.current = Date.now();
-        const newCharInputs = [...prev.charInputs];
-        newCharInputs[prev.currentWordIndex] = [
-          ...newCharInputs[prev.currentWordIndex],
-          char,
-        ];
-        return {
-          ...prev,
-          isRunning: true,
-          currentInput: prev.currentInput + char,
-          charInputs: newCharInputs,
-        };
-      }
-      const newCharInputs = [...prev.charInputs];
-      newCharInputs[prev.currentWordIndex] = [
-        ...newCharInputs[prev.currentWordIndex],
-        char,
-      ];
-      return {
-        ...prev,
-        currentInput: prev.currentInput + char,
-        charInputs: newCharInputs,
-      };
-    });
+    if (isFinishedRef.current) return;
+    charInputsRef.current[currentWordIndexRef.current].push(char);
+    if (!isRunningRef.current) {
+      startTimeRef.current = Date.now();
+      isRunningRef.current = true;
+    }
+    setState((prev) => ({
+      ...prev,
+      isRunning: true,
+      currentInput: prev.currentInput + char,
+    }));
   }, []);
 
   const handleBackspace = useCallback(() => {
-    setState((prev) => {
-      if (prev.isFinished) return prev;
-
-      // If current input is empty, go back to previous word
-      if (prev.currentInput.length === 0) {
-        if (prev.currentWordIndex === 0) return prev;
-        const prevIndex = prev.currentWordIndex - 1;
-        const prevInput = prev.charInputs[prevIndex].join("");
-        const newWordResults = [...prev.wordResults];
-        newWordResults[prevIndex] = "pending";
-        return {
-          ...prev,
-          currentWordIndex: prevIndex,
-          currentInput: prevInput,
-          wordResults: newWordResults,
-        };
-      }
-
-      // Otherwise delete last char of current word
-      const newCharInputs = [...prev.charInputs];
-      newCharInputs[prev.currentWordIndex] = newCharInputs[
-        prev.currentWordIndex
-      ].slice(0, -1);
-      return {
+    if (isFinishedRef.current) return;
+
+    const currentIdx = currentWordIndexRef.current;
+    const currentChars = charInputsRef.current[currentIdx];
+
+    if (currentChars.length === 0) {
+      if (currentIdx === 0) return;
+      const prevIndex = currentIdx - 1;
+      currentWordIndexRef.current = prevIndex;
+      const lastCorrect = wordCorrectCharsRef.current.pop() || 0;
+      const lastTotal = wordTotalCharsRef.current.pop() || 0;
+      correctCharsAccRef.current -= lastCorrect;
+      totalCharsAccRef.current -= lastTotal;
+      const prevInput = charInputsRef.current[prevIndex].join("");
+      setState((prev) => ({
+        ...prev,
+        currentWordIndex: prevIndex,
+        currentInput: prevInput,
+      }));
+    } else {
+      charInputsRef.current[currentIdx].pop();
+      setState((prev) => ({
         ...prev,
         currentInput: prev.currentInput.slice(0, -1),
-        charInputs: newCharInputs,
-      };
-    });
+      }));
+    }
   }, []);
 
   const handleSpace = useCallback(() => {
-    setState((prev) => {
-      if (prev.isFinished || !prev.isRunning) return prev;
-      const word = prev.words[prev.currentWordIndex];
-      const isCorrect = prev.currentInput === word;
-      const newWordResults = [...prev.wordResults];
-      newWordResults[prev.currentWordIndex] = isCorrect
-        ? "correct"
-        : "incorrect";
-      return {
-        ...prev,
-        currentWordIndex: prev.currentWordIndex + 1,
-        currentInput: "",
-        wordResults: newWordResults,
-      };
-    });
-  }, []);
-
-  const getResults = useCallback((): GameResults => {
-    let correctChars = 0;
-    let totalChars = 0;
-
-    for (let i = 0; i < state.currentWordIndex; i++) {
-      const word = state.words[i];
-      const input = state.charInputs[i].join("");
-      totalChars += Math.max(word.length, input.length) + 1;
-      if (input === word) {
-        correctChars += word.length + 1;
-      } else {
-        for (let j = 0; j < word.length; j++) {
-          if (input[j] === word[j]) correctChars++;
-        }
+    if (isFinishedRef.current || !isRunningRef.current) return;
+
+    const currentIdx = currentWordIndexRef.current;
+    const word = wordsRef.current[currentIdx];
+    const inputChars = charInputsRef.current[currentIdx];
+    const input = inputChars.join("");
+
+    let correct = 0;
+    if (input === word) {
+      correct = word.length + 1;
+    } else {
+      for (let j = 0; j < word.length; j++) {
+        if (inputChars[j] === word[j]) correct++;
       }
     }
+    const total = Math.max(word.length, input.length) + 1;
+
+    wordCorrectCharsRef.current.push(correct);
+    wordTotalCharsRef.current.push(total);
+    correctCharsAccRef.current += correct;
+    totalCharsAccRef.current += total;
+    currentWordIndexRef.current = currentIdx + 1;
+
+    setState((prev) => ({
+      ...prev,
+      currentWordIndex: currentIdx + 1,
+      currentInput: "",
+    }));
+  }, []);
 
-    const timeElapsed = duration;
-    const wpm = totalChars > 0 ? Math.round((correctChars / 5) / (timeElapsed / 60)) : 0;
-    const accuracy = totalChars > 0 ? Math.round((correctChars / totalChars) * 1000) / 10 : 0;
-
+  const getResults = useCallback((): GameResults => {
+    const correctChars = correctCharsAccRef.current;
+    const totalChars = totalCharsAccRef.current;
+    const wpm =
+      totalChars > 0
+        ? Math.round((correctChars / 5) / (duration / 60))
+        : 0;
+    const accuracy =
+      totalChars > 0
+        ? Math.round((correctChars / totalChars) * 1000) / 10
+        : 0;
     return { wpm, accuracy, time: duration };
-  }, [state.currentWordIndex, state.charInputs, state.words, duration]);
+  }, [duration]);
 
   return {
     ...state,
+    charInputs: charInputsRef.current,
+    correctCharsAcc: correctCharsAccRef.current,
     startGame,
     handleChar,
     handleBackspace,