From b8c3129d33964c9d0be06c25425dd57fa4208181 Mon Sep 17 00:00:00 2001 From: Eli Manzo <96manzo.eli@gmail.com> Date: Sat, 7 Dec 2024 18:45:03 -0800 Subject: [PATCH 1/4] adding switch statements for game states --- workspaces/simon-game/package.json | 3 +- .../simon-game/src/app/components/App.tsx | 175 +++++++++++++----- workspaces/simon-game/src/foo.ts | 49 +++++ 3 files changed, 177 insertions(+), 50 deletions(-) create mode 100644 workspaces/simon-game/src/foo.ts diff --git a/workspaces/simon-game/package.json b/workspaces/simon-game/package.json index 854c277c..fc7b2376 100644 --- a/workspaces/simon-game/package.json +++ b/workspaces/simon-game/package.json @@ -18,7 +18,8 @@ "build": "cross-env NODE_OPTIONS=\"--import tsx\" webpack", "format": "prettier --color --write .", "lint": "code-chronicles-lint", - "typecheck": "code-chronicles-typecheck" + "typecheck": "code-chronicles-typecheck", + "foo": "tsx src/foo.ts" }, "dependencies": { "@code-chronicles/util": "workspace:*", diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx index 22dc318d..36fe320d 100644 --- a/workspaces/simon-game/src/app/components/App.tsx +++ b/workspaces/simon-game/src/app/components/App.tsx @@ -24,55 +24,132 @@ export function App() { const [gameState, setGameState] = useState("pre-game"); const [correctMoves, setCorrectMoves] = useState([]); - if (gameState === "pre-game") { - return ( -
- - Simon Game -
- ); - } - - return ( - <> -
- {config.boxes.map((box, index) => ( - +
+ {config.boxes.map((box, index) => ( + { + 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; + }); + }} + /> + ))} +
+ 
Game State: {gameState}
+ 
Player Moves: {JSON.stringify(playerMoves, null, 2)}
+ 
Correct Moves: {JSON.stringify(correctMoves, null, 2)}
+ + ); + } + case "game-over": { + return ( + <> +
+ {config.boxes.map((box, index) => ( + { + 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; + }); + }} + /> + ))} +
+ 
Game State: {gameState}
+ 
Player Moves: {JSON.stringify(playerMoves, null, 2)}
+ 
Correct Moves: {JSON.stringify(correctMoves, null, 2)}
+ + ); + } + case "player-turn": { + return ( + <> +
+ {config.boxes.map((box, index) => ( + { + 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; + }); + }} + /> + ))} +
+ 
Game State: {gameState}
+ 
Player Moves: {JSON.stringify(playerMoves, null, 2)}
+ 
Correct Moves: {JSON.stringify(correctMoves, null, 2)}
+ + ); + } + case "pre-game": { + return ( +
+
- 
Game State: {gameState}
- 
Player Moves: {JSON.stringify(playerMoves, null, 2)}
- 
Correct Moves: {JSON.stringify(correctMoves, null, 2)}
- - ); + > + Start Game + + Simon Game +
+ ); + } + } } diff --git a/workspaces/simon-game/src/foo.ts b/workspaces/simon-game/src/foo.ts new file mode 100644 index 00000000..88354665 --- /dev/null +++ b/workspaces/simon-game/src/foo.ts @@ -0,0 +1,49 @@ +const ESCAPES: Record = { + '"': '\\"', + "\\": "\\\\", + "\n": "\\n", + "\r": "\\r", + "\t": "\\t", +}; + +function stringifyJSON(data: unknown): string { + if (typeof data === "number") { + return String(data); + } + if (typeof data === "boolean") { + return data ? "true" : "false"; + } + if (typeof data === "string") { + return '"' + [...data].map((c) => ESCAPES[c] ?? c).join("") + '"'; + } + if (typeof data === "object") { + // eslint-disable-next-line eqeqeq + if (data === null) { + return "null"; + } + if (Array.isArray(data)) { + if (data.length === 0) { + return "[]"; + } + + return "[" + data.map(stringifyJSON).join(",") + "]"; + } + + const entries = Object.entries(data); + if (entries.length === 0) { + return "{}"; + } + return ( + "{" + + entries.map( + ([key, value]) => `${stringifyJSON(key)}:${stringifyJSON(value)}`, + ) + + "}" + ); + } + + throw new Error("Unknown Type"); +} + +console.log(stringifyJSON({ 1: "world", 2: { hello: "world2" } })); +console.log(stringifyJSON([0, 1, -3, [-4, 5, [2]]])); From 2c878a44c9b6c1edf4e7eb6675232b292434a08c Mon Sep 17 00:00:00 2001 From: Eli Manzo <96manzo.eli@gmail.com> Date: Sat, 7 Dec 2024 18:53:30 -0800 Subject: [PATCH 2/4] refactor player-turn state --- .../simon-game/src/app/components/App.tsx | 24 ++++++------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx index 36fe320d..8910a29f 100644 --- a/workspaces/simon-game/src/app/components/App.tsx +++ b/workspaces/simon-game/src/app/components/App.tsx @@ -109,23 +109,13 @@ export function App() { 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; - }); + const newPlayerMoves = [...playerMoves, index]; + setPlayerMoves(newPlayerMoves); + if (!isPrefixCorrect(newPlayerMoves, correctMoves)) { + setGameState("game-over"); + } else if (newPlayerMoves.length === correctMoves.length) { + setGameState("cpu-turn"); + } }} /> ))} From 9caf1474159b694e6007967e3b8218acc368fc77 Mon Sep 17 00:00:00 2001 From: Eli Manzo <96manzo.eli@gmail.com> Date: Sat, 7 Dec 2024 19:20:10 -0800 Subject: [PATCH 3/4] adding cpu-turn effect --- .../simon-game/src/app/components/App.tsx | 84 +++++-------------- .../simon-game/src/app/components/Box.tsx | 12 +-- 2 files changed, 27 insertions(+), 69 deletions(-) diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx index 8910a29f..a00178f5 100644 --- a/workspaces/simon-game/src/app/components/App.tsx +++ b/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("pre-game"); const [correctMoves, setCorrectMoves] = useState([]); + 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 ( <>
{config.boxes.map((box, index) => ( - { - 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; - }); - }} - /> + ))} 
Game State: {gameState}
@@ -65,37 +57,8 @@ export function App() { case "game-over": { return ( <> -
- {config.boxes.map((box, index) => ( - { - 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; - }); - }} - /> - ))} -
- 
Game State: {gameState}
- 
Player Moves: {JSON.stringify(playerMoves, null, 2)}
- 
Correct Moves: {JSON.stringify(correctMoves, null, 2)}
+

Game Over ... Start again ...

+ ); } @@ -129,14 +92,7 @@ export function App() { case "pre-game": { return (
- + Simon Game
); diff --git a/workspaces/simon-game/src/app/components/Box.tsx b/workspaces/simon-game/src/app/components/Box.tsx index 64e989ab..a7c9e2ca 100644 --- a/workspaces/simon-game/src/app/components/Box.tsx +++ b/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 (