From c3604fd64967544e12966e9fb7f8458edc68db8b Mon Sep 17 00:00:00 2001
From: Daithi Hearn <daithi.hearn@gmail.com>
Date: Thu, 19 Jan 2023 01:02:56 +0100
Subject: [PATCH] More autoplay fixes

---
 src/components/Game/WebsocketManager.tsx      |  24 ++--
 .../Leaderboard/SinglesLeaderboard.tsx        | 107 ++++++++++--------
 2 files changed, 71 insertions(+), 60 deletions(-)

diff --git a/src/components/Game/WebsocketManager.tsx b/src/components/Game/WebsocketManager.tsx
index 0b81b1b..48b6a6f 100644
--- a/src/components/Game/WebsocketManager.tsx
+++ b/src/components/Game/WebsocketManager.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from "react"
 
 import { StompSessionProvider, useSubscription } from "react-stomp-hooks"
 import { useAppDispatch, useAppSelector } from "../../caches/hooks"
-import { getGameId, updateGame } from "../../caches/GameSlice"
+import { getGameId, getIsMyGo, updateGame } from "../../caches/GameSlice"
 import { getAccessToken } from "../../caches/MyProfileSlice"
 import { getPlayerProfiles } from "../../caches/PlayerProfilesSlice"
 import { GameState } from "../../model/Game"
@@ -51,6 +51,7 @@ const WebsocketHandler = () => {
     const dispatch = useAppDispatch()
 
     const [autoActionEnabled, setAutoActionEnabled] = useState(false)
+    const isMyGo = useAppSelector(getIsMyGo)
     const playerProfiles = useAppSelector(getPlayerProfiles)
     const { enqueueSnackbar } = useSnackbar()
 
@@ -60,7 +61,7 @@ const WebsocketHandler = () => {
     useEffect(() => {
         setTimeout(() => {
             if (!autoActionEnabled) setAutoActionEnabled(true)
-        }, 4000)
+        }, 2000)
     }, [autoActionEnabled])
 
     const handleWebsocketMessage = useCallback(
@@ -93,10 +94,13 @@ const WebsocketHandler = () => {
         if (!autoActionEnabled) setAutoActionEnabled(true)
     }
 
-    const reloadCards = (payload: unknown) => {
-        dispatch(clearSelectedCards())
-        dispatch(clearAutoPlay())
+    const reloadCards = (payload: unknown, clearSelected = false) => {
         const gameState = payload as GameState
+
+        if (clearSelected) {
+            dispatch(clearSelectedCards())
+            dispatch(clearAutoPlay())
+        }
         dispatch(updateMyCards(gameState.cards))
     }
 
@@ -105,14 +109,14 @@ const WebsocketHandler = () => {
             switch (type) {
                 case "DEAL":
                     shuffleSound()
-                    reloadCards(payload)
+                    reloadCards(payload, true)
                     break
                 case "CHOOSE_FROM_DUMMY":
                 case "BUY_CARDS":
                 case "LAST_CARD_PLAYED":
                 case "CARD_PLAYED":
                     playCardSound()
-                    reloadCards(payload)
+                    reloadCards(payload, isMyGo)
                     break
                 case "REPLAY":
                     break
@@ -139,15 +143,15 @@ const WebsocketHandler = () => {
                     break
                 case "CALL":
                     callSound()
-                    reloadCards(payload)
+                    reloadCards(payload, true)
                     break
                 case "PASS":
                     passSound()
-                    reloadCards(payload)
+                    reloadCards(payload, true)
                     break
             }
         },
-        [playerProfiles],
+        [playerProfiles, isMyGo],
     )
 
     useSubscription(["/game", "/user/game"], message =>
diff --git a/src/components/Leaderboard/SinglesLeaderboard.tsx b/src/components/Leaderboard/SinglesLeaderboard.tsx
index 3c61faa..599e204 100644
--- a/src/components/Leaderboard/SinglesLeaderboard.tsx
+++ b/src/components/Leaderboard/SinglesLeaderboard.tsx
@@ -62,56 +62,63 @@ const SinglesLeaderboard = () => {
         return leaderboardData
     }, [playerProfiles, game, getProfile, previousHand])
 
-    const columns: TableColumn<LeaderboardItem>[] = [
-        {
-            name: "Avatar",
-            cell: row => (
-                <img alt="Image Preview" src={row.picture} className="avatar" />
-            ),
-        },
-        { name: "Player", selector: row => row.name, sortable: true },
-        {
-            name: "Score",
-            selector: row => row.score,
-            sortable: true,
-            center: true,
-        },
-        {
-            name: "Rings",
-            selector: row => row.rings,
-            sortable: true,
-            center: true,
-        },
-        {
-            name: "Bought",
-            selector: row => row.cardsBought,
-            sortable: true,
-            center: true,
-            omit: gameOver,
-        },
-        {
-            cell: row => (
-                <div>
-                    {row.winner ? (
-                        <img src={TrophyImage} width="50px" height="50px" />
-                    ) : null}
-                </div>
-            ),
-            center: true,
-            omit: !gameOver,
-        },
-        {
-            cell: row => (
-                <img
-                    alt={row.previousCard}
-                    src={"/cards/thumbnails/" + row.previousCard + ".png"}
-                    className="thumbnail_size_small cardNotSelected"
-                />
-            ),
-            center: true,
-            omit: gameOver || !previousHand,
-        },
-    ]
+    const columns: TableColumn<LeaderboardItem>[] = useMemo(
+        () => [
+            {
+                name: "Avatar",
+                cell: row => (
+                    <img
+                        alt="Image Preview"
+                        src={row.picture}
+                        className="avatar"
+                    />
+                ),
+            },
+            { name: "Player", selector: row => row.name, sortable: true },
+            {
+                name: "Score",
+                selector: row => row.score,
+                sortable: true,
+                center: true,
+            },
+            {
+                name: "Rings",
+                selector: row => row.rings,
+                sortable: true,
+                center: true,
+            },
+            {
+                name: "Bought",
+                selector: row => row.cardsBought,
+                sortable: true,
+                center: true,
+                omit: gameOver,
+            },
+            {
+                cell: row => (
+                    <div>
+                        {row.winner ? (
+                            <img src={TrophyImage} width="50px" height="50px" />
+                        ) : null}
+                    </div>
+                ),
+                center: true,
+                omit: !gameOver,
+            },
+            {
+                cell: row => (
+                    <img
+                        alt={row.previousCard}
+                        src={"/cards/thumbnails/" + row.previousCard + ".png"}
+                        className="thumbnail_size_small cardNotSelected"
+                    />
+                ),
+                center: true,
+                omit: gameOver || !previousHand,
+            },
+        ],
+        [gameOver, previousHand],
+    )
 
     if (
         !game ||