Merge pull request #184 from daithihearn/cards-enum

refactor: using enums for cards

jest.config.js

@@ -0,0 +1,12 @@
+/** @type {import("jest").Config} */
+const { defaults: tsjPreset } = require("ts-jest/presets")
+
+module.exports = {
+    ...tsjPreset,
+    testTimeout: 10000,
+    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+    testMatch: ["**/*.(spec|test).(ts|tsx|js|jsx)"],
+    maxWorkers: 2,
+    workerIdleMemoryLimit: "1GB",
+    reporters: ["default", "jest-junit"],
+}

package.json

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

src/caches/MyCardsSlice.ts

@@ -1,5 +1,5 @@
 import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit"
-import { BLANK_CARD, SelectableCard } from "model/Cards"
+import { CardName, EMPTY, SelectableCard } from "model/Cards"
 import { processOrderedCardsAfterGameUpdate } from "utils/GameUtils"
 import { RootState } from "./caches"
 
@@ -15,7 +15,7 @@ export const myCardsSlice = createSlice({
     name: "myCards",
     initialState: initialState,
     reducers: {
-        updateMyCards: (state, action: PayloadAction<string[]>) => {
+        updateMyCards: (state, action: PayloadAction<CardName[]>) => {
             return {
                 cards: processOrderedCardsAfterGameUpdate(
                     state.cards,
@@ -30,7 +30,7 @@ export const myCardsSlice = createSlice({
         },
         removeCard: (state, action: PayloadAction<string>) => {
             const idx = state.cards.findIndex(c => c.name === action.payload)
-            if (idx > 0) state.cards[idx] = { ...BLANK_CARD, selected: false }
+            if (idx > 0) state.cards[idx] = { ...EMPTY, selected: false }
         },
         selectCard: (state, action: PayloadAction<SelectableCard>) => {
             state.cards.forEach(c => {
@@ -54,7 +54,7 @@ export const myCardsSlice = createSlice({
             }),
         selectAll: state => {
             state.cards.forEach(c => {
-                if (c.name !== BLANK_CARD.name) c.selected = true
+                if (c.name !== EMPTY.name) c.selected = true
             })
         },
         clearSelectedCards: state => {
@@ -82,7 +82,7 @@ export const {
 export const getMyCards = (state: RootState) => state.myCards.cards
 
 export const getMyCardsWithoutBlanks = createSelector(getMyCards, cards =>
-    cards.filter(c => c.name !== BLANK_CARD.name),
+    cards.filter(c => c.name !== EMPTY.name),
 )
 
 export const getSelectedCards = createSelector(getMyCards, cards =>

src/components/Game/Actions/Calling.tsx

@@ -37,7 +37,7 @@ const Calling = () => {
     )
 
     const buttonsEnabled = useMemo(
-        () => round && round.currentHand && cards.length > 0 && isMyGo,
+        () => round?.currentHand && cards.length > 0 && isMyGo,
         [round, cards, isMyGo],
     )
 

src/components/Game/Actions/PlayCard.tsx

@@ -4,7 +4,6 @@ import GameService from "services/GameService"
 import { useAppDispatch, useAppSelector } from "caches/hooks"
 import { getMyCardsWithoutBlanks, getSelectedCards } from "caches/MyCardsSlice"
 import { getGameId, getIsMyGo, getRound } from "caches/GameSlice"
-import { BLANK_CARD } from "model/Cards"
 import parseError from "utils/ErrorUtils"
 import { RoundStatus } from "model/Round"
 import {
@@ -19,6 +18,7 @@ import {
 } from "@mui/material"
 import { getCardToPlay, updateCardToPlay } from "caches/PlayCardSlice"
 import { bestCardLead, getBestCard, getWorstCard } from "utils/GameUtils"
+import { CardName } from "model/Cards"
 
 type AutoPlayState = "off" | "best" | "worst"
 
@@ -74,7 +74,7 @@ const PlayCard = () => {
             round &&
             round.status === RoundStatus.PLAYING &&
             round.completedHands.length +
-                myCards.filter(c => c.name !== BLANK_CARD.name).length ===
+                myCards.filter(c => c.name !== CardName.EMPTY).length ===
                 5,
 
         [isMyGo, round, myCards],
@@ -112,12 +112,10 @@ const PlayCard = () => {
             if (cardToPlay) playCard(cardToPlay)
             else if (autoPlay === "worst" || bestCardLead(round)) {
                 const worstCard = getWorstCard(myCards, round.suit)
-                if (worstCard)
-                    playCard(worstCard.name)
+                if (worstCard) playCard(worstCard.name)
             } else if (autoPlay === "best") {
                 const bestCard = getBestCard(myCards, round.suit)
-                if (bestCard)
-                    playCard(bestCard.name)
+                if (bestCard) playCard(bestCard.name)
             }
         }
     }, [playCard, autoPlay, round, isMyGo, myCards, cardToPlay])

src/components/Game/Actions/SelectSuit.tsx

@@ -8,7 +8,7 @@ import { useSnackbar } from "notistack"
 import { getMyCardsWithoutBlanks, getSelectedCards } from "caches/MyCardsSlice"
 import { removeAllFromHand } from "utils/GameUtils"
 import ThrowCardsWarningModal from "./ThrowCardsWarningModal"
-import { SelectableCard } from "model/Cards"
+import { CardName, SelectableCard } from "model/Cards"
 import parseError from "utils/ErrorUtils"
 import { Button } from "@mui/material"
 
@@ -81,8 +81,8 @@ const SelectSuit = () => {
 
             for (const element of deletingCards) {
                 if (
-                    element.name === "JOKER" ||
-                    element.name === "ACE_HEARTS" ||
+                    element.name === CardName.JOKER ||
+                    element.name === CardName.ACE_HEARTS ||
                     element.suit === suit
                 ) {
                     return true

src/components/Game/MyCards.tsx

@@ -5,7 +5,7 @@ import {
     Droppable,
     DropResult,
 } from "react-beautiful-dnd"
-import { BLANK_CARD, SelectableCard } from "model/Cards"
+import { EMPTY, SelectableCard } from "model/Cards"
 import { RoundStatus } from "model/Round"
 import {
     getGameId,
@@ -32,11 +32,11 @@ import { CardContent, CardMedia, useTheme } from "@mui/material"
 import { pickBestCards } from "utils/GameUtils"
 
 const EMPTY_HAND = [
-    { ...BLANK_CARD, selected: false },
-    { ...BLANK_CARD, selected: false },
-    { ...BLANK_CARD, selected: false },
-    { ...BLANK_CARD, selected: false },
-    { ...BLANK_CARD, selected: false },
+    { ...EMPTY, selected: false },
+    { ...EMPTY, selected: false },
+    { ...EMPTY, selected: false },
+    { ...EMPTY, selected: false },
+    { ...EMPTY, selected: false },
 ]
 
 const usePrevious = (value: any) => {
@@ -94,7 +94,7 @@ const MyCards: React.FC = () => {
             card: SelectableCard,
             event: React.MouseEvent<HTMLImageElement, MouseEvent>,
         ) => {
-            if (!cardsSelectable || card.name === BLANK_CARD.name) {
+            if (!cardsSelectable || card.name === EMPTY.name) {
                 return
             }
 
@@ -153,7 +153,7 @@ const MyCards: React.FC = () => {
         (card: SelectableCard) => {
             let classes = "thumbnail-size"
 
-            if (cardsSelectable && card.name !== BLANK_CARD.name) {
+            if (cardsSelectable && card.name !== EMPTY.name) {
                 if (card.name === autoPlayCard) {
                     classes += " auto-played-" + theme.palette.mode
                 } else if (!card.selected) {
@@ -179,17 +179,15 @@ const MyCards: React.FC = () => {
                                 ref={provided.innerRef}>
                                 {myCards.slice(0, 5).map((card, index) => {
                                     const draggableId = `${card.name}${
-                                        card.name === BLANK_CARD.name
-                                            ? index
-                                            : ""
+                                        card.name === EMPTY.name ? index : ""
                                     }`
                                     return (
                                         <Draggable
                                             key={draggableId}
                                             draggableId={draggableId}
                                             index={index}
                                             isDragDisabled={
-                                                card.name === BLANK_CARD.name
+                                                card.name === EMPTY.name
                                             }>
                                             {provided => (
                                                 <div
@@ -236,17 +234,15 @@ const MyCards: React.FC = () => {
                                     : EMPTY_HAND
                                 ).map((card, index) => {
                                     const draggableId = `${card.name}${
-                                        card.name === BLANK_CARD.name
-                                            ? index
-                                            : ""
+                                        card.name === EMPTY.name ? index : ""
                                     }`
                                     return (
                                         <Draggable
                                             key={draggableId}
                                             draggableId={draggableId}
                                             index={index}
                                             isDragDisabled={
-                                                card.name === BLANK_CARD.name
+                                                card.name === EMPTY.name
                                             }>
                                             {provided => (
                                                 <div

src/components/Game/PlayerCard.tsx

@@ -10,19 +10,18 @@ import {
     Stack,
     Box,
     useTheme,
-    CardHeader,
 } from "@mui/material"
 import { styled } from "@mui/system"
 import { getRound } from "caches/GameSlice"
 import { useAppSelector } from "caches/hooks"
 import { getPlayerProfiles } from "caches/PlayerProfilesSlice"
-import { BLANK_CARD } from "model/Cards"
 import { PlayedCard } from "model/Game"
 import { Player } from "model/Player"
 import Leaderboard from "components/Leaderboard/Leaderboard"
 import { Suit } from "model/Suit"
 import { RoundStatus } from "model/Round"
 import { FormatName } from "utils/FormattingUtils"
+import { CardName } from "model/Cards"
 
 interface PlayerRowI {
     player: Player
@@ -67,7 +66,7 @@ const SuitChip: React.FC<{ isGoer: boolean }> = ({ isGoer }) => {
     const round = useAppSelector(getRound)
 
     const suitChip = useMemo(() => {
-        if (!round || !round.suit) return undefined
+        if (!round?.suit) return undefined
         switch (round.suit) {
             case Suit.CLUBS:
                 return ChipType.Clubs
@@ -181,7 +180,7 @@ const PlayerCard: React.FC<PlayerRowI> = ({ player, className }) => {
                 c => c.playerId === player.id,
             )
         }
-        return { card: BLANK_CARD.name, playerId: player.id }
+        return { card: CardName.EMPTY, playerId: player.id }
     }, [round, player])
 
     const isCurrentPlayer: boolean = useMemo(

src/components/Game/PlayersAndCards.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react"
-import { Grid, CardContent, Container } from "@mui/material"
+import { Grid, CardContent } from "@mui/material"
 import { getGamePlayers } from "caches/GameSlice"
 import { useAppSelector } from "caches/hooks"
 import { Player } from "model/Player"

src/components/Game/WebsocketManager.tsx

@@ -24,6 +24,7 @@ import callAudioFile from "assets/sounds/call.ogg"
 import passAudioFile from "assets/sounds/pass.ogg"
 import AutoActionManager from "./AutoActionManager"
 import { Round } from "model/Round"
+import { CardName } from "model/Cards"
 
 const shuffleAudio = new Audio(shuffleAudioFile)
 const playCardAudio = new Audio(playCardAudioFile)
@@ -95,7 +96,7 @@ const WebsocketHandler = () => {
         [playerProfiles],
     )
 
-    const reloadCards = (cards: string[], clearSelected = false) => {
+    const reloadCards = (cards: CardName[], clearSelected = false) => {
         if (clearSelected) {
             dispatch(clearSelectedCards())
             dispatch(clearAutoPlay())

src/components/GameStats/PlayerSwitcher.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import {
     IconButton,
     ListItemIcon,

src/components/Leaderboard/DoublesLeaderboard.tsx

@@ -5,17 +5,7 @@ import { getGamePlayers, getIsGameActive, getRound } from "caches/GameSlice"
 import { getPlayerProfiles } from "caches/PlayerProfilesSlice"
 import { compareScore, compareTeamIds } from "utils/PlayerUtils"
 import { Player } from "model/Player"
-import {
-    List,
-    ListItem,
-    ListItemIcon,
-    Avatar,
-    ListItemText,
-    ListItemSecondaryAction,
-    Box,
-    Grid,
-    Typography,
-} from "@mui/material"
+import { Box, Grid, Typography } from "@mui/material"
 
 interface LeaderBoardPlayer {
     cardsBought?: number

src/components/Leaderboard/SinglesLeaderboard.tsx

@@ -5,9 +5,10 @@ import { useAppSelector } from "caches/hooks"
 import { getPlayerProfiles } from "caches/PlayerProfilesSlice"
 import { Player } from "model/Player"
 import { Box, Grid, Typography } from "@mui/material"
+import { CardName } from "model/Cards"
 
 interface LeaderboardItem {
-    previousCard?: string
+    previousCard?: CardName
     score: number
     rings: number
     winner: boolean
@@ -59,12 +60,7 @@ const SinglesLeaderboard = () => {
         return leaderboardData.sort((a, b) => b.score - a.score)
     }, [playerProfiles, game, getProfile, previousHand])
 
-    if (
-        !game ||
-        !game.status ||
-        !playerProfiles ||
-        playerProfiles.length === 0
-    ) {
+    if (!game?.status || !playerProfiles || playerProfiles.length === 0) {
         return null
     }