From 7325d826b729e2169ae66b507a2ab818e5a6a18c Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 00:31:27 +0200 Subject: [PATCH 01/13] getting somewhere --- .../molecules/DropGridItem/index.tsx | 4 --- src/components/molecules/SortItem/index.tsx | 30 +++++++++++++++++++ src/components/organisms/GameBoard/index.tsx | 15 ++++++++-- .../organisms/GameBoard/useHandleDrag.ts | 6 ++++ 4 files changed, 49 insertions(+), 6 deletions(-) create mode 100644 src/components/molecules/SortItem/index.tsx diff --git a/src/components/molecules/DropGridItem/index.tsx b/src/components/molecules/DropGridItem/index.tsx index 1cc1379..510aee2 100644 --- a/src/components/molecules/DropGridItem/index.tsx +++ b/src/components/molecules/DropGridItem/index.tsx @@ -10,14 +10,10 @@ export const DroppableGridItem = (props: { const { isOver, setNodeRef } = useDroppable({ id: "droppable-" + props.id, }); - const style = { - color: isOver ? "green" : undefined, - }; return (
+ {props.children} + + ); +} diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx index eba6868..c1326dc 100644 --- a/src/components/organisms/GameBoard/index.tsx +++ b/src/components/organisms/GameBoard/index.tsx @@ -7,6 +7,7 @@ import { closestCenter, DndContext } from "@dnd-kit/core"; import { useHandleDrag } from "./useHandleDrag"; import { SorceryCard } from "@/types/card"; import { CardImage } from "@/components/atoms/mock-cards/card"; +import { SortableItem } from "@/components/molecules/SortItem"; type GameCard = SorceryCard & { id: string }; // for game position type Cards = GameCard[][]; @@ -38,15 +39,25 @@ export const GameBoard = ({ strategy={rectSortingStrategy} > {cards.map((card, cardIndex) => ( - {card.type === "site" && } {card.type !== "site" && } - + ))} + + {/* */} + {/* {card.type === "site" && } */} + {/* {card.type !== "site" && } */} + {/* */} ))} diff --git a/src/components/organisms/GameBoard/useHandleDrag.ts b/src/components/organisms/GameBoard/useHandleDrag.ts index 629de04..2f78fef 100644 --- a/src/components/organisms/GameBoard/useHandleDrag.ts +++ b/src/components/organisms/GameBoard/useHandleDrag.ts @@ -14,6 +14,10 @@ export const useHandleDrag = ({ function handleDragEnd(event: DragEndEvent) { const { active, over } = event; + if (over?.id === active.id) return; // if self, do nothing + + console.log("drag", { over, overId: over?.id, active }); + if (over) { const originIndex = parseInt(active.data.current?.gridIndex, 10); const destinationIndex = parseInt( @@ -21,6 +25,8 @@ export const useHandleDrag = ({ 10, // base 10 number ); + console.log("drag", { originIndex, destinationIndex }); + // Remove card from the origin area const updatedGrid = [...gridItems]; From dde03ab7522ae000624eb58ab9fa2ae4f903f256 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 00:32:08 +0200 Subject: [PATCH 02/13] remove dot --- src/components/molecules/SortItem/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/molecules/SortItem/index.tsx b/src/components/molecules/SortItem/index.tsx index 5b2a2b2..dbca337 100644 --- a/src/components/molecules/SortItem/index.tsx +++ b/src/components/molecules/SortItem/index.tsx @@ -23,7 +23,12 @@ export function SortableItem(props: { }; return ( -
  • +
  • {props.children}
    • ); From 218385cb51176b51bb1967d2a08464df247db44d Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 00:50:45 +0200 Subject: [PATCH 03/13] yay! its sorting --- .../organisms/GameBoard/useHandleDrag.ts | 35 ++++++++++++++++--- 1 file changed, 31 insertions(+), 4 deletions(-) diff --git a/src/components/organisms/GameBoard/useHandleDrag.ts b/src/components/organisms/GameBoard/useHandleDrag.ts index 2f78fef..9d23224 100644 --- a/src/components/organisms/GameBoard/useHandleDrag.ts +++ b/src/components/organisms/GameBoard/useHandleDrag.ts @@ -16,7 +16,13 @@ export const useHandleDrag = ({ if (over?.id === active.id) return; // if self, do nothing - console.log("drag", { over, overId: over?.id, active }); + console.log("drag", { + over, + overId: over?.id, + active, + destinationGridIndex: over?.data?.current?.gridIndex, + destinationIndex: over?.data?.current?.index, + }); if (over) { const originIndex = parseInt(active.data.current?.gridIndex, 10); @@ -25,16 +31,37 @@ export const useHandleDrag = ({ 10, // base 10 number ); - console.log("drag", { originIndex, destinationIndex }); + if (originIndex === destinationIndex) { + const updatedGrid = [...gridItems]; + const cardsInCell = [...updatedGrid[originIndex]]; // Copy the cards in the original cell + + const activeCardIndex = active?.data?.current?.index; // Index of the card being dragged + const destinationCardIndex = over?.data?.current?.index; // Index where the card will be dropped + + // Remove the active card from its original position + const [activeCard] = cardsInCell.splice(activeCardIndex, 1); + + // Insert the active card into the new position (destination) + cardsInCell.splice(destinationCardIndex, 0, activeCard); + + // Update the original grid with the modified cards in the cell + updatedGrid[originIndex] = cardsInCell; + + console.log("drag", { + updatedGrid, + cardsInCell, + activeCard, + }); + setGridItems(updatedGrid); + return; + } // 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); From d82c3b1d6d500d9703e1c2c123d0acd626fb0526 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 00:56:24 +0200 Subject: [PATCH 04/13] remove unused --- src/components/organisms/GameBoard/index.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx index c1326dc..3d215db 100644 --- a/src/components/organisms/GameBoard/index.tsx +++ b/src/components/organisms/GameBoard/index.tsx @@ -49,15 +49,6 @@ export const GameBoard = ({ {card.type !== "site" && } ))} - - {/* */} - {/* {card.type === "site" && } */} - {/* {card.type !== "site" && } */} - {/* */} ))} From fc0e6ef5bd3feb58abca30e375c5615e25f45bcd Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 00:56:29 +0200 Subject: [PATCH 05/13] remove flashing on drag --- src/components/molecules/SortItem/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/molecules/SortItem/index.tsx b/src/components/molecules/SortItem/index.tsx index dbca337..563f58e 100644 --- a/src/components/molecules/SortItem/index.tsx +++ b/src/components/molecules/SortItem/index.tsx @@ -10,6 +10,7 @@ export function SortableItem(props: { }) { const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ + animateLayoutChanges: () => false, id: props.id, data: { gridIndex: props.gridIndex, From 8fbcfe38625e176fe8f54018f65d86ddb84e6cbb Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 01:41:11 +0200 Subject: [PATCH 06/13] better movement --- src/components/molecules/SortItem/index.tsx | 42 ++++++++++++------- src/components/organisms/GameBoard/index.tsx | 31 +++++++++++--- .../organisms/GameBoard/useHandleDrag.ts | 38 ++++++++++------- 3 files changed, 76 insertions(+), 35 deletions(-) diff --git a/src/components/molecules/SortItem/index.tsx b/src/components/molecules/SortItem/index.tsx index 563f58e..e9e3ef2 100644 --- a/src/components/molecules/SortItem/index.tsx +++ b/src/components/molecules/SortItem/index.tsx @@ -8,25 +8,39 @@ export function SortableItem(props: { index: number; children: ReactNode; }) { - const { attributes, listeners, setNodeRef, transform, transition } = - useSortable({ - animateLayoutChanges: () => false, - id: props.id, - data: { - gridIndex: props.gridIndex, - index: props.index, - }, - }); - - const style = { - transform: CSS.Transform.toString(transform), + const { + attributes, + listeners, + setNodeRef, + transform, transition, - }; + isDragging, + } = useSortable({ + animateLayoutChanges: () => false, + id: props.id, + data: { + gridIndex: props.gridIndex, + index: props.index, + }, + }); + + // const style = {}; + const style = transform + ? { + transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, + transition, + } + : undefined; + + // const style = { + // transform: CSS.Transform.toString(transform), + // transition, + // }; return (
  • diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx index 3d215db..0d646c1 100644 --- a/src/components/organisms/GameBoard/index.tsx +++ b/src/components/organisms/GameBoard/index.tsx @@ -3,11 +3,17 @@ import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable"; import { GameLayout } from "./Layout"; import { DragItem } from "@/components/molecules/DragItem"; import { DroppableGridItem } from "@/components/molecules/DropGridItem"; -import { closestCenter, DndContext } from "@dnd-kit/core"; +import { + closestCenter, + closestCorners, + DndContext, + DragOverlay, +} from "@dnd-kit/core"; import { useHandleDrag } from "./useHandleDrag"; import { SorceryCard } from "@/types/card"; import { CardImage } from "@/components/atoms/mock-cards/card"; import { SortableItem } from "@/components/molecules/SortItem"; +import { Box } from "styled-system/jsx"; type GameCard = SorceryCard & { id: string }; // for game position type Cards = GameCard[][]; @@ -18,13 +24,18 @@ export const GameBoard = ({ setGridItems(state: Cards): void; gridItems: Cards; }) => { - const { handleDragEnd } = useHandleDrag({ - gridItems, - setGridItems, - }); + const { handleDragEnd, handleDragStart, activeId, activeCard } = + useHandleDrag({ + gridItems, + setGridItems, + }); return ( - + {gridItems?.map((cards, gridIndex) => ( ))} + + {activeId ? ( + + {activeCard?.type === "site" && } + {activeCard?.type !== "site" && } + + ) : null} + ); }; diff --git a/src/components/organisms/GameBoard/useHandleDrag.ts b/src/components/organisms/GameBoard/useHandleDrag.ts index 9d23224..8dfe935 100644 --- a/src/components/organisms/GameBoard/useHandleDrag.ts +++ b/src/components/organisms/GameBoard/useHandleDrag.ts @@ -1,5 +1,6 @@ import { SorceryCard } from "@/types/card"; -import { DragEndEvent } from "@dnd-kit/core"; +import { DragEndEvent, UniqueIdentifier } from "@dnd-kit/core"; +import { useState } from "react"; type GameCard = SorceryCard & { id: string }; // for game position type Cards = GameCard[][]; @@ -8,22 +9,21 @@ export const useHandleDrag = ({ gridItems, setGridItems, }: { - setGridItems(state: Cards): void; gridItems: Cards; + setGridItems(state: Cards): void; }) => { + const [active, setActive] = useState(null); + + function handleDragStart(event: DragEndEvent) { + setActive(event?.active); + } + function handleDragEnd(event: DragEndEvent) { + setActive(null); const { active, over } = event; if (over?.id === active.id) return; // if self, do nothing - console.log("drag", { - over, - overId: over?.id, - active, - destinationGridIndex: over?.data?.current?.gridIndex, - destinationIndex: over?.data?.current?.index, - }); - if (over) { const originIndex = parseInt(active.data.current?.gridIndex, 10); const destinationIndex = parseInt( @@ -47,11 +47,6 @@ export const useHandleDrag = ({ // Update the original grid with the modified cards in the cell updatedGrid[originIndex] = cardsInCell; - console.log("drag", { - updatedGrid, - cardsInCell, - activeCard, - }); setGridItems(updatedGrid); return; } @@ -69,7 +64,20 @@ export const useHandleDrag = ({ } } + console.log({ + cardsInCell: gridItems[active?.data?.current?.gridIndex], + active: active?.id, + data: active?.data?.current, + find: gridItems.flat().find((card) => card?.id === active?.id), + }); + return { handleDragEnd, + handleDragStart, + activeId: active?.id, + activeCard: + gridItems?.[active?.data?.current?.gridIndex]?.[ + active?.data?.current?.index + ], }; }; From 5375bab4e7f1536df3556d059f2b921aee23a0f6 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 01:45:45 +0200 Subject: [PATCH 07/13] add small transition tweak --- src/components/molecules/SortItem/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/molecules/SortItem/index.tsx b/src/components/molecules/SortItem/index.tsx index e9e3ef2..9765c32 100644 --- a/src/components/molecules/SortItem/index.tsx +++ b/src/components/molecules/SortItem/index.tsx @@ -18,6 +18,10 @@ export function SortableItem(props: { } = useSortable({ animateLayoutChanges: () => false, id: props.id, + transition: { + duration: 500, + easing: "cubic-bezier(0.25, 1, 0.5, 1)", + }, data: { gridIndex: props.gridIndex, index: props.index, From c6c285c474dc269744178732655b93461d6e2c44 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 01:56:05 +0200 Subject: [PATCH 08/13] make preview bigger --- src/components/atoms/mock-cards/atlas.tsx | 5 ++--- src/components/atoms/mock-cards/card.tsx | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/atoms/mock-cards/atlas.tsx b/src/components/atoms/mock-cards/atlas.tsx index 3fe5fa7..fe293d6 100644 --- a/src/components/atoms/mock-cards/atlas.tsx +++ b/src/components/atoms/mock-cards/atlas.tsx @@ -19,7 +19,7 @@ export const CardAtlas = ({ } }, [isPressed]); - const show = preview && isHovering; + const show = preview && isHovering; // full preview of the card return ( setPreview(false)} > {" "} From d0b8cb67867ec93920e1114c5cc5e6b481197e15 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 02:17:57 +0200 Subject: [PATCH 09/13] clean up --- src/components/atoms/mock-cards/atlas.tsx | 2 +- src/components/organisms/GameBoard/Layout.tsx | 10 ++++------ src/components/organisms/GameBoard/constants.ts | 9 +++++++++ src/pages/dnd.tsx | 5 ++--- src/pages/hand.tsx | 5 ++--- src/pages/index.tsx | 5 ++--- 6 files changed, 20 insertions(+), 16 deletions(-) create mode 100644 src/components/organisms/GameBoard/constants.ts diff --git a/src/components/atoms/mock-cards/atlas.tsx b/src/components/atoms/mock-cards/atlas.tsx index fe293d6..97dcb4d 100644 --- a/src/components/atoms/mock-cards/atlas.tsx +++ b/src/components/atoms/mock-cards/atlas.tsx @@ -25,7 +25,6 @@ export const CardAtlas = ({ position="relative" m="0.5rem auto" w="calc(100% - 1rem)" - // h={show ? "150px" : "70px"} h="70px" bg="yellow" borderRadius="1rem" @@ -52,6 +51,7 @@ export const CardAtlas = ({ } bg="gray.400" borderRadius="1rem" + transition="all 0.25s ease" />{" "} ); diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx index b680d92..42366fe 100644 --- a/src/components/organisms/GameBoard/Layout.tsx +++ b/src/components/organisms/GameBoard/Layout.tsx @@ -1,17 +1,15 @@ import { ReactNode } from "react"; import { Grid, HStack } from "styled-system/jsx"; import { grid } from "styled-system/patterns"; +import { LAYOUT_HEIGHTS } from "./constants"; -const nav = `100px`; -const footer = `50px`; -const body = `calc(100vh - ${nav} - ${footer})`; +const { nav, body, footer } = LAYOUT_HEIGHTS; export const GameLayout = (props: { children: ReactNode }) => { return ( - +
    -

    Experiment arranging a Sorcery Grid

    -

    +

    While hovering over a card, click{" "} Date: Sun, 8 Sep 2024 02:20:18 +0200 Subject: [PATCH 10/13] redirect --- src/pages/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ec6f255..2da8c1c 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,12 +3,19 @@ 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, useState } from "react"; +import { ReactNode, useEffect, useState } from "react"; import { LAYOUT_HEIGHTS } from "@/components/organisms/GameBoard/constants"; +import { useRouter } from "next/router"; const { nav, body, footer } = LAYOUT_HEIGHTS; export default function Home() { + const router = useRouter(); + useEffect(() => { + router.push("/game"); + }, []); + return null; + const [, setIsDropped] = useState(false); function handleDragEnd(event: DragEndEvent) { From fe60fe8664520812635ab4ae354d19d6fae97537 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 02:22:15 +0200 Subject: [PATCH 11/13] clean --- src/pages/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2da8c1c..4dabdf3 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -16,11 +16,9 @@ export default function Home() { }, []); return null; - const [, setIsDropped] = useState(false); - function handleDragEnd(event: DragEndEvent) { if (event.over && event.over.id === "droppable") { - setIsDropped(true); + // setIsDropped(true); } } From c70b8032532895977c5fac175d7666bdf8b07f69 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 02:22:31 +0200 Subject: [PATCH 12/13] clean --- src/components/organisms/GameBoard/index.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx index 0d646c1..6bf1d14 100644 --- a/src/components/organisms/GameBoard/index.tsx +++ b/src/components/organisms/GameBoard/index.tsx @@ -1,14 +1,8 @@ import { CardAtlas } from "@/components/atoms/mock-cards/atlas"; import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable"; import { GameLayout } from "./Layout"; -import { DragItem } from "@/components/molecules/DragItem"; import { DroppableGridItem } from "@/components/molecules/DropGridItem"; -import { - closestCenter, - closestCorners, - DndContext, - DragOverlay, -} from "@dnd-kit/core"; +import { closestCorners, DndContext, DragOverlay } from "@dnd-kit/core"; import { useHandleDrag } from "./useHandleDrag"; import { SorceryCard } from "@/types/card"; import { CardImage } from "@/components/atoms/mock-cards/card"; From 6647010ba227a073cbe37e96fe39efd50c3d826d Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 02:25:54 +0200 Subject: [PATCH 13/13] build fix --- src/components/molecules/SortItem/index.tsx | 1 - src/components/organisms/GameBoard/useHandleDrag.ts | 2 +- src/pages/index.tsx | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/molecules/SortItem/index.tsx b/src/components/molecules/SortItem/index.tsx index 9765c32..95cd8b4 100644 --- a/src/components/molecules/SortItem/index.tsx +++ b/src/components/molecules/SortItem/index.tsx @@ -1,6 +1,5 @@ import React, { ReactNode } from "react"; import { useSortable } from "@dnd-kit/sortable"; -import { CSS } from "@dnd-kit/utilities"; export function SortableItem(props: { id: string; diff --git a/src/components/organisms/GameBoard/useHandleDrag.ts b/src/components/organisms/GameBoard/useHandleDrag.ts index 8dfe935..f551001 100644 --- a/src/components/organisms/GameBoard/useHandleDrag.ts +++ b/src/components/organisms/GameBoard/useHandleDrag.ts @@ -1,5 +1,5 @@ import { SorceryCard } from "@/types/card"; -import { DragEndEvent, UniqueIdentifier } from "@dnd-kit/core"; +import { DragEndEvent } from "@dnd-kit/core"; import { useState } from "react"; type GameCard = SorceryCard & { id: string }; // for game position diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4dabdf3..2416659 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,7 +3,7 @@ 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, useState } from "react"; +import { ReactNode, useEffect } from "react"; import { LAYOUT_HEIGHTS } from "@/components/organisms/GameBoard/constants"; import { useRouter } from "next/router";