Working dialogue, market screen

index.html

@@ -15,6 +15,8 @@
   </body>
   <script src="http://code.createjs.com/createjs-2013.09.25.min.js"></script>
   <script src="js/model.js"></script>
+  <script src="js/stories.js"></script>
+  <script src="js/dialogue.js"></script>
   <script src="js/ui.js"></script>
   <script src="js/screens.js"></script>
   <script src="js/main.js"></script>

js/dialogue.js

@@ -0,0 +1,11 @@
+function DialogueSequence(){
+
+	return {
+		next: function(){
+			return story.shift().split(": ")[1];
+		},
+		more: function(){
+			return story.length > 0;
+		}
+	}
+}

js/main.js

@@ -1,15 +1,28 @@
 function GameState(){
 	var that = this;
 
+	var SCREEN_OUT = 1;
+	var SCREEN_IN  = 2;
+	var SCREEN_STABLE = 0;
+	var screenAlpha = 1;
+
 	this.pubsub = {};
 	BindPubSub( this.pubsub );
 	this.currentTime = new Date().getTime();
-
 	this.oldTime = new Date().getTime();
 
 	this.mainUI = new GameUI( "demoCanvas", this );
     createjs.Ticker.addEventListener( "tick", gameLoop );
 
+
+    // Load all our resources:
+    var queue = new createjs.LoadQueue(true);
+    queue.installPlugin(createjs.Sound);
+    //queue.addEventListener("fileload", handleFileComplete);
+    queue.loadFile( {id: "sound", src:"res/sound/turkey_in_the_straw.mp3"} );
+
+    this.screenState = 0;
+
 	function gameLoop(){
 		that.mainUI.draw();
 	}
@@ -23,7 +36,7 @@ function GameUI( canvasElem, gameState ){
 	var that = this;
 
 	this.stage = new createjs.Stage( canvasElem );
-//	this.stage.enableMouseOver(36);
+	this.stage.enableMouseOver(20);
 
 	this.activeScreenName = "EndingScreen";
 	this.activeScreenObj = {};
@@ -42,19 +55,29 @@ function GameUI( canvasElem, gameState ){
 		"CreditsScreen"		 : CreditsScreen
 	}
 
-	this.activeScreenObj = new MainScreen( this.stage, gameState );
+	this.activeScreenObj = new KitchenScreen( this.stage, gameState );
+	var textContent = new createjs.Text( "", "16px Arial", "#00000000" );
+	textContent.x = 750;
+	textContent.y = 30;
+	that.stage.addChild( textContent);
 
 	this.switchScreen = function( screenName ){
+		//gameState.screenState = SCREEN_OUT;
+
 		console.log("Switch screen called with" + screenName);
 		that.stage.removeAllChildren();
 		that.activeScreenObj = new that.screens[ screenName ]( that.stage, gameState );
+		//var rect = new createjs.Rectangle(0, 0, 100, 100);
+		that.stage.addChild( textContent );
 	}
 
+
 	gameState.pubsub.subscribe( "SwitchScreen", this.switchScreen );
 
 	return {
 		draw : function(){
 			that.activeScreenObj.blit();
+			textContent.text = createjs.Ticker.getMeasuredFPS().toFixed(1);
 			that.stage.update();
 		}
 	}
@@ -66,29 +89,62 @@ function DialogUI( stage ){
 	var DIALOG_RECEDING = 0;
 	var DIALOG_SHOWING = 1;
 	var DIALOG_PAUSING = 2;
+	var MILLIS_PER_CHAR = 50;
 
-	this.dialogSpeed = 15;
+	this.dialogSpeed = 30;
 	this.dialogState = DIALOG_PAUSING;
 
-	this.dialogMotionQueue = [DIALOG_RECEDING,DIALOG_SHOWING,DIALOG_RECEDING];
+	this.dialogMotionQueue = [DIALOG_RECEDING,DIALOG_SHOWING,DIALOG_PAUSING];
+	this.currDialogueSeq = new DialogueSequence();
 	dialogQueue = [];
 
 
-	// Replace with bitmap
-	this.dialogBox = new createjs.Shape();
-	this.dialogBox.graphics.beginFill( "#00ffff" ).drawRect( 0, 450, 800, 150 );
+	this.dialogBox = new createjs.Bitmap("res/DialogueBox.png");
+	this.dialogBox.x = 10;
+	this.dialogBox.y = 435;
 
-	this.textContent = new createjs.Text( "Hello World This is some conversation text", "20px Arial", "#ff7700" );
-	this.textContent.x = 50;
-	this.textContent.y = 500;
+	this.textContent = new createjs.Text( "Hey there kids!", "16px Arial", "#00000000" );
+	this.textContent.x = 195;
+	this.textContent.y = 475;
+	this.textContent.lineWidth = 600;
+	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(){ clickEvent(); });
+
+	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(){ clickEvent(); });
+
+
+ 	// negate double setTimeout if clicked
+ 	var oldTime = new Date().getTime();
+ 	var delayCounter = 0;
+ 	var clickEvent = function( timer ){
+
+ 		// if there is more dialogue text, then keep going, otherwise, recede
+ 		if( that.currDialogueSeq.more() ){
+ 			that.dialogMotionQueue.push(DIALOG_SHOWING);
+ 			that.textContent.text=that.currDialogueSeq.next();
+ 			delayCounter = 0;
+ 			oldTime = new Date().getTime()
+ 		}else{
+ 			// pause and close dialog
+ 			setTimeout( function(){that.dialogMotionQueue.push(DIALOG_RECEDING)}, 1000 );
+ 		}
+ 	}
 	stage.addChild( this.dialogBox );
 	stage.addChild( this.textContent );
 
     return {
     	tick: function(){
+    		delayCounter = new Date().getTime() - oldTime;
 
+    		if(that.dialogBox.y ==435 && delayCounter > ( that.textContent.text.length * MILLIS_PER_CHAR ) ){
+    			clickEvent();
+    		}
     		if( that.dialogState == DIALOG_RECEDING ){
 	    		that.dialogBox.y+=that.dialogSpeed;
 	    		that.textContent.y +=that.dialogSpeed;
@@ -101,23 +157,23 @@ function DialogUI( stage ){
     		}
 
     		// toggle states
-    		if( that.dialogBox.y > 150 && that.dialogState == DIALOG_RECEDING ){
-    			that.dialogBox.y = 150;
-    			that.textContent.y = 650;
+    		if( that.dialogBox.y > 675 && that.dialogState == DIALOG_RECEDING ){
+    			that.dialogBox.y = 675;
+    			that.textContent.y = 705;
     			that.dialogState = DIALOG_PAUSING;
     			console.log( "Pausing on recede" + that.dialogBox.y );
 
     		}
-    		if( that.dialogBox.y < 0 && that.dialogState == DIALOG_SHOWING ){
-    			that.dialogBox.y = 0;
-    			that.textContent.y = 500;
+    		if( that.dialogBox.y < 435 && that.dialogState == DIALOG_SHOWING ){
+    			that.dialogBox.y = 435;
+    			that.textContent.y = 465;
     			that.dialogState = DIALOG_PAUSING;
     			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.pop();
+    			that.dialogState = that.dialogMotionQueue.shift();
     		}
     	},
 

js/screens.js

@@ -48,6 +48,22 @@ function MainScreen( stage, gameState ){
     this.background = new createjs.Bitmap( "res/Main.png" );
     stage.addChild( this.background );
 
+    //createjs.Sound.addEventListener("fileload", createjs.proxy(loadHandler, this));
+    createjs.Sound.registerSound("res/sound/turkey_in_the_straw.mp3", "sound");
+
+	var instance = createjs.Sound.createInstance("sound");  // play using id.  Could also use full sourcepath or event.src.
+	instance.setPosition(5650);
+	instance.volume = 0.5;
+
+	instance.play();
+
+	// loop-de-loop
+ 	instance.addEventListener("complete", playAgain);
+ 	function playAgain(event) {
+ 		instance.setPosition(5650);
+     	instance.play();
+ 	}
+
 	// buttons info/credits/start
  	stage.addChild( new Button( stage, gameState, 13, 445, 222, 65, "SwitchScreen", "InfoHelpScreen" ) );
  	stage.addChild( new Button( stage, gameState, 13, 515, 222, 65, "SwitchScreen", "CreditsScreen" ) );
@@ -76,8 +92,8 @@ function DifficultyScreen( stage, gameState ){
     stage.addChild( this.background );
 
  	// Easy/Hard Button
- 	stage.addChild( new Button( stage, gameState, 170, 40, 450, 105, "SwitchScreen", "KitchenScreen" ) );
- 	stage.addChild( new Button( stage, gameState, 170, 150, 450, 105, "SwitchScreen", "KitchenScreen" ) );
+ 	stage.addChild( new Button( stage, gameState, 170, 40, 450, 105, "SwitchScreen", "MarketScreen" ) );
+ 	stage.addChild( new Button( stage, gameState, 170, 150, 450, 105, "SwitchScreen", "MarketScreen" ) );
 
 	return {
 		blit : function(){
@@ -116,10 +132,28 @@ function KitchenScreen( stage, gameState ){
 function MarketScreen( stage, gameState ){
 	var that = this;
 
-    this.background = new createjs.Bitmap( "res/Main.png" );
+    this.background = new createjs.Bitmap( "res/Store-Screen-Clean.png" );
     stage.addChild( this.background );
+    stage.addChild( new Button( stage, gameState, 13, 445, 222, 65, "SwitchScreen", "KitchenScreen" ) );
 
     this.uiElems = [];
+    this.uiElems.push( new MarketItem( stage, gameState, 275,195, 100, "res/items/Alarm.png", "res/items/AlarmGlow.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 200,200, 100, "res/items/Bottle1.png", "res/items/Bottle1.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 456,123, 100, "res/items/Bottle2.png", "res/items/Bottle2.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 312,222, 100, "res/items/Bottle3.png", "res/items/Bottle3.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 300,400, 100, "res/items/Cookbook1.png", "res/items/Cookbook1Glow.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 12,11, 100, "res/items/FrillsBox.png", "res/items/FrillsBoxGlow.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 44,222, 100, "res/items/OvenLightBox.png", "res/items/OvenLightBoxGlow.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 66,444, 100, "res/items/StuffingExquisite.png", "res/items/StuffingExquisiteGlow.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState,  293,12, 100, "res/items/StuffingRepurposed.png", "res/items/StuffingRepurposedGlow.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 438,200, 100, "res/items/StuffingSpecial.png", "res/items/StuffingSpecialGlow.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 444,334, 100, "res/items/TempProbe.png", "res/items/TempProbeGlow.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 555,33, 100, "res/items/Turkey1.png", "res/items/Turkey1Glow.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 200,200, 100, "res/items/Turkey2.png", "res/items/Turkey2Glow.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 100,100, 100, "res/items/Turkey3.png", "res/items/Turkey3Glow.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 122,349, 100, "res/items/Turkey4.png", "res/items/Turkey4Glow.png" ) );
+    this.uiElems.push( new MarketItem( stage, gameState, 96,406, 100, "res/items/Turkey5.png", "res/items/Turkey5Glow.png" ) );
+
     return {
 		blit : function(){
 

js/stories.js

@@ -0,0 +1,12 @@
+var story = ["Brother: Hey Grandpa, I've got a funny story about that primer you gave me",
+"Grandpa: You'll have to remind me, again, my memory isn't too good in my old age",
+"Brother: Well, you gave me some primer to redo my room.",
+"Mom: How is that going? Last I heard you had the priming done",
+"Brother: Yup. Well, almost. I still have a mess to clean up",
+"Mom : What happened?",
+"Brother: Well, this can of primer was pretty old. And I guess it rusted on the bottom. So I prep everything, and get the primer can lid taken off, and start going to town on the wall. Then, I start feeling some wetness on my pants. I look down and there are primer drops all over my pants.",
+"Dad: Why were you holding the paint bucket though. Don't you just pour it in a roller pan and do it that way like I taught you?",
+"Brother: Well yes, but I was also cutting the edges, like you taught me. And that was easier with the paint bucket in my hand. Or so I thought...",
+"Brother: Right. Well, umm so I quickly put the paint can down in the roller pan, seee, that I had nearby, and as I turned around to go clean myself off with some paper towels, I noticed a drip line all the way from the garage.",
+"Brother: That's not good. So I dashed for the towels, and tried to soak up as much as possible. And well.. yeah  So, in the future, I probably won't go for your primer Grandpa.",
+"Grandpa: ..."];

js/ui.js

@@ -84,7 +84,7 @@ function OvenUI( stage, gameState ){
 
 	this.changeTemperature = function( direction ){
 
-		if( temperatureText.text == "OFF" && direction == "Up" ) temperatureText.text = "150";
+		if( temperatureText.text == "OFF" && direction == "Up" ) temperatureText.text = "125";
 		if( !( temperatureText.text == "OFF" && direction == "Down" ) ){
 
 			var temp = ( direction == "Up" ? parseInt(temperatureText.text)+25 : parseInt(temperatureText.text)-25);
@@ -110,8 +110,8 @@ function OvenUI( stage, gameState ){
     		gameState.currentTime += 1000;
 	}
 
-    setInterval(this.secondTick, 500);
-    
+    setInterval(this.secondTick, 1000);
+
     stage.addChild( this.text );
 
     return {
@@ -131,33 +131,36 @@ return {
 }
 }
 
-function Item(){
-		/*img.onPress = function(e) {
-	    document.body.style.cursor='move';
-	    offset = {x:e.stageX - e.target.x, y:e.stageY - e.target.y};
+function MarketItem( stage, gameState, x, y, cost, mouseOutImg, mouseOverImg ){
+		var mouseOver = new createjs.Bitmap( mouseOverImg );
+		var mouseOut = new createjs.Bitmap( mouseOutImg );
+		mouseOver.x = mouseOut.x = x;
+		mouseOver.y = mouseOut.y = y;
+	 	mouseOut.addEventListener( "mouseover", function(){ document.body.style.cursor='pointer'; mouseOver.visible = true; mouseOut.visible = false;  } );
+ 		mouseOut.addEventListener( "mouseout", function(){ document.body.style.cursor='default'; mouseOver.visible = false; mouseOut.visible = true; } );
+ 		mouseOver.addEventListener( "mouseover", function(){ document.body.style.cursor='pointer'; mouseOver.visible = true; mouseOut.visible = false;  } );
+ 		mouseOver.addEventListener( "mouseout", function(){ document.body.style.cursor='default'; mouseOver.visible = false; mouseOut.visible = true; } );
+ 		mouseOver.addEventListener( "click", function(){ alert("buy!"); } );
+ 		mouseOver.visible = false;
+    	stage.addChild( mouseOut );
+    	stage.addChild( mouseOver );
 
-	    e.onMouseMove = drag;
-	}*/
+	return {
+		tick: function(){}
+	}
 
 }
 
 function Button( stage, gameState, x_orig, y_orig, x_dest, y_dest, eventCmd, arg ){
 	var that = this;
 
-	var infoButton = new createjs.Shape();
- 	infoButton.graphics.beginFill("#ffffff").drawRect(x_orig, y_orig, x_dest, y_dest);
- 	infoButton.alpha = 0.5;
- 	infoButton.addEventListener( "click", function(){ gameState.pubsub.publish( eventCmd, arg ) } );
-
-	infoButton.onMouseOver = function(e) {
-		alert("mouseover");
-    	document.body.style.cursor='pointer';
-	}
-
-	infoButton.onMouseOut = function(e) {
-	    document.body.style.cursor='default';
-	}
+	var button = new createjs.Shape();
+ 	button.graphics.beginFill("#ffffff").drawRect(x_orig, y_orig, x_dest, y_dest);
+ 	button.alpha = 0.5;
+ 	button.addEventListener( "click", function(){ gameState.pubsub.publish( eventCmd, arg ) } );
+ 	button.addEventListener( "mouseover", function(){ document.body.style.cursor='pointer'; } );
+ 	button.addEventListener( "mouseout", function(){ document.body.style.cursor='default'; } );
 
-	return infoButton;
+	return button;
 
 }