feat: 📱 Design Fix

skyrunner360 · Apr 14, 2024 · 6a1d5d0 · 6a1d5d0
1 parent 5e4d8f4
commit 6a1d5d0
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 20 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -17,13 +17,13 @@ function App() {
           <Home />
         ) : (
           <div className="grid grid-cols-3 p-2 ">
-            <div className="border border-red-500 p-2">
+            <div className=" p-2">
               <PlayerInfo />
             </div>
-            <div className="border border-red-500 p-2">
+            <div className=" p-2">
               <Board />
             </div>
-            <div className="border border-red-500 p-2">
+            <div className=" p-2">
               <Dice />
             </div>
           </div>

diff --git a/src/Components/Board.tsx b/src/Components/Board.tsx
@@ -29,7 +29,7 @@ const Board = () => {
           </div>
         )}
       </div>
-      <table className="relative">
+      <table className="relative shadow-2xl ">
         <img
           src="/Snake_silhouette.svg?url"
           style={{ position: "absolute", top: 10, left: 20, zIndex: -1 }}
@@ -113,13 +113,14 @@ const Board = () => {
               {i.map((ij) => {
                 return (
                   <td
-                    className="p-4 border border-blue-400 text-center relative"
+                    className="p-4 border border-blue-400 text-center relative rounded-md text-base font-medium text-red-700"
                     key={ij}
                   >
                     {ij}
                     {playerPos.player1 === ij && (
                       <MdPersonPinCircle
                         size={30}
+                        color="black"
                         style={{
                           position: "absolute",
                           top: 0,
@@ -132,9 +133,11 @@ const Board = () => {
                     {playerPos.player2 === ij && (
                       <MdOutlinePersonPinCircle
                         size={30}
+                        color="black"
                         style={{
                           position: "absolute",
                           top: 0,
+
                           right: 0,
                           transform: "translate(-50,-50)",
                           zIndex: 2,

diff --git a/src/Components/Dice.tsx b/src/Components/Dice.tsx
@@ -41,15 +41,15 @@ const Dice = () => {
         ...(isPlayerFree && !gState[`player${currPlayer}`].move
           ? [`Player ${currPlayer} is Free to Move!`]
           : []),
+        ...(gState[`player${currPlayer}`].move
+          ? [`Player ${currPlayer} moves to Position ${currPlayerPos}.`]
+          : []),
         ...(snakeBite ? [`Player ${currPlayer} was BITTEN by Snake!`] : []),
         ...(ladderRidden ? [`Player ${currPlayer} RIDES Ladder!`] : []),
         ...(snakeBite
-          ? [`Player ${currPlayer} Moves to ${snakeBite[1]}.`]
+          ? [`Player ${currPlayer} Moves to Position ${snakeBite[1]}.`]
           : ladderRidden
-          ? [`Player ${currPlayer} Moves to ${ladderRidden[1]}.`]
-          : []),
-        ...(gState[`player${currPlayer}`].move
-          ? [`Player ${currPlayer} moves to Position ${currPlayerPos}.`]
+          ? [`Player ${currPlayer} Moves to Position ${ladderRidden[1]}.`]
           : []),
         `Player ${newPlayer}'s Turn.`,
       ]);
@@ -83,7 +83,13 @@ const Dice = () => {
           playerPos.player2 + newVal >= 100
         ) {
           setGState({ ...gState, global: "over" });
-          setGameLog([...gameLog, `Player ${currPlayer} WON!`, "GAME OVER"]);
+          setGameLog([
+            ...gameLog,
+            `Player ${currPlayer} Rolled Dice to ${newVal}.`,
+            `Player ${currPlayer} moves to Position 100.`,
+            `Player ${currPlayer} WON!`,
+            "GAME OVER",
+          ]);
           setPlayerPos({ ...playerPos, [`player${currPlayer}`]: 100 });
           setDiceVal(0);
         }
@@ -93,7 +99,13 @@ const Dice = () => {
           playerPos.player2 + newVal >= 100
         ) {
           setGState({ ...gState, global: "over" });
-          setGameLog([...gameLog, `Player ${currPlayer} WON!`, "GAME OVER"]);
+          setGameLog([
+            ...gameLog,
+            `Player ${currPlayer} Rolled Dice to ${newVal}.`,
+            `Player ${currPlayer} moves to Position 100.`,
+            `Player ${currPlayer} WON!`,
+            "GAME OVER",
+          ]);
           setPlayerPos({ ...playerPos, [`player${currPlayer}`]: 100 });
           setDiceVal(0);
         }
@@ -106,7 +118,7 @@ const Dice = () => {
     <div>
       <div className="flex justify-center content-center items-center">
         <button
-          className={`border-none ${diceRolling && "rolling"} ${
+          className={`border-none  ${diceRolling && "rolling"} ${
             typeOfDice === "crooked" && "text-[#c4de31]"
           }`}
           onClick={rollDice}
@@ -116,7 +128,7 @@ const Dice = () => {
         </button>
       </div>
       <div className="grid">
-        <i className="justify-self-center">Click to Roll Dice</i>
+        <i className="justify-self-center text-xl">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"

diff --git a/src/Components/PlayerInfo.tsx b/src/Components/PlayerInfo.tsx
@@ -1,25 +1,37 @@
 import { useRecoilValue } from "recoil";
 import { gameLogs, playerPositions } from "../states/BoardStates";
 import { MdOutlinePersonPinCircle, MdPersonPinCircle } from "react-icons/md";
+import { useEffect } from "react";
 
 const PlayerInfo = () => {
   const playerPos = useRecoilValue(playerPositions);
   const gLogs = useRecoilValue(gameLogs);
+  useEffect(() => {
+    const scrollDiv = document.getElementById("logContainer");
+    scrollDiv.scrollTop = scrollDiv?.scrollHeight;
+  }, [gLogs]);
+
   return (
     <div>
-      <h3>Game Logs</h3>
-      <div className="border border-gray-500 overflow-auto h-20">
+      <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-1" key={log + +new Date()}>
+          <p
+            className="p-3 border border-gray-200 rounded-md shadow-md text-lg"
+            key={log + +new Date()}
+          >
             {log}
           </p>
         ))}
       </div>
-      <h3>Player Positions</h3>
-      <p className="flex items-center">
+      <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">
+      <p className="flex items-center font-medium text-lg">
         Player 2 <MdOutlinePersonPinCircle size={50} /> :- {playerPos.player2}
       </p>
     </div>