From 842c5f4af5061c62041e9e269ed425bbf82a783e Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sun, 20 Oct 2024 23:26:26 +0200
Subject: [PATCH] add to hand

---
 .../organisms/GameBoard/Footer/index.tsx      | 20 ++++++++++++++++++-
 src/components/organisms/GameBoard/Layout.tsx |  1 +
 src/components/organisms/GameBoard/index.tsx  |  1 +
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx
index bd62624..815ab18 100644
--- 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
index 6f6b812..cf0d0fc 100644
--- 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
index df0def3..76396cb 100644
--- 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