Merge pull request #169 from daithihearn/enhancements

Filtering out players that haven't played in 3 months

package.json

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

src/caches/MyCardsSlice.ts

@@ -32,6 +32,11 @@ export const myCardsSlice = createSlice({
             const idx = state.cards.findIndex(c => c.name === action.payload)
             if (idx > 0) state.cards[idx] = { ...BLANK_CARD, selected: false }
         },
+        selectCard: (state, action: PayloadAction<SelectableCard>) => {
+            state.cards.forEach(c => {
+                if (c.name === action.payload.name) c.selected = true
+            })
+        },
         toggleSelect: (state, action: PayloadAction<SelectableCard>) =>
             state.cards.forEach(c => {
                 if (c.name === action.payload.name) c.selected = !c.selected
@@ -61,6 +66,7 @@ export const {
     removeCard,
     clearSelectedCards,
     selectAll,
+    selectCard,
     toggleSelect,
     toggleUniqueSelect,
     clearMyCards,

src/components/Game/MyCards.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react"
+import React, { useCallback, useEffect, useMemo, useRef } from "react"
 import {
     DragDropContext,
     Draggable,
@@ -13,6 +13,7 @@ import {
     clearSelectedCards,
     getMyCards,
     replaceMyCards,
+    selectCard,
     toggleSelect,
     toggleUniqueSelect,
 } from "caches/MyCardsSlice"
@@ -31,6 +32,14 @@ const EMPTY_HAND = [
     { ...BLANK_CARD, selected: false },
 ]
 
+const usePrevious = (value: any) => {
+    const ref = useRef()
+    useEffect(() => {
+        ref.current = value
+    })
+    return ref.current
+}
+
 const MyCards: React.FC = () => {
     const theme = useTheme()
     const dispatch = useAppDispatch()
@@ -39,6 +48,28 @@ const MyCards: React.FC = () => {
     const myCards = useAppSelector(getMyCards)
     const autoPlayCard = useAppSelector(getAutoPlayCard)
     const iamGoer = useAppSelector(getIamGoer)
+    const prevRoundStatus = usePrevious(round?.status)
+
+    useEffect(() => {
+        if (
+            round?.status === RoundStatus.BUYING &&
+            prevRoundStatus !== RoundStatus.BUYING &&
+            !iamGoer &&
+            round.suit
+        ) {
+            // Auto select all cards of a specific suit when the round status is BUYING
+
+            const cardsOfSuit = myCards.filter(
+                card =>
+                    card.suit === round.suit ||
+                    card.name === "JOKER" ||
+                    card.name === "ACE_HEARTS",
+            )
+            cardsOfSuit.forEach(card => {
+                dispatch(selectCard(card))
+            })
+        }
+    }, [round, myCards, prevRoundStatus, iamGoer])
 
     const cardsSelectable = useMemo(
         () =>

src/components/StartNewGame/StartNewGame.tsx

@@ -43,11 +43,19 @@ const StartNewGame = () => {
     const orderedPlayers = useMemo(() => {
         if (!allPlayers || allPlayers.length < 1) return []
         // Sort by last lastAccess which is a string timestamp in the form 1970-01-01T00:00:00
-        return [...allPlayers].sort((a, b) => {
-            const aDate = new Date(a.lastAccess)
-            const bDate = new Date(b.lastAccess)
-            return bDate.getTime() - aDate.getTime()
-        })
+        return [...allPlayers]
+            .filter(p => {
+                // Filter out players that have not played in the last 3 months
+                const lastAccess = new Date(p.lastAccess)
+                const threeMonthsAgo = new Date()
+                threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3)
+                return lastAccess.getTime() > threeMonthsAgo.getTime()
+            })
+            .sort((a, b) => {
+                const aDate = new Date(a.lastAccess)
+                const bDate = new Date(b.lastAccess)
+                return bDate.getTime() - aDate.getTime()
+            })
     }, [allPlayers])
 
     const togglePlayer = useCallback(
@@ -80,7 +88,7 @@ const StartNewGame = () => {
             }
 
             const payload = {
-                players: selectedPlayers.map(p => p.id!),
+                players: selectedPlayers.map(p => p.id),
                 name: newGameName,
             }
 
@@ -181,11 +189,34 @@ const StartNewGame = () => {
                                                 }}>
                                                 <TableCell>
                                                     <div>
-                                                        <img
-                                                            alt="Image Preview"
-                                                            src={player.picture}
-                                                            className="avatar-large"
-                                                        />
+                                                        <Grid container>
+                                                            <Grid
+                                                                item
+                                                                xs={12}
+                                                                sx={{
+                                                                    textAlign:
+                                                                        "center",
+                                                                }}>
+                                                                <img
+                                                                    alt="Image Preview"
+                                                                    src={
+                                                                        player.picture
+                                                                    }
+                                                                    className="avatar-large"
+                                                                />
+                                                            </Grid>
+                                                            <Grid
+                                                                item
+                                                                xs={12}
+                                                                sx={{
+                                                                    textAlign:
+                                                                        "center",
+                                                                }}>
+                                                                {FormatName(
+                                                                    player.name,
+                                                                )}
+                                                            </Grid>
+                                                        </Grid>
                                                     </div>
                                                 </TableCell>
                                                 <TableCell>