Mercurial

annotate react_games/pickRandom.ts @ 52:636eab07809d

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