scratchfoundation/scratch-html5
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updates to add "ask" functionality

Browse source
This commit is contained in:
Brian Pilati 2014-03-08 00:46:59 -07:00
parent 3842832e52
commit 1beed456cc
17 changed files with 809 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

11
js/Reporter.js
View file

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

70
js/Sprite.js
View file

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

1
js/Stage.js
View file

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

14
js/primitives/LooksPrims.js
View file

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