Mercurial

comparison react_games/public/games/main-4N34LOQP.js @ 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 import {
2 __toESM,
3 require_jsx_runtime,
4 require_react
5 } from "./chunk-AX5M7HF6.js";
6
7 // src/Wordle/main.tsx
8 var import_react = __toESM(require_react());
9 var import_jsx_runtime = __toESM(require_jsx_runtime());
10 var MAX_WORD_LEN = 5;
11 var MAX_ATTEMP_LEN = 6;
12 var constructGameState = () => {
13 const board = Array.from(
14 { length: MAX_ATTEMP_LEN },
15 () => {
16 return Array.from({ length: MAX_WORD_LEN }, () => {
17 return {
18 value: "",
19 status: 2 /* DEFAULT */
20 };
21 });
22 }
23 );
24 const targetWord = "hello".split("");
25 const position = {
26 letterPos: 0,
27 attempPos: 0
28 };
29 return {
30 board,
31 status: "Try to guess the word!" /* PLAYABLE */,
32 targetWord,
33 position
34 };
35 };
36 var styles = {
37 board: {
38 display: "grid",
39 gridTemplateColumns: `repeat(${MAX_WORD_LEN}, 1fr)`,
40 width: 400,
41 gap: 8
42 },
43 letter: (wordStatus) => {
44 let backgroundColor = "#e6e6e6";
45 switch (wordStatus) {
46 case 0 /* CORRECT_IN_POSITION */:
47 backgroundColor = "green";
48 break;
49 case 1 /* CORRECT_IN_WRONG_POSITION */:
50 backgroundColor = "yellow";
51 break;
52 case 2 /* DEFAULT */:
53 break;
54 }
55 return {
56 display: "flex",
57 justifyContent: "center",
58 alignItems: "center",
59 backgroundColor,
60 width: "100%",
61 aspectRatio: "1 / 1",
62 border: "1px solid black"
63 };
64 }
65 };
66 var LetterComponent = ({ letter }) => {
67 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.letter(letter.status), children: letter.value });
68 };
69 var gameStateReducer = (state, action) => {
70 if (state.status != "Try to guess the word!" /* PLAYABLE */) return state;
71 switch (action.type) {
72 case 0 /* INITIALZE */:
73 return {
74 ...state,
75 targetWord: action.targetWord.split("")
76 };
77 case 1 /* PLACE */:
78 const { character } = action;
79 let newBoard = state.board.map(
80 (word, attempIdx) => attempIdx === state.position.attempPos ? word.map(
81 (letter, letterIdx) => letterIdx === state.position.letterPos ? { ...letter, value: character } : letter
82 ) : word
83 );
84 const newPosition = calculatePosition(state.position);
85 let newStatus = state.status;
86 if (newPosition.letterPos === 0) {
87 const { correctLetterIdxes, correctWrongPositionLetterIndex } = gameLogic(newBoard[state.position.attempPos], state.targetWord);
88 newBoard = newBoard.map(
89 (word, attempIdx) => attempIdx === state.position.attempPos ? word.map(
90 (letter, letterIdx) => correctLetterIdxes.some((value) => value === letterIdx) ? { ...letter, status: 0 /* CORRECT_IN_POSITION */ } : correctWrongPositionLetterIndex.some((value) => value === letterIdx) ? { ...letter, status: 1 /* CORRECT_IN_WRONG_POSITION */ } : letter
91 ) : word
92 );
93 newStatus = correctLetterIdxes.length === MAX_WORD_LEN ? "You won!" /* WON */ : state.position.attempPos + 1 === MAX_ATTEMP_LEN ? "You Lost!" /* LOST */ : "Try to guess the word!" /* PLAYABLE */;
94 }
95 return {
96 ...state,
97 board: newBoard,
98 position: newPosition,
99 status: newStatus
100 };
101 }
102 };
103 function gameLogic(word, targetWord) {
104 const map = {};
105 const correctLetterIdxes = [];
106 const correctWrongPositionLetterIndex = [];
107 for (let i = 0; i < MAX_WORD_LEN; i++) {
108 map[targetWord[i]] ? map[targetWord[i]]++ : map[targetWord[i]] = 1;
109 }
110 for (let i = 0; i < MAX_WORD_LEN; i++) {
111 if (word[i].value === targetWord[i]) {
112 correctLetterIdxes.push(i);
113 map[targetWord[i]]--;
114 }
115 }
116 for (let i = 0; i < MAX_WORD_LEN; i++) {
117 if (correctLetterIdxes.some((value) => value === i)) continue;
118 if (targetWord.some((value) => value === word[i].value && map[value] > 0)) {
119 correctWrongPositionLetterIndex.push(i);
120 map[word[i].value]--;
121 }
122 }
123 return {
124 correctLetterIdxes,
125 correctWrongPositionLetterIndex
126 };
127 }
128 function calculatePosition(position) {
129 const letterPos = (position.letterPos + 1) % MAX_WORD_LEN;
130 const attempPos = (position.letterPos + 1 === MAX_WORD_LEN ? position.attempPos + 1 : position.attempPos) % MAX_ATTEMP_LEN;
131 return {
132 letterPos,
133 attempPos
134 };
135 }
136 var Wordle = () => {
137 const [gameState, gameDispatch] = (0, import_react.useReducer)(gameStateReducer, null, constructGameState);
138 (0, import_react.useEffect)(() => {
139 (async () => {
140 const res = await fetch("/api/v1/wordle");
141 if (!res.ok) return;
142 const response = await res.json();
143 gameDispatch({ type: 0 /* INITIALZE */, targetWord: response.targetWord });
144 })();
145 }, []);
146 const placeLetters = (0, import_react.useCallback)((event) => {
147 const letters = event.key.trim().toLowerCase();
148 const regex = new RegExp("[a-z]");
149 if (!regex.exec(letters) || letters === "enter") {
150 return;
151 }
152 gameDispatch({ type: 1 /* PLACE */, character: event.key.trim() });
153 }, [gameDispatch]);
154 (0, import_react.useEffect)(() => {
155 document.addEventListener("keypress", placeLetters);
156 }, []);
157 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
158 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: " Wordle " }),
159 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", { children: [
160 " ",
161 gameState.status,
162 " "
163 ] }),
164 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.board, children: gameState.board.map(
165 (word, wordIdx) => word.map(
166 (letter, letterIdx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LetterComponent, { letter }, `${wordIdx}-${letterIdx}`)
167 )
168 ) })
169 ] });
170 };
171 export {
172 Wordle
173 };
174 //# sourceMappingURL=main-4N34LOQP.js.map