Github/uno-online
1
0
Fork 1
mirror of https://github.com/mizanxali/uno-online synced 2024-11-21 18:24:53 +00:00
Code Issues Projects Releases Wiki Activity

Added background music

Browse Source
This commit is contained in:
Mizanali Panjwani 2021-03-03 04:24:37 +05:30
parent c3360bfbba
commit e5091107d7
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
client/src/assets/sounds/game-bg-music.mp3 Normal file
View File

Binary file not shown.

16
client/src/components/Game.js
View File

@ -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>
) )
} }

4
client/src/components/Homepage.js
View File

@ -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>