TOOLTIPS for CHARACTERS

css/slides.css

@@ -170,6 +170,8 @@ s{
 
 	transform-origin: 97.5px 27.5px;
 	transition: transform 0.1s ease-out;
+
+	text-align: center;
 }
 .button #background{
 	position: absolute;

js/core/Button.js

@@ -20,6 +20,16 @@ function Button(config){
 	if(config.size) button.setAttribute("size", config.size);
 	self.dom = button;
 
+	// TOOLTIP?
+	if(config.tooltip){
+		self.dom.style.width = 190;
+		self.dom.style.height = 55;
+		self.dom.style.position = "absolute";
+		self.dom.setAttribute("data-balloon-length", "large");
+		self.dom.setAttribute("data-balloon", Words.get(config.tooltip));
+		self.dom.setAttribute("data-balloon-pos", "left");
+	}
+
 	// BG
 	var bg = document.createElement("div");
 	bg.id = "background";

js/slides/0_Slides_Intro.js

@@ -32,7 +32,12 @@ Loader.addToManifest(Loader.manifest,{
 	cssAsset12: "assets/tournament/score_small.png",
 
 	// Music!
-	bg_music: "assets/sounds/bg_music.mp3"
+	bg_music: "assets/sounds/bg_music.mp3",
+
+	// IMAGE BOXES
+	image1: "assets/evolution/evolution_intro.png",
+	image2: "assets/conclusion/summary.png",
+	image3: "assets/conclusion/truce.jpg",
 
 });
 

js/slides/3_Slides_Tournament.js

@@ -33,6 +33,7 @@ SLIDES.push({
 				self.add({
 					id:"bet_"+character, type:"Button", x:x, y:y, 
 					text_id: "icon_"+character,
+					tooltip: "who_"+character,
 					onclick:function(){
 						_.answer = character;
 						publish("slideshow/next");
@@ -45,6 +46,14 @@ SLIDES.push({
 		_addButton("all_d", 510, 300+25);
 		_addButton("grudge", 730, 300+25);
 		_addButton("prober", 510, 380+25);
+
+		// WHO'S WHO?
+		self.add({
+			id:"forgot", type:"TextBox",
+			x:728, y:408, width:200, height:50,
+			align:"center", color:"#aaa", size:16,
+			text_id:"forgot_whos_who"
+		});
 		
 	},
 	onend: function(self){
@@ -53,6 +62,7 @@ SLIDES.push({
 		self.remove("bet_all_d");
 		self.remove("bet_grudge");
 		self.remove("bet_prober");
+		self.remove("forgot");
 	}
 });
 

js/slides/4_Slides_Evolution.js

@@ -81,6 +81,7 @@ SLIDES.push({
 				self.add({
 					id:"bet_"+character, type:"Button", x:x, y:y, 
 					text_id: "icon_"+character,
+					tooltip: "who_"+character,
 					onclick:function(){
 						_.answer = character;
 						publish("slideshow/next");
@@ -92,11 +93,20 @@ SLIDES.push({
 		_addButton("all_d", 510, 295+70);
 		_addButton("tft", 510, 295+70*2);
 
+		// WHO'S WHO?
+		self.add({
+			id:"forgot", type:"TextBox",
+			x:728, y:428, width:200, height:50,
+			align:"center", color:"#aaa", size:16,
+			text_id:"forgot_whos_who"
+		});
+
 	},
 	onend: function(self){
 		self.remove("bet_tft");
 		self.remove("bet_all_c");
 		self.remove("bet_all_d");
+		self.remove("forgot");
 	}
 });
 

js/slides/6_Slides_Noise.js

@@ -188,6 +188,7 @@ SLIDES.push({
 				self.add({
 					id:"bet_"+character, type:"Button", x:x, y:y, 
 					text_id: "icon_"+character,
+					tooltip: "who_"+character,
 					onclick:function(){
 						_.answer = character;
 						publish("slideshow/next");
@@ -203,6 +204,14 @@ SLIDES.push({
 		_addButton("random", x, y+dy); _addButton("tft", x+dx, y+dy);
 		_addButton("all_c", x, y+dy*2);
 
+		// WHO'S WHO?
+		self.add({
+			id:"forgot", type:"TextBox",
+			x:715, y:435, width:190, height:50,
+			align:"center", color:"#aaa", size:15,
+			text_id:"forgot_whos_who"
+		});
+
 	},
 	onend: function(self){
 		self.remove("bet_all_c");
@@ -210,6 +219,7 @@ SLIDES.push({
 		self.remove("bet_tf2t");
 		self.remove("bet_pavlov");
 		self.remove("bet_random");
+		self.remove("forgot");
 	}
 });
 
@@ -331,6 +341,7 @@ SLIDES.push({
 				self.add({
 					id:"bet_"+character, type:"Button", x:x, y:y, 
 					text_id: "icon_"+character,
+					tooltip: "who_"+character,
 					onclick:function(){
 						_.answer = character;
 						publish("slideshow/next");
@@ -346,6 +357,14 @@ SLIDES.push({
 		_addButton("random", x, y+dy); _addButton("tft", x+dx, y+dy);
 		_addButton("all_d", x, y+dy*2);
 
+		// WHO'S WHO?
+		self.add({
+			id:"forgot", type:"TextBox",
+			x:715, y:435, width:190, height:50,
+			align:"center", color:"#aaa", size:15,
+			text_id:"forgot_whos_who"
+		});
+
 	},
 	onend: function(self){
 		self.remove("bet_all_d");
@@ -353,6 +372,7 @@ SLIDES.push({
 		self.remove("bet_tf2t");
 		self.remove("bet_pavlov");
 		self.remove("bet_random");
+		self.remove("forgot");
 	}
 });
 

words.html

@@ -1055,6 +1055,40 @@ random
 </span>
 </p>
 
+<p id="forgot_whos_who">
+(forgot who's who? hover buttons to see descriptions of each character!)
+</p>
+<p id="who_tft">
+Starts with Cooperate. Then, it simply repeats whatever YOU did in the last round.
+</p>
+<p id="who_all_d">
+Always cheats.
+</p>
+<p id="who_all_c">
+Always cooperates.
+</p>
+<p id="who_grudge">
+Starts with Cooperate, and keeps cooperating until you cheat it even once.
+Afterwards, it always plays Cheat.
+</p>
+<p id="who_prober">
+Starts with: Cooperate, Cheat, Cooperate, Cooperate.
+Afterwards, if you ever retaliate with a Cheat, it plays like a Copycat.
+Otherwise, it plays like an Always Cheat.
+</p>
+<p id="who_tf2t">
+Starts with Cooperate.
+Only retaliates with a Cheat if you cheated it TWICE in a row.
+</p>
+<p id="who_pavlov">
+Starts with Cooperate.
+Then, if you cooperated in last round, it repeats its last move (even if it was an accident).
+But if you cheated in last round, it switches its last move (even if it was an accident).
+</p>
+<p id="who_random">
+Randomly cheats or cooperates with 50-50 chance
+</p>
+
 
 <!-- - - - - - - - - - - - - - - - - -->
 <!-- - - - - SMALL LABELS! - - - - - -->