User can join if game is started already

Fixed css for mobile devices

Webservice/Game.js

@@ -16,7 +16,6 @@ class Game {
         this.currentStatus = Game.STATUS.SETTING_UP;
         this.players = [];
         this.currentPlayerIndex = 0;
-        this.winnerIndex = 0;
         this.round = 0;
         this.hunter = new Hunter();
         this.playerNames = [];
@@ -54,7 +53,7 @@ class Game {
     }
 
     add_player(name) {
-        let canAddPlayer = this.players.length < Game.MAX_PLAYERS;
+        let canAddPlayer = this.players.length < Game.MAX_PLAYERS && this.currentStatus === Game.STATUS.SETTING_UP;
         if (canAddPlayer) this.players.push(new Player(name));
         return canAddPlayer;
     }
@@ -90,7 +89,6 @@ class Game {
         let index = this.players.findIndex(player => player.position >= Game.MAX_POSITION);
         if (index !== -1) {
             this.currentStatus = Game.STATUS.IS_WON;
-            this.winnerIndex = index;
         }
     }
 

Webservice/server.js

@@ -56,7 +56,7 @@ io.on('connection', socket => {
 
                 socket.emit('login', game[socket.room].get_player_index(socket.username));
                 socket.join(socket.room);
-                io.in(socket.room).emit('updatePlayerNames', game[socket.room].getPlayerNames());
+                io.in(socket.room).emit('update player names', game[socket.room].getPlayerNames());
 
                 if (game[socket.room].players.length === 1) io.to(socket.id).emit('first player');
 
@@ -87,7 +87,7 @@ io.on('connection', socket => {
             if (game[socket.room].current_player_is(socket.username)) socket.broadcast.to(socket.room).emit('card destroyed');
 
             game[socket.room].removePlayerName(socket.username);
-            io.in(socket.room).emit('updatePlayerNames', game[socket.room].getPlayerNames());
+            io.in(socket.room).emit('update player names', game[socket.room].getPlayerNames());
 
             socket.broadcast.to(socket.room).emit('user left', socket.username);
             game[socket.room].remove_player(socket.username);
@@ -150,19 +150,20 @@ io.on('connection', socket => {
 
         game[socket.room].finish_turn();
 
+        io.in(socket.room).emit('update hunter', game[socket.room].hunter.getPosition());
+
         io.in(socket.room).emit('player moved', {
             "next_player": game[socket.room].players[game[socket.room].currentPlayerIndex].name,
             "player": index,
             "position": position,
             "state": game[socket.room].currentStatus,
         });
-
-        io.in(socket.room).emit('update Hunter', game[socket.room].hunter.getPosition());
     });
 });
 
 function generate_log_message(room, user, type, message) {
     let color;
+
     switch (type) {
         case 'LEFT':
             color = '\x1b[31m';
@@ -185,12 +186,12 @@ function generate_log_message(room, user, type, message) {
         default:
             color = '\x1b[0m';
     }
+
     room = pad(10, room, ' ').substr(0, 10);
     user = pad(10, user, ' ').substr(0, 10);
     type = pad(10, type, ' ').substr(0, 10);
 
-    let reset_color = '\x1b[0m';
-    console.info("%s[%s] [%s] [%s]\x1b[0m %s", color, room, user, type, reset_color, message);
+    console.info("%s[%s] [%s] [%s] \x1b[36m%s\x1b[0m", color, room, user, type, message);
 }
 
 function getRandomCard(difficulty, room) {

data/fragen_12_07_21_new_format.json

@@ -807,7 +807,7 @@
   {
     "id": 36,
     "difficulty": 3,
-    "question": "Ein wütender Besucher des Events, dessen Ressourcen du gemanagt hast, kommt zu dir und beschwert sich darüber, dass sein Fleisch nicht ganz so war, wie er es wollte.\r\nWar es dein Fehler?",
+    "question": "Ein wütender Besucher des Events, dessen Ressourcen du gemanagt hast, kommt zu dir und beschwert sich darüber, dass sein Fleisch nicht ganz so war, wie er es wollte.\nWar es dein Fehler?",
     "answers": [
       {
         "text": "Ja, da die Zubereitung des Essens in deinen Zuständigkeitsbereich fällt",
@@ -2248,7 +2248,7 @@
         "status": false
       },
       {
-        "text": "Vorbereiten, Initiieren, Planen, Steuern, Abschließen\r\n",
+        "text": "Vorbereiten, Initiieren, Planen, Steuern, Abschließen",
         "status": true
       }
     ]

package.json

@@ -4,6 +4,6 @@
   "dependencies": {
     "@socket.io/admin-ui": "^0.2.0",
     "express": "^4.17.1",
-    "socket.io": "^4.1.2"
+    "socket.io": "^4.1.3"
   }
 }

public/css/game.css

@@ -5,7 +5,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background: url(/img/background.jpg) no-repeat center center fixed;
+    background: url(../img/background.jpg) no-repeat center center fixed;
     -webkit-background-size: cover; /* For WebKit*/
     -moz-background-size: cover; /* Mozilla*/
     -o-background-size: cover; /* Opera*/

public/css/header.css

@@ -48,7 +48,7 @@ header {
 @media only screen and (max-width: 980px) {
     header {
         height: 5em;
-        
+
     }
 
     .title {

public/css/index.css

@@ -55,20 +55,20 @@
 }
 
 @media only screen and (max-width: 980px) {
-
     #login {
         align-items: flex-start;
     }
 
+    #login form {
+        padding-top: 10px;
+    }
+
     #login label {
         font-size: 2.5em;
-
     }
 
     #login input, #login button {
-        height: 4.0em;
+        height: 2.0em;
         font-size: 2.5em;
-
     }
-
 }

public/index.html

@@ -4,22 +4,19 @@
     <meta charset="UTF-8" content="user-scalable=no, autoRotate:disabled" name="viewport"/>
     <title>Wer wird Projektmanager?</title>
 
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
-
     <link href="css/components.css" rel="stylesheet">
     <link href="css/header.css" rel="stylesheet">
-
     <link href="css/chat.css" rel="stylesheet">
     <link href="css/game.css" rel="stylesheet">
-
     <link href="css/index.css" rel="stylesheet">
 
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
     <link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon">
 </head>
 <body>
 <header>
     <div class="spielanleitung"><span
-            onclick="open_manual();">Spielanleitung</span></div>
+            onclick="open_manual();">Instructions</span></div>
     <div class="title">WWPM</div>
     <div class="build"><span>DATE_TO_BE_REPLACED</span><span><a href="COMMIT_LINK_TO_BE_REPLACED" target="_blank">COMMIT_TO_BE_REPLACED</a></span>
     </div>
@@ -29,13 +26,13 @@
         <div id="login">
             <form>
                 <h2 id="error"></h2>
-                <label for="username">Benutzername: </label>
-                <input id="username" name="username" placeholder="Benutzername" type="text">
+                <label for="username">Username: </label>
+                <input id="username" name="username" placeholder="Username" type="text">
 
-                <label for="room">Raumnummer: </label>
-                <input id="room" name="room" placeholder="Raumnummer" type="text">
+                <label for="room">Room name: </label>
+                <input id="room" name="room" placeholder="Room name" type="text">
 
-                <button id="ok" type="button">Bestätigen</button>
+                <button id="ok" type="button">Submit</button>
             </form>
         </div>
         <div id="game">
@@ -56,9 +53,11 @@
     <div id="modal">
         <div id="content">
             <div id="modal_header">
-                <h3 id="modal_title">Spielanleitung</h3>
-                <span><i class="material-icon"
-                         onclick="document.getElementById('modal').style.display = 'none';">close</i></span>
+                <h3 id="modal_title">Instructions</h3>
+                <span>
+                    <i class="material-icon"
+                       onclick="document.getElementById('modal').style.display = 'none';">close</i>
+                </span>
             </div>
             <div class="divider"></div>
             <div id="manual"></div>
@@ -69,9 +68,8 @@
 
 </footer>
 
-<script crossorigin="anonymous" referrerpolicy="no-referrer"
-        src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.4/browser/pixi.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.4/browser/pixi.min.js"></script>
 <script src="js/Card.js"></script>
 <script src="js/Button.js"></script>
 <script src="js/Sprite.js"></script>

public/js/Card.js

@@ -117,7 +117,7 @@ function Card(game_board_size, question, answer_1, answer_2, answer_3, answer_4,
         if (this.difficulty === 0) {
             color = 0xF47A93;
         }
-        this.buttons.push(new Button(color, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 1, this.answer_4.text, this.answer_4.status, function () {
+        this.buttons.push(new Button(color, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220, this.answer_4.text, this.answer_4.status, function () {
             if (_this.your_turn) {
                 select_answer(3, _this.answer_4.text);
             }
@@ -135,10 +135,8 @@ function Card(game_board_size, question, answer_1, answer_2, answer_3, answer_4,
             this.card.addChild(new Button(0xffffff, 0xcccccc, 0xffffff, this.card_width - 40, 100, this.card_x + 20, this.card_y + this.card_height - 120, "OK", null, function () {
                 if (answer !== null) {
                     if (_this.right_answer === answer) { //TODO: do this in backend instead to prevent cheating
-                        console.log("Richtig");
                         socket.emit('card finished', difficulty, true);
                     } else {
-                        console.log("Falsch");
                         socket.emit('card finished', difficulty, false);
                     }
                     show_card = false;
@@ -147,7 +145,7 @@ function Card(game_board_size, question, answer_1, answer_2, answer_3, answer_4,
                     rolled_number = null;
                 } else {
                     if (your_turn === true) {
-                        alert("Bitte wähle eine Antwortmöglichkeit aus");
+                        alert("Please choose your answer!");
                     } else {
                         show_card = false;
                         answer = null;

public/js/Sprite.js

@@ -18,4 +18,4 @@ function Sprite(x, y, slow) {
         sprite.width = size * 1.5;
         sprite.height = size * 1.5;
     };
-}
+}

public/js/game.js

@@ -1,7 +1,5 @@
 /*
     Images
-        background.jpg: https://pixabay.com/get/ge3fe775ba1a5bfd2cc937b0687982214d547e5cf538543560fc25041c070ad5b860d8dd24df751dbc5c7d5ede3f672e7_1920.jpg?attachment=
-        card_stack.png: https://www.google.de/url?sa=i&url=https%3A%2F%2Fwww.pngegg.com%2Fpt%2Fsearch%3Fq%3Drainha%2Bde%2Bcopas&psig=AOvVaw3wwfk87wAXBxqmdXnoGSfe&ust=1623254731054000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCMjUoaG1iPECFQAAAAAdAAAAABA5
         dice.svg: https://www.svgrepo.com/download/198836/gambler-casino.svg
         sprite.jpg: https://media.istockphoto.com/photos/gray-granite-stone-texture-seamless-square-background-tile-ready-picture-id1096464726
 */
@@ -57,8 +55,8 @@ function start_game() {
     sprites.forEach(sprite => app.stage.addChild(sprite.getSprite()));
 
     // Red border
-    let red_border = generate_red_border(new PIXI.Graphics(), 1, 9);
-    app.stage.addChild(red_border);
+    let hunter = generate_hunter(new PIXI.Graphics(), 1, 9);
+    app.stage.addChild(hunter);
 
 
     // Player circles
@@ -77,26 +75,17 @@ function start_game() {
 
     // Card stacks
     let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack_1.png'), 3, 3, function () {
-        if (diced && !show_card && rolled_number === 1) {
-            console.log("1");
-            socket.emit('get card', 1);
-        }
+        if (diced && !show_card && rolled_number === 1) socket.emit('get card', 1);
     });
     app.stage.addChild(cards_1);
 
     let cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack_2.png'), 5, 3, function () {
-        if (diced && !show_card && rolled_number === 2) {
-            console.log("2");
-            socket.emit('get card', 2);
-        }
+        if (diced && !show_card && rolled_number === 2) socket.emit('get card', 2);
     });
     app.stage.addChild(cards_2);
 
     let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack_3.png'), 7, 3, function () {
-        if (diced && !show_card && rolled_number === 3) {
-            console.log("3");
-            socket.emit('get card', 3);
-        }
+        if (diced && !show_card && rolled_number === 3) socket.emit('get card', 3);
     });
     app.stage.addChild(cards_3);
 
@@ -112,9 +101,7 @@ function start_game() {
     dice.buttonMode = true;
     dice.defaultCursor = 'pointer';
     dice.on('pointerdown', function () {
-        if (!diced) {
-            socket.emit('roll dice');
-        }
+        if (!diced) socket.emit('roll dice');
     });
     app.stage.addChild(dice);
 
@@ -127,7 +114,6 @@ function start_game() {
     logo.y = sprite_size * 5.5 - sprite_size * 0.2;
     logo.width = sprite_size * 3.5;
     logo.height = sprite_size * 1.5;
-    // logo.rotation -= Math.PI / 8;
     app.stage.addChild(logo);
 
 
@@ -174,13 +160,11 @@ function start_game() {
     score_button.defaultCursor = 'pointer';
     score_button.on('pointerdown', function () {
         card = new Card(game_board_size, "",
-            {"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("Kein Spieler"), "status": false},
-            {"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("Kein Spieler"), "status": false},
-            {"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("Kein Spieler"), "status": false},
-            {
-                "text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("Kein Spieler"),
-                "status": false
-            }, 0, false);
+            {"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("N/A"), "status": false},
+            {"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("N/A"), "status": false},
+            {"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("N/A"), "status": false},
+            {"text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("N/A"), "status": false},
+            0, false);
         card.showCard();
         show_card = true;
     });
@@ -188,11 +172,11 @@ function start_game() {
     app.stage.addChild(score_button);
     score_button.addChild(score_button_text);
 
-    socket.on('updatePlayerNames', function (p) {
+
+    socket.on('update player names', function (p) {
         playerNames = p;
     });
 
-
     socket.on('first player', function () {
         my_turn.text = "Your Turn";
     });
@@ -208,11 +192,9 @@ function start_game() {
     });
 
     socket.on('card', function (data) {
-        let u = data.username;
-        let q = data.card.question;
-        let a = data.card.answers;
-        let d = data.card.difficulty;
-        card = new Card(game_board_size, q, a[0], a[1], a[2], a[3], d, u === username);
+        if (show_card === true) card.destroyCard();
+
+        card = new Card(game_board_size, data.card.question, data.card['answers'][0], data.card['answers'][1], data.card['answers'][2], data.card['answers'][3], data.card['difficulty'], data.username === username);
         card.showCard();
         show_card = true;
     });
@@ -270,12 +252,12 @@ function start_game() {
 
         if (data.state === 2 || data.state === 3) {
             card = new Card(game_board_size, "",
-                {"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("Kein Spieler"), "status": false},
-                {"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("Kein Spieler"), "status": false},
-                {"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("Kein Spieler"), "status": false},
-                {"text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("Kein Spieler"), "status": false},
+                {"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("N/A"), "status": false},
+                {"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("N/A"), "status": false},
+                {"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("N/A"), "status": false},
+                {"text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("N/A"), "status": false},
                 0, false, data.state);
-            red_border.clear();
+            hunter.clear();
             card.showCard();
             show_card = true;
         }
@@ -283,12 +265,12 @@ function start_game() {
         if (next_player === username) my_turn.text = "Your Turn";
     });
 
-    socket.on('update Hunter', function (position) {
+    socket.on('update hunter', function (position) {
         let x = sprites[position].coord_x;
         let y = sprites[position].coord_y;
-        red_border.clear();
-        red_border = generate_red_border(new PIXI.Graphics(), x, y);
-        app.stage.addChild(red_border);
+        hunter.clear();
+        hunter = generate_hunter(new PIXI.Graphics(), x, y);
+        app.stage.addChild(hunter);
     });
 
     resize();
@@ -306,7 +288,7 @@ function generate_card_stack(sprite, x, y, onclick) {
     return sprite;
 }
 
-function generate_red_border(graphics, x, y) {
+function generate_hunter(graphics, x, y) {
     graphics.lineStyle(sprite_size * 0.10, 0x862323, 1);
     graphics.drawRect(sprite_size * x - sprite_size * 0.2, sprite_size * y - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 1.5);
     return graphics;
@@ -331,6 +313,7 @@ function generate_circle(graphics, x, y, color, offset) {
             graphics.beginFill(0xFFFFFF, 1);
             break;
     }
+
     switch (offset) {
         case 1:
             graphics.drawCircle(sprite_size * x - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4);
@@ -345,6 +328,7 @@ function generate_circle(graphics, x, y, color, offset) {
             graphics.drawCircle(sprite_size * x + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4);
             break; // lower right
     }
+
     graphics.endFill();
     return graphics;
 }

public/js/index.js

@@ -2,8 +2,11 @@ let username;
 let room_name;
 
 window.addEventListener('beforeunload', function (e) {
-    // Prevent user from exiting page
-    e.preventDefault();
+    e.preventDefault(); // Prevent user from exiting page
+});
+
+window.addEventListener('keydown', function (event) {
+    if (event.code === 'Enter' && app == null) document.getElementById('ok').click();
 });
 
 document.getElementById('ok').addEventListener('click', function () {