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