updates to add "ask" functionality

.gitignore

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

js/Reporter.js

@@ -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) {

js/Sprite.js

@@ -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;

js/Stage.js

@@ -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/primitives/LooksPrims.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);

player.css

@@ -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;
+}
+
+

test/artifacts/IOMock.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'); }
+  }
+};

test/artifacts/TargetMock.js

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

test/artifacts/ask-artifact.js

@@ -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,

test/artifacts/reporterValues.js

@@ -0,0 +1,91 @@
+'use Strict;'
+
+var ReporterValues = function() {
+  return {
+    'getStageVariables': function() {
+      return {
+        'cmd' : "getVar:",
+        'color' : 15629590,
+        'isDiscrete' :  true,
+        'mode' : 1,
+        'param' : "myAnswer",
+        'sliderMax' : 100,
+        'sliderMin' : 0,
+        'target' : "Stage",
+        'visible' : true,
+        'x' : 5,
+        'y' : 5,
+      };
+    }
+  }
+};
+/*
+cmd
+  "getVar:"
+  
+color
+  15629590
+  
+isDiscrete
+  true
+  
+mode
+  1
+  
+param
+  "myAnswer2"
+  
+sliderMax
+  100
+  
+sliderMin
+  0
+  
+target
+  "Sprite1"
+  
+visible
+  true
+  
+x
+  5
+  
+y
+  32
+*/
+
+/*
+  
+cmd
+  "getVar:"
+  
+color
+  15629590
+  
+isDiscrete
+  true
+  
+mode
+  1
+  
+param
+  "answer"
+  
+sliderMax
+  100
+  
+sliderMin
+  0
+  
+target
+  "Sprite1"
+  
+visible
+  true
+  
+x
+  5
+  
+y
+  59
+*/

test/unit/looksPrimitiveSpec.js

@@ -1,23 +1,65 @@
 /* jasmine specs for primitives/LooksPrims.js go here */
 
 describe ('LooksPrims', function() {
-  var looksPrims;
+  var looksPrims, targetSpriteMock;
   beforeEach(function() {
     looksPrims = LooksPrims;
+    targetSpriteMock = targetMock();
   });
 
-  describe('showBubble', function(){
-    var sayBlock, targetSpriteMock;
+  describe('showBubble for Say', function(){
+    var sayBlock;
     beforeEach(function() {
       sayBlock = {'args': ['what to say']};
-      targetSpriteMock = targetMock();
       interp = interpreterMock({'targetSprite': targetSpriteMock }, {'arg': sayBlock});
-
     });
-    it('should return do something', function() {
+
+    it('should call the showBubble method on the targetedSprite', function() {
       spyOn(targetSpriteMock, "showBubble");
       showBubble(sayBlock, "say");
       expect(targetSpriteMock.showBubble).toHaveBeenCalled;
     });
   });
+
+  describe('showBubble for Think', function(){
+    var thinkBlock;
+    beforeEach(function() {
+      thinkBlock = {'args': ['what to think']};
+      interp = interpreterMock({'targetSprite': targetSpriteMock }, {'arg': thinkBlock});
+    });
+
+    it('should call the showBubble method on the targetedSprite', function() {
+      spyOn(targetSpriteMock, "showBubble");
+      showBubble(thinkBlock, "think");
+      expect(targetSpriteMock.showBubble).toHaveBeenCalled;
+    });
+  });
+
+
+  describe('showBubble for Ask', function(){
+    var askBlock;
+    beforeEach(function() {
+      askBlock = {'args': 'what to ask'};
+      interp = interpreterMock({'targetSprite': targetSpriteMock }, {'arg': askBlock});
+
+    });
+
+    it('should call the showBubble method on the targetedSprite', function() {
+      spyOn(targetSpriteMock, "showBubble");
+      spyOn(targetSpriteMock, "showAsk");
+      looksPrims.prototype.primDoAsk(askBlock);
+      expect(targetSpriteMock.showBubble).toHaveBeenCalled;
+      expect(targetSpriteMock.showAsk).toHaveBeenCalled;
+    });
+  });
+
+  describe('primAnswer', function(){
+    beforeEach(function() {
+      interp = interpreterMock({'targetSprite': targetSpriteMock });
+    });
+
+    it('should return the answer variable from the targetedSprite', function() {
+      expect(looksPrims.prototype.primAnswer()).toBe(22);
+    });
+  });
 });

test/unit/reporterSpec.js

@@ -0,0 +1,96 @@
+/* jasmine specs for Reporter.js go here */
+
+describe ('Reporter', function() {
+  var reporter, reporterValues;
+
+  beforeEach(function() {
+    reporter = Reporter;
+    reporterValues = new ReporterValues();
+  });
+
+  describe('Instantization variables', function() {
+    var initReporter;
+    beforeEach(function() {
+      io = new ioMock({'getCount': 4});
+      initReporter = new reporter(reporterValues.getStageVariables());
+    });
+
+    describe('Reporter Variables', function() {
+      it('should have a cmd variable', function() {
+        expect(initReporter.cmd).toBe('getVar:');
+      });
+
+      it('should have a color variable', function() {
+        expect(initReporter.color).toBe(15629590);
+      });
+
+      it('should have a isDiscrete variable', function() {
+        expect(initReporter.isDiscrete).toBe(true);
+      });
+
+      it('should have a mode variable', function() {
+        expect(initReporter.mode).toBe(1);
+      });
+
+      it('should have a param variable', function() {
+        expect(initReporter.param).toBe('myAnswer');
+      });
+
+      it('should have a sliderMax variable', function() {
+        expect(initReporter.sliderMax).toBe(100);
+      });
+
+      it('should have a sliderMin variable', function() {
+        expect(initReporter.sliderMin).toBe(0);
+      });
+
+      it('should have a target variable', function() {
+        expect(initReporter.target).toBe('Stage');
+      });
+
+      it('should have a visible variable', function() {
+        expect(initReporter.visible).toBe(true);
+      });
+
+      it('should have a x variable', function() {
+        expect(initReporter.x).toBe(5);
+      });
+
+      it('should have a y variable', function() {
+        expect(initReporter.y).toBe(5);
+      });
+
+      it('should have a z variable', function() {
+        expect(initReporter.z).toBe(4);
+      });
+
+      it('should have an el variable', function() {
+        expect(initReporter.el).toBe(null);
+      });
+
+      it('should have an valueEl variable', function() {
+        expect(initReporter.valueEl).toBe(null);
+      });
+
+      it('should have an slider variable', function() {
+        expect(initReporter.slider).toBe(null);
+      });
+    });
+  });
+  describe('determineReporterLabel', function() {
+
+    it('should return a stage variable', function() {
+      reporter.prototype.target = "Stage";
+      reporter.prototype.param = "myAnswer";
+      expect(reporter.prototype.determineReporterLabel()).toBe('myAnswer');
+    });
+
+    it('should return a sprite variable', function() {
+      reporter.prototype.target = "Sprite 1";
+      reporter.prototype.param = "localAnswer";
+      expect(reporter.prototype.determineReporterLabel()).toBe('Sprite 1: localAnswer');
+
+    });
+
+  });
+});

test/unit/spriteSpec.js

@@ -0,0 +1,352 @@
+/* jasmine specs for Sprite.js go here */
+
+describe ('Sprite', function() {
+  var sprite;
+
+
+  beforeEach(function() {
+    sprite = Sprite;
+  });
+
+  describe('Instantization variables', function() {
+    var initSprite;
+    beforeEach(function() {
+      var spriteObject = sensingData.children[0];
+      initSprite = new sprite(spriteObject);
+    });
+
+    describe('Sprite Variables', function() {
+      it('should have a visible variable', function() {
+        expect(initSprite.visible).toBe(true);
+      });
+    });
+
+    describe('Pen Variables', function() {
+      it('should have a penIsDown variable', function() {
+        expect(initSprite.penIsDown).toBe(false);
+      });
+
+      it('should have a penWidth variable', function() {
+        expect(initSprite.penWidth).toBe(1);
+      });
+
+      it('should have a penHue variable', function() {
+        expect(initSprite.penHue).toBe(120);
+      });
+
+      it('should have a penShade variable', function() {
+        expect(initSprite.penShade).toBe(50);
+      });
+
+      it('should have a penColorCache variable', function() {
+        expect(initSprite.penColorCache).toBe(0x0000FF);
+      });
+    });
+
+    describe('Ask Bubble', function() {
+      it('should have an askInput variable', function() {
+        expect(initSprite.askInput).toBe(null);
+      });
+
+      it('should have an askInputBox variable', function() {
+        expect(initSprite.askInputField).toBe(null);
+      });
+
+      it('should have an askInputStyler variable', function() {
+        expect(initSprite.askInputButton).toBe(null);
+      });
+
+      it('should have an askInputOn variable', function() {
+        expect(initSprite.askInputOn).toBe(false);
+      });
+
+      it('should have an answer variable', function() {
+        expect(initSprite.askAnswer).toBe(null);
+      });
+    });
+  })
+
+  describe('showBubble', function() {
+    var spriteProto;
+    beforeEach(function() {
+      spriteProto = sprite.prototype;
+      spriteProto.visible = true;
+      setFixtures('<div class="bubble-container"></div>');
+      spriteProto.talkBubble = $('.bubble-container');
+      spriteProto.talkBubble.css('display', 'none');
+      spriteProto.talkBubbleBox = $('<div class="bubble"></div>');
+      spriteProto.talkBubbleStyler = $('<div class="bubble-say"></div>');
+      spriteProto.talkBubble.append(spriteProto.talkBubbleBox);
+      spriteProto.talkBubble.append(spriteProto.talkBubbleStyler);
+    });
+
+    describe('Say', function(){
+      it('should call the showBubble method on the Sprite', function() {
+        var text = "What to say";
+        spyOn(spriteProto, "getTalkBubbleXY").andReturn([50,50]);;
+        spriteProto.showBubble(text, "say");
+        expect($('.bubble').html()).toBe(text);
+        expect($('.bubble-say').hasClass('bubble-say')).toBe(true);
+        expect($('.bubble').hasClass('say-think-border')).toBe(true);
+        expect($('.bubble-container').css('display')).toBe('inline-block');
+      });
+    });
+
+    describe('Think', function(){
+      it('should call the showBubble method on the Sprite', function() {
+        var text = "What to think";
+        spyOn(spriteProto, "getTalkBubbleXY").andReturn([50,50]);;
+        spriteProto.showBubble(text, "think");
+        expect($('.bubble').html()).toBe(text);
+        expect($('.bubble-think').hasClass('bubble-think')).toBe(true);
+        expect($('.bubble').hasClass('say-think-border')).toBe(true);
+        expect($('.bubble-container').css('display')).toBe('inline-block');
+      });
+    });
+
+    describe('Ask', function(){
+      it('should call the showBubble method on the Sprite', function() {
+        var text = "What to Ask";
+        spyOn(spriteProto, "getTalkBubbleXY").andReturn([50,50]);;
+        spriteProto.showBubble(text, "doAsk");
+        expect($('.bubble').html()).toBe(text);
+        expect($('.bubble-ask').hasClass('bubble-ask')).toBe(true);
+        expect($('.bubble').hasClass('ask-border')).toBe(true);
+        expect($('.bubble-container').css('display')).toBe('inline-block');
+      });
+    });
+
+    describe('Any Bubble with visible false', function(){
+      it('should call the showBubble method on the Sprite and not display it', function() {
+        spriteProto.visible = false;
+        var text = "What to Ask";
+        spyOn(spriteProto, "getTalkBubbleXY").andReturn([50,50]);;
+        spriteProto.showBubble(text, "doAsk");
+        expect($('.bubble').html()).toBe(text);
+        expect($('.bubble-ask').hasClass('bubble-ask')).toBe(true);
+        expect($('.bubble').hasClass('ask-border')).toBe(true);
+        expect($('.bubble-container').css('display')).toBe('none');
+      });
+    });
+  });
+
+  describe('hideBubble', function() {
+    var spriteProto;
+    beforeEach(function() {
+      spriteProto = sprite.prototype;
+      setFixtures('<div class="bubble-container"></div>');
+      spriteProto.talkBubble = $('.bubble-container');
+      spriteProto.talkBubble.css('display', 'inline');
+    });
+
+    it('should hide the bubble', function() {
+      spriteProto.hideBubble();
+      expect($('.bubble-container').css('display')).toBe('none');
+      expect(spriteProto.talkBubbleOn).toBe(false);
+
+    });
+  });
+
+  describe('showAsk', function() {
+    var spriteProto;
+    beforeEach(function() {
+      spriteProto = sprite.prototype;
+      spriteProto.visible = true;
+      spriteProto.z = 22;
+      setFixtures('<div class="ask-container"></div>');
+      spriteProto.askInput= $('.ask-container');
+      spriteProto.askInput.css('display','none');
+      spriteProto.askInput.css('position','relative');
+      spriteProto.askInputField = $('<div class="ask-input"></div>');
+      spriteProto.askInputTextField = $('<input class="ask-text-field"></input>');
+      spriteProto.askInputField.append(spriteProto.askInputTextField);
+      spriteProto.askInputButton = $('<div class="ask-button"></div>');
+      spriteProto.askInput.append(spriteProto.askInputField);
+      spriteProto.askInput.append(spriteProto.askInputButton);
+    });
+
+    it('should show the ask input if visible is true', function() {
+      spriteProto.showAsk();
+      expect($('.ask-container').css('display')).toBe('inline-block');
+      expect($('.ask-container').css('z-index')).toBe('22');
+      expect($('.ask-container').css('left')).toBe('15px');
+      expect($('.ask-container').css('right')).toBe('15px');
+      expect($('.ask-container').css('bottom')).toBe('7px');
+      expect($('.ask-container').css('height')).toBe('25px');
+      expect($('.ask-container').css('height')).toBe('25px');
+      expect($('.ask-text-field').is(':focus')).toBe(true);
+      expect(spriteProto.askInputOn).toBe(true);
+    });
+
+    it('should not show the ask input if visible is false', function() {
+      spriteProto.visible = false;
+      spriteProto.showAsk();
+      expect($('.ask-container').css('display')).toBe('none');
+      expect($('.ask-text-field').is(':focus')).toBe(false);
+    });
+  });
+
+  describe('hideAsk', function() {
+    var spriteProto;
+    beforeEach(function() {
+      spriteProto = sprite.prototype;
+      setFixtures('<div class="ask-container"></div>');
+      spriteProto.askInput = $('.ask-container');
+      spriteProto.askInput.css('display', 'inline');
+    });
+
+    it('should hide the ask input', function() {
+      spriteProto.hideAsk();
+      expect($('.ask-container').css('display')).toBe('none');
+      expect(spriteProto.askInputOn).toBe(false);
+
+    });
+  });
+
+  describe('updateLayer', function() {
+    var spriteProto;
+    beforeEach(function() {
+      spriteProto = sprite.prototype;
+      setFixtures('<img class="mesh"></img><div class="bubble-container"></div><div class="ask-container"></div>');
+      spriteProto.talkBubble = $('.bubble-container');
+      spriteProto.talkBubble.css('position', 'relative');
+      spriteProto.askInput = $('.ask-container');
+      spriteProto.askInput.css('position', 'relative');
+      spriteProto.mesh = $('.mesh');
+      spriteProto.mesh.css('position', 'relative');
+      spriteProto.z = 22;
+    });
+
+    it('should update the mesh z-index', function() {
+      expect($('.mesh').css('z-index')).toBe('auto');
+      spriteProto.updateLayer();
+      expect($('.mesh').css('z-index')).toBe('22');
+    });
+
+    it('should update the talkBubble z-index', function() {
+      expect($('.bubble-container').css('z-index')).toBe('auto');
+      spriteProto.updateLayer();
+      expect($('.bubble-container').css('z-index')).toBe('22');
+    });
+
+    it('should update the askInput z-index', function() {
+      expect($('.ask-container').css('z-index')).toBe('auto');
+      spriteProto.updateLayer();
+      expect($('.ask-container').css('z-index')).toBe('22');
+    });
+  });
+
+  describe('updateVisible', function() {
+    var spriteProto;
+    beforeEach(function() {
+      spriteProto = sprite.prototype;
+      setFixtures('<img class="mesh"></img><div class="bubble-container"></div><div class="ask-container"></div>');
+      spriteProto.talkBubble = $('.bubble-container');
+      spriteProto.talkBubble.css('display', 'none');
+      spriteProto.askInput = $('.ask-container');
+      spriteProto.askInput.css('display', 'none');
+      spriteProto.mesh = $('.mesh');
+      spriteProto.mesh.css('display', 'none');
+    });
+
+    describe('mesh', function() {
+      it('should update the mesh display on false', function() {
+        expect($('.mesh').css('display')).toBe('none');
+        spriteProto.visible = false;
+        spriteProto.updateVisible();
+        expect($('.mesh').css('display')).toBe('none');
+      });
+
+      it('should update the mesh display on true', function() {
+        expect($('.mesh').css('display')).toBe('none');
+        spriteProto.visible = true; 
+        spriteProto.updateVisible();
+        expect($('.mesh').css('display')).toBe('inline');
+      });
+
+    });
+
+    describe('talkBubble', function() {
+      it('should update the talkBubble on talkBubble true and visible true', function() {
+        expect($('.bubble-container').css('display')).toBe('none');
+        spriteProto.talkBubbleOn = true; 
+        spriteProto.visible = true; 
+        spriteProto.updateVisible();
+        expect($('.bubble-container').css('display')).toBe('inline-block');
+      });
+
+      it('should update the talkBubble on talkBubble false and visible true', function() {
+        expect($('.bubble-container').css('display')).toBe('none');
+        spriteProto.talkBubbleOn = false; 
+        spriteProto.visible = true; 
+        spriteProto.updateVisible();
+        expect($('.bubble-container').css('display')).toBe('none');
+      });
+
+      it('should update the talkBubble on talkBubble true and visible false', function() {
+        expect($('.bubble-container').css('display')).toBe('none');
+        spriteProto.talkBubbleOn = true; 
+        spriteProto.visible = false; 
+        spriteProto.updateVisible();
+        expect($('.bubble-container').css('display')).toBe('none');
+      });
+    });
+
+    describe('askContainer', function() {
+      it('should update the askInput on askInput true and visible true', function() {
+        expect($('.ask-container').css('display')).toBe('none');
+        spriteProto.askInputOn = true; 
+        spriteProto.visible = true; 
+        spriteProto.updateVisible();
+        expect($('.ask-container').css('display')).toBe('inline-block');
+      });
+
+      it('should update the askInput on askInput false and visible true', function() {
+        expect($('.ask-container').css('display')).toBe('none');
+        spriteProto.askInputOn = false; 
+        spriteProto.visible = true; 
+        spriteProto.updateVisible();
+        expect($('.ask-container').css('display')).toBe('none');
+      });
+
+      it('should update the askInput on askInput true and visible false', function() {
+        expect($('.ask-container').css('display')).toBe('none');
+        spriteProto.askInputOn = true; 
+        spriteProto.visible = false; 
+        spriteProto.updateVisible();
+        expect($('.ask-container').css('display')).toBe('none');
+      });
+    });
+
+  });
+
+  describe('setVisible', function() {
+    var spriteProto;
+    beforeEach(function() {
+      spriteProto = sprite.prototype;
+      spyOn(spriteProto, "updateVisible");
+    });
+
+    it('should set visible to true', function() {
+      expect(spriteProto.visible).toBe(false);
+      spriteProto.setVisible(true);
+      expect(spriteProto.visible).toBe(true);
+      expect(spriteProto.updateVisible).toHaveBeenCalled();
+    });
+
+    it('should set visible to false', function() {
+      spriteProto.visible = true;
+      spriteProto.setVisible(false);
+      expect(spriteProto.visible).toBe(false);
+      expect(spriteProto.updateVisible).toHaveBeenCalled();
+    });
+
+    it('should set take no action on an invalid character', function() {
+      spriteProto.visible = true;
+      spriteProto.setVisible('hello');
+      expect(spriteProto.visible).toBe(true);
+      expect(spriteProto.updateVisible).not.toHaveBeenCalled();
+    });
+
+  });
+});

test/unit/stageSpec.js

@@ -0,0 +1,51 @@
+/* jasmine specs for Stage.js go here */
+
+describe ('Stage', function() {
+  var stage;
+
+  beforeEach(function() {
+    stage = Stage;
+  });
+
+  describe('Instantization variables', function() {
+    var initStage, lineCanvas;
+    beforeEach(function() {
+      spyOn(Sprite, "call");
+      initStage = new stage(sensingData);
+    });
+
+    describe('Stage Variables', function() {
+      it('should have a z variable', function() {
+        expect(initStage.z).toBe(-2);
+      });
+
+      it('should have a penLayerLoaded variable', function() {
+        expect(initStage.penLayerLoaded).toBe(false);
+      });
+
+      it('should have a lineCanvas element', function() {
+        expect(initStage.lineCanvas).toBeDefined();
+      });
+
+      it('should have a lineCanvas width', function() {
+        expect(initStage.lineCanvas.width).toBe(480);
+      });
+
+      it('should have a lineCanvas height', function() {
+        expect(initStage.lineCanvas.height).toBe(360);
+      });
+
+      it('should have a lineCache variable', function() {
+        expect(initStage.lineCache).toBeDefined();
+      });
+
+      it('should have a isStage variable', function() {
+        expect(initStage.isStage).toBe(true);
+      });
+
+      it('should have called Sprite.call', function() {
+        expect(Sprite.call).toHaveBeenCalled();
+      });
+    });
+  });
+});