add music

realm-of-ra · May 13, 2024 · e3d22de · e3d22de
1 parent 3e5351f
commit e3d22de
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 21 deletions.
diff --git a/client/package.json b/client/package.json
@@ -34,6 +34,7 @@
     "framer-motion": "^11.1.9",
     "graphql": "^16.7.1",
     "graphql-request": "^6.1.0",
+    "jotai": "^2.8.0",
     "lucide-react": "^0.367.0",
     "mobx": "^6.9.0",
     "proxy-deep": "^3.1.1",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -3,14 +3,17 @@ import React from "react"
 import { BrowserRouter, Routes, Route } from "react-router-dom"
 import Home from "./pages/Home"
 import Leaderboard from "./pages/Leaderboard"
+import { Provider as JotaiProvider } from "jotai";
 
 export default function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route index element={<Home />} />
-        <Route path="/leaderboard" element={<Leaderboard />} />
-      </Routes>
-    </BrowserRouter>
+    <JotaiProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route index element={<Home />} />
+          <Route path="/leaderboard" element={<Leaderboard />} />
+        </Routes>
+      </BrowserRouter>
+    </JotaiProvider>
   )
 }
diff --git a/client/src/atom/atoms.ts b/client/src/atom/atoms.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai'
+
+export const isPlaying = atom(false)
diff --git a/client/src/music/audio_1.mp3 b/client/src/music/audio_1.mp3
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@material-tailwind/react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
     Accordion,
     AccordionHeader,
@@ -19,10 +19,30 @@ import { PaperAirplaneIcon } from "@heroicons/react/24/solid";
 import { motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import { animate, chat, initialSeeds, players } from '@/lib/constants';
-import React from 'react';
+import { isPlaying as isPlayingAtom } from "../atom/atoms";
+import { useAtom } from "jotai";
+import audio from "../music/audio_1.mp3";
 
 export default function Home() {
 
+    const [isPlaying, setPlaying] = useAtom(isPlayingAtom);
+    const audioRef = useRef(new Audio(audio));
+    useEffect(() => {
+        if (isPlaying) {
+            try {
+                audioRef.current.play();
+                audioRef.current.loop = true;
+            } catch (error) {
+                console.error("Error playing the audio", error);
+            }
+        } else {
+            audioRef.current.pause();
+        }
+        return () => {
+            audioRef.current.pause();
+        };
+    }, [isPlaying]);
+
     function Icon({ id, open }: { id: number, open: number }) {
         return (
             <svg
@@ -38,14 +58,12 @@ export default function Home() {
         );
     }
 
-    const [mute, setMute] = useState(true);
-
     const [open, setOpen] = useState(0);
 
     const handleOpen = (value: number) => setOpen(open === value ? 0 : value);
 
-    const toggleMute = () => {
-        setMute(!mute);
+    const togglePlay = () => {
+        setPlaying(!isPlaying);
     }
 
     const [seeds, setSeeds] = useState(initialSeeds);
@@ -258,8 +276,8 @@ export default function Home() {
                     {/* End of game board */}
                     <div className='flex flex-row items-start justify-between mt-10'>
                         <div className="flex flex-row space-x-1.5 items-center justify-center ml-14 3xl:ml-28 4xl:ml-14">
-                            <Button className='p-0 bg-transparent rounded-full' onClick={toggleMute}>
-                                <img src={mute ? muteImage : unmuteImage} width={65} height={65} alt="restart" className='rounded-full' />
+                            <Button className='p-0 bg-transparent rounded-full' onClick={togglePlay}>
+                                <img src={isPlaying ? unmuteImage : muteImage} width={65} height={65} alt="restart" className='rounded-full' />
                             </Button>
                             <div className='ml-2.5'>
                                 <h4 className="text-lg text-left text-[#9398A2]">Enya</h4>

diff --git a/client/src/pages/Leaderboard.tsx b/client/src/pages/Leaderboard.tsx
@@ -1,5 +1,5 @@
 
-import React from "react";
+import React, { useEffect, useRef } from "react";
 
 import { Button } from "@material-tailwind/react";
 import eniola from "../assets/eniola.png";
@@ -11,14 +11,13 @@ import { truncateString } from "../lib/utils";
 import { Card, Typography } from "@material-tailwind/react";
 import clsx from "clsx";
 import { stats, table_head } from "@/lib/constants";
+import { useAtom } from "jotai";
+import { isPlaying as isPlayingAtom } from "../atom/atoms";
+import audio from "../music/audio_1.mp3";
 
 export default function Leaderboard() {
-    const [mute, setMute] = useState(true);
     const [connection, setConnection] = useState<ConnectedStarknetWindowObject>();
     const [address, setAddress] = useState<string>();
-    const toggleMute = () => {
-        setMute(!mute);
-    }
     const connectWallet = async () => {
         await connect({ modalMode: "neverAsk" })
         const { wallet } = await connect({ modalMode: "canAsk" })
@@ -32,6 +31,26 @@ export default function Leaderboard() {
         setConnection(undefined);
         setAddress('');
     }
+    const [isPlaying, setPlaying] = useAtom(isPlayingAtom);
+    const audioRef = useRef(new Audio(audio));
+    useEffect(() => {
+        if (isPlaying) {
+            try {
+                audioRef.current.play();
+                audioRef.current.loop = true;
+            } catch (error) {
+                console.error("Error playing the audio", error);
+            }
+        } else {
+            audioRef.current.pause();
+        }
+        return () => {
+            audioRef.current.pause();
+        };
+    }, [isPlaying]);
+    const togglePlay = () => {
+        setPlaying(!isPlaying);
+    }
     return (
         <div className="bg-[#0F1116] min-h-screen h-full w-full flex flex-col items-center">
             <nav className="flex flex-row items-center justify-between w-full">
@@ -54,8 +73,8 @@ export default function Leaderboard() {
                 </div>
                 <div className="flex-1 w-full -ml-16">
                     <div className="flex flex-row space-x-2.5 items-center justify-start">
-                        <Button className='p-0 bg-transparent rounded-full' onClick={toggleMute}>
-                            <img src={mute ? muteImage : unmuteImage} width={65} height={65} alt="restart" className='rounded-full' />
+                        <Button className='p-0 bg-transparent rounded-full' onClick={togglePlay}>
+                            <img src={isPlaying ? unmuteImage : muteImage} width={65} height={65} alt="restart" className='rounded-full' />
                         </Button>
                         {
                             connection?.isConnected ? <Button className="p-0" onClick={disconnectWallet}>

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -5109,6 +5109,11 @@ jose@^5.0.0:
   resolved "https://registry.yarnpkg.com/jose/-/jose-5.2.4.tgz#c0d296caeeed0b8444a8b8c3b68403d61aa4ed72"
   integrity sha512-6ScbIk2WWCeXkmzF6bRPmEuaqy1m8SbsRFMa/FLrSCkGIhj8OLVG/IH+XHVmNMx/KUo8cVWEE6oKR4dJ+S0Rkg==
 
+jotai@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/jotai/-/jotai-2.8.0.tgz#5a6585cd5576c400c2c5f8e157b83ad2ba70b2ab"
+  integrity sha512-yZNMC36FdLOksOr8qga0yLf14miCJlEThlp5DeFJNnqzm2+ZG7wLcJzoOyij5K6U6Xlc5ljQqPDlJRgqW0Y18g==
+
 js-cookie@^3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"