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();