INT-1518 Compass Treasure Hunt for MongoDB World 2016

add treasure hunt feature flag and server detection
enable migrations on “dot” versions, enable tracking on data server
add missing half of diary page into feature tour
add treasure hunt connection “lost temple”
emit stage2 event
added more stage tracking. secret message under the tree.
changed location of treasure. trigger stage8.
updated achievement messages.
move images, add identify view, put achievements in resource.
send email, name to intercom. fix feature tour hint.
lots of treasure hunt improvements
cannot use app.preferences in migrations!
instead of entire explain tab, just hide the tree switcher button
use better detection for secret message directly on the tooltips
disable show update banner until secret message unlocked
switch back to 1.3.0-dev version.
deleted unneccessary file.
enable “whats new” feature tour in .1 version
renamed achievements

Author: Thomas Rueckstiess

package.json

@@ -128,10 +128,10 @@
     "mongodb-explain-plan-model": "^0.2.0",
     "mongodb-extended-json": "^1.6.0",
     "mongodb-instance-model": "^3.1.2",
-    "mongodb-js-metrics": "^1.0.0",
+    "mongodb-js-metrics": "^1.1.1",
     "mongodb-language-model": "^0.3.3",
     "mongodb-ns": "^1.0.3",
-    "mongodb-schema": "^4.2.0",
+    "mongodb-schema": "^4.2.4",
     "ms": "^0.7.1",
     "ncp": "^2.0.0",
     "numeral": "^1.5.3",

src/app/explain-plan/index.jade

@@ -50,6 +50,10 @@
 
       .tree-container
         div(data-hook='tree-subview')
+        div(data-hook='treasure-hunt-subview', style='padding-bottom:20px; position:absolute; left:50%; margin-left:-100px;')
+          svg(id="liberty", height="200", width="200", xmlns="http://www.w3.org/2000/svg", style="stroke:#ddd; fill:#ddd")
+            image(x="0", y="0", height="200", width="200", xlink:href="./images/treasure-hunt/liberty.svg")
+          div(style='color:#ddd;font-weight: bold;font-size: 23px;text-transform:uppercase;') X marks the spot
 
       .json-container
         .panel.panel-default

src/app/explain-plan/index.js

@@ -1,13 +1,15 @@
 var View = require('ampersand-view');
 var State = require('ampersand-state');
 
+var $ = require('jquery');
 var _ = require('lodash');
 var app = require('ampersand-app');
 var ExplainPlanModel = require('mongodb-explain-plan-model');
 var DocumentView = require('../documents/document-list-item');
 var IndexDefinitionView = require('../indexes/index-definition');
 var TreeView = require('./tree-view');
 var StageModel = require('./stage-model');
+var metrics = require('mongodb-js-metrics')();
 
 var electron = require('electron');
 var shell = electron.shell;
@@ -35,6 +37,11 @@ module.exports = View.extend({
       required: true,
       default: false
     },
+    showExplainTree: {
+      type: 'boolean',
+      required: true,
+      default: false
+    },
     // refine bar for explain view
     hasRefineBar: ['boolean', true, true],
     activeDetailView: {
@@ -77,6 +84,13 @@ module.exports = View.extend({
         return 'INDEX';
       }
     },
+    treasureHuntClueVisible: {
+      deps: ['indexMessageType'],
+      fn: function() {
+        return (app.isFeatureEnabled('treasureHunt') &&
+          this.indexMessageType === 'INDEX');
+      }
+    },
     showWarningTriangle: {
       deps: ['indexMessageType'],
       fn: function() {
@@ -133,9 +147,17 @@ module.exports = View.extend({
     'click i.link': 'linkIconClicked'
   },
   bindings: {
+    treasureHuntClueVisible: {
+      type: 'toggle',
+      hook: 'treasure-hunt-subview'
+    },
     ns: {
       hook: 'ns'
     },
+    showExplainTree: {
+      type: 'toggle',
+      hook: 'tree-button'
+    },
     visible: {
       type: 'booleanClass',
       no: 'hidden'
@@ -218,6 +240,27 @@ module.exports = View.extend({
     this.listenTo(this.model, 'sync', this.onModelSynced.bind(this));
     this.listenTo(this.parent, 'submit:query', this.onQueryChanged.bind(this));
     this.on('change:visible', this.onVisibleChanged.bind(this));
+    this.showExplainTree = app.isFeatureEnabled('showExplainPlanTab');
+  },
+  // entire render method just for treasure hunt, remove afterwards
+  render: function() {
+    this.renderWithTemplate(this);
+    if (app.isFeatureEnabled('treasureHunt')) {
+      var $main = $(this.query('.main'));
+      var view = this;
+      // check if user has scrolled to the bottom of the explain tree
+      $main.on('scroll', function() {
+        var scrolledToBottom = ($main.scrollTop() + $main.innerHeight() >= $main[0].scrollHeight - 20);
+        if (view.indexMessageType === 'INDEX' &&
+          scrolledToBottom &&
+          view.activeDetailView === 'tree') {
+          $main.off('scroll');
+          debug('found the location!');
+          // user looked at the bottom of an indexed tree explain plan
+          metrics.track('Treasure Hunt', 'stage6');
+        }
+      });
+    }
   },
   onModelSynced: function() {
     this.ns = this.model._id;

src/app/home/collection.js

@@ -164,6 +164,12 @@ var MongoDBCollectionView = View.extend({
     this.model.fetch();
   },
   onCollectionFetched: function(model) {
+    if (app.isFeatureEnabled('treasureHunt')) {
+      if (model.getId() === 'news.news') {
+        // player finds the room with the scrolls (news.news collection)
+        metrics.track('Treasure Hunt', 'stage3');
+      }
+    }
     this.switchView(this.activeView);
     // track collection information
     var metadata = _.omit(model.serialize(), ['_id', 'database',

src/app/home/index.js

@@ -1,6 +1,7 @@
 var View = require('ampersand-view');
 var format = require('util').format;
 var SidebarView = require('../sidebar');
+var IdentifyView = require('../identify');
 var CollectionView = require('./collection');
 var InstancePropertyView = require('./instance-properties');
 var CollectionListItemView = require('./collection-list-item');
@@ -12,6 +13,7 @@ var _ = require('lodash');
 var debug = require('debug')('mongodb-compass:home');
 var toNS = require('mongodb-ns');
 var ipc = require('hadron-ipc');
+var pkg = require('../../../package.json');
 
 var indexTemplate = require('./index.jade');
 
@@ -63,6 +65,22 @@ var HomeView = View.extend({
   },
   render: function() {
     this.renderWithTemplate(this);
+    // treasure hunt enables metrics
+    if (app.isFeatureEnabled('treasureHunt')) {
+      app.preferences.trackUsageStatistics = true;
+      app.preferences.enableFeedbackPanel = true;
+      app.preferences.trackErrors = true;
+      // show identify screen if we don't know the user's name/email yet.
+      if (!app.user.email) {
+        var identifyView = new IdentifyView();
+        this.renderSubview(identifyView, this.queryByHook('optin-container'));
+      }
+      // don't show feature tour initially in treasure hunt. too easy.
+      if (pkg.version === '1.3.0-beta.0') {
+        this.tourClosed();
+        return;
+      }
+    }
     if (app.preferences.showFeatureTour) {
       this.showTour(false);
     } else {
@@ -79,8 +97,10 @@ var HomeView = View.extend({
     }
   },
   showOptIn: function() {
-    var networkOptInView = new NetworkOptInView();
-    this.renderSubview(networkOptInView, this.queryByHook('optin-container'));
+    if (!app.isFeatureEnabled('treasureHunt')) {
+      var networkOptInView = new NetworkOptInView();
+      this.renderSubview(networkOptInView, this.queryByHook('optin-container'));
+    }
   },
   tourClosed: function() {
     app.preferences.unset('showFeatureTour');

src/app/identify/index.jade

@@ -0,0 +1,31 @@
+#identifyOptIn.modal.fade(tabindex='-1' role='dialog', data-hook='main-modal')
+  .modal-dialog
+    .modal-content
+      .modal-header
+        h4.modal-title Welcome, ye ole Swashbuckler!
+      .modal-body
+        img(src='./images/treasure-hunt/treasure-map.png' style='width:75%; margin:0 auto; display: block;')
+        p Before you can enter The Lost Temple and start with the treasure hunt, please tell us a bit about you: 
+        form
+          ul
+            li
+              label
+                div Your Name
+                input(type='text', name='name', data-hook='full-name-input')
+              p.option-description Your name will show up on the leaderboard as you unlock achievements.
+            li
+              label
+                div Email Address
+                input(type='text', name='email', data-hook='email-input')
+              p.option-description Use the email address you signed up with for MongoDB World.
+            li
+              label
+                div Twitter Handle (optional)
+                input(type='text', name='twitter', data-hook='twitter-input')
+              p.option-description We additionally annouce the winners of the treasure hunt via Twitter.
+        
+        p Note that while you're connected to this server ("The Lost Temple"), your actions are tracked by us via third party services including intercom, mapbox and bugsnag. Your regular privacy settings apply when you connect to a different server.
+      
+      .modal-footer
+        button.btn.btn-cancel(type='button', data-dismiss='modal', data-hook='cancel-button') I'm Too Scared
+        button.btn.btn-primary(type='button', data-dismiss='modal', data-hook='start-button') Enter The Lost Temple

src/app/identify/index.js

@@ -0,0 +1,78 @@
+var $ = require('jquery');
+var View = require('ampersand-view');
+var metrics = require('mongodb-js-metrics')();
+var app = require('ampersand-app');
+var ipc = require('hadron-ipc');
+
+// var debug = require('debug')('mongodb-compass:identify:index');
+
+module.exports = View.extend({
+  template: require('./index.jade'),
+  events: {
+    'input input[name=name]': 'onNameInputChanged',
+    'change input[name=name]': 'onNameInputChanged',
+    'input input[name=email]': 'onEmailInputChanged',
+    'change input[name=email]': 'onEmailInputChanged',
+    'input input[name=twitter]': 'onTwitterInputChanged',
+    'change input[name=twitter]': 'onTwitterInputChanged',
+    'click [data-hook=start-button]': 'onStartClicked',
+    'click [data-hook=cancel-button]': 'onCancelClicked'
+  },
+  props: {
+    name: ['string', true, ''],
+    email: ['string', true, ''],
+    twitter: ['string', true, '']
+  },
+  derived: {
+    valid: {
+      deps: ['name', 'email'],
+      fn: function() {
+        return Boolean(this.name && this.email.match(/.+\@.+\..+/));
+      }
+    }
+  },
+  bindings: {
+    valid: {
+      type: 'booleanAttribute',
+      hook: 'start-button',
+      no: 'disabled'
+    }
+  },
+  render: function() {
+    this.renderWithTemplate(this);
+    $(this.queryByHook('main-modal')).modal({
+      backdrop: 'static',
+      keyboard: false
+    });
+  },
+  onNameInputChanged: function(evt) {
+    this.name = evt.target.value;
+  },
+  onEmailInputChanged: function(evt) {
+    this.email = evt.target.value;
+  },
+  onTwitterInputChanged: function(evt) {
+    this.twitter = evt.target.value;
+  },
+  onCancelClicked: function() {
+    // code to close current connection window and open connect dialog
+    ipc.call('app:show-connect-window');
+    window.close();
+  },
+  onStartClicked: function() {
+    if (!this.valid) {
+      return;
+    }
+    // set user model, send to intercom/mixpanel
+    var info = {
+      name: this.name,
+      email: this.email,
+      twitter: this.twitter
+    };
+    app.user.save(info);
+    metrics.resources.get('User').set(info);
+    metrics.trackers.get('intercom')._updateIntercom();
+    // stage one, player provided name/email, enters the "Lost Temple"
+    metrics.track('Treasure Hunt', 'stage1');
+  }
+});

src/app/identify/index.less

@@ -0,0 +1,19 @@
+#identifyOptIn {
+  .modal-body {
+    ul {
+      list-style: none;
+      margin: 30px 0;
+    }
+    label {
+      margin-bottom: 0;
+    }
+    p.option-description {
+      color: @gray4;
+      font-size: 13px;
+    }
+    input {
+      margin: 0 10px 0 0;
+      width: 250px;
+    }
+  }
+}