-
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 #48 from JollyGrin/feat/draft-sim-v2
Feat/draft sim v2
- Loading branch information
Showing
10 changed files
with
473 additions
and
30 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
106 changes: 106 additions & 0 deletions
106
src/components/organisms/Draft/Ribbon/SelectedCardsModal.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,106 @@ | ||
| import { Box, Flex, Grid } from "styled-system/jsx"; | ||
| import { Modal } from "@/components/atoms/Modal"; | ||
| import { getCardImage } from "../../GameBoard/constants"; | ||
| import { reduceCardCount, sortAlphabetical } from "./helpers"; | ||
| import { CardDTO } from "@/utils/api/cardData/CardDataType"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { useCopyToClipboard } from "@/utils/hooks"; | ||
| import toast from "react-hot-toast"; | ||
|
|
||
| export const SelectedCardsModal = ({ | ||
| cards = [], | ||
| isOpen, | ||
| onToggle, | ||
| }: { | ||
| cards?: CardDTO[]; | ||
| isOpen?: boolean; | ||
| onToggle?(): void; | ||
| }) => { | ||
| const [, copy] = useCopyToClipboard(); | ||
|
|
||
| return ( | ||
| <> | ||
| <Modal | ||
| wrapperProps={{ open: isOpen, onOpenChange: onToggle }} | ||
| content={ | ||
| <Grid | ||
| gridTemplateColumns="4fr 1fr" | ||
| minW="70vw" | ||
| minH="50vh" | ||
| maxH="70vh" | ||
| w="100%" | ||
| > | ||
| <Flex | ||
| flexWrap="wrap" | ||
| gap="0.25rem" | ||
| h="100%" | ||
| overflowY="auto" | ||
| overflowX="clip" | ||
| > | ||
| {cards.sort(sortAlphabetical).map((card, index) => ( | ||
| <Box | ||
| key={card.slug + index} | ||
| width="18rem" | ||
| height="fit-content" | ||
| transition="all 0.25s ease" | ||
| _hover={{ | ||
| transform: `scale(1.25) ${card.guardian.type === "Site" ? "rotate(90deg)" : ""}`, | ||
| }} | ||
| > | ||
| <img | ||
| alt="card image" | ||
| src={getCardImage(card.slug)} | ||
| height="inherit" | ||
| width="inherit" | ||
| /> | ||
| </Box> | ||
| ))} | ||
| </Flex> | ||
| <Box> | ||
| {cards | ||
| .sort(sortAlphabetical) | ||
| .reduce(reduceCardCount, []) | ||
| .map((card, index) => { | ||
| return ( | ||
| <Grid | ||
| key={card.name + index} | ||
| gridTemplateColumns="1.5rem auto" | ||
| > | ||
| <p>{card.count}x</p> | ||
| <p>{card.name}</p> | ||
| </Grid> | ||
| ); | ||
| })} | ||
| <Button | ||
| mt="2rem" | ||
| w="100%" | ||
| onClick={() => { | ||
| const list = cards | ||
| .sort(sortAlphabetical) | ||
| .reduce(reduceCardCount, []) | ||
| .map((card) => `${card.count} ${card.name}`); | ||
| const parsed = list.join("\n"); | ||
| copy(parsed); | ||
| toast.success("Copied decklist to clipboard"); | ||
| }} | ||
| > | ||
| Copy Bulk List | ||
| </Button> | ||
| <p | ||
| style={{ | ||
| marginTop: "0.25rem", | ||
| fontSize: "0.85rem", | ||
| opacity: 0.6, | ||
| textAlign: "center", | ||
| }} | ||
| > | ||
| Copy & Paste into Curiosa 'bulk add' in Create | ||
| Deck | ||
| </p> | ||
| </Box> | ||
| </Grid> | ||
| } | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
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,24 @@ | ||
| import { CardDTO } from "@/utils/api/cardData/CardDataType"; | ||
|
|
||
| export function sortAlphabetical(a: CardDTO, b: CardDTO) { | ||
| if (a.name < b.name) { | ||
| return -1; | ||
| } | ||
| if (a.name > b.name) { | ||
| return 1; | ||
| } | ||
| return 0; | ||
| } | ||
|
|
||
| export function reduceCardCount( | ||
| acc: { name: string; count: number }[], | ||
| card: Card, | ||
| ) { | ||
| const existingCard = acc.find((item) => item.name === card.name); | ||
| if (existingCard) { | ||
| existingCard.count += 1; | ||
| } else { | ||
| acc.push({ name: card.name, count: 1 }); | ||
| } | ||
| return acc; | ||
| } |
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 |
|---|---|---|
| @@ -1,9 +1,129 @@ | ||
| import { Box } from "styled-system/jsx"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { Flex, Grid } from "styled-system/jsx"; | ||
| import { DraftProps } from "../types"; | ||
| import { generateBoosterPack } from "../helpers"; | ||
| import { useCardFullData } from "@/utils/api/cardData/useCardData"; | ||
| import { useState } from "react"; | ||
| import { SelectedCardsModal } from "./SelectedCardsModal"; | ||
|
|
||
| export const DraftRibbon = ( | ||
| props: DraftProps & { | ||
| takeAndPass?(): void; | ||
| }, | ||
| ) => { | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const disclosure = { | ||
| isOpen, | ||
| toggle: () => setIsOpen((prev) => !prev), | ||
| onOpen: () => setIsOpen(true), | ||
| onClose: () => setIsOpen(true), | ||
| }; | ||
|
|
||
| const { data: cardData = [] } = useCardFullData(); | ||
|
|
||
| function crackBooster() { | ||
| const newBooster = generateBoosterPack({ | ||
| cardData, | ||
| expansionSlug: "bet", | ||
| }); | ||
| props.setPlayerData({ | ||
| ...props.player, | ||
| activePack: newBooster, | ||
| packsOpened: (props.player.packsOpened ?? 0) + 1, | ||
| }); | ||
| } | ||
|
|
||
| // function takeAndPass() { | ||
| // const { activePack, finishedPacks, selectedIndex, selectedCards } = | ||
| // props.player; | ||
|
|
||
| // if (selectedIndex === undefined) return; | ||
|
|
||
| // const updatedPack = [...activePack]; | ||
| // const updatedSelected = [...selectedCards]; | ||
|
|
||
| // const [card] = updatedPack.splice(selectedIndex, 1); | ||
| // updatedSelected.push(card); | ||
|
|
||
| // props.setPlayerData({ | ||
| // ...props.player, | ||
| // activePack: [], | ||
| // finishedPacks: [...finishedPacks, updatedPack], | ||
| // selectedIndex: undefined, | ||
| // }); | ||
| // } | ||
|
|
||
| function activatePendingPack() { | ||
| const { pendingPacks } = props.player; | ||
| const updatedPending = [...pendingPacks]; | ||
| const [pack] = updatedPending.splice(0, 1); | ||
|
|
||
| props.setPlayerData({ | ||
| ...props.player, | ||
| pendingPacks: updatedPending, | ||
| activePack: pack, | ||
| }); | ||
| } | ||
|
|
||
| const [nextPack] = props.player.pendingPacks ?? []; | ||
|
|
||
| export const DraftRibbon = () => { | ||
| return ( | ||
| <Box bg="brown" h="100%"> | ||
| <p>ribbon</p> | ||
| </Box> | ||
| <> | ||
| <SelectedCardsModal | ||
| isOpen={disclosure.isOpen} | ||
| onToggle={disclosure.toggle} | ||
| cards={props.player.selectedCards} | ||
| /> | ||
|
|
||
| <Grid h="100%" bg="brown" gap={0} gridTemplateColumns="1fr 4fr 1fr"> | ||
| <Flex alignItems="center" justifyContent="center"> | ||
| <Button | ||
| disabled={ | ||
| props.player.pendingPacks.length === 0 || | ||
| props.player.activePack.length > 0 || | ||
| nextPack.length === 0 | ||
| } | ||
| onClick={activatePendingPack} | ||
| > | ||
| Flip pack - | ||
| {(nextPack?.length > 0 && props.player.pendingPacks.length) || " 0"} | ||
| </Button> | ||
| </Flex> | ||
| <Grid | ||
| gridTemplateColumns="repeat(3,1fr)" | ||
| alignItems="center" | ||
| p="0 0.5rem" | ||
| > | ||
| <div> | ||
| <p>{props.player.packsOpened ?? "0"} packs opened</p> | ||
| </div> | ||
|
|
||
| {props.player.activePack.length === 0 ? ( | ||
| <Button | ||
| disabled={(nextPack ?? []).length > 0} | ||
| onClick={crackBooster} | ||
| > | ||
| Open a Pack | ||
| </Button> | ||
| ) : ( | ||
| <Button | ||
| disabled={props.player.selectedIndex === undefined} | ||
| onClick={props.takeAndPass} | ||
| > | ||
| Take & Pass | ||
| </Button> | ||
| )} | ||
| </Grid> | ||
| <Flex alignItems="center" justifyContent="center"> | ||
| <Button | ||
| bg="purple.800" | ||
| onClick={disclosure.onOpen} | ||
| borderRadius="10rem" | ||
| > | ||
| View Selected | ||
| </Button> | ||
| </Flex> | ||
| </Grid> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.