- Refactoring

- Show which player is active

Webservice/server.js

@@ -125,12 +125,16 @@ io.on('connection', socket => {
                 generate_log_message(socket.room, socket.username, "MOVE", difficulty);
             }
             io.in(socket.room).emit('card destroyed');
+            gameState[socket.room].finish_turn();
+
             let index = gameState[socket.room].get_player_index(socket.username);
+            let next_player = gameState[socket.room].players[gameState[socket.room].currentPlayerIndex].name;
+
             io.in(socket.room).emit('player moved', {
+                "next_player": next_player,
                 "player": index,
                 "position": gameState[socket.room].players[index].position
             });
-            gameState[socket.room].finish_turn();
         }
     });
 });

public/js/game.js

@@ -14,20 +14,12 @@ let rolled_number = null;
 let game = document.getElementById('game');
 let app;
 let border_card_stack = new PIXI.Graphics();
+let my_turn;
 
 let game_board_size = 2000;
 let max_size = calculate_size();
 let sprite_size = Math.floor(game_board_size / 11);
 
-const rolled_number_style = new PIXI.TextStyle({
-    fontFamily: 'Arial',
-    fontSize: 140,
-    fontWeight: 'bold',
-    wordWrap: true,
-    wordWrapWidth: game_board_size * 0.5 - 20,
-});
-let rolled_number_text = new PIXI.Text("", rolled_number_style);
-
 // fields
 let sprites = [
     new Sprite(9, 9), // lower right
@@ -105,7 +97,7 @@ function start_game() {
     app.stage.addChild(cards_3);
 
 
-    // Die
+    // Dice
     let diceTexture = PIXI.Texture.from('/img/dice.svg');
     let dice = new PIXI.Sprite(diceTexture);
     dice.x = sprite_size * 7 - sprite_size * 0.2;
@@ -134,6 +126,29 @@ function start_game() {
     // logo.rotation -= Math.PI / 8;
     app.stage.addChild(logo);
 
+
+    my_turn = new PIXI.Text("", new PIXI.TextStyle({
+        fontFamily: 'Arial',
+        fontSize: 70,
+        fontWeight: 'bold',
+    }));
+    my_turn.x = sprite_size * 3;
+    my_turn.y = sprite_size * 8;
+    app.stage.addChild(my_turn);
+
+
+    let rolled_number_text = new PIXI.Text("", new PIXI.TextStyle({
+        fontFamily: 'Arial',
+        fontSize: 140,
+        fontWeight: 'bold',
+        wordWrap: true,
+        wordWrapWidth: game_board_size * 0.5 - 20,
+    }));
+    rolled_number_text.x = sprite_size * 7 - sprite_size * 0.2 + dice.width / 2 - rolled_number_text.width / 2;
+    rolled_number_text.y = sprite_size * 6 - sprite_size * 0.2;
+    app.stage.addChild(rolled_number_text);
+
+
     socket.on('dice', function (randomInt) {
         rolled_number = randomInt;
         diced = true;
@@ -141,10 +156,7 @@ function start_game() {
         border_card_stack.lineStyle(15, 0x862323, 1);
         border_card_stack.drawRoundedRect(sprite_size * (1 + 2 * rolled_number) - sprite_size * 0.2, sprite_size * 3 - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 3 * 0.72, 10);
 
-        rolled_number_text = new PIXI.Text(rolled_number, rolled_number_style);
+        rolled_number_text.text = rolled_number;
-        rolled_number_text.x = sprite_size * 7 - sprite_size * 0.2 + dice.width / 2 - rolled_number_text.width / 2;
-        rolled_number_text.y = sprite_size * 6 - sprite_size * 0.2;
-        app.stage.addChild(rolled_number_text);
     });
 
     socket.on('card', function (data) {
@@ -161,18 +173,21 @@ function start_game() {
         diced = false;
         show_card = false;
         card.destroyCard();
-        rolled_number_text.destroy();
+        rolled_number_text.text = "";
         border_card_stack.clear();
     });
 
-    socket.on('player moved', function(data){
+    socket.on('player moved', function (data) {
+        my_turn.text = "";
+
         let player = data.player;
         let position = data.position;
+        let next_player = data.next_player;
 
         let x = sprites[position].coord_x;
         let y = sprites[position].coord_y;
 
-        switch(player){
+        switch (player) {
             case 0:
                 player_a.clear();
                 player_a = generate_circle(new PIXI.Graphics(), y, x, 'yellow', 1);
@@ -194,6 +209,8 @@ function start_game() {
                 app.stage.addChild(player_d);
                 break;
         }
+
+        if (next_player === username) my_turn.text = "Your Turn";
     });
 
     resize();
@@ -219,17 +236,33 @@ function generate_red_border(graphics) {
 
 function generate_circle(graphics, x, y, color, offset) {
     graphics.lineStyle(0);
-    switch (color){
+    switch (color) {
-        case 'yellow': graphics.beginFill(0xFFDDA1, 1); break;
+        case 'yellow':
-        case 'red': graphics.beginFill(0xF47A93, 1); break;
+            graphics.beginFill(0xFFDDA1, 1);
-        case 'green': graphics.beginFill(0x6C9A8B, 1); break;
+            break;
-        case 'blue': graphics.beginFill(0x4169E1, 1); break;
+        case 'red':
+            graphics.beginFill(0xF47A93, 1);
+            break;
+        case 'green':
+            graphics.beginFill(0x6C9A8B, 1);
+            break;
+        case 'blue':
+            graphics.beginFill(0x4169E1, 1);
+            break;
     }
-    switch(offset){
+    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); break; // upper left
+        case 1:
-        case 2: 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; // upper right
+            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);
-        case 3: 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 left
+            break; // upper left
-        case 4: 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
+        case 2:
+            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; // upper right
+        case 3:
+            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 left
+        case 4:
+            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;