Adding support for auto buying of cards

package.json

@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "7.0.8",
+    "version": "7.1.0",
     "description": "React frontend for the Cards 110",
     "author": "Daithi Hearn",
     "license": "MIT",

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "short_name": "Cards 110",
   "name": "Cards 110",
-  "version": "7.0.8",
+  "version": "7.1.0",
   "icons": [
     {
       "src": "./assets/favicon.png",

src/caches/GameSlice.ts

@@ -4,6 +4,7 @@ import { GameState, GameStatus, PlayedCard } from "model/Game"
 import { Player } from "model/Player"
 import { RoundStatus } from "model/Round"
 import { RootState } from "./caches"
+import { get } from "http"
 
 const initialState: GameState = {
     iamSpectator: true,
@@ -45,6 +46,10 @@ export const {
 
 export const getGame = (state: RootState) => state.game
 export const getGamePlayers = createSelector(getGame, game => game.players)
+export const getNumPlayers = createSelector(
+    getGamePlayers,
+    players => players.length,
+)
 export const getMe = createSelector(getGame, game => game.me)
 
 export const getRound = createSelector(getGame, game => game.round)

src/caches/MyCardsSlice.ts

@@ -37,6 +37,12 @@ export const myCardsSlice = createSlice({
                 if (c.name === action.payload.name) c.selected = true
             })
         },
+        selectCards: (state, action: PayloadAction<SelectableCard[]>) => {
+            state.cards.forEach(c => {
+                if (action.payload.some(a => a.name === c.name))
+                    c.selected = true
+            })
+        },
         toggleSelect: (state, action: PayloadAction<SelectableCard>) =>
             state.cards.forEach(c => {
                 if (c.name === action.payload.name) c.selected = !c.selected
@@ -67,6 +73,7 @@ export const {
     clearSelectedCards,
     selectAll,
     selectCard,
+    selectCards,
     toggleSelect,
     toggleUniqueSelect,
     clearMyCards,

src/caches/SettingsSlice.ts

@@ -0,0 +1,20 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { RootState } from "./caches"
+import { PlayerSettings } from "model/PlayerSettings"
+
+const initialState: PlayerSettings = {
+    autoBuyCards: false,
+}
+
+export const settingsSlice = createSlice({
+    name: "settings",
+    initialState: initialState,
+    reducers: {
+        updateSettings: (_, action: PayloadAction<PlayerSettings>) =>
+            action.payload,
+    },
+})
+
+export const { updateSettings } = settingsSlice.actions
+
+export const getSettings = (state: RootState) => state.settings

src/caches/caches.ts

@@ -13,6 +13,7 @@ import { myGamesSlice } from "./MyGamesSlice"
 import { myCardsSlice } from "./MyCardsSlice"
 import { autoPlaySlice } from "./AutoPlaySlice"
 import { playerProfilesSlice } from "./PlayerProfilesSlice"
+import { settingsSlice } from "./SettingsSlice"
 
 const combinedReducer = combineReducers({
     myProfile: myProfileSlice.reducer,
@@ -21,6 +22,7 @@ const combinedReducer = combineReducers({
     playerProfiles: playerProfilesSlice.reducer,
     myCards: myCardsSlice.reducer,
     autoPlay: autoPlaySlice.reducer,
+    settings: settingsSlice.reducer,
 })
 
 export type RootState = ReturnType<typeof combinedReducer>

src/components/Game/Actions/Buying.tsx

@@ -10,16 +10,18 @@ import {
 } from "caches/MyCardsSlice"
 import {
     getGameId,
+    getNumPlayers,
     getIamGoer,
     getIHavePlayed,
     getIsMyGo,
     getSuit,
 } from "caches/GameSlice"
-import { riskOfMistakeBuyingCards } from "utils/GameUtils"
+import { pickBestCards, riskOfMistakeBuyingCards } from "utils/GameUtils"
 import ThrowCardsWarningModal from "./ThrowCardsWarningModal"
 import { SelectableCard } from "model/Cards"
 import parseError from "utils/ErrorUtils"
 import { Button } from "@mui/material"
+import { getSettings } from "caches/SettingsSlice"
 
 const WaitingForRoundToStart = () => (
     <Button variant="contained" disableRipple color="primary">
@@ -30,6 +32,7 @@ const WaitingForRoundToStart = () => (
 const Buying = () => {
     const dispatch = useAppDispatch()
     const { enqueueSnackbar } = useSnackbar()
+    const settings = useAppSelector(getSettings)
     const gameId = useAppSelector(getGameId)
     const suit = useAppSelector(getSuit)
     const myCards = useAppSelector(getMyCardsWithoutBlanks)
@@ -46,14 +49,19 @@ const Buying = () => {
         setReadyToBuy(!readyToBuy)
     }, [readyToBuy])
 
-    const buyCards = (id: string, sel: SelectableCard[]) => {
-        dispatch(GameService.buyCards(id, sel)).catch(e =>
-            enqueueSnackbar(parseError(e), { variant: "error" }),
-        )
-    }
+    const buyCards = useCallback(
+        (sel: SelectableCard[]) => {
+            if (!gameId) return
+            dispatch(GameService.buyCards(gameId, sel)).catch((e: Error) =>
+                enqueueSnackbar(parseError(e), { variant: "error" }),
+            )
+        },
+        [gameId],
+    )
 
     const hideCancelDeleteCardsDialog = useCallback(() => {
         updateDeleteCardsDialog(false)
+        setReadyToBuy(false)
     }, [])
 
     useEffect(() => {
@@ -64,34 +72,24 @@ const Buying = () => {
     }, [iamGoer])
 
     useEffect(() => {
-        if (isMyGo && readyToBuy) {
-            if (!gameId) throw Error("No game id set")
-
-            if (riskOfMistakeBuyingCards(suit!, selectedCards, myCards)) {
-                setReadyToBuy(false)
+        if (!isMyGo || !suit) return
+        if (readyToBuy) {
+            if (riskOfMistakeBuyingCards(suit, selectedCards, myCards)) {
                 updateDeleteCardsDialog(true)
-            } else buyCards(gameId, selectedCards)
+            } else buyCards(selectedCards)
         }
-    }, [gameId, suit, selectedCards, myCards, isMyGo, readyToBuy])
+    }, [iamGoer, suit, selectedCards, myCards, isMyGo, readyToBuy])
 
-    if (iHavePlayed) return <WaitingForRoundToStart />
+    if (iHavePlayed || settings.autoBuyCards) return <WaitingForRoundToStart />
     return (
         <>
-            {isMyGo || !readyToBuy ? (
-                <Button
-                    type="button"
-                    onClick={toggleReadyToBuy}
-                    color="primary">
-                    <b>Keep Cards</b>
-                </Button>
-            ) : (
-                <Button
-                    type="button"
-                    onClick={toggleReadyToBuy}
-                    color="primary">
-                    <b>Waiting to buy cards...</b>
-                </Button>
-            )}
+            <Button type="button" onClick={toggleReadyToBuy} color="primary">
+                <b>
+                    {isMyGo || !readyToBuy
+                        ? "Keep Cards"
+                        : "Waiting to buy cards..."}
+                </b>
+            </Button>
 
             <ThrowCardsWarningModal
                 modalVisible={deleteCardsDialog}

src/components/Game/Actions/SelectSuit.tsx

@@ -58,16 +58,17 @@ const SelectSuit = () => {
         [gameId, selectedCards],
     )
 
-    const selectFromDummyCallback = (
-        id: string,
-        sel: SelectableCard[],
-        suit?: Suit,
-    ) => {
-        if (!suit) throw Error("Must provide a suit")
-        dispatch(GameService.chooseFromDummy(id, sel, suit)).catch((e: Error) =>
-            enqueueSnackbar(parseError(e), { variant: "error" }),
-        )
-    }
+    const selectFromDummyCallback = useCallback(
+        (sel: SelectableCard[], suit?: Suit) => {
+            if (!gameId) throw Error("Must be in a game")
+            if (!suit) throw Error("Must provide a suit")
+            dispatch(GameService.chooseFromDummy(gameId, sel, suit)).catch(
+                (e: Error) =>
+                    enqueueSnackbar(parseError(e), { variant: "error" }),
+            )
+        },
+        [gameId],
+    )
 
     const hideCancelSelectFromDummyDialog = useCallback(() => {
         setSelectedSuit(undefined)

src/components/Game/Actions/ThrowCardsWarningModal.tsx

@@ -14,12 +14,12 @@ import { useAppSelector } from "caches/hooks"
 import { getMyCardsWithoutBlanks, getSelectedCards } from "caches/MyCardsSlice"
 import { SelectableCard } from "model/Cards"
 import { Suit } from "model/Suit"
-import { removeAllFromHand } from "utils/GameUtils"
+import { getTrumpCards, removeAllFromHand } from "utils/GameUtils"
 
 interface ModalOpts {
     modalVisible: boolean
     cancelCallback: () => void
-    continueCallback: (id: string, sel: SelectableCard[], suit?: Suit) => void
+    continueCallback: (sel: SelectableCard[], suit?: Suit) => void
     suit: Suit
 }
 
@@ -29,19 +29,17 @@ const ThrowCardsWarningModal: React.FC<ModalOpts> = ({
     continueCallback,
     suit,
 }) => {
-    const gameId = useAppSelector(getGameId)
     const myCards = useAppSelector(getMyCardsWithoutBlanks)
     const selectedCards = useAppSelector(getSelectedCards)
 
     const cardsToBeThrown = useMemo(
-        () => removeAllFromHand(selectedCards, myCards),
+        () => getTrumpCards(removeAllFromHand(selectedCards, myCards), suit),
         [myCards, selectedCards],
     )
 
     const callContinue = useCallback(() => {
-        if (!gameId) throw Error("GameId not set")
-        continueCallback(gameId, selectedCards, suit)
-    }, [gameId, selectedCards])
+        continueCallback(selectedCards, suit)
+    }, [selectedCards])
 
     return (
         <Dialog onClose={() => cancelCallback()} open={modalVisible}>

src/components/Game/AutoActionManager.tsx

@@ -1,27 +1,38 @@
-import { useEffect } from "react"
+import { useCallback, useEffect } from "react"
 import GameService from "services/GameService"
 
 import { useAppDispatch, useAppSelector } from "caches/hooks"
 import {
     getCards,
     getGameId,
+    getIamGoer,
     getIsInBunker,
     getIsMyGo,
+    getNumPlayers,
     getRound,
+    getSuit,
 } from "caches/GameSlice"
 import { RoundStatus } from "model/Round"
 import { getAutoPlayCard } from "caches/AutoPlaySlice"
-import { bestCardLead, getWorstCard } from "utils/GameUtils"
+import { bestCardLead, getWorstCard, pickBestCards } from "utils/GameUtils"
 import { useSnackbar } from "notistack"
 import parseError from "utils/ErrorUtils"
+import { getSettings } from "caches/SettingsSlice"
+import { SelectableCard } from "model/Cards"
+import { getMyCardsWithoutBlanks } from "caches/MyCardsSlice"
 
 const AutoActionManager = () => {
     const dispatch = useAppDispatch()
     const { enqueueSnackbar } = useSnackbar()
 
+    const settings = useAppSelector(getSettings)
+    const numPlayers = useAppSelector(getNumPlayers)
+    const suit = useAppSelector(getSuit)
+    const myCards = useAppSelector(getMyCardsWithoutBlanks)
     const gameId = useAppSelector(getGameId)
     const round = useAppSelector(getRound)
     const cards = useAppSelector(getCards)
+    const iamGoer = useAppSelector(getIamGoer)
 
     const autoPlayCard = useAppSelector(getAutoPlayCard)
 
@@ -35,6 +46,16 @@ const AutoActionManager = () => {
             })
         })
 
+    const buyCards = useCallback(
+        (sel: SelectableCard[]) => {
+            if (!gameId) return
+            dispatch(GameService.buyCards(gameId, sel)).catch((e: Error) =>
+                enqueueSnackbar(parseError(e), { variant: "error" }),
+            )
+        },
+        [gameId],
+    )
+
     const call = (id: string, callAmount: number) =>
         dispatch(GameService.call(id, callAmount)).catch(console.error)
 
@@ -60,6 +81,19 @@ const AutoActionManager = () => {
         }
     }, [gameId, round, isMyGo, cards, autoPlayCard])
 
+    // Auto buy cards
+    useEffect(() => {
+        if (
+            settings.autoBuyCards &&
+            suit &&
+            isMyGo &&
+            round?.status === RoundStatus.BUYING &&
+            !iamGoer
+        ) {
+            buyCards(pickBestCards(myCards, suit, numPlayers))
+        }
+    }, [settings, isMyGo, iamGoer, round, myCards, suit, numPlayers])
+
     return null
 }
 

src/components/Game/MyCards.tsx

@@ -7,13 +7,19 @@ import {
 } from "react-beautiful-dnd"
 import { BLANK_CARD, SelectableCard } from "model/Cards"
 import { RoundStatus } from "model/Round"
-import { getIamGoer, getIsRoundCalled, getRound } from "caches/GameSlice"
+import {
+    getGameId,
+    getIamGoer,
+    getIsRoundCalled,
+    getRound,
+    getNumPlayers,
+} from "caches/GameSlice"
 import { useAppDispatch, useAppSelector } from "caches/hooks"
 import {
     clearSelectedCards,
     getMyCards,
     replaceMyCards,
-    selectCard,
+    selectCards,
     toggleSelect,
     toggleUniqueSelect,
 } from "caches/MyCardsSlice"
@@ -23,6 +29,7 @@ import {
     clearAutoPlay,
 } from "caches/AutoPlaySlice"
 import { CardContent, CardMedia, useTheme } from "@mui/material"
+import { pickBestCards } from "utils/GameUtils"
 
 const EMPTY_HAND = [
     { ...BLANK_CARD, selected: false },
@@ -44,6 +51,8 @@ const MyCards: React.FC = () => {
     const theme = useTheme()
     const dispatch = useAppDispatch()
     const round = useAppSelector(getRound)
+    const gameId = useAppSelector(getGameId)
+    const numPlayers = useAppSelector(getNumPlayers)
     const isRoundCalled = useAppSelector(getIsRoundCalled)
     const myCards = useAppSelector(getMyCards)
     const autoPlayCard = useAppSelector(getAutoPlayCard)
@@ -58,18 +67,11 @@ const MyCards: React.FC = () => {
             round.suit
         ) {
             // Auto select all cards of a specific suit when the round status is BUYING
+            const bestCards = pickBestCards(myCards, round.suit, numPlayers)
 
-            const cardsOfSuit = myCards.filter(
-                card =>
-                    card.suit === round.suit ||
-                    card.name === "JOKER" ||
-                    card.name === "ACE_HEARTS",
-            )
-            cardsOfSuit.forEach(card => {
-                dispatch(selectCard(card))
-            })
+            dispatch(selectCards(bestCards))
         }
-    }, [round, myCards, prevRoundStatus, iamGoer])
+    }, [round, numPlayers, gameId, myCards, prevRoundStatus, iamGoer])
 
     const cardsSelectable = useMemo(
         () =>