Update player nicknames on JS side

- Add a player JS object

Author: cveneziani

app/assets/javascripts/battletype.js

@@ -6,6 +6,7 @@
 //= require battletype/combat_zone
 //= require battletype/dockyard
 //= require battletype/ship
+//= require battletype/player
 //= require battletype/life_o_meter
 
 (function () {
@@ -32,6 +33,9 @@
 
       this.mothership = Dockyard.launchMothership(this.$combatZone);
 
+      this.player   = Player.build(document.getElementById("current_player_nickname"));
+      this.opponent = Player.build(document.getElementById("opponent_nickname"));
+
       this.playerLifeOMeter   = LifeOMeter.activate(document.getElementById("life_player"));
       this.opponentLifeOMeter = LifeOMeter.activate(document.getElementById("life_opponent"));
 
@@ -118,9 +122,18 @@
       case "player_joined":
         if (payload.player_id != this.playerId) {
           var nickname = payload.nickname;
+          Battletype.opponent.nickname = payload.nickname;
+          this._logs.displayMessage(payload.code);
+        }
+        break;
+      case "player_nickname_changed":
+        var nickname = payload.nickname;
 
-          this.$combatZone.find("#opponent_nickname").text(nickname); // TODO tell-dont-ask
+        if (payload.player_id == this.playerId) {
+          Battletype.player.nickname = payload.nickname;
           this._logs.displayMessage(payload.code);
+        } else {
+          Battletype.opponent.nickname = payload.nickname;
         }
         break;
       }

app/assets/javascripts/battletype/logs.js

@@ -1,24 +1,26 @@
 (function () {
   var LOG_CODES_AND_TYPES_MAP = {
-    "failed_attack":      "attack",
-    "failed_bombing":     "attack",
-    "failed_defense":     "defense",
-    "game_won":           "game",
-    "player_joined":      "player",
-    "successful_attack":  "attack",
-    "successful_bombing": "bomb",
-    "successful_defense": "defense",
+    "failed_attack":           "attack",
+    "failed_bombing":          "attack",
+    "failed_defense":          "defense",
+    "game_won":                "game",
+    "player_joined":           "player",
+    "player_nickname_changed": "player",
+    "successful_attack":       "attack",
+    "successful_bombing":      "bomb",
+    "successful_defense":      "defense",
   };
 
   var LOG_CODES_AND_MESSAGES_MAP = {
-    "failed_attack":      "OOPS! Attack failed",
-    "failed_bombing":     "OOPS! Bombing failed",
-    "failed_defense":     "OOPS! Defense failed",
-    "game_won":           "Game finished!",
-    "player_joined":      "Opponent joined",
-    "successful_attack":  "New ship launched!",
-    "successful_bombing": "Mothership hit!",
-    "successful_defense": "Ship destroyed!",
+    "failed_attack":           "OOPS! Attack failed",
+    "failed_bombing":          "OOPS! Bombing failed",
+    "failed_defense":          "OOPS! Defense failed",
+    "game_won":                "Game finished!",
+    "player_joined":           "Opponent joined",
+    "player_nickname_changed": "Nickname changed",
+    "successful_attack":       "New ship launched!",
+    "successful_bombing":      "Mothership hit!",
+    "successful_defense":      "Ship destroyed!",
   };
 
   var ERROR_CODES_AND_MESSAGES_MAP = {

app/assets/javascripts/battletype/player.js

@@ -0,0 +1,21 @@
+(function () {
+  this.Player = {
+    _properties: {
+      nickname: {
+        get: function () { return this._nickname; },
+        set: function (nickname) {
+          this._nickname = nickname;
+
+          $(this)
+            .text(nickname)
+            .fadeIn("slow")
+            .blur();
+        }
+      }
+    },
+    build: function (node) {
+      var player = Object.defineProperties(node, this._properties);
+      return player;
+    }
+  };
+}).call(this);