|
|
|
function DialogueSequence( sequence ){
|
|
|
|
|
|
|
|
var targetStory = story[sequence] ? story[sequence].slice(0) : ( messages[sequence] ? messages[sequence].slice(0) : [] );
|
|
|
|
|
|
|
|
return {
|
|
|
|
next: function(){
|
|
|
|
return targetStory.shift().split(": ");
|
|
|
|
},
|
|
|
|
more: function(){
|
|
|
|
return targetStory.length > 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function DialogUI( stage, gameState ){
|
|
|
|
var that = this;
|
|
|
|
// Dialog States
|
|
|
|
var DIALOG_RECEDING = 0;
|
|
|
|
var DIALOG_SHOWING = 1;
|
|
|
|
var DIALOG_PAUSING = 2;
|
|
|
|
var MILLIS_PER_CHAR = 100;
|
|
|
|
|
|
|
|
var peopleImg = {
|
|
|
|
"Boyfriend": new createjs.Bitmap("res/people/Boyfriend.png"),
|
|
|
|
"Brother": new createjs.Bitmap("res/people/Brother.png"),
|
|
|
|
"Cat": new createjs.Bitmap("res/people/Cat.png"),
|
|
|
|
"Dad": new createjs.Bitmap("res/people/Dad.png"),
|
|
|
|
"Girlfriend": new createjs.Bitmap("res/people/Girlfriend.png"),
|
|
|
|
"Grandma": new createjs.Bitmap("res/people/Grandma.png"),
|
|
|
|
"Grandpa": new createjs.Bitmap("res/people/Grandpa.png"),
|
|
|
|
"Mom": new createjs.Bitmap("res/people/Mom.png"),
|
|
|
|
"Female": new createjs.Bitmap("res/people/PlayerFemale.png"),
|
|
|
|
"Male": new createjs.Bitmap("res/people/PlayerMale.png"),
|
|
|
|
"Turkey": new createjs.Bitmap("res/people/TurkeyGhost.png")
|
|
|
|
};
|
|
|
|
|
|
|
|
var dialogueList = Object.keys(story);
|
|
|
|
|
|
|
|
this.dialogSpeed = 30;
|
|
|
|
this.dialogState = DIALOG_PAUSING;
|
|
|
|
|
|
|
|
this.dialogMotionQueue = [DIALOG_RECEDING];
|
|
|
|
this.currDialogueSeq = new DialogueSequence("Null");
|
|
|
|
dialogQueue = [];
|
|
|
|
|
|
|
|
this.dialogBox = new createjs.Bitmap("res/screens/GUI/DialogueBox.png");
|
|
|
|
this.dialogBox.x = 0;
|
|
|
|
this.dialogBox.y = 250;
|
|
|
|
|
|
|
|
this.currentFace = peopleImg["Male"];
|
|
|
|
this.currentFace.x = 0;
|
|
|
|
|
|
|
|
this.textContent = new createjs.Text( "", "24px Arial", "black" );
|
|
|
|
this.textContent.x = 205;
|
|
|
|
this.textContent.y = 705;
|
|
|
|
this.textContent.lineWidth = 565;
|
|
|
|
this.textContent.lineHeight = 30;
|
|
|
|
this.textContent.textBaseline = "alphabetic";
|
|
|
|
|
|
|
|
this.dialogBox.addEventListener( "mouseover", function(){ document.body.style.cursor='pointer'; } );
|
|
|
|
this.dialogBox.addEventListener( "mouseout", function(){ document.body.style.cursor='default'; } );
|
|
|
|
this.dialogBox.addEventListener( "click", function(){ setTimeout( clickEvent, 100); });
|
|
|
|
|
|
|
|
this.textContent.addEventListener( "mouseover", function(){ document.body.style.cursor='pointer'; } );
|
|
|
|
this.textContent.addEventListener( "mouseout", function(){ document.body.style.cursor='default'; } );
|
|
|
|
this.textContent.addEventListener( "click", function(){ setTimeout( clickEvent, 100); });
|
|
|
|
|
|
|
|
this.endFunc = function(){};
|
|
|
|
|
|
|
|
this.showDialog= function( textSeq ){
|
|
|
|
if(DEBUG) console.log("showing"+ textSeq);
|
|
|
|
if( !peopleImg["Me"] ){
|
|
|
|
peopleImg["Me"] = peopleImg[gameState.gender];
|
|
|
|
}
|
|
|
|
|
|
|
|
if( !peopleImg["Spouse"] ){
|
|
|
|
if( gameState.gender == "Male" ){
|
|
|
|
peopleImg["Spouse"] = peopleImg["Girlfriend"] ;
|
|
|
|
}else{
|
|
|
|
peopleImg["Spouse"] = peopleImg["Boyfriend"] ;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if( textSeq.seq == "custom" ){
|
|
|
|
messages["custom"] = ["Me: " + textSeq.customText ];
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if( textSeq.random ){
|
|
|
|
that.showRandomConvo();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
that.currDialogueSeq = new DialogueSequence( textSeq.seq );
|
|
|
|
var nextDialogue = that.currDialogueSeq.next();
|
|
|
|
|
|
|
|
that.endFunc = textSeq.endFunc || function(){};
|
|
|
|
|
|
|
|
that.textContent.text=nextDialogue[1].replace(/\[GenderPronoun\]/g, gameState.pronoun ).replace(/\[Player\]/g, gameState.name );
|
|
|
|
that.currentFace.y = 250;
|
|
|
|
that.currentFace = peopleImg[nextDialogue[0]] || that.currentFace;
|
|
|
|
that.autoAdvance = textSeq.autoAdvance;
|
|
|
|
that.dialogMotionQueue = [DIALOG_SHOWING];
|
|
|
|
}
|
|
|
|
|
|
|
|
this.showRandomConvo = function(){
|
|
|
|
// No more stories, thanks for playing
|
|
|
|
if( dialogueList.length == 0 ) return;
|
|
|
|
|
|
|
|
dialogueList = Object.keys(story);
|
|
|
|
var randomKey = UtilityFunctions.randRange(0, dialogueList.length);
|
|
|
|
|
|
|
|
// check if there is something going on
|
|
|
|
if( !that.currDialogueSeq.more() ){
|
|
|
|
if(DEBUG) console.log("random story");
|
|
|
|
this.showDialog( {seq: dialogueList[ randomKey ] || "Dad Tells a bad Joke", autoAdvance:true } );
|
|
|
|
delete story[ dialogueList[ randomKey ] ];
|
|
|
|
gameState.dialogueHeard++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
gameState.pubsub.subscribe( "ShowDialog", this.showDialog );
|
|
|
|
|
|
|
|
// negate double setTimeout if clicked
|
|
|
|
var oldTime = new Date().getTime();
|
|
|
|
var delayCounter = 0;
|
|
|
|
var clickEvent = function( timer ){
|
|
|
|
|
|
|
|
if( !peopleImg["Me"] ){
|
|
|
|
peopleImg["Me"] = peopleImg[gameState.gender];
|
|
|
|
}
|
|
|
|
|
|
|
|
// if there is more dialogue text, then keep going, otherwise, recede
|
|
|
|
if( that.currDialogueSeq.more() ){
|
|
|
|
var nextDialogue = that.currDialogueSeq.next();
|
|
|
|
|
|
|
|
that.dialogMotionQueue.push(DIALOG_SHOWING);
|
|
|
|
that.textContent.text=nextDialogue[1];
|
|
|
|
if(DEBUG) console.log("showing face:" +nextDialogue[0] );
|
|
|
|
|
|
|
|
// swap out face immediately
|
|
|
|
that.currentFace.y = 250;
|
|
|
|
that.currentFace = peopleImg[nextDialogue[0]] || that.currentFace;
|
|
|
|
that.currentFace.y = 0;
|
|
|
|
}else{
|
|
|
|
// pause and close dialog
|
|
|
|
setTimeout( function(){
|
|
|
|
that.dialogMotionQueue.push(DIALOG_RECEDING);
|
|
|
|
if( that.endFunc )
|
|
|
|
that.endFunc();
|
|
|
|
}, 250 );
|
|
|
|
}
|
|
|
|
delayCounter = 0;
|
|
|
|
oldTime = new Date().getTime();
|
|
|
|
}
|
|
|
|
|
|
|
|
stage.addChild( this.dialogBox );
|
|
|
|
stage.addChild( this.textContent );
|
|
|
|
|
|
|
|
for(var i in peopleImg ){
|
|
|
|
peopleImg[i].alpha = 1;
|
|
|
|
peopleImg[i].y = 250;
|
|
|
|
stage.addChild( peopleImg[i] );
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
tick: function(){
|
|
|
|
delayCounter = new Date().getTime() - oldTime;
|
|
|
|
|
|
|
|
if( that.autoAdvance == true && that.dialogBox.y ==0 && delayCounter > ( (that.textContent.text.length * MILLIS_PER_CHAR) < 2000 ? 2000 : (that.textContent.text.length * MILLIS_PER_CHAR) ) ){
|
|
|
|
clickEvent();
|
|
|
|
}
|
|
|
|
|
|
|
|
if( that.dialogState == DIALOG_RECEDING ){
|
|
|
|
that.dialogBox.y+=that.dialogSpeed;
|
|
|
|
that.textContent.y += that.dialogSpeed;
|
|
|
|
that.currentFace.y += that.dialogSpeed;
|
|
|
|
//if(DEBUG) console.log( "Receding" + that.dialogBox.y );
|
|
|
|
}
|
|
|
|
if( that.dialogState == DIALOG_SHOWING ){
|
|
|
|
that.dialogBox.y-=that.dialogSpeed;
|
|
|
|
that.textContent.y -= that.dialogSpeed;
|
|
|
|
that.currentFace.y -= that.dialogSpeed;
|
|
|
|
//if(DEBUG) console.log( "Advancing" + that.dialogBox.y );
|
|
|
|
}
|
|
|
|
|
|
|
|
// toggle states
|
|
|
|
if( that.dialogBox.y > 250 && that.dialogState == DIALOG_RECEDING ){
|
|
|
|
that.dialogBox.y = 250;
|
|
|
|
that.textContent.y = 735;
|
|
|
|
that.currentFace.y = 250;
|
|
|
|
that.dialogState = DIALOG_PAUSING;
|
|
|
|
//if(DEBUG) console.log( "Pausing on recede" + that.dialogBox.y );
|
|
|
|
|
|
|
|
}
|
|
|
|
if( that.dialogBox.y < 0 && that.dialogState == DIALOG_SHOWING ){
|
|
|
|
that.dialogBox.y = 0;
|
|
|
|
that.textContent.y = 480;
|
|
|
|
that.currentFace.y = 0;
|
|
|
|
that.dialogState = DIALOG_PAUSING;
|
|
|
|
//if(DEBUG) console.log( "Pausing on showing" + that.dialogBox.y );
|
|
|
|
}
|
|
|
|
|
|
|
|
/* next states if there are any on the queue */
|
|
|
|
if( that.dialogMotionQueue.length > 0 && that.dialogState == DIALOG_PAUSING ){
|
|
|
|
that.dialogState = that.dialogMotionQueue.shift();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
minDialog: function(){
|
|
|
|
that.dialogMotionQueue.push( DIALOG_RECEDING );
|
|
|
|
},
|
|
|
|
|
|
|
|
maxDialog: function(){
|
|
|
|
that.dialogMotionQueue.push( DIALOG_SHOWING );
|
|
|
|
},
|
|
|
|
render: function(){
|
|
|
|
stage.addChild( that.dialogBox );
|
|
|
|
stage.addChild( that.textContent );
|
|
|
|
|
|
|
|
for(var i in peopleImg ){
|
|
|
|
peopleImg[i].alpha = 1;
|
|
|
|
stage.addChild( peopleImg[i] );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|