diff --git a/package.json b/package.json index d2f0c0a..f0b1c2b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "frontend", - "version": "7.3.0", + "version": "7.3.1", "description": "React frontend for the Cards 110", "author": "Daithi Hearn", "license": "MIT", diff --git a/public/manifest.json b/public/manifest.json index 41af60a..95a92ab 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,7 +1,7 @@ { "short_name": "Cards 110", "name": "Cards 110", - "version": "7.3.0", + "version": "7.3.1", "icons": [ { "src": "./assets/favicon.png", diff --git a/src/components/Game/Actions/PlayCard.tsx b/src/components/Game/Actions/PlayCard.tsx index fb434d0..18ca986 100644 --- a/src/components/Game/Actions/PlayCard.tsx +++ b/src/components/Game/Actions/PlayCard.tsx @@ -7,27 +7,66 @@ import { getGameId, getIsMyGo, getRound } from "caches/GameSlice" import { BLANK_CARD } from "model/Cards" import parseError from "utils/ErrorUtils" import { RoundStatus } from "model/Round" -import { Button } from "@mui/material" +import { + Button, + ButtonGroup, + FormControl, + InputLabel, + MenuItem, + Select, + SelectChangeEvent, + useTheme, +} from "@mui/material" import { getCardToPlay, updateCardToPlay } from "caches/PlayCardSlice" import { bestCardLead, getBestCard, getWorstCard } from "utils/GameUtils" -const WaitingForYourTurn = () => ( - -) +type AutoPlayState = "off" | "best" | "worst" const PlayCard = () => { const dispatch = useAppDispatch() + const theme = useTheme() const round = useAppSelector(getRound) - const [autoPlay, setAutoPlay] = useState(false) + const [autoPlay, setAutoPlay] = useState("off") const gameId = useAppSelector(getGameId) const myCards = useAppSelector(getMyCardsWithoutBlanks) const isMyGo = useAppSelector(getIsMyGo) const selectedCards = useAppSelector(getSelectedCards) const cardToPlay = useAppSelector(getCardToPlay) - const togglePlayCard = useCallback(() => setAutoPlay(!autoPlay), [autoPlay]) + const handleAutoPlayChange = useCallback( + (event: SelectChangeEvent) => { + const value = event.target.value as AutoPlayState + setAutoPlay(value) + }, + [], + ) + + const AutoPlayDropdown = () => ( + + Autoplay + + + ) const playButtonEnabled = useMemo( () => @@ -41,6 +80,17 @@ const PlayCard = () => { [isMyGo, round, myCards], ) + const PlayCardButton = () => ( + + ) + const playCard = useCallback( (card: string) => dispatch(GameService.playCard(gameId!, card)).catch(e => { @@ -55,62 +105,26 @@ const PlayCard = () => { }, [selectedCards]) // 1. Play card when you've pre-selected a card - // 2. If auto play is enabled, play best card - // 3. Play worst card if best card lead out + // 2. If best card lead or lead from bottom enabled, play worst card + // 3. If lead from the top enabled, play best card useEffect(() => { if (round?.suit && isMyGo) { if (cardToPlay) playCard(cardToPlay) - else if (autoPlay) { - const bestCard = getBestCard(myCards, round.suit) - playCard(bestCard.name) - } else if (bestCardLead(round)) { + else if (autoPlay === "best" || bestCardLead(round)) { const worstCard = getWorstCard(myCards, round.suit) playCard(worstCard.name) + } else if (autoPlay === "worst") { + const bestCard = getBestCard(myCards, round.suit) + playCard(bestCard.name) } } }, [playCard, autoPlay, round, isMyGo, myCards, cardToPlay]) - if (autoPlay) { - return ( - - ) - } else if (!playButtonEnabled) - return ( - <> - - - - ) return ( - <> - - - - + + + + ) } diff --git a/src/components/Game/Actions/ThrowCardsWarningModal.tsx b/src/components/Game/Actions/ThrowCardsWarningModal.tsx index 524fe70..ccf5385 100644 --- a/src/components/Game/Actions/ThrowCardsWarningModal.tsx +++ b/src/components/Game/Actions/ThrowCardsWarningModal.tsx @@ -9,7 +9,6 @@ import { CardMedia, CardContent, } from "@mui/material" -import { getGameId } from "caches/GameSlice" import { useAppSelector } from "caches/hooks" import { getMyCardsWithoutBlanks, getSelectedCards } from "caches/MyCardsSlice" import { SelectableCard } from "model/Cards" diff --git a/src/pages/Game/_game.scss b/src/pages/Game/_game.scss index e8edf83..ed10c54 100644 --- a/src/pages/Game/_game.scss +++ b/src/pages/Game/_game.scss @@ -169,10 +169,6 @@ padding-left: 5px; } -#playCardButton:disabled { - display: none; -} - @media (min-width: 576px) { .modal-dialog { diff --git a/src/utils/GameUtils.ts b/src/utils/GameUtils.ts index 3868fd8..ff2220f 100644 --- a/src/utils/GameUtils.ts +++ b/src/utils/GameUtils.ts @@ -83,9 +83,32 @@ export const riskOfMistakeBuyingCards = ( selectedCards: T[], myCards: T[], ) => { + // If you have selected 5 trumps then return false + if (areAllTrumpCards(selectedCards, suit)) { + return false + } + const deletingCards = removeAllFromHand(selectedCards, myCards) - for (const element of deletingCards) { + return containsATrumpCard(deletingCards, suit) +} + +export const areAllTrumpCards = (cards: T[], suit: Suit) => { + for (const element of cards) { + if ( + element.name !== "JOKER" && + element.name !== "ACE_HEARTS" && + element.suit !== suit + ) { + return false + } + } + + return true +} + +export const containsATrumpCard = (cards: T[], suit: Suit) => { + for (const element of cards) { if ( element.name === "JOKER" || element.name === "ACE_HEARTS" ||