diff --git a/components/DeckPool/PoolFns.ts b/components/DeckPool/PoolFns.ts index dbe3926..9a6f1a7 100644 --- a/components/DeckPool/PoolFns.ts +++ b/components/DeckPool/PoolFns.ts @@ -181,10 +181,31 @@ export const commitCard = (pool: PoolType, cardIndex: number): PoolType => { return pool; }; +export const boostCard = (pool: PoolType, cardIndex: number): PoolType => { + if (!pool?.hand) return pool; + if (pool.commit.boost) return pool; + pool.commit.boost = pool.hand[cardIndex]; + pool.hand.splice(cardIndex, 1); + return pool; +}; + +export const cancelBoost = (pool: PoolType): PoolType => { + if (!pool?.commit.boost) return pool; + pool.hand.unshift(pool.commit.boost); + pool.commit.boost = null; + return pool; +}; + export const discardCommit = (pool: PoolType): PoolType => { if (!pool.commit.main) return pool; - pool.discard.push(pool.commit.main); + pool.discard.unshift(pool.commit.main); pool.commit.main = null; + + if (pool.commit.boost) { + pool.discard.unshift(pool.commit.boost); + pool.commit.boost = null; + } + pool.commit.reveal = false; return pool; }; @@ -194,6 +215,12 @@ export const cancelCommit = (pool: PoolType): PoolType => { pool.hand.push(pool.commit.main); pool.commit.main = null; pool.commit.reveal = false; + + if (pool.commit.boost) { + pool.hand.push(pool.commit.boost); + pool.commit.boost = null; + } + return pool; }; diff --git a/components/Game/Hand/hand.container.tsx b/components/Game/Hand/hand.container.tsx index 9733b82..069e67b 100644 --- a/components/Game/Hand/hand.container.tsx +++ b/components/Game/Hand/hand.container.tsx @@ -1,5 +1,7 @@ import { PoolType, + boostCard, + cancelBoost, commitCard, discardCard, draw, @@ -16,6 +18,7 @@ import { HandCardItems } from "../game.carousel"; import styled from "@emotion/styled"; import { flow } from "lodash"; import { ModalType } from "@/pages/game"; +import { CloseIcon } from "@chakra-ui/icons"; export const HandContainer = ({ setModal, @@ -47,6 +50,12 @@ export const HandContainer = ({ const gDraw = flow(draw, setGameState); const gDiscard = flow(discardCard, setGameState); + const gBoost = flow( + (cardIndex: number) => + playerState?.pool && boostCard(playerState.pool, cardIndex), + setGameState, + ); + const gCancelBoost = flow(cancelBoost, setGameState); const gCommit = flow( (cardIndex: number) => playerState?.pool && commitCard(playerState?.pool, cardIndex), @@ -67,13 +76,29 @@ export const HandContainer = ({ setModal("deck")}>Deck setModal("discard")}>Discard + {playerState?.pool?.commit?.boost && ( + gCancelBoost(playerState?.pool as PoolType)} + > + Boost: {playerState?.pool?.commit?.boost?.boost} + + + )} - playerState?.pool && gDiscard(playerState?.pool, discardIndex), + gDiscard(playerState?.pool as PoolType, discardIndex), commitFn: (cardIndex: number) => gCommit(cardIndex), + boostFn: (cardIndex: number) => gBoost(cardIndex), }} /> diff --git a/components/Game/game.carousel.tsx b/components/Game/game.carousel.tsx index 02f06d6..e9c5e63 100644 --- a/components/Game/game.carousel.tsx +++ b/components/Game/game.carousel.tsx @@ -11,6 +11,8 @@ import { } from "../DeckPool/deck-import.type"; import styled from "@emotion/styled"; import { CarouselTray } from "./game.styles"; +import { PoolType } from "../DeckPool/PoolFns"; +import { GiUpgrade as IconBoost } from "react-icons/gi"; const handleDragStart = (e) => { e.preventDefault(); @@ -21,8 +23,9 @@ const { cards: mockCards } = mockDeck.deck_data; type CardWrapperProps = { cards: DeckImportCardType[] | undefined; functions: { - discardFn: (index: number) => PoolType; + discardFn: (index: number) => void; commitFn: (index: number) => PoolType; + boostFn: (index: number) => PoolType; }; }; export const cardItemMapper = ({ cards, functions }: CardWrapperProps) => { @@ -42,7 +45,6 @@ export const cardItemMapper = ({ cards, functions }: CardWrapperProps) => { > - {/* + */} functions.discardFn(index)}>- @@ -114,6 +116,13 @@ export const HandCardItems: React.FC = ({ functions.commitFn(index)}>+ functions.discardFn(index)}>- + functions.boostFn(index)} + > + Boost + diff --git a/components/Game/game.modal-body.tsx b/components/Game/game.modal-body.tsx index 98f21c0..114f3e2 100644 --- a/components/Game/game.modal-body.tsx +++ b/components/Game/game.modal-body.tsx @@ -4,6 +4,8 @@ import { DeckImportCardType } from "../DeckPool/deck-import.type"; import { PoolType } from "../DeckPool/PoolFns"; import { useState } from "react"; +import { GiUpgrade as IconBoost } from "react-icons/gi"; + export const DeckModalContent = ({ cards, add, @@ -78,16 +80,22 @@ const CommitCard: React.FC<{ commit: PlayerCommit }> = ({ commit }) => { if (commit.commit.main === null) return ; const onEnter = () => setIsHover(true); const onLeave = () => setIsHover(false); + const hasBoost = commit.commit.boost !== null; return ( {commit?.player && ( - + + {hasBoost ? :
} {commit.player} @@ -98,7 +106,34 @@ const CommitCard: React.FC<{ commit: PlayerCommit }> = ({ commit }) => { {!commit.commit.reveal ? ( ) : ( - + + + + {commit.commit.boost && ( + <> + + {commit.commit.boost.boost} + + + + )} + + )}