Merge pull request #5 from JollyGrin/feat/hand

feat/hand working

src/components/molecules/DropGridItem/index.tsx

@@ -6,9 +6,11 @@ import { useDroppable } from "@dnd-kit/core";
 export const DroppableGridItem = (props: {
   children: ReactNode;
   id: string;
+  gridIndex: number;
 }) => {
   const { isOver, setNodeRef } = useDroppable({
     id: "droppable-" + props.id,
+    data: { gridIndex: props.gridIndex },
   });
 
   return (

src/components/organisms/GameBoard/Footer/index.tsx

@@ -16,16 +16,17 @@ export const GameFooter = (props: GameStateActions) => {
   console.log({ cardsInHand });
   return (
     <div
+      data-testid="footer"
       style={{
         height: LAYOUT_HEIGHTS.footer,
         maxWidth: "100vw",
         overflowX: "auto",
       }}
     >
       <Grid h="100%" gridTemplateColumns="100px 100px 1fr">
-        <p>hjkl</p>
-        <p>hjkl</p>
-        <DroppableGridItem id={gridIndex.toString()}>
+        <p>Grave</p>
+        <p>Deck</p>
+        <DroppableGridItem id={gridIndex.toString()} gridIndex={gridIndex}>
           <SortableContext
             id={`grid-${gridIndex}`}
             items={cardsInHand?.map(

src/components/organisms/GameBoard/index.tsx

@@ -2,7 +2,13 @@ import { CardAtlas } from "@/components/atoms/mock-cards/atlas";
 import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
 import { GameLayout } from "./Layout";
 import { DroppableGridItem } from "@/components/molecules/DropGridItem";
-import { closestCorners, DndContext, DragOverlay } from "@dnd-kit/core";
+import {
+  closestCenter,
+  closestCorners,
+  CollisionDetection,
+  DndContext,
+  DragOverlay,
+} from "@dnd-kit/core";
 import { useHandleDrag } from "./useHandleDrag";
 import { SorceryCard } from "@/types/card";
 import { CardImage } from "@/components/atoms/mock-cards/card";
@@ -22,29 +28,52 @@ export const GameBoard = ({ gridItems, setGridItems }: GameStateActions) => {
       setGridItems,
     });
 
+  const collision: CollisionDetection = (props) => {
+    // Access the current translated Y position of the dragged item
+    const currentY = props?.active?.rect?.current?.translated?.top;
+
+    // Get the height of the viewport
+    const viewportHeight = window.innerHeight;
+
+    // Check if the current Y position is within the bottom 170px of the page
+    const isInFooter = currentY && currentY > viewportHeight - 170;
+
+    // Check if the current Y position is within the bottom 170px of the page
+    // If the item is in the bottom 170px, use closestCenter for the footer
+    if (isInFooter) {
+      console.log("isInFooter");
+      return closestCenter(props);
+    }
+
+    return closestCorners(props);
+  };
+
   return (
     <DndContext
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
-      collisionDetection={closestCorners}
+      collisionDetection={collision}
     >
       <GameLayout {...{ gridItems, setGridItems }}>
         {gridItems?.slice(0, 20)?.map((cards, gridIndex) => (
           <DroppableGridItem
             key={"grid-" + gridIndex}
             id={gridIndex.toString()}
+            gridIndex={gridIndex}
           >
             <SortableContext
               id={`grid-${gridIndex}`}
-              items={cards.map(
-                (_, cardIndex) => `card-${gridIndex}-${cardIndex}`,
-              )}
+              items={cards.map((card) => card.id)}
+              // items={cards.map(
+              //   (card, cardIndex) => `card-${gridIndex}-${cardIndex}`,
+              // )}
               strategy={rectSortingStrategy}
             >
               {cards.map((card, cardIndex) => (
                 <SortableItem
                   key={`card-${gridIndex}-${cardIndex}`}
-                  id={`card-${gridIndex}-${cardIndex}`}
+                  // id={`card-${gridIndex}-${cardIndex}`}
+                  id={card.id}
                   gridIndex={gridIndex}
                   index={cardIndex}
                 >

src/components/organisms/GameBoard/useHandleDrag.ts

@@ -27,10 +27,12 @@ export const useHandleDrag = ({
 
     if (over) {
       const originIndex = parseInt(active.data.current?.gridIndex, 10);
-      const destinationIndex = parseInt(
-        (over?.id as string)?.split("-")[1],
-        10, // base 10 number
-      );
+      const destinationIndex = over?.data?.current?.gridIndex;
+
+      // const destinationIndex = parseInt(
+      //   (over?.id as string)?.split("-")[1],
+      //   10, // base 10 number
+      // );
 
       if (originIndex === destinationIndex) {
         const updatedGrid = [...gridItems];