From 7f19d7151ed548f88a9d2b3bcaea0cefcf2a1b9c Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sun, 8 Sep 2024 12:26:51 +0200
Subject: [PATCH 1/4] working by making ids not mutable

---
 .../molecules/DropGridItem/index.tsx          |  2 +
 .../organisms/GameBoard/Footer/index.tsx      |  7 ++--
 src/components/organisms/GameBoard/index.tsx  | 41 ++++++++++++++++---
 .../organisms/GameBoard/useHandleDrag.ts      | 10 +++--
 4 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/src/components/molecules/DropGridItem/index.tsx b/src/components/molecules/DropGridItem/index.tsx
index 2fbce20..e1dac90 100644
--- a/src/components/molecules/DropGridItem/index.tsx
+++ b/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 (
diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx
index a7db083..ff73650 100644
--- a/src/components/organisms/GameBoard/Footer/index.tsx
+++ b/src/components/organisms/GameBoard/Footer/index.tsx
@@ -16,6 +16,7 @@ export const GameFooter = (props: GameStateActions) => {
   console.log({ cardsInHand });
   return (
     <div
+      data-testid="footer"
       style={{
         height: LAYOUT_HEIGHTS.footer,
         maxWidth: "100vw",
@@ -23,9 +24,9 @@ export const GameFooter = (props: GameStateActions) => {
       }}
     >
       <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(
diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx
index 908726d..387e8c3 100644
--- a/src/components/organisms/GameBoard/index.tsx
+++ b/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, cardIndex) => 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}
                 >
diff --git a/src/components/organisms/GameBoard/useHandleDrag.ts b/src/components/organisms/GameBoard/useHandleDrag.ts
index 1569fe1..8fe55d5 100644
--- a/src/components/organisms/GameBoard/useHandleDrag.ts
+++ b/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];

From 7e7dea75341a0e53f799c6ca069cdf951ea612c1 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sun, 8 Sep 2024 12:30:56 +0200
Subject: [PATCH 2/4] fix build

---
 src/components/organisms/GameBoard/index.tsx |  2 +-
 src/pages/index.tsx                          | 70 --------------------
 2 files changed, 1 insertion(+), 71 deletions(-)

diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx
index 387e8c3..c627ffc 100644
--- a/src/components/organisms/GameBoard/index.tsx
+++ b/src/components/organisms/GameBoard/index.tsx
@@ -63,7 +63,7 @@ export const GameBoard = ({ gridItems, setGridItems }: GameStateActions) => {
           >
             <SortableContext
               id={`grid-${gridIndex}`}
-              items={cards.map((card, cardIndex) => card.id)}
+              items={cards.map((card) => card.id)}
               // items={cards.map(
               //   (card, cardIndex) => `card-${gridIndex}-${cardIndex}`,
               // )}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2416659..20b3ee3 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -15,74 +15,4 @@ export default function Home() {
     router.push("/game");
   }, []);
   return null;
-
-  function handleDragEnd(event: DragEndEvent) {
-    if (event.over && event.over.id === "droppable") {
-      // setIsDropped(true);
-    }
-  }
-
-  return (
-    <div>
-      <DndContext onDragEnd={handleDragEnd}>
-        <Grid gridTemplateRows={`${nav} ${body} ${footer}`} gap={0}>
-          <div style={{ background: "rgba(0,200,0,0.2)", padding: "1rem" }}>
-            <p>Experiment arranging a Sorcery Grid</p>
-            <p>
-              While hovering over a card, click{" "}
-              <code
-                style={{
-                  background: "rgba(0,0,0,0.075)",
-                  padding: "5px",
-                  borderRadius: "5px",
-                }}
-              >
-                ALT
-              </code>{" "}
-              key
-            </p>
-          </div>
-          <div
-            className={grid({
-              gap: 1,
-              m: "0 auto",
-              gridTemplateColumns: "repeat(5, 1fr)",
-              gridTemplateRows: "repeat(4, 1fr)",
-              maxW: "1200px",
-              w: "100%",
-              h: "100%",
-              // border: "1px solid black",
-            })}
-          >
-            {Array.from({ length: 20 }).map((_, i) => (
-              <DroppableGridItem key={"grid" + i} id={"grid" + i}>
-                <Drag>
-                  <CardAtlas />
-                </Drag>
-              </DroppableGridItem>
-            ))}
-          </div>
-
-          <div style={{ background: "brown" }}>footer</div>
-        </Grid>
-      </DndContext>
-    </div>
-  );
 }
-
-const Drag = (props: { children: ReactNode }) => {
-  const { attributes, listeners, setNodeRef, transform } = useDraggable({
-    id: "draggable",
-  });
-  const style = transform
-    ? {
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-      }
-    : undefined;
-
-  return (
-    <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
-      {props.children}
-    </div>
-  );
-};

From 6a660e81eb3aa734c01349ddaa47d0d44e065a9e Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sun, 8 Sep 2024 12:31:06 +0200
Subject: [PATCH 3/4] remove unused

---
 src/pages/dnd.tsx  | 142 ----------------------------
 src/pages/hand.tsx | 229 ---------------------------------------------
 2 files changed, 371 deletions(-)
 delete mode 100644 src/pages/dnd.tsx
 delete mode 100644 src/pages/hand.tsx

diff --git a/src/pages/dnd.tsx b/src/pages/dnd.tsx
deleted file mode 100644
index e9d93c0..0000000
--- a/src/pages/dnd.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { CardAtlas } from "@/components/atoms/mock-cards/atlas";
-import { Grid, HStack } from "styled-system/jsx";
-import { grid } from "styled-system/patterns";
-import {
-  DndContext,
-  DragEndEvent,
-  useDraggable,
-  useDroppable,
-  closestCenter,
-} from "@dnd-kit/core";
-import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
-import { ReactNode, useState } from "react";
-import { Nav } from "@/components/molecules/Nav";
-import { LAYOUT_HEIGHTS } from "@/components/organisms/GameBoard/constants";
-
-const { nav, body, footer } = LAYOUT_HEIGHTS;
-
-export default function Home() {
-  const [gridItems, setGridItems] = useState(
-    Array.from({ length: 20 }, (_, gridIndex) => [
-      { id: `card-${gridIndex}-0` }, // Each droppable starts with a single card
-    ]),
-  );
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
-
-    if (over) {
-      const originIndex = parseInt(active.data.current?.gridIndex, 10);
-      const destinationIndex = parseInt(
-        (over?.id as string)?.split("-")[1],
-        10,
-      );
-
-      // Remove card from the origin area
-      const updatedGrid = [...gridItems];
-      const [movedCard] = updatedGrid[originIndex].splice(
-        active?.data?.current?.index,
-        1,
-      );
-
-      // Place card in the destination area
-      updatedGrid[destinationIndex].push(movedCard);
-
-      setGridItems(updatedGrid);
-    }
-  }
-
-  return (
-    <div>
-      <DndContext onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
-        <Grid gridTemplateRows={`${nav} ${body} ${footer}`} gap={0}>
-          <Nav />
-
-          <div
-            className={grid({
-              gap: 1,
-              m: "0 auto",
-              gridTemplateColumns: "repeat(5, 1fr)",
-              gridTemplateRows: "repeat(4, 1fr)",
-              maxW: "1200px",
-              w: "100%",
-              h: "100%",
-            })}
-          >
-            {gridItems.map((cards, gridIndex) => (
-              <DroppableGridItem
-                key={"grid-" + gridIndex}
-                id={"grid-" + gridIndex}
-              >
-                <SortableContext
-                  id={`grid-${gridIndex}`}
-                  items={cards.map((_, i) => `${gridIndex}-${i}`)}
-                  strategy={rectSortingStrategy}
-                >
-                  {cards.map((_, cardIndex) => (
-                    <Drag
-                      key={`card-${gridIndex}-${cardIndex}`}
-                      gridIndex={gridIndex}
-                      index={cardIndex}
-                    >
-                      <CardAtlas />
-                    </Drag>
-                  ))}
-                </SortableContext>
-              </DroppableGridItem>
-            ))}
-          </div>
-
-          <TrayFooter />
-        </Grid>
-      </DndContext>
-    </div>
-  );
-}
-
-const TrayFooter = () => {
-  return <HStack h={footer}>place hand here</HStack>;
-};
-
-const Drag = (props: {
-  children: ReactNode;
-  gridIndex: number;
-  index: number;
-}) => {
-  const { attributes, listeners, setNodeRef, transform } = useDraggable({
-    id: `${props.gridIndex}-${props.index}`,
-    data: {
-      gridIndex: props.gridIndex,
-      index: props.index,
-    },
-  });
-  const style = transform
-    ? {
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-      }
-    : undefined;
-
-  return (
-    <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
-      {props.children}
-    </div>
-  );
-};
-
-const DroppableGridItem = (props: { children: ReactNode; id: string }) => {
-  const { setNodeRef } = useDroppable({
-    id: props.id,
-  });
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={{
-        minHeight: "100px",
-        border: "1px solid black",
-      }}
-    >
-      {props.children}
-    </div>
-  );
-};
diff --git a/src/pages/hand.tsx b/src/pages/hand.tsx
deleted file mode 100644
index 7672f93..0000000
--- a/src/pages/hand.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import { CardAtlas } from "@/components/atoms/mock-cards/atlas";
-import { Grid } from "styled-system/jsx";
-import { grid } from "styled-system/patterns";
-import {
-  DndContext,
-  DragEndEvent,
-  useDraggable,
-  useDroppable,
-  closestCenter,
-} from "@dnd-kit/core";
-import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
-import { ReactNode, useState } from "react";
-import { LAYOUT_HEIGHTS } from "@/components/organisms/GameBoard/constants";
-
-const { nav, body, footer } = LAYOUT_HEIGHTS;
-
-export default function Home() {
-  // Initialize gridItems with cards
-  const [gridItems, setGridItems] = useState(
-    Array.from({ length: 20 }, () => []),
-  );
-
-  // Initialize hand tray with some cards
-  const [handItems, setHandItems] = useState([
-    { id: "hand-card-1" },
-    { id: "hand-card-2" },
-    { id: "hand-card-3" },
-    { id: "hand-card-4" },
-    { id: "hand-card-5" },
-  ]);
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
-
-    if (over) {
-      // const originId = active.id;
-      const destinationId = over.id as string;
-
-      const originGridIndex = active.data.current?.gridIndex;
-      const originHandIndex = active.data.current?.handIndex;
-      const destinationGridIndex = destinationId?.startsWith("grid-")
-        ? parseInt(destinationId?.split("-")[1], 10)
-        : null;
-      const destinationHandIndex = destinationId?.startsWith("hand-")
-        ? parseInt(destinationId.split("-")[1], 10)
-        : null;
-
-      const updatedGridItems = [...gridItems]; // Create a shallow copy of gridItems
-      const updatedHandItems = [...handItems]; // Create a shallow copy of handItems
-
-      // Handle moving between grid items
-      if (originGridIndex !== null && destinationGridIndex !== null) {
-        // Ensure both origin and destination grid arrays exist
-        if (!updatedGridItems[originGridIndex]) {
-          updatedGridItems[originGridIndex] = [];
-        }
-        if (!updatedGridItems[destinationGridIndex]) {
-          updatedGridItems[destinationGridIndex] = [];
-        }
-
-        // Move card within grid
-        const [movedCard] = updatedGridItems[originGridIndex].splice(
-          active?.data?.current?.index,
-          1,
-        );
-        updatedGridItems[destinationGridIndex].push(movedCard); // Add card to destination grid area
-      }
-
-      // Handle moving from grid to hand
-      else if (originGridIndex !== null && destinationHandIndex === null) {
-        // Moving from grid to hand
-        if (!updatedGridItems[originGridIndex]) {
-          updatedGridItems[originGridIndex] = [];
-        }
-
-        const [movedCard] = updatedGridItems[originGridIndex].splice(
-          active?.data?.current?.index,
-          1,
-        );
-        updatedHandItems.push(movedCard); // Add card back to hand
-      }
-
-      // Handle moving from hand to grid
-      else if (originHandIndex !== null && destinationGridIndex !== null) {
-        // Moving from hand to grid
-        if (!updatedGridItems[destinationGridIndex]) {
-          updatedGridItems[destinationGridIndex] = [];
-        }
-
-        const [movedCard] = updatedHandItems.splice(originHandIndex, 1); // Remove from hand
-        //@ts-expect-error: fix type
-        updatedGridItems[destinationGridIndex].push(movedCard); // Add card to destination grid area
-      }
-
-      // Update the state to reflect the changes
-      setGridItems(updatedGridItems); // Update grid state
-      setHandItems(updatedHandItems); // Update hand state (without refilling it)
-    }
-  }
-
-  return (
-    <div>
-      <DndContext onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
-        <Grid gridTemplateRows={`${nav} ${body} ${footer}`} gap={0}>
-          <div style={{ background: "rgba(0,200,0,0.2)", padding: "1rem" }}>
-            <p>Experiment arranging a Sorcery Grid</p>
-            <p>
-              While hovering over a card, click{" "}
-              <code
-                style={{
-                  background: "rgba(0,0,0,0.075)",
-                  padding: "5px",
-                  borderRadius: "5px",
-                }}
-              >
-                ALT
-              </code>{" "}
-              key
-            </p>
-          </div>
-          <div
-            className={grid({
-              gap: 1,
-              m: "0 auto",
-              gridTemplateColumns: "repeat(5, 1fr)",
-              gridTemplateRows: "repeat(4, 1fr)",
-              maxW: "1200px",
-              w: "100%",
-              h: "100%",
-              background: "rgba(240, 240, 240, 0.5)", // Ensure background visibility
-            })}
-          >
-            {gridItems.map((cards, gridIndex) => (
-              <DroppableGridItem
-                key={"grid-" + gridIndex}
-                id={"grid-" + gridIndex}
-              >
-                <SortableContext
-                  id={`grid-${gridIndex}`}
-                  //@ts-expect-error: fix type
-                  items={cards.map((card) => card?.id)}
-                  strategy={rectSortingStrategy}
-                >
-                  {cards.map((card, cardIndex) => (
-                    <Drag
-                      //@ts-expect-error: fix type
-                      key={card?.id + cardIndex}
-                      gridIndex={gridIndex}
-                      index={cardIndex}
-                    >
-                      <CardAtlas />
-                    </Drag>
-                  ))}
-                </SortableContext>
-              </DroppableGridItem>
-            ))}
-          </div>
-
-          {/* Hand tray */}
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              background: "rgba(200, 200, 200, 0.8)",
-              padding: "1rem",
-            }}
-          >
-            {handItems.map((card, handIndex) => (
-              <Drag key={card.id} handIndex={handIndex} index={handIndex}>
-                <CardAtlas />
-              </Drag>
-            ))}
-          </div>
-        </Grid>
-      </DndContext>
-    </div>
-  );
-}
-
-const Drag = (props: {
-  children: ReactNode;
-  gridIndex?: number;
-  handIndex?: number;
-  index: number;
-}) => {
-  const { attributes, listeners, setNodeRef, transform } = useDraggable({
-    id:
-      props.gridIndex !== undefined
-        ? `grid-${props.gridIndex}-${props.index}`
-        : `hand-${props.handIndex}`,
-    data: {
-      gridIndex: props.gridIndex,
-      handIndex: props.handIndex,
-      index: props.index,
-    },
-  });
-  const style = {
-    ...(transform
-      ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)` }
-      : {}),
-    width: "100%", // Ensure cards are visible
-    height: "100%", // Ensure cards are visible
-  };
-
-  return (
-    <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
-      {props.children}
-    </div>
-  );
-};
-
-const DroppableGridItem = (props: { children: ReactNode; id: string }) => {
-  const { setNodeRef } = useDroppable({
-    id: props.id,
-  });
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={{
-        minHeight: "100px",
-        border: "1px solid black",
-        background: "rgba(0,0,250,0.1)",
-      }}
-    >
-      {props.children}
-    </div>
-  );
-};

From 37707bd8764960aa066fe86588fd9cfac2505189 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sun, 8 Sep 2024 12:31:45 +0200
Subject: [PATCH 4/4] fix build

---
 src/pages/index.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 20b3ee3..c6bbad9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,14 +1,6 @@
-import { CardAtlas } from "@/components/atoms/mock-cards/atlas";
-import { DroppableGridItem } from "@/components/molecules/DropGridItem";
-import { Grid } from "styled-system/jsx";
-import { grid } from "styled-system/patterns";
-import { DndContext, DragEndEvent, useDraggable } from "@dnd-kit/core";
-import { ReactNode, useEffect } from "react";
-import { LAYOUT_HEIGHTS } from "@/components/organisms/GameBoard/constants";
+import { useEffect } from "react";
 import { useRouter } from "next/router";
 
-const { nav, body, footer } = LAYOUT_HEIGHTS;
-
 export default function Home() {
   const router = useRouter();
   useEffect(() => {