Merge pull request #17 from elpddev/elpddev/issue8

fix space not considered char in the game

Author: elpddev

src/components/LetterCard.tsx

@@ -43,6 +43,7 @@ function styleLetterCard(
     backgroundColor,
     fontSize: "28px",
     fontFamily: "monospace",
+    whiteSpace: "pre",
   };
 }
 

src/components/TypingGame.tsx

@@ -25,7 +25,7 @@ export function TypingGame() {
   );
 }
 
-const gameLength = 10_000;
+const gameLength = 60_000;
 
 function useTypingGame() {
   const {
@@ -46,7 +46,7 @@ function useTypingGame() {
     []
   );
 
-  const { startCapture, stopCapture, isCapturing } = useTypingCapture(onTyping);
+  const { startCapture, stopCapture } = useTypingCapture(onTyping);
 
   const restart = useCallback(() => {
     setBoard(init());

src/components/WordsCard.tsx

@@ -12,7 +12,7 @@ export function WordsCard({ board }: { board: Board }) {
       }}
       p={15}
     >
-      <Group position="center" spacing={12}>
+      <Group spacing={0} align="center">
         {board.words.map((word, index) => (
           <WordCard
             key={index}

src/models/Board.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from "vitest";
+import { moveByKey } from "./Board";
+
+describe("Board", () => {
+  describe("moveByKey", () => {
+    it("", () => {});
+  });
+});

src/models/Board.ts

@@ -5,6 +5,7 @@ import * as WordMod from "./Word";
 import { Word } from "./Word";
 import * as LetterMod from "./Letter";
 import { SuccessStatus } from "./SuccessStatus";
+import { Letter } from "./Letter";
 
 export interface Board {
   words: Word[];
@@ -35,15 +36,24 @@ export function clone(board: Board): Board {
 }
 
 export function generateWords(amount: number): Word[] {
-  const gameWords = [];
+  const gameWords: Word[] = [];
 
   for (let i = 0; i < amount; i += 1) {
     const nextWord = getRandomItem(wordBank);
     const nextGameWord = WordMod.init(nextWord);
     gameWords.push(nextGameWord);
   }
 
-  return gameWords;
+  const first = gameWords.shift();
+
+  const gameWordsWithSpaces = gameWords.reduce(
+    (all, word) => {
+      return [...all, WordMod.init(" "), word];
+    },
+    [first] as Word[]
+  );
+
+  return gameWordsWithSpaces;
 }
 
 export function moveByKey(char: string, code: KeyCode, board: Board): Board {
@@ -55,7 +65,9 @@ export function moveByKey(char: string, code: KeyCode, board: Board): Board {
     return moveBackward(board);
   }
 
-  if (code === KeyCode.Space) {
+  const currLetter = getCurrentLetter(board);
+
+  if (code === KeyCode.Space && currLetter.char !== " ") {
     if (board.currentWordLetterIndex === 0) {
       return board;
     }
@@ -216,3 +228,10 @@ export function getLetterSuccessAmount(board: Board) {
     return wordsAcc + wordSum;
   }, 0);
 }
+
+function getCurrentLetter(board: Board): Letter {
+  const currWord = board.words[board.currentWordIndex];
+  const currLetter = currWord.letters[board.currentWordLetterIndex];
+
+  return currLetter;
+}

src/utils/useTypingCapture.tsx

@@ -7,6 +7,7 @@ export function useTypingCapture(
   const [isCapturing, setIsCapturing] = useState(false);
 
   const typingCallback = useCallback((event: KeyboardEvent) => {
+    event.stopPropagation();
     onCapture({ code: event.code as KeyCode, char: event.key });
   }, []);