From d993554d30fbbbbf56e0dd506a43f52d16442293 Mon Sep 17 00:00:00 2001
From: Daithi Hearn <daithi.hearn@gmail.com>
Date: Sun, 9 Jul 2023 22:44:26 +0200
Subject: [PATCH 1/3] Allowing autoplay for high or low cards

---
 package.json                                  |   2 +-
 public/manifest.json                          |   2 +-
 src/components/Game/Actions/PlayCard.tsx      | 121 ++++++++++--------
 .../Game/Actions/ThrowCardsWarningModal.tsx   |   1 -
 4 files changed, 69 insertions(+), 57 deletions(-)

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..566a2d8 100644
--- a/src/components/Game/Actions/PlayCard.tsx
+++ b/src/components/Game/Actions/PlayCard.tsx
@@ -7,27 +7,76 @@ 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 = () => (
-    <Button variant="contained" disableRipple color="secondary">
-        <b>Wait for your turn...</b>
-    </Button>
-)
+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<AutoPlayState>("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<AutoPlayState>) => {
+            const value = event.target.value as AutoPlayState
+            setAutoPlay(value)
+        },
+        [],
+    )
+
+    const AutoPlayDropdown = () => (
+        <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
+            <InputLabel id="autoplay-select-label">Autoplay</InputLabel>
+            <Select
+                labelId="autoplay-select-label"
+                label="Autoplay"
+                value={autoPlay}
+                onChange={handleAutoPlayChange}
+                sx={{
+                    backgroundColor: theme.palette.primary.main,
+                    "&:hover": {
+                        backgroundColor: theme.palette.primary.main,
+                    },
+                    "& .MuiSelect-select:focus": {
+                        backgroundColor: theme.palette.primary.main,
+                    },
+                    "& .MuiSelect-icon": {
+                        color: theme.palette.primary.contrastText,
+                    },
+                }}>
+                <MenuItem value="off">Off</MenuItem>
+                <MenuItem value="best">Best</MenuItem>
+                <MenuItem value="worst">Worst</MenuItem>
+            </Select>
+        </FormControl>
+    )
+
+    const PlayCardButton = () => (
+        <Button
+            id="playCardButton"
+            type="button"
+            onClick={selectCardToPlay}
+            color="warning">
+            <b>Play</b>
+        </Button>
+    )
 
     const playButtonEnabled = useMemo(
         () =>
@@ -55,62 +104,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 (
-            <Button
-                id="autoPlayCardButton"
-                type="button"
-                onClick={togglePlayCard}
-                color="error">
-                <b>Disable Auto Play</b>
-            </Button>
-        )
-    } else if (!playButtonEnabled)
-        return (
-            <>
-                <WaitingForYourTurn />
-                <Button
-                    id="autoPlayCardButton"
-                    type="button"
-                    onClick={togglePlayCard}
-                    color="warning">
-                    <b>Enable Auto Play</b>
-                </Button>
-            </>
-        )
     return (
-        <>
-            <Button
-                id="playCardButton"
-                type="button"
-                onClick={selectCardToPlay}
-                color="primary">
-                <b>Play Card</b>
-            </Button>
-
-            <Button
-                id="autoPlayCardButton"
-                type="button"
-                onClick={togglePlayCard}
-                color="warning">
-                <b>Enable Auto Play</b>
-            </Button>
-        </>
+        <ButtonGroup disableElevation variant="contained" size="large">
+            {playButtonEnabled && <PlayCardButton />}
+            <AutoPlayDropdown />
+        </ButtonGroup>
     )
 }
 
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"

From f71d5cf3f3e7f23a956f614a7e8e8fbb4331b4d7 Mon Sep 17 00:00:00 2001
From: Daithi Hearn <daithi.hearn@gmail.com>
Date: Sun, 9 Jul 2023 23:02:51 +0200
Subject: [PATCH 2/3] UI enhancements on buttons

---
 src/components/Game/Actions/PlayCard.tsx | 25 ++++++++++++------------
 src/pages/Game/_game.scss                |  4 ----
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/Game/Actions/PlayCard.tsx b/src/components/Game/Actions/PlayCard.tsx
index 566a2d8..18ca986 100644
--- a/src/components/Game/Actions/PlayCard.tsx
+++ b/src/components/Game/Actions/PlayCard.tsx
@@ -42,7 +42,7 @@ const PlayCard = () => {
     )
 
     const AutoPlayDropdown = () => (
-        <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
+        <FormControl variant="filled" sx={{ minWidth: 90 }}>
             <InputLabel id="autoplay-select-label">Autoplay</InputLabel>
             <Select
                 labelId="autoplay-select-label"
@@ -68,16 +68,6 @@ const PlayCard = () => {
         </FormControl>
     )
 
-    const PlayCardButton = () => (
-        <Button
-            id="playCardButton"
-            type="button"
-            onClick={selectCardToPlay}
-            color="warning">
-            <b>Play</b>
-        </Button>
-    )
-
     const playButtonEnabled = useMemo(
         () =>
             isMyGo &&
@@ -90,6 +80,17 @@ const PlayCard = () => {
         [isMyGo, round, myCards],
     )
 
+    const PlayCardButton = () => (
+        <Button
+            id="playCardButton"
+            type="button"
+            disabled={!playButtonEnabled}
+            onClick={selectCardToPlay}
+            color="warning">
+            <b>Play Card</b>
+        </Button>
+    )
+
     const playCard = useCallback(
         (card: string) =>
             dispatch(GameService.playCard(gameId!, card)).catch(e => {
@@ -121,7 +122,7 @@ const PlayCard = () => {
 
     return (
         <ButtonGroup disableElevation variant="contained" size="large">
-            {playButtonEnabled && <PlayCardButton />}
+            <PlayCardButton />
             <AutoPlayDropdown />
         </ButtonGroup>
     )
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 {

From de426c4cf48092454d09972a1f9912cc035118e5 Mon Sep 17 00:00:00 2001
From: Daithi Hearn <daithi.hearn@gmail.com>
Date: Sun, 9 Jul 2023 23:03:16 +0200
Subject: [PATCH 3/3] Improving buy risk logic If you have 5 trumps down warn
 the player

---
 src/utils/GameUtils.ts | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

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 = <T extends Card>(
     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 = <T extends Card>(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 = <T extends Card>(cards: T[], suit: Suit) => {
+    for (const element of cards) {
         if (
             element.name === "JOKER" ||
             element.name === "ACE_HEARTS" ||