Added a list to keep track of player's moves (#488)

Every time you click on a tile, it tracks the indexes of the tiles you
pressed


![image](https://github.com/user-attachments/assets/ccecc845-eafe-40d3-ac13-271694deae6c)

Author: elimanzo

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

@@ -1,15 +1,26 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { Box } from "./Box.tsx";
 import { playNote } from "../util/playNote.ts";
 import { config } from "../constants.ts";
 
 export function App() {
+  const [playerMoves, setPlayerMoves] = useState<readonly number[]>([]);
   return (
-    <div style={{ display: "flex", gap: 10 }}>
-      {config.boxes.map((box) => (
-        <Box color={box.color} onClick={() => playNote(box.frequency)} />
-      ))}
-    </div>
+    <>
+      <div style={{ display: "flex", gap: 10 }}>
+        {config.boxes.map((box, index) => (
+          <Box
+            key={index}
+            color={box.color}
+            onClick={() => {
+              playNote(box.frequency);
+              setPlayerMoves((prev) => [...prev, index]);
+            }}
+          />
+        ))}
+      </div>
+      <pre>{JSON.stringify(playerMoves, null, 2)}</pre>
+    </>
   );
 }