fix: more fixes based on api changes

src/caches/GameSlice.ts

@@ -1,9 +1,11 @@
 import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit"
 
-import { GameState, GameStatus, PlayedCard } from "model/Game"
-import { Player } from "model/Player"
+import { GameState, GameStateResponse, GameStatus } from "model/Game"
 import { RoundStatus } from "model/Round"
 import { RootState } from "./caches"
+import { processOrderedCardsAfterGameUpdate } from "utils/GameUtils"
+import { Card, EMPTY } from "model/Cards"
+import { determineEvent } from "utils/EventUtils"
 
 export const initialGameState: GameState = {
     revision: -1,
@@ -13,6 +15,7 @@ export const initialGameState: GameState = {
     iamDealer: false,
     iamAdmin: false,
     cards: [],
+    cardsFull: [],
     status: GameStatus.NONE,
     players: [],
 }
@@ -21,27 +24,68 @@ export const gameSlice = createSlice({
     name: "game",
     initialState: initialGameState,
     reducers: {
-        updateGame: (_, action: PayloadAction<GameState>) => action.payload,
-        updatePlayers: (state, action: PayloadAction<Player[]>) => {
-            state.players = action.payload
+        updateGame: (state, action: PayloadAction<GameStateResponse>) => {
+            const updatedGame: GameState = {
+                ...action.payload,
+                cardsFull: processOrderedCardsAfterGameUpdate(
+                    state.cardsFull,
+                    action.payload.cards,
+                ),
+            }
+
+            const event = determineEvent(state, updatedGame)
+
+            console.log("event", event)
+
+            return updatedGame
+        },
+        selectCard: (state, action: PayloadAction<Card>) => {
+            state.cardsFull.forEach(c => {
+                if (c.name === action.payload.name) c.selected = true
+            })
         },
-        updatePlayedCards: (state, action: PayloadAction<PlayedCard[]>) => {
-            if (state.round)
-                state.round.currentHand.playedCards = action.payload
+        selectCards: (state, action: PayloadAction<Card[]>) => {
+            state.cardsFull.forEach(c => {
+                if (action.payload.some(a => a.name === c.name))
+                    c.selected = true
+            })
         },
-        disableActions: state => {
-            state.isMyGo = false
+        toggleSelect: (state, action: PayloadAction<Card>) =>
+            state.cardsFull.forEach(c => {
+                if (c.name === action.payload.name) c.selected = !c.selected
+            }),
+        toggleUniqueSelect: (state, action: PayloadAction<Card>) =>
+            state.cardsFull.forEach(c => {
+                if (c.name === action.payload.name) c.selected = !c.selected
+                else c.selected = false
+            }),
+        selectAll: state => {
+            state.cardsFull.forEach(c => {
+                if (c.name !== EMPTY.name) c.selected = true
+            })
+        },
+        clearSelectedCards: state => {
+            state.cardsFull.forEach(c => {
+                c.selected = false
+            })
+        },
+        replaceMyCards: (state, action: PayloadAction<Card[]>) => {
+            state.cardsFull = action.payload
         },
         resetGame: () => initialGameState,
     },
 })
 
 export const {
     updateGame,
-    disableActions,
-    updatePlayedCards,
-    updatePlayers,
     resetGame,
+    toggleSelect,
+    toggleUniqueSelect,
+    selectCard,
+    selectCards,
+    selectAll,
+    clearSelectedCards,
+    replaceMyCards,
 } = gameSlice.actions
 
 export const getGame = (state: RootState) => state.game
@@ -54,6 +98,14 @@ export const getMe = createSelector(getGame, game => game.me)
 
 export const getRound = createSelector(getGame, game => game.round)
 export const getCards = createSelector(getGame, game => game.cards)
+export const getCardsFull = createSelector(getGame, game => game.cardsFull)
+export const getCardsWithoutBlanks = createSelector(getCardsFull, cards =>
+    cards.filter(c => c.name !== EMPTY.name),
+)
+export const getSelectedCards = createSelector(getCardsFull, cards =>
+    cards.filter(c => c.selected),
+)
+
 export const getSuit = createSelector(getRound, round => round?.suit)
 export const getGameId = createSelector(getGame, game => game.id)
 
@@ -68,6 +120,11 @@ export const getIsGameActive = createSelector(
     status => status === GameStatus.ACTIVE,
 )
 
+export const getIsGameCompleted = createSelector(
+    getGameStatus,
+    status => status === GameStatus.COMPLETED,
+)
+
 export const getRoundStatus = createSelector(getRound, round => round?.status)
 export const getIsRoundCalling = createSelector(
     getRoundStatus,
@@ -120,3 +177,5 @@ export const getIsInBunker = createSelector(
     (isMyGo, isRoundCalling, me) =>
         isMyGo && isRoundCalling && me && me?.score < -30,
 )
+
+export const getRevision = createSelector(getGame, game => game.revision)

src/caches/caches.ts

@@ -1,19 +1,15 @@
 import {
-    Action,
     AnyAction,
     combineReducers,
     configureStore,
     Reducer,
-    ThunkDispatch,
 } from "@reduxjs/toolkit"
 
 import { gameSlice } from "./GameSlice"
-import { myCardsSlice } from "./MyCardsSlice"
 import { playCardSlice } from "./PlayCardSlice"
 
 const combinedReducer = combineReducers({
     game: gameSlice.reducer,
-    myCards: myCardsSlice.reducer,
     playCard: playCardSlice.reducer,
 })
 

src/components/Game/Actions/Buying.tsx

@@ -1,18 +1,16 @@
 import { useCallback, useEffect, useState } from "react"
 
 import { useAppDispatch, useAppSelector } from "caches/hooks"
-import {
-    getMyCardsWithoutBlanks,
-    getSelectedCards,
-    selectAll,
-} from "caches/MyCardsSlice"
 import {
     getGameId,
     getNumPlayers,
     getIamGoer,
     getIHavePlayed,
     getIsMyGo,
     getSuit,
+    getCardsWithoutBlanks,
+    getSelectedCards,
+    selectAll,
 } from "caches/GameSlice"
 import { pickBestCards, riskOfMistakeBuyingCards } from "utils/GameUtils"
 import ThrowCardsWarningModal from "./ThrowCardsWarningModal"
@@ -35,7 +33,7 @@ const Buying = () => {
     const numPlayers = useAppSelector(getNumPlayers)
     const gameId = useAppSelector(getGameId)
     const suit = useAppSelector(getSuit)
-    const myCards = useAppSelector(getMyCardsWithoutBlanks)
+    const myCards = useAppSelector(getCardsWithoutBlanks)
     const [readyToBuy, setReadyToBuy] = useState(false)
     const iHavePlayed = useAppSelector(getIHavePlayed)
     const isMyGo = useAppSelector(getIsMyGo)

src/components/Game/Actions/PlayCard.tsx

@@ -1,8 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from "react"
 
 import { useAppDispatch, useAppSelector } from "caches/hooks"
-import { getMyCardsWithoutBlanks, getSelectedCards } from "caches/MyCardsSlice"
-import { getGameId, getIsMyGo, getRound } from "caches/GameSlice"
+import {
+    getCardsWithoutBlanks,
+    getGameId,
+    getIsMyGo,
+    getRound,
+    getSelectedCards,
+} from "caches/GameSlice"
 import { RoundStatus } from "model/Round"
 import {
     Button,
@@ -27,7 +32,7 @@ const PlayCard = () => {
     const { playCard } = useGameActions()
     const round = useAppSelector(getRound)
     const gameId = useAppSelector(getGameId)
-    const myCards = useAppSelector(getMyCardsWithoutBlanks)
+    const myCards = useAppSelector(getCardsWithoutBlanks)
     const isMyGo = useAppSelector(getIsMyGo)
 
     const [autoPlay, setAutoPlay] = useState<AutoPlayState>("off")

src/components/Game/Actions/SelectSuit.tsx

@@ -2,13 +2,17 @@ import { useCallback, useState } from "react"
 
 import { Suit } from "model/Suit"
 import { useSnackbar } from "notistack"
-import { getMyCardsWithoutBlanks, getSelectedCards } from "caches/MyCardsSlice"
 import { removeAllFromHand } from "utils/GameUtils"
 import ThrowCardsWarningModal from "./ThrowCardsWarningModal"
 import { CardName, Card } from "model/Cards"
 import { Button } from "@mui/material"
 import { useAppSelector } from "caches/hooks"
-import { getGameId, getIamGoer } from "caches/GameSlice"
+import {
+    getCardsWithoutBlanks,
+    getGameId,
+    getIamGoer,
+    getSelectedCards,
+} from "caches/GameSlice"
 import { useGameActions } from "components/Hooks/useGameActions"
 
 const WaitingForSuit = () => (
@@ -22,7 +26,7 @@ const SelectSuit = () => {
     const { selectSuit } = useGameActions()
 
     const gameId = useAppSelector(getGameId)
-    const myCards = useAppSelector(getMyCardsWithoutBlanks)
+    const myCards = useAppSelector(getCardsWithoutBlanks)
     const iamGoer = useAppSelector(getIamGoer)
 
     const [selectedSuit, setSelectedSuit] = useState<Suit>()

src/components/Game/Actions/ThrowCardsWarningModal.tsx

@@ -10,10 +10,10 @@ import {
     CardContent,
 } from "@mui/material"
 import { useAppSelector } from "caches/hooks"
-import { getMyCardsWithoutBlanks, getSelectedCards } from "caches/MyCardsSlice"
 import { Card } from "model/Cards"
 import { Suit } from "model/Suit"
 import { getTrumpCards, removeAllFromHand } from "utils/GameUtils"
+import { getCardsWithoutBlanks, getSelectedCards } from "caches/GameSlice"
 
 interface ModalOpts {
     modalVisible: boolean
@@ -28,7 +28,7 @@ const ThrowCardsWarningModal: React.FC<ModalOpts> = ({
     continueCallback,
     suit,
 }) => {
-    const myCards = useAppSelector(getMyCardsWithoutBlanks)
+    const myCards = useAppSelector(getCardsWithoutBlanks)
     const selectedCards = useAppSelector(getSelectedCards)
 
     const cardsToBeThrown = useMemo(

src/components/Game/GameWrapper.tsx

@@ -23,15 +23,13 @@ const GameWrapper = () => {
     const iamSpectator = useAppSelector(getIamSpectator)
 
     return (
-        <>
-            <GameCard>
-                <PlayersAndCards />
+        <GameCard>
+            <PlayersAndCards />
 
-                {!iamSpectator ? <AutoActionManager /> : null}
-                {!iamSpectator ? <ActionsWrapper /> : null}
-                {!iamSpectator ? <MyCards /> : null}
-            </GameCard>
-        </>
+            {!iamSpectator ? <AutoActionManager /> : null}
+            {!iamSpectator ? <ActionsWrapper /> : null}
+            {!iamSpectator ? <MyCards /> : null}
+        </GameCard>
     )
 }