Sounds new

web/src/components/HomePage/ModeSelector.tsx

@@ -1,6 +1,7 @@
 import styles from "./ModeSelector.module.css";
 import { useGameContext } from "../../contexts/GameContext";
 import { sendReport } from "../../utils/humbug";
+import { useSound } from "../../hooks/useSound";
 
 const modes = [
   {
@@ -19,7 +20,10 @@ const modes = [
 
 const ModeSelector = () => {
   const { selectedMode, updateContext } = useGameContext();
+
+  const playSound = useSound();
   const handleClick = (modeIdx: number) => {
+    playSound("modeSelector");
     sendReport(`Mode selected: ${modes[modeIdx].title}`, {}, [
       "type:click",
       `click:${modes[modeIdx].title}`,

web/src/components/HomePage/PracticeView.tsx

@@ -3,6 +3,7 @@ import { AtBat, OwnedToken } from "../../types";
 import { useGameContext } from "../../contexts/GameContext";
 import { useRouter } from "next/router";
 import CoachCard from "../practice/CoachCard";
+import { useSound } from "../../hooks/useSound";
 
 const BOTS_ADDRESS = "0xbb1dDc1eB50959c4c59b62F3f6Dbf9CbB6156Bc8";
 const rachel = ["11", "12", "13"];
@@ -33,6 +34,8 @@ export const isCoach = (address: string, id: string): boolean => {
 const PvpView = ({ atBats }: { atBats: AtBat[] }) => {
   const router = useRouter();
   const { updateContext } = useGameContext();
+  const playSound = useSound();
+
   const handlePlay = (atBat: AtBat) => {
     if (atBat.pitcher) {
       const team = pitchers.find((t) => getDefault(t) === atBat.pitcher?.id);
@@ -81,7 +84,10 @@ const PvpView = ({ atBats }: { atBats: AtBat[] }) => {
               return openAtBat.pitcher ? (
                 <CoachCard
                   token={openAtBat.pitcher}
-                  onClick={() => handlePlay(openAtBat)}
+                  onClick={() => {
+                    playSound("batButton");
+                    handlePlay(openAtBat);
+                  }}
                   description={pitcherDescription}
                   isPitcher={true}
                   key={idx}
@@ -105,7 +111,10 @@ const PvpView = ({ atBats }: { atBats: AtBat[] }) => {
               return openAtBat.batter ? (
                 <CoachCard
                   token={openAtBat.batter}
-                  onClick={() => handlePlay(openAtBat)}
+                  onClick={() => {
+                    playSound("pitchButton");
+                    handlePlay(openAtBat);
+                  }}
                   description={batterDescription}
                   isPitcher={false}
                   key={idx}

web/src/components/HomePage/PvpView.tsx

@@ -14,12 +14,15 @@ import useUser from "../../contexts/UserContext";
 import { isCampaignToken } from "../campaign/teams";
 import { isCoach } from "./PracticeView";
 import { sendReport } from "../../utils/humbug";
+import { useSound } from "../../hooks/useSound";
 const views = ["Open", "My games", "Other"];
 
 const PvpView = ({ atBats, tokens }: { atBats: AtBat[]; tokens: OwnedToken[] }) => {
   const { selectedToken } = useGameContext();
   const toast = useMoonToast();
   const { user } = useUser();
+  const playSound = useSound();
+
   const queryClient = useQueryClient();
   const joinSession = useMutation(
     async ({
@@ -113,7 +116,10 @@ const PvpView = ({ atBats, tokens }: { atBats: AtBat[]; tokens: OwnedToken[] })
         {views.map((v, idx) => (
           <div
             className={selectedView === idx ? styles.buttonSelected : styles.button}
-            onClick={() => setSelectedView(idx)}
+            onClick={() => {
+              playSound("viewSelector");
+              setSelectedView(idx);
+            }}
             key={idx}
           >
             {v}
@@ -167,7 +173,10 @@ const PvpView = ({ atBats, tokens }: { atBats: AtBat[]; tokens: OwnedToken[] })
                   <TokenToPlay
                     token={openAtBat.pitcher}
                     isPitcher={true}
-                    onClick={() => handlePlay(openAtBat)}
+                    onClick={() => {
+                      playSound("batButton");
+                      handlePlay(openAtBat);
+                    }}
                     isLoading={
                       joinSession.variables?.sessionID === openAtBat.lastSessionId &&
                       joinSession.isLoading
@@ -195,7 +204,10 @@ const PvpView = ({ atBats, tokens }: { atBats: AtBat[]; tokens: OwnedToken[] })
                   <TokenToPlay
                     token={openAtBat.batter}
                     isPitcher={false}
-                    onClick={() => handlePlay(openAtBat)}
+                    onClick={() => {
+                      playSound("pitchButton");
+                      handlePlay(openAtBat);
+                    }}
                     isLoading={
                       joinSession.variables?.sessionID === openAtBat.lastSessionId &&
                       joinSession.isLoading

web/src/components/LaunchForm.tsx

@@ -9,20 +9,26 @@ import {
 import { useGameContext } from "../contexts/GameContext";
 import router from "next/router";
 import { sendReport } from "../utils/humbug";
+import { useSound } from "../hooks/useSound";
 const buttons = ["PVP", "CAMPAIGN", "PRACTICE"];
 
 const LaunchForm = ({ onClose }: { onClose: () => void }) => {
   const { updateContext } = useGameContext();
+  const playSound = useSound();
+
   const handleClick = (selectedMode: number) => {
+    playSound("launchButton");
     updateContext({ selectedMode });
     onClose();
   };
   const handleDemoClick = () => {
+    playSound("launchButton");
     sendReport("Playing demo", {}, ["type:click", "click:play_demo"]);
     router.push("/atbat");
   };
 
   const handleTrailerClick = () => {
+    playSound("launchButton");
     sendReport("Playing trailer", {}, ["type:click", "click:play_trailer"]);
     window.open(TRAILER_LINK, "_blank", "noopener,noreferrer");
   };

web/src/components/Playing.tsx

@@ -16,12 +16,12 @@ import HomePage from "./HomePage/HomePage";
 import { getAtBats } from "../services/fullcounts";
 import React, { useEffect, useState } from "react";
 import { FULLCOUNT_ASSETS_PATH } from "../constants";
-import { playSound } from "../utils/notifications";
 import { getContracts } from "../utils/getWeb3Contracts";
 import { getMulticallResults } from "../utils/multicall";
 
 import { AbiItem } from "web3-utils";
 import FullcountABIImported from "../web3/abi/FullcountABI.json";
+import { useSound } from "../hooks/useSound";
 const FullcountABI = FullcountABIImported as unknown as AbiItem[];
 
 const Playing = () => {
@@ -37,6 +37,7 @@ const Playing = () => {
     joinedNotification,
   } = useGameContext();
   const { user } = useUser();
+  const playSound = useSound();
 
   const ownedTokens = useQuery<OwnedToken[]>(
     ["owned_tokens", user],
@@ -99,7 +100,7 @@ const Playing = () => {
             result.some((t) => t.address === ts.address && t.id === ts.id && t.progress === "3"),
         )
       ) {
-        playSound("clapping");
+        playSound("stadium");
       }
 
       return result;

web/src/components/TitleScreen.tsx

@@ -12,6 +12,7 @@ import LoadingView from "./HomePage/LoadingView";
 import LaunchForm from "./LaunchForm";
 import MoonstreamLogo2 from "./icons/MoonstreamLogo2";
 import { useGameContext } from "../contexts/GameContext";
+
 const TitleScreen = () => {
   const { user, isLoading } = useUser();
   const [isLogging, setIsLogging] = useState(false); // login or signUp

web/src/components/atbat/AtBatView.tsx

@@ -17,10 +17,10 @@ import ExitIcon from "../icons/ExitIcon";
 import TokenCard from "./TokenCard";
 import ScoreForDesktop from "./ScoreForDesktop";
 import { sendReport } from "../../utils/humbug";
-import { playSound } from "../../utils/notifications";
 import ExitDialog from "./ExitDialog";
 import useUser from "../../contexts/UserContext";
 import { fetchFullcountPlayerTokens } from "../../tokenInterfaces/FullcountPlayerAPI";
+import { useSound } from "../../hooks/useSound";
 
 export const outcomes = [
   "In Progress",
@@ -68,6 +68,7 @@ const AtBatView: React.FC = () => {
   const [isBigView] = useMediaQuery("(min-width: 1024px)");
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { user } = useUser();
+  const playSound = useSound();
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -169,7 +170,7 @@ const AtBatView: React.FC = () => {
       const { gameContract } = getContracts();
       const progress = await gameContract.methods.sessionProgress(currentSessionId).call();
       if (Number(currentSessionProgress.data) === 2 && Number(progress) === 3) {
-        playSound("joinedNotification");
+        playSound("stadium");
       }
       return progress;
     },
@@ -186,6 +187,7 @@ const AtBatView: React.FC = () => {
   };
 
   const handleExitClick = () => {
+    playSound("homeButton");
     if (
       atBatState.data?.atBat.pitches.length === 1 &&
       atBatState.data.atBat.pitches[0].progress == 2

web/src/components/atbat/AtBatView2.tsx

@@ -15,6 +15,7 @@ import { getAtBat, initialAtBatState, selectedToken } from "./OnboardingAPI";
 import { outcomeType, sessionOutcomes } from "./AtBatView";
 import OnboardingCharacter from "./OnboardingCharacter";
 import { useGameContext } from "../../contexts/GameContext";
+import { useSound } from "../../hooks/useSound";
 
 const AtBatView2: React.FC = () => {
   const router = useRouter();
@@ -27,6 +28,7 @@ const AtBatView2: React.FC = () => {
   const [name, setName] = useState("Guest_0420");
   const [image, setImage] = useState(blbImage(7));
   const { updateContext } = useGameContext();
+  const playSound = useSound();
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -104,6 +106,7 @@ const AtBatView2: React.FC = () => {
         <div
           className={styles.homeButton}
           onClick={() => {
+            playSound("homeButton");
             updateContext({ isLaunching: false });
             router.push("/");
           }}

web/src/components/atbat/ExitDialog.tsx

@@ -8,6 +8,7 @@ import { CANT_ABORT_SESSION_MSG } from "../../messages";
 import useMoonToast from "../../hooks/useMoonToast";
 import { useEffect, useRef } from "react";
 import useUser from "../../contexts/UserContext";
+import { useSound } from "../../hooks/useSound";
 
 const ExitDialog = ({
   token,
@@ -21,6 +22,8 @@ const ExitDialog = ({
   const toast = useMoonToast();
   const queryClient = useQueryClient();
   const { user } = useUser();
+  const playSound = useSound();
+
   const updateTokenInCache = (token: Token, sessionId: number) => {
     const currentTokens = queryClient.getQueryData<OwnedToken[]>(["owned_tokens", user]);
     const currentAtBats = queryClient.getQueryData<{ tokens: Token[]; atBats: AtBat[] }>([
@@ -95,9 +98,11 @@ const ExitDialog = ({
   }, []);
 
   const handleCloseClick = () => {
+    playSound("homeButton");
     closeAtBat.mutate({ token, sessionId });
   };
   const handleKeepClick = () => {
+    playSound("homeButton");
     router.push("/");
   };
   return (

web/src/components/atbat/OnboardingCharacter.tsx

@@ -4,6 +4,7 @@ import styles from "../tokens/CreateNewCharacter.module.css";
 import localStyles from "./OnboardingCharacter.module.css";
 import React, { useEffect, useState } from "react";
 import { blbImage } from "../../constants";
+import { useSound } from "../../hooks/useSound";
 const NUMBER_OF_IMAGES = 8;
 const names = [
   "Joe Expo",
@@ -30,6 +31,7 @@ const OnboardingCharacter = ({
 }) => {
   const [name, setName] = useState(names[7]);
   const [imageIndex, setImageIndex] = useState(7);
+  const playSound = useSound();
 
   useEffect(() => {
     setName(names[7]);
@@ -59,7 +61,10 @@ const OnboardingCharacter = ({
               alt={`img${idx}`}
               src={blbImage(idx)}
               className={imageIndex === idx ? styles.selectedImage : styles.image}
-              onClick={() => setImageIndex(idx)}
+              onClick={() => {
+                playSound("imageSelector");
+                setImageIndex(idx);
+              }}
             />
           ))}
         </div>
@@ -68,7 +73,10 @@ const OnboardingCharacter = ({
         <button
           disabled={!name || imageIndex === -1}
           className={!name || imageIndex === -1 ? localStyles.inactiveButton : localStyles.button}
-          onClick={onClose}
+          onClick={() => {
+            playSound("batButton");
+            onClose();
+          }}
         >
           Bat
         </button>

web/src/components/atbat/Outcome2.tsx

@@ -7,6 +7,7 @@ import { FULLCOUNT_ASSETS_PATH } from "../../constants";
 import { useGameContext } from "../../contexts/GameContext";
 import { outcomes, outcomeType } from "./AtBatView";
 import Tip from "./Tip";
+import { useSound } from "../../hooks/useSound";
 
 export const sessionOutcomeType = (
   tokens: Token[],
@@ -43,9 +44,14 @@ const Outcome2 = ({
   showTips?: boolean;
 }) => {
   const { selectedToken } = useGameContext();
+  const playSound = useSound();
+
   useEffect(() => {
-    console.log(sessionStatus);
-  }, [sessionStatus]);
+    if (atBat.outcome !== 0 && forToken) {
+      playSound(outcomeType([forToken], atBat) === "positive" ? "win" : "loss");
+    }
+  }, []);
+
   return (
     <div className={styles.container}>
       <div className={styles.contentWrap}>

web/src/components/atbat/Score.tsx

@@ -7,6 +7,7 @@ import { useState } from "react";
 import ChevronUp from "../icons/ChevronUp";
 import ChevronDown from "../icons/ChevronDown";
 import PitchHistory from "./PitchHistory";
+import { useSound } from "../../hooks/useSound";
 
 const Score = ({
   atBat,
@@ -19,11 +20,18 @@ const Score = ({
 }) => {
   const { secondsPerPhase } = useGameContext();
   const [isHistoryOpen, setIsHistoryOpen] = useState(openHistory);
+  const playSound = useSound();
 
   return (
     <div className={styles.container}>
       {isHistoryOpen && <PitchHistory atBat={atBat} />}
-      <div className={styles.pitches} onClick={() => setIsHistoryOpen(!isHistoryOpen)}>
+      <div
+        className={styles.pitches}
+        onClick={() => {
+          playSound(isHistoryOpen ? "pitchHistoryClose" : "pitchHistoryOpen");
+          setIsHistoryOpen(!isHistoryOpen);
+        }}
+      >
         <div className={styles.pitchNumber}>{`Pitch ${atBat.numberOfSessions}`}</div>
         {isHistoryOpen ? <ChevronUp /> : <ChevronDown />}
       </div>

web/src/components/atbat/ScoreForDesktop.tsx

@@ -7,6 +7,7 @@ import PitchHistory from "./PitchHistory";
 import ChevronUpLarge from "../icons/ChevronUpLarge";
 import ChevronDownLarge from "../icons/ChevronDownLarge";
 import DotsCounterLarge from "../sessions/DotsCounterLarge";
+import { useSound } from "../../hooks/useSound";
 
 const ScoreForDesktop = ({
   atBat,
@@ -19,11 +20,18 @@ const ScoreForDesktop = ({
 }) => {
   const { secondsPerPhase } = useGameContext();
   const [isHistoryOpen, setIsHistoryOpen] = useState(openHistory);
+  const playSound = useSound();
 
   return (
     <div className={styles.container}>
       {isHistoryOpen && <PitchHistory atBat={atBat} />}
-      <div className={styles.pitches} onClick={() => setIsHistoryOpen(!isHistoryOpen)}>
+      <div
+        className={styles.pitches}
+        onClick={() => {
+          playSound(isHistoryOpen ? "pitchHistoryClose" : "pitchHistoryOpen");
+          setIsHistoryOpen(!isHistoryOpen);
+        }}
+      >
         <div className={styles.pitchNumber}>{`Pitch ${atBat.numberOfSessions}`}</div>
         {isHistoryOpen ? <ChevronUpLarge /> : <ChevronDownLarge />}
       </div>