mirror of
https://github.com/mizanxali/uno-online
synced 2024-11-05 10:45:25 +00:00
Added background music
This commit is contained in:
parent
c3360bfbba
commit
e5091107d7
BIN
client/src/assets/sounds/game-bg-music.mp3
Normal file
BIN
client/src/assets/sounds/game-bg-music.mp3
Normal file
Binary file not shown.
@ -6,6 +6,7 @@ import queryString from 'query-string'
|
|||||||
import Spinner from './Spinner'
|
import Spinner from './Spinner'
|
||||||
import useSound from 'use-sound'
|
import useSound from 'use-sound'
|
||||||
|
|
||||||
|
import bgMusic from '../assets/sounds/game-bg-music.mp3'
|
||||||
import unoSound from '../assets/sounds/uno-sound.mp3'
|
import unoSound from '../assets/sounds/uno-sound.mp3'
|
||||||
import shufflingSound from '../assets/sounds/shuffling-cards-1.mp3'
|
import shufflingSound from '../assets/sounds/shuffling-cards-1.mp3'
|
||||||
import skipCardSound from '../assets/sounds/skip-sound.mp3'
|
import skipCardSound from '../assets/sounds/skip-sound.mp3'
|
||||||
@ -70,8 +71,9 @@ const Game = (props) => {
|
|||||||
|
|
||||||
const [isUnoButtonPressed, setUnoButtonPressed] = useState(false)
|
const [isUnoButtonPressed, setUnoButtonPressed] = useState(false)
|
||||||
const [isSoundMuted, setSoundMuted] = useState(false)
|
const [isSoundMuted, setSoundMuted] = useState(false)
|
||||||
const [isMusicMuted, setMusicMuted] = useState(false)
|
const [isMusicMuted, setMusicMuted] = useState(true)
|
||||||
|
|
||||||
|
const [playBBgMusic, { pause }] = useSound(bgMusic, { loop: true })
|
||||||
const [playUnoSound] = useSound(unoSound)
|
const [playUnoSound] = useSound(unoSound)
|
||||||
const [playShufflingSound] = useSound(shufflingSound)
|
const [playShufflingSound] = useSound(shufflingSound)
|
||||||
const [playSkipCardSound] = useSound(skipCardSound)
|
const [playSkipCardSound] = useSound(skipCardSound)
|
||||||
@ -1217,8 +1219,14 @@ const Game = (props) => {
|
|||||||
<img src={require('../assets/logo.png').default} />
|
<img src={require('../assets/logo.png').default} />
|
||||||
<h1>Game Code: {room}</h1>
|
<h1>Game Code: {room}</h1>
|
||||||
<span>
|
<span>
|
||||||
<button className='game-button green' onClick={() => setSoundMuted(!isSoundMuted)}>{isSoundMuted ? <span class="material-icons">volume_off</span> : <span class="material-icons">volume_up</span>}</button>
|
<button className='game-button green' onClick={() => setSoundMuted(!isSoundMuted)}>{isSoundMuted ? <span className="material-icons">volume_off</span> : <span className="material-icons">volume_up</span>}</button>
|
||||||
<button className='game-button green' onClick={() => setMusicMuted(!isMusicMuted)}>{isMusicMuted ? <span class="material-icons">music_off</span> : <span class="material-icons">music_note</span>}</button>
|
<button className='game-button green' onClick={() => {
|
||||||
|
if(isMusicMuted)
|
||||||
|
playBBgMusic()
|
||||||
|
else
|
||||||
|
pause()
|
||||||
|
setMusicMuted(!isMusicMuted)
|
||||||
|
}}>{isMusicMuted ? <span className="material-icons">music_off</span> : <span className="material-icons">music_note</span>}</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -1366,7 +1374,7 @@ const Game = (props) => {
|
|||||||
</> : <h1>Room full</h1> }
|
</> : <h1>Room full</h1> }
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
<a href='/'><button class="game-button red">QUIT</button></a>
|
<a href='/'><button className="game-button red">QUIT</button></a>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -12,11 +12,11 @@ const Homepage = () => {
|
|||||||
<div className='homepage-form'>
|
<div className='homepage-form'>
|
||||||
<div className='homepage-join'>
|
<div className='homepage-join'>
|
||||||
<input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
|
<input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
|
||||||
<Link to={`/play?roomCode=${roomCode}`}><button class="game-button green">JOIN GAME</button></Link>
|
<Link to={`/play?roomCode=${roomCode}`}><button className="game-button green">JOIN GAME</button></Link>
|
||||||
</div>
|
</div>
|
||||||
<h1>OR</h1>
|
<h1>OR</h1>
|
||||||
<div className='homepage-create'>
|
<div className='homepage-create'>
|
||||||
<Link to={`/play?roomCode=${randomCodeGenerator(5)}`}><button class="game-button orange">CREATE GAME</button></Link>
|
<Link to={`/play?roomCode=${randomCodeGenerator(5)}`}><button className="game-button orange">CREATE GAME</button></Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user