Merge pull request #38 from Chessweeper/attacked-cells

Setting to show attacked cells

Author: mbrinkl

README.md

@@ -40,6 +40,7 @@ To build a release version of the game, run `npm run build`. The output is place
 
 - Chess icons and favicon from https://github.com/oakmac/chessboardjs
 - Shovel icon from Vectors Market, Flaticon, https://www.flaticon.com/free-icons/shovel
+- Settings icon from Vectors Market, Flaticon, https://www.flaticon.com/free-icons/settings
 - Shogi icons from Wikimedia Commons by Hari Seldon under Creative Commons Attribution-Share Alike 3.0 Unported
 - Digital font from The FontStruction, https://fontstruct.com/fontstructions/show/583495, by jon889 under a Creative Commons Attribution Share Alike
 - Idea taken from https://www.reddit.com/r/AnarchyChess/comments/ytw69b/new_chess_2_update_just_dropped_numbers_are_based/

package-lock.json

@@ -30,9 +30,11 @@
   },
   "homepage": "https://github.com/Xwilarg/Chessweeper#readme",
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.1",
     "boardgame.io": "^0.50.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.4.4"
   },
   "devDependencies": {

package.json

@@ -1,5 +1,15 @@
 import { Random } from "./Random";
 
+export function getMoves(
+  piece: string,
+  data: Array<string | number>,
+  size: number,
+  x: number,
+  y: number
+) {
+  return parseNotation(pieceMovesCheck[piece], data, size, x, y);
+}
+
 function isValid(
   data: Array<string | number>,
   size: number,
@@ -526,17 +536,22 @@ export function generatePuzzleBoard(
     }
   }
 
-  let knownCells;
+  let cells;
   if (c === maxIt) {
     error = "Failed to generate puzzle";
   } else {
-    knownCells = Array(size * size).fill(false);
+    cells = data.map((item) => ({
+      value: item,
+      known: false,
+      attackedValue: 0,
+    }));
+
     for (const i in discovered) {
       if (discovered[i]) {
-        knownCells[i] = true;
+        cells[i].known = true;
       }
     }
   }
 
-  return { cells: data, knownCells, error };
+  return { cells, error };
 }

src/Algs.ts

@@ -1,14 +1,18 @@
+import { Provider } from "react-redux";
 import { Client } from "./components/Client";
 import { Footer } from "./components/Footer";
+import { store } from "./store";
 
 export const App = (): JSX.Element => {
   return (
-    <div>
-      <div className="flex">
-        <Client />
+    <Provider store={store}>
+      <div>
+        <div className="flex">
+          <Client />
+        </div>
+        <hr />
+        <Footer />
       </div>
-      <hr />
-      <Footer />
-    </div>
+    </Provider>
   );
 };

src/App.tsx

@@ -1,9 +1,13 @@
 import { Game as BgioGame } from "boardgame.io";
 import { INVALID_MOVE } from "boardgame.io/core";
-import { fillPositions, generateBoard } from "./Algs";
+import { fillPositions, generateBoard, getMoves } from "./Algs";
 import { Random } from "./Random";
 
-type Cell = boolean | number | string;
+export interface Cell {
+  value: number | string;
+  attackedValue: number;
+  known: boolean | string;
+}
 // todo: replace string with a union type for pieces?
 
 export interface SetupData {
@@ -14,14 +18,13 @@ export interface SetupData {
   gamemode: "c" | "p";
   difficulty: number;
   cells?: Cell[] | null;
-  knownCells?: Cell[] | null;
 }
 
 export type GameState = Required<SetupData>;
 
 function generateClassicBoard(G: GameState, id: number) {
   const random = new Random(G.seed);
-  G.cells = fillPositions(
+  const filledPositions = fillPositions(
     generateBoard(
       random,
       id,
@@ -31,7 +34,11 @@ function generateClassicBoard(G: GameState, id: number) {
       Array(G.size * G.size).fill(0)
     )
   );
-  G.knownCells = Array(G.size * G.size).fill(false);
+  G.cells = filledPositions.map((pos) => ({
+    value: pos,
+    known: false,
+    attackedValue: 0,
+  }));
 }
 
 function isWinCondition(G: GameState, id: number) {
@@ -40,22 +47,61 @@ function isWinCondition(G: GameState, id: number) {
   }
 
   for (let i = 0; i < G.size * G.size; i++) {
-    if (!Number.isInteger(G.cells[i])) {
-      if (G.cells[i] !== G.knownCells?.[i] && G.cells[i] !== id) {
+    if (!Number.isInteger(G.cells[i].value)) {
+      if (G.cells[i].value !== G.cells[i].known && G.cells[i].value !== id) {
         return false;
       }
-    } else if (G.knownCells?.[i] !== true && G.knownCells?.[i] !== false) {
+    } else if (G.cells[i].known !== true && G.cells[i].known !== false) {
       return false;
     }
   }
 
   return true;
 }
 
+function calcAttackedCells(G: GameState) {
+  if (G.cells == null) return;
+  // for some reason get a possibly null warning in some places even with null check at top of function
+
+  // Reset all values to zero
+  G.cells.forEach((cell) => {
+    cell.attackedValue = 0;
+  });
+
+  // Recalculate all attacked cells
+  G.cells.forEach((cell, id) => {
+    if (typeof cell.known === "string") {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const data = G.cells!.map((cell) => {
+        if (typeof cell.known === "string") {
+          return cell.known;
+        } else if (typeof cell.value === "string") {
+          // strip hidden pieces from data, so they do not block calculations
+          return 0;
+        }
+
+        return cell.value;
+      });
+
+      const moves = getMoves(
+        cell.known,
+        data,
+        G.size,
+        id % G.size,
+        Math.floor(id / G.size)
+      );
+
+      moves.forEach((move) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        G.cells![move].attackedValue++;
+      });
+    }
+  });
+}
+
 export const Game = (setupData: SetupData): BgioGame<GameState> => ({
   setup: () => ({
     ...setupData,
-    knownCells: setupData.knownCells ?? null,
     cells: setupData.cells ?? null,
   }),
 
@@ -67,14 +113,14 @@ export const Game = (setupData: SetupData): BgioGame<GameState> => ({
 
       // cells and knownCells will be already set or set in generateClassicBoard
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      if (G.knownCells![id] !== false || G.gamemode === "p") {
+      if (G.cells![id].known !== false || G.gamemode === "p") {
         return INVALID_MOVE;
       }
 
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      if (Number.isInteger(G.cells![id])) {
+      if (Number.isInteger(G.cells![id].value)) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        G.knownCells![id] = true;
+        G.cells![id].known = true;
       } else {
         events.endGame({ isWin: false });
       }
@@ -87,28 +133,28 @@ export const Game = (setupData: SetupData): BgioGame<GameState> => ({
 
       // cells and knownCells will be already set or set in generateClassicBoard
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      if (G.knownCells![id] === true) {
+      if (G.cells![id].known === true) {
         return INVALID_MOVE;
       }
 
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      G.knownCells![id] = action;
+      G.cells![id].known = action;
+
+      calcAttackedCells(G);
 
       if (isWinCondition(G, id)) {
         events.endGame({ isWin: true });
       }
     },
 
     removeHint: ({ G, events }, id: number) => {
-      if (
-        G.knownCells?.[id] === true ||
-        G.cells === null ||
-        G.knownCells === null
-      ) {
+      if (G.cells === null || G.cells[id].known === true) {
         return INVALID_MOVE;
       }
 
-      G.knownCells[id] = false;
+      G.cells[id].known = false;
+
+      calcAttackedCells(G);
 
       if (isWinCondition(G, id)) {
         events.endGame({ isWin: true });

src/Game.ts

@@ -4,7 +4,7 @@ import { SetupData } from "./Game";
 onmessage = (e) => {
   const { seed, pieces, size, count, difficulty } = e.data as SetupData;
 
-  const { cells, knownCells, error } = generatePuzzleBoard(
+  const { cells, error } = generatePuzzleBoard(
     seed,
     pieces,
     size,
@@ -15,6 +15,6 @@ onmessage = (e) => {
   if (error) {
     postMessage(error);
   } else {
-    postMessage({ cells, knownCells });
+    postMessage({ cells });
   }
 };

src/PuzzleGenWorker.ts

@@ -5,6 +5,7 @@ import { Timer, TimerRefAttributes } from "./Timer";
 import { BoardPropsWithReload } from "./Client";
 import { BoardHeaderButton } from "./BoardHeaderButton";
 import { BoardReport } from "./BoardReport";
+import { SettingsPanel } from "./SettingsPanel";
 
 export interface BoardContextState extends BoardPropsWithReload {
   currAction: string;
@@ -36,7 +37,8 @@ export const BoardWrapper = (props: BoardPropsWithReload): JSX.Element => {
   };
 
   const numPiecesPlaced =
-    props.G.knownCells?.filter((cell) => typeof cell === "string")?.length ?? 0;
+    props.G.cells?.filter(({ known }) => typeof known === "string")?.length ??
+    0;
 
   const numPiecesRemaining = props.G.count - numPiecesPlaced;
 
@@ -67,6 +69,7 @@ export const BoardWrapper = (props: BoardPropsWithReload): JSX.Element => {
               )}
             </div>
           </div>
+          <SettingsPanel />
         </div>
         <ActionBar />
       </div>

src/assets/settings.png

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { getPiece } from "../Pieces";
+import { useAppSelector } from "../store";
 import { useBoardContext } from "./BoardWrapper";
 
 interface CellProps {
@@ -8,8 +9,12 @@ interface CellProps {
 
 export const Cell = ({ id }: CellProps): JSX.Element => {
   const { G, ctx, moves, currAction, timer } = useBoardContext();
+  const isAttackedCellValuesEnabled = useAppSelector(
+    (s) => s.settings.isAttackedCellValuesEnabled
+  );
+
   let className = "cell";
-  let value: string | JSX.Element = "";
+  let value: string | number | JSX.Element = "";
 
   const isWhite = useMemo(() => {
     const y = Math.floor(id / G.size);
@@ -27,7 +32,7 @@ export const Cell = ({ id }: CellProps): JSX.Element => {
     }
 
     if (currAction !== "") {
-      if (G.knownCells?.[id] === currAction) {
+      if (G.cells?.[id].known === currAction) {
         moves.removeHint(id);
       } else {
         moves.placeHint(id, currAction);
@@ -37,6 +42,33 @@ export const Cell = ({ id }: CellProps): JSX.Element => {
     }
   };
 
+  if (G.cells === null) {
+    value = "";
+  } else if (
+    ctx.gameover?.isWin === false &&
+    !Number.isInteger(G.cells[id].value)
+  ) {
+    // Display pieces of gameover
+    value = <img src={getPiece(String(G.cells[id].value))} />;
+    className += " red";
+  } else if (G.cells[id].known === true) {
+    value = Number(G.cells[id].value);
+    if (isAttackedCellValuesEnabled) {
+      value -= G.cells[id].attackedValue;
+    }
+    if (value === 0 && G.cells[id].value === 0) {
+      value = "";
+    }
+    if (typeof value === "number" && value < 0) {
+      className += " red";
+    } else {
+      className += " open";
+      className += isWhite ? " white" : " black";
+    }
+  } else if (G.cells[id].known !== false && G.cells[id].known !== true) {
+    value = <img src={getPiece(String(G.cells[id].known))} />;
+  }
+
   // Text color
   const colors = [
     "#0001FD", // 1
@@ -49,24 +81,11 @@ export const Cell = ({ id }: CellProps): JSX.Element => {
     "#808080", // 8
   ];
   let color = "";
-  if (G.cells === null || G.cells[id] === 0) color = "";
-  else if (G.cells[id] > 8) color = colors[7];
-  else color = colors[Number(G.cells[id]) - 1];
-
-  if (G.cells === null || G.knownCells === null) {
-    value = "";
-  } else if (ctx.gameover?.isWin === false && !Number.isInteger(G.cells[id])) {
-    // Display pieces of gameover
-    value = <img src={getPiece(String(G.cells[id]))} />;
-    className += " red";
-  } else if (G.knownCells[id] === true) {
-    if (G.cells[id] !== 0) {
-      value = String(G.cells[id]);
-    }
-    className += " open";
-    className += isWhite ? " white" : " black";
-  } else if (G.knownCells[id] !== false && G.knownCells[id] !== true) {
-    value = <img src={getPiece(String(G.knownCells[id]))} />;
+  if (typeof value === "number") {
+    if (value === 0) color = "";
+    else if (value > 8) color = colors[7];
+    else if (value < 0) color = "white";
+    else color = colors[value - 1];
   }
 
   return (
@@ -75,7 +94,7 @@ export const Cell = ({ id }: CellProps): JSX.Element => {
       style={{ color: color, cursor: "pointer" }}
       onClick={onCellClick}
     >
-      {value}
+      {typeof value === "number" ? value.toString() : value}
     </td>
   );
 };