From a30d0008c652c93cbcac0bfedf07f2ff60248d68 Mon Sep 17 00:00:00 2001
From: Daithi Hearn <daithi.hearn@gmail.com>
Date: Sat, 14 Jan 2023 20:16:22 +0100
Subject: [PATCH] Minor enhancements Adding sounds back in (currently not
 working) Moving play button to the left Adding pull to refresh

---
 package.json                             |  2 +
 src/components/Game/WebsocketManager.tsx | 57 +++++++++++-------------
 src/components/MyGames/MyGames.tsx       | 27 +++++------
 src/pages/Game/Game.tsx                  | 14 ++++--
 src/pages/Home/Home.tsx                  | 27 +++++++++--
 5 files changed, 75 insertions(+), 52 deletions(-)

diff --git a/package.json b/package.json
index e61422c..3f5679c 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "react-router": "^6.6.2",
     "react-router-config": "^5.1.1",
     "react-router-dom": "^6.6.2",
+    "react-simple-pull-to-refresh": "^1.3.3",
     "react-stomp-hooks": "2.1.0",
     "react-viewer": "^3.2.2",
     "reactstrap": "9.1.5",
@@ -51,6 +52,7 @@
     "simple-line-icons": "^2.5.5",
     "styled-components": "^5.2.3",
     "typescript": "^4.9.4",
+    "use-sound": "^4.0.1",
     "uuid-random": "^1.3.2"
   },
   "devDependencies": {
diff --git a/src/components/Game/WebsocketManager.tsx b/src/components/Game/WebsocketManager.tsx
index 1ffad72..983c038 100644
--- a/src/components/Game/WebsocketManager.tsx
+++ b/src/components/Game/WebsocketManager.tsx
@@ -10,34 +10,7 @@ import { Actions, BuyCardsEvent } from "../../model/Events"
 import { useSnackbar } from "notistack"
 import { clearSelectedCards, updateMyCards } from "../../caches/MyCardsSlice"
 import { clearAutoPlay } from "../../caches/AutoPlaySlice"
-
-// const shuffleSound = new Audio("../../assets/sounds/shuffle.ogg")
-// const playCardSound = new Audio("../../assets/sounds/play_card.ogg")
-// const alertSound = new Audio("../../assets/sounds/alert.ogg")
-// const callSound = new Audio("../../assets/sounds/call.ogg")
-// const passSound = new Audio("../../assets/sounds/pass.ogg")
-
-// const playShuffleSound = () => {
-//   shuffleSound.play().catch(() => console.error("Error playing shuffle sound!"))
-// }
-
-// const playPlayCardSound = () => {
-//   playCardSound
-//     .play()
-//     .catch(() => console.error("Error playing play card sound!"))
-// }
-
-// const playAlertSound = () => {
-//   alertSound.play().catch(() => console.error("Error playing alert sound!"))
-// }
-
-// const playCallSound = () => {
-//   callSound.play().catch(() => console.error("Error playing call sound!"))
-// }
-
-// const playPassSound = () => {
-//   passSound.play().catch(() => console.error("Error playing pass sound!"))
-// }
+import useSound from "use-sound"
 
 interface ActionEvent {
   type: Actions
@@ -47,6 +20,26 @@ interface ActionEvent {
 const WebsocketHandler = () => {
   const dispatch = useAppDispatch()
 
+  const [shuffleSound] = useSound("../../assets/sounds/shuffle.ogg", {
+    volume: 0.25,
+  })
+
+  const [playCardSound] = useSound("../../assets/sounds/play_card.ogg", {
+    volume: 0.25,
+  })
+
+  // const [alertSound] = useSound("../../assets/sounds/alert.ogg", {
+  //   volume: 0.25,
+  // })
+
+  const [callSound] = useSound("../../assets/sounds/call.ogg", {
+    volume: 0.25,
+  })
+
+  const [passSound] = useSound("../../assets/sounds/pass.ogg", {
+    volume: 0.25,
+  })
+
   const playerProfiles = useAppSelector(getPlayerProfiles)
   const { enqueueSnackbar } = useSnackbar()
 
@@ -88,14 +81,14 @@ const WebsocketHandler = () => {
     (type: Actions, payload: unknown) => {
       switch (type) {
         case "DEAL":
-          // playShuffleSound()
+          shuffleSound()
           reloadCards(payload)
           break
         case "CHOOSE_FROM_DUMMY":
         case "BUY_CARDS":
         case "LAST_CARD_PLAYED":
         case "CARD_PLAYED":
-          // playPlayCardSound()
+          playCardSound()
           reloadCards(payload)
           break
         case "REPLAY":
@@ -120,11 +113,11 @@ const WebsocketHandler = () => {
           reloadCards(payload)
           break
         case "CALL":
-          // playCallSound()
+          callSound()
           reloadCards(payload)
           break
         case "PASS":
-          // playPassSound()
+          passSound()
           reloadCards(payload)
           break
       }
diff --git a/src/components/MyGames/MyGames.tsx b/src/components/MyGames/MyGames.tsx
index 846afa8..88f22a2 100644
--- a/src/components/MyGames/MyGames.tsx
+++ b/src/components/MyGames/MyGames.tsx
@@ -86,6 +86,19 @@ const MyGames = () => {
   }
 
   const columns: TableColumn<Game>[] = [
+    {
+      cell: (row) => (
+        <Link to={`/game/${row.id}`}>
+          <Button
+            type="button"
+            color={parsePlayButtonColour(row, myProfile.id!)}
+          >
+            {parsePlayButtonLabel(row, myProfile.id!)}
+          </Button>
+        </Link>
+      ),
+      center: true,
+    },
     { name: "Name", selector: (row) => row.name, sortable: true },
     {
       name: "Date",
@@ -103,19 +116,7 @@ const MyGames = () => {
       ),
       center: true,
     },
-    {
-      cell: (row) => (
-        <Link to={`/game/${row.id}`}>
-          <Button
-            type="button"
-            color={parsePlayButtonColour(row, myProfile.id!)}
-          >
-            {parsePlayButtonLabel(row, myProfile.id!)}
-          </Button>
-        </Link>
-      ),
-      center: true,
-    },
+
     {
       cell: (row) => (
         <Button
diff --git a/src/pages/Game/Game.tsx b/src/pages/Game/Game.tsx
index 12995f0..e56faf3 100644
--- a/src/pages/Game/Game.tsx
+++ b/src/pages/Game/Game.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect } from "react"
+import React, { useCallback, useEffect } from "react"
 import GameWrapper from "../../components/Game/GameWrapper"
 import GameOver from "../../components/Game/GameOver"
 import GameService from "../../services/GameService"
+import PullToRefresh from "react-simple-pull-to-refresh"
 
 import { withAuthenticationRequired } from "@auth0/auth0-react"
 
@@ -34,8 +35,15 @@ const Game = () => {
     }
   }, [id])
 
+  const handleRefresh = useCallback(async () => {
+    if (id)
+      await dispatch(GameService.refreshGameState(id)).catch((e: Error) =>
+        enqueueSnackbar(e.message, { variant: "error" })
+      )
+  }, [id])
+
   return (
-    <>
+    <PullToRefresh onRefresh={handleRefresh}>
       <div className="app carpet">
         <div className="game_wrap">
           <div className="game_container">
@@ -44,7 +52,7 @@ const Game = () => {
           </div>
         </div>
       </div>
-    </>
+    </PullToRefresh>
   )
 }
 
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 37bb0eb..9da3a4b 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useCallback } from "react"
 
 import { Card, CardGroup, CardHeader } from "reactstrap"
 
@@ -7,15 +7,34 @@ import StartNewGame from "../../components/StartNewGame/StartNewGame"
 import MyGames from "../../components/MyGames/MyGames"
 import GameStats from "../../components/GameStats/GameStats"
 import { withAuthenticationRequired } from "@auth0/auth0-react"
+import PullToRefresh from "react-simple-pull-to-refresh"
 
-import { useAppSelector } from "../../caches/hooks"
+import { useAppDispatch, useAppSelector } from "../../caches/hooks"
 import { getMyProfile } from "../../caches/MyProfileSlice"
+import GameService from "../../services/GameService"
+import { useSnackbar } from "notistack"
+import StatsService from "../../services/StatsService"
 
 const Home = () => {
+  const dispatch = useAppDispatch()
   const myProfile = useAppSelector(getMyProfile)
+  const { enqueueSnackbar } = useSnackbar()
+
+  const handleRefresh = useCallback(async () => {
+    if (myProfile.isAdmin)
+      dispatch(GameService.getAllPlayers()).catch((e: Error) =>
+        enqueueSnackbar(e.message, { variant: "error" })
+      )
+
+    dispatch(GameService.getAll())
+
+    dispatch(StatsService.gameStatsForPlayer()).catch((e: Error) =>
+      enqueueSnackbar(e.message, { variant: "error" })
+    )
+  }, [])
 
   return (
-    <>
+    <PullToRefresh onRefresh={handleRefresh}>
       <div className="app carpet">
         <DataLoader />
         <div className="game_wrap">
@@ -47,7 +66,7 @@ const Home = () => {
           </div>
         </div>
       </div>
-    </>
+    </PullToRefresh>
   )
 }