Github/uno-online
1
0
Fork 1
mirror of https://github.com/mizanxali/uno-online synced 2025-12-09 11:43:27 +00:00
Code Issues Projects Releases Wiki Activity

in progress

Browse Source
This commit is contained in:
Dave Umrysh
2022-02-04 17:23:50 -07:00
parent 76cd242bf2
commit 489d9e32ee
4 changed files with 67 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,8 +22,8 @@ import gameOverSound from '../assets/sounds/game-over-sound.mp3'
//DRAW 4 WILD - 600
let socket
// const ENDPOINT = 'http://localhost:5000'
const ENDPOINT = 'https://uno-online-multiplayer.herokuapp.com/'
const ENDPOINT = 'http://localhost:5000'
//const ENDPOINT = 'https://uno-online-multiplayer.herokuapp.com/'
const Game = (props) => {
const data = queryString.parse(props.location.search)
@@ -35,6 +35,7 @@ const Game = (props) => {
const [currentUser, setCurrentUser] = useState('')
const [message, setMessage] = useState('')
const [messages, setMessages] = useState([])
const [playerName, setPlayerName] = useState(data.playerName)
useEffect(() => {
const connectionOptions = {
@@ -1231,6 +1232,7 @@ const Game = (props) => {
pause()
setMusicMuted(!isMusicMuted)
}}>{isMusicMuted ? <span className="material-icons">music_off</span> : <span className="material-icons">music_note</span>}</button>
<a href='/'><button className="game-button red">QUIT</button></a>
</span>
</div>
@@ -1258,20 +1260,15 @@ const Game = (props) => {
</div>
<br />
<div className='middleInfo' style={turn === 'Player 2' ? {pointerEvents: 'none'} : null}>
<button className='game-button' disabled={turn !== 'Player 1'} onClick={onCardDrawnHandler}>DRAW CARD</button>
{playedCardsPile && playedCardsPile.length>0 &&
<img
className='Card'
src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
/> }
<button className='game-button orange' disabled={player1Deck.length !== 2} onClick={() => {
setUnoButtonPressed(!isUnoButtonPressed)
playUnoSound()
}}>UNO</button>
</div>
<br />
<div className='player1Deck' style={turn === 'Player 1' ? null : {pointerEvents: 'none'}}>
<p className='playerDeckText'>Player 1</p>
<p className='playerDeckText'>{playerName}</p>
{player1Deck.map((item, i) => (
<img
key={i}
@@ -1281,6 +1278,14 @@ const Game = (props) => {
/>
))}
</div>
<br />
<div className='middleInfo' style={turn === 'Player 2' ? {pointerEvents: 'none'} : null}>
<button className='game-button' disabled={turn !== 'Player 1'} onClick={onCardDrawnHandler}>DRAW CARD</button>
<button className='game-button orange' disabled={player1Deck.length !== 2} onClick={() => {
setUnoButtonPressed(!isUnoButtonPressed)
playUnoSound()
}}>UNO</button>
</div>
<div className="chatBoxWrapper">
<div className="chat-box chat-box-player1">
@@ -1322,20 +1327,15 @@ const Game = (props) => {
</div>
<br />
<div className='middleInfo' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
<button className='game-button' disabled={turn !== 'Player 2'} onClick={onCardDrawnHandler}>DRAW CARD</button>
{playedCardsPile && playedCardsPile.length>0 &&
<img
className='Card'
src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
/> }
<button className='game-button orange' disabled={player2Deck.length !== 2} onClick={() => {
setUnoButtonPressed(!isUnoButtonPressed)
playUnoSound()
}}>UNO</button>
</div>
<br />
<div className='player2Deck' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
<p className='playerDeckText'>Player 2</p>
<p className='playerDeckText'>{playerName}</p>
{player2Deck.map((item, i) => (
<img
key={i}
@@ -1345,6 +1345,14 @@ const Game = (props) => {
/>
))}
</div>
<br />
<div className='middleInfo' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
<button className='game-button' disabled={turn !== 'Player 2'} onClick={onCardDrawnHandler}>DRAW CARD</button>
<button className='game-button orange' disabled={player2Deck.length !== 2} onClick={() => {
setUnoButtonPressed(!isUnoButtonPressed)
playUnoSound()
}}>UNO</button>
</div>
<div className="chatBoxWrapper">
<div className="chat-box chat-box-player2">
@@ -1372,9 +1380,6 @@ const Game = (props) => {
</div> }
</> }
</> : <h1>Room full</h1> }
<br />
<a href='/'><button className="game-button red">QUIT</button></a>
</div>
)
}