diff --git a/client/public/index.html b/client/public/index.html index acf9f75..7613f10 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -41,5 +41,10 @@ To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> + diff --git a/client/src/App.css b/client/src/App.css index fd06e0b..8eb2ed9 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -288,3 +288,100 @@ a { box-shadow: 0 2.5em 0 0; } } + +/* Chat Box */ +.chat-box{ + position: absolute; + bottom: 0px; + background: white; + width: 355px; + border-radius: 5px 5px 0px 0px; + z-index: 100; +} +.chat-box-player1{ + right: 20px; +} +.chat-box-player2{ + left: 20px; +} +.chat-head{ + width: inherit; + height: 45px; + background: #2c3e50; + border-radius: 5px 5px 0px 0px; +} +.chat-head h2{ + color: white; + padding-top: 5px; + display: inline-block; +} +.chat-head img{ + cursor: pointer; + float: right; + width: 25px; + margin: 10px; +} +.chat-body{ + display: none; + height: 205px; + width: inherit; + overflow: hidden auto; + margin-bottom: 45px; +} +.chat-text{ + position: fixed; + bottom: 0px; + height: 45px; + width: inherit; +} +.chat-text input{ + width: inherit; + height: inherit; + box-sizing: border-box; + border: 1px solid #bdc3c7; + padding: 10px; + resize: none; + outline: none; +} +.chat-text input:active, .chat-text input:focus, .chat-text input:hover{ + border-color: royalblue; +} +.msg-send{ + background: #406a4b; +} +.msg-receive{ + background: #595080; +} +.msg-send, .msg-receive{ + width: 285px; + height: 35px; + padding: 5px 5px 5px 10px; + margin: 5px auto; + border-radius: 3px; + line-height: 30px; + position: relative; + color: white; +} +.msg-receive:before{ + content: ''; + width: 0px; + height: 0px; + position: absolute; + border: 15px solid; + border-color: transparent #595080 transparent transparent; + left: -29px; + top: 7px; +} +.msg-send:after{ + content: ''; + width: 0px; + height: 0px; + position: absolute; + border: 15px solid; + border-color: transparent transparent transparent #406a4b; + right: -29px; + top: 7px; +} +.msg-receive:hover, .msg-send:hover{ + opacity: .9; +} diff --git a/client/src/components/Game.js b/client/src/components/Game.js index 91f9757..52994da 100644 --- a/client/src/components/Game.js +++ b/client/src/components/Game.js @@ -21,8 +21,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) @@ -32,6 +32,8 @@ const Game = (props) => { const [roomFull, setRoomFull] = useState(false) const [users, setUsers] = useState([]) const [currentUser, setCurrentUser] = useState('') + const [message, setMessage] = useState('') + const [messages, setMessages] = useState([]) useEffect(() => { const connectionOptions = { @@ -156,6 +158,13 @@ const Game = (props) => { socket.on('currentUserData', ({ name }) => { setCurrentUser(name) }) + + socket.on('message', message => { + setMessages(messages => [ ...messages, message ]) + + const chatBody = document.querySelector('.chat-body') + chatBody.scrollTop = chatBody.scrollHeight + }) }, []) //some util functions @@ -167,6 +176,23 @@ const Game = (props) => { return arr.length === 1 ? player : '' } + const toggleChatBox = () => { + const chatBody = document.querySelector('.chat-body') + if(chatBody.style.display === 'none') + chatBody.style.display = 'block' + else + chatBody.style.display = 'none' + } + + const sendMessage= (event) => { + event.preventDefault() + if(message) { + socket.emit('sendMessage', { message: message }, () => { + setMessage('') + }) + } + } + //driver functions const onCardPlayedHandler = (played_card) => { //extract player who played the card @@ -1196,14 +1222,15 @@ const Game = (props) => { + {/* PLAYER LEFT MESSAGES */} {users.length===1 && currentUser === 'Player 2' &&

Player 1 has left the game.

} - {users.length===1 && currentUser === 'Player 1' &&

Waiting for Player 2 to join the game.

} {users.length===2 && <> {gameOver ?
{winner !== '' && <>

GAME OVER

{winner} wins!

}
:
+ {/* PLAYER 1 VIEW */} {currentUser === 'Player 1' && <>

Player 2

@@ -1241,8 +1268,35 @@ const Game = (props) => { src={require(`../assets/cards-front/${item}.png`).default} /> ))} +
+ {/* +
+
+

Chat Box

+ +
+
+
+ {messages.map(msg => { + if(msg.user === 'Player 2') + return
{msg.text}
+ if(msg.user === 'Player 1') + return
{msg.text}
+ })} +
+
+ setMessage(event.target.value)} onKeyPress={event => event.key==='Enter' && sendMessage(event)} /> +
+
+
} + {/* PLAYER 2 VIEW */} {currentUser === 'Player 2' && <>

Player 1

@@ -1280,6 +1334,32 @@ const Game = (props) => { src={require(`../assets/cards-front/${item}.png`).default} /> ))} +
+ {/* +
+
+

Chat Box

+ +
+
+
+ {messages.map(msg => { + if(msg.user === 'Player 1') + return
{msg.text}
+ if(msg.user === 'Player 2') + return
{msg.text}
+ })} +
+
+ setMessage(event.target.value)} onKeyPress={event => event.key==='Enter' && sendMessage(event)} /> +
+
+
} } } diff --git a/server.js b/server.js index 2232713..14ac08d 100644 --- a/server.js +++ b/server.js @@ -45,6 +45,12 @@ io.on('connection', socket => { io.to(user.room).emit('updateGameState', gameState) }) + socket.on('sendMessage', (payload, callback) => { + const user = getUser(socket.id) + io.to(user.room).emit('message', {user: user.name, text: payload.message}) + callback() + }) + socket.on('disconnect', () => { const user = removeUser(socket.id) if(user)