feat: ✨ Board with Players Display Working

skyrunner360 · Apr 13, 2024 · 9d6528a · 9d6528a
1 parent 3bd5534
commit 9d6528a
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 15 deletions.
diff --git a/src/Components/Board.tsx b/src/Components/Board.tsx
@@ -1,15 +1,34 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
+import { MdOutlinePersonPinCircle, MdPersonPinCircle } from "react-icons/md";
+import { useRecoilValue } from "recoil";
+import { playerPositions } from "../states/BoardStates";
 
 const Board = () => {
   const memoizedValue = useMemo(() => {
     const arr = Array.from({ length: 100 }, (_, i) => i + 1);
-    console.log("arr", arr);
     const newArr = [];
     while (arr.length) newArr.push(arr.splice(0, 10));
     return newArr;
   }, []);
+
+  const playerPos = useRecoilValue(playerPositions);
+
   return (
-    <div className="text-center p-1">
+    <div className="flex items-center">
+      <div className="p-2">
+        {playerPos.player1 === 0 && (
+          <div className="p-1 truncate text-nowrap">
+            <MdPersonPinCircle size={50} />
+            Player 1
+          </div>
+        )}
+        {playerPos.player2 === 0 && (
+          <div className="p-1 truncate text-nowrap">
+            <MdOutlinePersonPinCircle size={50} />
+            Player 2
+          </div>
+        )}
+      </div>
       <table>
         {memoizedValue.reverse().map((i, ind) => {
           return (
@@ -21,6 +40,12 @@ const Board = () => {
                     key={ij}
                   >
                     {ij}
+                    {playerPos.player1 === ij && (
+                      <MdPersonPinCircle size={30} />
+                    )}
+                    {playerPos.player2 === ij && (
+                      <MdOutlinePersonPinCircle size={30} />
+                    )}
                   </td>
                 );
               })}

diff --git a/src/Components/Dice.tsx b/src/Components/Dice.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { useRecoilState } from "recoil";
 import { diceValue } from "../states/DiceStates";
 import { diceRoll, DiceValToIconMap } from "../Utils";
+import { MdRestartAlt } from "react-icons/md";
 import {
   currentPlayer,
   gameLogs,
@@ -24,41 +25,74 @@ const Dice = () => {
     setGameLog([
       ...gameLog,
       `Player ${currPlayer} Rolled Dice to ${newVal}.`,
-      ...(isPlayerFree ? [`Player ${currPlayer} is Free to Move!`] : []),
+      ...(isPlayerFree && !gState[`player${currPlayer}`].move
+        ? [`Player ${currPlayer} is Free to Move!`]
+        : []),
       `Player ${newPlayer}'s Turn.`,
     ]);
     setCurrPlayer(newPlayer);
     setPlayerPos({
       player1:
         currPlayer === 1 && isPlayerFree && !gState["player1"].move
-          ? newVal
+          ? 1
           : gState["player1"].move && currPlayer === 1
           ? playerPos.player1 + newVal
           : playerPos.player1,
       player2:
         currPlayer === 2 && isPlayerFree && !gState["player2"].move
-          ? newVal
+          ? 1
           : gState["player2"].move && currPlayer === 2
           ? playerPos.player2 + newVal
           : playerPos.player2,
     });
     if (isPlayerFree) {
       setGState({ ...gState, [`player${currPlayer}`]: { move: true } });
+      if (
+        playerPos.player1 + newVal >= 100 ||
+        playerPos.player2 + newVal >= 100
+      ) {
+        setGState({ ...gState, global: "over" });
+        setGameLog([...gameLog, `Player ${currPlayer} WON!`, "GAME OVER"]);
+        setPlayerPos({ ...playerPos, [`player${currPlayer}`]: 100 });
+        setDiceVal(0);
+      }
     } else {
-      setGState({ ...gState, global: "started" });
+      if (
+        playerPos.player1 + newVal >= 100 ||
+        playerPos.player2 + newVal >= 100
+      ) {
+        setGState({ ...gState, global: "over" });
+        setGameLog([...gameLog, `Player ${currPlayer} WON!`, "GAME OVER"]);
+        setPlayerPos({ ...playerPos, [`player${currPlayer}`]: 100 });
+        setDiceVal(0);
+      } else {
+        setGState({ ...gState, global: "started" });
+      }
     }
-    console.log("Game states", gState);
   };
 
   return (
     <div>
       <div className="flex justify-center content-center items-center">
-        <div className="cursor-pointer" onClick={rollDice}>
+        <button
+          className="border-none"
+          onClick={rollDice}
+          disabled={gState.global === "over"}
+        >
           {DiceValToIconMap[diceVal]}
-        </div>
+        </button>
       </div>
       <div className="grid">
         <i className="justify-self-center">Click to Roll Dice</i>
+        {gState.global === "over" && (
+          <button
+            className="flex items-center gap-2 rounded-md border border-dashed border-red-400 justify-self-center my-4 p-4 bg-red-300 text-white"
+            onClick={() => window.location.reload()}
+          >
+            <MdRestartAlt size={30} />
+            Restart
+          </button>
+        )}
       </div>
     </div>
   );

diff --git a/src/Components/PlayerInfo.tsx b/src/Components/PlayerInfo.tsx
@@ -1,9 +1,9 @@
-import React from "react";
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilValue } from "recoil";
 import { gameLogs, playerPositions } from "../states/BoardStates";
+import { MdOutlinePersonPinCircle, MdPersonPinCircle } from "react-icons/md";
 
 const PlayerInfo = () => {
-  const [playerPos, setPlayerPos] = useRecoilState(playerPositions);
+  const playerPos = useRecoilValue(playerPositions);
   const gLogs = useRecoilValue(gameLogs);
   return (
     <div>
@@ -14,8 +14,12 @@ const PlayerInfo = () => {
         ))}
       </div>
       <h3>Player Positions</h3>
-      <p>Player 1 :- {playerPos.player1}</p>
-      <p>Player 2 :- {playerPos.player2}</p>
+      <p className="flex items-center">
+        Player 1 <MdPersonPinCircle size={50} /> :- {playerPos.player1}
+      </p>
+      <p className="flex items-center">
+        Player 2 <MdOutlinePersonPinCircle size={50} /> :- {playerPos.player2}
+      </p>
     </div>
   );
 };