Dialog, sound, market

index.html

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

js/main.js

@@ -1,40 +1,89 @@
 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"} );
+    queue.loadFile( {id: "TitleMusicFile", src:"res/sound/turkey_in_the_straw.mp3"} );
+    queue.loadFile( {id: "MarketBackgroundSoundFile", src:"res/sound/supermarket.mp3"} );
+    queue.loadFile( {id: "MarketBackgroundSoundFile", src:"res/items/FrillsBox.png"} );
 
     this.screenState = 0;
+    this.newScreen = "";
+
+
+    // Game State flags
+    this.turkeyBought = false;
+	this.marketItems = {
+		"FrillsBox" : new MarketItem( this, "FrillsBox", 133,92, 100, "res/items/FrillsBox.png", "res/items/FrillsBoxGlow.png" ),
+	    "TuTempProberkey" : new MarketItem( this, "TuTempProberkey", 200, 57, 100, "res/items/TempProbe.png", "res/items/TempProbeGlow.png" ),
+	    "OvenLightBox" : new MarketItem( this, "OvenLightBox", 131,222, 100, "res/items/OvenLightBox.png", "res/items/OvenLightBoxGlow.png" ),
+
+	    "Alarm" : new MarketItem( this, "Alarm", 173,248, 100, "res/items/Alarm.png", "res/items/AlarmGlow.png" ),
+		"Cookbook" : new MarketItem( this, "Cookbook", 283,203, 100, "res/items/Cookbook1.png", "res/items/Cookbook1Glow.png" ),
+	    "StuffingRepurposed" : new MarketItem( this, "StuffingRepurposed",  510,197, 100, "res/items/StuffingRepurposed.png", "res/items/StuffingRepurposedGlow.png" ),
+	    "StuffingExquisite" : new MarketItem( this, "StuffingExquisite", 458,210, 100, "res/items/StuffingExquisite.png", "res/items/StuffingExquisiteGlow.png" ),
+	    "StuffingSpecial" : new MarketItem( this, "StuffingSpecial", 390,220, 100, "res/items/StuffingSpecial.png", "res/items/StuffingSpecialGlow.png" ),
+
+	    "Turkey1" : new MarketItem( this, "Turkey1", 170,350, 100, "res/items/Turkey5.png", "res/items/Turkey5Glow.png" ),
+	    "Turkey2": new MarketItem( this, "Turkey2", 540,320, 100, "res/items/Turkey4.png", "res/items/Turkey4Glow.png" ),
+	    "Turkey3" : new MarketItem( this, "Turkey3", 265,415, 100, "res/items/Turkey3.png", "res/items/Turkey3Glow.png" ),
+	    "Turkey4": new MarketItem( this, "Turkey4", 474,357, 100, "res/items/Turkey2.png", "res/items/Turkey2Glow.png" ),
+		"Turkey5": new MarketItem( this, "Turkey5", 368,426, 100, "res/items/Turkey1.png", "res/items/Turkey1Glow.png" )
+	};
+
+	this.purchasedItems = [];
+	
+	// did we already show the player the kitchen intro?
+	this.kitchenIntro = false;
+
+	this.mainUI = new GameUI( "demoCanvas", this );
+    createjs.Ticker.addEventListener( "tick", gameLoop );
 
 	function gameLoop(){
 		that.mainUI.draw();
 	}
 
 	return {
-		"main": this
+	//	"main": this
 	}
 }
+/*
+	createjs.Sound.registerSound("res/sound/supermarket.mp3", "TitleMusic");
+	var backgroundSound = createjs.Sound.createInstance("TitleMusic");  // play using id.  Could also use full sourcepath or event.src.
+	var backgroundSounds = createjs.Sound.createInstance("TitleMusic");
+	backgroundSound.setPosition(0);
+	backgroundSound.volume = 1;
+	setTimeout(function(){ backgroundSounds.play();},2000);
+
+	backgroundSound.play();
+
+	// loop-de-loop
+ 	backgroundSound.addEventListener("complete", playAgain);
+ 	backgroundSound.addEventListener("complete", playAgainMe);
+ 	function playAgain(event) {
+ 		backgroundSound.setPosition(0);
+     	backgroundSound.play();
+     	
+ 	}
+ 	function playAgainMe(event){
+ 		setTimeout(function(){ backgroundSounds.play();},1000);
+ 	}
+*/
 
 function GameUI( canvasElem, gameState ){
 	var that = this;
 
+	var SCREEN_OUT = 1;
+	var SCREEN_IN  = 2;
+	var SCREEN_STABLE = 0;
+
 	this.stage = new createjs.Stage( canvasElem );
 	this.stage.enableMouseOver(20);
 
@@ -55,27 +104,60 @@ function GameUI( canvasElem, gameState ){
 		"CreditsScreen"		 : CreditsScreen
 	}
 
-	this.activeScreenObj = new KitchenScreen( this.stage, gameState );
-	var textContent = new createjs.Text( "", "16px Arial", "#00000000" );
+	this.activeScreenObj = new MarketScreen( this.stage, gameState );
+	var textContent = new createjs.Text( "", "20px Arial", "#00000000" );
 	textContent.x = 750;
 	textContent.y = 30;
-	that.stage.addChild( textContent);
+	this.stage.addChild( textContent);
+	var overlay = new createjs.Shape();
+ 	overlay.graphics.beginFill("#fffffff").drawRect(0, 0, 800, 600 );
+ 	overlay.alpha = 0;
+	this.stage.addChild(overlay);
 
-	this.switchScreen = function( screenName ){
-		//gameState.screenState = SCREEN_OUT;
+	var soundManager = new SoundManager( gameState );
 
+	// delay for fade in and fade-out
+	this.switchScreen = function( screenName ){
+		gameState.screenState = SCREEN_OUT;
+		gameState.pubsub.publish( "FadeOut", "" );
 		console.log("Switch screen called with" + screenName);
+		gameState.newScreen = screenName;
+	};
+	this.actuallySwitchScreen = function( 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 );
-	}
-
+		that.stage.addChild( overlay );
+	};
 
 	gameState.pubsub.subscribe( "SwitchScreen", this.switchScreen );
+	gameState.pubsub.subscribe( "ActuallySwitchScreen", this.actuallySwitchScreen );
+
+	// Allow items to be removed if they don't have access to stage
+	gameState.pubsub.subscribe("RemoveItems", function(items){
+		for (var index in items ){
+			that.stage.removeChild(items[index]);
+		}
+	});
 
 	return {
 		draw : function(){
+			if( gameState.screenState == SCREEN_OUT ){
+				overlay.alpha +=0.3;
+			}
+			if( gameState.screenState == SCREEN_IN ){
+				overlay.alpha -=0.3;
+			}
+			if( overlay.alpha > 1.0 ){
+				gameState.screenState = SCREEN_IN;
+				overlay.alpha = 1;
+				gameState.pubsub.publish( "ActuallySwitchScreen", gameState.newScreen );
+			}
+			if( overlay.alpha  < 0.0 ){
+				gameState.screenState = SCREEN_STABLE;
+				overlay.alpha = 0;
+			}
+			soundManager.tick();
 			that.activeScreenObj.blit();
 			textContent.text = createjs.Ticker.getMeasuredFPS().toFixed(1);
 			that.stage.update();
@@ -89,34 +171,33 @@ function DialogUI( stage ){
 	var DIALOG_RECEDING = 0;
 	var DIALOG_SHOWING = 1;
 	var DIALOG_PAUSING = 2;
-	var MILLIS_PER_CHAR = 50;
+	var MILLIS_PER_CHAR = 100;
 
 	this.dialogSpeed = 30;
 	this.dialogState = DIALOG_PAUSING;
 
-	this.dialogMotionQueue = [DIALOG_RECEDING,DIALOG_SHOWING,DIALOG_PAUSING];
+	this.dialogMotionQueue = [DIALOG_SHOWING];
 	this.currDialogueSeq = new DialogueSequence();
 	dialogQueue = [];
 
-
 	this.dialogBox = new createjs.Bitmap("res/DialogueBox.png");
 	this.dialogBox.x = 10;
-	this.dialogBox.y = 435;
+	this.dialogBox.y = 675;
 
-	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 = new createjs.Text( "Hey there kids!", "24px Arial", "#00000000" );
+	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(){ clickEvent(); });
+ 	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(){ clickEvent(); });
+ 	this.textContent.addEventListener( "click", function(){ setTimeout( clickEvent, 100); });
 
 
  	// negate double setTimeout if clicked
@@ -126,7 +207,7 @@ function DialogUI( stage ){
 
  		// if there is more dialogue text, then keep going, otherwise, recede
  		if( that.currDialogueSeq.more() ){
- 			that.dialogMotionQueue.push(DIALOG_SHOWING);
+ 			setTimeout( function(){ that.dialogMotionQueue.push(DIALOG_SHOWING) }, 1000);
  			that.textContent.text=that.currDialogueSeq.next();
  			delayCounter = 0;
  			oldTime = new Date().getTime()
@@ -166,7 +247,7 @@ function DialogUI( stage ){
     		}
     		if( that.dialogBox.y < 435 && that.dialogState == DIALOG_SHOWING ){
     			that.dialogBox.y = 435;
-    			that.textContent.y = 465;
+    			that.textContent.y = 480;
     			that.dialogState = DIALOG_PAUSING;
     			console.log( "Pausing on showing" + that.dialogBox.y );
     		}

js/screens.js

@@ -48,22 +48,6 @@ 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" ) );
@@ -92,8 +76,8 @@ function DifficultyScreen( stage, gameState ){
     stage.addChild( this.background );
 
  	// Easy/Hard Button
- 	stage.addChild( new Button( stage, gameState, 170, 40, 450, 105, "SwitchScreen", "MarketScreen" ) );
- 	stage.addChild( new Button( stage, gameState, 170, 150, 450, 105, "SwitchScreen", "MarketScreen" ) );
+ 	stage.addChild( new Button( stage, gameState, 170, 40, 450, 105, "SwitchScreen", "KitchenScreen" ) );
+ 	stage.addChild( new Button( stage, gameState, 170, 150, 450, 105, "SwitchScreen", "KitchenScreen" ) );
 
 	return {
 		blit : function(){
@@ -113,11 +97,18 @@ function KitchenScreen( stage, gameState ){
 
 	this.uiElems = [];
 
+
+	for(var i in gameState.purchasedItems){
+		console.log(gameState.purchasedItems);
+		gameState.purchasedItems[i].draw( stage, 403+100*i, 350 );
+	}
+
 	this.uiElems.push( new OvenUI( stage, gameState ) );
 	this.uiElems.push( new ClockUI( stage, gameState ) );
 	this.uiElems.push( new WindowUI( stage, gameState ) )
 	this.uiElems.push( new DialogUI( stage ) );
 
+
 	return {
 		blit : function(){
 
@@ -134,25 +125,14 @@ function MarketScreen( stage, gameState ){
 
     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" ) );
+    this.uiElems.push( new ImgButton( stage, gameState, 690,0, "res/items/ExitSign.png", "res/items/ExitGlow.png","SwitchScreen", "KitchenScreen"  ) );
+    var marketItemKeys = Object.keys(gameState.marketItems);
+    for (var index in marketItemKeys ) {
+    	gameState.marketItems[marketItemKeys[index]].draw( stage );
+    }
+	this.topground = new createjs.Bitmap( "res/TopShelf.png" );
+	stage.addChild( this.topground );
 
     return {
 		blit : function(){

js/ui.js

@@ -64,7 +64,7 @@ function OvenUI( stage, gameState ){
 
 	gameState.pubsub.subscribe( "OvenLight", this.changeOvenLight );
 
-	var temperatureText = new createjs.Text( "325", "40px Arial", "#ff7700" );
+	var temperatureText = new createjs.Text( "OFF", "40px Arial", "#ff7700" );
 	temperatureText.x = 50;
 	temperatureText.y = 147;
 	temperatureText.textBaseline = "alphabetic";
@@ -93,13 +93,17 @@ function OvenUI( stage, gameState ){
 			 temp = temp < 150 ? temp = "OFF" : temp;
 
 			 // Check upper bound
-			 // Set up to 500, then it's BROIL @ 980
+			 // if over 1100 F, burn house down
+			 if( temp > 1100 ){
+			 	console.log("You have died in a fire");
+			 	return;
+			 }
 
 			 temperatureText.text = temp;
 		}
 
 		 // Tell our model to set the actual temperature
-		 ovenModel.changeTemp( UtilityFunctions.F2C( temperatureText.text == "OFF" ? 150 : parseInt( temperatureText.text ) ) );
+		 ovenModel.changeTemp( UtilityFunctions.F2C( temperatureText.text == "OFF" ? 125 : parseInt( temperatureText.text ) ) );
 	}
 
     // change temperature, this one's for the UI
@@ -131,7 +135,56 @@ return {
 }
 }
 
-function MarketItem( stage, gameState, x, y, cost, mouseOutImg, mouseOverImg ){
+function MarketItem( gameState, name, x, y, cost, mouseOutImg, mouseOverImg ){
+	var that = this;
+		this.name = name;
+		this.bought = false;
+		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(){
+ 			if(!that.bought){
+	 			if( that.name.indexOf("Turkey") == 0 && gameState.turkeyBought != true){
+	 				gameState.turkeyBought = true;
+				    gameState.marketItems[ that.name ].delete();
+	 			}
+
+	 			// can we buy this? Only possible if you already bought a turkey
+	 			if( !that.name.indexOf("Turkey") ==  0 && gameState.turkeyBought == true ){
+		 			gameState.purchasedItems.push( objReturn );
+		 			gameState.marketItems[ that.name ].delete();
+		 			that.bought = true;
+		 		}
+ 			}
+ 		});
+
+ 		mouseOver.visible = false;
+ 	var objReturn = {
+		tick: function(){},
+		getName: function(){return that.name;},
+		delete: function( stage ){
+			gameState.pubsub.publish("RemoveItems", [mouseOut, mouseOver]);
+		},
+		draw: function( stage, newx, newy ){
+			if( newx && newy ){
+				mouseOut.x = mouseOver.x = newx;
+				mouseOut.y = mouseOver.y = newy;
+			}
+			stage.addChild( mouseOut );
+	    	stage.addChild( mouseOver );
+		}
+	}
+	return objReturn;
+}
+
+
+
+function ImgButton( stage, gameState, x, y, mouseOutImg, mouseOverImg, eventCmd, arg ){
 		var mouseOver = new createjs.Bitmap( mouseOverImg );
 		var mouseOut = new createjs.Bitmap( mouseOutImg );
 		mouseOver.x = mouseOut.x = x;
@@ -140,7 +193,7 @@ function MarketItem( stage, gameState, x, y, cost, mouseOutImg, mouseOverImg ){
  		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.addEventListener( "click", function(){ gameState.pubsub.publish( eventCmd, arg ) } );
  		mouseOver.visible = false;
     	stage.addChild( mouseOut );
     	stage.addChild( mouseOver );
@@ -148,7 +201,6 @@ function MarketItem( stage, gameState, x, y, cost, mouseOutImg, mouseOverImg ){
 	return {
 		tick: function(){}
 	}
-
 }
 
 function Button( stage, gameState, x_orig, y_orig, x_dest, y_dest, eventCmd, arg ){