[IMP] add bonus icons for each player

Added updateBonusIcons method to Field class
Added bonusActivated event listener

Close sdegueldre#15

src/client/game/index.js

@@ -37,6 +37,7 @@ export default class Game {
     this.on('playerScored', this.playerScored.bind(this));
     this.on('bonusSpawned', this.field.spawnBonus.bind(this.field));
     this.on('bonusCollected', this.field.setBonuses.bind(this.field);
+    this.on('bonusActivated', this.field.updateBonusIcons.bind(this.field));
     this.on('collision', ({pos: {x, y}, vel: {x: vx, y: vy}}) => {
       this.particleGroups.push(new CollisionParticles({
         x, y,

src/client/game/objects/Field.js

@@ -105,6 +105,25 @@ export default class Field extends BaseField {
     this.bonuses.forEach(b => this.graphics.removeChild(b.graphics));
     this.bonuses = bonusesPaddles.bonuses.map(b => new DoubleBall(b.x, b.y));
     this.bonuses.forEach(b => this.graphics.addChild(b.graphics));
+    this.updateBonusIcons(bonusesPaddles.players);
+  }
+
+  updateBonusIcons(players){
+    const bonusIconRadius = 10;
+    const iconMargin = 5;
+    const computeIconOffset = i => 150 + i * (bonusIconRadius * 2 + iconMargin) + bonusIconRadius * 1.3;
+
+    this.players.forEach((player, playerNumber) => {
+      player.bonusIcons.forEach(b => this.graphics.removeChild(b.graphics));
+      const direction = playerNumber % 2 ? 1 : -1;
+      player.bonusIcons = players[playerNumber].bonuses
+        .map((_, i) => {
+          const x = this.w / 2 + direction * computeIconOffset(i);
+          const y = 50 + bonusIconRadius;
+          return new DoubleBall(x, y, bonusIconRadius);
+        });
+      player.bonusIcons.forEach(b => this.graphics.addChild(b.graphics));
+    });
   }
 
   shake({x, y}){

src/client/game/objects/Paddle.js

@@ -9,6 +9,7 @@ export default class Paddle extends BasePaddle {
     this.graphics.drawRect(-this.w / 2, -this.h / 2, this.w, this.h);
     this.graphics.endFill();
     Object.assign(this, options);
+    this.bonusIcons = [];
   }
 
   set x(value){

src/common/game/objects/BasePaddle.js

@@ -33,6 +33,7 @@ module.exports = class BasePaddle {
     const bonus = this.bonuses.shift();
     if(bonus){
       bonus.activate(ball, field);
+      field.emit('bonusActivated');
     }
   }
 };

src/server/Room.js

@@ -75,6 +75,9 @@ module.exports = class Room {
         players: this.field.players,
       });
     });
+    this.field.on('bonusActivated', () => {
+      this.broadcast('bonusActivated', this.field.players);
+    });
     this.tick(this.field);
   }