wpmx 1.0.3 → 1.0.4

package/.claude/settings.local.json

@@ -0,0 +1,6 @@
+{
+  "enabledMcpjsonServers": [
+    "shadcn"
+  ],
+  "enableAllProjectMcpServers": true
+}

package/package.json

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

package/src/app.tsx

@@ -21,6 +21,10 @@ export type GameResults = {
 
 export function App() {
   const { exit } = useApp();
+  const handleQuit = useCallback(() => {
+    exit();
+    process.exit(0);
+  }, [exit]);
   const [screen, setScreen] = useState<Screen>("menu");
   const [duration, setDuration] = useState<Duration>(() => loadSettings().lastDuration);
   const [results, setResults] = useState<GameResults | null>(null);
@@ -57,7 +61,7 @@ export function App() {
   }, []);
 
   if (screen === "menu") {
-    return <Menu onStart={handleStart} onQuit={exit} defaultDuration={duration} />;
+    return <Menu onStart={handleStart} onQuit={handleQuit} defaultDuration={duration} />;
   }
 
   if (screen === "game") {
@@ -80,7 +84,7 @@ export function App() {
         personalBest={pb}
         onRestart={handleRestart}
         onMenu={handleMenu}
-        onQuit={exit}
+        onQuit={handleQuit}
       />
     );
   }

package/src/components/Game.tsx

@@ -1,33 +1,15 @@
-import { Box, Text, useInput } from "ink";
+import { Box, Text, useInput, useStdout } from "ink";
+import type { Key } from "ink";
 import { useGame, type GameResults } from "../hooks/useGame.ts";
-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>
-));
+import { useEffect, useMemo, useCallback, useState } from "react";
+
+type StyledChar = {
+  char: string;
+  color?: string;
+  dimColor?: boolean;
+  strikethrough?: boolean;
+  isCursor?: boolean;
+};
 
 type GameProps = {
   duration: number;
@@ -38,6 +20,7 @@ type GameProps = {
 
 export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
   const game = useGame(duration);
+  const { stdout } = useStdout();
 
   useEffect(() => {
     if (game.isFinished) {
@@ -45,29 +28,40 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
     }
   }, [game.isFinished]);
 
-  useInput((input, key) => {
-    if (key.escape) {
-      onExit();
-      return;
-    }
-    if (key.tab) {
-      onRestart();
-      return;
-    }
-    if (game.isFinished) return;
-
-    if (key.backspace || key.delete) {
-      game.handleBackspace();
-    } else if (input && !key.ctrl && !key.meta) {
-      for (const char of input) {
-        if (char === " ") {
-          game.handleSpace();
-        } else if (char >= "!" && char <= "~") {
-          game.handleChar(char);
+  const handleInput = useCallback(
+    (input: string, key: Key) => {
+      if (key.escape) {
+        onExit();
+        return;
+      }
+      if (key.tab) {
+        onRestart();
+        return;
+      }
+      if (game.isFinished) return;
+
+      if (key.backspace || key.delete) {
+        game.handleBackspace();
+      } else if (input && !key.ctrl && !key.meta) {
+        for (const char of input) {
+          if (char === " ") {
+            game.handleSpace();
+          } else if (char >= "!" && char <= "~") {
+            game.handleChar(char);
+          }
         }
       }
-    }
-  });
+    },
+    [onExit, onRestart, game.isFinished, game.handleBackspace, game.handleSpace, game.handleChar],
+  );
+
+  useInput(handleInput);
+
+  const [cursorVisible, setCursorVisible] = useState(true);
+  useEffect(() => {
+    const id = setInterval(() => setCursorVisible((v) => !v), 530);
+    return () => clearInterval(id);
+  }, []);
 
   const liveWpm = useMemo(() => {
     if (!game.isRunning || game.isFinished) return 0;
@@ -75,9 +69,78 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
     return Math.round((game.correctCharsAcc / 5) / (elapsed / 60));
   }, [game.correctCharsAcc, game.timeLeft, game.isRunning, game.isFinished, duration]);
 
+  const termWidth = stdout.columns || 80;
+  const availableWidth = termWidth - 4;
+  const centerCol = Math.floor(availableWidth / 2);
+  const currentWordIdx = game.currentWordIndex;
+
+  // Build flat styled character array for all words (cursor style applied at render time)
+  const { chars, cursorPos } = useMemo(() => {
+    const chars: StyledChar[] = [];
+    let cursorPos = 0;
+
+    for (let wi = 0; wi < game.words.length; wi++) {
+      const word = game.words[wi];
+      const isPast = wi < currentWordIdx;
+      const isCurrent = wi === currentWordIdx;
+
+      if (isPast) {
+        const inputs = game.charInputs[wi] || [];
+        for (let ci = 0; ci < word.length; ci++) {
+          chars.push({ char: word[ci], color: inputs[ci] === word[ci] ? "green" : "red" });
+        }
+        for (let ci = word.length; ci < inputs.length; ci++) {
+          chars.push({ char: inputs[ci], color: "red", strikethrough: true });
+        }
+        chars.push({ char: " " });
+      } else if (isCurrent) {
+        const typedInWord = Math.min(game.currentInput.length, word.length);
+        for (let ci = 0; ci < typedInWord; ci++) {
+          chars.push({ char: word[ci], color: game.currentInput[ci] === word[ci] ? "green" : "red" });
+        }
+        if (game.currentInput.length < word.length) {
+          // Cursor on next untyped character
+          cursorPos = chars.length;
+          chars.push({ char: word[game.currentInput.length], isCursor: true });
+          for (let ci = game.currentInput.length + 1; ci < word.length; ci++) {
+            chars.push({ char: word[ci], dimColor: true });
+          }
+          chars.push({ char: " " });
+        } else {
+          // Extra typed chars beyond word length
+          for (let ci = word.length; ci < game.currentInput.length; ci++) {
+            chars.push({ char: game.currentInput[ci], color: "red" });
+          }
+          // Cursor at space position
+          cursorPos = chars.length;
+          chars.push({ char: " ", isCursor: true });
+        }
+      } else {
+        // Future word
+        for (let ci = 0; ci < word.length; ci++) {
+          chars.push({ char: word[ci], dimColor: true });
+        }
+        chars.push({ char: " " });
+      }
+    }
+
+    return { chars, cursorPos };
+  }, [game.words, game.charInputs, currentWordIdx, game.currentInput]);
+
+  // Extract visible window centered on cursor
+  const windowStart = cursorPos - centerCol;
+  const visibleChars: StyledChar[] = [];
+  for (let i = windowStart; i < windowStart + availableWidth; i++) {
+    if (i >= 0 && i < chars.length) {
+      visibleChars.push(chars[i]);
+    } else {
+      visibleChars.push({ char: " " });
+    }
+  }
+
   return (
     <Box flexDirection="column" paddingX={2} paddingY={1}>
-      <Box justifyContent="space-between">
+      <Box justifyContent="center" gap={2}>
         <Text color="yellow" bold>
           {game.timeLeft}s
         </Text>
@@ -85,52 +148,32 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
           {liveWpm} wpm
         </Text>
       </Box>
-      <Box marginTop={1} flexWrap="wrap">
-        {game.words.slice(0, Math.min(game.words.length, game.currentWordIndex + 30)).map((word, wordIndex) => {
-          if (wordIndex < game.currentWordIndex) {
-            return <PastWord key={wordIndex} word={word} inputChars={game.charInputs[wordIndex]} />;
-          }
-
-          if (wordIndex === game.currentWordIndex) {
+      <Box marginTop={1}>
+        <Text>
+          {visibleChars.map((sc, i) => {
+            if (sc.isCursor) {
+              return cursorVisible ? (
+                <Text key={i} backgroundColor="white" color="black">
+                  {sc.char}
+                </Text>
+              ) : (
+                <Text key={i} underline>
+                  {sc.char}
+                </Text>
+              );
+            }
             return (
-              <Box key={wordIndex} marginRight={1}>
-                {word.split("").map((char, charIndex) => {
-                  const inputChar = game.currentInput[charIndex];
-                  if (inputChar === undefined && charIndex === game.currentInput.length) {
-                    return (
-                      <Text key={charIndex} color="white" bold underline>
-                        {char}
-                      </Text>
-                    );
-                  }
-                  if (inputChar === undefined) {
-                    return (
-                      <Text key={charIndex} dimColor>
-                        {char}
-                      </Text>
-                    );
-                  }
-                  return (
-                    <Text key={charIndex} color={inputChar === char ? "green" : "red"}>
-                      {char}
-                    </Text>
-                  );
-                })}
-                {game.currentInput.length > word.length &&
-                  game.currentInput
-                    .slice(word.length)
-                    .split("")
-                    .map((char, i) => (
-                      <Text key={`extra-${i}`} color="red">
-                        {char}
-                      </Text>
-                    ))}
-              </Box>
+              <Text
+                key={i}
+                color={sc.color}
+                dimColor={sc.dimColor}
+                strikethrough={sc.strikethrough}
+              >
+                {sc.char}
+              </Text>
             );
-          }
-
-          return <FutureWord key={wordIndex} word={word} />;
-        })}
+          })}
+        </Text>
       </Box>
     </Box>
   );

package/src/hooks/useGame.ts

@@ -79,7 +79,7 @@ export function useGame(duration: number) {
           }
           return { ...prev, timeLeft: newTimeLeft };
         });
-      }, 200);
+      }, 1000);
     }
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);