add to hand

JollyGrin · Oct 20, 2024 · 842c5f4 · 842c5f4
1 parent 3a939cb
commit 842c5f4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx
@@ -28,7 +28,13 @@ import { CountersTray } from "./Counters";
 /**
  * HAND - Drag and Drop tray of all the cards in your hand
  * */
-export const GameFooter = (props: GameStateActions & PlayerDataProps) => {
+export const GameFooter = ({
+  setHoverCard,
+  ...props
+}: GameStateActions &
+  PlayerDataProps & {
+    setHoverCard(slug: string): void;
+  }) => {
   const gridIndex = GRIDS.HAND;
   const cardsInHand = props.gridItems[gridIndex] ?? [];
 
@@ -97,6 +103,7 @@ export const GameFooter = (props: GameStateActions & PlayerDataProps) => {
                   gridIndex={gridIndex}
                   cardIndex={index}
                   gameStateActions={props}
+                  setHoverCard={setHoverCard}
                 />
               ))}
             </HStack>
@@ -112,12 +119,21 @@ const HandCard = ({
   gridIndex,
   cardIndex: index,
   gameStateActions,
+  ...props
 }: {
   card: GameCard;
   gridIndex: number;
   cardIndex: number;
   gameStateActions: GameStateActions;
+  setHoverCard(slug?: string): void;
 }) => {
+  function over() {
+    if (props.setHoverCard) props.setHoverCard(card.img);
+  }
+  function out() {
+    if (props.setHoverCard) props.setHoverCard();
+  }
+
   const [preview, setPreview] = useState(false);
   const deckType = card.type === "site" ? "atlas" : "deck";
 
@@ -139,6 +155,8 @@ const HandCard = ({
         e.preventDefault();
         setPreview(true);
       }}
+      onMouseOver={over}
+      onMouseOut={out}
       style={{
         position: "relative",
         width: "100%",

diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx
@@ -16,6 +16,7 @@ export const GameLayout = (
     PlayerDataProps & {
       isReversed?: boolean;
       activeCardSlug?: string;
+      setHoverCard(slug: string): void;
       children: ReactNode;
     },
 ) => {

diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx
@@ -50,6 +50,7 @@ export const GameBoard = ({
           setGridItems={setGridItems}
           isReversed={isReversed}
           activeCardSlug={hoverCard}
+          setHoverCard={setHoverCard}
           {...playerDataProps}
         >
           {(isReversed