HELL YEAH

slides/index.css

@@ -35,6 +35,20 @@ body{
 #simulations canvas, #slideshow div{
 	position: absolute;
 }
+#slideshow .box.image{
+	background-size: 100% 100%;
+}
+#slideshow .box.button{
+	width: 300px;
+    height: 20px;
+    padding: 40px 0;
+	background-image: url(sprites/button_large.png);
+	background-size: 100% auto;
+	text-align: center;
+}
+#slideshow .box.button:hover{
+	background-position: 0 -100px;
+}
 
 /* NAVIGATION */
 #navigation{

slides/index.html

@@ -51,11 +51,12 @@ Cursor is allowed to flow EVERYWHERE though...
 
 <script src="js/slideshow/Slideshow.js"></script>
 <script src="js/slideshow/Pencil.js"></script>
+<script src="js/slideshow/Boxes.js"></script>
 
 <script src="js/sim/Peep.js"></script>
 <script src="js/sim/Connection.js"></script>
 <script src="js/sim/ConnectorCutter.js"></script>
-<!--script src="js/sim/Game.js"></script-->
+<!--script src="js/sim/_Game.js"></script-->
 <script src="js/sim/Simulations.js"></script>
 
 <script src="js/chapters/0_Introduction.js"></script>
@@ -87,11 +88,21 @@ herp derp herp derp
 </words>
 
 <!-- 1. Networks -->
-<words id="_1a">
-herp derp herp derp herp derp
+<words id="_1_tutorial_start">
+blah blah blah blah blah<br>
+let's make a network of friends!
 </words>
-<words id="_1b">
-herp derp herp derp herp derp
+<words id="_1_tutorial_connect">
+draw to connect
+</words>
+<words id="_1_tutorial_disconnect">
+scratch to&nbsp;&nbsp;&nbsp;disconnect
+</words>
+<words id="_1_tutorial_end">
+feel free to play around! when you're done,<br>
+</words>
+<words id="_1_tutorial_next">
+let's continue &rarr;
 </words>
 
 <!-- 2. Simple Contagions -->

slides/js/chapters/0_Introduction.js

@@ -1,14 +1,6 @@
 // 0 - INTRODUCTION
 SLIDES.push(
 {
-	chapter: "Introduction",
-	boxes:[
-		{words:"_0a", x:20, y:70, w:300, h:200}
-	]
-},
-{
-	boxes: [
-		{words:"_0b", x:300, y:70, w:250, h:200}
-	]
+	chapter: "Introduction"
 }
 );

slides/js/chapters/1_Networks.js

@@ -1,22 +1,123 @@
-// 0 - INTRODUCTION
+// 1 - NETWORKS
 SLIDES.push(
+
+// PLAY AROUND: how to connect & disconnect
 {
+
 	chapter: "Networks",
-	boxes:[
-		{words:"_1a", x:280, y:0, w:400, align:"center"}
-	],
-	sims:[
+
+	clear:true,
+	add:[
+
+		// The top instructions
 		{
-			x: 0,
-			y: 10,
+			type:"box",
+			text:"_1_tutorial_start", x:280, y:0, w:400, h:70, align:"center"
+		},
+
+		// The fullscreen simulation
+		{
+			type:"sim",
+			x:0, y:10,
 			fullscreen: true,
-			network: {"contagion":0,"peeps":[[408,87,0],[340,472,0],[285,402,0],[339,76,0],[214,266,0],[219,181,0],[594,146,0],[256,339,0],[273,114,0],[519,137,0],[450,163,0],[635,278,0],[640,199,0],[508,422,0],[438,445,0],[588,360,0],[858,39,0],[902,137,0],[890,344,0],[922,242,0],[390,299,1]],"connections":[[1,2],[2,7],[7,4],[4,5],[5,8],[8,3],[3,0],[0,10],[9,6],[9,10],[6,12],[12,11],[11,15],[15,13],[13,14],[14,1]]},
-			onupdate: function(sim){
-				if(sim.connections.length>5){
-					//console.log("WIN");
-				}
+			network: {"contagion":0,"peeps":[[44,184,0],[155,215,0],[237,105,0],[309,213,0],[646,211,0],[328,305,0],[629,308,0],[417,111,0],[539,375,0],[216,299,0],[107,311,0],[-61,220,0],[87,452,0],[733,147,0],[760,293,0],[753,448,0],[744,46,0],[134,33,0],[929,181,0],[848,111,0],[1013,330,0],[880,269,0],[538,128,0],[208,391,0],[853,356,0]],"connections":[[5,6]]}
+		},
+
+		// "Connect" instruction (words & picture)
+		{
+			type:"box",
+			id:"connect_words",
+			text:"_1_tutorial_connect", x:280, y:183, w:400, align:"center", color:"#ccc"
+		},
+		{
+			type:"box",
+			id:"connect_pic",
+			img:"sprites/tutorial_connect.png", x:330, y:150, w:300, h:100
+		},
+
+		// "Disconnect" instruction (words & picture)
+		{
+			type:"box",
+			id:"disconnect_words",
+			text:"_1_tutorial_disconnect", x:280, y:280, w:400, align:"center", color:"#ccc"
+		},
+		{
+			type:"box",
+			id:"disconnect_pic",
+			img:"sprites/tutorial_disconnect.png", x:327, y:245, w:300, h:100
+		},
+
+		// The bottom instructions & button (hidden at first)
+		{
+			type:"box",
+			id:"end_words",
+			text:"_1_tutorial_end", x:230, y:425, w:500, h:70, align:"center",
+			hidden:true
+		},
+		{
+			type:"box",
+			id:"end_button",
+			button:"large", wiggle:true,
+			text:"_1_tutorial_next", x:330, y:440,
+			hidden:true,
+			onclick:function(){
+				slideshow.next();
 			}
+		},
+
+	],
+
+	// Logic to fade in/out words & stuff
+	onupdate:function(slideshow, state){
+
+		// Count number of connections this & last time
+		var sim = slideshow.simulations.sims[0];
+		var numConnections = sim.connections.length;
+		if(state.lastConnections===undefined) state.lastConnections=numConnections;
+		state.currConnections = numConnections;
+
+		// SHOW/HIDE INSTRUCTIONS
+		var boxes = slideshow.boxes;
+		// If connections went UP, hide "connect" instructions
+		if(state.currConnections > state.lastConnections){
+			state.canConnect = true;
+			boxes.hideChildByID("connect_words");
+			boxes.hideChildByID("connect_pic");
 		}
+		// If connections went DOWN, hide "connect" instructions
+		if(state.currConnections < state.lastConnections){
+			state.canDisconnect = true;
+			boxes.hideChildByID("disconnect_words");
+			boxes.hideChildByID("disconnect_pic");
+		}
+		// If did both, show end
+		if(state.canConnect && state.canDisconnect){
+			boxes.showChildByID("end_words");
+			boxes.showChildByID("end_button");
+		}
+
+		// update # of connections in state
+		state.lastConnections = state.currConnections;
+
+	}
+
+},
+
+// PLAY AROUND: how the "threshold" model workds
+{
+	clear:true,
+	add:[
 	]
+},
+
+// PUZZLE: The "Majority Illusion" puzzle
+{
+	clear:true
+},
+
+// post-puzzle ramble
+{
+	clear:true
 }
+
 );

slides/js/lib/helpers.js

@@ -41,3 +41,8 @@ function createCanvas(canvas, width, height){
 function cloneObject(obj){
 	return JSON.parse(JSON.stringify(obj));
 }
+
+// Get words
+function getWords(wordsID){
+	return $("words#"+wordsID).innerHTML;
+}

slides/js/main.js

@@ -1,7 +1,6 @@
 window.onload = function(){
 
 	// Setting up the main stuff
-	window.simulations = new Simulations();
 	window.slideshow = new Slideshow();
 	window.pencil = new Pencil();
 
@@ -12,13 +11,12 @@ window.onload = function(){
 	function update(){
 
 		// Update
-		simulations.update();
 		slideshow.update();
 		pencil.update();
 		Mouse.update();
 
 		// Draw
-		simulations.draw();
+		slideshow.draw();
 		pencil.draw();
 		
 		window.requestAnimationFrame(update);

slides/js/sim/Simulations.js

@@ -19,16 +19,16 @@ function Simulations(){
 			self.dom.removeChild(sim.canvas);
 			sim.kill();
 		});
+		self.sims = [];
 	};
 
-	// Show Sims
-	self.showSims = function(simConfigs){
-		self.clear();
-		simConfigs.forEach(function(simConfig){
-			var sim = new Sim(simConfig);
-			self.dom.appendChild(sim.canvas);
-			self.sims.push(sim);
-		});
+	// Add Sims
+	self.add = function(config){
+		config = cloneObject(config);
+		config.container = self;
+		var sim = new Sim(config);
+		self.dom.appendChild(sim.canvas);
+		self.sims.push(sim);
 	};
 
 	// Update
@@ -52,12 +52,13 @@ function Sim(config){
 	var self = this;
 	self.config = config;
 	self.networkConfig = config.network;
+	self.container = config.container;
 
 	// Canvas
 	self.fullscreenOffset = {x:0, y:0};
 	if(config.fullscreen){
 		var container = $("#simulations_container");
-		var simOffset = simulations.dom.getBoundingClientRect();
+		var simOffset = self.container.dom.getBoundingClientRect();
 		self.canvas = createCanvas(container.clientWidth, container.clientHeight);
 		self.canvas.style.left = -simOffset.x;
 		self.canvas.style.top = -simOffset.y;

slides/js/slideshow/Boxes.js

@@ -0,0 +1,84 @@
+/******************************
+
+Boxes of HTML. With words and pictures!
+
+******************************/
+
+function Boxes(){
+
+	var self = this;
+	self.dom = $("#slideshow");
+
+	self.boxes = [];
+
+	// Clear
+	self.clear = function(){
+		self.boxes.forEach(function(box){
+			self.dom.removeChild(box);
+		});
+		self.boxes = [];
+	};
+
+	// Add Box
+	self.add = function(config){
+
+		// Add to DOM
+		var box = document.createElement("div");
+		box.className = "box";
+		self.dom.appendChild(box);
+
+		// Standard box properties...
+		if(config.id) box.id = config.id;
+		if(config.x) box.style.left = config.x;
+		if(config.y) box.style.top = config.y;
+		if(config.w) box.style.width = config.w;
+		if(config.h) box.style.height = config.h;
+		if(config.hidden) box.style.display = "none";
+
+		// words:
+		if(config.text){
+			box.innerHTML = getWords(config.text);
+			if(config.align) box.style.textAlign = config.align;
+			if(config.color) box.style.color = config.color;
+		}
+
+		// pics:
+		if(config.img){
+			box.classList.add("image");
+			box.style.backgroundImage = "url("+config.img+")"
+		}
+
+		// button:
+		if(config.button){
+			box.classList.add("button");
+			if(config.onclick) box.onclick = config.onclick;
+		}
+
+		// Add to array
+		self.boxes.push(box);
+
+	};
+
+	// Update & Draw... nothing
+	self.update = function(){};
+	self.draw = function(){};
+
+	///////////////////////
+	// HELPERS AND STUFF //
+	///////////////////////
+
+	self.getChildByID = function(id){
+		return self.boxes.find(function(box){
+			return box.id==id;
+		});
+	};
+	self.showChildByID = function(id){
+		var toShow = self.getChildByID(id);
+		toShow.style.display = "block";
+	};
+	self.hideChildByID = function(id){
+		var toHide = self.getChildByID(id);
+		toHide.style.display = "none";
+	};
+
+}

slides/js/slideshow/Slideshow.js

@@ -15,33 +15,39 @@ function Slideshow(){
 	// The DOM & properties...
 	self.dom = $("#slideshow");
 	self.slideIndex = 0;
+	self.currentSlide = null;
+	self.currentState = null;
+
+	// My stuff...
+	self.boxes = new Boxes();
+	self.simulations = new Simulations();
 	
 	// GOTO and NEXT
 	self.goto = function(index){
 		
 		self.slideIndex = index;
-		var slide = SLIDES[index];
+		self.currentSlide = SLIDES[self.slideIndex];
+		var slide = self.currentSlide;
 
-		// Clear DOM
-		self.clear();
+		// Clear?
+		if(slide.clear) self.clear();
 
-		// Show simulations
-		slide.sims = slide.sims || [];
-		simulations.showSims(slide.sims);
-
-		// Add boxes
-		slide.boxes = slide.boxes || [];
-		slide.boxes.forEach(function(box){
-			var boxDOM = document.createElement("div");
-			boxDOM.className = "word_box";
-			if(box.words) boxDOM.innerHTML = $("words#"+box.words).innerHTML;
-			if(box.x) boxDOM.style.left = box.x;
-			if(box.y) boxDOM.style.top = box.y;
-			if(box.w) boxDOM.style.width = box.w;
-			if(box.h) boxDOM.style.height = box.h;
-			self.dom.appendChild(boxDOM);
+		// Add stuff
+		slide.add.forEach(function(childConfig){
+			switch(childConfig.type){
+				case "box":
+					self.boxes.add(childConfig);
+					break;
+				case "sim":
+					self.simulations.add(childConfig);
+					break;
+			}
 		});
 
+		// On start (if any)
+		self.currentState = {};
+		if(slide.onstart) slide.onstart(self, self.currentState);
+
 	};
 	self.gotoChapter = function(chapterID){
 		var index = SLIDES.findIndex(function(slide){
@@ -55,11 +61,21 @@ function Slideshow(){
 
 	// Clear out the DOM
 	self.clear = function(){
+		self.boxes.clear();
+		self.simulations.clear();
 		self.dom.innerHTML = "";
 	};
 
 	// Update
 	self.update = function(){
+		var slide = self.currentSlide;
+		self.simulations.update();
+		if(slide.onupdate) slide.onupdate(self, self.currentState);
 	};
 
+	// Draw
+	self.draw = function(){
+		self.simulations.draw();
+	}
+
 }