Lobby joining

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
+        });
+    })
 });

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};
+/**
+ *
+ * @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};

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 = (
-        <Row>
-            <Lobby/>
-        </Row>
+        <Lobby/>
     );
 
     const content = lobbyContent;
@@ -51,7 +46,6 @@ const App = () => {
             </section>
             <footer>
                 <img src={logo} className="via-logo" alt="logo"/>
-                <span>{connected ? 'Verbonden ' + lobbyId : ''}</span>
             </footer>
         </>
     );

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<number | undefined>(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 (
-        <Col className="sider" span={4} offset={10}>
-            <h1>Centurion!</h1>
-        </Col>
+        <div className="lobby">
+            <Row>
+                <Col span={24}>
+                    <h1>Centurion! <img src={beer1} className="beer" alt="beer"/></h1>
+                </Col>
+            </Row>
+            <Row>
+                <Col className="hints" span={24}>
+                    <div>Honderd minuten...</div>
+                    <div>Honderd shots...</div>
+                    <div>Kun jij het aan?</div>
+                </Col>
+            </Row>
+            <Row>
+                <Col className="control" span={8} offset={8}>
+                    <Card title={`Lobby setup (${lobbyId}):`} actions={ isLeader ? [
+                        <span>Start</span>,
+                    ]: []}>
+                        <span>
+                            Huidige lobby <InputNumber size="small" min={100} max={100000} value={lobbyId}
+                                                onChange={onChangeLobbyInput}/>
+                        </span>
+
+                        <p>Er zijn {userCount} gebruiker(s) aanwezig.</p>
+                        <p> {isLeader ? 'Jij bent de baas.' : 'Wachtend op de baas...'}</p>
+                    </Card>
 
+                </Col>
+            </Row>
+        </div>
     );
 };
 

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);
+}

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);
+        }
+
     })
 }