From 539a87366a55954bb5d5d799f8e84b98f9739e45 Mon Sep 17 00:00:00 2001
From: Nicky Case <n@ncase.me>
Date: Thu, 20 Jul 2017 14:45:11 -0400
Subject: [PATCH] preloader done

---
 css/slides.css                   |  3 +-
 index.html                       | 25 ++++++++--
 js/core/Button.js                |  3 ++
 js/core/Scratcher.js             |  1 +
 js/sims/Splash.js                |  2 +-
 js/slides/0_Slides_Intro.js      | 80 +++++++++++++++++++++++++++++++-
 js/slides/6_Slides_Noise.js      |  1 -
 js/slides/8_Slides_Conclusion.js | 31 +++++++++++++
 lang/en.html                     | 24 +++++++++-
 9 files changed, 159 insertions(+), 11 deletions(-)

diff --git a/css/slides.css b/css/slides.css
index 7c45e68..cbbe4e0 100644
--- a/css/slides.css
+++ b/css/slides.css
@@ -14,8 +14,7 @@ body{
 	margin:0;
 	overflow: hidden;
 
-	background: #fff; /*url('paper@2x.png');
-	background-size: 100px 100px;*/
+	background: #fff;
 
 	font-family: 'FuturaHandwritten';
 	color: #333;
diff --git a/index.html b/index.html
index 8e2aa4b..b139b2f 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
 	<div id="main">
 		<div id="slideshow_container">
 			<div id="slideshow"></div>
-			<div id="scratcher" class="scratcher"></div>
+			<div id="scratcher"></div>
 		</div>
 	</div>
 	<div id="footer">
@@ -69,8 +69,9 @@
 var slideshow, slideSelect;
 window.onload = function(){
 
+	// PRELOADER
 	Q.all([
-		Loader.loadAssets(Loader.manifest),
+		Loader.loadAssets(Loader.manifestPreload),
 		Words.convert("lang/en.html")
 	]).then(function(){
 
@@ -85,10 +86,26 @@ window.onload = function(){
 			dom: $("#select"),
 			slides: SLIDES
 		});
+		slideSelect.dom.style.display = "none";
+		subscribe("start/game", function(){
+			publish("slideshow/next");
+			slideSelect.dom.style.display = "block";
+		});
+
+		// LOAD REAL THINGS
+		Loader.loadAssets(
+			Loader.manifest,
+			function(){
+				publish("preloader/done");
+			},
+			function(ratio){
+				publish("preloader/progress", [ratio]);
+			}
+		);
 
 		// First slide!
-		//slideshow.nextSlide();
-		slideshow.gotoSlide("noise");
+		slideshow.nextSlide();
+		//slideshow.gotoSlide("noise");
 
 	});
 
diff --git a/js/core/Button.js b/js/core/Button.js
index 6e23099..4edd4b6 100644
--- a/js/core/Button.js
+++ b/js/core/Button.js
@@ -28,6 +28,9 @@ function Button(config){
 	self.setText = function(text_id){
 		var words = Words.get(text_id);
 		if(config.uppercase) words = words.toUpperCase();
+		self.setText2(words);
+	};
+	self.setText2 = function(words){
 		text.innerHTML = words;
 	};
 	self.setText(config.text_id);
diff --git a/js/core/Scratcher.js b/js/core/Scratcher.js
index df951eb..aabebc3 100644
--- a/js/core/Scratcher.js
+++ b/js/core/Scratcher.js
@@ -17,6 +17,7 @@ Scratcher.scratch = function(gotoID){
 
 	var dom = $("#scratcher");
 	dom.style.display = "block";
+	dom.className = "scratcher";
 
 	var width = $("#main").clientWidth;
 	var height = $("#main").clientHeight;
diff --git a/js/sims/Splash.js b/js/sims/Splash.js
index eb16147..fad9e95 100644
--- a/js/sims/Splash.js
+++ b/js/sims/Splash.js
@@ -1,4 +1,4 @@
-Loader.addToManifest(Loader.manifest,{
+Loader.addToManifest(Loader.manifestPreload,{
 	splash_peep: "assets/splash/splash_peep.json",
 	connection: "assets/splash/connection.json"
 });
diff --git a/js/slides/0_Slides_Intro.js b/js/slides/0_Slides_Intro.js
index 896c845..d575702 100644
--- a/js/slides/0_Slides_Intro.js
+++ b/js/slides/0_Slides_Intro.js
@@ -13,14 +13,89 @@ X. Credits
 Labels should be in the en.html folder
 
 *********************/
+
+Loader.addToManifest(Loader.manifest,{
+	cssAsset0: "assets/ui/button.png",
+	cssAsset1: "assets/ui/button_short.png",
+	cssAsset2: "assets/ui/button_long.png",
+	cssAsset3: "assets/ui/sandbox_tabs.png",
+	cssAsset4: "assets/ui/sandbox_incdec.png",
+	cssAsset5: "assets/ui/slider_bg.png",
+	cssAsset6: "assets/ui/slider_knob.png",
+	cssAsset7: "assets/ui/sandbox_hats.png",
+	cssAsset8: "assets/ui/scratch.png",
+	cssAsset9: "assets/iterated/iterated_scoreboard.png",
+	cssAsset10: "assets/tournament/peep_characters.png",
+	cssAsset11: "assets/ui/sandbox_hats.png",
+	cssAsset12: "assets/tournament/score_small.png"
+});
+
 SLIDES.push({
 
-	id: "intro",
+	//id: "preloader",
 	onstart: function(self){
 
+		var o = self.objects;
+
 		// Splash in background
 		self.add({ id:"splash", type:"Splash" });
 
+		// TITLE TEXT
+		self.add({
+			id:"title", type:"TextBox",
+			x:130, y:80, width:700,
+			size:100, lineHeight:0.9, align:"center",
+			text_id:"title"
+		});
+		self.add({
+			id:"subtitle", type:"TextBox",
+			x:297, y:344, width:360,
+			align:"center", color:"#aaa", size:15,
+			text_id:"subtitle"
+		});
+
+		// Button
+		self.add({
+			id:"loading_button", type:"Button", x:382, y:410,
+			text_id:"loading",
+			active:false
+		});
+		var _loadingWords = function(ratio){
+			ratio = Math.round(ratio*100);
+			o.loading_button.setText2(Words.get("loading")+" "+ratio+"%");
+		};
+
+		// PRELOADER
+		listen(self,"preloader/progress", function(ratio){
+			console.log(ratio);
+			_loadingWords(ratio);
+		});
+		listen(self,"preloader/done", function(){
+			o.loading_button.setText("loading_done");
+			o.loading_button.activate();
+			o.loading_button.config.message = "start/game";
+		});
+
+	},
+	onend: function(self){
+		unlisten(self);
+		self.remove("title");
+		self.remove("subtitle");
+		self.remove("loading_button");
+	}
+
+});
+
+SLIDES.push({
+	id: "intro",
+	onjump: function(self){
+		// Splash in background
+		self.add({ id:"splash", type:"Splash" });
+	},
+	onstart: function(self){
+
+		var o = self.objects;
+		
 		// Circular Wordbox
 		self.add({
 			id:"intro_text", type:"TextBox",
@@ -35,6 +110,9 @@ SLIDES.push({
 			message:"slideshow/scratch"
 		});
 
+		_hide(o.intro_text); _fadeIn(o.intro_text, 200);
+		_hide(o.intro_button); _fadeIn(o.intro_button, 700);
+
 	},
 	onend: function(self){
 		self.clear();
diff --git a/js/slides/6_Slides_Noise.js b/js/slides/6_Slides_Noise.js
index cc80ab2..261ea53 100644
--- a/js/slides/6_Slides_Noise.js
+++ b/js/slides/6_Slides_Noise.js
@@ -151,7 +151,6 @@ SLIDES.push({
 
 // Tournament: simpleton wins
 SLIDES.push({
-	id: "noise",
 	onstart: function(self){
 
 		var o = self.objects;
diff --git a/js/slides/8_Slides_Conclusion.js b/js/slides/8_Slides_Conclusion.js
index 48a6852..c524188 100644
--- a/js/slides/8_Slides_Conclusion.js
+++ b/js/slides/8_Slides_Conclusion.js
@@ -1,5 +1,13 @@
 SLIDES.push({
 	id: "conclusion",
+	onstart: function(self){
+	},
+	onend: function(self){
+		self.clear();
+	}
+});
+
+SLIDES.push({
 	onstart: function(self){
 
 		// Splash in background
@@ -19,6 +27,29 @@ SLIDES.push({
 			message:"slideshow/scratch"
 		});
 
+	},
+	onend: function(self){
+		self.remove("button");
+	}
+});
+
+SLIDES.push({
+	onstart: function(self){
+
+		var o = self.objects;
+
+		// Text
+		o.text.setTextID("conclusion_2");
+
+		// Button
+		self.add({
+			id:"button", type:"Button", x:385, y:466, 
+			text_id:"conclusion_button", fontSize:16, upperCase:false,
+			message:"slideshow/scratch"
+		});
+
+		// Fade In & Out
+
 	},
 	onend: function(self){
 		self.clear();
diff --git a/lang/en.html b/lang/en.html
index 4bd34c2..732d0e8 100644
--- a/lang/en.html
+++ b/lang/en.html
@@ -1,3 +1,23 @@
+<!-- - - - - - - - - - - - - - - - - -->
+<!-- - - - - - TITLE! - - - - - - - - -->
+<!-- - - - - - - - - - - - - - - - - -->
+
+<p id="title">
+<span style="font-size:0.75em">THE</span><br>
+EVOLUTION<br>
+<span style="font-size:0.75em">OF TRUST</span>
+</p>
+<p id="subtitle">
+playing time: 30 min &#8226; by nicky case, july 2017
+</p>
+
+<p id="loading">
+loading...
+</p>
+<p id="loading_done">
+PLAY &rarr;
+</p>
+
 <!-- - - - - - - - - - - - - - - - - -->
 <!-- - - - - - INTRO! - - - - - - - - -->
 <!-- - - - - - - - - - - - - - - - - -->
@@ -23,8 +43,8 @@ we're less trusting than ever. Fewer and fewer people say they trust their<br>
 governments, their media, or even <i>each other</i>. So here's our puzzle:
 <br><br>
 
-<b>Why, even in good times, do friends become enemies?<br>
-And why, even in bad times, do enemies become friends?</b>
+<b>Why &amp; when do friends become enemies?<br>
+or: Why &amp; when do enemies become friends?</b>
 <br><br>
 
 I think game theory can help explain our epidemic of distrust –<br>