From 3f7987f482e1b149e16bb09f32908781b8c7347c Mon Sep 17 00:00:00 2001 From: Wilco Kruijer Date: Mon, 17 Feb 2020 15:38:46 +0100 Subject: [PATCH] Lobby joining --- backend/src/index.js | 35 +++++++++++++-- backend/src/service.js | 33 ++++++++++++-- frontend/src/App.tsx | 10 +---- frontend/src/components/Lobby.tsx | 72 ++++++++++++++++++++++++++----- frontend/src/css/lobby.css | 16 +++++++ frontend/src/util/socket.ts | 13 ++++-- 6 files changed, 149 insertions(+), 30 deletions(-) create mode 100644 frontend/src/css/lobby.css diff --git a/backend/src/index.js b/backend/src/index.js index b297585..060c48b 100644 --- a/backend/src/index.js +++ b/backend/src/index.js @@ -17,10 +17,10 @@ io.on('connection', socket => { console.log('a user connected', socketId); - const lobby = service.joinLobby(socketId); + const lobby = state.createRandomLobby(); + service.joinLobby(socketId, lobby.name); socket.join(lobby.name); - socket.emit('welcome', {lobby: lobby.name}); - + socket.emit('welcome', {lobby: lobby}); socket.on('disconnect', (reason) => { console.log('Disconnected:', socketId); @@ -28,6 +28,19 @@ io.on('connection', socket => { }); socket.on('join_lobby', (lobbyId, callback) => { + if (!callback || typeof callback !== 'function') { + console.error("Callback not a function."); + return + } + + if (!lobbyId) { + return callback('no_lobby_id_given'); + } + + if (!Number.isSafeInteger(+lobbyId)) { + return callback('lobby_id_not_integer'); + } + console.log(`${socketId} wants to join '${lobbyId}'.`); // Leave current lobby first @@ -38,7 +51,21 @@ io.on('connection', socket => { callback(null, { status: 'ok', - lobby: lobby.name + lobby: lobby }); }); + + socket.on('lobby_info', callback => { + if (!callback || typeof callback !== 'function') { + console.error("Callback not a function."); + return + } + + const lobby = service.getUserLobby(socketId); + + callback(null, { + status: 'ok', + lobby: lobby + }); + }) }); \ No newline at end of file diff --git a/backend/src/service.js b/backend/src/service.js index 1afea33..91bbe17 100644 --- a/backend/src/service.js +++ b/backend/src/service.js @@ -4,13 +4,13 @@ const state = require("./state.js"); /** * * @param {string} socketId - * @param {number|undefined} lobbyId + * @param {number} lobbyId * @returns {Lobby} */ -function joinLobby(socketId, lobbyId=undefined) { +function joinLobby(socketId, lobbyId) { let lobby = state.getLobby(lobbyId); if (!lobby) { - lobby = state.createRandomLobby(); + lobby = state.createLobby(lobbyId); } lobby.addUser(new User(socketId)); @@ -27,6 +27,10 @@ function leaveLobby(socketId) { Object.keys(state.lobbies).forEach(lobbyId => { const lobby = state.getLobby(lobbyId); + if (!lobby) { + return; + } + lobby.removeUser(socketId); if (!lobby.hasUsers()) { @@ -40,4 +44,25 @@ function leaveLobby(socketId) { }); } -module.exports = {joinLobby, leaveLobby}; \ No newline at end of file +/** + * + * @param socketId + * @returns {Lobby|undefined} + */ +function getUserLobby(socketId) { + for (let lobbyId of Object.keys(state.lobbies)) { + const lobby = state.getLobby(lobbyId); + + if (!lobby) { + continue; + } + + if (lobby.getUser(socketId)) { + return lobby; + } + } + + return undefined; +} + +module.exports = {joinLobby, leaveLobby, getUserLobby}; \ No newline at end of file diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 0dec889..e07f913 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -15,11 +15,8 @@ const App = () => { useEffect(() => { socket.on('welcome', async (obj: any) => { - const {lobby} = obj; - setLobbyId(lobby); + setLobbyId(obj.lobby.name); setConnected(true); - - // const joined = await emit('join_lobby', 123); }); return () => { @@ -37,9 +34,7 @@ const App = () => { ); const lobbyContent = ( - - - + ); const content = lobbyContent; @@ -51,7 +46,6 @@ const App = () => {
logo - {connected ? 'Verbonden ' + lobbyId : ''}
); diff --git a/frontend/src/components/Lobby.tsx b/frontend/src/components/Lobby.tsx index fc75031..ff292cb 100644 --- a/frontend/src/components/Lobby.tsx +++ b/frontend/src/components/Lobby.tsx @@ -1,24 +1,74 @@ -import React, {useEffect} from 'react'; -import {Col, Progress} from "antd" -import socket from "../util/socket"; - +import React, {useEffect, useState} from 'react'; +import {Card, Col, InputNumber, Row} from "antd" +import socket, {emit} from "../util/socket"; +import "../css/lobby.css"; +import beer1 from "../img/beer1.png" const Lobby = () => { - useEffect(() => { - socket.on("SENDING_NEW_TIME", (data: string) => { + const [lobbyId, setLobbyId] = useState(undefined); + const [isLeader, setIsLeader] = useState(false); + const [userCount, setUserCount] = useState(0); - }); + async function onChangeLobbyInput(i: any) { + setLobbyId(i); + const result: any = await emit('join_lobby', i); + setIsLeader(socket.id === result.lobby.leaderId); + setUserCount(result.lobby.users?.length || 0); + } + + useEffect(() => { + socket.on('welcome', async (obj: any) => { + setLobbyId(obj.lobby.name); + setIsLeader(socket.id === obj.lobby.leaderId); + setUserCount(obj.lobby.users?.length || 0); + }); return () => { - socket.off("SENDING_NEW_TIME"); + socket.off("welcome"); } }); + useEffect(() => { + async function wrapper() { + const result: any = await emit('lobby_info'); + setIsLeader(socket.id === result.lobby.leaderId); + setUserCount(result.lobby.users?.length || 0); + } + + wrapper(); + }, []); + return ( - -

Centurion!

- +
+ + +

Centurion! beer

+ + + + +
Honderd minuten...
+
Honderd shots...
+
Kun jij het aan?
+ + + + + Start, + ]: []}> + + Huidige lobby + + +

Er zijn {userCount} gebruiker(s) aanwezig.

+

{isLeader ? 'Jij bent de baas.' : 'Wachtend op de baas...'}

+ + + +
); }; diff --git a/frontend/src/css/lobby.css b/frontend/src/css/lobby.css new file mode 100644 index 0000000..b149ff7 --- /dev/null +++ b/frontend/src/css/lobby.css @@ -0,0 +1,16 @@ +h1 { + font-size: 3.5rem; + text-align: center; + min-height: inherit; +} + +.hints { + font-size: 2rem; + text-align: center; +} + +.control { + font-size: 1.3rem; + margin-top: 10em; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); +} \ No newline at end of file diff --git a/frontend/src/util/socket.ts b/frontend/src/util/socket.ts index 9078d7c..f37917f 100644 --- a/frontend/src/util/socket.ts +++ b/frontend/src/util/socket.ts @@ -10,14 +10,21 @@ export default socket; * @param arg * @param callback */ -export function emit(event: string, arg: any) { +export function emit(event: string, arg: any = null) { return new Promise((resolve, reject) => { - socket.emit(event, arg, (err: any, res: any) => { + const cb = (err: any, res: any) => { if (err) { return reject(err); } resolve(res); - }) + }; + + if (arg) { + socket.emit(event, arg, cb); + } else { + socket.emit(event, cb); + } + }) } \ No newline at end of file