Supreme/fixes (#167)

* wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * fixed buttons * delete tests
realm-of-ra · Aug 30, 2024 · 5c079a5 · 5c079a5
1 parent d7ba177
commit 5c079a5
Show file tree

Hide file tree

Showing 27 changed files with 5,708 additions and 7,621 deletions.
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
diff --git a/client/src/assets/arrow-down.svg b/client/src/assets/arrow-down.svg
diff --git a/client/src/assets/arrow-up.svg b/client/src/assets/arrow-up.svg
diff --git a/client/src/assets/braavos.png b/client/src/assets/braavos.png
diff --git a/client/src/assets/brown-bg.png b/client/src/assets/brown-bg.png
diff --git a/client/src/assets/connect.png b/client/src/assets/connect.png
diff --git a/client/src/assets/countdown_background.png b/client/src/assets/countdown_background.png
diff --git a/client/src/assets/game_board.png b/client/src/assets/game_board.png
diff --git a/client/src/assets/leaderboard.png b/client/src/assets/leaderboard.png
diff --git a/client/src/assets/leaderboard_bg.png b/client/src/assets/leaderboard_bg.png
diff --git a/client/src/assets/mancala_duels.png b/client/src/assets/mancala_duels.png
diff --git a/client/src/assets/mute_flat.png b/client/src/assets/mute_flat.png
diff --git a/client/src/assets/unmute_flat.png b/client/src/assets/unmute_flat.png
diff --git a/client/src/components/gameplay/game-board.tsx b/client/src/components/gameplay/game-board.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import Pit from "@/components/pit";
+import { BottomPit, TopPit } from "@/components/pits";
 import { Dispatch, SetStateAction } from "react";
+import clsx from "clsx";
 
 interface GameBoardProps {
   game_players: any; // Replace 'any' with the correct type from your GraphQL query
@@ -24,12 +25,16 @@ const GameBoard: React.FC<GameBoardProps> = ({
   setTimeRemaining,
 }) => {
   return (
-    <div className="w-full h-[400px] border-2 border-[#32363D] rounded-l-full rounded-r-full flex flex-col items-center justify-center bg-[#15181E] mt-24">
-      <div className="w-[97%] h-[370px] rounded-l-full rounded-r-full flex flex-row items-center justify-between space-x-5 relative">
-        <div className="w-56 h-[350px] border-2 border-[#32363D] rounded-l-[165px] rounded-r-3xl relative">
+    <div className="w-full h-[400px] flex flex-col items-center justify-center mt-24">
+      <div className="w-[1170px] h-[400px] flex flex-row items-center justify-between space-x-5 relative bg-[url('./assets/game_board.png')] bg-contain bg-center bg-no-repeat">
+        <div className="w-fit h-[240px] flex items-center mb-5">
           {/* Player 1 pot */}
-          <div className="flex flex-row justify-end items-center px-2.5 h-full">
-            <div className="flex flex-col flex-wrap space-y-1.5 max-h-[80%] gap-2 items-center justify-center px-5">
+          <div className="flex flex-row justify-end items-center px-2.5 w-12 h-[70%] ml-[168px]">
+            <div className={clsx("max-h-full items-center justify-center px-5 grid gap-y-1.5 gap-x-5",
+              game_players?.player_one?.edges?.[0]?.node?.mancala > 7 && 'grid-cols-2',
+              game_players?.player_one?.edges?.[0]?.node?.mancala > 14 && 'grid-cols-3',
+              game_players?.player_one?.edges?.[0]?.node?.mancala > 21 && 'grid-cols',
+            )}>
               {Array.from(
                 {
                   length:
@@ -38,30 +43,35 @@ const GameBoard: React.FC<GameBoardProps> = ({
                 (_, seedIndex) => (
                   <div
                     key={seedIndex}
-                    className="w-[20px] h-[20px] bg-white rounded-full"
+                    className={clsx(game_players?.player_one?.edges?.[0]?.node?.mancala > 6 && 'w-[14px] h-[14px]',
+                      game_players?.player_one?.edges?.[0]?.node?.mancala >= 12 && 'w-[12px] h-[12px]',
+                      game_players?.player_one?.edges?.[0]?.node?.mancala >= 16 && 'w-[10px] h-[10px]',
+                      game_players?.player_one?.edges?.[0]?.node?.mancala >= 20 && 'w-[7.5px] h-[7.5px]',
+                      'w-[16px] h-[16px] bg-white rounded-full')
+                    }
                   />
                 ),
               )}
             </div>
           </div>
-          <div className="absolute inset-y-0 self-center left-0 bg-[#191C22] p-3.5 rounded-y-lg rounded-r-lg">
-            <p className="text-white">
+          <div className="absolute inset-y-0 self-center left-32 ml-1.5 mb-6">
+            <p className="text-white text-center">
               {game_players?.player_one?.edges?.[0]?.node?.mancala}
             </p>
           </div>
         </div>
-        <div className="w-[75%] h-[350px] flex flex-col items-start justify-between space-y-2">
+        <div className="w-[700px] h-[350px] flex flex-col items-center justify-between space-y-2 absolute left-[206px]">
           {/* Player 1 */}
-          <div className="h-[175px] w-full flex flex-row justify-between items-center">
-            <div className="flex flex-row justify-center flex-1 space-x-5">
+          <div className="h-[175px] w-full flex flex-row justify-center items-center ml-3.5">
+            <div className="flex flex-row justify-center flex-1 items-center w-[100px] space-x-5">
               {Array.from({ length: 6 }, (_, zero_index) => zero_index + 1)
                 .reverse()
                 .map((pit_key, i) => (
-                  <Pit
+                  <TopPit
                     key={i}
                     amount={
                       game_players?.player_one?.edges?.[0]?.node?.[
-                        `pit${pit_key}` as "pit1"
+                      `pit${pit_key}` as "pit1"
                       ]
                     }
                     address={
@@ -90,11 +100,11 @@ const GameBoard: React.FC<GameBoardProps> = ({
                 new Array(6).keys(),
                 (_, zero_index) => zero_index + 1,
               ).map((pit_key, i) => (
-                <Pit
+                <BottomPit
                   key={i}
                   amount={
                     game_players?.player_two?.edges?.[0]?.node?.[
-                      `pit${pit_key}` as "pit1"
+                    `pit${pit_key}` as "pit1"
                     ]
                   }
                   address={game_players?.player_two?.edges?.[0]?.node?.address}
@@ -107,15 +117,14 @@ const GameBoard: React.FC<GameBoardProps> = ({
                   winner={game_metadata?.game_data?.edges?.[0]?.node?.winner}
                   setTimeRemaining={setTimeRemaining}
                   time_between_move={parseInt(game_node?.time_between_move, 16)}
-                  reverse={true}
                 />
               ))}
             </div>
           </div>
         </div>
-        <div className="w-56 h-[350px] border-2 border-[#32363D] rounded-r-[165px] relative rounded-l-3xl">
+        <div className="w-fit h-[220px] mt-14 relative">
           {/* Player 2 pot */}
-          <div className="flex flex-row justify-start items-center px-2.5 h-full">
+          <div className="flex flex-row justify-center items-center px-2.5 w-12 h-[70%] mr-[168px]">
             <div className="flex flex-col flex-wrap space-y-1.5 max-h-[80%] gap-2 items-center justify-center px-1.5">
               {Array.from(
                 {
@@ -125,14 +134,19 @@ const GameBoard: React.FC<GameBoardProps> = ({
                 (_, seedIndex) => (
                   <div
                     key={seedIndex}
-                    className="w-[20px] h-[20px] bg-white rounded-full"
+                    className={clsx(game_players?.player_one?.edges?.[0]?.node?.mancala > 6 && 'w-[14px] h-[14px]',
+                      game_players?.player_one?.edges?.[0]?.node?.mancala >= 12 && 'w-[12px] h-[12px]',
+                      game_players?.player_one?.edges?.[0]?.node?.mancala >= 16 && 'w-[10px] h-[10px]',
+                      game_players?.player_one?.edges?.[0]?.node?.mancala >= 20 && 'w-[7.5px] h-[7.5px]',
+                      'w-[16px] h-[16px] bg-white rounded-full')
+                    }
                   />
                 ),
               )}
             </div>
           </div>
-          <div className="absolute inset-y-0 self-center right-0 bg-[#191C22] p-3.5 rounded-y-lg rounded-l-lg">
-            <p className="text-white">
+          <div className="absolute inset-y-0 self-center right-32 bottom-20 w-7 h-12">
+            <p className="text-white text-center h-full flex flex-col items-center justify-center">
               {game_players?.player_two?.edges?.[0]?.node?.mancala}
             </p>
           </div>

diff --git a/client/src/components/header.tsx b/client/src/components/header.tsx
@@ -19,13 +19,12 @@ import { Link } from "react-router-dom";
 import { constants } from "starknet";
 import { Button } from "@material-tailwind/react";
 import { UserIcon, ChevronDownIcon } from "@heroicons/react/24/solid";
-import { StarkProfile } from "@/types";
 import { useDojo } from "@/dojo/useDojo";
 import clsx from "clsx";
 import icon3 from "../assets/LogoW.svg";
 import connectB from "../assets/connect.svg";
 import leader from "../assets/leader.svg";
-import profile from "../assets/profile.svg";
+import profileImage from "../assets/profile.svg";
 import lobby from "../assets/lobby.svg";
 import {
   MancalaGameEdge,
@@ -179,31 +178,29 @@ export default function Header() {
                   className="p-0 flex font-medium justify-between relative items-center bg-[#171922] w-fit text-sm text-[#BFC5D4] whitespace-nowrap rounded-full"
                   onClick={handleDropdownToggleClose}
                 >
-                  <div className="flex flex-row items-center w-fit">
-                    <div className="px-10 py-5">
-                      <p className="">{truncateString(address)}</p>
-                    </div>
+                  <div className="flex flex-row items-center w-fit px-10 py-5">
+                    <p className="">{truncateString(address)}</p>
                   </div>
                 </Button>
 
                 {isDropdownClose && (
                   <div className="absolute top-1/2 font-medium transform translate-y-6 w-[259px] right-0 mt-2 border border-[#272A32] bg-[#171922] text-[#BFC5D4] rounded-xl shadow-xl z-20">
                     <span className="flex w-full px-4 py-2 rounded-tl-xl rounded-tr-xl  bg-[#171922] hover:bg-[#272A32] hover:bg-opacity-50 cursor-pointer transition duration-300 ease-in-out">
-                      <img src={lobby} />
+                      <img src={profileImage} />
                       <Link to="/" className="block px-4 py-2">
-                        Lobby
+                        Profile
                       </Link>
                     </span>
                     <span className="flex w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] cursor-pointer">
-                      <img src={leader} />
+                      <img src={lobby} />
                       <Link to="/" className="block px-4 py-2">
-                        Leaderboard
+                        Lobby
                       </Link>
                     </span>
                     <span className="flex w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] cursor-pointer">
-                      <img src={profile?.profilePicture} />
+                      <img src={leader} />
                       <Link to="/" className="block px-4 py-2">
-                        Profile
+                        Leaderboard
                       </Link>
                     </span>
                     <span
@@ -240,7 +237,7 @@ export default function Header() {
 
             {isDropdownOpen && (
               <div className="absolute top-1/2 transform font-medium translate-y-5 w-[259px] right-0 mt-2 border border-[#272A32] bg-[#171922] text-[#BFC5D4] rounded-xl shadow-xl z-20">
-                <span className="flex w-full px-4 py-2 rounded-bl-xl rounded-br-xl  bg-[#171922] hover:bg-[#272A32] cursor-pointer">
+                <span className="flex w-full px-4 py-2 rounded-t-xl bg-[#171922] hover:bg-[#272A32] cursor-pointer">
                   <img src={connectB} />
                   <Link
                     to={{}}
@@ -250,24 +247,18 @@ export default function Header() {
                     Connect Wallet
                   </Link>
                 </span>
-                <span className="flex w-full px-4 py-2 rounded-tl-xl rounded-tr-xl  bg-[#171922] hover:bg-[#272A32] hover:bg-opacity-50 cursor-pointer transition duration-300 ease-in-out">
+                <span className="flex w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] hover:bg-opacity-50 cursor-pointer transition duration-300 ease-in-out">
                   <img src={lobby} />
                   <Link to="/" className="block px-4 py-2">
                     Lobby
                   </Link>
                 </span>
-                <span className="flex w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] cursor-pointer">
+                <span className="flex w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] cursor-pointer rounded-b-xl">
                   <img src={leader} />
                   <Link to="/" className="block px-4 py-2">
                     Leaderboard
                   </Link>
                 </span>
-                <span className="flex w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] cursor-pointer">
-                  <img src={profile?.profilePicture} />
-                  <Link to="/" className="block px-4 py-2">
-                    Profile
-                  </Link>
-                </span>
               </div>
             )}
           </div>