updates to add "ask" functionality

Author: brianpilati

.gitignore

@@ -1,5 +1,6 @@
 *.swp
 test/lib/*
+.DS_Store
 
 logs
 

img/ask-bottom.png

@@ -19,7 +19,6 @@ var Reporter = function(data) {
     this.cmd = data.cmd;
     this.color = data.color;
     this.isDiscrete = data.isDiscrete;
-    this.label = data.label;
     this.mode = data.mode;
     this.param = data.param;
     this.sliderMin = data.sliderMin;
@@ -35,11 +34,19 @@ var Reporter = function(data) {
     this.slider = null; // slider jQ element
 };
 
+Reporter.prototype.determineReporterLabel = function() {
+  if (this.target === 'Stage') {
+    return this.param;
+  } else {
+    return this.target + ': ' + this.param;
+  }
+}
+
 Reporter.prototype.attach = function(scene) {
     switch (this.mode) {
         case 1: // Normal
         case 3: // Slider
-            this.el = $('<div class="reporter-normal">' + this.label + '</div>');
+            this.el = $('<div class="reporter-normal">' + this.determineReporterLabel() + '</div>');
             this.valueEl = $('<div class="reporter-inset">null</div>');
             this.el.append(this.valueEl);
             if (this.mode == 3) {

img/ask-button.png

@@ -73,7 +73,14 @@ var Sprite = function(data) {
     this.talkBubbleStyler = null;
     this.talkBubbleOn = false;
 
+    // HTML element for the ask bubbles
+    this.askInput = null;
+    this.askInputField = null;
+    this.askInputButton = null;
+    this.askInputOn = false;
+
     // Internal variables used for rendering meshes.
+    this.askAnswer = null; //this is a private variable
     this.textures = [];
     this.materials = [];
     this.geometries = [];
@@ -142,14 +149,26 @@ Sprite.prototype.attach = function(scene) {
     this.updateVisible();
     this.updateTransform();
 
-    this.talkBubble = $('<div class="bubble-container"></div>');
-    this.talkBubble.css('display', 'none');
-    this.talkBubbleBox = $('<div class="bubble"></div>');
-    this.talkBubbleStyler = $('<div class="bubble-say"></div>');
-    this.talkBubble.append(this.talkBubbleBox);
-    this.talkBubble.append(this.talkBubbleStyler);
+    if (! this.isStage) {
+      this.talkBubble = $('<div class="bubble-container"></div>');
+      this.talkBubble.css('display', 'none');
+      this.talkBubbleBox = $('<div class="bubble"></div>');
+      this.talkBubbleStyler = $('<div class="bubble-say"></div>');
+      this.talkBubble.append(this.talkBubbleBox);
+      this.talkBubble.append(this.talkBubbleStyler);
+    }
+
+    this.askInput = $('<div class="ask-container"></div>');
+    this.askInput.css('display', 'none');
+    this.askInputField = $('<div class="ask-field"></div>');
+    this.askInputTextField = $('<input class="ask-text-field"></input>');
+    this.askInputField.append(this.askInputTextField);
+    this.askInputButton = $('<div class="ask-button"></div>');
+    this.askInput.append(this.askInputField);
+    this.askInput.append(this.askInputButton);
 
     runtime.scene.append(this.talkBubble);
+    runtime.scene.append(this.askInput);
 };
 
 // Load sounds from the server and buffer them
@@ -254,20 +273,22 @@ Sprite.prototype.onClick = function(evt) {
 };
 
 Sprite.prototype.setVisible = function(v) {
+  if (v === true || v === false) {
     this.visible = v;
     this.updateVisible();
+  }
 };
 
 Sprite.prototype.updateLayer = function() {
     $(this.mesh).css('z-index', this.z);
-    if (this.talkBubble) this.talkBubble.css('z-index', this.z);
+    if (this.talkBubble) $(this.talkBubble).css('z-index', this.z);
+    if (this.askInput) this.askInput.css('z-index', this.z);
 };
 
 Sprite.prototype.updateVisible = function() {
     $(this.mesh).css('display', this.visible ? 'inline' : 'none');
-    if (this.talkBubbleOn) {
-        this.talkBubble.css('display', this.visible ? 'inline-block' : 'none');
-    }
+    if (this.talkBubbleOn) this.talkBubble.css('display', this.visible ? 'inline-block' : 'none');
+    if (this.askInputOn) this.askInput.css('display', this.visible ? 'inline-block' : 'none');
 };
 
 Sprite.prototype.updateTransform = function() {
@@ -347,13 +368,21 @@ Sprite.prototype.showBubble = function(text, type) {
     this.talkBubble.css('left', xy[0] + 'px');
     this.talkBubble.css('top', xy[1] + 'px');
 
-
+    this.talkBubble.removeClass('say-think-border');
+    this.talkBubble.removeClass('ask-border');
+    
     this.talkBubbleStyler.removeClass('bubble-say');
     this.talkBubbleStyler.removeClass('bubble-think');
+    this.talkBubbleStyler.removeClass('bubble-ask');
     if (type == 'say') {
+        this.talkBubbleBox.addClass('say-think-border');
         this.talkBubbleStyler.addClass('bubble-say');
     } else if (type == 'think') {
+        this.talkBubbleBox.addClass('say-think-border');
         this.talkBubbleStyler.addClass('bubble-think');
+    } else if (type == 'doAsk') {
+        this.talkBubbleBox.addClass('ask-border');
+        this.talkBubbleStyler.addClass('bubble-ask');
     }
 
     if (this.visible) {
@@ -367,6 +396,25 @@ Sprite.prototype.hideBubble = function() {
     this.talkBubble.css('display', 'none');
 };
 
+Sprite.prototype.showAsk = function() {
+    this.askInputOn = true;
+    this.askInput.css('z-index', this.z);
+    this.askInput.css('left', '15px');
+    this.askInput.css('right', '15px');
+    this.askInput.css('bottom', '7px');
+    this.askInput.css('height', '25px');
+
+    if (this.visible) {
+        this.askInput.css('display', 'inline-block');
+        this.askInputTextField.focus();
+    }
+};
+
+Sprite.prototype.hideAsk = function() {
+    this.askInputOn = false;
+    this.askInput.css('display', 'none');
+};
+
 Sprite.prototype.setXY = function(x, y) {
     this.scratchX = x;
     this.scratchY = y;

img/playerStartFlag.png

@@ -33,6 +33,7 @@ var Stage = function(data) {
     this.lineCanvas.width = 480;
     this.lineCanvas.height = 360;
     this.lineCache = this.lineCanvas.getContext('2d');
+    this.isStage = true;
 
     Sprite.call(this, data);
 };

js/Reporter.js

@@ -43,6 +43,9 @@ LooksPrims.prototype.addPrimsTo = function(primTable) {
     primTable['setGraphicEffect:to:']    = this.primSetEffect;
     primTable['filterReset']             = this.primClearEffects;
 
+    primTable['doAsk']              = this.primDoAsk;
+    primTable['answer']             = this.primAnswer;
+
     primTable['say:'] = function(b) { showBubble(b, 'say'); };
     primTable['say:duration:elapsed:from:'] = function(b) { showBubbleAndWait(b, 'say'); };
     primTable['think:'] = function(b) { showBubble(b, 'think'); };
@@ -170,6 +173,17 @@ LooksPrims.prototype.primClearEffects = function(b) {
     s.updateFilters();
 };
 
+LooksPrims.prototype.primDoAsk= function(b) {
+    showBubble(b, "doAsk");
+    var s = interp.targetSprite();
+    if (s != null) s.showAsk();
+};
+
+LooksPrims.prototype.primAnswer = function() {
+    var s = interp.targetSprite();
+    return ((s != null) ? s.answer : undefined);
+};
+
 var showBubble = function(b, type) {
     var s = interp.targetSprite();
     if (s != null) s.showBubble(interp.arg(b, 0), type);

js/Sprite.js

@@ -398,7 +398,7 @@ button#trigger-stop:hover {
 }
 
 /* Say/think bubble styles */
- .bubble-container {
+.bubble-container {
     position: absolute;
 }
 .bubble {
@@ -407,7 +407,6 @@ button#trigger-stop:hover {
     max-width: 120px;
     min-width: 40px;
     padding: 6px 11px 6px 11px;
-    border: 3px solid rgb(160, 160, 160);
     border-radius: 10px;
     background: #fff;
     font-family: sans-serif;
@@ -416,6 +415,20 @@ button#trigger-stop:hover {
     color: #000;
     text-align: center;
 }
+.bubble.say-think-border {
+    border: 3px solid rgb(160, 160, 160);
+}
+.bubble.ask-border, .ask-container {
+    border: 3px solid rgb(74, 173, 222);
+}
+.bubble-ask {
+    position: absolute;
+    margin-top: -3px;
+    margin-left: 8px;
+    width: 44px;
+    height: 18px;
+    background: url(img/ask-bottom.png) transparent no-repeat;
+}
 .bubble-say {
     position: absolute;
     margin-top: -3px;
@@ -432,3 +445,33 @@ button#trigger-stop:hover {
     height: 19px;
     background: url(img/think-bottom.png) transparent no-repeat;
 }
+.ask-container {
+    position: absolute;
+    display: inline-block;
+    padding: 5px 0px 0px 5px;
+    border-radius: 5px;
+    background: #fff;
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 14px;
+    color: #000;
+}
+.ask-container .ask-field .ask-text-field {
+    width: 405px;
+    height: 16px;
+    font-family: sans-serif;
+    font-weight: light;
+    font-size: 12px;
+    background: #EAEAEA;
+}
+
+.ask-container .ask-button {
+    position: absolute;
+    right: 2px;
+    top: 2px;
+    width: 25px;
+    height: 25px;
+    background: url(img/ask-button.png) transparent no-repeat;
+}
+
+

js/Stage.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var ioMock = function() {
+  var args = createArgs(arguments);
+
+  function getArgs(argKey) {
+    return ((argKey in args) ? args[argKey] : null);
+  }
+
+  function createArgs(methodArgs) {
+    var args = {};
+    if (methodArgs.length) {
+      _.each(methodArgs, function(newObject) {
+        _.each(newObject, function(value, key) {
+          args[key] = value;
+        });
+      });
+    }
+    return args;
+  }
+
+  return {
+    'getCount' : function() { return getArgs('getCount'); }
+  }
+};

js/primitives/LooksPrims.js

@@ -2,7 +2,9 @@
 
 var targetMock = function() {
   return {
-    'showBubble' : function() {}
+    'showBubble' : function() {},
+    'showAsk' : function() {},
+    'answer' : 22
   };
 
 }

player.css

@@ -1,7 +1,10 @@
-'use strict';
-
 var sensingData = {
   "objName": "Stage",
+  "variables": [{
+      "name": "myAnswer",
+      "value": 0,
+      "isPersistent": false
+    }],
   "costumes": [{
       "costumeName": "backdrop1",
       "baseLayerID": -1,
@@ -16,6 +19,15 @@ var sensingData = {
   "videoAlpha": 0.5,
   "children": [{
       "objName": "Sprite1",
+      "variables": [{
+          "name": "myAnswer2",
+          "value": 0,
+          "isPersistent": false
+        }, {
+          "name": "answer",
+          "value": 0,
+          "isPersistent": false
+        }],
       "scripts": [[42, 40.5, [["whenGreenFlag"], ["doAsk", "What's your name?"]]],
         [44.5,
           155.5,