--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/react_games/pickRandom.ts	Mon Dec 01 20:22:47 2025 -0800
@@ -0,0 +1,89 @@
+const LIST_OF_PROBLEM = [
+  {
+    name: "TicTacToe",
+    description: `
+You are tasked with building a browser-based TicTacToe game using React.
+
+Requirements:
+1. The board is 3 × 3 with clickable cells.
+2. Two players (X and O) take turns marking empty cells.
+3. The game detects:
+   - X wins
+   - O wins
+   - Tie
+4. After the game ends, provide a "Reset" button to restart.
+5. (Optional) Add a move history feature allowing users to jump back to previous states.
+
+Focus Points:
+- Manage game state effectively using useReducer or useState.
+- Ensure no unnecessary re-renders for performance.
+- Style it minimally but clearly.
+    `.trim()
+  },
+  {
+    name: "Robot Moving",
+    description: `
+Create a grid-based game where a robot moves to reach a goal.
+
+Requirements:
+1. The grid is 10 × 10.
+2. The robot starts at (0, 0) and the goal is at a random position.
+3. Some cells are obstacles the robot cannot move into.
+4. Use arrow keys or buttons (Up, Down, Left, Right) to move the robot.
+5. The game ends when the robot reaches the goal.
+
+Focus Points:
+- Store the board, robot position, and obstacles in state.
+- Prevent moving out of bounds or into obstacles.
+- Show win message when the goal is reached.
+    `.trim()
+  },
+  {
+    name: "Connect Four",
+    description: `
+Build a Connect Four game in React.
+
+Requirements:
+1. Board size: 7 columns × 6 rows.
+2. Two players take turns dropping discs into columns.
+3. Discs fall to the lowest available row in the chosen column.
+4. Detect win conditions: 4 in a row (horizontal, vertical, diagonal).
+5. Provide a "Restart" button to reset the game.
+
+Focus Points:
+- Represent the board as a 2D array in state.
+- Efficiently check for win conditions.
+- Use memoization to avoid unnecessary re-renders.
+    `.trim()
+  },
+  {
+    name: "Todo App",
+    description: `
+Implement a simple Todo App with React and React Query.
+
+Requirements:
+1. Display a list of todos from a mock API.
+2. Add a new todo via a form.
+3. Mark todos as completed.
+4. Delete todos.
+5. Use optimistic updates so the UI responds instantly before the API confirms.
+
+Focus Points:
+- Integrate React Query for data fetching and mutation.
+- Ensure loading and error states are handled gracefully.
+- Keep UI responsive even with network latency.
+    `.trim()
+  },
+  {
+    nmae: ""
+  }
+];
+
+function pickRandom<T>(list: Array<T>): T {
+  return list[Math.floor(Math.random() * list.length)];
+}
+
+// Mock test: print problem name & description
+const problem = pickRandom(LIST_OF_PROBLEM);
+console.log(`Problem: ${problem.name}\n\n${problem.description}`);
+