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()}
);
};