From ac1442532128facbf3e79eaa192207283f3c29cb Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 00:27:36 +0200 Subject: [PATCH 01/13] add styling --- .../organisms/GameBoard/Footer/Decks.tsx | 32 +++++++------------ 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/src/components/organisms/GameBoard/Footer/Decks.tsx b/src/components/organisms/GameBoard/Footer/Decks.tsx index 6082f41..2e39951 100644 --- a/src/components/organisms/GameBoard/Footer/Decks.tsx +++ b/src/components/organisms/GameBoard/Footer/Decks.tsx @@ -2,6 +2,7 @@ import { Grid, VStack } from "styled-system/jsx"; import { GRIDS, LAYOUT_HEIGHTS } from "../constants"; import { GameStateActions } from ".."; import { actDrawAtlas, actDrawDeck } from "@/utils/actions"; +import { cva } from "styled-system/css/cva.mjs"; export const DecksTray = (props: GameStateActions) => { function draw(deck: GRIDS.DECK | GRIDS.ATLAS_DECK) { @@ -42,16 +43,7 @@ export const DecksTray = (props: GameStateActions) => { backgroundImage: "url(/card-backs/m_atlas.png)", }} > -

- {atlasRemainingCards} -

+

{atlasRemainingCards}

{ backgroundImage: "url(/card-backs/m_spells.png)", }} > -

- {deckRemainingCards} -

+

{deckRemainingCards}

 ); }; + +const remainingCards = cva({ + base: { + fontWeight: 700, + background: "rgba(255,255,255,0.7)", + padding: "0 0.25rem", + borderRadius: "0.25rem", + }, +}); From fcb1f4850fa0503e11e5e500446661ca71035b49 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 00:29:35 +0200 Subject: [PATCH 02/13] refactor deck into index --- .../GameBoard/Footer/Decks/index.tsx | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 src/components/organisms/GameBoard/Footer/Decks/index.tsx diff --git a/src/components/organisms/GameBoard/Footer/Decks/index.tsx b/src/components/organisms/GameBoard/Footer/Decks/index.tsx new file mode 100644 index 0000000..dbf7fc6 --- /dev/null +++ b/src/components/organisms/GameBoard/Footer/Decks/index.tsx @@ -0,0 +1,76 @@ +import { Grid, VStack } from "styled-system/jsx"; +import { + GRIDS, + LAYOUT_HEIGHTS, +} from "@/components/organisms/GameBoard/constants"; +import { GameStateActions } from "@/components/organisms/GameBoard"; +import { actDrawAtlas, actDrawDeck } from "@/utils/actions"; +import { cva } from "styled-system/css/cva.mjs"; + +export const DecksTray = (props: GameStateActions) => { + function draw(deck: GRIDS.DECK | GRIDS.ATLAS_DECK) { + deck === GRIDS.DECK + ? props.setGridItems(actDrawDeck(props.gridItems)) + : props.setGridItems(actDrawAtlas(props.gridItems)); + } + + function drawDeck() { + draw(GRIDS.DECK); + } + function drawAtlas() { + draw(GRIDS.ATLAS_DECK); + } + + const atlasRemainingCards = props.gridItems[GRIDS.ATLAS_DECK]?.length; + const deckRemainingCards = props.gridItems[GRIDS.DECK]?.length; + + return ( + + +

{atlasRemainingCards}

+ + +

{deckRemainingCards}

+ + + ); +}; + +const remainingCards = cva({ + base: { + fontWeight: 700, + background: "rgba(255,255,255,0.7)", + padding: "0 0.25rem", + borderRadius: "0.25rem", + }, +}); From 18bf0439a2b9fa160d7b9b45bb9048455987cc59 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 01:01:14 +0200 Subject: [PATCH 03/13] add type helpers to modal --- src/components/atoms/Modal/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/atoms/Modal/index.tsx b/src/components/atoms/Modal/index.tsx index b082b95..b7b4681 100644 --- a/src/components/atoms/Modal/index.tsx +++ b/src/components/atoms/Modal/index.tsx @@ -8,9 +8,10 @@ import { import { DialogDescription, DialogProps } from "@radix-ui/react-dialog"; import { ReactNode } from "react"; import { VisuallyHidden } from "styled-system/jsx"; +import { Pretty } from "styled-system/types"; export const Modal = (props: { - wrapperProps: DialogProps; + wrapperProps: Pretty; trigger?: ReactNode; title?: string; content?: ReactNode; From 3dc42c54a045dc0cb31eeced80ce67adf2e5ef5f Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 01:01:20 +0200 Subject: [PATCH 04/13] add draw deck index --- src/utils/actions/deck.ts | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/utils/actions/deck.ts b/src/utils/actions/deck.ts index 9daea07..f75d739 100644 --- a/src/utils/actions/deck.ts +++ b/src/utils/actions/deck.ts @@ -40,3 +40,33 @@ export function actDrawAtlas(state: GameState) { // Return the updated newState array to trigger a re-render return newState; } + +export function actDrawDeckIndex( + state: GameState, + deckType: "deck" | "atlas", + cardIndex: number, +) { + // Create a shallow copy of the previous grid items array + const newState = [...state]; + const GRID_DECK_TYPE = deckType === "deck" ? GRIDS.DECK : GRIDS.ATLAS_DECK; + + // Make a copy of the deck and hand arrays, preserving their positions + const newDeck = [...newState[GRID_DECK_TYPE]]; + const newHand = [...newState[GRIDS.HAND]]; + + // Ensure the cardIndex is within bounds + if (cardIndex >= 0 && cardIndex < newDeck.length) { + // Remove the card at the specified index from the deck + const [card] = newDeck.splice(cardIndex, 1); + + // Push the card to the hand if it exists + if (card) newHand.push(card); + } + + // Update the newState array with the updated deck and hand arrays + newState[GRID_DECK_TYPE] = newDeck; + newState[GRIDS.HAND] = newHand; + + // Return the updated newState array to trigger a re-render + return newState; +} From 0036f1d4c967e3112a6888c6045c09902d13c164 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 01:01:29 +0200 Subject: [PATCH 05/13] update deck preview --- .../organisms/GameBoard/Footer/Decks.tsx | 73 --------------- .../Footer/Decks/DeckPreviewModal.tsx | 90 +++++++++++++++++++ .../GameBoard/Footer/Decks/index.tsx | 90 ++++++++++++------- 3 files changed, 146 insertions(+), 107 deletions(-) delete mode 100644 src/components/organisms/GameBoard/Footer/Decks.tsx create mode 100644 src/components/organisms/GameBoard/Footer/Decks/DeckPreviewModal.tsx diff --git a/src/components/organisms/GameBoard/Footer/Decks.tsx b/src/components/organisms/GameBoard/Footer/Decks.tsx deleted file mode 100644 index 2e39951..0000000 --- a/src/components/organisms/GameBoard/Footer/Decks.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { Grid, VStack } from "styled-system/jsx"; -import { GRIDS, LAYOUT_HEIGHTS } from "../constants"; -import { GameStateActions } from ".."; -import { actDrawAtlas, actDrawDeck } from "@/utils/actions"; -import { cva } from "styled-system/css/cva.mjs"; - -export const DecksTray = (props: GameStateActions) => { - function draw(deck: GRIDS.DECK | GRIDS.ATLAS_DECK) { - deck === GRIDS.DECK - ? props.setGridItems(actDrawDeck(props.gridItems)) - : props.setGridItems(actDrawAtlas(props.gridItems)); - } - - function drawDeck() { - draw(GRIDS.DECK); - } - function drawAtlas() { - draw(GRIDS.ATLAS_DECK); - } - - const atlasRemainingCards = props.gridItems[GRIDS.ATLAS_DECK]?.length; - const deckRemainingCards = props.gridItems[GRIDS.DECK]?.length; - - return ( - - -

{atlasRemainingCards}

- - -

{deckRemainingCards}

- - - ); -}; - -const remainingCards = cva({ - base: { - fontWeight: 700, - background: "rgba(255,255,255,0.7)", - padding: "0 0.25rem", - borderRadius: "0.25rem", - }, -}); diff --git a/src/components/organisms/GameBoard/Footer/Decks/DeckPreviewModal.tsx b/src/components/organisms/GameBoard/Footer/Decks/DeckPreviewModal.tsx new file mode 100644 index 0000000..83941ea --- /dev/null +++ b/src/components/organisms/GameBoard/Footer/Decks/DeckPreviewModal.tsx @@ -0,0 +1,90 @@ +import { CardImage } from "@/components/atoms/card-view/card"; +import { GameCard, GridItem } from "@/types/card"; +import { Box, Grid, HStack } from "styled-system/jsx"; +import { button } from "styled-system/recipes"; + +import { PiHandWithdrawFill as IconHand } from "react-icons/pi"; +import { useHover } from "@/utils/hooks/useHover"; +import { useRef } from "react"; +import { GameStateActions } from "../.."; +import { GRIDS } from "../../constants"; +import { actDrawDeckIndex } from "@/utils/actions"; + +export const DeckModalBody = ({ + deckType = "deck", + ...props +}: { + deckType?: "deck" | "atlas"; +} & GameStateActions) => { + const deckTypeGridIndex = deckType === "deck" ? GRIDS.DECK : GRIDS.ATLAS_DECK; + const cards = props.gridItems[deckTypeGridIndex]; + + function returnToHand(cardIndex: number) { + props.setGridItems(actDrawDeckIndex(props.gridItems, deckType, cardIndex)); + } + + return ( + + {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/Decks/index.tsx b/src/components/organisms/GameBoard/Footer/Decks/index.tsx index dbf7fc6..0c4ba19 100644 --- a/src/components/organisms/GameBoard/Footer/Decks/index.tsx +++ b/src/components/organisms/GameBoard/Footer/Decks/index.tsx @@ -6,8 +6,13 @@ import { import { GameStateActions } from "@/components/organisms/GameBoard"; import { actDrawAtlas, actDrawDeck } from "@/utils/actions"; import { cva } from "styled-system/css/cva.mjs"; +import { Modal } from "@/components/atoms/Modal"; +import { useState } from "react"; +import { DeckModalBody } from "./DeckPreviewModal"; export const DecksTray = (props: GameStateActions) => { + const [preview, setPreview] = useState<"deck" | "atlas">(); + function draw(deck: GRIDS.DECK | GRIDS.ATLAS_DECK) { deck === GRIDS.DECK ? props.setGridItems(actDrawDeck(props.gridItems)) @@ -25,44 +30,61 @@ export const DecksTray = (props: GameStateActions) => { const deckRemainingCards = props.gridItems[GRIDS.DECK]?.length; return ( - - + setPreview(undefined), }} - > -

{atlasRemainingCards}

- - } + /> + -

{deckRemainingCards}

- - + { + e.preventDefault(); + setPreview("atlas"); + }} + h="70px" + aspectRatio={3 / 2} + onClick={drawAtlas} + placeItems="center" + borderRadius="0.25rem" + cursor="pointer" + backgroundSize="cover" + style={{ + backgroundImage: "url(/card-backs/m_atlas.png)", + }} + > +

{atlasRemainingCards}

+ + { + e.preventDefault(); + setPreview("deck"); + }} + w="60px" + aspectRatio={2 / 3} + onClick={drawDeck} + placeItems="center" + borderRadius="0.25rem" + cursor="pointer" + backgroundSize="cover" + style={{ + backgroundImage: "url(/card-backs/m_spells.png)", + }} + > +

{deckRemainingCards}

+ + + ); }; From 49ada93c6100f4931132adb6911f04dffd9d8fa6 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 01:18:35 +0200 Subject: [PATCH 06/13] add shuffle deck --- src/utils/actions/deck.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/utils/actions/deck.ts b/src/utils/actions/deck.ts index f75d739..59687ad 100644 --- a/src/utils/actions/deck.ts +++ b/src/utils/actions/deck.ts @@ -1,6 +1,25 @@ import { GRIDS } from "@/components/organisms/GameBoard/constants"; import { GameState } from "@/types/card"; +/** + * Shuffle deck with fisher yates algorithm + * */ +export function actShuffleDeck(state: GameState, deckType: "deck" | "atlas") { + const GRID_DECK_TYPE = deckType === "deck" ? GRIDS.DECK : GRIDS.ATLAS_DECK; + + const newState = [...state]; + const newDeck = [...newState[GRID_DECK_TYPE]]; + + const array = newDeck; + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); // Random index from 0 to i + [array[i], array[j]] = [array[j], array[i]]; // Swap elements + } + + newState[GRID_DECK_TYPE] = newDeck; + return newState; +} + export function actDrawDeck(state: GameState) { // Create a shallow copy of the previous grid items array const newState = [...state]; From 7e0181fae64d7936a2b8370bf2319ab7b68d6417 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 01:18:49 +0200 Subject: [PATCH 07/13] handle closing the modal without previewing next ordering --- .../organisms/GameBoard/Footer/Decks/index.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/organisms/GameBoard/Footer/Decks/index.tsx b/src/components/organisms/GameBoard/Footer/Decks/index.tsx index 0c4ba19..ab3068e 100644 --- a/src/components/organisms/GameBoard/Footer/Decks/index.tsx +++ b/src/components/organisms/GameBoard/Footer/Decks/index.tsx @@ -4,7 +4,7 @@ import { LAYOUT_HEIGHTS, } from "@/components/organisms/GameBoard/constants"; import { GameStateActions } from "@/components/organisms/GameBoard"; -import { actDrawAtlas, actDrawDeck } from "@/utils/actions"; +import { actDrawAtlas, actDrawDeck, actShuffleDeck } from "@/utils/actions"; import { cva } from "styled-system/css/cva.mjs"; import { Modal } from "@/components/atoms/Modal"; import { useState } from "react"; @@ -26,6 +26,10 @@ export const DecksTray = (props: GameStateActions) => { draw(GRIDS.ATLAS_DECK); } + function shuffleDeck(deckType: typeof preview) { + if (deckType) props.setGridItems(actShuffleDeck(props.gridItems, deckType)); + } + const atlasRemainingCards = props.gridItems[GRIDS.ATLAS_DECK]?.length; const deckRemainingCards = props.gridItems[GRIDS.DECK]?.length; @@ -34,7 +38,15 @@ export const DecksTray = (props: GameStateActions) => { setPreview(undefined), + onOpenChange: () => { + // when closing the modal, delay shuffling the deck briefly + // avoids briefly showing new deck order before modal closes + let wasOpen = preview; + setPreview(undefined); + setTimeout(() => { + if (!!wasOpen) shuffleDeck(wasOpen); + }, 100); + }, }} content={} /> From 08294ce5f0e3a50b24bbe493af6be844f9928734 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 01:19:03 +0200 Subject: [PATCH 08/13] prevent showing decks by default when previewing atlas --- .../organisms/GameBoard/Footer/Decks/DeckPreviewModal.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/organisms/GameBoard/Footer/Decks/DeckPreviewModal.tsx b/src/components/organisms/GameBoard/Footer/Decks/DeckPreviewModal.tsx index 83941ea..154c02b 100644 --- a/src/components/organisms/GameBoard/Footer/Decks/DeckPreviewModal.tsx +++ b/src/components/organisms/GameBoard/Footer/Decks/DeckPreviewModal.tsx @@ -1,5 +1,5 @@ import { CardImage } from "@/components/atoms/card-view/card"; -import { GameCard, GridItem } from "@/types/card"; +import { GameCard } from "@/types/card"; import { Box, Grid, HStack } from "styled-system/jsx"; import { button } from "styled-system/recipes"; @@ -11,15 +11,18 @@ import { GRIDS } from "../../constants"; import { actDrawDeckIndex } from "@/utils/actions"; export const DeckModalBody = ({ - deckType = "deck", + deckType, ...props }: { deckType?: "deck" | "atlas"; } & GameStateActions) => { + if (deckType === undefined) return null; + const deckTypeGridIndex = deckType === "deck" ? GRIDS.DECK : GRIDS.ATLAS_DECK; const cards = props.gridItems[deckTypeGridIndex]; function returnToHand(cardIndex: number) { + if (deckType === undefined) return; props.setGridItems(actDrawDeckIndex(props.gridItems, deckType, cardIndex)); } From b65805e00077eacb5904ead94381266938b489fd Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 01:21:12 +0200 Subject: [PATCH 09/13] remove unused --- src/pages/game.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/game.tsx b/src/pages/game.tsx index 346ed36..ed25720 100644 --- a/src/pages/game.tsx +++ b/src/pages/game.tsx @@ -5,8 +5,6 @@ import { GameCard, GameState } from "@/types/card"; import { useState } from "react"; const initCards: GameCard[][] = Array.from({ length: 36 }, () => []); -// initCards[GRIDS.HAND] = handCards as GameCard[]; -// initCards[GRIDS.DECK] = [...deckCards, ...mockDeck] as GameCard[]; export default function GamePage() { const [gridItems, setGridItems] = useState(initCards); From 18226228076cd97b3b55e531727c5490f2232719 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 01:21:14 +0200 Subject: [PATCH 10/13] add toaster --- package.json | 1 + pnpm-lock.yaml | 27 +++++++++++++++++++++++++++ src/pages/_app.tsx | 2 ++ 3 files changed, 30 insertions(+) diff --git a/package.json b/package.json index 19fbd51..7e9ea52 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "next": "14.2.8", "react": "^18", "react-dom": "^18", + "react-hot-toast": "^2.4.1", "react-icons": "^5.3.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2b29892..1a11e03 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-hot-toast: + specifier: ^2.4.1 + version: 2.4.1(csstype@3.1.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-icons: specifier: ^5.3.0 version: 5.3.0(react@18.3.1) @@ -1332,6 +1335,11 @@ packages: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} engines: {node: '>=10'} + goober@2.1.14: + resolution: {integrity: sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==} + peerDependencies: + csstype: ^3.0.10 + gopd@1.0.1: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} @@ -1952,6 +1960,13 @@ packages: peerDependencies: react: ^18.3.1 + react-hot-toast@2.4.1: + resolution: {integrity: sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==} + engines: {node: '>=10'} + peerDependencies: + react: '>=16' + react-dom: '>=16' + react-icons@5.3.0: resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==} peerDependencies: @@ -3863,6 +3878,10 @@ snapshots: merge2: 1.4.1 slash: 3.0.0 + goober@2.1.14(csstype@3.1.3): + dependencies: + csstype: 3.1.3 + gopd@1.0.1: dependencies: get-intrinsic: 1.2.4 @@ -4432,6 +4451,14 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 + react-hot-toast@2.4.1(csstype@3.1.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + goober: 2.1.14(csstype@3.1.3) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + transitivePeerDependencies: + - csstype + react-icons@5.3.0(react@18.3.1): dependencies: react: 18.3.1 diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 9e4038e..2872b1a 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,7 @@ import "@/styles/globals.css"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import type { AppProps } from "next/app"; +import { Toaster } from "react-hot-toast"; const queryClient = new QueryClient(); @@ -8,6 +9,7 @@ export default function App({ Component, pageProps }: AppProps) { return ( + ); } From fb57c41e5eba8737a685f0f7a85857a86f415baf Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 01:30:28 +0200 Subject: [PATCH 11/13] update grid --- src/components/organisms/GameBoard/Footer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx index 7d65e6c..95906f8 100644 --- a/src/components/organisms/GameBoard/Footer/index.tsx +++ b/src/components/organisms/GameBoard/Footer/index.tsx @@ -40,7 +40,7 @@ export const GameFooter = (props: GameStateActions) => { overflowX: "auto", }} > - + From d54571c68c6a0dba9c9ac4041b209f771fcda734 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 01:30:34 +0200 Subject: [PATCH 12/13] add toast after shuffling --- src/components/organisms/GameBoard/Footer/Decks/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/organisms/GameBoard/Footer/Decks/index.tsx b/src/components/organisms/GameBoard/Footer/Decks/index.tsx index ab3068e..d59272e 100644 --- a/src/components/organisms/GameBoard/Footer/Decks/index.tsx +++ b/src/components/organisms/GameBoard/Footer/Decks/index.tsx @@ -9,6 +9,7 @@ import { cva } from "styled-system/css/cva.mjs"; import { Modal } from "@/components/atoms/Modal"; import { useState } from "react"; import { DeckModalBody } from "./DeckPreviewModal"; +import toast from "react-hot-toast"; export const DecksTray = (props: GameStateActions) => { const [preview, setPreview] = useState<"deck" | "atlas">(); @@ -28,6 +29,7 @@ export const DecksTray = (props: GameStateActions) => { function shuffleDeck(deckType: typeof preview) { if (deckType) props.setGridItems(actShuffleDeck(props.gridItems, deckType)); + toast.success("Shuffled after closing"); } const atlasRemainingCards = props.gridItems[GRIDS.ATLAS_DECK]?.length; From 6f62924f2ef3b85a32536d29b1f816cf2389e2d6 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Wed, 11 Sep 2024 01:31:44 +0200 Subject: [PATCH 13/13] fix build --- src/components/organisms/GameBoard/Footer/Decks/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/organisms/GameBoard/Footer/Decks/index.tsx b/src/components/organisms/GameBoard/Footer/Decks/index.tsx index d59272e..979cbf5 100644 --- a/src/components/organisms/GameBoard/Footer/Decks/index.tsx +++ b/src/components/organisms/GameBoard/Footer/Decks/index.tsx @@ -43,7 +43,7 @@ export const DecksTray = (props: GameStateActions) => { onOpenChange: () => { // when closing the modal, delay shuffling the deck briefly // avoids briefly showing new deck order before modal closes - let wasOpen = preview; + const wasOpen = preview; setPreview(undefined); setTimeout(() => { if (!!wasOpen) shuffleDeck(wasOpen);