From 3026a97b8a79262f1ab6a58fa6a62f675f9f6439 Mon Sep 17 00:00:00 2001
From: skyrunner360 <mathurrishi31@gmail.com>
Date: Sun, 14 Apr 2024 21:24:18 +0530
Subject: [PATCH] feat: :lipstick: Game Complete!

---
 public/Snake_silhouette.svg   |  2 +-
 src/App.tsx                   | 36 ++++++++++++++++++++-------
 src/Components/Board.tsx      | 16 +-----------
 src/Components/Dice.tsx       | 17 +++++++------
 src/Components/PlayerInfo.tsx | 46 ++++++++++++++++++++---------------
 5 files changed, 64 insertions(+), 53 deletions(-)

diff --git a/public/Snake_silhouette.svg b/public/Snake_silhouette.svg
index 4bc20a1..1a57da8 100644
--- a/public/Snake_silhouette.svg
+++ b/public/Snake_silhouette.svg
@@ -14,7 +14,7 @@
     <path
        d="M 65.11562,83.901823 C 64.723,82.097481 64.132583,80.017778 64,78.985635 C 63.353386,73.951805 55.749897,68.642484 41.307465,64.49571 C 36.463359,63.104849 30.773433,61.287338 28.663185,60.456797 C 16.246634,55.569949 12.012848,45.003341 17.5,32.595917 C 18.875,29.486798 20,26.256761 20,25.418058 C 20,22.84036 14.672206,17.083245 12.322804,17.000029 C 8.4760926,16.863778 3.9999996,10.526841 3.9999996,7.7721561 C 3.9999996,5.7090972 8.6423766,5.8979946 12.121889,6.7142755 C 12.121889,6.7142755 16.707686,7.3505404 18.206079,11.77761 C 18.676747,13.168219 18.412174,13.824336 19.365895,15.270318 C 20.319617,16.716299 23.361608,19.088465 24.163516,20.397883 C 26.814759,24.72704 26.639458,28.372353 24.021962,34.140796 C 22.934041,36.538358 22.034041,39.946842 22.021962,41.715204 C 21.992111,46.08534 26.956155,51.569999 33.42393,54.312978 C 36.215768,55.496995 43.326794,58.851934 49.226209,61.768398 C 62.136114,68.150604 64.950124,71.214854 66.183525,80.233673 C 67.134014,87.183804 66.736142,88.550456 65.11562,83.901823 z"
        id="path2451"
-       style="fill:#249141" />
+       style="fill:#5ef286" />
     <path
        d="M 5.071299,7.4469596 L 2.687492,5.4718053 L 2.3806008,4.1877549 M 2.828117,5.4249303 L 1.3653816,5.017479"
        id="path2453"
diff --git a/src/App.tsx b/src/App.tsx
index 4d5dcd3..ed587ce 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,10 +3,12 @@ import Board from "./Components/Board";
 import Dice from "./Components/Dice";
 import Home from "./Components/Home";
 import PlayerInfo from "./Components/PlayerInfo";
-import { gameState } from "./states/BoardStates";
+import { gameState, playerPositions } from "./states/BoardStates";
+import { MdOutlinePersonPinCircle, MdPersonPinCircle } from "react-icons/md";
 
 function App() {
   const { global } = useRecoilValue(gameState);
+  const playerPos = useRecoilValue(playerPositions);
   return (
     <>
       <div className="p-4">
@@ -16,15 +18,31 @@ function App() {
         {global === "notStarted" ? (
           <Home />
         ) : (
-          <div className="grid grid-cols-3 p-2 ">
-            <div className=" p-2">
-              <PlayerInfo />
+          <div>
+            <div className="grid grid-cols-3 p-2 ">
+              <div className="p-2 border-r-4 ">
+                <PlayerInfo />
+              </div>
+              <div className="p-2">
+                <Board />
+              </div>
+              <div className="p-2 grid items-center border-l-4">
+                <Dice />
+              </div>
             </div>
-            <div className=" p-2">
-              <Board />
-            </div>
-            <div className=" p-2">
-              <Dice />
+            <div className="p-2 flex justify-center gap-2 mt-28">
+              {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>
           </div>
         )}
diff --git a/src/Components/Board.tsx b/src/Components/Board.tsx
index a9389c0..1c18ee6 100644
--- a/src/Components/Board.tsx
+++ b/src/Components/Board.tsx
@@ -14,21 +14,7 @@ const Board = () => {
   const playerPos = useRecoilValue(playerPositions);
 
   return (
-    <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>
+    <div className="flex items-center justify-center">
       <table className="relative shadow-2xl ">
         <img
           src="/Snake_silhouette.svg?url"
diff --git a/src/Components/Dice.tsx b/src/Components/Dice.tsx
index c9c66e9..f0004af 100644
--- a/src/Components/Dice.tsx
+++ b/src/Components/Dice.tsx
@@ -78,10 +78,7 @@ const Dice = () => {
       });
       if (isPlayerFree) {
         setGState({ ...gState, [`player${currPlayer}`]: { move: true } });
-        if (
-          playerPos.player1 + newVal >= 100 ||
-          playerPos.player2 + newVal >= 100
-        ) {
+        if (currPlayerPos >= 100) {
           setGState({ ...gState, global: "over" });
           setGameLog([
             ...gameLog,
@@ -94,10 +91,7 @@ const Dice = () => {
           setDiceVal(0);
         }
       } else {
-        if (
-          playerPos.player1 + newVal >= 100 ||
-          playerPos.player2 + newVal >= 100
-        ) {
+        if (currPlayerPos >= 100) {
           setGState({ ...gState, global: "over" });
           setGameLog([
             ...gameLog,
@@ -138,6 +132,13 @@ const Dice = () => {
             Restart
           </button>
         )}
+        <button
+          className="flex items-center gap-2 rounded-xl border  justify-self-center my-4 p-4 bg-green-300 text-black"
+          onClick={() => window.location.reload()}
+        >
+          <MdRestartAlt size={30} />
+          Restart Game
+        </button>
       </div>
     </div>
   );
diff --git a/src/Components/PlayerInfo.tsx b/src/Components/PlayerInfo.tsx
index 4962f2e..801ae9e 100644
--- a/src/Components/PlayerInfo.tsx
+++ b/src/Components/PlayerInfo.tsx
@@ -13,27 +13,33 @@ const PlayerInfo = () => {
 
   return (
     <div>
-      <h3 className="font-bold text-2xl">Game Logs</h3>
-      <div
-        className="border border-blue-500 overflow-auto h-60 rounded-lg my-2 shadow-lg"
-        id="logContainer"
-      >
-        {gLogs?.map((log) => (
-          <p
-            className="p-3 border border-gray-200 rounded-md shadow-md text-lg"
-            key={log + +new Date()}
-          >
-            {log}
-          </p>
-        ))}
+      <div>
+        <h3 className="font-bold text-2xl text-blue-500">
+          Current Player Positions
+        </h3>
+        <p className="flex items-center font-medium text-lg">
+          Player 1 <MdPersonPinCircle size={50} /> :- {playerPos.player1}
+        </p>
+        <p className="flex items-center font-medium text-lg">
+          Player 2 <MdOutlinePersonPinCircle size={50} /> :- {playerPos.player2}
+        </p>
+      </div>
+      <div>
+        <h3 className="font-bold text-2xl text-green-400">Game Logs</h3>
+        <div
+          className="border border-blue-500 overflow-auto h-60 rounded-lg my-2 shadow-lg"
+          id="logContainer"
+        >
+          {gLogs?.map((log) => (
+            <p
+              className="p-3 border border-gray-200 rounded-md shadow-md text-lg"
+              key={log + +new Date()}
+            >
+              {log}
+            </p>
+          ))}
+        </div>
       </div>
-      <h3 className="font-bold text-2xl">Player Positions</h3>
-      <p className="flex items-center font-medium text-lg">
-        Player 1 <MdPersonPinCircle size={50} /> :- {playerPos.player1}
-      </p>
-      <p className="flex items-center font-medium text-lg">
-        Player 2 <MdOutlinePersonPinCircle size={50} /> :- {playerPos.player2}
-      </p>
     </div>
   );
 };