1
0
mirror of https://github.com/mizanxali/uno-online synced 2024-11-05 10:45:25 +00:00
This commit is contained in:
Mizanali Panjwani 2021-02-23 19:25:40 +05:30
parent 0d6a5c166c
commit 9cde81b6f9

View File

@ -700,84 +700,87 @@ const Game = (props) => {
} }
return ( return (
(!roomFull) ? <> <>
<h1>Game Code: {room}</h1> {(!roomFull) ? <>
<h1>Game Code: {room}</h1>
{users.length===2 ? <> {users.length===2 ? <>
{gameOver ? <div>{winner !== '' && <><h1>GAME OVER</h1><h2>{winner} wins!</h2></>}<a href='/'>Home</a></div> : {gameOver ? <div>{winner !== '' && <><h1>GAME OVER</h1><h2>{winner} wins!</h2></>}<a href='/'>Home</a></div> :
<div className='Game'> <div className='Game'>
<h1>Turn: {turn}</h1> <h1>Turn: {turn}</h1>
{currentUser === 'Player 1' && <> {currentUser === 'Player 1' && <>
<div className='player1Deck' style={turn === 'Player 1' ? null : {pointerEvents: 'none'}}> <div className='player1Deck' style={turn === 'Player 1' ? null : {pointerEvents: 'none'}}>
{player1Deck.map((item) => ( {player1Deck.map((item) => (
<img
onClick={() => onCardPlayedHandler(item)}
src={require(`../assets/cards-front/${item}.png`).default}
width='100px'
/>
))}
<button onClick={onCardDrawnHandler}>DRAW CARD</button>
</div>
<hr />
<div>
{playedCardsPile && playedCardsPile.length>0 &&
<img <img
onClick={() => onCardPlayedHandler(item)} src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
src={require(`../assets/cards-front/${item}.png`).default}
width='100px' width='100px'
/> /> }
))} </div>
<button onClick={onCardDrawnHandler}>DRAW CARD</button> <hr />
</div> <div className='player2Deck' style={{pointerEvents: 'none'}}>
<hr /> {player2Deck.map((item) => (
<div> <img
{playedCardsPile && playedCardsPile.length>0 && onClick={() => onCardPlayedHandler(item)}
<img src={require(`../assets/card-back.png`).default}
src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default} width='100px'
width='100px' />
/> } ))}
</div> <button onClick={onCardDrawnHandler}>DRAW CARD</button>
<hr /> </div> </> }
<div className='player2Deck' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
{player2Deck.map((item) => ( {currentUser === 'Player 2' && <>
<div className='player1Deck' style={{pointerEvents: 'none'}}>
{player1Deck.map((item) => (
<img
onClick={() => onCardPlayedHandler(item)}
src={require(`../assets/card-back.png`).default}
width='100px'
/>
))}
<button onClick={onCardDrawnHandler}>DRAW CARD</button>
</div>
<hr />
<div>
{playedCardsPile && playedCardsPile.length>0 &&
<img <img
onClick={() => onCardPlayedHandler(item)} src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
src={require(`../assets/card-back.png`).default}
width='100px' width='100px'
/> /> }
))} </div>
<button onClick={onCardDrawnHandler}>DRAW CARD</button> <hr />
</div> </> } <div className='player2Deck' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
{player2Deck.map((item) => (
<img
onClick={() => onCardPlayedHandler(item)}
src={require(`../assets/cards-front/${item}.png`).default}
width='100px'
/>
))}
<button onClick={onCardDrawnHandler}>DRAW CARD</button>
</div> </> }
{currentUser === 'Player 2' && <> </div> }
<div className='player1Deck' style={turn === 'Player 1' ? null : {pointerEvents: 'none'}}>
{player1Deck.map((item) => (
<img
onClick={() => onCardPlayedHandler(item)}
src={require(`../assets/card-back.png`).default}
width='100px'
/>
))}
<button onClick={onCardDrawnHandler}>DRAW CARD</button>
</div>
<hr />
<div>
{playedCardsPile && playedCardsPile.length>0 &&
<img
src={require(`../assets/cards-front/${playedCardsPile[playedCardsPile.length-1]}.png`).default}
width='100px'
/> }
</div>
<hr />
<div className='player2Deck' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
{player2Deck.map((item) => (
<img
onClick={() => onCardPlayedHandler(item)}
src={require(`../assets/cards-front/${item}.png`).default}
width='100px'
/>
))}
<button onClick={onCardDrawnHandler}>DRAW CARD</button>
</div> </> }
<hr /> </> : <h1>Waiting for other player</h1> }
<a href='/'>Home</a>
</div> }
</> : <h1>Waiting for other player</h1> } </> : <h1>Room full</h1> }
</> : <h1>Room full</h1> <hr />
<a href='/'>Home</a>
</>
) )
} }