From e96d2241c4fb5b5f889ddd951e1fce5943936365 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 02:54:11 +0200 Subject: [PATCH 1/5] setup hand --- src/components/atoms/mock-cards/atlas.tsx | 1 + src/components/atoms/mock-cards/card.tsx | 1 + .../molecules/DropGridItem/index.tsx | 1 + .../organisms/GameBoard/Footer/index.tsx | 37 +++++++++++++++++++ src/components/organisms/GameBoard/Layout.tsx | 12 +++--- src/components/organisms/GameBoard/index.tsx | 12 +++--- src/pages/game.tsx | 7 ++++ 7 files changed, 58 insertions(+), 13 deletions(-) create mode 100644 src/components/organisms/GameBoard/Footer/index.tsx diff --git a/src/components/atoms/mock-cards/atlas.tsx b/src/components/atoms/mock-cards/atlas.tsx index 97dcb4d..cfae452 100644 --- a/src/components/atoms/mock-cards/atlas.tsx +++ b/src/components/atoms/mock-cards/atlas.tsx @@ -25,6 +25,7 @@ export const CardAtlas = ({ position="relative" m="0.5rem auto" w="calc(100% - 1rem)" + maxW="221px" h="70px" bg="yellow" borderRadius="1rem" diff --git a/src/components/atoms/mock-cards/card.tsx b/src/components/atoms/mock-cards/card.tsx index 911f484..7dfc258 100644 --- a/src/components/atoms/mock-cards/card.tsx +++ b/src/components/atoms/mock-cards/card.tsx @@ -32,6 +32,7 @@ export const CardImage = ({ position="relative" m="0.5rem auto" w="calc(100% - 1rem)" + maxW="221px" h="90px" bg="yellow" overflow={show ? "unset" : "clip"} diff --git a/src/components/molecules/DropGridItem/index.tsx b/src/components/molecules/DropGridItem/index.tsx index 510aee2..2fbce20 100644 --- a/src/components/molecules/DropGridItem/index.tsx +++ b/src/components/molecules/DropGridItem/index.tsx @@ -13,6 +13,7 @@ export const DroppableGridItem = (props: { return (
{ + const gridIndex = 20; + const cardsInHand = props.gridItems[gridIndex] ?? []; + console.log({ cardsInHand }); + return ( + + + `card-${gridIndex}-${cardIndex}`, + )} + strategy={horizontalListSortingStrategy} + > + {props.gridItems?.[gridIndex]?.map((card, index) => ( + + {card?.type === "site" && } + {card?.type !== "site" && } + + ))} + + + + ); +}; diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx index 42366fe..22f49d8 100644 --- a/src/components/organisms/GameBoard/Layout.tsx +++ b/src/components/organisms/GameBoard/Layout.tsx @@ -2,10 +2,14 @@ import { ReactNode } from "react"; import { Grid, HStack } from "styled-system/jsx"; import { grid } from "styled-system/patterns"; import { LAYOUT_HEIGHTS } from "./constants"; +import { GameFooter } from "./Footer"; +import { GameStateActions } from "."; const { nav, body, footer } = LAYOUT_HEIGHTS; -export const GameLayout = (props: { children: ReactNode }) => { +export const GameLayout = ( + props: GameStateActions & { children: ReactNode }, +) => { return (
@@ -38,11 +42,7 @@ export const GameLayout = (props: { children: ReactNode }) => { {props.children}
- + ); }; - -const TrayFooter = () => { - return place hand here; -}; diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx index 6bf1d14..ad1f596 100644 --- a/src/components/organisms/GameBoard/index.tsx +++ b/src/components/organisms/GameBoard/index.tsx @@ -11,13 +11,11 @@ import { Box } from "styled-system/jsx"; type GameCard = SorceryCard & { id: string }; // for game position type Cards = GameCard[][]; -export const GameBoard = ({ - gridItems, - setGridItems, -}: { - setGridItems(state: Cards): void; +export type GameStateActions = { gridItems: Cards; -}) => { + setGridItems(state: Cards): void; +}; +export const GameBoard = ({ gridItems, setGridItems }: GameStateActions) => { const { handleDragEnd, handleDragStart, activeId, activeCard } = useHandleDrag({ gridItems, @@ -30,7 +28,7 @@ export const GameBoard = ({ onDragEnd={handleDragEnd} collisionDetection={closestCorners} > - + {gridItems?.map((cards, gridIndex) => ( ; From 29781c06f369b4aaaa1a8ba4ccade77844c08380 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 03:28:31 +0200 Subject: [PATCH 2/5] clean up --- src/components/molecules/SortItem/index.tsx | 12 ++++---- .../organisms/GameBoard/Footer/index.tsx | 28 +++++++++++++------ src/components/organisms/GameBoard/Layout.tsx | 8 +++++- .../organisms/GameBoard/constants.ts | 4 +-- src/components/organisms/GameBoard/index.tsx | 2 +- .../organisms/GameBoard/useHandleDrag.ts | 8 +----- src/pages/game.tsx | 5 ++++ 7 files changed, 41 insertions(+), 26 deletions(-) diff --git a/src/components/molecules/SortItem/index.tsx b/src/components/molecules/SortItem/index.tsx index 95cd8b4..fc60b6c 100644 --- a/src/components/molecules/SortItem/index.tsx +++ b/src/components/molecules/SortItem/index.tsx @@ -27,7 +27,6 @@ export function SortableItem(props: { }, }); - // const style = {}; const style = transform ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, @@ -35,15 +34,14 @@ export function SortableItem(props: { } : undefined; - // const style = { - // transform: CSS.Transform.toString(transform), - // transition, - // }; - return (
  • diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx index 0d7ca8d..65a557e 100644 --- a/src/components/organisms/GameBoard/Footer/index.tsx +++ b/src/components/organisms/GameBoard/Footer/index.tsx @@ -15,7 +15,13 @@ export const GameFooter = (props: GameStateActions) => { const cardsInHand = props.gridItems[gridIndex] ?? []; console.log({ cardsInHand }); return ( - +
    { )} strategy={horizontalListSortingStrategy} > - {props.gridItems?.[gridIndex]?.map((card, index) => ( - - {card?.type === "site" && } - {card?.type !== "site" && } - - ))} + + {props.gridItems?.[gridIndex]?.map((card, index) => ( +
    + + {card?.type === "site" && } + {card?.type !== "site" && } + +
    + ))} +     - +
    ); }; diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx index 22f49d8..5c4d259 100644 --- a/src/components/organisms/GameBoard/Layout.tsx +++ b/src/components/organisms/GameBoard/Layout.tsx @@ -12,7 +12,13 @@ export const GameLayout = ( ) => { return ( -
    +

    While hovering over a card, click{" "} { collisionDetection={closestCorners} > - {gridItems?.map((cards, gridIndex) => ( + {gridItems?.slice(0, 20)?.map((cards, gridIndex) => ( card?.id === active?.id), - }); - return { handleDragEnd, handleDragStart, diff --git a/src/pages/game.tsx b/src/pages/game.tsx index d77cd70..3c9e850 100644 --- a/src/pages/game.tsx +++ b/src/pages/game.tsx @@ -35,6 +35,11 @@ export default function GamePage() { img: "atlas_cloud_city.webp", type: "site", } as GameCard, + { + id: "card-20-1", + img: "headless_haunt.webp", + type: "minion", + }, ], ]); From e7c20643a35ab728fda144aee570ff9db3b19230 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 03:29:49 +0200 Subject: [PATCH 3/5] build fix --- src/components/organisms/GameBoard/Footer/index.tsx | 1 + src/components/organisms/GameBoard/Layout.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx index 65a557e..aaf79b6 100644 --- a/src/components/organisms/GameBoard/Footer/index.tsx +++ b/src/components/organisms/GameBoard/Footer/index.tsx @@ -33,6 +33,7 @@ export const GameFooter = (props: GameStateActions) => { {props.gridItems?.[gridIndex]?.map((card, index) => (

    diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx index 5c4d259..e8e9ed4 100644 --- a/src/components/organisms/GameBoard/Layout.tsx +++ b/src/components/organisms/GameBoard/Layout.tsx @@ -1,5 +1,5 @@ import { ReactNode } from "react"; -import { Grid, HStack } from "styled-system/jsx"; +import { Grid } from "styled-system/jsx"; import { grid } from "styled-system/patterns"; import { LAYOUT_HEIGHTS } from "./constants"; import { GameFooter } from "./Footer"; From 1c1c2374e78c27d0f48f9fdcf05d8a632f7455b0 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 03:42:23 +0200 Subject: [PATCH 4/5] clean --- .../organisms/GameBoard/Footer/index.tsx | 60 +++++++++++-------- src/components/organisms/GameBoard/index.tsx | 8 ++- 2 files changed, 43 insertions(+), 25 deletions(-) diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx index aaf79b6..a7db083 100644 --- a/src/components/organisms/GameBoard/Footer/index.tsx +++ b/src/components/organisms/GameBoard/Footer/index.tsx @@ -1,4 +1,4 @@ -import { HStack } from "styled-system/jsx"; +import { Grid, HStack } from "styled-system/jsx"; import { LAYOUT_HEIGHTS } from "../constants"; import { DroppableGridItem } from "@/components/molecules/DropGridItem"; import { @@ -22,29 +22,41 @@ export const GameFooter = (props: GameStateActions) => { overflowX: "auto", }} > - - `card-${gridIndex}-${cardIndex}`, - )} - strategy={horizontalListSortingStrategy} - > - - {props.gridItems?.[gridIndex]?.map((card, index) => ( -
    - - {card?.type === "site" && } - {card?.type !== "site" && } - -
    - ))} -     -     -     + +

    hjkl

    +

    hjkl

    + + `card-${gridIndex}-${cardIndex}`, + )} + strategy={horizontalListSortingStrategy} + > + + {props.gridItems?.[gridIndex]?.map((card, index) => ( +
    + + {card?.type === "site" && } + {card?.type !== "site" && } + +
    + ))} +     +     +     +
    ); }; diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx index 908726d..8e67a6d 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"; From 7e9b9caa1c55f78ab4efd79ad5dc2430a4c215b1 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 03:42:37 +0200 Subject: [PATCH 5/5] clear --- 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 8e67a6d..908726d 100644 --- a/src/components/organisms/GameBoard/index.tsx +++ b/src/components/organisms/GameBoard/index.tsx @@ -2,13 +2,7 @@ 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 { - closestCenter, - closestCorners, - CollisionDetection, - 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";