Error if game already started or more than 4 players

Webservice/server.js

@@ -59,7 +59,7 @@ io.on('connection', socket => {
 
             generate_log_message(socket.room, socket.username, "JOINED", "");
         } else {
-            // TODO
+            io.to(socket.id).emit('error', 'Game started already or room has two many members');
         }
     });
 
@@ -101,7 +101,7 @@ io.on('connection', socket => {
 
                 generate_log_message(socket.room, socket.username, "DICE", randomNumber);
             } else {
-                // TODO
+                io.to(socket.id).emit('error', 'It\'s not your turn');
             }
         }
     });
@@ -113,7 +113,7 @@ io.on('connection', socket => {
 
                 generate_log_message(socket.room, socket.username, "CARD", difficulty);
             } else {
-                // TODO
+                io.to(socket.id).emit('error', 'It\'s not your turn');
             }
         }
     });
@@ -157,6 +157,9 @@ function generate_log_message(room, user, type, message) {
         case 'DICE':
             color = '\x1b[34m';
             break;
+        case 'MOVE':
+            color = '\x1b[30m';
+            break;
         default:
             color = '\x1b[0m';
     }

public/css/index.css

@@ -1,3 +1,7 @@
+#error {
+    color: red;
+}
+
 #login {
     background: #212121;
     height: 100%;

public/index.html

@@ -24,6 +24,7 @@
 <main>
     <div id="login">
         <form>
+            <h2 id="error"></h2>
             <label for="username">Benutzername: </label>
             <input id="username" name="username" placeholder="Benutzername" type="text">
 

public/js/chat.js

@@ -2,15 +2,29 @@ let socket;
 let connected = false;
 
 function start_chat() {
-    socket = io("/", {
-        closeOnBeforeunload: false
-    });
-
     socket.on('login', function () {
         connected = true;
+
+        document.getElementById('login').style.display = 'none';
+        document.getElementById('game').style.display = 'flex';
+        document.getElementById('chat').style.display = 'flex';
+        start_chat();
+        start_game();
+        resize();
+
         addLogMessage("Welcome " + username + "!");
     });
 
+    socket.on('error', function (data) {
+        if (data === 'Game started already or room has two many members') {
+            document.getElementById('login').style.display = 'flex';
+            document.getElementById('game').style.display = 'none';
+            document.getElementById('chat').style.display = 'none';
+            document.getElementById('error').innerText = data;
+        }
+        console.log(data);
+    });
+
     socket.on('new message', function (data) {
         addChatMessage(data);
     });
@@ -22,9 +36,6 @@ function start_chat() {
     socket.on('user left', function (data) {
         addLogMessage(data + ' left');
     });
-
-    // Login
-    socket.emit('add user', {'username': username, 'room_name': room_name});
 }
 
 function sendMessage() {

public/js/game.js

@@ -73,7 +73,7 @@ function start_game() {
 
     // Card stacks
     let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () {
-        if (!show_card && rolled_number === 1) {
+        if (diced && !show_card && rolled_number === 1) {
             console.log("1");
             socket.emit('get card', 1);
         }
@@ -81,7 +81,7 @@ function start_game() {
     app.stage.addChild(cards_1);
 
     let cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 5, 3, function () {
-        if (!show_card && rolled_number === 2) {
+        if (diced && !show_card && rolled_number === 2) {
             console.log("2");
             socket.emit('get card', 2);
         }
@@ -89,7 +89,7 @@ function start_game() {
     app.stage.addChild(cards_2);
 
     let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () {
-        if (!show_card && rolled_number === 3) {
+        if (diced && !show_card && rolled_number === 3) {
             console.log("3");
             socket.emit('get card', 3);
         }

public/js/index.js

@@ -10,10 +10,12 @@ document.getElementById('ok').addEventListener('click', function () {
     username = document.getElementById('username').value;
     room_name = document.getElementById('room').value;
 
-    document.getElementById('login').style.display = 'none';
-    document.getElementById('game').style.display = 'flex';
-    document.getElementById('chat').style.display = 'flex';
-    start_chat();
-    start_game();
-    resize();
+    socket = io("/", {
+        closeOnBeforeunload: false
+    });
+
+    start_chat();
+
+    // Login
+    socket.emit('add user', {'username': username, 'room_name': room_name});
 });