Merge pull request #202 from daithihearn/go-migration-2

Go migration 2

.github/workflows/publish-to-dockerhub.yml

@@ -22,7 +22,7 @@ jobs:
             - uses: actions/checkout@v3
             - uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 20
             - name: Get version in manifest.json
               id: manifest-version
               uses: notiz-dev/github-action-json-property@release

.github/workflows/unit-tests.yml

@@ -16,11 +16,11 @@ jobs:
             - name: Set up Node.js
               uses: actions/setup-node@v2
               with:
-                  node-version: "16.19.x"
+                  node-version: "20.11.x"
             - name: Install dependencies
               run: yarn install --frozen-lockfile
             - name: Test and coverage
-              run: yarn jest --coverage
+              run: yarn test:coverage
             - name: Sonar Args
               id: sonar-args
               run: |

.gitignore

@@ -10,7 +10,6 @@ node_modules/
 .settings/
 *.bat
 yarn-error.log
-yarn.lock
 prod.env
 
 # testing

.nvmrc

@@ -1 +1 @@
-v18.18.0
+v20.11.0

Dockerfile

@@ -1,5 +1,5 @@
 # build
-FROM node:18.18 AS builder
+FROM node:20.11 AS builder
 
 WORKDIR /app
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "8.0.0",
+    "version": "8.0.1",
     "description": "React frontend for the Cards 110",
     "author": "Daithi Hearn",
     "license": "MIT",
@@ -13,26 +13,26 @@
         "@coreui/react": "4.11.1",
         "@emotion/react": "11.11.3",
         "@emotion/styled": "11.11.0",
-        "@mui/icons-material": "5.15.4",
-        "@mui/material": "5.15.4",
-        "@mui/x-data-grid": "6.18.7",
+        "@mui/icons-material": "5.15.6",
+        "@mui/material": "5.15.6",
+        "@mui/x-data-grid": "6.19.2",
         "@popperjs/core": "2.11.8",
-        "@reduxjs/toolkit": "2.0.1",
+        "@reduxjs/toolkit": "2.1.0",
         "@tanstack/react-query": "^5.17.19",
         "@types/jest": "29.5.11",
-        "@types/node": "20.10.8",
-        "@types/react": "18.2.47",
+        "@types/node": "20.11.10",
+        "@types/react": "18.2.48",
         "@types/react-avatar-editor": "13",
         "@types/react-dom": "18.2.18",
         "@types/react-router-dom": "5.3.3",
-        "axios": "1.6.5",
+        "axios": "1.6.7",
         "bootstrap": "5.3.2",
         "chart.js": "4.4.1",
-        "core-js": "3.35.0",
+        "core-js": "3.35.1",
         "crypto-js": "4.2.0",
         "font-awesome": "4.7.0",
         "heic2any": "0.0.4",
-        "jwt-decode": "3.1.2",
+        "jwt-decode": "3",
         "moment": "2.30.1",
         "notistack": "3.0.1",
         "react": "18.2.0",
@@ -41,11 +41,10 @@
         "react-chartjs-2": "5",
         "react-confetti": "6.1.0",
         "react-dom": "18.2.0",
-        "react-redux": "9.0.4",
-        "react-router": "6.21.1",
+        "react-redux": "9.1.0",
+        "react-router": "6.21.3",
         "react-router-config": "5.1.1",
-        "react-router-dom": "6.21.1",
-        "react-stomp-hooks": "2.2.1",
+        "react-router-dom": "6.21.3",
         "react-viewer": "3.2.2",
         "semantic-ui-css": "2.5.0",
         "simple-line-icons": "2.5.5",
@@ -55,8 +54,8 @@
     },
     "devDependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@tanstack/eslint-plugin-query": "^5.17.20",
-        "@types/crypto-js": "4.2.1",
+        "@tanstack/eslint-plugin-query": "^5.17.22",
+        "@types/crypto-js": "4.2.2",
         "@types/enzyme": "3.10.18",
         "@types/enzyme-adapter-react-16": "1.0.9",
         "@types/react-beautiful-dnd": "13.1.8",
@@ -66,16 +65,17 @@
         "jest-junit": "^16.0.0",
         "node-sass-chokidar": "2.0.0",
         "npm-run-all": "4.1.5",
-        "prettier": "3.1.1",
+        "prettier": "3.2.4",
         "react-scripts": "5.0.1",
-        "ts-jest": "^29.1.1"
+        "ts-jest": "^29.1.2"
     },
     "scripts": {
         "build-css": "node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss",
         "watch-css": "npm run build-css && node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss --watch --recursive",
         "start": "react-scripts start",
         "build": "react-scripts build",
         "test": "react-scripts test --env=jsdom",
+        "test:coverage": "react-scripts test --env=jsdom --coverage --watchAll=false",
         "eject": "react-scripts eject",
         "format": "yarn prettier --write src",
         "format:check": "yarn prettier --check src"

public/manifest.json

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

src/caches/GameSlice.ts

@@ -6,6 +6,7 @@ import { RootState } from "./caches"
 import { processOrderedCardsAfterGameUpdate } from "utils/GameUtils"
 import { Card, EMPTY } from "model/Cards"
 import { determineEvent } from "utils/EventUtils"
+import { Event } from "model/Events"
 
 export const initialGameState: GameState = {
     revision: -1,
@@ -18,6 +19,7 @@ export const initialGameState: GameState = {
     cardsFull: [],
     status: GameStatus.NONE,
     players: [],
+    event: Event.Unknown,
 }
 
 export const gameSlice = createSlice({
@@ -31,12 +33,9 @@ export const gameSlice = createSlice({
                     state.cardsFull,
                     action.payload.cards,
                 ),
+                event: determineEvent(state, action.payload),
             }
 
-            const event = determineEvent(state, updatedGame)
-
-            console.log("event", event)
-
             return updatedGame
         },
         selectCard: (state, action: PayloadAction<Card>) => {
@@ -179,3 +178,4 @@ export const getIsInBunker = createSelector(
 )
 
 export const getRevision = createSelector(getGame, game => game.revision)
+export const getEvent = createSelector(getGame, game => game.event)

src/components/Game/Actions/Buying.tsx

@@ -1,119 +1,43 @@
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useState } from "react"
 
-import { useAppDispatch, useAppSelector } from "caches/hooks"
+import { useAppSelector } from "caches/hooks"
 import {
     getGameId,
-    getNumPlayers,
-    getIamGoer,
-    getIHavePlayed,
     getIsMyGo,
-    getSuit,
-    getCardsWithoutBlanks,
     getSelectedCards,
-    selectAll,
+    getSuit,
 } from "caches/GameSlice"
-import { pickBestCards, riskOfMistakeBuyingCards } from "utils/GameUtils"
 import ThrowCardsWarningModal from "./ThrowCardsWarningModal"
-import { Card, CardName } from "model/Cards"
 import { Button } from "@mui/material"
-import { useSettings } from "components/Hooks/useSettings"
 import { useGameActions } from "components/Hooks/useGameActions"
 
-const WaitingForRoundToStart = () => (
-    <Button variant="contained" disableRipple color="primary">
-        <b>Waiting for round to start...</b>
-    </Button>
-)
-
 const Buying = () => {
-    const dispatch = useAppDispatch()
     const { buyCards } = useGameActions()
-    const { settings } = useSettings()
 
-    const numPlayers = useAppSelector(getNumPlayers)
     const gameId = useAppSelector(getGameId)
     const suit = useAppSelector(getSuit)
-    const myCards = useAppSelector(getCardsWithoutBlanks)
-    const [readyToBuy, setReadyToBuy] = useState(false)
-    const iHavePlayed = useAppSelector(getIHavePlayed)
     const isMyGo = useAppSelector(getIsMyGo)
-    const iamGoer = useAppSelector(getIamGoer)
 
     const [deleteCardsDialog, setDeleteCardsDialog] = useState(false)
 
     const selectedCards = useAppSelector(getSelectedCards)
 
-    const toggleReadyToBuy = useCallback(() => {
-        setReadyToBuy(!readyToBuy)
-    }, [readyToBuy])
-
-    const buyCardsWrapper = useCallback(
-        (sel: CardName[] | Card[]) => {
-            if (!gameId) return
-            buyCards({
-                gameId,
-                cards: sel.map(c => (typeof c === "string" ? c : c.name)),
-            })
-        },
-        [gameId],
-    )
+    const buyCardsWrapper = useCallback(() => {
+        if (!gameId) return
+        buyCards({
+            gameId,
+            cards: selectedCards.map(c => (typeof c === "string" ? c : c.name)),
+        })
+    }, [gameId, selectedCards])
 
     const hideCancelDeleteCardsDialog = useCallback(() => {
         setDeleteCardsDialog(false)
-        setReadyToBuy(false)
     }, [])
 
-    useEffect(() => {
-        if (iamGoer) {
-            dispatch(selectAll())
-            setReadyToBuy(true)
-        }
-    }, [iamGoer])
-
-    useEffect(() => {
-        // 1. If it is not my go then do nothing
-        if (!isMyGo || !suit || !gameId) return
-        // 2. If I am the goer and it is my go then keep all cards
-        else if (iamGoer) {
-            buyCards({ gameId, cards: myCards.map(c => c.name) })
-        }
-        // 3. If I am not the goer and it is my go and I have enabled auto buy cards then keep best cards
-        else if (!iamGoer && settings?.autoBuyCards) {
-            buyCards({
-                gameId,
-                cards: pickBestCards(myCards, suit, numPlayers).map(
-                    c => c.name,
-                ),
-            })
-        }
-        // 4. If I am not the goer and it is my go and I am ready to buy then keep selected cards
-        else if (!iamGoer && readyToBuy) {
-            if (riskOfMistakeBuyingCards(suit, selectedCards, myCards)) {
-                setDeleteCardsDialog(true)
-            } else buyCardsWrapper(selectedCards)
-        }
-    }, [
-        settings,
-        gameId,
-        iamGoer,
-        suit,
-        selectedCards,
-        myCards,
-        isMyGo,
-        numPlayers,
-        readyToBuy,
-    ])
-
-    if (iHavePlayed || settings?.autoBuyCards || iamGoer)
-        return <WaitingForRoundToStart />
     return (
         <>
-            <Button type="button" onClick={toggleReadyToBuy} color="primary">
-                <b>
-                    {isMyGo || !readyToBuy
-                        ? "Keep Cards"
-                        : "Waiting to buy cards..."}
-                </b>
+            <Button type="button" onClick={buyCardsWrapper} color="primary">
+                <b>{isMyGo ? "Keep Cards" : "Waiting to buy cards..."}</b>
             </Button>
 
             {suit && (

src/components/Game/Actions/PlayCard.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useCallback, useMemo, useState } from "react"
 
-import { useAppDispatch, useAppSelector } from "caches/hooks"
+import { useAppSelector } from "caches/hooks"
 import {
     getCardsWithoutBlanks,
     getGameId,
@@ -19,15 +19,12 @@ import {
     SelectChangeEvent,
     useTheme,
 } from "@mui/material"
-import { getCardToPlay, updateCardToPlay } from "caches/PlayCardSlice"
-import { bestCardLead, getBestCard, getWorstCard } from "utils/GameUtils"
-import { CARDS, CardName } from "model/Cards"
+import { CardName } from "model/Cards"
 import { useGameActions } from "components/Hooks/useGameActions"
 
 type AutoPlayState = "off" | "best" | "worst"
 
 const PlayCard = () => {
-    const dispatch = useAppDispatch()
     const theme = useTheme()
     const { playCard } = useGameActions()
     const round = useAppSelector(getRound)
@@ -37,7 +34,6 @@ const PlayCard = () => {
 
     const [autoPlay, setAutoPlay] = useState<AutoPlayState>("off")
     const selectedCards = useAppSelector(getSelectedCards)
-    const cardToPlay = useAppSelector(getCardToPlay)
 
     const handleAutoPlayChange = useCallback(
         (event: SelectChangeEvent<AutoPlayState>) => {

src/components/Game/Actions/SelectSuit.tsx

@@ -59,15 +59,12 @@ const SelectSuit = () => {
         [gameId, selectedCards],
     )
 
-    const selectFromDummyCallback = useCallback(
-        (sel: Card[], suit?: Suit) => {
-            if (!gameId) return
-            if (!suit) throw Error("Must provide a suit")
+    const selectFromDummyCallback = useCallback(() => {
+        if (!gameId) return
+        if (!selectedSuit) throw Error("Must provide a suit")
 
-            selectSuit({ gameId, cards: sel, suit })
-        },
-        [gameId],
-    )
+        selectSuit({ gameId, cards: selectedCards, suit: selectedSuit })
+    }, [gameId, selectedCards, selectedSuit])
 
     const hideCancelSelectFromDummyDialog = useCallback(() => {
         setSelectedSuit(undefined)