feat: 💄 Game Complete!

skyrunner360 · Apr 14, 2024 · 3026a97 · 3026a97
1 parent 6a1d5d0
commit 3026a97
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 53 deletions.
diff --git a/public/Snake_silhouette.svg b/public/Snake_silhouette.svg
diff --git 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
@@ -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
@@ -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
@@ -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>
   );
 };