Loading screen actual commit

index.html

@@ -6,7 +6,7 @@
     <br/><br/><br/><br/>
     <center>
     <div class="canvasContainer">
-      <canvas onmousemove="showXY(event)" id="demoCanvas" width="800" height="600" style="border:1px solid #000000"></canvas>
+      <canvas id="demoCanvas" width="800" height="600" style="border:1px solid #000000"></canvas>
     </div>
   </center>
     <script>
@@ -23,7 +23,7 @@
   <script src="js/main.js"></script>
   <script>
     new GameState();
-
+/*
     function showXY(e)
     {
     var mouseX, mouseY;
@@ -37,8 +37,8 @@
         mouseY = e.layerY;
     }
     console.log("x: " + mouseX + "y :" + mouseY);
-    /* do something with mouseX/mouseY */
-    }
+
+    }*/
   </script>
   <!-- Load all the things! -->
 </html>

js/dialogue.js

@@ -27,7 +27,7 @@ function DialogUI( stage, gameState ){
 	this.currDialogueSeq = new DialogueSequence("Null");
 	dialogQueue = [];
 
-	this.dialogBox = new createjs.Bitmap("res/DialogueBox.png");
+	this.dialogBox = new createjs.Bitmap("res/screens/GUI/DialogueBox.png");
 	this.dialogBox.x = 10;
 	this.dialogBox.y = 675;
 

js/main.js

@@ -12,13 +12,88 @@ function GameState(){
 
     // Load all our resources:
     var queue = new createjs.LoadQueue(true);
+    queue.addEventListener("progress", function(event){
+    	that.pubsub.publish("Load", (event.progress*100/25));
+    });
+
+    that.mainUI = new GameUI( "demoCanvas", that );
+    createjs.Ticker.addEventListener( "tick", gameLoop );
+    queue.addEventListener("complete", function(event){
+    	// Finished loading
+    });
     queue.installPlugin(createjs.Sound);
 
+    //
+    queue.loadFile( {id: "DialogueBoxFile", src:"res/screens/GUI/DialogueBox.png"} );
+    /*queue.loadFile( {id:"res/screens/LoadingScreen/Turkey0.png", src: "res/screens/LoadingScreen/Turkey0.png"} );
+    queue.loadFile( {id:"res/screens/LoadingScreen/Turkey25.png", src: "res/screens/LoadingScreen/Turkey25.png"} );
+    queue.loadFile( {id:"res/screens/LoadingScreen/Turkey50.png", src: "res/screens/LoadingScreen/Turkey50.png"} );
+    queue.loadFile( {id:"res/screens/LoadingScreen/Turkey75.png", src: "res/screens/LoadingScreen/Turkey75.png"} );
+    queue.loadFile( {id:"res/screens/LoadingScreen/TurkeyDone.png", src: "res/screens/LoadingScreen/TurkeyDone.png"} );*/
+
     //queue.addEventListener("fileload", handleFileComplete);
+    // Load image assets
+    queue.loadFile( {id: "TurkeySpriteFile", src:"res/screens/MainScreen/TurkeySprite.png"} );
+    queue.loadFile( {id: "MainBackgroundFile", src:"res/screens/MainScreen/Main-Screen.png"} );
+    queue.loadFile( {id: "OverlayGrassFile", src:"res/screens/MainScreen/Grass.png"} );
+    queue.loadFile( {id: "StartButtonFile", src:"res/screens/MainScreen/ButtonStart.png"} );
+    queue.loadFile( {id: "HelpButtonFile", src:"res/screens/MainScreen/ButtonHelp.png"} );
+    queue.loadFile( {id: "CreditsButtonFile", src:"res/screens/MainScreen/ButtonCredits.png"} );
+
+    queue.loadFile( {id: "MarketScreenfile", src:"res/screens/MarketScreen/MarketScreen.png"} );
+
+    // Load sound assets
     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"} );
-    queue.loadFile( {id: "TurkeySpriteFile", src:"res/TurkeySprite.png"} );
+    queue.loadFile( {id: "MarketBackgroundSoundFile", src:"res/sound/Store/supermarket.mp3"} );
+	queue.loadFile( {id: "MarketSoundFile", src:"res/sound/Store/Waterford.mp3"} );
+
+	// UI sounds
+    queue.loadFile( {id: "UIPopFile", src:"res/sound/GUI/pop.mp3"} );
+    queue.loadFile( {id: "UILowClickFile", src:"res/sound/GUI/lowclick.mp3"} );
+    queue.loadFile( {id: "UIClickFile", src:"res/sound/GUI/click.mp3"} );
+    queue.loadFile( {id: "UIBuzzFile", src:"res/sound/GUI/buzz.mp3"} );
+
+    
+    // Market Items
+    queue.loadFile( {id: "FrillsBox.png", src:"res/items/FrillsBox.png"} );
+    queue.loadFile( {id: "res/items/FrillsBox.png", src:"res/items/FrillsBox.png"});
+    queue.loadFile( {id: "res/items/FrillsBoxGlow.png", src:"res/items/FrillsBoxGlow.png"});
+    queue.loadFile( {id: "res/items/TempProbe.png", src:"res/items/TempProbe.png"});
+    queue.loadFile( {id: "res/items/TempProbeGlow.png", src:"res/items/TempProbeGlow.png"});
+
+	queue.loadFile( {id: "res/items/OvenLightBox.png", src:"res/items/OvenLightBox.png"});
+    queue.loadFile( {id: "res/items/OvenLightBoxGlow.png", src:"res/items/OvenLightBoxGlow.png"});
+
+	queue.loadFile( {id: "res/items/Alarm.png", src:"res/items/Alarm.png"});
+    queue.loadFile( {id: "res/items/AlarmGlow.png", src:"res/items/AlarmGlow.png"});
+
+	queue.loadFile( {id: "res/items/Cookbook1.png", src:"res/items/Cookbook1.png"});
+    queue.loadFile( {id: "res/items/Cookbook1Glow.png", src:"res/items/Cookbook1Glow.png"});
+
+	queue.loadFile( {id: "res/items/StuffingRepurposed.png", src:"res/items/StuffingRepurposed.png"});
+    queue.loadFile( {id: "res/items/StuffingRepurposedGlow.png", src:"res/items/StuffingRepurposedGlow.png"});
+
+	queue.loadFile( {id: "res/items/StuffingExquisite.png", src:"res/items/StuffingExquisite.png"});
+    queue.loadFile( {id: "res/items/StuffingExquisiteGlow.png", src:"res/items/StuffingExquisiteGlow.png"});
+
+	queue.loadFile( {id: "res/items/StuffingSpecial.png", src:"res/items/StuffingSpecial.png"});
+    queue.loadFile( {id: "res/items/StuffingSpecialGlow.png", src:"res/items/StuffingSpecialGlow.png"});
+
+	queue.loadFile( {id: "res/items/Turkey5.png", src:"res/items/Turkey5.png"});
+    queue.loadFile( {id: "res/items/Turkey5Glow.png", src:"res/items/Turkey5Glow.png"});
+
+    queue.loadFile( {id: "res/items/Turkey4.png", src:"res/items/Turkey4.png"});
+    queue.loadFile( {id: "res/items/Turkey4Glow.png", src:"res/items/Turkey4Glow.png"});
+
+	queue.loadFile( {id: "res/items/Turkey3.png", src:"res/items/Turkey3.png"});
+    queue.loadFile( {id: "res/items/Turkey3Glow.png", src:"res/items/Turkey3Glow.png"});
+
+	queue.loadFile( {id: "res/items/Turkey2.png", src:"res/items/Turkey2.png"});
+    queue.loadFile( {id: "res/items/Turkey2Glow.png", src:"res/items/Turkey2Glow.png"});
+
+	queue.loadFile( {id: "res/items/Turkey1.png", src:"res/items/Turkey1.png"});
+    queue.loadFile( {id: "res/items/Turkey1Glow.png", src:"res/items/Turkey1Glow.png"});
+
 
     this.screenState = 0;
     this.newScreen = "";
@@ -49,9 +124,6 @@ function GameState(){
 	// did we already show the player the kitchen intro?
 	this.kitchenIntro = false;
 
-	this.mainUI = new GameUI( "demoCanvas", this );
-    createjs.Ticker.addEventListener( "tick", gameLoop );
-
     function addHighScore(name, turkeyPoundage, cookTime, score){
     	var scores = {};
     	var now = new Date();
@@ -77,28 +149,6 @@ function GameState(){
 	//	"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;
@@ -115,7 +165,7 @@ function GameUI( canvasElem, gameState ){
 
 	/* Initialize All Screens */
 	this.screens = {
-		"LoadingTitleScreen" : LoadingTitleScreen,
+		"LoadingScreen" 	 : LoadingScreen,
 		"InfoHelpScreen" 	 : InfoHelpScreen,
 		"MainScreen" 	 	 : MainScreen,
 		"DifficultyScreen" 	 : DifficultyScreen,
@@ -129,7 +179,7 @@ function GameUI( canvasElem, gameState ){
 
 	var soundManager = new SoundManager( gameState );
 
-	this.activeScreenObj = new MainScreen( this.stage, gameState );
+	this.activeScreenObj = new LoadingScreen( this.stage, gameState );
 	var textContent = new createjs.Text( "", "20px Arial", "#00000000" );
 	textContent.x = 750;
 	textContent.y = 30;

js/screens.js

@@ -1,22 +1,62 @@
 /* Screens, inheritance would be nice */
-function LoadingTitleScreen( stage, gameState ){
+function LoadingScreen( stage, gameState ){
 	var that = this;
-    this.picture = new createjs.Bitmap( "res/Loading-Title.png" );
-    this.ovenLight = new createjs.Shape();
-    this.ovenLight.graphics.beginFill( "red" ).drawCircle( 396, 318, 5 );
+	this.lastPercent = -1;
+    this.picture = new createjs.Bitmap( "res/screens/LoadingScreen/Loading-Title.png" );
+    this.pictureFront = new createjs.Bitmap( "res/screens/LoadingScreen/PanFront.png" );
+    this.cooking = new createjs.Bitmap( "res/screens/LoadingScreen/TextCooking.png" );
+    this.done = new createjs.Bitmap( "res/screens/LoadingScreen/TextDone.png" );
+    this.turkeyState = [ new createjs.Bitmap( "res/screens/LoadingScreen/Turkey0.png" ),
+    					 new createjs.Bitmap( "res/screens/LoadingScreen/Turkey25.png" ),
+    					 new createjs.Bitmap( "res/screens/LoadingScreen/Turkey50.png" ),
+    					 new createjs.Bitmap( "res/screens/LoadingScreen/Turkey75.png" ),
+    					 new createjs.Bitmap( "res/screens/LoadingScreen/TurkeyDone.png" ) ];
+
+	this.done.alpha= 0;
+
+	stage.addChild( this.picture );
+	stage.addChild( this.cooking );
+	stage.addChild( this.done );
+	stage.addChild( this.turkeyState[0] );
+
+	var textContent = new createjs.Text( "0 %", "25px Arial", "#ffffffff" );
+	textContent.x = 500;
+	textContent.y = 20;
+	stage.addChild( textContent);
+
+	gameState.pubsub.subscribe( "Load", function(percent){
+		textContent.text = (percent * 25).toFixed(2) + " %";
+		var wholeNum = percent.toFixed(0);
+		if( that.lastPercent != percent){
+			that.lastPercent = percent;
+			stage.addChild( that.turkeyState[wholeNum] );
+			stage.addChild( that.pictureFront );
+		}
 
-    stage.addChild( this.picture );
-	stage.addChild( this.ovenLight );
+		//If we're still on image one, don't fade it out, it's the base image!
+		if(  wholeNum != 0 )
+			that.turkeyState[wholeNum].alpha = percent.toFixed(2) - wholeNum;
+
+		// Done!
+		if(  wholeNum == 4 ){
+			that.turkeyState[4].alpha = 1;
+			that.cooking.alpha=0;
+			that.done.alpha = 1;
+
+			that.done.addEventListener( "mouseover", function(){ document.body.style.cursor='pointer'; } );
+		 	that.done.addEventListener( "mouseout", function(){ document.body.style.cursor='default'; } );
+ 			that.done.addEventListener( "click",  function(){ gameState.pubsub.publish("SwitchScreen", "MainScreen"); });
+
+			that.turkeyState[4].addEventListener( "mouseover", function(){ document.body.style.cursor='pointer'; } );
+		 	that.turkeyState[4].addEventListener( "mouseout", function(){ document.body.style.cursor='default'; } );
+ 			that.turkeyState[4].addEventListener( "click",  function(){ gameState.pubsub.publish("SwitchScreen", "MainScreen"); });
+		}
+	});
+
+	stage.addChild( this.pictureFront );
 
-    this.uiElems = [];
-	this.uiElems.push( new DialogUI( stage, gameState ) );
 	return {
 		blit : function(){
-
-			// Draw all the uiElements
-	        for( var index in that.uiElems ){
-				that.uiElems[ index ].tick();
-			}
 		}
 	}
 }
@@ -44,7 +84,7 @@ function InfoHelpScreen( stage, gameState ){
 function MainScreen( stage, gameState ){
 	var that = this;
 
-    this.background = new createjs.Bitmap( "res/Main-Screen.png" );
+    this.background = new createjs.Bitmap( "res/screens/MainScreen/Main-Screen.png" );
     stage.addChild( this.background );
 
     var turkeyAnimations = { peck:[14,24,"peck"], ruffle:[0,13,"ruffle"], stare:[25,35,"stare"] };
@@ -68,13 +108,13 @@ function MainScreen( stage, gameState ){
  	}
  	stage.addChild(animation);
 
- 	this.grassLayer = new createjs.Bitmap( "res/Grass.png" );
+ 	this.grassLayer = new createjs.Bitmap( "res/screens/MainScreen/Grass.png" );
  	stage.addChild( this.grassLayer );
 
 	// buttons info/credits/start
- 	new ImgButton( stage, gameState, 571,527, "res/MainScreen/ButtonStart.png", "res/MainScreen/ButtonStart.png","SwitchScreen", "DifficultyScreen", "Click"  );
- 	new ImgButton( stage, gameState, 17,470, "res/MainScreen/ButtonHelp.png", "res/MainScreen/ButtonHelp.png","SwitchScreen", "InfoScreen", "Click"  );
- 	new ImgButton( stage, gameState, 17,527, "res/MainScreen/ButtonCredits.png", "res/MainScreen/ButtonCredits.png","SwitchScreen", "CreditsScreen", "Click"  );
+ 	new ImgButton( stage, gameState, 571,527, "res/screens/MainScreen/ButtonStart.png", "res/screens/MainScreen/ButtonStart.png","SwitchScreen", "DifficultyScreen", "Click"  );
+ 	new ImgButton( stage, gameState, 17,470, "res/screens/MainScreen/ButtonHelp.png", "res/screens/MainScreen/ButtonHelp.png","SwitchScreen", "InfoScreen", "Click"  );
+ 	new ImgButton( stage, gameState, 17,527, "res/screens/MainScreen/ButtonCredits.png", "res/screens/MainScreen/ButtonCredits.png","SwitchScreen", "CreditsScreen", "Click"  );
 
  	gameState.pubsub.publish( "BackgroundLoop", {name:"TitleMusic", pos:5650, volume:1} );
     this.uiElems = [];
@@ -135,7 +175,7 @@ function KitchenScreen( stage, gameState ){
 		gameState.purchasedItems[i].draw( stage, 403+100*i, 350 );
 	}
 
-	this.uiElems.push( gameState.ovenUI ? gameState.ovenUI : ( gameState.ovenUI = new OvenUI( 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" ) );
@@ -159,7 +199,7 @@ function KitchenScreen( stage, gameState ){
 function MarketScreen( stage, gameState ){
 	var that = this;
 
-    this.background = new createjs.Bitmap( "res/screens/MarketScreen.png" );
+    this.background = new createjs.Bitmap( "res/screens/MarketScreen/MarketScreen.png" );
     var price = new createjs.Text( "100", "24px Arial", "#00000000" );
     	price.x = 725;
 	 	price.y = 500;
@@ -171,7 +211,7 @@ function MarketScreen( stage, gameState ){
 	// Play soundz
 	gameState.pubsub.publish( "Play", {name:"Entrance", volume:0.3} );
 	gameState.pubsub.publish( "BackgroundLoop", {name:"MarketMusic", volume:1} );
-	gameState.pubsub.publish( "BackgroundLoop", {name:"MarketSound", volume:0.4} );
+	gameState.pubsub.publish( "BackgroundLoop", {name:"MarketBackgroundSound", volume:0.4} );
 
     stage.addChild( this.background );
     stage.addChild(price);
@@ -186,7 +226,6 @@ function MarketScreen( stage, gameState ){
 	this.topground = new createjs.Bitmap( "res/screens/MarketTopShelf.png" );
 	stage.addChild( this.topground );
 
-
 	 this.showPrice = function( cost ){
 	 	price.text = cost;
 	 }

js/soundmanager.js

@@ -13,7 +13,7 @@ function SoundManager( gameState ){
 
 	// Register all sounds loaded in gameState
 	createjs.Sound.registerSound("res/sound/turkey_in_the_straw.mp3", "TitleMusic");
-	createjs.Sound.registerSound("res/sound/supermarket.mp3", "MarketBackgroundSound");
+	createjs.Sound.registerSound("res/sound/Store/supermarket.mp3", "MarketBackgroundSound");
 	createjs.Sound.registerSound("res/sound/Music/Waterford.mp3", "MarketMusic");
 	createjs.Sound.registerSound("res/sound/GUI/pop.mp3", "Pop");
 	createjs.Sound.registerSound("res/sound/GUI/lowclick.mp3", "LowClick");
@@ -21,7 +21,6 @@ function SoundManager( gameState ){
 	createjs.Sound.registerSound("res/sound/GUI/buzz.mp3", "Error");
 	createjs.Sound.registerSound("res/sound/Store/buy.mp3", "Buy");
 	createjs.Sound.registerSound("res/sound/Store/entrance.mp3", "Entrance");
-	createjs.Sound.registerSound("res/sound/Store/backgroundSound.mp3", "MarketSound");
 
 
 	this.backgroundSounds = [];
@@ -51,14 +50,14 @@ function SoundManager( gameState ){
 		else{
 			newBackgroundSound = soundCache[soundName.name] ? soundCache[soundName.name] : soundCache[soundName.name] = createjs.Sound.createInstance( soundName.name );
 			newBackgroundSound.setPosition(soundName.pos || 0);
-			newBackgroundSound.volume = soundName.volume || 1;
+			newBackgroundSound.volume = newBackgroundSound.desiredVolume = soundName.volume || 1;
 			newBackgroundSound.play();
 
 			// loop-de-loop
 		 	newBackgroundSound.addEventListener("complete", function(){
 		 		if( newBackgroundSound.volume == 0 ){ newBackgroundSound.stop(); return; }
 		 		newBackgroundSound.setPosition(soundName.pos || 0);
-		 		newBackgroundSound.volume = soundName.volume || 1;
+		 		newBackgroundSound.volume = newBackgroundSound.desiredVolume = soundName.volume || 1;
      			newBackgroundSound.play();
      		});
 		}
@@ -78,8 +77,8 @@ function SoundManager( gameState ){
 				if( that.backgroundSounds[i].audioState == AUDIO_IN ){
 					that.backgroundSounds[i].volume +=0.03;
 				}
-				if( that.backgroundSounds[i].volume >= 1.0 ){
-					that.backgroundSounds[i].volume = 1;
+				if( that.backgroundSounds[i].volume >= that.backgroundSounds[i].desiredVolume ){
+					that.backgroundSounds[i].volume = that.backgroundSounds[i].desiredVolume;
 				}
 				if( that.backgroundSounds[i].volume <= 0.0 ){
 					that.backgroundSounds[i].volume = 0;

js/stories.js

@@ -3,7 +3,7 @@ var story = {
 	"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: You should buy a turkey first!"],
+	"BuyTurkeyFirst" : ["Me: I should buy a turkey first!"],
 	"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

@@ -75,12 +75,7 @@ function OvenUI( stage, gameState ){
     this.circle.x = 0;
     this.circle.y = 0;
 
-    //Set position of Shape instance.
-    stage.addChild( this.circle );
-    stage.addChild( ovenLight );
-    stage.addChild( new Button( stage, gameState, 45, 163, 41, 17, "ChangeTemperature", "Up" ) );
-    stage.addChild( new Button( stage, gameState, 95, 163, 41, 17, "ChangeTemperature", "Down" ) );
-    stage.addChild( temperatureText );
+
 
 	this.changeTemperature = function( direction ){
 
@@ -125,6 +120,15 @@ function OvenUI( stage, gameState ){
 
         	// Will cause the circle to wrap back
         	if ( that.circle.x > stage.canvas.width ) { that.circle.x = 0; }
+    	},
+    	render: function(){
+		    //Set position of Shape instance.
+		    stage.addChild( that.circle );
+		    stage.addChild( ovenLight );
+		    stage.addChild( new Button( stage, gameState, 45, 163, 41, 17, "ChangeTemperature", "Up" ) );
+		    stage.addChild( new Button( stage, gameState, 95, 163, 41, 17, "ChangeTemperature", "Down" ) );
+		    stage.addChild( temperatureText );
+    		return this;
     	}
 	}
 }