Webservice/Game.js

@@ -19,6 +19,7 @@ class Game {
         this.winnerIndex = 0;
         this.round = 0;
         this.hunter = new Hunter();
+        this.playerNames = [];
     }
 
     finish_turn() {
@@ -88,6 +89,18 @@ class Game {
             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/Player.js

@@ -6,8 +6,14 @@ class Player {
     }
 
     move_by(amount) {
+        if(this.position > 11){
+            this.position++;
+        }else if(this.position+amount > 11){
+            this.position = 12;
+        }else{
             this.position += amount;
         }
+    }
 }
 
 module.exports = Player;

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,6 +80,10 @@ io.on('connection', socket => {
 
     socket.on('disconnect', function () {
         if (game[socket.room] !== undefined && addedUser) {
+
+            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);
 

public/js/Sprite.js

@@ -1,5 +1,9 @@
-function Sprite(x, y) {
+function Sprite(x, y, slow) {
+    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,17 +61,17 @@ 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);
 
 
@@ -162,6 +164,10 @@ function start_game() {
     score_button_text.x = sprite_size * 3 + 25 - sprite_size * 0.2;
     score_button_text.y = sprite_size * 7 + 25 - sprite_size * 0.2 + sprite_size * 0.5;
 
+    socket.on('updatePlayerNames', function (playerNames) {
+       
+        this.playerNames = playerNames;
+        
         score_button = new PIXI.Graphics();
         score_button.lineStyle(4, 0x000000, 1);
         score_button.beginFill(0x7d7d7d);
@@ -172,17 +178,18 @@ 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('first player', function () {
         my_turn.text = "Your Turn";
@@ -230,25 +237,25 @@ function start_game() {
             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;
         }
@@ -273,7 +280,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 +299,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: