forked from Github/uno-online
in progress
This commit is contained in:
parent
76cd242bf2
commit
489d9e32ee
33
client/package-lock.json
generated
33
client/package-lock.json
generated
@ -3521,6 +3521,15 @@
|
||||
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
|
||||
"optional": true
|
||||
},
|
||||
"bindings": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
|
||||
"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"file-uri-to-path": "1.0.0"
|
||||
}
|
||||
},
|
||||
"bluebird": {
|
||||
"version": "3.7.2",
|
||||
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
|
||||
@ -6395,6 +6404,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"file-uri-to-path": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
|
||||
"integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
|
||||
"optional": true
|
||||
},
|
||||
"filesize": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
|
||||
@ -10109,6 +10124,12 @@
|
||||
"resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
|
||||
"integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
|
||||
},
|
||||
"nan": {
|
||||
"version": "2.15.0",
|
||||
"resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
|
||||
"integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
|
||||
"optional": true
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "3.1.20",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
|
||||
@ -15228,7 +15249,11 @@
|
||||
"version": "1.2.13",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
|
||||
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
|
||||
"optional": true
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"bindings": "^1.5.0",
|
||||
"nan": "^2.12.1"
|
||||
}
|
||||
},
|
||||
"glob-parent": {
|
||||
"version": "3.1.0",
|
||||
@ -15822,7 +15847,11 @@
|
||||
"version": "1.2.13",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
|
||||
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
|
||||
"optional": true
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"bindings": "^1.5.0",
|
||||
"nan": "^2.12.1"
|
||||
}
|
||||
},
|
||||
"glob-parent": {
|
||||
"version": "3.1.0",
|
||||
|
||||
@ -385,6 +385,10 @@ a {
|
||||
.msg-receive:hover, .msg-send:hover{
|
||||
opacity: .9;
|
||||
}
|
||||
.your-name-input{
|
||||
font-size: 15px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
/*media query*/
|
||||
@media only screen and (max-width: 480px)
|
||||
{
|
||||
@ -394,6 +398,11 @@ a {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.homepage-menu {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topInfo
|
||||
{
|
||||
flex-direction: column;
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -4,19 +4,22 @@ import randomCodeGenerator from '../utils/randomCodeGenerator'
|
||||
|
||||
const Homepage = () => {
|
||||
const [roomCode, setRoomCode] = useState('')
|
||||
const [playerName, setPlayerName] = useState('')
|
||||
|
||||
return (
|
||||
<div className='Homepage'>
|
||||
<div className='homepage-menu'>
|
||||
<img src={require('../assets/logo.png').default} width='200px' />
|
||||
<br>
|
||||
<input type='text' placeholder='Your name' className="your-name-input" onChange={(event) => setPlayerName(event.target.value)} />
|
||||
<div className='homepage-form'>
|
||||
<div className='homepage-join'>
|
||||
<input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
|
||||
<Link to={`/play?roomCode=${roomCode}`}><button className="game-button green">JOIN GAME</button></Link>
|
||||
<Link to={`/play?roomCode=${roomCode}&playerName=${playerName}`}><button className="game-button green">JOIN GAME</button></Link>
|
||||
</div>
|
||||
<h1>OR</h1>
|
||||
<div className='homepage-create'>
|
||||
<Link to={`/play?roomCode=${randomCodeGenerator(5)}`}><button className="game-button orange">CREATE GAME</button></Link>
|
||||
<Link to={`/play?roomCode=${randomCodeGenerator(5)}&playerName=${playerName}`}><button className="game-button orange">CREATE GAME</button></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user