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