Mercurial
diff react_games/public/games/main-4N34LOQP.js @ 37:fb9bcd3145cb
[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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/react_games/public/games/main-4N34LOQP.js Mon Dec 01 20:22:47 2025 -0800 @@ -0,0 +1,174 @@ +import { + __toESM, + require_jsx_runtime, + require_react +} from "./chunk-AX5M7HF6.js"; + +// src/Wordle/main.tsx +var import_react = __toESM(require_react()); +var import_jsx_runtime = __toESM(require_jsx_runtime()); +var MAX_WORD_LEN = 5; +var MAX_ATTEMP_LEN = 6; +var constructGameState = () => { + const board = Array.from( + { length: MAX_ATTEMP_LEN }, + () => { + return Array.from({ length: MAX_WORD_LEN }, () => { + return { + value: "", + status: 2 /* DEFAULT */ + }; + }); + } + ); + const targetWord = "hello".split(""); + const position = { + letterPos: 0, + attempPos: 0 + }; + return { + board, + status: "Try to guess the word!" /* PLAYABLE */, + targetWord, + position + }; +}; +var styles = { + board: { + display: "grid", + gridTemplateColumns: `repeat(${MAX_WORD_LEN}, 1fr)`, + width: 400, + gap: 8 + }, + letter: (wordStatus) => { + let backgroundColor = "#e6e6e6"; + switch (wordStatus) { + case 0 /* CORRECT_IN_POSITION */: + backgroundColor = "green"; + break; + case 1 /* CORRECT_IN_WRONG_POSITION */: + backgroundColor = "yellow"; + break; + case 2 /* DEFAULT */: + break; + } + return { + display: "flex", + justifyContent: "center", + alignItems: "center", + backgroundColor, + width: "100%", + aspectRatio: "1 / 1", + border: "1px solid black" + }; + } +}; +var LetterComponent = ({ letter }) => { + return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.letter(letter.status), children: letter.value }); +}; +var gameStateReducer = (state, action) => { + if (state.status != "Try to guess the word!" /* PLAYABLE */) return state; + switch (action.type) { + case 0 /* INITIALZE */: + return { + ...state, + targetWord: action.targetWord.split("") + }; + case 1 /* PLACE */: + const { character } = action; + let newBoard = state.board.map( + (word, attempIdx) => attempIdx === state.position.attempPos ? word.map( + (letter, letterIdx) => letterIdx === state.position.letterPos ? { ...letter, value: character } : letter + ) : word + ); + const newPosition = calculatePosition(state.position); + let newStatus = state.status; + if (newPosition.letterPos === 0) { + const { correctLetterIdxes, correctWrongPositionLetterIndex } = gameLogic(newBoard[state.position.attempPos], state.targetWord); + newBoard = newBoard.map( + (word, attempIdx) => attempIdx === state.position.attempPos ? word.map( + (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 + ) : word + ); + 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 */; + } + return { + ...state, + board: newBoard, + position: newPosition, + status: newStatus + }; + } +}; +function gameLogic(word, targetWord) { + const map = {}; + const correctLetterIdxes = []; + const correctWrongPositionLetterIndex = []; + for (let i = 0; i < MAX_WORD_LEN; i++) { + map[targetWord[i]] ? map[targetWord[i]]++ : map[targetWord[i]] = 1; + } + for (let i = 0; i < MAX_WORD_LEN; i++) { + if (word[i].value === targetWord[i]) { + correctLetterIdxes.push(i); + map[targetWord[i]]--; + } + } + for (let i = 0; i < MAX_WORD_LEN; i++) { + if (correctLetterIdxes.some((value) => value === i)) continue; + if (targetWord.some((value) => value === word[i].value && map[value] > 0)) { + correctWrongPositionLetterIndex.push(i); + map[word[i].value]--; + } + } + return { + correctLetterIdxes, + correctWrongPositionLetterIndex + }; +} +function calculatePosition(position) { + const letterPos = (position.letterPos + 1) % MAX_WORD_LEN; + const attempPos = (position.letterPos + 1 === MAX_WORD_LEN ? position.attempPos + 1 : position.attempPos) % MAX_ATTEMP_LEN; + return { + letterPos, + attempPos + }; +} +var Wordle = () => { + const [gameState, gameDispatch] = (0, import_react.useReducer)(gameStateReducer, null, constructGameState); + (0, import_react.useEffect)(() => { + (async () => { + const res = await fetch("/api/v1/wordle"); + if (!res.ok) return; + const response = await res.json(); + gameDispatch({ type: 0 /* INITIALZE */, targetWord: response.targetWord }); + })(); + }, []); + const placeLetters = (0, import_react.useCallback)((event) => { + const letters = event.key.trim().toLowerCase(); + const regex = new RegExp("[a-z]"); + if (!regex.exec(letters) || letters === "enter") { + return; + } + gameDispatch({ type: 1 /* PLACE */, character: event.key.trim() }); + }, [gameDispatch]); + (0, import_react.useEffect)(() => { + document.addEventListener("keypress", placeLetters); + }, []); + return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ + /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: " Wordle " }), + /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", { children: [ + " ", + gameState.status, + " " + ] }), + /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.board, children: gameState.board.map( + (word, wordIdx) => word.map( + (letter, letterIdx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LetterComponent, { letter }, `${wordIdx}-${letterIdx}`) + ) + ) }) + ] }); +}; +export { + Wordle +}; +//# sourceMappingURL=main-4N34LOQP.js.map