feat: kill toast upon draw + pop up card drawer

0xFableOrg · Feb 26, 2024 · 2e4d0fe · 2e4d0fe
1 parent b63a0ec
commit 2e4d0fe
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/webapp/src/components/hand.tsx b/packages/webapp/src/components/hand.tsx
@@ -49,7 +49,9 @@ const Hand = ({
 
   return (
     <div
-      className={`${className} py-4 flex flex-row items-center justify-evenly bottom-0 w-[95%] space-x-2`}
+      className={`${className} ${
+        isLastCardGlowing ? "translate-y-0" : null
+      } py-4 flex flex-row items-center justify-evenly bottom-0 w-[95%] space-x-2`}
       ref={setNodeRef}
       onMouseEnter={() => {
         setIsFocused(true)

diff --git a/packages/webapp/src/hooks/useScrollBox.ts b/packages/webapp/src/hooks/useScrollBox.ts
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, RefObject } from "react"
 import throttle from "lodash/throttle"
+import { toast } from "sonner"
 
 const timing = (1 / 60) * 1000
 
@@ -106,6 +107,8 @@ function useScrollBox(scrollRef: RefObject<HTMLDivElement>, cards: readonly bigi
 
   const triggerLastCardGlow = useCallback(() => {
     setIsLastCardGlowing(true)
+    // dismiss the toast displaying draw status
+    toast.dismiss("DRAW_CARD_TOAST")
     setTimeout(() => {
       setIsLastCardGlowing(false)
     }, 2500)

diff --git a/packages/webapp/src/pages/play.tsx b/packages/webapp/src/pages/play.tsx
@@ -121,6 +121,7 @@ const Play: FablePage = ({ isHydrated }) => {
     // Automatically submit the card draw transaction when it's our turn
     if (gameData && currentPlayer(gameData) === playerAddress && !cantDrawCard) {
       toast.promise(doDrawCard, {
+        id: "DRAW_CARD_TOAST",
         loading: "Your Turn - Drawing Card...",
         success: () => {
           if (showDrawButton) setShowDrawButton(false)
@@ -129,7 +130,8 @@ const Play: FablePage = ({ isHydrated }) => {
         error: () => {
           if(!showDrawButton) setShowDrawButton(true) 
           return null as any // don't trigger the toast
-        }
+        },
+        dismissible: true
       })
     }
   }, [cancellationHandler, cantDrawCard, gameID, playerAddress, doDrawCard, gameData, showDrawButton])
@@ -223,7 +225,7 @@ const Play: FablePage = ({ isHydrated }) => {
             cards={playerHand as readonly bigint[]}
             setLoading={setLoading}
             cancellationHandler={cancellationHandler}
-            className="absolute left-0 right-0 mx-auto z-[100] translate-y-1/2 transition-all duration-500 rounded-xl ease-in-out hover:translate-y-0"
+            className={`absolute left-0 right-0 mx-auto z-[100] translate-y-1/2 transition-all duration-500 rounded-xl ease-in-out hover:translate-y-0`}
           />
           <div className="grid-col-1 relative mx-6 mb-6 grid grow grid-rows-[6]">
             <PlayerBoard
@@ -239,11 +241,13 @@ const Play: FablePage = ({ isHydrated }) => {
                     className="absolute right-96 bottom-1/2 z-50 !translate-y-1/2 rounded-lg border-[.1rem] border-base-300 font-mono hover:scale-105"
                     onClick={() => {
                       toast.promise(doDrawCard, {
+                        id: "DRAW_CARD_TOAST",
                         loading: "Drawing Card...",
                         success: () => {
                           if (showDrawButton) setShowDrawButton(false)
                           return "Card Drawn Successfully!"
-                        }
+                        },
+                        dismissible: true
                       })
                     }}
                   >