dave/uno-online
1
0
Fork 0
forked from Github/uno-online
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

merge into: dave:master
Branches Tags
dave:master
dave:dave-dev
...
pull from: dave:dave-dev
Branches Tags
dave:dave-dev
dave:master
Github:master

2 Commits
master ... dave-dev

Author SHA1 Message Date
Dave Umrysh
9c84bb2efe custom player names 2022-04-15 15:16:38 -06:00
Dave Umrysh
489d9e32ee in progress 2022-02-04 17:23:50 -07:00
6 changed files with 97 additions and 35 deletions
Show Stats Expand all files Collapse all files

33
client/package-lock.json generated
View File

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

9
client/src/App.css
View File

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

58
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,10 @@ const Game = (props) => {
const [currentUser, setCurrentUser] = useState('')
const [message, setMessage] = useState('')
const [messages, setMessages] = useState([])
const [playerName, setPlayerName] = useState(data.playerName)
const [player1Name, setPlayer1Name] = useState('Player 1')
const [player2Name, setPlayer2Name] = useState('Player 2')
useEffect(() => {
const connectionOptions = {
@ -45,7 +49,7 @@ const Game = (props) => {
}
socket = io.connect(ENDPOINT, connectionOptions)
socket.emit('join', {room: room}, (error) => {
socket.emit('join', {room: room, playerName: playerName}, (error) => {
if(error)
setRoomFull(true)
})
@ -156,12 +160,22 @@ const Game = (props) => {
socket.on("roomData", ({ users }) => {
setUsers(users)
// For each user, update the name
users.forEach(function(user){
if(user.name === 'Player 1'){
setPlayer1Name(user.playerName)
}else if(user.name === 'Player 2'){
setPlayer2Name(user.playerName)
}
})
})
socket.on('currentUserData', ({ name }) => {
setCurrentUser(name)
})
socket.on('message', message => {
setMessages(messages => [ ...messages, message ])
@ -1231,6 +1245,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>
@ -1245,7 +1260,7 @@ const Game = (props) => {
{/* PLAYER 1 VIEW */}
{currentUser === 'Player 1' && <>
<div className='player2Deck' style={{pointerEvents: 'none'}}>
<p className='playerDeckText'>Player 2</p>
<p className='playerDeckText'>{player2Name}</p>
{player2Deck.map((item, i) => (
<img
key={i}
@ -1258,20 +1273,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'>{player1Name}</p>
{player1Deck.map((item, i) => (
<img
key={i}
@ -1281,6 +1291,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">
@ -1309,7 +1327,7 @@ const Game = (props) => {
{/* PLAYER 2 VIEW */}
{currentUser === 'Player 2' && <>
<div className='player1Deck' style={{pointerEvents: 'none'}}>
<p className='playerDeckText'>Player 1</p>
<p className='playerDeckText'>{player1Name}</p>
{player1Deck.map((item, i) => (
<img
key={i}
@ -1322,20 +1340,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'>{player2Name}</p>
{player2Deck.map((item, i) => (
<img
key={i}
@ -1345,6 +1358,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 +1393,6 @@ const Game = (props) => {
</div> }
</> }
</> : <h1>Room full</h1> }
<br />
<a href='/'><button className="game-button red">QUIT</button></a>
</div>
)
}

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

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

7
server.js
View File

@ -16,11 +16,14 @@ app.use(cors())
io.on('connection', socket => {
socket.on('join', (payload, callback) => {
let numberOfUsersInRoom = getUsersInRoom(payload.room).length
let username = numberOfUsersInRoom===0 ? 'Player 1' : 'Player 2';
const { error, newUser} = addUser({
id: socket.id,
name: numberOfUsersInRoom===0 ? 'Player 1' : 'Player 2',
room: payload.room
name: username,
room: payload.room,
playerName: payload.playerName
})
if(error)

4
users.js
View File

@ -1,11 +1,11 @@
const users = []
const addUser = ({id, name, room}) => {
const addUser = ({id, name, room, playerName}) => {
const numberOfUsersInRoom = users.filter(user => user.room === room).length
if(numberOfUsersInRoom === 2)
return { error: 'Room full' }
const newUser = { id, name, room }
const newUser = { id, name, room, playerName}
users.push(newUser)
return { newUser }
}