Mercurial

comparison react_games/pickRandom.ts @ 37:fb9bcd3145cb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ReactGames] Few games I made using react just to practice few things.
author MrJuneJune <me@mrjunejune.com>
date Mon, 01 Dec 2025 20:22:47 -0800
parents
children
comparison
equal deleted inserted replaced
36:84672efec192 37:fb9bcd3145cb
1 const LIST_OF_PROBLEM = [
2 {
3 name: "TicTacToe",
4 description: `
5 You are tasked with building a browser-based TicTacToe game using React.
6
7 Requirements:
8 1. The board is 3 × 3 with clickable cells.
9 2. Two players (X and O) take turns marking empty cells.
10 3. The game detects:
11 - X wins
12 - O wins
13 - Tie
14 4. After the game ends, provide a "Reset" button to restart.
15 5. (Optional) Add a move history feature allowing users to jump back to previous states.
16
17 Focus Points:
18 - Manage game state effectively using useReducer or useState.
19 - Ensure no unnecessary re-renders for performance.
20 - Style it minimally but clearly.
21 `.trim()
22 },
23 {
24 name: "Robot Moving",
25 description: `
26 Create a grid-based game where a robot moves to reach a goal.
27
28 Requirements:
29 1. The grid is 10 × 10.
30 2. The robot starts at (0, 0) and the goal is at a random position.
31 3. Some cells are obstacles the robot cannot move into.
32 4. Use arrow keys or buttons (Up, Down, Left, Right) to move the robot.
33 5. The game ends when the robot reaches the goal.
34
35 Focus Points:
36 - Store the board, robot position, and obstacles in state.
37 - Prevent moving out of bounds or into obstacles.
38 - Show win message when the goal is reached.
39 `.trim()
40 },
41 {
42 name: "Connect Four",
43 description: `
44 Build a Connect Four game in React.
45
46 Requirements:
47 1. Board size: 7 columns × 6 rows.
48 2. Two players take turns dropping discs into columns.
49 3. Discs fall to the lowest available row in the chosen column.
50 4. Detect win conditions: 4 in a row (horizontal, vertical, diagonal).
51 5. Provide a "Restart" button to reset the game.
52
53 Focus Points:
54 - Represent the board as a 2D array in state.
55 - Efficiently check for win conditions.
56 - Use memoization to avoid unnecessary re-renders.
57 `.trim()
58 },
59 {
60 name: "Todo App",
61 description: `
62 Implement a simple Todo App with React and React Query.
63
64 Requirements:
65 1. Display a list of todos from a mock API.
66 2. Add a new todo via a form.
67 3. Mark todos as completed.
68 4. Delete todos.
69 5. Use optimistic updates so the UI responds instantly before the API confirms.
70
71 Focus Points:
72 - Integrate React Query for data fetching and mutation.
73 - Ensure loading and error states are handled gracefully.
74 - Keep UI responsive even with network latency.
75 `.trim()
76 },
77 {
78 nmae: ""
79 }
80 ];
81
82 function pickRandom<T>(list: Array<T>): T {
83 return list[Math.floor(Math.random() * list.length)];
84 }
85
86 // Mock test: print problem name & description
87 const problem = pickRandom(LIST_OF_PROBLEM);
88 console.log(`Problem: ${problem.name}\n\n${problem.description}`);
89