Merge pull request #29 from JollyGrin/feat/extra-card-actions

Feat/extra card actions

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 => {

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),
         }}
       />
     </Tray>

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 (
+    <Popover>
+      <PopoverTrigger>
+        <Button
+          p="0"
+          m="0"
+          minW="1rem"
+          fontSize="0.5rem"
+          h="1rem"
+          transform="translateY(-6px) translateX(-10px) rotate(90deg)"
+          bg="antiquewhite"
+        >
+          <IconKebab />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent fontSize="0.35rem" w="fit-content" maxW="100px">
+        <PopoverArrow />
+        <PopoverHeader py="0.25rem" textTransform="uppercase" fontWeight={700}>
+          Card Actions
+        </PopoverHeader>
+        <PopoverBody p="0.25rem">
+          {props?.actions?.map((action) => (
+            <Action key={action.text} {...action} />
+          ))}
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const Action = (props: { text: string; fn: () => void }) => {
+  return (
+    <Box
+      _hover={{ bg: "brand.primary" }}
+      p="0.1rem 0.25rem"
+      borderRadius="2px"
+      transition="all 0.25s ease-in-out"
+      onClick={props.fn}
+    >
+      <Text>{props.text}</Text>
+    </Box>
+  );
+};

components/Game/game.carousel.tsx

@@ -4,15 +4,24 @@ 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,
 } 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";
+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,20 +128,30 @@ 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>
+                <PopoverCardActions
+                  actions={[
+                    {
+                      text: "Boost",
+                      fn: () => functions.boostFn(index),
+                    },
+                    {
+                      text: "Place top of deck",
+                      fn: () => functions.deckCardFn(index),
+                    },
+                    {
+                      text: "Place bottom of deck",
+                      fn: () => functions.deckCardBottomFn(index),
+                    },
+                  ]}
+                />
               </Flex>
             </CardWrapper>
           </Box>
         ))
       ) : (
         <Skeleton h="240px" />
       )}
+      <Box w="2rem" />
       {cards?.length === 0 && <Skeleton h="240px" />}
     </CarouselTray>
   );
@@ -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;

components/Game/game.modal-body.tsx

@@ -19,29 +19,31 @@ export const DeckModalContent = ({
 
   return (
     <Grid gridTemplateColumns={"repeat(auto-fit, minmax(250px,1fr))"} gap={1}>
-      {cards?.map((card, index) => (
-        <Box
-          w="100%"
-          maxH={"550px"}
-          key={card.title + index}
-          onMouseEnter={() => onEnter(index)}
-          onMouseLeave={onLeave}
-        >
-          {isHover === index && (
-            <Flex position="absolute">
-              <Tag
-                fontSize="1.25rem"
-                userSelect="none"
-                cursor="pointer"
-                onClick={() => add(index)()}
-              >
-                +
-              </Tag>
-            </Flex>
-          )}
-          <CardFactory key={card.title + index} card={card} />
-        </Box>
-      ))}
+      {cards
+        ?.map((card, index) => (
+          <Box
+            w="100%"
+            maxH={"550px"}
+            key={card.title + index}
+            onMouseEnter={() => onEnter(index)}
+            onMouseLeave={onLeave}
+          >
+            {isHover === index && (
+              <Flex position="absolute">
+                <Tag
+                  fontSize="1.25rem"
+                  userSelect="none"
+                  cursor="pointer"
+                  onClick={() => add(index)()}
+                >
+                  +
+                </Tag>
+              </Flex>
+            )}
+            <CardFactory key={card.title + index} card={card} />
+          </Box>
+        ))
+        ?.reverse()}
     </Grid>
   );
 };