pretty legit level dropdown

src/js/level/arbiter.js

@@ -9,15 +9,21 @@ var sequenceInfo = require('../levels').sequenceInfo;
 function LevelArbiter() {
   this.levelMap = {};
   this.init();
+  // TODO -- local storage sync
+  this.solvedMap = {};
 }
 
 LevelArbiter.prototype.init = function() {
   var previousLevelID;
   _.each(levelSequences, function(levels, levelSequenceName) {
     // for this particular sequence...
-    _.each(levels, function(level) {
+    _.each(levels, function(level, index) {
       this.validateLevel(level);
-      this.levelMap[level.id] = level;
+      this.levelMap[level.id] = _.extend(
+        {},
+        { index: index },
+        level
+      );
 
       // build up the chaining between levels
       if (previousLevelID) {
@@ -28,6 +34,18 @@ LevelArbiter.prototype.init = function() {
   }, this);
 };
 
+LevelArbiter.prototype.getSolvedMap = function() {
+  return this.solvedMap;
+};
+
+LevelArbiter.prototype.isLevelSolved = function(id) {
+  if (!this.levelMap[id]) {
+    throw new Error('that level doesnt exist!');
+  }
+  console.log('is it solved', id);
+  return Boolean(this.solvedMap[id]);
+};
+
 LevelArbiter.prototype.validateLevel = function(level) {
   level = level || {};
   var requiredFields = [

src/js/util/debug.js

@@ -21,7 +21,8 @@ var toGlobalize = {
   Level: require('../level'),
   Sandbox: require('../level/sandbox'),
   GitDemonstrationView: require('../views/gitDemonstrationView'),
-  Markdown: require('markdown')
+  Markdown: require('markdown'),
+  LevelDropdownView: require('../views/levelDropdownView')
 };
 
 _.each(toGlobalize, function(module) {

src/js/views/commandViews.js

@@ -206,10 +206,6 @@ var CommandPromptView = Backbone.View.extend({
       ((value.length && this.index !== -1 &&
       this.commands.toArray()[this.index].get('text') !== value));
 
-    if (this.index !== -1) {
-      console.log(this.commands.toArray()[this.index]);
-    }
-
     if (!shouldAdd) {
       return;
     }

src/js/views/index.js

@@ -523,6 +523,7 @@ var CanvasTerminalHolder = BaseView.extend({
   }
 });
 
+exports.BaseView = BaseView;
 exports.ModalView = ModalView;
 exports.ModalTerminal = ModalTerminal;
 exports.ModalAlert = ModalAlert;

src/js/views/levelDropdownView.js

@@ -0,0 +1,120 @@
+var _ = require('underscore');
+var Q = require('q');
+// horrible hack to get localStorage Backbone plugin
+var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
+
+var util = require('../util');
+var KeyboardListener = require('../util/keyboard').KeyboardListener;
+var Main = require('../app');
+
+var ModalTerminal = require('../views').ModalTerminal;
+var ContainedBase = require('../views').ContainedBase;
+var BaseView = require('../views').BaseView;
+
+var LevelDropdownView = ContainedBase.extend({
+  tagName: 'div',
+  className: 'levelDropdownView box vertical',
+  template: _.template($('#level-dropdown-view').html()),
+
+  initialize: function(options) {
+    options = options || {};
+    this.JSON = {};
+
+    this.navEvents = _.clone(Backbone.Events);
+    this.navEvents.on('clickedID', _.debounce(
+      _.bind(this.loadLevelID, this),
+      300,
+      true
+    ));
+
+    this.sequences = Main.getLevelArbiter().getSequences();
+    this.container = new ModalTerminal({
+      title: 'Select a Level'
+    });
+    this.render();
+    this.buildSequences();
+
+    if (!options.wait) {
+      this.show();
+    }
+  },
+
+  loadLevelID: function(id) {
+    Main.getEventBaton().trigger(
+      'commandSubmitted',
+      'level ' + id
+    );
+    this.hide();
+  },
+
+  updateSolvedStatus: function() {
+    _.each(this.seriesViews, function(view) {
+      view.updateSolvedStatus();
+    }, this);
+  },
+
+  buildSequences: function() {
+    this.seriesViews = [];
+    _.each(this.sequences, function(sequenceName) {
+      this.seriesViews.push(new SeriesView({
+        destination: this.$el,
+        name: sequenceName,
+        navEvents: this.navEvents
+      }));
+    }, this);
+  }
+});
+
+var SeriesView = BaseView.extend({
+  tagName: 'div',
+  className: 'seriesView box flex1 vertical',
+  template: _.template($('#series-view').html()),
+  events: {
+    'click div.levelIcon': 'click'
+  },
+
+  initialize: function(options) {
+    this.name = options.name || 'intro';
+    this.navEvents = options.navEvents;
+    this.info = Main.getLevelArbiter().getSequenceInfo(this.name);
+    this.levels = Main.getLevelArbiter().getLevelsInSequence(this.name);
+
+    this.levelIDs = [];
+    _.each(this.levels, function(level) {
+      this.levelIDs.push(level.id);
+    }, this);
+
+    this.destination = options.destination;
+    this.JSON = {
+      displayName: this.info.displayName,
+      about: this.info.about,
+      ids: this.levelIDs
+    };
+
+    this.render();
+    this.updateSolvedStatus();
+  },
+
+  updateSolvedStatus: function() {
+    // this is a bit hacky, it really should be some nice model
+    // property changing but it's the 11th hour...
+    var toLoop = this.$('div.levelIcon').each(function(index, el) {
+      var id = el.id;
+      $(el).toggleClass('solved', Main.getLevelArbiter().isLevelSolved(id));
+    });
+  },
+
+  click: function(ev) {
+    console.log(ev.srcElement);
+    console.log(ev.srcElement.id);
+    if (!ev || !ev.srcElement || !ev.srcElement.id) {
+      console.warn('wut, no id'); return;
+    }
+
+    var id = ev.srcElement.id;
+    this.navEvents.trigger('clickedID', id);
+  }
+});
+
+exports.LevelDropdownView = LevelDropdownView;
+