Commit 4de65167 authored by Ategon's avatar Ategon
Browse files

Add sound

parent 59e90677

package-lock.json

+18 −1
Original line number Diff line number Diff line
@@ -10194,6 +10194,11 @@ 
      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",

      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="

    },

    "node_modules/howler": {

      "version": "2.2.4",

      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz",

      "integrity": "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w=="

    },

    "node_modules/html-minifier-terser": {

      "version": "7.2.0",

      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-7.2.0.tgz",
@@ -15506,6 +15511,17 @@ 
        }

      }

    },

    "node_modules/use-sound": {

      "version": "4.0.3",

      "resolved": "https://registry.npmjs.org/use-sound/-/use-sound-4.0.3.tgz",

      "integrity": "sha512-L205pEUFIrLsGYsCUKHQVCt0ajs//YQOFbEQeNwaWaqQj3y3st4SuR+rvpMHLmv8hgTcfUFlvMQawZNI3OE18w==",

      "dependencies": {

        "howler": "^2.1.3"

      },

      "peerDependencies": {

        "react": ">=16.8"

      }

    },

    "node_modules/util-deprecate": {

      "version": "1.0.2",

      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -16285,7 +16301,8 @@ 
        "react-dom": "^18.2.0",

        "react-toastify": "^10.0.5",

        "react-zoom-pan-pinch": "^3.4.1",

        "socket.io-client": "^4.7.4"

        "socket.io-client": "^4.7.4",

        "use-sound": "^4.0.3"

      },

      "devDependencies": {

        "@tsconfig/vite-react": "^3.0.0",

packages/client/package.json

+2 −1
Original line number Diff line number Diff line
@@ -38,7 +38,8 @@ 
    "react-dom": "^18.2.0",

    "react-toastify": "^10.0.5",

    "react-zoom-pan-pinch": "^3.4.1",

    "socket.io-client": "^4.7.4"

    "socket.io-client": "^4.7.4",

    "use-sound": "^4.0.3"

  },

  "devDependencies": {

    "@tsconfig/vite-react": "^3.0.0",

packages/client/src/components/Header/HeaderLeft.tsx

+21 −4
Original line number Diff line number Diff line
@@ -4,15 +4,27 @@ import { AccountStanding } from "./AccountStanding"; 
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { Debug } from "@sc07-canvas/lib/src/debug";

import { faInfoCircle, faTools } from "@fortawesome/free-solid-svg-icons";

import African3 from '../../sounds/African3.mp3'

import useSound from "use-sound";

  

export const HeaderLeft = () => {

  const { setInfoSidebar } = useAppContext();

  const { setInfoSidebar, uiClickSound } = useAppContext();



  const [African3Sound] = useSound(

    African3,

    { volume: 0.5 }

  );



  return (

    <div className="box gap-2 flex">

      <AccountStanding />

      <Button 

        onPress={() => setInfoSidebar(true)}

        onPress={() => {

          setInfoSidebar(true)

          if (uiClickSound) {

            African3Sound()

          }

        }}

        variant="faded"

      >

        <FontAwesomeIcon icon={faInfoCircle} />
@@ -20,7 +32,12 @@ export const HeaderLeft = () => { 
      </Button>

      {import.meta.env.DEV && (

        <Button 

          onPress={() => Debug.openDebugTools()}

          onPress={() => {

            Debug.openDebugTools()

            if (uiClickSound) {

              African3Sound()

            }

          }}

          variant="faded"

        >

          <FontAwesomeIcon icon={faTools} />

packages/client/src/components/Header/HeaderRight.tsx

+14 −2
Original line number Diff line number Diff line
@@ -5,6 +5,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 
import { ThemeSwitcher } from "./ThemeSwitcher";

import { faGear, faHammer } from "@fortawesome/free-solid-svg-icons";

import React, { lazy } from "react";

import African3 from '../../sounds/African3.mp3'

import useSound from "use-sound";



const OpenChatButton = lazy(() => import("../Chat/OpenChatButton"));
@@ -15,14 +17,24 @@ const DynamicChat = () => { 
};



export const HeaderRight = () => {

  const { setSettingsSidebar, hasAdmin } = useAppContext();

  const { setSettingsSidebar, hasAdmin, uiClickSound } = useAppContext();

  

  const [African3Sound] = useSound(

    African3,

    { volume: 0.5 }

  );



  return (

    <div className="box flex flex-col gap-2">

      <User />

      <div className="flex gap-2">

        <Button 

          onClick={() => setSettingsSidebar(true)}

          onClick={() => {

            setSettingsSidebar(true)

            if (uiClickSound) {

              African3Sound()

            }

          }}

          variant="faded"

        >

          <FontAwesomeIcon icon={faGear} />

packages/client/src/components/Header/ThemeSwitcher.tsx

+15 −1
Original line number Diff line number Diff line
@@ -4,11 +4,20 @@ import { Classic } from "@theme-toggles/react" 
import {useTheme} from "next-themes";

import { useEffect, useState } from "react";

import { Button } from "@nextui-org/react";

import African3 from '../../sounds/African3.mp3'

import useSound from "use-sound";

import { useAppContext } from "../../contexts/AppContext";



export function ThemeSwitcher() {

  const [mounted, setMounted] = useState(false)

  const { theme, setTheme } = useTheme()

  const [isToggled, setToggle] = useState(false)

  const {uiClickSound} = useAppContext();



  const [African3Sound] = useSound(

    African3,

    { volume: 0.5 }

  );



  useEffect(() => {

    setMounted(true)
@@ -26,7 +35,12 @@ export function ThemeSwitcher() { 
  if(!mounted) return null



  return (

    <Button onClick={() => { setToggle(!isToggled) }} variant="faded">

    <Button onClick={() => { 

      setToggle(!isToggled) 

      if (uiClickSound) {

        African3Sound()

      }

      }} variant="faded">

      <Classic toggled={isToggled} placeholder={undefined} />

      <p>{theme === 'dark' ? "Dark" : "Light"}</p>

    </Button>