diff --git a/components/DeckPool/PoolFns.ts b/components/DeckPool/PoolFns.ts index 9a6f1a7..c1cd51c 100644 --- a/components/DeckPool/PoolFns.ts +++ b/components/DeckPool/PoolFns.ts @@ -139,6 +139,7 @@ export const deckCard = (pool: PoolType, cardIndex: number) => { if (!pool.deck) return; pool.deck.push(pool.hand[cardIndex]); pool.hand.splice(cardIndex, 1); + return pool; }; // /** @@ -149,6 +150,7 @@ export const deckCardBottom = (pool: PoolType, cardIndex: number) => { if (!pool.deck) return; pool.deck.unshift(pool.hand[cardIndex]); pool.hand.splice(cardIndex, 1); + return pool; }; export const discardCard = (pool: PoolType, index: number): PoolType => { diff --git a/components/Game/Hand/hand.container.tsx b/components/Game/Hand/hand.container.tsx index 4b95c7a..7c3433a 100644 --- a/components/Game/Hand/hand.container.tsx +++ b/components/Game/Hand/hand.container.tsx @@ -3,6 +3,8 @@ import { boostCard, cancelBoost, commitCard, + deckCard, + deckCardBottom, discardCard, draw, makeDeck, @@ -57,6 +59,15 @@ export const HandContainer = ({ }, [gameState]); const gDraw = flow(draw, setGameState); + const gDeckCard = flow( + (cardIndex: number) => deckCard(playerState?.pool as PoolType, cardIndex), + setGameState, + ); + const gDeckCardBottom = flow( + (cardIndex: number) => + deckCardBottom(playerState?.pool as PoolType, cardIndex), + setGameState, + ); const gDiscard = flow(discardCard, setGameState); const gBoost = flow( (cardIndex: number) => @@ -107,6 +118,8 @@ export const HandContainer = ({ gDiscard(playerState?.pool as PoolType, discardIndex), commitFn: (cardIndex: number) => gCommit(cardIndex), boostFn: (cardIndex: number) => gBoost(cardIndex), + deckCardFn: (cardIndex: number) => gDeckCard(cardIndex), + deckCardBottomFn: (cardIndex: number) => gDeckCardBottom(cardIndex), }} /> diff --git a/components/Game/card-actions.popover.tsx b/components/Game/card-actions.popover.tsx new file mode 100644 index 0000000..0f62efb --- /dev/null +++ b/components/Game/card-actions.popover.tsx @@ -0,0 +1,60 @@ +import { + Box, + Text, + Popover, + PopoverTrigger, + PopoverContent, + PopoverHeader, + PopoverBody, + PopoverArrow, + Button, +} from "@chakra-ui/react"; + +import { CiMenuKebab as IconKebab } from "react-icons/ci"; + +export const PopoverCardActions = (props: { + actions: { text: string; fn: () => void }[]; +}) => { + return ( + + + + + + + + Card Actions + + + {props?.actions?.map((action) => ( + + ))} + + + + ); +}; + +const Action = (props: { text: string; fn: () => void }) => { + return ( + + {props.text} + + ); +}; diff --git a/components/Game/game.carousel.tsx b/components/Game/game.carousel.tsx index e9c5e63..6d66c50 100644 --- a/components/Game/game.carousel.tsx +++ b/components/Game/game.carousel.tsx @@ -4,7 +4,16 @@ import React, { useEffect, useRef, useState } from "react"; import AliceCarousel from "react-alice-carousel"; import "react-alice-carousel/lib/alice-carousel.css"; import { CardFactory } from "../CardFactory/card.factory"; -import { Box, Button, Flex, Skeleton, Spacer, Text } from "@chakra-ui/react"; +import { + Box, + Button, + Flex, + Popover, + Select, + Skeleton, + Spacer, + Text, +} from "@chakra-ui/react"; import { DeckImportCardType, DeckImportType, @@ -12,7 +21,7 @@ import { import styled from "@emotion/styled"; import { CarouselTray } from "./game.styles"; import { PoolType } from "../DeckPool/PoolFns"; -import { GiUpgrade as IconBoost } from "react-icons/gi"; +import { PopoverCardActions } from "./card-actions.popover"; const handleDragStart = (e) => { e.preventDefault(); @@ -26,8 +35,11 @@ type CardWrapperProps = { discardFn: (index: number) => void; commitFn: (index: number) => PoolType; boostFn: (index: number) => PoolType; + deckCardFn: (index: number) => PoolType; + deckCardBottomFn: (index: number) => PoolType; }; }; + export const cardItemMapper = ({ cards, functions }: CardWrapperProps) => { return cards.map((card, index) => { return ( @@ -116,13 +128,22 @@ export const HandCardItems: React.FC = ({ functions.commitFn(index)}>+ functions.discardFn(index)}>- - functions.boostFn(index)} - > - Boost - + functions.boostFn(index), + }, + { + text: "Place top of deck", + fn: () => functions.deckCardFn(index), + }, + { + text: "Place bottom of deck", + fn: () => functions.deckCardBottomFn(index), + }, + ]} + /> @@ -130,6 +151,7 @@ export const HandCardItems: React.FC = ({ ) : ( )} + {cards?.length === 0 && } ); @@ -152,7 +174,7 @@ const CardWrapper = styled(Flex)` cursor: pointer; user-select: none; - & * { + > p { font-size: 0.8rem; margin-top: 0.1rem; padding: 0.1rem 0.5rem; diff --git a/components/Game/game.modal-body.tsx b/components/Game/game.modal-body.tsx index 114f3e2..776b808 100644 --- a/components/Game/game.modal-body.tsx +++ b/components/Game/game.modal-body.tsx @@ -19,29 +19,31 @@ export const DeckModalContent = ({ return ( - {cards?.map((card, index) => ( - onEnter(index)} - onMouseLeave={onLeave} - > - {isHover === index && ( - - add(index)()} - > - + - - - )} - - - ))} + {cards + ?.map((card, index) => ( + onEnter(index)} + onMouseLeave={onLeave} + > + {isHover === index && ( + + add(index)()} + > + + + + + )} + + + )) + ?.reverse()} ); };