From 8644a3dc36dd9f4100cdd08e31f47fc77cca91f8 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 12:59:59 +0200 Subject: [PATCH 01/18] setup --- .../organisms/GameBoard/Footer/index.tsx | 2 +- src/components/organisms/GameBoard/Layout.tsx | 54 +++++++++++++------ src/components/organisms/GameBoard/index.tsx | 1 - .../organisms/GameBoard/useHandleDrag.ts | 6 --- 4 files changed, 40 insertions(+), 23 deletions(-) diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx index ff73650..2af73c0 100644 --- a/src/components/organisms/GameBoard/Footer/index.tsx +++ b/src/components/organisms/GameBoard/Footer/index.tsx @@ -13,7 +13,7 @@ import { CardImage } from "@/components/atoms/mock-cards/card"; export const GameFooter = (props: GameStateActions) => { const gridIndex = 20; const cardsInHand = props.gridItems[gridIndex] ?? []; - console.log({ cardsInHand }); + return (
-
- {props.children} -
+ + + + + + + +
+ {props.children} +
+ diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx index c627ffc..8c68251 100644 --- a/src/components/organisms/GameBoard/index.tsx +++ b/src/components/organisms/GameBoard/index.tsx @@ -41,7 +41,6 @@ export const GameBoard = ({ gridItems, setGridItems }: GameStateActions) => { // 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); } diff --git a/src/components/organisms/GameBoard/useHandleDrag.ts b/src/components/organisms/GameBoard/useHandleDrag.ts index 8fe55d5..a6158f9 100644 --- a/src/components/organisms/GameBoard/useHandleDrag.ts +++ b/src/components/organisms/GameBoard/useHandleDrag.ts @@ -21,7 +21,6 @@ export const useHandleDrag = ({ function handleDragEnd(event: DragEndEvent) { setActive(null); const { active, over } = event; - console.log({ active, over }); if (over?.id === active.id) return; // if self, do nothing @@ -29,11 +28,6 @@ export const useHandleDrag = ({ const originIndex = parseInt(active.data.current?.gridIndex, 10); 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]; const cardsInCell = [...updatedGrid[originIndex]]; // Copy the cards in the original cell From d2bdfc31b42a36b15502c34c33426baf19b93951 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 14:53:12 +0200 Subject: [PATCH 02/18] setup aura --- .../organisms/GameBoard/AuraDrop/index.tsx | 16 +++++++++++++ src/components/organisms/GameBoard/Layout.tsx | 23 ++++++++++++++----- 2 files changed, 33 insertions(+), 6 deletions(-) create mode 100644 src/components/organisms/GameBoard/AuraDrop/index.tsx diff --git a/src/components/organisms/GameBoard/AuraDrop/index.tsx b/src/components/organisms/GameBoard/AuraDrop/index.tsx new file mode 100644 index 0000000..888924d --- /dev/null +++ b/src/components/organisms/GameBoard/AuraDrop/index.tsx @@ -0,0 +1,16 @@ +import { DroppableGridItem } from "@/components/molecules/DropGridItem"; +import { ReactNode } from "react"; + +export const AuraDrop = ({ + gridIndex, + children, +}: { + gridIndex: number; + children: ReactNode; +}) => { + return ( + + {children} + + ); +}; diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx index b955cf7..fa4f625 100644 --- a/src/components/organisms/GameBoard/Layout.tsx +++ b/src/components/organisms/GameBoard/Layout.tsx @@ -4,12 +4,14 @@ import { grid } from "styled-system/patterns"; import { LAYOUT_HEIGHTS } from "./constants"; import { GameFooter } from "./Footer"; import { GameStateActions } from "."; +import { AuraDrop } from "./AuraDrop"; const { nav, body, footer } = LAYOUT_HEIGHTS; export const GameLayout = ( props: GameStateActions & { children: ReactNode }, ) => { + console.table(props.gridItems); return (
- + + > + + + {/* {props.gridItems[21][0].img} */} + + Date: Sun, 8 Sep 2024 15:14:35 +0200 Subject: [PATCH 03/18] working aura placement --- src/components/molecules/DragItem/index.tsx | 10 ++- .../index.tsx => Auras/AuraDrop.tsx} | 0 .../organisms/GameBoard/Auras/index.tsx | 66 +++++++++++++++++ src/components/organisms/GameBoard/Layout.tsx | 35 +-------- src/components/organisms/GameBoard/index.tsx | 2 +- src/pages/game.tsx | 74 +++++++++++-------- 6 files changed, 120 insertions(+), 67 deletions(-) rename src/components/organisms/GameBoard/{AuraDrop/index.tsx => Auras/AuraDrop.tsx} (100%) create mode 100644 src/components/organisms/GameBoard/Auras/index.tsx diff --git a/src/components/molecules/DragItem/index.tsx b/src/components/molecules/DragItem/index.tsx index 24a1641..8e38451 100644 --- a/src/components/molecules/DragItem/index.tsx +++ b/src/components/molecules/DragItem/index.tsx @@ -1,10 +1,11 @@ import { useDraggable } from "@dnd-kit/core"; -import { ReactNode } from "react"; +import { CSSProperties, ReactNode } from "react"; export const DragItem = (props: { children: ReactNode; gridIndex: number; index: number; + style?: CSSProperties; }) => { const { attributes, listeners, setNodeRef, transform } = useDraggable({ id: `${props.gridIndex}-${props.index}`, @@ -20,7 +21,12 @@ export const DragItem = (props: { : undefined; return ( -
+
{props.children}
); diff --git a/src/components/organisms/GameBoard/AuraDrop/index.tsx b/src/components/organisms/GameBoard/Auras/AuraDrop.tsx similarity index 100% rename from src/components/organisms/GameBoard/AuraDrop/index.tsx rename to src/components/organisms/GameBoard/Auras/AuraDrop.tsx diff --git a/src/components/organisms/GameBoard/Auras/index.tsx b/src/components/organisms/GameBoard/Auras/index.tsx new file mode 100644 index 0000000..f8ff066 --- /dev/null +++ b/src/components/organisms/GameBoard/Auras/index.tsx @@ -0,0 +1,66 @@ +import { Box } from "styled-system/jsx"; +import { AuraDrop } from "./AuraDrop"; +import { GameStateActions } from ".."; +import { DragItem } from "@/components/molecules/DragItem"; + +export const Auras = (props: GameStateActions) => { + const auraCards = props.gridItems?.[21]?.[0]; + return ( + + + {!auraCards?.id && ( + + + {/* {props.gridItems[21][0].img} */} + + )} + {auraCards?.id && ( + + + + )} + + + + + ); +}; diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx index fa4f625..7ce378d 100644 --- a/src/components/organisms/GameBoard/Layout.tsx +++ b/src/components/organisms/GameBoard/Layout.tsx @@ -5,6 +5,7 @@ import { LAYOUT_HEIGHTS } from "./constants"; import { GameFooter } from "./Footer"; import { GameStateActions } from "."; import { AuraDrop } from "./AuraDrop"; +import { Auras } from "./Auras"; const { nav, body, footer } = LAYOUT_HEIGHTS; @@ -36,39 +37,7 @@ export const GameLayout = (

- - - - - {/* {props.gridItems[21][0].img} */} - - - - - - +
{ {activeId ? ( - + {activeCard?.type === "site" && } {activeCard?.type !== "site" && } diff --git a/src/pages/game.tsx b/src/pages/game.tsx index 3c9e850..9e5d821 100644 --- a/src/pages/game.tsx +++ b/src/pages/game.tsx @@ -3,44 +3,56 @@ import { SorceryCard } from "@/types/card"; import { useState } from "react"; const initCards = Array.from({ length: 18 }, (_, gridIndex) => [ + // { + // id: `atlas-ab${gridIndex}`, + // img: "atlas_rift_valley.webp", + // type: "site", + // } as GameCard, // Each droppable starts with a single card +]); +const customCards = [ + [ + { + id: "headless-01", + img: "headless_haunt.webp", + type: "minion", + } as GameCard, + ], + [ + { + id: "atlas-01", + img: "atlas_cloud_city.webp", + type: "site", + } as GameCard, + ], +]; + +const handCards = [ { - id: `card-${gridIndex}-0`, - img: "atlas_rift_valley.webp", + id: "atlas-02", + img: "atlas_cloud_city.webp", type: "site", - } as GameCard, // Each droppable starts with a single card -]); + } as GameCard, + { + id: "headless-02", + img: "headless_haunt.webp", + type: "minion", + } as GameCard, +]; + +/** + * gridIndexes + * 0-19 grid + * 20 hand + * 21-33 aura + * */ type GameCard = SorceryCard & { id: string }; // for game position export default function GamePage() { const [gridItems, setGridItems] = useState([ ...initCards, - - [ - { - id: "card-18-0", - img: "headless_haunt.webp", - type: "minion", - } as GameCard, - ], - [ - { - id: "card-19-0", - img: "atlas_cloud_city.webp", - type: "site", - } as GameCard, - ], - [ - { - id: "card-20-0", - img: "atlas_cloud_city.webp", - type: "site", - } as GameCard, - { - id: "card-20-1", - img: "headless_haunt.webp", - type: "minion", - }, - ], + ...customCards, + handCards, + [], ]); return ; From 62031a718c9b4dbfec9860a0fd4e22995b0b3cf3 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 15:37:06 +0200 Subject: [PATCH 04/18] reduce cards on table --- src/pages/game.tsx | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/pages/game.tsx b/src/pages/game.tsx index 9e5d821..ebc1609 100644 --- a/src/pages/game.tsx +++ b/src/pages/game.tsx @@ -9,34 +9,44 @@ const initCards = Array.from({ length: 18 }, (_, gridIndex) => [ // type: "site", // } as GameCard, // Each droppable starts with a single card ]); -const customCards = [ +const customCards: GameCard[][] = [ [ { id: "headless-01", img: "headless_haunt.webp", type: "minion", - } as GameCard, + }, ], [ { id: "atlas-01", img: "atlas_cloud_city.webp", type: "site", - } as GameCard, + }, ], ]; -const handCards = [ +const handCards: GameCard[] = [ { id: "atlas-02", img: "atlas_cloud_city.webp", type: "site", - } as GameCard, + }, { id: "headless-02", img: "headless_haunt.webp", type: "minion", - } as GameCard, + }, + { + id: "headless-03", + img: "headless_haunt.webp", + type: "minion", + }, + { + id: "headless-04", + img: "headless_haunt.webp", + type: "minion", + }, ]; /** From 78c8b58c8e105f5d44fef16c4a38d56b11c35ff5 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 15:37:10 +0200 Subject: [PATCH 05/18] clean --- src/components/organisms/GameBoard/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx index 3e9b987..121366d 100644 --- a/src/components/organisms/GameBoard/index.tsx +++ b/src/components/organisms/GameBoard/index.tsx @@ -63,15 +63,11 @@ export const GameBoard = ({ gridItems, setGridItems }: GameStateActions) => { card.id)} - // items={cards.map( - // (card, cardIndex) => `card-${gridIndex}-${cardIndex}`, - // )} strategy={rectSortingStrategy} > {cards.map((card, cardIndex) => ( Date: Sun, 8 Sep 2024 15:37:13 +0200 Subject: [PATCH 06/18] clean --- src/components/organisms/GameBoard/Layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx index 7ce378d..f22e516 100644 --- a/src/components/organisms/GameBoard/Layout.tsx +++ b/src/components/organisms/GameBoard/Layout.tsx @@ -4,7 +4,6 @@ import { grid } from "styled-system/patterns"; import { LAYOUT_HEIGHTS } from "./constants"; import { GameFooter } from "./Footer"; import { GameStateActions } from "."; -import { AuraDrop } from "./AuraDrop"; import { Auras } from "./Auras"; const { nav, body, footer } = LAYOUT_HEIGHTS; From 682e5a18f883d446d69c27f34fec02e84796eebb Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 15:37:16 +0200 Subject: [PATCH 07/18] clean --- src/components/organisms/GameBoard/Auras/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/organisms/GameBoard/Auras/index.tsx b/src/components/organisms/GameBoard/Auras/index.tsx index f8ff066..dc6a43e 100644 --- a/src/components/organisms/GameBoard/Auras/index.tsx +++ b/src/components/organisms/GameBoard/Auras/index.tsx @@ -24,11 +24,7 @@ export const Auras = (props: GameStateActions) => { backgroundSize="cover" transform="rotate(90deg)" borderRadius="0.5rem" - // style={{ - // backgroundImage: `url(/mock-cards/${props.gridItems?.[21]?.[0]?.img})`, - // }} /> - {/* {props.gridItems[21][0].img} */} )} {auraCards?.id && ( From d420ee44ab837d129a6baa6094485d01ef960e35 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 15:37:23 +0200 Subject: [PATCH 08/18] allow custom styling --- src/components/molecules/DropGridItem/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/molecules/DropGridItem/index.tsx b/src/components/molecules/DropGridItem/index.tsx index e1dac90..6caecf6 100644 --- a/src/components/molecules/DropGridItem/index.tsx +++ b/src/components/molecules/DropGridItem/index.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from "react"; +import { CSSProperties, ReactNode } from "react"; import { css } from "styled-system/css"; import { Box } from "styled-system/jsx"; import { useDroppable } from "@dnd-kit/core"; @@ -7,6 +7,7 @@ export const DroppableGridItem = (props: { children: ReactNode; id: string; gridIndex: number; + style?: CSSProperties; }) => { const { isOver, setNodeRef } = useDroppable({ id: "droppable-" + props.id, @@ -17,6 +18,7 @@ export const DroppableGridItem = (props: {
Date: Sun, 8 Sep 2024 15:56:58 +0200 Subject: [PATCH 09/18] add dialog --- src/components/ui/dialog/index.tsx | 46 ++++++++++ src/components/ui/dialog/recipe.ts | 135 +++++++++++++++++++++++++++++ 2 files changed, 181 insertions(+) create mode 100644 src/components/ui/dialog/index.tsx create mode 100644 src/components/ui/dialog/recipe.ts diff --git a/src/components/ui/dialog/index.tsx b/src/components/ui/dialog/index.tsx new file mode 100644 index 0000000..6796a98 --- /dev/null +++ b/src/components/ui/dialog/index.tsx @@ -0,0 +1,46 @@ +"use client"; + +import * as React from "react"; +import * as DialogPrimitive from "@radix-ui/react-dialog"; +import { X } from "lucide-react"; +import { createStyleContext } from "@shadow-panda/style-context"; +import { styled } from "styled-system/jsx"; +import { css } from "styled-system/css"; +import { dialog, icon } from "styled-system/recipes"; + +const { withProvider, withContext } = createStyleContext(dialog); + +const DialogPortal = withContext(styled(DialogPrimitive.Portal), "portal"); +const DialogOverlay = withContext(styled(DialogPrimitive.Overlay), "overlay"); +const DialogClose = withContext(styled(DialogPrimitive.Close), "close"); + +const Content = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)); +Content.displayName = DialogPrimitive.Content.displayName; + +export const Dialog = withProvider(styled(DialogPrimitive.Root), "root"); +export const DialogTrigger = withContext( + styled(DialogPrimitive.Trigger), + "trigger", +); +export const DialogContent = withContext(styled(Content), "content"); +export const DialogHeader = withContext(styled("div"), "header"); +export const DialogFooter = withContext(styled("div"), "footer"); +export const DialogTitle = withContext(styled(DialogPrimitive.Title), "title"); +export const DialogDescription = withContext( + styled(DialogPrimitive.Description), + "description", +); diff --git a/src/components/ui/dialog/recipe.ts b/src/components/ui/dialog/recipe.ts new file mode 100644 index 0000000..252b81e --- /dev/null +++ b/src/components/ui/dialog/recipe.ts @@ -0,0 +1,135 @@ +import { defineSlotRecipe } from "@pandacss/dev"; + +export const dialog = defineSlotRecipe({ + className: "dialog", + description: "Styles for the Dialog component", + slots: [ + "root", + "trigger", + "portal", + "overlay", + "close", + "content", + "header", + "footer", + "title", + "description", + ], + base: { + overlay: { + position: "fixed", + inset: "0", + zIndex: 50, + bga: "background/80", + backdropBlur: "sm", + + "&[data-state=open]": { + animateIn: true, + fadeIn: 0, + }, + + "&[data-state=closed]": { + animateOut: true, + fadeOut: 0, + }, + }, + close: { + position: "absolute", + right: "4", + top: "4", + rounded: "sm", + opacity: "0.7", + focusRingOffsetColor: "background", + transition: "opacity", + cursor: "pointer", + + _hover: { + opacity: "1", + }, + + _focus: { + outline: "2px solid transparent", + outlineOffset: "2px", + focusRingWidth: "2", + focusRingColor: "ring", + focusRingOffsetWidth: "2", + }, + + _disabled: { + pointerEvents: "none", + }, + + "[data-state=open]": { + bg: "accent", + color: "muted.foreground", + }, + }, + content: { + position: "fixed", + left: "50%", + top: "50%", + zIndex: 50, + display: "grid", + w: "full", + maxWidth: "lg", + translateX: "-50%", + translateY: "-50%", + transitionDuration: "normal", + gap: "4", + border: "base", + bg: "background", + p: "6", + boxShadow: "lg", + + "&[data-state=open]": { + animateIn: true, + fadeIn: 0, + zoomIn: 95, + slideInFromLeft: "50%", + slideInFromTop: "48%", + }, + + "&[data-state=closed]": { + animateOut: true, + fadeOut: 0, + zoomOut: 95, + slideOutToLeft: "50%", + slideOutToTop: "48%", + }, + + sm: { + rounded: "lg", + }, + }, + header: { + display: "flex", + flexDirection: "column", + spaceY: "1.5", + textAlign: "center", + + sm: { + textAlign: "left", + }, + }, + footer: { + display: "flex", + flexDirection: "column-reverse", + + sm: { + flexDirection: "row", + justifyContent: "flex-end", + spaceX: "2", + }, + }, + title: { + textStyle: "lg", + fontWeight: "semibold", + leading: "none", + tracking: "tight", + }, + description: { + textStyle: "sm", + color: "muted.foreground", + }, + }, +}); From 576f5c7ba1fc5a5b27bb6b2f1bcf5f27ded482fc Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 15:57:02 +0200 Subject: [PATCH 10/18] add modal --- src/components/atoms/Modal/index.tsx | 30 ++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/components/atoms/Modal/index.tsx diff --git a/src/components/atoms/Modal/index.tsx b/src/components/atoms/Modal/index.tsx new file mode 100644 index 0000000..bdd9e45 --- /dev/null +++ b/src/components/atoms/Modal/index.tsx @@ -0,0 +1,30 @@ +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { DialogProps } from "@radix-ui/react-dialog"; +import { ReactNode } from "react"; + +export const Modal = (props: { + wrapperProps: DialogProps; + trigger?: ReactNode; +}) => { + return ( + + {props.trigger} + + + Are you sure absolutely sure? + + This action cannot be undone. This will permanently delete your + account and remove your data from our servers. + + + + + ); +}; From 0b7c494bdfda62cc70d28d805178a31b0c7113ff Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 15:57:08 +0200 Subject: [PATCH 11/18] add deps for modal --- package.json | 2 + pnpm-lock.yaml | 431 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 433 insertions(+) diff --git a/package.json b/package.json index e8ef8f8..e9ae144 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,9 @@ "dependencies": { "@dnd-kit/core": "^6.1.0", "@dnd-kit/sortable": "^8.0.0", + "@radix-ui/react-dialog": "^1.1.1", "@shadow-panda/style-context": "^0.7.1", + "lucide-react": "^0.439.0", "next": "14.2.8", "react": "^18", "react-dom": "^18" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d74b6f8..a83bc4a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,9 +14,15 @@ importers: '@dnd-kit/sortable': specifier: ^8.0.0 version: 8.0.0(@dnd-kit/core@6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + '@radix-ui/react-dialog': + specifier: ^1.1.1 + version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@shadow-panda/style-context': specifier: ^0.7.1 version: 0.7.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + lucide-react: + specifier: ^0.439.0 + version: 0.439.0(react@18.3.1) next: specifier: 14.2.8 version: 14.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -421,6 +427,168 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} + '@radix-ui/primitive@1.1.0': + resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==} + + '@radix-ui/react-compose-refs@1.1.0': + resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-context@1.1.0': + resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-dialog@1.1.1': + resolution: {integrity: sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-dismissable-layer@1.1.0': + resolution: {integrity: sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-focus-guards@1.1.0': + resolution: {integrity: sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-focus-scope@1.1.0': + resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-id@1.1.0': + resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-portal@1.1.1': + resolution: {integrity: sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-presence@1.1.0': + resolution: {integrity: sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-primitive@2.0.0': + resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-slot@1.1.0': + resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-use-callback-ref@1.1.0': + resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-use-controllable-state@1.1.0': + resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-use-escape-keydown@1.1.0': + resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-use-layout-effect@1.1.0': + resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@rtsao/scc@1.1.0': resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==} @@ -594,6 +762,10 @@ packages: argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + aria-hidden@1.2.4: + resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==} + engines: {node: '>=10'} + aria-query@5.1.3: resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==} @@ -796,6 +968,9 @@ packages: engines: {node: '>=0.10'} hasBin: true + detect-node-es@1.1.0: + resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==} + dir-glob@3.0.1: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} engines: {node: '>=8'} @@ -1064,6 +1239,10 @@ packages: resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==} engines: {node: '>= 0.4'} + get-nonce@1.0.1: + resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==} + engines: {node: '>=6'} + get-symbol-description@1.0.2: resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==} engines: {node: '>= 0.4'} @@ -1161,6 +1340,9 @@ packages: resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==} engines: {node: '>= 0.4'} + invariant@2.2.4: + resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} + is-arguments@1.1.1: resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==} engines: {node: '>= 0.4'} @@ -1426,6 +1608,11 @@ packages: lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + lucide-react@0.439.0: + resolution: {integrity: sha512-PafSWvDTpxdtNEndS2HIHxcNAbd54OaqSYJO90/b63rab2HWYqDbH194j0i82ZFdWOAcf0AHinRykXRRK2PJbw==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc + magic-string@0.30.11: resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==} @@ -1709,6 +1896,36 @@ packages: react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + react-remove-scroll-bar@2.3.6: + resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + react-remove-scroll@2.5.7: + resolution: {integrity: sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + react-style-singleton@2.2.1: + resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -1990,6 +2207,26 @@ packages: uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} + use-callback-ref@1.3.2: + resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + use-sidecar@1.1.2: + resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -2425,6 +2662,141 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true + '@radix-ui/primitive@1.1.0': {} + + '@radix-ui/react-compose-refs@1.1.0(@types/react@18.3.5)(react@18.3.1)': + dependencies: + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.5 + + '@radix-ui/react-context@1.1.0(@types/react@18.3.5)(react@18.3.1)': + dependencies: + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.5 + + '@radix-ui/react-dialog@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-context': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-focus-guards': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-slot': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.5)(react@18.3.1) + aria-hidden: 1.2.4 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-remove-scroll: 2.5.7(@types/react@18.3.5)(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.5 + '@types/react-dom': 18.3.0 + + '@radix-ui/react-dismissable-layer@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.3.5)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.5 + '@types/react-dom': 18.3.0 + + '@radix-ui/react-focus-guards@1.1.0(@types/react@18.3.5)(react@18.3.1)': + dependencies: + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.5 + + '@radix-ui/react-focus-scope@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.5)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.5 + '@types/react-dom': 18.3.0 + + '@radix-ui/react-id@1.1.0(@types/react@18.3.5)(react@18.3.1)': + dependencies: + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.5)(react@18.3.1) + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.5 + + '@radix-ui/react-portal@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.5)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.5 + '@types/react-dom': 18.3.0 + + '@radix-ui/react-presence@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.5)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.5 + '@types/react-dom': 18.3.0 + + '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-slot': 1.1.0(@types/react@18.3.5)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.5 + '@types/react-dom': 18.3.0 + + '@radix-ui/react-slot@1.1.0(@types/react@18.3.5)(react@18.3.1)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.5)(react@18.3.1) + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.5 + + '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.5)(react@18.3.1)': + dependencies: + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.5 + + '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.3.5)(react@18.3.1)': + dependencies: + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.5)(react@18.3.1) + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.5 + + '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.3.5)(react@18.3.1)': + dependencies: + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.5)(react@18.3.1) + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.5 + + '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.3.5)(react@18.3.1)': + dependencies: + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.5 + '@rtsao/scc@1.1.0': {} '@rushstack/eslint-patch@1.10.4': {} @@ -2631,6 +3003,10 @@ snapshots: argparse@2.0.1: {} + aria-hidden@1.2.4: + dependencies: + tslib: 2.7.0 + aria-query@5.1.3: dependencies: deep-equal: 2.2.3 @@ -2880,6 +3256,8 @@ snapshots: detect-libc@1.0.3: {} + detect-node-es@1.1.0: {} + dir-glob@3.0.1: dependencies: path-type: 4.0.0 @@ -3327,6 +3705,8 @@ snapshots: has-symbols: 1.0.3 hasown: 2.0.2 + get-nonce@1.0.1: {} + get-symbol-description@1.0.2: dependencies: call-bind: 1.0.7 @@ -3432,6 +3812,10 @@ snapshots: hasown: 2.0.2 side-channel: 1.0.6 + invariant@2.2.4: + dependencies: + loose-envify: 1.4.0 + is-arguments@1.1.1: dependencies: call-bind: 1.0.7 @@ -3668,6 +4052,10 @@ snapshots: lru-cache@10.4.3: {} + lucide-react@0.439.0(react@18.3.1): + dependencies: + react: 18.3.1 + magic-string@0.30.11: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 @@ -3939,6 +4327,34 @@ snapshots: react-is@16.13.1: {} + react-remove-scroll-bar@2.3.6(@types/react@18.3.5)(react@18.3.1): + dependencies: + react: 18.3.1 + react-style-singleton: 2.2.1(@types/react@18.3.5)(react@18.3.1) + tslib: 2.7.0 + optionalDependencies: + '@types/react': 18.3.5 + + react-remove-scroll@2.5.7(@types/react@18.3.5)(react@18.3.1): + dependencies: + react: 18.3.1 + react-remove-scroll-bar: 2.3.6(@types/react@18.3.5)(react@18.3.1) + react-style-singleton: 2.2.1(@types/react@18.3.5)(react@18.3.1) + tslib: 2.7.0 + use-callback-ref: 1.3.2(@types/react@18.3.5)(react@18.3.1) + use-sidecar: 1.1.2(@types/react@18.3.5)(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.5 + + react-style-singleton@2.2.1(@types/react@18.3.5)(react@18.3.1): + dependencies: + get-nonce: 1.0.1 + invariant: 2.2.4 + react: 18.3.1 + tslib: 2.7.0 + optionalDependencies: + '@types/react': 18.3.5 + react@18.3.1: dependencies: loose-envify: 1.4.0 @@ -4239,6 +4655,21 @@ snapshots: dependencies: punycode: 2.3.1 + use-callback-ref@1.3.2(@types/react@18.3.5)(react@18.3.1): + dependencies: + react: 18.3.1 + tslib: 2.7.0 + optionalDependencies: + '@types/react': 18.3.5 + + use-sidecar@1.1.2(@types/react@18.3.5)(react@18.3.1): + dependencies: + detect-node-es: 1.1.0 + react: 18.3.1 + tslib: 2.7.0 + optionalDependencies: + '@types/react': 18.3.5 + util-deprecate@1.0.2: {} which-boxed-primitive@1.0.2: From 732cdc631e09181edd4efa49a8f9773d3500bc2d Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 16:28:10 +0200 Subject: [PATCH 12/18] working with modal --- src/components/atoms/Modal/index.tsx | 9 ++- src/components/atoms/card-view/card.tsx | 37 ++++++++++++ src/components/atoms/mock-cards/atlas.tsx | 3 +- src/components/atoms/mock-cards/card.tsx | 4 +- src/components/organisms/GameBoard/index.tsx | 59 +++++++++++++++++--- src/components/ui/dialog/index.tsx | 20 ++++--- 6 files changed, 107 insertions(+), 25 deletions(-) create mode 100644 src/components/atoms/card-view/card.tsx diff --git a/src/components/atoms/Modal/index.tsx b/src/components/atoms/Modal/index.tsx index bdd9e45..fd2ea56 100644 --- a/src/components/atoms/Modal/index.tsx +++ b/src/components/atoms/Modal/index.tsx @@ -12,17 +12,16 @@ import { ReactNode } from "react"; export const Modal = (props: { wrapperProps: DialogProps; trigger?: ReactNode; + title?: string; + content?: ReactNode; }) => { return ( {props.trigger} - Are you sure absolutely sure? - - This action cannot be undone. This will permanently delete your - account and remove your data from our servers. - + {props.title} + {props.content} diff --git a/src/components/atoms/card-view/card.tsx b/src/components/atoms/card-view/card.tsx new file mode 100644 index 0000000..ee528de --- /dev/null +++ b/src/components/atoms/card-view/card.tsx @@ -0,0 +1,37 @@ +import { Box } from "styled-system/jsx"; + +export const CardImage = ({ + img = "headless_haunt.webp", + position = "top", +}: { + img?: string; + position?: "top" | "bottom"; +}) => { + return ( + + {" "} + + ); +}; diff --git a/src/components/atoms/mock-cards/atlas.tsx b/src/components/atoms/mock-cards/atlas.tsx index cfae452..2c84c2c 100644 --- a/src/components/atoms/mock-cards/atlas.tsx +++ b/src/components/atoms/mock-cards/atlas.tsx @@ -19,7 +19,8 @@ export const CardAtlas = ({ } }, [isPressed]); - const show = preview && isHovering; // full preview of the card + // const show = preview && isHovering; // full preview of the card + const show = false; return ( { const hoverRef = useRef(null); const isHovering = useHover(hoverRef); @@ -25,7 +27,7 @@ export const CardImage = ({ } }, [isPressed]); - const show = preview && isHovering; + const show = props.show || (preview && isHovering); return ( { key={"grid-" + gridIndex} id={gridIndex.toString()} gridIndex={gridIndex} + style={{ overflowY: "auto" }} > { strategy={rectSortingStrategy} > {cards.map((card, cardIndex) => ( - - {card.type === "site" && } - {card.type !== "site" && } - + ))} @@ -91,3 +88,47 @@ export const GameBoard = ({ gridItems, setGridItems }: GameStateActions) => { ); }; + +const SortItemWrapper = ({ + card, + gridIndex, + cardIndex, +}: { + card: GameCard; + gridIndex: number; + cardIndex: number; +}) => { + const [preview, setPreview] = useState(false); + + return ( +
{ + e.preventDefault(); + setPreview(true); + }} + onContextMenu={(e) => { + e.preventDefault(); + setPreview(true); + }} + > + + {card.type === "site" && } + {card.type !== "site" && } + + + {card.type === "site" && } + {card.type !== "site" && } + + } + /> +
+ ); +}; diff --git a/src/components/ui/dialog/index.tsx b/src/components/ui/dialog/index.tsx index 6796a98..41f4199 100644 --- a/src/components/ui/dialog/index.tsx +++ b/src/components/ui/dialog/index.tsx @@ -2,17 +2,15 @@ import * as React from "react"; import * as DialogPrimitive from "@radix-ui/react-dialog"; -import { X } from "lucide-react"; import { createStyleContext } from "@shadow-panda/style-context"; import { styled } from "styled-system/jsx"; -import { css } from "styled-system/css"; -import { dialog, icon } from "styled-system/recipes"; +import { dialog } from "styled-system/recipes"; const { withProvider, withContext } = createStyleContext(dialog); const DialogPortal = withContext(styled(DialogPrimitive.Portal), "portal"); const DialogOverlay = withContext(styled(DialogPrimitive.Overlay), "overlay"); -const DialogClose = withContext(styled(DialogPrimitive.Close), "close"); +// const DialogClose = withContext(styled(DialogPrimitive.Close), "close"); const Content = React.forwardRef< React.ElementRef, @@ -20,12 +18,16 @@ const Content = React.forwardRef< >(({ children, ...props }, ref) => ( - + {children} - - - Close - + {/* */} + {/* */} + {/* Close */} + {/* */} )); From 2d1c1563891803461fe0f636790499af49498470 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 16:33:23 +0200 Subject: [PATCH 13/18] full atlas --- src/components/atoms/card-view/atlas.tsx | 33 ++++++++++++++++++++ src/components/organisms/GameBoard/index.tsx | 3 +- 2 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 src/components/atoms/card-view/atlas.tsx diff --git a/src/components/atoms/card-view/atlas.tsx b/src/components/atoms/card-view/atlas.tsx new file mode 100644 index 0000000..38a4a52 --- /dev/null +++ b/src/components/atoms/card-view/atlas.tsx @@ -0,0 +1,33 @@ +import { Box } from "styled-system/jsx"; + +export const FullCardAtlas = ({ + img = "atlas_rift_valley.webp", +}: { + img?: string; +}) => { + return ( + + {" "} + + ); +}; diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx index fe5ec80..2c2c82d 100644 --- a/src/components/organisms/GameBoard/index.tsx +++ b/src/components/organisms/GameBoard/index.tsx @@ -18,6 +18,7 @@ import { Box } from "styled-system/jsx"; import { Modal } from "@/components/atoms/Modal"; import { useState } from "react"; +import { FullCardAtlas } from "@/components/atoms/card-view/atlas"; type GameCard = SorceryCard & { id: string }; // for game position type Cards = GameCard[][]; @@ -124,7 +125,7 @@ const SortItemWrapper = ({ wrapperProps={{ open: preview, onOpenChange: setPreview }} content={ - {card.type === "site" && } + {card.type === "site" && } {card.type !== "site" && } } From 566a2701ee931c84ad35a45216e0c14344e2635e Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 16:52:48 +0200 Subject: [PATCH 14/18] much better drop and preview --- src/components/atoms/card-view/atlas.tsx | 2 +- .../molecules/DropGridItem/index.tsx | 3 + .../organisms/GameBoard/Auras/index.tsx | 67 ++++++++++++++----- src/components/organisms/GameBoard/Layout.tsx | 16 +---- src/pages/game.tsx | 2 +- 5 files changed, 60 insertions(+), 30 deletions(-) diff --git a/src/components/atoms/card-view/atlas.tsx b/src/components/atoms/card-view/atlas.tsx index 38a4a52..5488b86 100644 --- a/src/components/atoms/card-view/atlas.tsx +++ b/src/components/atoms/card-view/atlas.tsx @@ -27,7 +27,7 @@ export const FullCardAtlas = ({ bg="gray.400" borderRadius="1rem" transition="all 0.25s ease" - />{" "} + /> ); }; diff --git a/src/components/molecules/DropGridItem/index.tsx b/src/components/molecules/DropGridItem/index.tsx index 6caecf6..4216979 100644 --- a/src/components/molecules/DropGridItem/index.tsx +++ b/src/components/molecules/DropGridItem/index.tsx @@ -24,6 +24,9 @@ export const DroppableGridItem = (props: { w: "100%", position: "relative", })} + onContextMenu={(e) => { + e.preventDefault(); + }} > {props.children} { const auraCards = props.gridItems?.[21]?.[0]; @@ -28,23 +33,11 @@ export const Auras = (props: GameStateActions) => { )} {auraCards?.id && ( - - - + card={props.gridItems?.[21]?.[0]} + /> )} @@ -60,3 +53,47 @@ export const Auras = (props: GameStateActions) => { ); }; + +const DragWrapper = ({ + card, + ...props +}: { + gridIndex: number; + index: number; + card: GameCard; +}) => { + const [preview, setPreview] = useState(false); + return ( +
+ + { + e.preventDefault(); + setPreview(true); + }} + /> + + + {card.type === "site" && } + {card.type !== "site" && } + + } + /> +
+ ); +}; diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx index f22e516..60206eb 100644 --- a/src/components/organisms/GameBoard/Layout.tsx +++ b/src/components/organisms/GameBoard/Layout.tsx @@ -17,22 +17,12 @@ export const GameLayout = (
-

- While hovering over a card, click{" "} - - ALT - {" "} - key +

+ Right click cards to view in full

diff --git a/src/pages/game.tsx b/src/pages/game.tsx index ebc1609..4559e11 100644 --- a/src/pages/game.tsx +++ b/src/pages/game.tsx @@ -56,7 +56,7 @@ const handCards: GameCard[] = [ * 21-33 aura * */ -type GameCard = SorceryCard & { id: string }; // for game position +export type GameCard = SorceryCard & { id: string }; // for game position export default function GamePage() { const [gridItems, setGridItems] = useState([ ...initCards, From f3d477f26e764b8a16ef8bd90f27f637a867bb06 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 17:07:29 +0200 Subject: [PATCH 15/18] add outline to know when to click --- .../organisms/GameBoard/Auras/index.tsx | 74 ++++++++++--------- 1 file changed, 39 insertions(+), 35 deletions(-) diff --git a/src/components/organisms/GameBoard/Auras/index.tsx b/src/components/organisms/GameBoard/Auras/index.tsx index 8eb6f8a..3123c23 100644 --- a/src/components/organisms/GameBoard/Auras/index.tsx +++ b/src/components/organisms/GameBoard/Auras/index.tsx @@ -9,37 +9,9 @@ import { FullCardAtlas } from "@/components/atoms/card-view/atlas"; import { CardImage as FullCard } from "@/components/atoms/card-view/card"; export const Auras = (props: GameStateActions) => { - const auraCards = props.gridItems?.[21]?.[0]; return ( - - {!auraCards?.id && ( - - - - )} - {auraCards?.id && ( - - )} - + { ); }; +const Aura = (props: { card: GameCard; gridIndex: number; index: number }) => { + const auraCard = props.card; + return ( + + {!auraCard?.id && ( + + + + )} + {auraCard?.id && } + + ); +}; + const DragWrapper = ({ card, ...props @@ -66,15 +69,16 @@ const DragWrapper = ({ return (
- {card.type === "site" && } - {card.type !== "site" && } + {card?.type === "site" && } + {card?.type !== "site" && } } /> From 88fbe7a41c87bd40af322eca998d88f8d35a4c4b Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 17:08:17 +0200 Subject: [PATCH 16/18] clean with larger gap to select --- src/components/organisms/GameBoard/Layout.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx index 60206eb..f58543c 100644 --- a/src/components/organisms/GameBoard/Layout.tsx +++ b/src/components/organisms/GameBoard/Layout.tsx @@ -11,7 +11,6 @@ const { nav, body, footer } = LAYOUT_HEIGHTS; export const GameLayout = ( props: GameStateActions & { children: ReactNode }, ) => { - console.table(props.gridItems); return (
Date: Sun, 8 Sep 2024 17:59:23 +0200 Subject: [PATCH 17/18] working? --- .../organisms/GameBoard/Auras/index.tsx | 70 +++++++++++++++---- src/pages/game.tsx | 4 +- 2 files changed, 60 insertions(+), 14 deletions(-) diff --git a/src/components/organisms/GameBoard/Auras/index.tsx b/src/components/organisms/GameBoard/Auras/index.tsx index 3123c23..234afde 100644 --- a/src/components/organisms/GameBoard/Auras/index.tsx +++ b/src/components/organisms/GameBoard/Auras/index.tsx @@ -11,28 +11,72 @@ import { CardImage as FullCard } from "@/components/atoms/card-view/card"; export const Auras = (props: GameStateActions) => { return ( - + {/* {Array.from({ length: 3 }).map((_, index) => ( */} + {/* */} + {/* ))} */} + {/* */} - + + + + + + + + ); }; -const Aura = (props: { card: GameCard; gridIndex: number; index: number }) => { +const Aura = (props: { + card: GameCard; + gridIndex: number; + index: number; + top: string; + left: string; +}) => { const auraCard = props.card; + return ( { }} > {!auraCard?.id && ( - + []); + /** * gridIndexes * 0-19 grid @@ -62,7 +64,7 @@ export default function GamePage() { ...initCards, ...customCards, handCards, - [], + ...auraCards, ]); return ; From 632c1ac63a32735de52851fa7fa6881dca1138ef Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 8 Sep 2024 23:35:41 +0200 Subject: [PATCH 18/18] working across all of them --- .../organisms/GameBoard/Auras/index.tsx | 80 +++++-------------- src/pages/game.tsx | 2 + 2 files changed, 24 insertions(+), 58 deletions(-) diff --git a/src/components/organisms/GameBoard/Auras/index.tsx b/src/components/organisms/GameBoard/Auras/index.tsx index 234afde..a292a1b 100644 --- a/src/components/organisms/GameBoard/Auras/index.tsx +++ b/src/components/organisms/GameBoard/Auras/index.tsx @@ -11,72 +11,34 @@ import { CardImage as FullCard } from "@/components/atoms/card-view/card"; export const Auras = (props: GameStateActions) => { return ( - {/* {Array.from({ length: 3 }).map((_, index) => ( */} - {/* */} - {/* ))} */} - {/* */} - - - - - - - - - - + {Array.from({ length: 12 }).map((_, index) => ( + + ))} ); }; -const Aura = (props: { - card: GameCard; - gridIndex: number; - index: number; - top: string; - left: string; -}) => { +const Aura = (props: { card: GameCard; gridIndex: number; index: number }) => { const auraCard = props.card; + const auraIndex = props.gridIndex - 21; // normalize to zero + const topIndex = Math.floor(auraIndex / 4) + 1; // increments every 4 + const top = `${topIndex * 25}%`; // in percent + const leftIndex = 1 + (auraIndex % 4); // every 4, resets + const left = `${leftIndex * 20}%`; // in percent + return ( )} - {auraCard?.id && } + {auraCard?.id && ( + + )} ); }; diff --git a/src/pages/game.tsx b/src/pages/game.tsx index cf0cdfe..5d2d408 100644 --- a/src/pages/game.tsx +++ b/src/pages/game.tsx @@ -67,5 +67,7 @@ export default function GamePage() { ...auraCards, ]); + console.log(gridItems.length, "length"); + return ; }