Add the player name chooser thingy

dev/lib/game/entities/namefield.js

@@ -0,0 +1,71 @@
+ig.module(
+    'game.entities.namefield'
+)
+.requires(
+    'impact.entity'
+)
+.defines(function() {
+  EntityNameField = ig.Entity.extend({
+    font: new ig.Font('media/lcddot.grey.font.png'),
+    fontActiveChar: new ig.Font('media/lcddot.font.png'),
+    activeCharArrows: new ig.Image('media/lcddot.arrows.png'),
+
+    symbols: ['_', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
+    numberOfChars: 3,
+    highlightedChar: 0,
+    _name: [],
+
+    init: function(x, y, settings) {
+      this.parent(x, y, settings);
+
+      ig.input.bind(ig.KEY.RIGHT_ARROW, 'next-char');
+      ig.input.bind(ig.KEY.LEFT_ARROW, 'prev-char');
+
+      ig.input.bind(ig.KEY.UP_ARROW, 'next-symbol');
+      ig.input.bind(ig.KEY.DOWN_ARROW, 'prev-symbol');
+
+      this._name = [];
+      for(var i=0; i<this.numberOfChars; i++)
+        this._name.push(1);
+    },
+
+    update: function() {
+      // Switch chars
+      if (ig.input.pressed('prev-char') && this.highlightedChar > 0)
+        this.highlightedChar--;
+      if (ig.input.pressed('next-char') && this.highlightedChar < this.numberOfChars-1)
+        this.highlightedChar++;
+
+      // Switch symbols
+      if (ig.input.pressed('prev-symbol') && this._name[this.highlightedChar] > 0)
+        this._name[this.highlightedChar]--;
+      if (ig.input.pressed('next-symbol') && this._name[this.highlightedChar] < this.symbols.length-1)
+        this._name[this.highlightedChar]++;
+
+      this.parent();
+    },
+
+    draw: function() {
+      this.parent();
+      for(var i=0; i<this.numberOfChars; i++) {
+        var symbol = this.symbols[this._name[i]];
+        var x = 20 + this.pos.x + 40*i + 5;
+        var y = 20 + this.pos.y;
+
+        if (i == this.highlightedChar) {
+          this.fontActiveChar.draw(symbol, x, y, ig.Font.ALIGN.CENTER);
+          this.activeCharArrows.draw(x-15, y-22);
+        } else {
+          this.font.draw(symbol, x, y, ig.Font.ALIGN.CENTER);
+        }
+      }
+    },
+
+    name: function() {
+      var name = '';
+      for(var i=0; i<this.numberOfChars; i++)
+        name += this.symbols[this.name[i]];
+      return name;
+    }
+  });
+});

dev/lib/game/main.js

@@ -1,4 +1,4 @@
-  ig.module(
+ig.module(
 	'game.main'
 )
 .requires(
@@ -10,13 +10,15 @@
 	'game.entities.paddle-enemy',
 	'game.entities.paddle-player',
 
+  'game.entities.namefield',
+
 	'game.levels.level1'
 )
-.defines(function(){
+.defines(function() {
   RunningGame = ig.Game.extend({
-    font: new ig.Font( 'media/lcddot.font.png' ),
+    font: new ig.Font('media/lcddot.font.png'),
     pauseDialogAlpha: 0,
-    pauseDialog: new ig.AnimationSheet( 'media/pause_screen.png', 624, 384 ),
+    pauseDialog: new ig.AnimationSheet('media/pause_screen.png', 624, 384),
     pauseDialogAnim: null,
     showPause: false,
     clearColor: null,
@@ -92,7 +94,6 @@
 
           this.pauseDialogAnim.alpha = this.pauseDialogAlpha;
         }
-        
         this.pauseDialogAnim.draw(0, 0);
       }
 	  }
@@ -106,9 +107,11 @@
     },
     font: new ig.Font( 'media/04b03.font.png' ),
     background: new ig.Image('media/stats_screen.png'),
+    nameField: null,
 
     init: function() {
       ig.input.bind(ig.KEY.ENTER, 'main-menu');
+      this.nameField = ig.game.spawnEntity(EntityNameField, 250, 150);
       this.loadScores();
     },
 
@@ -122,7 +125,6 @@
     loadScores: function() {
       ig.global.scores = undefined;
       $.post('https://www.scoreoid.com/api/getScores', this.scoreoid, function(data) {
-        console.log(data);
         ig.global.scores = data;
       });
     },
@@ -144,8 +146,7 @@
         }
       }
 
-      // TODO: https://github.com/dpweberza/ImpactJS-Plugins/blob/master/RetroHighScoreNameField/retrohighscorenamefield.js
+      this.nameField.draw(200, 200);
-      
       this.font.draw('Score: ' + ig.global.score, 200, 300, ig.Font.ALIGN.CENTER);
       this.font.draw('Press [ENTER] to move to the main menu', 200, 350, ig.Font.ALIGN.CENTER);
     }