AW YEAH THAT'S ONE SLIDE

css/slides.css

@@ -28,6 +28,7 @@ body{
 /*************************/
 
 #slideshow{
+	
 	/*background: #bada55;*/
 	/*border: 1px solid rgba(0,0,0,0.2);*/
 	width:960px;
@@ -38,9 +39,6 @@ body{
 	margin: auto;
 	top:0; left:0; right:0; bottom:0;
 
-	/* Font */
-	font-family: 'FuturaHandwritten';
-
 }
 #slideshow .object{
 	position: absolute;
@@ -52,6 +50,56 @@ body{
 	-ms-transition: opacity 0.3s ease-in-out;
 	transition: opacity 0.3s ease-in-out;
 }
+.wordbox{
+	font-family: 'FuturaHandwritten';
+	color: #333;
+	font-size: 20px;
+}
+.button{
+	z-index: 0;
+}
+.button #background{
+	position: absolute;
+	background: url(../assets/button.png);
+	width:250px; height:125px;
+	background-size: 100%;
+	top:-35px; left:-30px;
+	pointer-events:none;
+}
+.button #text{
+	
+	font-family: 'FuturaHandwritten';
+	color: #000;
+	font-size: 17px;
+
+	width: 180px;
+	height: 30px;
+	text-align: center;
+
+	position: absolute;
+	top:17px; left:5px;
+
+}
+.button #hitbox{
+	position: absolute;
+	width:195px; height:55px;
+	cursor: pointer;
+}
+.button[hover=yes]{
+	z-index: 100;
+}
+.button[hover=yes] #background{
+	background-position: 0px -125px;
+}
+.button[deactivated=yes] #background{
+	background-position: 0px -250px;
+}
+.button[deactivated=yes] #text{
+	color: #CCCCCC;
+}
+.button[deactivated=yes] #hitbox{
+	display: none;
+}
 
 /*************************/
 /***** SLIDE SELECT ******/

index.html

@@ -53,8 +53,8 @@ window.onload = function(){
 	});
 
 	// First slide!
-	//slideshow.nextSlide();
-	slideshow.gotoSlide("intro1");
+	slideshow.nextSlide();
+	//slideshow.gotoSlide("intro1");
 
 };
 </script>

js/core/Button.js

@@ -4,21 +4,55 @@ function Button(config){
 	self.id = config.id;
 
 	// Create DOM
-	var button = document.createElement("button");
+	var button = document.createElement("div");
 	button.className = "object";
 	button.classList.add("fader");
+	button.classList.add("button");
 	self.dom = button;
 
+	// BG
+	var bg = document.createElement("div");
+	bg.id = "background";
+	var text = document.createElement("div");
+	text.id = "text";
+	var hitbox = document.createElement("div");
+	hitbox.id = "hitbox";
+	button.appendChild(bg);
+	button.appendChild(text);
+	button.appendChild(hitbox);
+
 	// Customize DOM
 	button.style.left = config.x+"px";
 	button.style.top = config.y+"px";
-	button.innerHTML = config.text;
+	text.innerHTML = config.text;
+
+	// On hover...
+	hitbox.onmouseover = function(){
+		if(self.active) button.setAttribute("hover","yes");
+	};
+	hitbox.onmouseout = function(){
+		if(self.active) button.removeAttribute("hover");
+	};
 
 	// On click...
-	button.onclick = function(){
-		publish(config.message);
+	hitbox.onclick = function(){
+		if(self.active) publish(config.message);
 	};
 
+	// Activate/Deactivate
+	self.active = true;
+	self.activate = function(){
+		self.active = true;
+		button.removeAttribute("deactivated");
+	};
+	self.deactivate = function(){
+		self.active = false;
+		button.setAttribute("deactivated","yes");
+		button.removeAttribute("hover");
+	};
+	if(config.active===undefined) config.active=true;
+	if(!config.active) self.deactivate();
+
 	// Add...
 	self.add = function(INSTANT){
 		return _addFade(self, INSTANT);

js/core/WordBox.js

@@ -7,6 +7,7 @@ function WordBox(config){
 	var words = document.createElement("div");
 	words.className = "object";
 	words.classList.add("fader");
+	words.classList.add("wordbox");
 	self.dom = words;
 
 	// Customize DOM

js/main.js

@@ -4,7 +4,46 @@ var slides = [
 {
 	id: "sim",
 	add:[
-		{id:"tournament", type:"TournamentSim", x:0, y:20}
+		{id:"tournament", type:"TournamentSim", x:0, y:20},
+		{
+			id:"_w1", type:"WordBox",
+			x:500, y:0, width:460, height:50,
+			text:"Let's say there are three kinds of players:<br>"+
+			"<span style='color:#FF75FF;'>Always Cooperate</span>, "+
+			"<span style='color:#52537F;'>Always Cheat</span> & "+
+			"<span style='color:#4089DD;'>Tit For Tat</span>"+
+			"<br><br>"+
+			"What happens when you let a mixed population play against each other, and evolve over time?"
+		},
+		{
+			id:"_b1", type:"Button",
+			x:500, y:150, width:140,
+			text:"1) play tournament",
+			message:"tournament/play"
+		},
+		{
+			id:"_b2", type:"Button",
+			x:500, y:220, width:140,
+			text:"2) eliminate bottom 5",
+			message:"tournament/eliminate",
+			active:false
+		},
+		{
+			id:"_b3", type:"Button",
+			x:500, y:290, width:140,
+			text:"3) reproduce top 5",
+			message:"tournament/reproduce",
+			active:false
+		},
+		{
+			id:"_w3", type:"WordBox",
+			x:500, y:370, width:460, height:200,
+			text:"Always Cheat dominates at first, but when it runs out of suckers to exploit, "+
+			"its empires collapses – and the fairer Tit For Tat takes over.<br>"+
+			"<br>"+
+			"<i>We are not punished for our sins, but by them.</i><br>"+
+			"- Elbert Hubbard"
+		}
 	]
 },
 
@@ -20,7 +59,7 @@ var slides = [
 {
 	id: "intro1",
 	add:[
-		{id:"wordbox1", type:"WordBox", x:500, y:0, width:100, height:200, text:"foo bar foo bar foo bar"},
+		{id:"wordbox1", type:"WordBox", x:500, y:0, width:100, height:200, text:"foo bar <b>foo bar</b> <i>foo<i> bar"},
 	]
 },
 

js/sims/TournamentSim.js

@@ -196,6 +196,7 @@ function TournamentSim(config){
 	var STAGE_REPRODUCE = 3;
 	self.STAGE = STAGE_REST;
 
+	/*
 	self.ALL_AT_ONCE = function(){
 		publish("tournament/play");
 		setTimeout(function(){ publish("tournament/eliminate"); },500);
@@ -203,6 +204,7 @@ function TournamentSim(config){
 		setTimeout(self.ALL_AT_ONCE, 1500);
 	};
 	setTimeout(self.ALL_AT_ONCE, 100);
+	*/
 
 	// ANIMATE
 	var _playIndex = 0;
@@ -219,6 +221,7 @@ function TournamentSim(config){
 				self.playOneTournament(); // FOR REAL, NOW.
 				_playIndex = 0;
 				self.STAGE = STAGE_REST;
+				slideshow.objects._b2.activate(); // activate NEXT button!
 			}
 		}
 
@@ -226,6 +229,7 @@ function TournamentSim(config){
 		if(self.STAGE == STAGE_ELIMINATE){
 			self.eliminateBottom(5);
 			self.STAGE = STAGE_REST;
+			slideshow.objects._b3.activate(); // activate NEXT button!
 		}
 
 		// REPRODUCE!
@@ -250,6 +254,7 @@ function TournamentSim(config){
 			if(_tweenTimer>=1){
 				_tweenTimer = 0;
 				self.STAGE = STAGE_REST;
+				slideshow.objects._b1.activate(); // activate NEXT button!
 			}
 
 		}
@@ -257,11 +262,25 @@ function TournamentSim(config){
 	});
 
 	// PLAY A TOURNAMENT
-	self._startPlay = function(){ self.STAGE=STAGE_PLAY; };
+	self.deactivateAllButtons = function(){
+		slideshow.objects._b1.deactivate();
+		slideshow.objects._b2.deactivate();
+		slideshow.objects._b3.deactivate();
+	};
+	self._startPlay = function(){
+		self.STAGE=STAGE_PLAY;
+		self.deactivateAllButtons();
+	};
 	subscribe("tournament/play", self._startPlay);
-	self._startEliminate = function(){ self.STAGE=STAGE_ELIMINATE; };
+	self._startEliminate = function(){
+		self.STAGE=STAGE_ELIMINATE;
+		self.deactivateAllButtons();
+	};
 	subscribe("tournament/eliminate", self._startEliminate);
-	self._startReproduce = function(){ self.STAGE=STAGE_REPRODUCE; };
+	self._startReproduce = function(){
+		self.STAGE=STAGE_REPRODUCE;
+		self.deactivateAllButtons();
+	};
 	subscribe("tournament/reproduce", self._startReproduce);
 
 	// Add...
@@ -379,7 +398,6 @@ function TournamentAgent(config){
 	// Body!
 	var body = PIXI.Sprite.fromImage("assets/"+self.strategyName+".png");
 	body.scale.set(0.5);
-	if(g.x>250) body.scale.x*=-1;
 	body.anchor.x = 0.5;
 	body.anchor.y = 0.75;
 	g.addChild(body);
@@ -431,9 +449,10 @@ function TournamentAgent(config){
 	};
 	self.updatePosition = function(){
 		g.x = Math.cos(self.angle)*200 + 250;
-		g.y = Math.sin(self.angle)*200 + 250;
+		g.y = Math.sin(self.angle)*200 + 265;
 		scoreText.x = -Math.cos(self.angle)*40;
 		scoreText.y = -Math.sin(self.angle)*48 - 22;
+		body.scale.x = Math.abs(body.scale.x) * ((Math.cos(self.angle)<0) ? 1 : -1);
 	};
 	self.updatePosition();