Merge branch 'main' into mobile_design

Webservice/Game.js

@@ -4,7 +4,7 @@ const Hunter = require("./Hunter");
 class Game {
 
     static MAX_PLAYERS = 4;
-    static WIN_POSITION = 16;
+    static MAX_POSITION = 16;
     static STATUS = {
         SETTING_UP: 0,
         ONGOING: 1,
@@ -19,6 +19,7 @@ class Game {
         this.winnerIndex = 0;
         this.round = 0;
         this.hunter = new Hunter();
+        this.playerNames = [];
     }
 
     finish_turn() {
@@ -41,7 +42,10 @@ class Game {
 
     #finish_round() {
         this.round++;
-        if (this.round >= 5) {
+        if (this.players.some(player => player.position >= Game.MAX_POSITION / 2)) {
+            this.hunter.isAlive = true;
+        }
+        if (this.hunter.isAlive) {
             this.hunter.move_by(1);
             this.hunter.hunt(this.players);
         }
@@ -82,12 +86,24 @@ class Game {
     update_game_status() {
         if (!this.players.some(player => player.isAlive === true)) this.currentStatus = Game.STATUS.IS_DRAW;
 
-        let index = this.players.findIndex(player => player.position >= Game.WIN_POSITION);
+        let index = this.players.findIndex(player => player.position >= Game.MAX_POSITION);
         if (index !== -1) {
             this.currentStatus = Game.STATUS.IS_WON;
             this.winnerIndex = index;
         }
     }
+
+    getPlayerNames(){
+        return this.playerNames;
+    }
+
+    addPlayerName(playerName){
+        this.playerNames.push(playerName);
+    }
+
+    removePlayerName(playerName){
+        this.playerNames.splice(this.playerNames.indexOf(playerName), 1)
+    }
 }
 
 module.exports = Game;

Webservice/Hunter.js

@@ -1,6 +1,7 @@
 class Hunter {
     constructor() {
         this.position = 0;
+        this.isAlive = false;
     }
 
     move_by(amount) {

Webservice/Player.js

@@ -6,7 +6,15 @@ class Player {
     }
 
     move_by(amount) {
-        this.position += amount;
+        if (this.position !== 16) {
+            if (this.position > 11) {
+                this.position++;
+            } else if (this.position + amount > 11) {
+                this.position = 12;
+            } else {
+                this.position += amount;
+            }
+        }
     }
 }
 

Webservice/server.js

@@ -50,10 +50,12 @@ io.on('connection', socket => {
 
         if (game[socket.room].add_player(socket.username)) {
 
+            game[socket.room].addPlayerName(data.username);
             addedUser = true;
 
             socket.emit('login');
             socket.join(socket.room);
+            io.in(socket.room).emit('updatePlayerNames', game[socket.room].getPlayerNames());
 
             if (game[socket.room].players.length === 1) io.to(socket.id).emit('first player');
 
@@ -61,7 +63,7 @@ io.on('connection', socket => {
 
             generate_log_message(socket.room, socket.username, "JOINED", "");
         } else {
-            io.to(socket.id).emit('error', 'Game started already or room has two many members');
+            io.to(socket.id).emit('error', 'Game started already or room has too many members');
         }
     });
 
@@ -78,11 +80,14 @@ io.on('connection', socket => {
 
     socket.on('disconnect', function () {
         if (game[socket.room] !== undefined && addedUser) {
+            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());
+
             socket.broadcast.to(socket.room).emit('user left', socket.username);
             game[socket.room].remove_player(socket.username);
 
-            // TODO Close card if card is opened and active player left
-
             socket.leave(socket.room);
 
             if (game[socket.room].players.length === 0) delete game[socket.room];

public/css/components.css

@@ -96,6 +96,11 @@ main {
     height: calc(100% - 50px);
 }
 
+#manual {
+    width: 100%;
+    height: calc(100% - 50px);
+}
+
 @media only screen and (max-width: 980px) {
     #main {
         display: grid;

public/index.html

@@ -17,7 +17,7 @@
 <body>
 <header>
     <div class="spielanleitung"><span
-            onclick="document.getElementById('modal').style.display = 'block';">Spielanleitung</span></div>
+            onclick="open_manual();">Spielanleitung</span></div>
     <div class="title">PM-Game</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>
@@ -59,11 +59,7 @@
                          onclick="document.getElementById('modal').style.display = 'none';">close</i></span>
             </div>
             <div class="divider"></div>
-            <iframe height="678"
+            <div id="manual"></div>
-                    id="spielanleitung"
-                    src="data/Spielanleitung.pdf"
-                    width="500">
-            </iframe>
         </div>
     </div>
 </main>

public/js/Card.js

@@ -1,15 +1,15 @@
-function Card(game_board_size, s, a1, a2, a3, a4, d, your_turn) {
+function Card(game_board_size, question, answer_1, answer_2, answer_3, answer_4, difficulty, your_turn) {
     this.card = new PIXI.Graphics();
-    this.s = s;
+    this.question = question;
-    this.a1 = a1;
+    this.answer_1 = answer_1;
-    this.a2 = a2;
+    this.answer_2 = answer_2;
-    this.a3 = a3;
+    this.answer_3 = answer_3;
-    this.a4 = a4;
+    this.answer_4 = answer_4;
-    if (a1.status) this.right_answer = this.a1.text;
+    if (answer_1.status) this.right_answer = this.answer_1.text;
-    if (a2.status) this.right_answer = this.a2.text;
+    if (answer_2.status) this.right_answer = this.answer_2.text;
-    if (a3.status) this.right_answer = this.a3.text;
+    if (answer_3.status) this.right_answer = this.answer_3.text;
-    if (a4.status) this.right_answer = this.a4.text;
+    if (answer_4.status) this.right_answer = this.answer_4.text;
-    this.d = d;
+    this.difficulty = difficulty;
     this.your_turn = your_turn;
     this.card_x = game_board_size * 0.25 + 2.5;
     this.card_y = game_board_size / 2 - game_board_size * 0.72 / 2 + 2.5;
@@ -33,64 +33,89 @@ function Card(game_board_size, s, a1, a2, a3, a4, d, your_turn) {
             wordWrapWidth: game_board_size * 0.5 - 20,
         });
 
-        this.card.lineStyle(20, 0x6C9A8B, 1);
         this.card.beginFill(0xffffff);
-        this.card.drawRoundedRect(this.card_x, this.card_y, this.card_width, this.card_height, 10);
+        switch (difficulty) {
+            case 1:
+                this.card.lineStyle(30, 0x6C9A8B, 1);
+                break;
+            case 2:
+                this.card.lineStyle(30, 0xFFDDA1, 1);
+                break;
+            case 3:
+                this.card.lineStyle(30, 0xF47A93, 1);
+                break;
+        }
+        this.card.beginFill(0xFFFFFF);
+        this.card.moveTo(this.card_x + 50, this.card_y);
+        this.card.lineTo(this.card_x + 0, this.card_y + 50);
+        this.card.lineTo(this.card_x + 0, this.card_y + this.card_height);
+        this.card.lineTo(this.card_x + 50, this.card_y + this.card_height + 50);
+        this.card.lineTo(this.card_x + this.card_width - 50, this.card_y + this.card_height + 50);
+        this.card.lineTo(this.card_x + this.card_width, this.card_y + this.card_height);
+        this.card.lineTo(this.card_x + this.card_width, this.card_y + 50);
+        this.card.lineTo(this.card_x + this.card_width - 50, this.card_y + 0);
+        this.card.closePath();
         this.card.endFill();
 
         let header;
-        if (this.d === 0) {
+        if (this.difficulty === 0) {
             header = new PIXI.Text("Scoreboard", header_style);
         } else {
-            header = new PIXI.Text("Schwierigkeit " + this.d, header_style);
+            header = new PIXI.Text("Schwierigkeit " + this.difficulty, header_style);
         }
         header.x = this.card_x + 20 + this.card.width / 2 - header.width / 2 - 2.5 - 20;
         header.y = this.card_y + 20;
         this.card.addChild(header);
 
-        const basicText = new PIXI.Text(this.s, style);
+        if (difficulty === 0) {
+            for (let i = 0; i < positions.length; i++) {
+                if (positions[i] > 15) this.question = "Gewinner: " + playerNames[i];
+            }
+        }
+
+        const basicText = new PIXI.Text(this.question, style);
         basicText.x = this.card_x + 20;
         basicText.y = this.card_y + 50 + header.height;
         this.card.addChild(basicText);
 
         // Answers
         let color = 0xffffff;
-        if (this.d === 0) {
+        if (this.difficulty === 0) {
             color = 0xFFDDA1;
         }
-        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 * 4, this.a1.text, this.a1.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 * 4, this.answer_1.text, this.answer_1.status, function () {
             if (_this.your_turn) {
-                select_answer(0, _this.a1.text);
+                select_answer(0, _this.answer_1.text);
             }
         }));
 
         color = 0xffffff;
-        if (this.d === 0) {
+        if (this.difficulty === 0) {
             color = 0x4169E1;
         }
-        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 * 3, this.a2.text, this.a2.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 * 3, this.answer_2.text, this.answer_2.status, function () {
             if (_this.your_turn) {
-                select_answer(1, _this.a2.text);
+                select_answer(1, _this.answer_2.text);
             }
         }));
 
         color = 0xffffff;
-        if (this.d === 0) {
+        if (this.difficulty === 0) {
             color = 0x6C9A8B;
         }
-        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 * 2, this.a3.text, this.a3.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 * 2, this.answer_3.text, this.answer_3.status, function () {
             if (_this.your_turn) {
-                select_answer(2, _this.a3.text);
+                select_answer(2, _this.answer_3.text);
             }
         }));
 
         color = 0xffffff;
-        if (this.d === 0) {
+        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.a4.text, this.a4.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 * 1, this.answer_4.text, this.answer_4.status, function () {
             if (_this.your_turn) {
-                select_answer(3, _this.a4.text);
+                select_answer(3, _this.answer_4.text);
             }
         }));
 
@@ -98,32 +123,38 @@ function Card(game_board_size, s, a1, a2, a3, a4, d, your_turn) {
 
 
         // OK-Button
-        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 (difficulty === 0 && (positions[0] > 15 || positions[1] > 15 || positions[2] > 15 || positions[3] > 15)) {
-            if (answer !== null) {
+            this.card.addChild(new Button(0xffffff, 0xcccccc, 0xffffff, this.card_width - 40, 100, this.card_x + 20, this.card_y + this.card_height - 120, "New Game", null, function () {
-                if (_this.right_answer === answer) { //TODO: do this in backend instead to prevent cheating
+                window.location.reload();
-                    console.log("Richtig");
+            }).getButton());
-                    socket.emit('card finished', d, true);
+        } else {
-                } else {
+            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 () {
-                    console.log("Falsch");
+                if (answer !== null) {
-                    socket.emit('card finished', d, false);
+                    if (_this.right_answer === answer) { //TODO: do this in backend instead to prevent cheating
-                }
+                        console.log("Richtig");
-                show_card = false;
+                        socket.emit('card finished', difficulty, true);
-                answer = null;
+                    } else {
-                diced = false;
+                        console.log("Falsch");
-                rolled_number = null;
+                        socket.emit('card finished', difficulty, false);
-            } else {
+                    }
-                if (your_turn === true) {
-                    alert("Bitte wähle eine Antwortmöglichkeit aus");
-                } else {
                     show_card = false;
                     answer = null;
                     diced = false;
                     rolled_number = null;
-                    card.destroyCard();
+                } else {
-                    border_card_stack.clear();
+                    if (your_turn === true) {
+                        alert("Bitte wähle eine Antwortmöglichkeit aus");
+                    } else {
+                        show_card = false;
+                        answer = null;
+                        diced = false;
+                        rolled_number = null;
+                        card.destroyCard();
+                        border_card_stack.clear();
+                    }
                 }
-            }
+            }).getButton());
-        }).getButton());
+        }
 
         app.stage.addChild(this.card);
     };

public/js/Sprite.js

@@ -1,5 +1,9 @@
-function Sprite(x, y) {
+function Sprite(x, y, slow) {
-    this.sprite = PIXI.Sprite.from('/img/sprite.jpg');
+    if(slow){
+        this.sprite = PIXI.Sprite.from('/img/spriteSlow.jpg');
+    }else{
+        this.sprite = PIXI.Sprite.from('/img/sprite.jpg');
+    }
     this.coord_x = x;
     this.coord_y = y;
 

public/js/game.js

@@ -22,24 +22,26 @@ let game_board_size = 2000;
 let max_size = calculate_size();
 let sprite_size = Math.floor(game_board_size / 11);
 
+let playerNames = [];
+
 // fields
 let sprites = [
-    new Sprite(9, 9), // lower right
+    new Sprite(1, 9, false), // lower left
-    new Sprite(7, 9),
+    new Sprite(1, 7, false),
-    new Sprite(5, 9),
+    new Sprite(1, 5, false),
-    new Sprite(3, 9),
+    new Sprite(1, 3, false),
-    new Sprite(1, 9), // upper right
+    new Sprite(1, 1, false), // upper left
-    new Sprite(1, 7),
+    new Sprite(3, 1, false),
-    new Sprite(1, 5),
+    new Sprite(5, 1, false),
-    new Sprite(1, 3),
+    new Sprite(7, 1, false),
-    new Sprite(1, 1), // upper left
+    new Sprite(9, 1, false), // upper right
-    new Sprite(3, 1),
+    new Sprite(9, 3, false),
-    new Sprite(5, 1),
+    new Sprite(9, 5, false),
-    new Sprite(7, 1),
+    new Sprite(9, 7, false),
-    new Sprite(9, 1), // lower left
+    new Sprite(9, 9, true), // lower right
-    new Sprite(9, 3),
+    new Sprite(7, 9, true),
-    new Sprite(9, 5),
+    new Sprite(5, 9, true),
-    new Sprite(9, 7)
+    new Sprite(3, 9, true)
 ];
 
 function start_game() {
@@ -59,22 +61,22 @@ function start_game() {
     app.stage.addChild(red_border);
 
 
-    // White circles
+    // Player circles
-    let player_a = generate_circle(new PIXI.Graphics(), 9, 9, 'yellow', 1);
+    let player_a = generate_circle(new PIXI.Graphics(), 1, 9, 'yellow', 1);
     app.stage.addChild(player_a);
 
-    let player_b = generate_circle(new PIXI.Graphics(), 9, 9, 'blue', 2);
+    let player_b = generate_circle(new PIXI.Graphics(), 1, 9, 'blue', 2);
     app.stage.addChild(player_b);
 
-    let player_c = generate_circle(new PIXI.Graphics(), 9, 9, 'green', 3);
+    let player_c = generate_circle(new PIXI.Graphics(), 1, 9, 'green', 3);
     app.stage.addChild(player_c);
 
-    let player_d = generate_circle(new PIXI.Graphics(), 9, 9, 'red', 4);
+    let player_d = generate_circle(new PIXI.Graphics(), 1, 9, 'red', 4);
     app.stage.addChild(player_d);
 
 
     // Card stacks
-    let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () {
+    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);
@@ -82,7 +84,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 () {
+    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);
@@ -90,7 +92,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 () {
+    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);
@@ -172,18 +174,25 @@ function start_game() {
     score_button.defaultCursor = 'pointer';
     score_button.on('pointerdown', function () {
         card = new Card(game_board_size, "",
-            {"text": "Spieler 1: " + positions[0], "status": false},
+            {"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("Kein Spieler"), "status": false},
-            {"text": "Spieler 2: " + positions[1], "status": false},
+            {"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("Kein Spieler"), "status": false},
-            {"text": "Spieler 3: " + positions[2], "status": false},
+            {"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("Kein Spieler"), "status": false},
-            {"text": "Spieler 4: " + positions[3], "status": false}, 0, false);
+            {
+                "text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("Kein Spieler"),
+                "status": false
+            }, 0, false);
         card.showCard();
         show_card = true;
     });
 
-
     app.stage.addChild(score_button);
     score_button.addChild(score_button_text);
 
+    socket.on('updatePlayerNames', function (p) {
+        playerNames = p;
+    });
+
+
     socket.on('first player', function () {
         my_turn.text = "Your Turn";
     });
@@ -223,36 +232,53 @@ function start_game() {
         let position = data.position;
         let next_player = data.next_player;
 
-        let x = sprites[position].coord_x;
+        let x, y;
-        let y = sprites[position].coord_y;
+        if (position < 16) {
+            x = sprites[position].coord_x;
+            y = sprites[position].coord_y;
+        } else {
+            x = 1;
+            y = 9;
+        }
 
         switch (player) {
             case 0:
                 positions[0] = data.position;
                 player_a.clear();
-                player_a = generate_circle(new PIXI.Graphics(), y, x, 'yellow', 1);
+                player_a = generate_circle(new PIXI.Graphics(), x, y, 'yellow', 1);
                 app.stage.addChild(player_a);
                 break;
             case 1:
                 positions[1] = data.position;
                 player_b.clear();
-                player_b = generate_circle(new PIXI.Graphics(), y, x, 'blue', 2);
+                player_b = generate_circle(new PIXI.Graphics(), x, y, 'blue', 2);
                 app.stage.addChild(player_b);
                 break;
             case 2:
                 positions[2] = data.position;
                 player_c.clear();
-                player_c = generate_circle(new PIXI.Graphics(), y, x, 'green', 3);
+                player_c = generate_circle(new PIXI.Graphics(), x, y, 'green', 3);
                 app.stage.addChild(player_c);
                 break;
             case 3:
                 positions[3] = data.position;
                 player_d.clear();
-                player_d = generate_circle(new PIXI.Graphics(), y, x, 'red', 4);
+                player_d = generate_circle(new PIXI.Graphics(), x, y, 'red', 4);
                 app.stage.addChild(player_d);
                 break;
         }
 
+        if (x === 1 && y === 9 && data.position !== 0) {
+            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);
+            card.showCard();
+            show_card = true;
+        }
+
         if (next_player === username) my_turn.text = "Your Turn";
     });
 
@@ -273,7 +299,7 @@ function generate_card_stack(sprite, x, y, onclick) {
 
 function generate_red_border(graphics) {
     graphics.lineStyle(sprite_size * 0.10, 0x862323, 1);
-    graphics.drawRect(sprite_size * 9 - sprite_size * 0.2, sprite_size * 9 - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 1.5);
+    graphics.drawRect(sprite_size * 1 - sprite_size * 0.2, sprite_size * 9 - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 1.5);
     return graphics;
 }
 
@@ -292,6 +318,9 @@ function generate_circle(graphics, x, y, color, offset) {
         case 'blue':
             graphics.beginFill(0x4169E1, 1);
             break;
+        case 'white':
+            graphics.beginFill(0xFFFFFF, 1);
+            break;
     }
     switch (offset) {
         case 1:

public/js/index.js

@@ -52,3 +52,13 @@ document.getElementById('ok').addEventListener('click', function () {
         addLogMessage(data + ' left');
     });
 });
+
+function open_manual() {
+    let frame = document.createElement('iframe');
+    frame.src = 'data/Spielanleitung.pdf';
+    frame.id = 'spielanleitung';
+
+    document.getElementById('manual').innerHTML = '';
+    document.getElementById('manual').appendChild(frame);
+    document.getElementById('modal').style.display = 'block';
+}