Window, fixes

index.html

@@ -9,9 +9,6 @@
       <canvas id="demoCanvas" width="800" height="600" style="border:1px solid #000000"></canvas>
     </div>
   </center>
-    <script>
-
-    </script>
   </body>
   <script src="createjs-2013.09.25.min.js"></script>
   <script src="js/model.js"></script>

js/dialogue.js

@@ -1,10 +1,10 @@
 function DialogueSequence( sequence ){
 
-	var targetStory = story[sequence].slice(0);
+	var targetStory = story[sequence] ? story[sequence].slice(0) : messages[sequence].slice(0);
 
 	return {
 		next: function(){
-			return targetStory.shift().split(": ")[1];
+			return targetStory.shift().split(": ");
 		},
 		more: function(){
 			return targetStory.length > 0;
@@ -18,7 +18,20 @@ function DialogUI( stage, gameState ){
 	var DIALOG_RECEDING = 0;
 	var DIALOG_SHOWING = 1;
 	var DIALOG_PAUSING = 2;
-	var MILLIS_PER_CHAR = 100;
+	var MILLIS_PER_CHAR = 150;
+
+	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")
+	};
 
 	this.dialogSpeed = 30;
 	this.dialogState = DIALOG_PAUSING;
@@ -28,8 +41,11 @@ function DialogUI( stage, gameState ){
 	dialogQueue = [];
 
 	this.dialogBox = new createjs.Bitmap("res/screens/GUI/DialogueBox.png");
-	this.dialogBox.x = 10;
+	this.dialogBox.x = 0;
-	this.dialogBox.y = 675;
+	this.dialogBox.y = 250;
+
+	this.currentFace = peopleImg["Male"];
+	this.currentFace.x = 0;
 
 	this.textContent = new createjs.Text( "", "24px Arial", "#00000000" );
 	this.textContent.x = 205;
@@ -47,16 +63,33 @@ function DialogUI( stage, gameState ){
  	this.textContent.addEventListener( "click", function(){ setTimeout( clickEvent, 100); });
 
  	this.showDialog= function( textSeq ){
+ 		if( !peopleImg["Me"] ){
+ 		   	 peopleImg["Me"] = peopleImg[gameState.gender];
+ 		}
+
  		if( textSeq.seq == "custom" ){
- 			story["custom"] = ["Me: " + textSeq.customText ];
+ 			messages["custom"] = ["Me: " + textSeq.customText ];
  		}
 
  		that.currDialogueSeq = new DialogueSequence( textSeq.seq );
- 		that.textContent.text=that.currDialogueSeq.next();
+ 		var nextDialogue = that.currDialogueSeq.next();
+
+ 		that.textContent.text=nextDialogue[1];
+ 		that.currentFace.y = 250;
+ 		that.currentFace = peopleImg[nextDialogue[0]] || that.currentFace;
  		that.autoAdvance = textSeq.autoAdvance;
  		that.dialogMotionQueue = [DIALOG_SHOWING];
  	}
 
+ 	this.showRandomConvo = function(){
+ 		storyArray = Object.keys(stories);
+
+ 		// check if there is something going on
+ 		if( !that.currDialogueSeq.more() ){
+ 			this.showDialog( storyArray[ UtilityFunctions.randRange(0, storyArray.length) ] );
+ 		}
+ 	}
+
  	gameState.pubsub.subscribe( "ShowDialog", this.showDialog );
 
  	// negate double setTimeout if clicked
@@ -64,21 +97,40 @@ function DialogUI( stage, gameState ){
  	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() ){
- 			setTimeout( function(){ that.dialogMotionQueue.push(DIALOG_SHOWING) }, 500);
+ 			var nextDialogue = that.currDialogueSeq.next();
- 			that.textContent.text=that.currDialogueSeq.next();
+
- 			delayCounter = 0;
+ 			that.dialogMotionQueue.push(DIALOG_SHOWING);
- 			oldTime = new Date().getTime()
+ 			that.textContent.text=nextDialogue[1];
+ 			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)}, 500 );
+ 			setTimeout( function(){that.dialogMotionQueue.push(DIALOG_RECEDING)}, 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;
@@ -89,26 +141,30 @@ function DialogUI( stage, gameState ){
 
     		if( that.dialogState == DIALOG_RECEDING ){
 	    		that.dialogBox.y+=that.dialogSpeed;
-	    		that.textContent.y +=that.dialogSpeed;
+	    		that.textContent.y += that.dialogSpeed;
+	    		that.currentFace.y += that.dialogSpeed;
 	    		//console.log( "Receding" + that.dialogBox.y );
     		}
     		if( that.dialogState == DIALOG_SHOWING ){
     			that.dialogBox.y-=that.dialogSpeed;
-    			that.textContent.y -=that.dialogSpeed;
+    			that.textContent.y -= that.dialogSpeed;
+    			that.currentFace.y -= that.dialogSpeed;
     			//console.log( "Advancing" + that.dialogBox.y );
     		}
 
     		// toggle states
-    		if( that.dialogBox.y > 675 && that.dialogState == DIALOG_RECEDING ){
+    		if( that.dialogBox.y > 250 && that.dialogState == DIALOG_RECEDING ){
-    			that.dialogBox.y = 675;
+    			that.dialogBox.y = 250;
     			that.textContent.y = 735;
+    			that.currentFace.y = 250;
     			that.dialogState = DIALOG_PAUSING;
     			//console.log( "Pausing on recede" + that.dialogBox.y );
 
     		}
-    		if( that.dialogBox.y < 435 && that.dialogState == DIALOG_SHOWING ){
+    		if( that.dialogBox.y < 0 && that.dialogState == DIALOG_SHOWING ){
-    			that.dialogBox.y = 435;
+    			that.dialogBox.y = 0;
     			that.textContent.y = 480;
+    			that.currentFace.y = 0;
     			that.dialogState = DIALOG_PAUSING;
     			//console.log( "Pausing on showing" + that.dialogBox.y );
     		}
@@ -129,6 +185,11 @@ function DialogUI( stage, gameState ){
     	render: function(){
 			stage.addChild( that.dialogBox );
 			stage.addChild( that.textContent );
+
+			for(var i in peopleImg ){
+				peopleImg[i].alpha = 1;
+				stage.addChild( peopleImg[i] );
+			}
     	}
 	}
 }

js/main.js

@@ -12,6 +12,15 @@ function GameState(){
 	this.hard = false;
 	this.boughtOvenLight = false;
 	this.turkeyWeight = 8;
+    this.peekRecords = [];
+// Game State flags
+    this.turkeyBought = false;
+    var randomWeight = [ (UtilityFunctions.randRange(10,22)+"."+UtilityFunctions.randRange(10,99)),
+                         (UtilityFunctions.randRange(10,22)+"."+UtilityFunctions.randRange(10,99)),
+                         (UtilityFunctions.randRange(10,22)+"."+UtilityFunctions.randRange(10,99)),
+                         (UtilityFunctions.randRange(10,22)+"."+UtilityFunctions.randRange(10,99)),
+                         (UtilityFunctions.randRange(10,22)+"."+UtilityFunctions.randRange(10,99))
+                        ];
 
     // Load all our resources:
     var queue = new createjs.LoadQueue(true);
@@ -46,6 +55,8 @@ function GameState(){
     queue.loadFile( {id: "HelpButtonFile", src:"res/screens/MainScreen/ButtonHelp.png"} );
     queue.loadFile( {id: "CreditsButtonFile", src:"res/screens/MainScreen/ButtonCredits.png"} );
 
+    queue.loadFile( {id: "HelpCreditsScreen", src:"res/screens/HelpCreditsScreen/Help.png"} );
+
     queue.loadFile( {id: "MarketScreenfile", src:"res/screens/MarketScreen/MarketScreen.png"} );
 
     // Load sound assets
@@ -100,6 +111,7 @@ function GameState(){
 	queue.loadFile( {id: "res/screens/KitchenScreen/PanFront.png", src:"res/screens/KitchenScreen/PanFront.png"});
 	queue.loadFile( {id: "res/screens/KitchenScreen/OvenTurnRedState.png", src:"res/screens/KitchenScreen/OvenTurnRedState.png"});
 	queue.loadFile( {id: "res/screens/KitchenScreen/LightButtonDepressed.png", src:"res/screens/KitchenScreen/LightButtonDepressed.png"});
+    queue.loadFile( {id: "res/screens/KitchenScreen/Cookbook-Open.png", src:"res/screens/KitchenScreen/Cookbook-Open.png"});
 
 
 	// Kitchen Sounds
@@ -158,23 +170,47 @@ function GameState(){
     queue.loadFile( {id: "res/items/Turkey1Glow.png", src:"res/items/Turkey1Glow.png"});
 
     // People photos
-   	//queue.loadFile( {id: "res/people/Turkey1.png", src:"res/items/Turkey1.png"});
+   	queue.loadFile( {id: "res/people/Boyfriend.png", src:"res/people/Boyfriend.png"});
-    //queue.loadFile( {id: "res/people/Turkey1Glow.png", src:"res/items/Turkey1Glow.png"});
+   	queue.loadFile( {id: "res/people/Brother.png", src:"res/people/Brother.png"});
+   	queue.loadFile( {id: "res/people/Cat.png", src:"res/people/Cat.png"});
+   	queue.loadFile( {id: "res/people/Dad.png", src:"res/people/Dad.png"});
+   	queue.loadFile( {id: "res/people/Girlfriend.png", src:"res/people/Girlfriend.png"});
+   	queue.loadFile( {id: "res/people/Grandma.png", src:"res/people/Grandma.png"});
+   	queue.loadFile( {id: "res/people/Grandpa.png", src:"res/people/Grandpa.png"});
+   	queue.loadFile( {id: "res/people/Mom.png", src:"res/people/Mom.png"});
+   	queue.loadFile( {id: "res/people/PlayerFemale.png", src:"res/people/PlayerFemale.png"});
+   	queue.loadFile( {id: "res/people/PlayerMale.png", src:"res/people/PlayerMale.png"});
+
+    // Load Window elements
+    queue.loadFile( {id: "res/screens/Window/Door1.png", src:"res/screens/Window/Door1.png"});
+    queue.loadFile( {id: "res/screens/Window/Door2.png", src:"res/screens/Window/Door2.png"});
+    queue.loadFile( {id: "res/screens/Window/Ground.png", src:"res/screens/Window/Ground.png"});
+    queue.loadFile( {id: "res/screens/Window/Housefar.png", src:"res/screens/Window/Housefar.png"});
+    queue.loadFile( {id: "res/screens/Window/Small1.png", src:"res/screens/Window/Small1.png"});
+    queue.loadFile( {id: "res/screens/Window/Small2.png", src:"res/screens/Window/Small2.png"});
+    queue.loadFile( {id: "res/screens/Window/Small3.png", src:"res/screens/Window/Small3.png"});
+    queue.loadFile( {id: "res/screens/Window/Small4.png", src:"res/screens/Window/Small4.png"});
+    queue.loadFile( {id: "res/screens/Window/Small5.png", src:"res/screens/Window/Small5.png"});
+    queue.loadFile( {id: "res/screens/Window/StreetlightGlow.png", src:"res/screens/Window/StreetlightGlow.png"});
+    queue.loadFile( {id: "res/screens/Window/Win1.png", src:"res/screens/Window/Win1.png"});
+    queue.loadFile( {id: "res/screens/Window/Win2.png", src:"res/screens/Window/Win2.png"});
+    queue.loadFile( {id: "res/screens/Window/Win3.png", src:"res/screens/Window/Win3.png"});
+    queue.loadFile( {id: "res/screens/Window/Win4.png", src:"res/screens/Window/Win4.png"});
+    queue.loadFile( {id: "res/screens/Window/Win5.png", src:"res/screens/Window/Win5.png"});
+    queue.loadFile( {id: "res/screens/Window/Win6.png", src:"res/screens/Window/Win6.png"});
+    queue.loadFile( {id: "res/screens/Window/Win7.png", src:"res/screens/Window/Win7.png"});
+    queue.loadFile( {id: "res/screens/Window/Win8.png", src:"res/screens/Window/Win8.png"});
+    queue.loadFile( {id: "res/screens/Window/Win9.png", src:"res/screens/Window/Win9.png"});
+    queue.loadFile( {id: "res/screens/Window/Win10.png", src:"res/screens/Window/Win10.png"});
+    queue.loadFile( {id: "res/screens/Window/Win11.png", src:"res/screens/Window/Win11.png"});
+    queue.loadFile( {id: "res/screens/Window/Tree_Animation.png", src:"res/screens/Window/Tree_Animation.png"});
+    queue.loadFile( {id: "res/screens/Window/Test4-217.png", src:"res/screens/Window/Test4-217.png"});
+    queue.loadFile( {id: "res/screens/Window/Test4-217.png", src:"res/screens/Window/Test4TransparencyFull.png"});
+
 
     this.screenState = 0;
     this.newScreen = "";
 
-
-    // Game State flags
-    this.turkeyBought = false;
-    this.ovenLightBought = false;
-    var randomWeight = [ (UtilityFunctions.randRange(10,22)+"."+UtilityFunctions.randRange(10,99)),
-    					 (UtilityFunctions.randRange(10,22)+"."+UtilityFunctions.randRange(10,99)),
-    					 (UtilityFunctions.randRange(10,22)+"."+UtilityFunctions.randRange(10,99)),
-    					 (UtilityFunctions.randRange(10,22)+"."+UtilityFunctions.randRange(10,99)),
-    					 (UtilityFunctions.randRange(10,22)+"."+UtilityFunctions.randRange(10,99))
-    				    ];
-
 	this.marketItems = {
 		"Frills Box" : new MarketItem( this, "Frills Box", 133,92, 3.00, "res/items/FrillsBox.png", "res/items/FrillsBoxGlow.png", "res/screens/KitchenScreen/FrillsBoxKitchen.png", "res/screens/KitchenScreen/FrillsBoxKitchenGlow.png",
 		 "Some people dress up their dogs. Others dress up their house. Why not dress up your turkey?" ),
@@ -204,6 +240,12 @@ function GameState(){
 	// did we already show the player the kitchen intro?
 	this.kitchenIntro = false;
 
+    this.addRecord = function( record ){
+        that.peekRecords.push( new Record( new Date(), record ) );
+    }
+    that.pubsub.subscribe( "AddRecord", this.addRecord );
+
+
     function addHighScore(name, turkeyPoundage, cookTime, score){
     	var scores = {};
     	var now = new Date();
@@ -322,30 +364,22 @@ function GameUI( canvasElem, gameState ){
 	}
 }
 
-
+function Record( dateTime, record ){
-
-function Dialogue( character, text ){
-	var that = this;
-	this.text = text;
-	this.character = character;
-
     return {
-		getText: function(){
+        getTime: function(){
-			return that.text;
+            return dateTime;
-		},
-
-		getCharacter: function(){
-			return that.character;
-		},
-
-		getDuration: function(){
-
-		// length of text, for each dialog
         },
+        getContent: function(){
+            return record;
+        }
     }
-	// Render one character at a time
 }
 
+    //"Turkey weight, "
+    //"Opened oven for X seconds"
+    //"Core temperature measured at "
+
+
 function BindPubSub( obj ){
 	(function(q) {
 	    var topics = {}, subUid = -1;

js/model.js

@@ -122,7 +122,6 @@ function OvenModel( turkeyWeight, gameState ) {
             that.setTemp = setTemp;
     	},
 	    secondTick: function(){
-			console.clear();
 			that.globalTime = that.globalTime + 1;
 			that.steadyTimer = that.steadyTimer + 1;
 	    	if ( that.equalizeTemp() ) {

js/screens.js

@@ -63,7 +63,7 @@ function LoadingScreen( stage, gameState ){
 function InfoHelpScreen( stage, gameState ){
 	var that = this;
 
-    this.background = new createjs.Bitmap( "res/Main.png" );
+    this.background = new createjs.Bitmap( "res/screens/HelpCreditsScreen/Help.png" );
     stage.addChild( this.background );
 
     this.uiElems = [];
@@ -262,11 +262,13 @@ function KitchenScreen( stage, gameState ){
 	// Fade out any other sounds
 	gameState.pubsub.publish( "FadeOut", "" );
 
+	this.uiElems = [];
+	
+	this.uiElems.push( new WindowUI( stage, gameState ) );
+
 	this.background = new createjs.Bitmap( "res/screens/KitchenScreen/KitchenScreen.png" );
     stage.addChild( this.background );
 
-	this.uiElems = [];
-
 	for(var i in gameState.purchasedItems ){
 		console.log(gameState.purchasedItems);
 		gameState.purchasedItems[i].draw( stage );
@@ -274,15 +276,15 @@ function KitchenScreen( stage, gameState ){
 
 	this.uiElems.push( gameState.ovenUI ? gameState.ovenUI.render() : ( gameState.ovenUI = new OvenUI( stage, gameState ) ).render() );
 	this.uiElems.push( new ClockUI( stage, gameState ) );
-	this.uiElems.push( new WindowUI( stage, gameState ) )
+
-	stage.addChild( new Button( stage, gameState, 500, 40, 450, 105, "SwitchScreen", "MarketScreen" ) );
+
 	stage.addChild( new Button( stage, gameState, 14, 17, 73, 45, "SwitchScreen", "HelpScreen" ) );
 
 	new ImgButton( stage, gameState, 0,0, "res/screens/KitchenScreen/StoreBrochure.png", "res/screens/KitchenScreen/StoreBrochureGlow.png", "SwitchScreen", "MarketScreen", "Click"  );
 
 	// If player did not buy a turkey, tell them
 	if( !gameState.turkeyBought ){
-		gameState.pubsub.publish( "ShowDialog", {seq:"KitchenInitial", autoAdvance:false} );
+		gameState.pubsub.publish( "ShowDialog", {seq:"PaintStory", autoAdvance:true} );
 	}
 
 	return {
@@ -462,7 +464,7 @@ function ScoreScreen( stage, gameState ){
 function CreditsScreen( stage, gameState ){
 		var that = this;
 
-    this.background = new createjs.Bitmap( "res/Main.png" );
+    this.background = new createjs.Bitmap( "res/screens/HelpCreditsScreen/Help.png" );
     stage.addChild( this.background );
 
     this.uiElems = [];

js/stories.js

@@ -1,11 +1,15 @@
-var story = {
+var messages = {
 	"Null":["Me: "],
 	"KitchenInitial" : ["Me: I need to buy a turkey..."],
 	"CannotBuyTurkey" : ["Me: I've barely have time for ONE turkey, let alone TWO!"],
 	"NoMoney" : ["Me: I can't afford this!"],
 	"BuyTurkeyFirst" : ["Me: I should buy a turkey first!"],
 	"BrokenLight" : ["Me: The oven light appears to be broken..."],
-	"EmptyOven" : ["Me: The oven is already preheated..."],
+	"EmptyOven" : ["Me: The oven is already preheated..."]
+}
+
+var story = {
+
 	"PaintStory" : ["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.",

js/ui.js

@@ -44,6 +44,54 @@ function ClockUI( stage, gameState ){
 
 }
 
+function CookbookUI( stage, gameState ){
+	var that = this;
+	this.showingCookbook = false;
+
+	var cookbookImg = new createjs.Bitmap("res/screens/KitchenScreen/Cookbook-Open.png");
+	var closeButton = new Button( stage, gameState, 710, 10, 100, 50, null, null, function(){that.hideCookbook();} );
+	var logEntries = [];
+	this.hideCookbook = function(){
+		console.log("hide cookbook");
+		stage.removeChild( closeButton );
+		stage.removeChild( cookbookImg );
+		for( i in logEntries ){
+			stage.removeChild(logEntries[i]);
+		}
+		that.showingCookbook = false;
+	}
+
+	// Show core temperature
+	this.showCookbook = function(){
+		if( !that.showingCookbook ){
+			console.log("show cookbook---" + gameState.peekRecords );
+			stage.addChild( cookbookImg );
+			stage.addChild( closeButton );
+
+			for( i in gameState.peekRecords ){
+				var record = gameState.peekRecords[i];
+				gameState.peekRecords[i].getTime();
+
+				var logLine = new createjs.Text( "OFF", "12px Arial", "#ffffffff" );
+
+				logLine.x = 520;
+				logLine.y = 50 * i+ 165;
+				logLine.textBaseline = "alphabetic";
+				logLine.text = record.getContent();
+
+				logEntries.push(logLine);
+				stage.addChild(logLine);
+			}
+
+			that.showingCookbook = true;
+		}
+	}
+
+	// change temperature, this one's for the UI
+    gameState.pubsub.subscribe( "ShowCookbook", this.showCookbook );
+
+}
+
 function OvenUI( stage, gameState ){
 	var that = this;
 	var OVEN_CLOSED = 0;
@@ -157,6 +205,8 @@ function OvenUI( stage, gameState ){
 				doorOpen.alpha = 0;
 			}
 		}else{
+			// say it only once
+			if( lightPressedImg.alpha == 1)
 				gameState.pubsub.publish( "ShowDialog", {seq:"BrokenLight", autoAdvance:true} );
 		}
 	}
@@ -225,8 +275,11 @@ function OvenUI( stage, gameState ){
 	this.showTempDialog = function(){
 		state = ovenModel.getTurkeyState();
 		gameState.pubsub.publish( "ShowDialog", {seq:"custom", autoAdvance:false, customText:"Hmm.. the core temperature of the turkey is " + UtilityFunctions.C2F(state.core.temp).toFixed(2) + " F" } );
+		gameState.pubsub.publish( "AddRecord", "Core temperature measured: " + UtilityFunctions.C2F(state.core.temp).toFixed(2) + " F" );
 	}
 
+	new CookbookUI( stage, gameState );
+
 	// change temperature, this one's for the UI
     gameState.pubsub.subscribe( "ChangeTemperature", this.changeTemperature );
     gameState.pubsub.subscribe( "ShowTempDialog", this.showTempDialog );
@@ -242,7 +295,6 @@ function OvenUI( stage, gameState ){
 
     setInterval(this.secondTick, 1000);
 
-
     return {
     	tick: function(){},
     	render: function(){
@@ -284,8 +336,58 @@ function OvenUI( stage, gameState ){
 }
 
 function WindowUI( stage, gameState ){
+
+	var dayNight = new createjs.Bitmap("res/Test4-217.svg");
+	dayNight.y=30;
+	//dayNight.x = gameState.currentTime
+
+	var ground = new createjs.Bitmap( "res/screens/Window/Ground.png" );
+	var houses = new createjs.Bitmap( "res/screens/Window/Housefar.png" );
+	var streetLight = new createjs.Bitmap( "res/screens/Window/StreetlightGlow.png" );
+	streetLight.alpha = 0;
+
+	var treeAnimations = { rustle:[0,17,"rustle"], still:[0,0,"still"] };
+	var data = {
+    	images: ["res/screens/Window/Tree_Animation.png"],
+     	frames: { width:386, height:287 },
+     	animations: treeAnimations
+ 	};
+	var spriteSheet = new createjs.SpriteSheet(data);
+ 	var animation = new createjs.Sprite(spriteSheet, "treeAnimations");
+ 	animation.x = 415;
+ 	animation.y = 30;
+
+
+    stage.addChild( dayNight );
+    stage.addChild( ground );
+    stage.addChild( houses );
+    stage.addChild( streetLight );
+    stage.addChild( animation );
 return {
-	tick: function(){}
+
+	tick: function(){
+
+		// move the sky
+		dayNight.x-=25;
+
+		// move the overlay
+		//console.log(dayNight.x);
+		if( dayNight.x < -15583 )
+			dayNight.x = 0;
+
+		// turn on lights
+		if( dayNight.x < 0 && dayNight.x > -4545 ){
+			// turn on random window lights
+			streetLight.alpha = 1;
+		}
+		else if( dayNight.x < -11687 ){
+			streetLight.alpha = 1;
+		}
+		else
+			streetLight.alpha = 0;
+
+
+	}
 }
 }
 
@@ -356,6 +458,11 @@ function MarketItem( gameState, name, x, y, cost, mouseOutImg, mouseOverImg, mou
  			if ( that.name.indexOf("Temperature") != -1 ){
  				gameState.pubsub.publish( "ShowTempDialog", "" );
  			}
+
+ 			if ( that.name.indexOf("Cookbook") != -1 ){
+ 				console.log("click, show cookbook");
+ 				gameState.pubsub.publish("ShowCookbook","");
+ 			}
  		});
 
  		mouseOver.addEventListener( "click", function(){
@@ -459,6 +566,7 @@ function ImgButton( stage, gameState, x, y, mouseOutImg, mouseOverImg, eventCmd,
 
 function Button( stage, gameState, x_orig, y_orig, x_dest, y_dest, eventCmd, arg, altfunc ){
 	var that = this;
+	console.log("button clicked with "+ altfunc);
 
 	var button = new createjs.Shape();
  	button.graphics.beginFill("#ffffff").drawRect(x_orig, y_orig, x_dest, y_dest);

res/Test4-217.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="16383px" height="217px" viewBox="0 0 16383 217" enable-background="new 0 0 16383 217" xml:space="preserve">
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="2320.925" y1="108.5" x2="13382.874" y2="108.5">
+	<stop  offset="0" style="stop-color:#000000"/>
+	<stop  offset="0.202" style="stop-color:#09152A"/>
+	<stop  offset="0.2857" style="stop-color:#395568"/>
+	<stop  offset="0.3385" style="stop-color:#8AC5D5"/>
+	<stop  offset="0.3892" style="stop-color:#BCE4E7"/>
+	<stop  offset="0.4286" style="stop-color:#E0F2F2"/>
+	<stop  offset="0.4729" style="stop-color:#EAF6F7"/>
+	<stop  offset="0.5025" style="stop-color:#F5F6E8"/>
+	<stop  offset="0.6059" style="stop-color:#F3F8E8"/>
+	<stop  offset="0.6502" style="stop-color:#F7F7D3"/>
+	<stop  offset="0.6995" style="stop-color:#F3F4C4"/>
+	<stop  offset="0.7244" style="stop-color:#F2E3B8"/>
+	<stop  offset="0.7488" style="stop-color:#EAD985"/>
+	<stop  offset="0.7768" style="stop-color:#F7D94C"/>
+	<stop  offset="0.8087" style="stop-color:#D5A825"/>
+	<stop  offset="1" style="stop-color:#000000"/>
+</linearGradient>
+<rect fill="url(#SVGID_1_)" width="16383" height="217"/>
+</svg>

res/screens/Window/Test4-217.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="16383px" height="217px" viewBox="0 0 16383 217" enable-background="new 0 0 16383 217" xml:space="preserve">
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="2320.925" y1="108.5" x2="13382.874" y2="108.5">
+	<stop  offset="0" style="stop-color:#000000"/>
+	<stop  offset="0.202" style="stop-color:#09152A"/>
+	<stop  offset="0.2857" style="stop-color:#395568"/>
+	<stop  offset="0.3385" style="stop-color:#8AC5D5"/>
+	<stop  offset="0.3892" style="stop-color:#BCE4E7"/>
+	<stop  offset="0.4286" style="stop-color:#E0F2F2"/>
+	<stop  offset="0.4729" style="stop-color:#EAF6F7"/>
+	<stop  offset="0.5025" style="stop-color:#F5F6E8"/>
+	<stop  offset="0.6059" style="stop-color:#F3F8E8"/>
+	<stop  offset="0.6502" style="stop-color:#F7F7D3"/>
+	<stop  offset="0.6995" style="stop-color:#F3F4C4"/>
+	<stop  offset="0.7244" style="stop-color:#F2E3B8"/>
+	<stop  offset="0.7488" style="stop-color:#EAD985"/>
+	<stop  offset="0.7768" style="stop-color:#F7D94C"/>
+	<stop  offset="0.8087" style="stop-color:#D5A825"/>
+	<stop  offset="1" style="stop-color:#000000"/>
+</linearGradient>
+<rect fill="url(#SVGID_1_)" width="16383" height="217"/>
+</svg>

res/screens/Window/Test4TransparencyFull.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="16383px" height="287px" viewBox="0 0 16383 287" enable-background="new 0 0 16383 287" xml:space="preserve">
+<defs>
+	<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="0.5" y="0" width="16382.5" height="287">
+		<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+	</filter>
+</defs>
+<mask maskUnits="userSpaceOnUse" x="0.5" y="0" width="16382.5" height="287" id="SVGID_1_">
+	<g filter="url(#Adobe_OpacityMaskFilter)">
+		
+			<radialGradient id="SVGID_2_" cx="8191.5" cy="223.6016" r="9009.1045" gradientTransform="matrix(1 0 0 4.0139 0 -755.0076)" gradientUnits="userSpaceOnUse">
+			<stop  offset="0" style="stop-color:#000000"/>
+			<stop  offset="1" style="stop-color:#FFFFFF"/>
+		</radialGradient>
+		<rect y="-2" fill="url(#SVGID_2_)" width="16383" height="289"/>
+	</g>
+</mask>
+<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="2321.3542" y1="143.5" x2="13382.9658" y2="143.5">
+	<stop  offset="0" style="stop-color:#000000"/>
+	<stop  offset="0.202" style="stop-color:#09152A"/>
+	<stop  offset="0.2857" style="stop-color:#395568"/>
+	<stop  offset="0.3385" style="stop-color:#8AC5D5"/>
+	<stop  offset="0.3892" style="stop-color:#BCE4E7"/>
+	<stop  offset="0.4286" style="stop-color:#E0F2F2"/>
+	<stop  offset="0.4729" style="stop-color:#EAF6F7"/>
+	<stop  offset="0.5025" style="stop-color:#F5F6E8"/>
+	<stop  offset="0.6059" style="stop-color:#F3F8E8"/>
+	<stop  offset="0.6502" style="stop-color:#F7F7D3"/>
+	<stop  offset="0.6995" style="stop-color:#F3F4C4"/>
+	<stop  offset="0.7244" style="stop-color:#F2E3B8"/>
+	<stop  offset="0.7488" style="stop-color:#EAD985"/>
+	<stop  offset="0.7768" style="stop-color:#F7D94C"/>
+	<stop  offset="0.8087" style="stop-color:#D5A825"/>
+	<stop  offset="1" style="stop-color:#000000"/>
+</linearGradient>
+<rect x="0.5" mask="url(#SVGID_1_)" fill="url(#SVGID_3_)" width="16382.5" height="287"/>
+</svg>