-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #11 from JollyGrin/feat/grave
Feat/grave
- Loading branch information
Showing
12 changed files
with
263 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
85 changes: 85 additions & 0 deletions
85
src/components/organisms/GameBoard/Footer/Grave/DiscardModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| 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 { actDrawDiscard } from "@/utils/actions/discard"; | ||
|
|
||
| export const DiscardModalBody = ( | ||
| props: { | ||
| cards: GridItem; | ||
| } & GameStateActions, | ||
| ) => { | ||
| function returnToHand(cardIndex: number) { | ||
| props.setGridItems(actDrawDiscard(props.gridItems, cardIndex)); | ||
| } | ||
|
|
||
| return ( | ||
| <Grid | ||
| gridTemplateColumns="repeat(auto-fill, minmax(300px, 1fr))" | ||
| gridTemplateRows="auto" | ||
| minW="75vw" | ||
| h="70vh" | ||
| overflowX="clip" | ||
| overflowY="scroll" | ||
| > | ||
| {props.cards?.map((card, index) => ( | ||
| <Card | ||
| key={card.id} | ||
| card={card} | ||
| returnToHand={() => returnToHand(index)} | ||
| /> | ||
| ))} | ||
| </Grid> | ||
| ); | ||
| }; | ||
|
|
||
| const Card = ({ | ||
| card, | ||
| returnToHand, | ||
| }: { | ||
| card: GameCard; | ||
| returnToHand(): void; | ||
| }) => { | ||
| const hoverRef = useRef(null); | ||
| const isHovering = useHover(hoverRef); | ||
|
|
||
| return ( | ||
| <Box | ||
| ref={hoverRef} | ||
| key={card.id + "discard"} | ||
| aspectRatio={8 / 11} | ||
| w="100%" | ||
| h="100%" | ||
| maxH="500px" | ||
| position="relative" | ||
| filter="saturate(1)" | ||
| _hover={{ | ||
| filter: "saturate(1.75)", | ||
| }} | ||
| > | ||
| <CardImage img={card.img} minH={"0"} /> | ||
| <button | ||
| onClick={returnToHand} | ||
| className={button()} | ||
| style={{ | ||
| position: "absolute", | ||
| bottom: "50%", | ||
| right: "calc(50% - 50px)", | ||
| opacity: isHovering ? 1 : 0.1, | ||
| width: "100px", | ||
| transition: "all 0.25s ease", | ||
| }} | ||
| > | ||
| <HStack gap={0}> | ||
| <p>Return</p> | ||
| <IconHand size="2rem" style={{ fontSize: "2rem", color: "white" }} /> | ||
| </HStack> | ||
| </button> | ||
| </Box> | ||
| ); | ||
| }; |
114 changes: 114 additions & 0 deletions
114
src/components/organisms/GameBoard/Footer/Grave/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import { DroppableGridItem } from "@/components/molecules/DropGridItem"; | ||
| import { GRIDS } from "@/components/organisms/GameBoard/constants"; | ||
| import { Box, Grid } from "styled-system/jsx"; | ||
|
|
||
| import { GiPirateGrave as IconGrave } from "react-icons/gi"; | ||
| 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 ( | ||
| <Box position="relative" overflow="clip" h="100%"> | ||
| <IconGrave | ||
| style={{ | ||
| position: "absolute", | ||
| fontSize: "6rem", | ||
| bottom: "-1rem", | ||
| left: "-0.5rem", | ||
| opacity: 0.3, | ||
| }} | ||
| /> | ||
| {preview && ( | ||
| <Modal | ||
| wrapperProps={{ open: preview, onOpenChange: setPreview }} | ||
| content={<DiscardModalBody cards={graveCards} {...props} />} | ||
| /> | ||
| )} | ||
| <DroppableGridItem gridIndex={GRIDS.GRAVE} id="droppable-grave"> | ||
| {hasCards && ( | ||
| <Grid | ||
| position="relative" | ||
| placeItems="center" | ||
| h="100%" | ||
| cursor="pointer" | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| setPreview(true); | ||
| }} | ||
| onContextMenu={(e) => { | ||
| e.preventDefault(); | ||
| setPreview(true); | ||
| }} | ||
| > | ||
| {graveAmount > 0 && ( | ||
| <Box w="100px" h="120px" position="absolute"> | ||
| <CardImage img={graveCards?.[0].img} minH={"0"} /> | ||
| </Box> | ||
| )} | ||
|
|
||
| {graveAmount > 1 && ( | ||
| <Box | ||
| w="100px" | ||
| h="120px" | ||
| position="absolute" | ||
| left={9} | ||
| top={9} | ||
| rotate="4deg" | ||
| > | ||
| <CardImage img={graveCards?.[1].img} minH={"0"} /> | ||
| </Box> | ||
| )} | ||
|
|
||
| {graveAmount > 2 && ( | ||
| <Box | ||
| w="100px" | ||
| h="120px" | ||
| position="absolute" | ||
| left={4} | ||
| top={8} | ||
| rotate="-2deg" | ||
| > | ||
| <CardImage img={graveCards?.[2].img} minH={"0"} /> | ||
| </Box> | ||
| )} | ||
|
|
||
| {graveAmount > 3 && ( | ||
| <Box | ||
| w="100px" | ||
| h="120px" | ||
| position="absolute" | ||
| left={7} | ||
| top={4} | ||
| rotate="3deg" | ||
| > | ||
| <CardImage img={graveCards?.[3].img} minH={"0"} /> | ||
| </Box> | ||
| )} | ||
|
|
||
| {graveAmount > 4 && ( | ||
| <Box | ||
| w="100px" | ||
| h="120px" | ||
| position="absolute" | ||
| left={5} | ||
| top={9} | ||
| rotate="0deg" | ||
| > | ||
| <CardImage img={graveCards?.[graveAmount - 1].img} minH={"0"} /> | ||
| </Box> | ||
| )} | ||
| </Grid> | ||
| )} | ||
| </DroppableGridItem> | ||
| </Box> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |