diff --git a/assets/button.png b/assets/button.png
new file mode 100644
index 0000000..f0beb52
Binary files /dev/null and b/assets/button.png differ
diff --git a/assets/connection.png b/assets/connection.png
index 084d37f..e8fc78c 100644
Binary files a/assets/connection.png and b/assets/connection.png differ
diff --git a/css/slides.css b/css/slides.css
index 4f1f5f4..a10402c 100644
--- a/css/slides.css
+++ b/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 ******/
diff --git a/index.html b/index.html
index 5368bd3..83520a2 100644
--- a/index.html
+++ b/index.html
@@ -53,8 +53,8 @@ window.onload = function(){
});
// First slide!
- //slideshow.nextSlide();
- slideshow.gotoSlide("intro1");
+ slideshow.nextSlide();
+ //slideshow.gotoSlide("intro1");
};
\ No newline at end of file
diff --git a/js/core/Button.js b/js/core/Button.js
index 29a828e..84a8831 100644
--- a/js/core/Button.js
+++ b/js/core/Button.js
@@ -4,20 +4,54 @@ 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){
diff --git a/js/core/WordBox.js b/js/core/WordBox.js
index ccba318..7c28398 100644
--- a/js/core/WordBox.js
+++ b/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
diff --git a/js/main.js b/js/main.js
index 89ecc61..d00717e 100644
--- a/js/main.js
+++ b/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:
"+
+ "Always Cooperate, "+
+ "Always Cheat & "+
+ "Tit For Tat"+
+ "
"+
+ "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.
"+
+ "
"+
+ "We are not punished for our sins, but by them.
"+
+ "- 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 foo bar foo bar"},
]
},
diff --git a/js/sims/TournamentSim.js b/js/sims/TournamentSim.js
index 97d023e..a9d278d 100644
--- a/js/sims/TournamentSim.js
+++ b/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();