Mercurial
diff react_games/public/games/main-EQTPDHY4.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-EQTPDHY4.js Mon Dec 01 20:22:47 2025 -0800 @@ -0,0 +1,117 @@ +import { + __toESM, + require_jsx_runtime, + require_react +} from "./chunk-AX5M7HF6.js"; + +// src/LightsOut/main.tsx +var import_react = __toESM(require_react()); +var import_jsx_runtime = __toESM(require_jsx_runtime()); +var MAX_COL = 5; +var MAX_ROW = 5; +var DIRECTION = [ + [0, 0], + [0, 1], + [1, 0], + [0, -1], + [-1, 0] +]; +var constructGameState = () => { + const board = Array.from( + { length: MAX_ROW }, + () => Array.from( + { length: MAX_COL }, + () => ({ value: false }) + ) + ); + for (let i = 0; i < 30; i++) { + const r = Math.floor(Math.random() * MAX_ROW); + const c = Math.floor(Math.random() * MAX_COL); + for (const [dr, dc] of DIRECTION) { + if (board[r + dr]?.[c + dc]) { + board[r + dr][c + dc].value = !board[r + dr]?.[c + dc].value; + } + } + } + return { + board, + status: 0 /* PLAYABLE */, + moves: 0 + }; +}; +var styles = { + board: { + display: "grid", + gridTemplateColumns: `repeat(${MAX_COL}, 1fr)`, + width: MAX_COL * 30 + }, + cell: (isLightOn) => ({ + width: "100%", + aspectRatio: "1 / 1", + border: `1px solid #222`, + backgroundColor: isLightOn ? "white" : "black", + transition: "background-color 120ms ease", + cursor: "pointer" + }) +}; +var CellComponent = (0, import_react.memo)(({ cellValue, rowPos, colPos, dispatch }) => { + const onClickHandler = (0, import_react.useCallback)(() => { + dispatch({ type: "place", newRowPos: rowPos, newColPos: colPos }); + }, [rowPos, colPos, dispatch]); + return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { onClick: onClickHandler, style: styles.cell(cellValue.value) }); +}); +var gameStateReducer = (state, action) => { + if (state.status === 1 /* WON */) return state; + switch (action.type) { + case "place": + const allDirection = []; + for (const [dr, dc] of DIRECTION) { + allDirection.push([action.newRowPos + dr, action.newColPos + dc]); + } + const newBoard = state.board.map( + (row, rowIdx) => row.map((col, colIdx) => allDirection.some( + ([nr, nc]) => rowIdx === nr && colIdx === nc + ) ? { ...col, value: !col.value } : col) + ); + const newStatus = newBoard.flat().filter((cell) => cell.value).length === MAX_COL * MAX_ROW ? 1 /* WON */ : 0 /* PLAYABLE */; + return { + ...state, + status: newStatus, + board: newBoard, + moves: state.moves + 1 + }; + case "reset": + return constructGameState(); + } +}; +var LightsOut = () => { + const [gameState, dispatch] = (0, import_react.useReducer)(gameStateReducer, null, constructGameState); + return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ + /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", { children: [ + " Game Status ", + gameState.status + ] }), + /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", { children: [ + " Number of moves so far ", + gameState.moves + ] }), + /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.board, children: gameState.board.map( + (row, rowIdx) => row.map( + (cellValue, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)( + CellComponent, + { + cellValue, + rowPos: rowIdx, + colPos: colIdx, + dispatch + }, + `${rowIdx}-${colIdx}` + ) + ) + ) }) + ] }); +}; +export { + LightsOut +}; +//# sourceMappingURL=main-EQTPDHY4.js.map