From fe69b44e9e5d475ca98a644e3b05f17f2eb09bcf Mon Sep 17 00:00:00 2001 From: jollygrin Date: Tue, 10 Sep 2024 21:48:12 +0200 Subject: [PATCH 1/7] create top deck --- src/utils/actions/hand.ts | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/utils/actions/hand.ts diff --git a/src/utils/actions/hand.ts b/src/utils/actions/hand.ts new file mode 100644 index 0000000..1293194 --- /dev/null +++ b/src/utils/actions/hand.ts @@ -0,0 +1,32 @@ +import { GRIDS } from "@/components/organisms/GameBoard/constants"; +import { GameState } from "@/types/card"; + +/** + * Return a card from hand to the top of the deck + * */ +export function actHandToTopDeck( + state: GameState, + deckType: "deck" | "atlas", + handCardIndex: number, +) { + // Create a shallow copy of the previous grid items array + const newState = [...state]; + + // choose between deck or atlas deck + const GRIDS_DECK_TYPE = deckType === "deck" ? GRIDS.DECK : GRIDS.ATLAS_DECK; + + // Make a copy of the deck and hand arrays, preserving their positions + const newDeck = [...newState[GRIDS_DECK_TYPE]]; + const newHand = [...newState[GRIDS.HAND]]; + + // Pop a card from the hand and push it to the deck + const [card] = newHand.splice(handCardIndex, 1); + if (card) newDeck.push(card); + + // Update the newState array + newState[GRIDS_DECK_TYPE] = newDeck; + newState[GRIDS.HAND] = newHand; + + // Return the updated newState array to trigger a re-render + return newState; +} From 04b2bdecb43fd1381db0d9655c1393c5180a9bcd Mon Sep 17 00:00:00 2001 From: jollygrin Date: Tue, 10 Sep 2024 21:48:17 +0200 Subject: [PATCH 2/7] add hint what the footer is --- src/components/organisms/GameBoard/Footer/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx index 9cd4d20..e68b08f 100644 --- a/src/components/organisms/GameBoard/Footer/index.tsx +++ b/src/components/organisms/GameBoard/Footer/index.tsx @@ -12,6 +12,9 @@ import { CardImage } from "@/components/atoms/mock-cards/card"; import { DecksTray } from "./Decks"; import { GraveTray } from "./Grave"; +/** + * HAND - Drag and Drop tray of all the cards in your hand + * */ export const GameFooter = (props: GameStateActions) => { const gridIndex = GRIDS.HAND; const cardsInHand = props.gridItems[gridIndex] ?? []; From 9636721338d397e40b1b3e012f18abfdd0a31d37 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Tue, 10 Sep 2024 22:53:31 +0200 Subject: [PATCH 3/7] setup hand preview --- .../organisms/GameBoard/Footer/index.tsx | 71 ++++++++++++++----- 1 file changed, 53 insertions(+), 18 deletions(-) diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx index e68b08f..f83c0f7 100644 --- a/src/components/organisms/GameBoard/Footer/index.tsx +++ b/src/components/organisms/GameBoard/Footer/index.tsx @@ -1,4 +1,4 @@ -import { Grid, HStack } from "styled-system/jsx"; +import { Box, Grid, HStack } from "styled-system/jsx"; import { GRIDS, LAYOUT_HEIGHTS } from "../constants"; import { DroppableGridItem } from "@/components/molecules/DropGridItem"; import { @@ -11,6 +11,11 @@ import { CardAtlas } from "@/components/atoms/mock-cards/atlas"; import { CardImage } from "@/components/atoms/mock-cards/card"; import { DecksTray } from "./Decks"; import { GraveTray } from "./Grave"; +import { GameCard } from "@/types/card"; +import { useState } from "react"; +import { Modal } from "@/components/atoms/Modal"; +import { FullCardAtlas } from "@/components/atoms/card-view/atlas"; +import { CardImage as FullCard } from "@/components/atoms/card-view/card"; /** * HAND - Drag and Drop tray of all the cards in your hand @@ -48,23 +53,12 @@ export const GameFooter = (props: GameStateActions) => { overflowX="auto" > {props.gridItems?.[gridIndex]?.map((card, index) => ( -
- - {card?.type === "site" && } - {card?.type !== "site" && } - -
+ ))} @@ -73,3 +67,44 @@ export const GameFooter = (props: GameStateActions) => { ); }; + +const HandCard = ({ + card, + gridIndex, + cardIndex: index, +}: { + card: GameCard; + gridIndex: number; + cardIndex: number; +}) => { + const [preview, setPreview] = useState(false); + + return ( +
{ + e.preventDefault(); + setPreview(true); + }} + style={{ + width: "100%", + maxWidth: "220px", + minWidth: "180px", + }} + > + + {card?.type === "site" && } + {card?.type !== "site" && } + + + + {card.type === "site" && } + {card.type !== "site" && } + + } + /> +
+ ); +}; From e50288f1ee714b51bc5f49844164c333040337ae Mon Sep 17 00:00:00 2001 From: jollygrin Date: Tue, 10 Sep 2024 23:20:46 +0200 Subject: [PATCH 4/7] update undefined to string to avoid warning --- src/components/molecules/LoadDeck/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/molecules/LoadDeck/index.tsx b/src/components/molecules/LoadDeck/index.tsx index 807a8be..29d3346 100644 --- a/src/components/molecules/LoadDeck/index.tsx +++ b/src/components/molecules/LoadDeck/index.tsx @@ -7,7 +7,7 @@ import { Box, Flex } from "styled-system/jsx"; import { button, input } from "styled-system/recipes"; export const LoadDeck = (props: GameStateActions) => { - const [deckId, setDeckId] = useState(); + const [deckId, setDeckId] = useState(""); const { data: deck } = useCuriosaDeck(deckId); const cards = [ ...(deck?.avatar ?? []), @@ -70,7 +70,7 @@ export const LoadDeck = (props: GameStateActions) => { value={deckId} onChange={(e) => setDeckId(e.target.value)} /> - {deckId === undefined && ( + {deckId === "" && ( <>

copy the deckid from curiosa

)} - {deckId !== undefined && ( + {deckId !== "" && ( + + + } />