From 924de304d326c7436269aed48fa20e34c5ae1629 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Mon, 9 Sep 2024 23:13:43 +0200 Subject: [PATCH 1/6] tweak image --- src/components/atoms/mock-cards/card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/atoms/mock-cards/card.tsx b/src/components/atoms/mock-cards/card.tsx index 974caa9..5abd142 100644 --- a/src/components/atoms/mock-cards/card.tsx +++ b/src/components/atoms/mock-cards/card.tsx @@ -63,7 +63,7 @@ export const CardImage = ({ transform={show ? "scale(1.5)" : "unset"} transition="all 0.25s ease" style={{ - backgroundImage: `url(${CARD_CDN}/5/${img}.webp)`, + backgroundImage: `url(${CARD_CDN}/${img}.webp)`, }} />{" "} From 96ed8175afcd71098dbc927312e0418caebffbc9 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Tue, 10 Sep 2024 00:00:55 +0200 Subject: [PATCH 2/6] add icons --- package.json | 3 ++- pnpm-lock.yaml | 12 ++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 4b5d3f6..19fbd51 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "axios": "^1.7.7", "next": "14.2.8", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-icons": "^5.3.0" }, "devDependencies": { "@pandacss/dev": "^0.45.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4341f5e..2b29892 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: react-dom: specifier: ^18 version: 18.3.1(react@18.3.1) + react-icons: + specifier: ^5.3.0 + version: 5.3.0(react@18.3.1) devDependencies: '@pandacss/dev': specifier: ^0.45.2 @@ -1949,6 +1952,11 @@ packages: peerDependencies: react: ^18.3.1 + react-icons@5.3.0: + resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==} + peerDependencies: + react: '*' + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -4424,6 +4432,10 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 + react-icons@5.3.0(react@18.3.1): + dependencies: + react: 18.3.1 + react-is@16.13.1: {} react-remove-scroll-bar@2.3.6(@types/react@18.3.5)(react@18.3.1): From a467b1055d9f778ff246bf9519fb6b3aea1f9dec Mon Sep 17 00:00:00 2001 From: jollygrin Date: Tue, 10 Sep 2024 00:01:03 +0200 Subject: [PATCH 3/6] expand props of cardimage --- src/components/atoms/card-view/card.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/atoms/card-view/card.tsx b/src/components/atoms/card-view/card.tsx index 05530c4..85fc009 100644 --- a/src/components/atoms/card-view/card.tsx +++ b/src/components/atoms/card-view/card.tsx @@ -4,9 +4,11 @@ import { Box } from "styled-system/jsx"; export const CardImage = ({ img = "headless_haunt.webp", position = "top", + minH = "300px", }: { img?: string; position?: "top" | "bottom"; + minH?: string; }) => { return ( Date: Tue, 10 Sep 2024 00:01:07 +0200 Subject: [PATCH 4/6] add grave stack --- .../organisms/GameBoard/Footer/Grave.tsx | 89 +++++++++++++++++++ .../organisms/GameBoard/Footer/index.tsx | 3 +- 2 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 src/components/organisms/GameBoard/Footer/Grave.tsx diff --git a/src/components/organisms/GameBoard/Footer/Grave.tsx b/src/components/organisms/GameBoard/Footer/Grave.tsx new file mode 100644 index 0000000..fd67195 --- /dev/null +++ b/src/components/organisms/GameBoard/Footer/Grave.tsx @@ -0,0 +1,89 @@ +import { DroppableGridItem } from "@/components/molecules/DropGridItem"; +import { GRIDS } from "../constants"; +import { Box, Grid } from "styled-system/jsx"; + +import { GiPirateGrave as IconGrave } from "react-icons/gi"; +import { GameStateActions } from ".."; +import { CardImage } from "@/components/atoms/card-view/card"; + +export const GraveTray = (props: GameStateActions) => { + const graveCards = props.gridItems[GRIDS.GRAVE]; + const graveAmount = graveCards?.length ?? 0; + const hasCards = graveCards?.length > 0; + return ( + + + + {hasCards && ( + + {graveAmount > 0 && ( + + + + )} + + {graveAmount > 1 && ( + + + + )} + + {graveAmount > 2 && ( + + + + )} + + {graveAmount > 3 && ( + + + + )} + + {graveAmount > 4 && ( + + + + )} + + )} + + + ); +}; diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx index 7116916..c04bfe6 100644 --- a/src/components/organisms/GameBoard/Footer/index.tsx +++ b/src/components/organisms/GameBoard/Footer/index.tsx @@ -10,6 +10,7 @@ import { SortableItem } from "@/components/molecules/SortItem"; import { CardAtlas } from "@/components/atoms/mock-cards/atlas"; import { CardImage } from "@/components/atoms/mock-cards/card"; import { DecksTray } from "./Decks"; +import { GraveTray } from "./Grave"; export const GameFooter = (props: GameStateActions) => { const gridIndex = GRIDS.HAND; @@ -25,7 +26,7 @@ export const GameFooter = (props: GameStateActions) => { }} > - Grave + Date: Tue, 10 Sep 2024 01:45:26 +0200 Subject: [PATCH 5/6] tweaks are working --- src/components/atoms/Modal/index.tsx | 13 +-- .../organisms/GameBoard/Footer/Decks.tsx | 8 +- .../GameBoard/Footer/Grave/DiscardModal.tsx | 85 +++++++++++++++++++ .../Footer/{Grave.tsx => Grave/index.tsx} | 33 ++++++- src/components/organisms/GameBoard/index.tsx | 2 +- src/components/ui/dialog/index.tsx | 9 +- src/utils/actions/discard.ts | 22 +++++ 7 files changed, 158 insertions(+), 14 deletions(-) create mode 100644 src/components/organisms/GameBoard/Footer/Grave/DiscardModal.tsx rename src/components/organisms/GameBoard/Footer/{Grave.tsx => Grave/index.tsx} (71%) create mode 100644 src/utils/actions/discard.ts diff --git a/src/components/atoms/Modal/index.tsx b/src/components/atoms/Modal/index.tsx index fd2ea56..ab10bb9 100644 --- a/src/components/atoms/Modal/index.tsx +++ b/src/components/atoms/Modal/index.tsx @@ -8,6 +8,7 @@ import { } from "@/components/ui/dialog"; import { DialogProps } from "@radix-ui/react-dialog"; import { ReactNode } from "react"; +import { Box } from "styled-system/jsx"; export const Modal = (props: { wrapperProps: DialogProps; @@ -17,12 +18,14 @@ export const Modal = (props: { }) => { return ( - {props.trigger} + {props.trigger && {props.trigger}} - - {props.title} - {props.content} - + {props.title && ( + + {props.title} + + )} + {props.content} ); diff --git a/src/components/organisms/GameBoard/Footer/Decks.tsx b/src/components/organisms/GameBoard/Footer/Decks.tsx index 5d00c92..6082f41 100644 --- a/src/components/organisms/GameBoard/Footer/Decks.tsx +++ b/src/components/organisms/GameBoard/Footer/Decks.tsx @@ -22,11 +22,13 @@ export const DecksTray = (props: GameStateActions) => { return ( { + function returnToHand(cardIndex: number) { + props.setGridItems(actDrawDiscard(props.gridItems, cardIndex)); + } + + return ( + + {props.cards?.map((card, index) => ( + returnToHand(index)} + /> + ))} + + ); +}; + +const Card = ({ + card, + returnToHand, +}: { + card: GameCard; + returnToHand(): void; +}) => { + const hoverRef = useRef(null); + const isHovering = useHover(hoverRef); + + return ( + + + + + ); +}; diff --git a/src/components/organisms/GameBoard/Footer/Grave.tsx b/src/components/organisms/GameBoard/Footer/Grave/index.tsx similarity index 71% rename from src/components/organisms/GameBoard/Footer/Grave.tsx rename to src/components/organisms/GameBoard/Footer/Grave/index.tsx index fd67195..c734a16 100644 --- a/src/components/organisms/GameBoard/Footer/Grave.tsx +++ b/src/components/organisms/GameBoard/Footer/Grave/index.tsx @@ -1,17 +1,23 @@ import { DroppableGridItem } from "@/components/molecules/DropGridItem"; -import { GRIDS } from "../constants"; +import { GRIDS } from "@/components/organisms/GameBoard/constants"; import { Box, Grid } from "styled-system/jsx"; import { GiPirateGrave as IconGrave } from "react-icons/gi"; -import { GameStateActions } from ".."; import { CardImage } from "@/components/atoms/card-view/card"; +import { Modal } from "@/components/atoms/Modal"; +import { useState } from "react"; +import { GameStateActions } from "@/components/organisms/GameBoard"; +import { DiscardModalBody } from "./DiscardModal"; export const GraveTray = (props: GameStateActions) => { const graveCards = props.gridItems[GRIDS.GRAVE]; const graveAmount = graveCards?.length ?? 0; const hasCards = graveCards?.length > 0; + + const [preview, setPreview] = useState(false); + return ( - + { opacity: 0.3, }} /> + {preview && ( + } + /> + )} {hasCards && ( - + { + e.preventDefault(); + setPreview(true); + }} + onContextMenu={(e) => { + e.preventDefault(); + setPreview(true); + }} + > {graveAmount > 0 && ( diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx index adeb50d..ef29c7d 100644 --- a/src/components/organisms/GameBoard/index.tsx +++ b/src/components/organisms/GameBoard/index.tsx @@ -161,7 +161,7 @@ const SortItemWrapper = ({ + {card.type === "site" && } {card.type !== "site" && } diff --git a/src/components/ui/dialog/index.tsx b/src/components/ui/dialog/index.tsx index 41f4199..91e315f 100644 --- a/src/components/ui/dialog/index.tsx +++ b/src/components/ui/dialog/index.tsx @@ -21,7 +21,14 @@ const Content = React.forwardRef< {children} {/* */} diff --git a/src/utils/actions/discard.ts b/src/utils/actions/discard.ts new file mode 100644 index 0000000..65b0d49 --- /dev/null +++ b/src/utils/actions/discard.ts @@ -0,0 +1,22 @@ +import { GRIDS } from "@/components/organisms/GameBoard/constants"; +import { GameState } from "@/types/card"; + +export function actDrawDiscard(state: GameState, graveCardIndex: number) { + // Create a shallow copy of the previous grid items array + const newState = [...state]; + + // Make a copy of the deck and hand arrays, preserving their positions + const newGrave = [...newState[GRIDS.GRAVE]]; + const newHand = [...newState[GRIDS.HAND]]; + + // Pop a card from the deck and push it to the hand + const [card] = newGrave.splice(graveCardIndex, 1); + if (card) newHand.push(card); + + // Update the newState array with the updated deck and hand arrays + newState[GRIDS.GRAVE] = newGrave; + newState[GRIDS.HAND] = newHand; + + // Return the updated newState array to trigger a re-render + return newState; +} From 34470e0905b8ced69776eb95fe88c8806fdb1f14 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Tue, 10 Sep 2024 01:47:15 +0200 Subject: [PATCH 6/6] lint --- src/components/atoms/Modal/index.tsx | 2 -- src/components/organisms/GameBoard/Footer/index.tsx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/atoms/Modal/index.tsx b/src/components/atoms/Modal/index.tsx index ab10bb9..2d458a8 100644 --- a/src/components/atoms/Modal/index.tsx +++ b/src/components/atoms/Modal/index.tsx @@ -1,14 +1,12 @@ import { Dialog, DialogContent, - DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { DialogProps } from "@radix-ui/react-dialog"; import { ReactNode } from "react"; -import { Box } from "styled-system/jsx"; export const Modal = (props: { wrapperProps: DialogProps; diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx index c04bfe6..9cd4d20 100644 --- a/src/components/organisms/GameBoard/Footer/index.tsx +++ b/src/components/organisms/GameBoard/Footer/index.tsx @@ -1,4 +1,4 @@ -import { Box, Grid, HStack } from "styled-system/jsx"; +import { Grid, HStack } from "styled-system/jsx"; import { GRIDS, LAYOUT_HEIGHTS } from "../constants"; import { DroppableGridItem } from "@/components/molecules/DropGridItem"; import {