adding cpu-turn effect

Author: elimanzo

workspaces/simon-game/src/app/components/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { Box } from "./Box.tsx";
 import { playNote } from "../util/playNote.ts";
@@ -24,36 +24,28 @@ export function App() {
   const [gameState, setGameState] = useState<GameState>("pre-game");
   const [correctMoves, setCorrectMoves] = useState<readonly number[]>([]);
 
+  useEffect(() => {
+    if (gameState !== "cpu-turn") {
+      return;
+    }
+    setCorrectMoves((prev) => [...prev, randNum(4)]);
+    setPlayerMoves([]);
+    setGameState("player-turn");
+  }, [gameState]);
+
+  const newGame = () => {
+    setGameState("cpu-turn");
+    setCorrectMoves([]); // TODO: Add to cpu-turn state instead once created
+    setPlayerMoves([]);
+  };
+
   switch (gameState) {
     case "cpu-turn": {
       return (
         <>
           <div style={{ display: "flex", gap: 10 }}>
             {config.boxes.map((box, index) => (
-              <Box
-                key={index}
-                color={box.color}
-                onClick={() => {
-                  playNote(box.frequency);
-                  setPlayerMoves(() => {
-                    const newPlayerMoves = [...playerMoves, index];
-                    const isSequenceCorrect = isPrefixCorrect(
-                      newPlayerMoves,
-                      correctMoves,
-                    );
-                    if (!isSequenceCorrect) {
-                      setGameState("game-over");
-                      return newPlayerMoves;
-                    }
-                    if (newPlayerMoves.length === correctMoves.length) {
-                      setGameState("cpu-turn");
-                      return [];
-                    }
-                    setGameState("player-turn");
-                    return newPlayerMoves;
-                  });
-                }}
-              />
+              <Box key={index} color={box.color} isDisabled />
             ))}
           </div>
           <pre>Game State: {gameState}</pre>
@@ -65,37 +57,8 @@ export function App() {
     case "game-over": {
       return (
         <>
-          <div style={{ display: "flex", gap: 10 }}>
-            {config.boxes.map((box, index) => (
-              <Box
-                key={index}
-                color={box.color}
-                onClick={() => {
-                  playNote(box.frequency);
-                  setPlayerMoves(() => {
-                    const newPlayerMoves = [...playerMoves, index];
-                    const isSequenceCorrect = isPrefixCorrect(
-                      newPlayerMoves,
-                      correctMoves,
-                    );
-                    if (!isSequenceCorrect) {
-                      setGameState("game-over");
-                      return newPlayerMoves;
-                    }
-                    if (newPlayerMoves.length === correctMoves.length) {
-                      setGameState("cpu-turn");
-                      return [];
-                    }
-                    setGameState("player-turn");
-                    return newPlayerMoves;
-                  });
-                }}
-              />
-            ))}
-          </div>
-          <pre>Game State: {gameState}</pre>
-          <pre>Player Moves: {JSON.stringify(playerMoves, null, 2)}</pre>
-          <pre>Correct Moves: {JSON.stringify(correctMoves, null, 2)}</pre>
+          <h1>Game Over ... Start again ...</h1>
+          <button onClick={newGame}>New Game</button>
         </>
       );
     }
@@ -129,14 +92,7 @@ export function App() {
     case "pre-game": {
       return (
         <div style={{ display: "flex", gap: 10 }}>
-          <button
-            onClick={() => {
-              setGameState("cpu-turn");
-              setCorrectMoves((prev) => [...prev, randNum(4)]); // TODO: Add to cpu-turn state instead once created
-            }}
-          >
-            Start Game
-          </button>
+          <button onClick={newGame}>Start Game</button>
           Simon Game
         </div>
       );

workspaces/simon-game/src/app/components/Box.tsx

@@ -3,17 +3,19 @@ import React from "react";
 type Props = {
   color?: string;
   height?: number;
-  width?: number;
+  isDisabled?: boolean;
   margin?: number;
-  onClick: () => void;
+  onClick?: () => void;
+  width?: number;
 };
 
 export function Box({
   color = "lightblue",
   height = 100,
-  width = 100,
+  isDisabled = false,
   margin,
   onClick,
+  width = 100,
 }: Props) {
   return (
     <button
@@ -23,10 +25,10 @@ export function Box({
         width,
         borderRadius: 20, // rounded corners
         margin, // spaces between boxes
-        cursor: "pointer",
+        cursor: isDisabled ? undefined : "pointer",
         border: 0,
       }}
-      onClick={onClick}
+      onClick={isDisabled ? undefined : onClick}
     />
   );
 }