kleybarod naviation

src/js/level/arbiter.js

@@ -89,6 +89,10 @@ LevelArbiter.prototype.validateLevel = function(level) {
   }
 };
 
+LevelArbiter.prototype.getSequenceToLevels = function() {
+  return levelSequences;
+};
+
 LevelArbiter.prototype.getSequences = function() {
   return _.keys(levelSequences);
 };

src/js/views/levelDropdownView.js

@@ -29,15 +29,24 @@ var LevelDropdownView = ContainedBase.extend({
       true
     ));
     this.navEvents.on('negative', this.negative, this);
+    this.navEvents.on('positive', this.positive, this);
+    this.navEvents.on('left', this.left, this);
+    this.navEvents.on('right', this.right, this);
+    this.navEvents.on('up', this.up, this);
+    this.navEvents.on('down', this.down, this);
+
     this.keyboardListener = new KeyboardListener({
       events: this.navEvents,
       aliasMap: {
-        esc: 'negative'
+        esc: 'negative',
+        enter: 'positive'
       },
       wait: true
     });
 
     this.sequences = Main.getLevelArbiter().getSequences();
+    this.sequenceToLevels = Main.getLevelArbiter().getSequenceToLevels();
+
     this.container = new ModalTerminal({
       title: 'Select a Level'
     });
@@ -49,6 +58,148 @@ var LevelDropdownView = ContainedBase.extend({
     }
   },
 
+  positive: function() {
+    if (!this.selectedID) {
+      return;
+    }
+    this.loadLevelID(this.selectedID);
+  },
+
+  left: function() {
+    if (this.turnOnKeyboardSelection()) {
+      return;
+    }
+    this.leftOrRight(-1);
+  },
+
+  leftOrRight: function(delta) {
+    this.deselectIconByID(this.selectedID);
+    this.selectedIndex = this.wrapIndex(this.selectedIndex + delta, this.getCurrentSequence());
+    this.selectedID = this.getSelectedID();
+    this.selectIconByID(this.selectedID);
+  },
+
+  right: function() {
+    if (this.turnOnKeyboardSelection()) {
+      return;
+    }
+    this.leftOrRight(1);
+  },
+
+  up: function() {
+    if (this.turnOnKeyboardSelection()) {
+      return;
+    }
+    this.selectedSequence = this.getPreviousSequence();
+    this.downOrUp();
+  },
+
+  down: function() {
+    if (this.turnOnKeyboardSelection()) {
+      return;
+    }
+    this.selectedSequence = this.getNextSequence();
+    this.downOrUp();
+  },
+
+  downOrUp: function() {
+    this.selectedIndex = this.boundIndex(this.selectedIndex, this.getCurrentSequence());
+    this.deselectIconByID(this.selectedID);
+    this.selectedID = this.getSelectedID();
+    this.selectIconByID(this.selectedID);
+  },
+
+  turnOnKeyboardSelection: function() {
+    if (!this.selectedID) {
+      this.selectFirst();
+      return true;
+    }
+    return false;
+  },
+
+  turnOffKeyboardSelection: function() {
+    if (!this.selectedID) { return; }
+    this.deselectIconByID(this.selectedID);
+    this.selectedID = undefined;
+    this.selectedIndex = undefined;
+    this.selectedSequence = undefined;
+  },
+
+  wrapIndex: function(index, arr) {
+    index = (index >= arr.length) ? 0 : index;
+    index = (index < 0) ? arr.length - 1 : index;
+    return index;
+  },
+
+  boundIndex: function(index, arr) {
+    index = (index >= arr.length) ? arr.length - 1 : index;
+    index = (index < 0) ? 0 : index;
+    return index;
+  },
+
+  getNextSequence: function() {
+    var current = this.getSequenceIndex(this.selectedSequence);
+    var desired = this.wrapIndex(current + 1, this.sequences);
+    return this.sequences[desired];
+  },
+
+  getPreviousSequence: function() {
+    var current = this.getSequenceIndex(this.selectedSequence);
+    var desired = this.wrapIndex(current - 1, this.sequences);
+    return this.sequences[desired];
+  },
+
+  getSequenceIndex: function(name) {
+    var index;
+    _.each(this.sequences, function(_name, _index) {
+      if (_name == name) {
+        index = _index;
+      }
+    });
+    if (index === undefined) { throw new Error('didnt find'); }
+    return index;
+  },
+
+  getIndexForID: function(id) {
+    var index;
+    var levels = this.sequenceToLevels[this.selectedSequence];
+    _.each(levels, function(level, _index) {
+      if (level.id == id) {
+        index = _index;
+      }
+    });
+    return index;
+  },
+
+  selectFirst: function() {
+    var firstID = this.sequenceToLevels[this.sequences[0]][0].id;
+    this.selectIconByID(firstID);
+    this.selectedIndex = 0;
+    this.selectedSequence = this.sequences[0];
+  },
+
+  getCurrentSequence: function() {
+    return this.sequenceToLevels[this.selectedSequence];
+  },
+
+  getSelectedID: function() {
+    return this.sequenceToLevels[this.selectedSequence][this.selectedIndex].id;
+  },
+
+  selectIconByID: function(id) {
+    this.toggleIconSelect(id, true);
+  },
+
+  deselectIconByID: function(id) {
+    this.toggleIconSelect(id, false);
+  },
+
+  toggleIconSelect: function(id, value) {
+    this.selectedID = id;
+    var selector = '#levelIcon-' + id;
+    $(selector).toggleClass('selected', value);
+  },
+
   negative: function() {
     this.hide();
   },
@@ -65,6 +216,7 @@ var LevelDropdownView = ContainedBase.extend({
     }
     this.showDeferred = undefined;
     this.keyboardListener.mute();
+    this.turnOffKeyboardSelection();
 
     LevelDropdownView.__super__.hide.apply(this);
   },