Merge pull request #23 from JollyGrin/feat/boost

Feat/boost
JollyGrin · Mar 30, 2024 · 49b311e · 49b311e
2 parents 647df12 + 8f3f438
commit 49b311e
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 7 deletions.
diff --git 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
@@ -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 = ({
         </ModalButton>
         <ModalButton onClick={() => setModal("deck")}>Deck</ModalButton>
         <ModalButton onClick={() => setModal("discard")}>Discard</ModalButton>
+        {playerState?.pool?.commit?.boost && (
+          <ModalButton
+            onClick={() => gCancelBoost(playerState?.pool as PoolType)}
+          >
+            Boost: {playerState?.pool?.commit?.boost?.boost}
+            <CloseIcon
+              fontSize="1rem"
+              ml="6px"
+              bg="brand.primary"
+              color="black"
+              p="0.25rem"
+              borderRadius="100%"
+            />
+          </ModalButton>
+        )}
       </Grid>
       <HandCardItems
         cards={playerState?.pool?.hand}
         functions={{
           discardFn: (discardIndex: number) =>
-            playerState?.pool && gDiscard(playerState?.pool, discardIndex),
+            gDiscard(playerState?.pool as PoolType, discardIndex),
           commitFn: (cardIndex: number) => gCommit(cardIndex),
+          boostFn: (cardIndex: number) => gBoost(cardIndex),
         }}
       />
     </Tray>

diff --git 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) => {
         >
           <CardFactory card={card} />
           <Flex className="hoveritem">
-            {/* <Text>+</Text> */}
             <Text onClick={() => functions.discardFn(index)}>-</Text>
           </Flex>
         </CardWrapper>
@@ -114,6 +116,13 @@ export const HandCardItems: React.FC<CardWrapperProps> = ({
               <Flex className="hoveritem">
                 <Text onClick={() => functions.commitFn(index)}>+</Text>
                 <Text onClick={() => functions.discardFn(index)}>-</Text>
+                <Text
+                  fontSize="8px !important"
+                  p="4px 8px !important"
+                  onClick={() => functions.boostFn(index)}
+                >
+                  Boost
+                </Text>
               </Flex>
             </CardWrapper>
           </Box>

diff --git 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 <Box display="none" />;
   const onEnter = () => setIsHover(true);
   const onLeave = () => setIsHover(false);
+  const hasBoost = commit.commit.boost !== null;
   return (
     <Box minH="420px">
       {commit?.player && (
-        <Flex transform={"translate(0,2.35rem)"} justifyContent="end">
+        <Flex
+          transform={"translate(0,2.35rem)"}
+          alignItems="center"
+          justifyContent="space-between"
+          p="0.25rem 1rem"
+        >
+          {hasBoost ? <IconBoost size="1.2rem" /> : <div />}
           <Text
             fontFamily="SpaceGrotesk"
             fontWeight="700"
             fontSize="1.25rem"
             bg={commit.commit.reveal ? "antiquewhite" : ""}
-            p="0.25rem 1rem"
             borderRadius={"1rem"}
           >
             {commit.player}
@@ -98,7 +106,34 @@ const CommitCard: React.FC<{ commit: PlayerCommit }> = ({ commit }) => {
         {!commit.commit.reveal ? (
           <Skeleton w="300px" h="420px" />
         ) : (
-          <CardFactory card={commit.commit.main} />
+          <Box position="relative">
+            <CardFactory card={commit.commit.main} />
+            <Box
+              position="absolute"
+              w="3rem"
+              top="0.5rem"
+              right="0.5rem"
+              transition="all 0.25s ease-in-out"
+              _hover={{
+                transform: "scale(4) translateX(-1rem)",
+              }}
+            >
+              {commit.commit.boost && (
+                <>
+                  <Text
+                    bg="brand.secondary"
+                    color="brand.primary"
+                    textAlign="center"
+                    borderTopRadius="100%"
+                    fontWeight={700}
+                  >
+                    {commit.commit.boost.boost}
+                  </Text>
+                  <CardFactory card={commit.commit.boost} />
+                </>
+              )}
+            </Box>
+          </Box>
         )}
       </Box>
     </Box>