Merge pull request #204 from daithihearn/autoplay

Autoplay

Author: daithihearn

package.json

@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "8.0.2",
+    "version": "8.0.3",
     "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": "8.0.2",
+  "version": "8.0.3",
   "icons": [
     {
       "src": "./assets/favicon.png",

src/caches/GameSlice.ts

@@ -3,7 +3,11 @@ import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit"
 import { GameState, GameStateResponse, GameStatus } from "model/Game"
 import { RoundStatus } from "model/Round"
 import { RootState } from "./caches"
-import { processOrderedCardsAfterGameUpdate } from "utils/GameUtils"
+import {
+    padMyHand,
+    parseCards,
+    processOrderedCardsAfterGameUpdate,
+} from "utils/GameUtils"
 import { Card, CARDS, EMPTY } from "model/Cards"
 import { determineEvent } from "utils/EventUtils"
 import { Event } from "model/Events"
@@ -30,7 +34,9 @@ export const gameSlice = createSlice({
             if (action.payload.id !== state.id) {
                 return {
                     ...action.payload,
-                    cardsFull: (action.payload.cards ?? []).map(c => CARDS[c]),
+                    cardsFull: padMyHand(
+                        parseCards(action.payload.cards ?? []),
+                    ),
                     event: Event.Unknown,
                 }
             }

src/components/Game/Actions/Buying.tsx

@@ -3,20 +3,31 @@ import { useCallback, useState } from "react"
 import { useAppSelector } from "caches/hooks"
 import {
     getGameId,
+    getIHavePlayed,
+    getIamGoer,
     getIsMyGo,
     getSelectedCards,
     getSuit,
 } from "caches/GameSlice"
 import ThrowCardsWarningModal from "./ThrowCardsWarningModal"
 import { Button } from "@mui/material"
 import { useGameActions } from "components/Hooks/useGameActions"
+import { useSettings } from "components/Hooks/useSettings"
+
+const WaitingForRoundToStart = () => (
+    <Button variant="contained" disableRipple color="primary">
+        <b>Waiting for round to start...</b>
+    </Button>
+)
 
 const Buying = () => {
     const { buyCards } = useGameActions()
-
+    const { settings } = useSettings()
     const gameId = useAppSelector(getGameId)
     const suit = useAppSelector(getSuit)
     const isMyGo = useAppSelector(getIsMyGo)
+    const iHavePlayed = useAppSelector(getIHavePlayed)
+    const iamGoer = useAppSelector(getIamGoer)
 
     const [deleteCardsDialog, setDeleteCardsDialog] = useState(false)
 
@@ -34,6 +45,8 @@ const Buying = () => {
         setDeleteCardsDialog(false)
     }, [])
 
+    if (iHavePlayed || settings?.autoBuyCards || iamGoer)
+        return <WaitingForRoundToStart />
     return (
         <>
             <Button type="button" onClick={buyCardsWrapper} color="primary">

src/components/Game/AutoActionManager.tsx

@@ -1,18 +1,39 @@
 import { useEffect } from "react"
 
 import { useAppSelector } from "caches/hooks"
-import { getGameId, getIsInBunker } from "caches/GameSlice"
+import { getGame, getIsInBunker } from "caches/GameSlice"
 import { useGameActions } from "components/Hooks/useGameActions"
+import { RoundStatus } from "model/Round"
+import { useSettings } from "components/Hooks/useSettings"
+import { pickBestCards } from "utils/GameUtils"
 
 const AutoActionManager = () => {
-    const { call } = useGameActions()
-    const gameId = useAppSelector(getGameId)
+    const { call, buyCards } = useGameActions()
+    const { settings } = useSettings()
+    const game = useAppSelector(getGame)
     const isInBunker = useAppSelector(getIsInBunker)
 
-    // If in the bunker, Pass
     useEffect(() => {
-        if (gameId && isInBunker) call({ gameId, call: "0" })
-    }, [gameId, isInBunker])
+        if (game.id && game.isMyGo) {
+            // Card Buying
+            if (game.round?.status === RoundStatus.BUYING) {
+                if (game.iamGoer) {
+                    buyCards({ gameId: game.id, cards: game.cards })
+                } else if (settings?.autoBuyCards && game.round?.suit) {
+                    buyCards({
+                        gameId: game.id,
+                        cards: pickBestCards(
+                            game.cards,
+                            game.round.suit,
+                            game.players.length,
+                        ),
+                    })
+                }
+            }
+
+            if (game.id && isInBunker) call({ gameId: game.id, call: "0" })
+        }
+    }, [game, settings, isInBunker])
 
     return null
 }

src/components/Game/PlayerCard.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
 import {
     Grid,
     CardMedia,
@@ -17,9 +17,9 @@ import { Player, PlayerProfile } from "model/Player"
 import Leaderboard from "components/Leaderboard/Leaderboard"
 import { Suit } from "model/Suit"
 import { FormatName } from "utils/FormattingUtils"
-import { CardName } from "model/Cards"
 import { useAppSelector } from "caches/hooks"
-import { getIsRoundPlaying, getRound } from "caches/GameSlice"
+import { getGame, getIsRoundPlaying, getRound } from "caches/GameSlice"
+import { Event } from "model/Events"
 
 interface PlayerRowI {
     player: Player
@@ -153,7 +153,11 @@ const DealerChip: React.FC<{
 
 const PlayerCard: React.FC<PlayerRowI> = ({ player, profile, className }) => {
     const theme = useTheme()
-    const round = useAppSelector(getRound)
+    const game = useAppSelector(getGame)
+    const [revisionActioned, setRevisionActioned] = useState(-1)
+    const [playedCard, setPlayedCard] = useState<PlayedCard | undefined>(
+        undefined,
+    )
     const [modalLeaderboard, setModalLeaderboard] = useState(false)
 
     const toggleLeaderboardModal = useCallback(
@@ -162,22 +166,53 @@ const PlayerCard: React.FC<PlayerRowI> = ({ player, profile, className }) => {
     )
 
     const isGoer: boolean = useMemo(
-        () => !!round && round.goerId === player.id,
-        [round, player],
+        () => !!game.round && game.round.goerId === player.id,
+        [game.round, player],
     )
 
-    const playedCard = useMemo<PlayedCard | undefined>(() => {
-        if (round) {
-            return round.currentHand.playedCards?.find(
-                c => c.playerId === player.id,
-            )
+    const delayResetCard = useCallback(() => {
+        // The in 3 seconds set it back to undefined
+        setTimeout(() => {
+            setPlayedCard(undefined)
+        }, 3000)
+    }, [])
+
+    useEffect(() => {
+        if (game.round && game.revision > revisionActioned) {
+            if (game.event === Event.HandEnd) {
+                // Set card from the last hand
+                setPlayedCard(
+                    game.round.completedHands
+                        .toReversed()[0]
+                        ?.playedCards?.find(c => c.playerId === player.id),
+                )
+                delayResetCard()
+            } else if (game.event === Event.RoundEnd) {
+                // Set card from the previous round
+                if (game.previousRound) {
+                    setPlayedCard(
+                        game.previousRound.completedHands
+                            .toReversed()[0]
+                            ?.playedCards?.find(c => c.playerId === player.id),
+                    )
+                }
+                delayResetCard()
+            } else {
+                setPlayedCard(
+                    game.round.currentHand.playedCards?.find(
+                        c => c.playerId === player.id,
+                    ),
+                )
+            }
+            setRevisionActioned(game.revision)
         }
-        return { card: CardName.EMPTY, playerId: player.id }
-    }, [round, player])
+    }, [game, player, delayResetCard, revisionActioned])
 
     const isCurrentPlayer: boolean = useMemo(
-        () => !!round && round.currentHand.currentPlayerId === player.id,
-        [round, player],
+        () =>
+            !!game.round &&
+            game.round.currentHand.currentPlayerId === player.id,
+        [game.round, player],
     )
 
     const scoreClassName = useMemo(() => {
@@ -248,7 +283,7 @@ const PlayerCard: React.FC<PlayerRowI> = ({ player, profile, className }) => {
                             <BlankCard name={profile.name} />
                             <DealerChip
                                 player={player}
-                                dealerId={round?.dealerId}
+                                dealerId={game.round?.dealerId}
                             />
                             <CallChip call={player.call} isGoer={isGoer} />
                             <SuitChip isGoer={isGoer} />

src/model/Game.ts

@@ -38,6 +38,7 @@ export interface GameStateResponse {
     cards: CardName[]
     status: GameStatus
     round?: Round
+    previousRound?: Round
     maxCall?: number
     me?: Player
     players: Player[]