diff --git a/slides/index.css b/slides/index.css index 3354bbc..7d0cd32 100644 --- a/slides/index.css +++ b/slides/index.css @@ -25,9 +25,6 @@ body{ overflow: hidden; cursor: none; } -#simulations{ - border: 1px solid #eee; -} #simulations, #slideshow{ position: absolute; width: 960px; @@ -60,7 +57,7 @@ body{ #slideshow .next_button:hover{ background-position: 0 -100px; } -.fadeable{ +.transitionable{ transition: opacity 0.3s ease-in-out; } #scratch{ @@ -70,6 +67,9 @@ body{ background-size: 200% 2000%; background-position: 0% 0%; } +.sim_button{ + +} /* MODAL */ #modal{ @@ -98,3 +98,8 @@ body{ words, bonus, glossary{ display: none; } + +/* TO SEE LAYOUT */ +.box, #simulations{ + border: 1px solid #eee; +} \ No newline at end of file diff --git a/slides/index.html b/slides/index.html index 7e4fe6f..b72d5c9 100644 --- a/slides/index.html +++ b/slides/index.html @@ -24,7 +24,7 @@ Cursor is allowed to flow EVERYWHERE though... -
+
@@ -168,10 +168,10 @@ blah blah post-puzzle WIN -start sim! +> start sim -next day >> +>> next reset sim diff --git a/slides/js/chapters/2_Simple_Contagion.js b/slides/js/chapters/2_Simple_Contagion.js index d83246c..b5175ec 100644 --- a/slides/js/chapters/2_Simple_Contagion.js +++ b/slides/js/chapters/2_Simple_Contagion.js @@ -16,6 +16,7 @@ SLIDES.push( clear:true, add:[ + // Lil' contagion { type:"sim", @@ -31,6 +32,14 @@ SLIDES.push( scale: 1.25 } }, + + // UI for the simulation + { + type:"box", + x:380, y:180, + sim_button:"red" + }, + ] }, @@ -39,6 +48,7 @@ SLIDES.push( clear:true, add:[ + // Lil' contagion { type:"sim", @@ -55,6 +65,7 @@ SLIDES.push( startUncuttable: true } }, + ] }, diff --git a/slides/js/lib/helpers.js b/slides/js/lib/helpers.js index 1b5968d..aaa3555 100644 --- a/slides/js/lib/helpers.js +++ b/slides/js/lib/helpers.js @@ -56,14 +56,14 @@ function removeFromArray(array, item){ // Fade In function fadeIn(container, dom){ dom.style.opacity = 0; - dom.classList.add("fadeable"); + dom.classList.add("transitionable"); container.appendChild(dom); setTimeout(function(){ dom.style.opacity = 1; },50); } function fadeOut(container, dom){ - dom.classList.add("fadeable"); + dom.classList.add("transitionable"); dom.style.opacity = 0; setTimeout(function(){ container.removeChild(dom); diff --git a/slides/js/main.js b/slides/js/main.js index 4d78028..064e07c 100644 --- a/slides/js/main.js +++ b/slides/js/main.js @@ -28,6 +28,6 @@ window.onload = function(){ window.requestAnimationFrame(update); // First slide! - slideshow.gotoChapter("Complex"); + slideshow.gotoChapter("Simple"); } \ No newline at end of file diff --git a/slides/js/sim/Simulations.js b/slides/js/sim/Simulations.js index a7df3ce..4caa9a8 100644 --- a/slides/js/sim/Simulations.js +++ b/slides/js/sim/Simulations.js @@ -45,6 +45,29 @@ function Simulations(){ }); }; + //////////////////////// + // SIMULATION RUNNING // + //////////////////////// + + subscribe("sim/start", function(){ + Simulations.IS_RUNNING = true; + self.sims.forEach(function(sim){ + sim.save(); // save for later resetting + }); + publish("sim/next"); + }); + subscribe("sim/reset", function(){ + Simulations.IS_RUNNING = false; + self.sims.forEach(function(sim){ + sim.reload(); // reload the network pre-sim + }); + }); + subscribe("sim/next", function(){ + self.sims.forEach(function(sim){ + sim.nextStep(); + }); + }); + /////////////////////// // HELPERS AND STUFF // /////////////////////// @@ -62,7 +85,7 @@ function Sim(config){ var self = this; self.config = config; - self.networkConfig = config.network; + self.networkConfig = cloneObject(config.network); self.container = config.container; self.options = config.options || {}; @@ -316,6 +339,30 @@ function Sim(config){ }; + //////////////////////// + // SIMULATION RUNNING // + //////////////////////// + + self.save = function(){ + self.networkConfig = self.getCurrentNetwork(); + }; + + self.reload = function(){ + self.init(); + }; + + self.nextStep = function(){ + + // "Infect" the peeps who need to get infected + // TODO: Connection animation + self.peeps.filter(function(peep){ + return peep.isPastThreshold; + }).forEach(function(peep){ + peep.infect(); + }); + + }; + /////////////////////////////// // secret keyboard interface // /////////////////////////////// @@ -354,7 +401,7 @@ function Sim(config){ if(toDeletePeep) self.removePeep(toDeletePeep); }); - self.save = function(){ + self.getCurrentNetwork = function(){ var savedNetwork = { contagion: self.contagion, peeps: [], @@ -368,6 +415,10 @@ function Sim(config){ var toIndex = self.peeps.indexOf(c.to); savedNetwork.connections.push([fromIndex, toIndex]); }); + return savedNetwork; + }; + self.serialize = function(){ + var savedNetwork = self.getCurrentNetwork(); return '{\n'+ '\t"contagion":'+savedNetwork.contagion+",\n"+ '\t"peeps":'+JSON.stringify(savedNetwork.peeps)+",\n"+ diff --git a/slides/js/slideshow/Boxes.js b/slides/js/slideshow/Boxes.js index 696a18d..f4c5f6b 100644 --- a/slides/js/slideshow/Boxes.js +++ b/slides/js/slideshow/Boxes.js @@ -52,6 +52,11 @@ function Boxes(){ box.style.backgroundImage = "url("+config.img+")" } + // Sim Button + if(config.sim_button){ + var simButton = SimButton(box, config.sim_button); + } + // Replace "next" buttons! var next; if(next = box.querySelector("next")){ @@ -111,3 +116,44 @@ function Boxes(){ }; } + +function SimButton(container, color){ + + var self = this; + self.container = container; + self.container.classList.add("sim_button"); + + // RESET + var smallButton = document.createElement("div"); + smallButton.innerHTML = getWords("sim_reset"); + self.container.appendChild(smallButton); + smallButton.onclick = function(){ + if(Simulations.IS_RUNNING){ + publish("sim/reset"); + _updateButtonUI(); + } + }; + + // START / NEXT + var bigButton = document.createElement("div"); + self.container.appendChild(bigButton); + bigButton.onclick = function(){ + if(!Simulations.IS_RUNNING){ + publish("sim/start"); + _updateButtonUI(); + }else{ + publish("sim/next"); + } + }; + + // Update button UI + var _updateButtonUI = function(){ + if(!Simulations.IS_RUNNING){ + bigButton.innerHTML = getWords("sim_start"); + }else{ + bigButton.innerHTML = getWords("sim_next"); + } + }; + _updateButtonUI(); + +}