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" ||