Merge pull request #15 from JollyGrin/feat/add-discard-actions

Feat/add discard actions
JollyGrin · Mar 12, 2024 · ed8df12 · ed8df12
2 parents e68e6ed + ed29734
commit ed8df12
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 13 deletions.
diff --git a/components/DeckPool/PoolFns.ts b/components/DeckPool/PoolFns.ts
@@ -62,7 +62,7 @@ export const newPool = (deckData: DeckImportType): PoolType => {
 //    */
 export const makeDeck = (pool: PoolType): PoolType => {
   const newDeck: DeckImportCardType[] = pool.cards.flatMap(
-    ({ quantity, ...rest }) => Array(quantity).fill({ quantity, ...rest })
+    ({ quantity, ...rest }) => Array(quantity).fill({ quantity, ...rest }),
   );
   return {
     ...pool,
@@ -99,7 +99,7 @@ export const draw = (pool: PoolType): PoolType => {
 export const adjustHp = (
   pool: PoolType,
   selectedPawn: "hero" | "sidekick",
-  adjustAmount: number
+  adjustAmount: number,
 ): PoolType => {
   if (adjustAmount === 0) return pool;
   if (!pool[selectedPawn] || !pool[selectedPawn]?.hp === null) return pool;
@@ -110,7 +110,7 @@ export const adjustHp = (
 
 export const adjustSidekickQuantity = (
   pool: PoolType,
-  adjustAmount: number
+  adjustAmount: number,
 ): PoolType => {
   if (adjustAmount === 0) return pool;
   if (!pool || !pool.sidekick.quantity) return pool;
@@ -128,6 +128,7 @@ export const drawDeck = (pool: PoolType, cardIndex: number) => {
   if (!pool.deck) return;
   pool.hand.push(pool.deck[cardIndex]);
   pool.deck.splice(cardIndex, 1);
+  return pool;
 };
 
 //   /**
@@ -170,6 +171,7 @@ export const discardRandomCard = (pool: PoolType, cardIndex: number) => {
 export const drawDiscard = (pool: PoolType, cardIndex: number) => {
   pool.hand.push(pool.discard[cardIndex]);
   pool.discard.splice(cardIndex, 1);
+  return pool;
 };
 
 export const commitCard = (pool: PoolType, cardIndex: number): PoolType => {

diff --git a/components/Game/Header/header.components.tsx b/components/Game/Header/header.components.tsx
@@ -1,4 +1,13 @@
-import { Grid, Flex, Box, Text, HStack, useDisclosure } from "@chakra-ui/react";
+import {
+  Grid,
+  Flex,
+  Box,
+  Text,
+  HStack,
+  useDisclosure,
+  Tooltip,
+  Divider,
+} from "@chakra-ui/react";
 import { IconType } from "react-icons";
 import {
   MoveStatContainer,
@@ -55,7 +64,9 @@ export const PlayerBox: React.FC<{
       <MapModal {...mapDisclosure} />
       <StatContainer>
         <PlayerTitleBar>
-          <Text>{name}</Text>
+          <Tooltip label={<TipBody pool={playerState?.pool} />}>
+            <Text>{name}</Text>
+          </Tooltip>
           <HStack gap="1rem">
             <FaMap
               style={{
@@ -196,6 +207,25 @@ export const Stat: React.FC<{
   );
 };
 
+const TipBody = (props: { pool: PoolType }) => {
+  const { deckName, hero, sidekick } = props.pool;
+  return (
+    <Box minW="300px">
+      <Text fontWeight="bold">{deckName}</Text>
+      <Divider />
+      <Text>
+        {hero.name}: {hero.isRanged ? "Ranged" : "Meele"}
+      </Text>
+      <Text>{hero.specialAbility}</Text>
+      <Divider />
+      <Text>
+        {sidekick.name}: {sidekick.isRanged ? "Ranged" : "Meele"}
+      </Text>
+      <Text>{sidekick.quote}</Text>
+    </Box>
+  );
+};
+
 const AdjustButton = styled(Flex)`
   background-color: ${(props) => props.bg};
   padding: 0.18rem 0.35rem;

diff --git a/components/Game/game.modal-body.tsx b/components/Game/game.modal-body.tsx
@@ -6,12 +6,15 @@ import { useState } from "react";
 
 export const DeckModalContent = ({
   cards,
+  add,
 }: {
   cards: DeckImportCardType[];
+  add: (index: number) => () => void;
 }) => {
   const [isHover, setIsHover] = useState<number>();
   const onEnter = (num: number) => setIsHover(num);
   const onLeave = () => setIsHover(undefined);
+
   return (
     <Grid gridTemplateColumns={"repeat(auto-fit, minmax(250px,1fr))"} gap={1}>
       {cards?.map((card, index) => (
@@ -24,11 +27,12 @@ export const DeckModalContent = ({
         >
           {isHover === index && (
             <Flex position="absolute">
-              <Tag fontSize="1.25rem" userSelect="none">
-                +
-              </Tag>
-
-              <Tag fontSize="1.25rem" userSelect="none">
+              <Tag
+                fontSize="1.25rem"
+                userSelect="none"
+                cursor="pointer"
+                onClick={() => add(index)()}
+              >
                 +
               </Tag>
             </Flex>

diff --git a/components/Game/game.modal-template.tsx b/components/Game/game.modal-template.tsx
@@ -18,11 +18,15 @@ import {
   PoolType,
   cancelCommit,
   discardCommit,
+  drawDeck,
+  drawDiscard,
   revealCommit,
+  shuffleDeck,
 } from "../DeckPool/PoolFns";
 import { useRouter } from "next/router";
 import { DeckImportCardType } from "../DeckPool/deck-import.type";
 import { flow } from "lodash";
+import { toast } from "react-hot-toast";
 
 type ModalTemplateType = {
   isOpen: boolean;
@@ -46,7 +50,19 @@ export const ModalContainer: React.FC<ModalTemplateType> = ({
     setPlayerState()({ pool: poolInput });
   };
 
-  const onClose = () => setModalType(false);
+  const gShuffleDeck = flow(
+    () => playerState?.pool && shuffleDeck(playerState?.pool),
+    setGameState,
+  );
+
+  const onClose = () => {
+    if (modalType === "deck") {
+      gShuffleDeck();
+      toast.success("Deck successfully shuffled after closing");
+    }
+    setModalType(false);
+  };
+
   const gCancelCommit = flow(cancelCommit, setGameState);
   const onCommitCancelClose = () => {
     if (!playerState?.pool) return;
@@ -62,6 +78,17 @@ export const ModalContainer: React.FC<ModalTemplateType> = ({
     () => playerState?.pool && discardCommit(playerState?.pool),
     setGameState,
   );
+  const gDrawDiscard = (discardIndex: number) =>
+    flow(
+      () => playerState?.pool && drawDiscard(playerState?.pool, discardIndex),
+      setGameState,
+    );
+
+  const gDrawDeck = (discardIndex: number) =>
+    flow(
+      () => playerState?.pool && drawDeck(playerState?.pool, discardIndex),
+      setGameState,
+    );
 
   useEffect(() => {
     const playerCommit = playerState?.pool?.commit;
@@ -101,6 +128,7 @@ export const ModalContainer: React.FC<ModalTemplateType> = ({
             {playerState?.pool && modalType && !isCommit && (
               <DeckModalContent
                 cards={playerState.pool[modalType] as DeckImportCardType[]}
+                add={modalType === "discard" ? gDrawDiscard : gDrawDeck}
               />
             )}
             {playerState?.pool && isCommit && commits.length > 0 && (

diff --git a/pages/game.tsx b/pages/game.tsx
@@ -105,8 +105,6 @@ const BoardContainer = ({ self }: { self: string }) => {
     setGamePosition(defData);
   }, [positions, self, gameState, setGamePosition]);
 
-  console.log({ mapUrl });
-
   return (
     <Box h={"100%"}>
       <BoardCanvas