add sound to leaderboard page

client/src/hooks/useLeaderboard.ts

@@ -8,6 +8,7 @@
  * Contributors:
  *     IBM Corporation - initial API and implementation
  *******************************************************************************/
+import { useMemo } from "react";
 import axios from "axios";
 import { useQuery } from "react-query";
 import { leaderboardURL } from "lib/config";
@@ -29,8 +30,22 @@ const getLeaderboard = async () => {
   return data;
 };
 
-const useLeaderboard = () => {
-  return useQuery("leaderboard", getLeaderboard);
+const useLeaderboard = (player: string | null) => {
+  const { data: leaderboard, ...rest } = useQuery("leaderboard", getLeaderboard);
+
+  const placement = useMemo(() => {
+    if (player) {
+      return leaderboard
+        ?.filter((entry) => entry.player === player)
+        .sort((a, b) => Number(b.timestamp) - Number(a.timestamp))[0];
+    }
+  }, [leaderboard, player]);
+
+  return {
+    leaderboard,
+    placement,
+    ...rest,
+  };
 };
 
 export default useLeaderboard;

client/src/pages/LeaderboardPage.tsx

@@ -8,24 +8,46 @@
  * Contributors:
  *     IBM Corporation - initial API and implementation
  *******************************************************************************/
-import React from "react";
+import React, { useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
+import useSound from "use-sound";
+import highscoreSoundFile from "assets/sounds/highscore.wav";
+import successSoundFile from "assets/sounds/success.mp3";
+import failureSoundFile from "assets/sounds/failure.wav";
 import useLeaderboard from "hooks/useLeaderboard";
 import PlacementDisplay from "components/PlacementDisplay";
 import LeaderboardTable from "components/LeaderboardTable";
+import { gameDurationSeconds } from "lib/config";
 
 const LeaderboardPage = () => {
   const [searchParams] = useSearchParams();
   const player = searchParams.get("player");
 
-  const { data: leaderboard } = useLeaderboard();
+  const { leaderboard, placement } = useLeaderboard(player);
 
-  let placement;
-  if (player && leaderboard) {
-    placement = leaderboard
-      .filter((entry) => entry.player === player)
-      .sort((a, b) => Number(b.timestamp) - Number(a.timestamp))[0];
-  }
+  const [playHighscore] = useSound(highscoreSoundFile, {
+    volume: 0.25,
+  });
+  const [playSuccess] = useSound(successSoundFile);
+  const [playFailure] = useSound(failureSoundFile);
+
+  useEffect(() => {
+    if (!placement || !playHighscore || !playSuccess || !playFailure) {
+      return;
+    }
+
+    const { health, time, rank } = placement;
+
+    if (health > 0 && time < gameDurationSeconds) {
+      if (rank <= 5) {
+        playHighscore();
+      } else {
+        playSuccess();
+      }
+    } else {
+      playFailure();
+    }
+  }, [placement, playHighscore, playSuccess, playFailure]);
 
   return (
     <div className="container mx-auto">