Merge pull request #61 from JetonDAO/dev

Dev
JetonDAO · Oct 15, 2024 · 2d3d1d6 · 2d3d1d6
2 parents 9505d1a + 74d7ab6
commit 2d3d1d6
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 38 deletions.
diff --git a/apps/web/src/app/games/[id]/components/PlayerActions.tsx b/apps/web/src/app/games/[id]/components/PlayerActions.tsx
@@ -20,6 +20,7 @@ export default function PlayerActions() {
   const { game } = useContext(JetonContext);
   const players = useSelector(selectGamePlayers$());
   const myCards = useSelector(selectMyCards$());
+  const [loading, setLoading] = useState(false);
 
   const [queuedAction, setQueuedAction] = useState<PlacingBettingActions | null>(null);
   const [isActionQueued, setIsActionQueued] = useState(false);
@@ -65,10 +66,16 @@ export default function PlayerActions() {
     setIsActionQueued(false);
   };
 
-  const takePlayerAction = (action: PlacingBettingActions) => {
+  const takePlayerAction = async (action: PlacingBettingActions) => {
     console.log(`Action taken: ${action}`);
+    setLoading(true);
+
     if (!game) throw new Error("Must exist by now");
-    game.placeBet(action);
+    try {
+      await game.placeBet(action);
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
@@ -78,15 +85,15 @@ export default function PlayerActions() {
         actions.map((action) => (
           <button
             key={action}
-            className={`capitalize text-center focus:outline-[#b87d5b] z-20 relative nes-btn is-warning disabled:hover:cursor-not-allowed w-full py-2 sm:py-4 text-[10px] sm:text-base text-white flex hover:brightness-90 ${
+            className={`capitalize text-center focus:outline-[#b87d5b] z-20 disabled:bright relative nes-btn justify-center is-warning disabled:hover:cursor-not-allowed w-full py-2 sm:py-4 text-[10px] sm:text-base text-white flex hover:brightness-90 ${
               isActionQueued && queuedAction === action ? "cursor-pointer" : ""
             }`}
             onClick={() => handlePlayerAction(action)}
             disabled={
-              !availableActions || !availableActions.includes(action) || queuedAction === action
+              !availableActions || !availableActions.includes(action) || isActionQueued || loading
             }
           >
-            {`${action} ${isActionQueued && queuedAction === action ? "(Queued)" : ""}`}
+            {`${action} ${isActionQueued && queuedAction === action ? "(Q)" : ""}`}
           </button>
         ))}
       <div className="justify-center flex absolute shrink-0 -translate-x-4 sm:translate-x-0 -top-20 -right-5 sm:-top-28 sm:right-44 z-10">
@@ -99,7 +106,7 @@ export default function PlayerActions() {
                     ${
                       i === 0
                         ? "animate-dealAndRotate1"
-                        : "animate-dealAndRotate2 right-4 sm:right-14"
+                        : "animate-dealAndRotate2 right-4 sm:right-8"
                     }
                   `}
                 key={cardName}

diff --git a/apps/web/src/app/games/[id]/components/PrivateCards.tsx b/apps/web/src/app/games/[id]/components/PrivateCards.tsx
@@ -42,14 +42,18 @@ export default function PrivateCards({
   }, [seats, dealCardEffect]);
 
   useEffect(() => {
-    if (gameStatus === GameStatus.ShowDown) {
+    if (gameStatus === GameStatus.ShowDown && cards) {
+      console.log("fuck show down");
+
+      console.log(cards);
+
       setReceivedCards(true);
 
       setTimeout(() => {
         setRevealedCards(true);
       }, 600);
     }
-  });
+  }, [gameStatus, cards]);
 
   return (
     <>

diff --git a/apps/web/src/app/games/[id]/components/Seat.tsx b/apps/web/src/app/games/[id]/components/Seat.tsx
@@ -101,27 +101,21 @@ export default function Seat({
     mounted.current = true;
   }, []);
 
-  // Reset last action based on game status
   useEffect(() => {
-    console.log("status: ", gameStatus);
-
     if (
       gameStatus === GameStatus.DrawRiver ||
       gameStatus === GameStatus.DrawFlop ||
       gameStatus === GameStatus.DrawTurn ||
+      gameStatus === GameStatus.Shuffle ||
+      gameStatus === GameStatus.ShowDown ||
       isPlayerTurn
     ) {
       setLastAction("");
-    }
-  }, [gameStatus, isPlayerTurn]);
-
-  // Update last action for the player
-  useEffect(() => {
-    if (player.roundAction) {
+    } else if (player.roundAction) {
       const { action, amount } = player.roundAction;
       setLastAction(`${action} ${amount}`);
     }
-  }, [player.roundAction]);
+  }, [player.roundAction, gameStatus, isPlayerTurn]);
 
   return (
     <div
@@ -139,9 +133,9 @@ export default function Seat({
       >
         <Image
           draggable={false}
-          src={playerAvatar} // playerAvatar is always a valid image
+          src={playerAvatar}
           alt="avatar"
-          className={`aspect-square object-contain bg-black/70 h-full animate-grow-in grow-0 rounded-full shrink-0 border-2 md:border-8 ${
+          className={`aspect-square object-contain transition-all bg-black/70 h-full animate-grow-in grow-0 rounded-full shrink-0 border-2 md:border-8 ${
             shufflingPlayer?.id === player.id ? "scale-125 animate-bounce delay-1000" : ""
           } ${isPlayerTurn ? "ring-8 animate-bounce ring-amber-600 duration-500" : ""} ${
             player.status === PlayerStatus.sittingOut || player.status === PlayerStatus.folded

diff --git a/apps/web/src/app/games/[id]/page.tsx b/apps/web/src/app/games/[id]/page.tsx
@@ -86,7 +86,7 @@ export default function PlayPage({ params }: { params: { id: string } }) {
   }, [isWalletLoading, connected, router, toffState]);
 
   useEffect(() => {
-    if (myCards && myCards.length > 0) {
+    if (gameStatus === GameStatus.DrawPrivateCards || gameStatus === GameStatus.ShowDown) {
       const privateCards = reorderedPlayers.reduce(
         (acc, player, seat) => {
           if (player) {
@@ -99,7 +99,13 @@ export default function PlayPage({ params }: { params: { id: string } }) {
 
       setPrivateCards(privateCards);
     }
-  }, [reorderedPlayers, myCards]);
+  }, [reorderedPlayers, gameStatus]);
+
+  useEffect(() => {
+    if (gameStatus === GameStatus.Shuffle) {
+      setDrawPrivateCards(false);
+    }
+  }, [gameStatus]);
 
   return (
     <GameContainer>
@@ -127,18 +133,3 @@ export default function PlayPage({ params }: { params: { id: string } }) {
     </GameContainer>
   );
 }
-
-// mock shuffling for testing
-// const [dealerSeat, setDealerSeat] = useState(1);
-
-// useEffect(() => {
-//   const timeout = setTimeout(() => {
-//     const dealerInterval = setInterval(() => {
-//       setDealerSeat((prevSeat) => (prevSeat < 9 ? prevSeat + 1 : 1));
-//     }, 3000);
-
-//     return () => clearInterval(dealerInterval);
-//   }, 2000);
-
-//   return () => clearTimeout(timeout);
-// }, []);
diff --git a/apps/web/src/app/games/[id]/state/actions/gameEventHandlers.ts b/apps/web/src/app/games/[id]/state/actions/gameEventHandlers.ts
@@ -117,6 +117,7 @@ export function receivedPublicCardsHandler({ cards, round }: ReceivedPublicCards
 
 export function receivedShowDown(data: ShowDownEvent) {
   console.log("received showdown event", data);
+  state$.gameState.status.set(GameStatus.ShowDown);
   state$.gameState.players.forEach((player) => {
     const eventPlayer = data[player.id.get()!];
     if (eventPlayer) {

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
@@ -13,7 +13,7 @@
 
 @media (min-width: 768px) {
   .seat-1 {
-    top: 80% !important;
+    top: 77% !important;
     left: 50% !important;
     transform: translateX(-50%);
   }