a whole bunch of crossbrowser and resizeable stuff

css/index.css

@@ -88,12 +88,13 @@ b, strong{
 			    left 0.3s ease-in-out,
 			    top 0.3s ease-in-out;
 }
+
 #scratch{
+	position: absolute;
+	cursor: none;
 	display: none;
 	pointer-events: none;
-	background-image: url(../sprites/scratch.png); 
+	width: 100%; height: 100%;
-	background-size: 200% 2000%;
-    background-position: 0% 0%;
 }
 
 /* Skip */

index.html

@@ -16,22 +16,23 @@ MY "WHY" FOR MAKING THIS:
 
 	<!-- TO TRANSLATE: "title", "description" -->
 	<title>The Wisdom and/or Madness of Crowds</title>
-	<meta name="description" content="blah_blah_blah_blah_blah"/>
+	<meta name="description" content="an interactive guide to human networks"/>
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
 	<meta content="utf-8" http-equiv="encoding">
 	<meta charset="utf-8">
+	<meta name="viewport" content="width=960, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--960, max-->
 	<link rel="icon" type="image/png" href="favicon.png">
 
 	<!-- TO TRANSLATE: "name", "description" -->
 	<meta itemprop="name" content="The Wisdom and/or Madness of Crowds">
-	<meta itemprop="description" content="blah_blah_blah_blah_blah">
+	<meta itemprop="description" content="an interactive guide to human networks">
 	<meta itemprop="image" content="http://ncase.me/crowds/social/thumbnail.png">
 
 	<!-- TO TRANSLATE: "name", "description" -->
 	<meta name="twitter:card" content="summary_large_image">
 	<meta name="twitter:site" content="@ncasenmare">
 	<meta name="twitter:title" content="The Wisdom and/or Madness of Crowds">
-	<meta name="twitter:description" content="blah_blah_blah_blah_blah">
+	<meta name="twitter:description" content="an interactive guide to human networks">
 	<meta name="twitter:creator" content="@ncasenmare">
 	<meta name="twitter:image" content="http://ncase.me/crowds/social/thumbnail.png">
 
@@ -40,7 +41,7 @@ MY "WHY" FOR MAKING THIS:
 	<meta property="og:type" content="website">
 	<meta property="og:url" content="http://ncase.me/crowds/">
 	<meta property="og:image" content="http://ncase.me/crowds/social/thumbnail.png">
-	<meta property="og:description" content="blah_blah_blah_blah_blah">
+	<meta property="og:description" content="an interactive guide to human networks">
 
 	<!-- Styles -->
 	<link rel="stylesheet" type="text/css" href="css/index.css">
@@ -62,7 +63,7 @@ MY "WHY" FOR MAKING THIS:
 		</div>
 
 		<!-- Scratch Transition -->
-		<div id="scratch"></div>
+		<canvas id="scratch" width="711" height="400"></canvas>
 
 		<!-- Skip -->
 		<div id="skip">skip &gt;</div>

js/lib/Mouse.js

@@ -43,6 +43,14 @@ function _touchWrapper(callback){
 	};
 }
 
+// ALSO DON'T SCROLL WHEN TOUCH
+/*document.addEventListener("touchstart", function(e){
+    e.preventDefault(); 
+},false);
+document.addEventListener("touchmove", function(e){
+    e.preventDefault(); 
+},false);*/
+
 // INIT
 Mouse.init = function(target){
 

js/lib/Sprite.js

@@ -14,8 +14,7 @@ function Sprite(config){
 	self.rotation = 0; // radians
 
 	// The image!
-	self.image = new Image();
+	self.image = IMAGES[config.img];
-	self.image.src = config.src;
 
 	// Frames
 	self.currentFrame = 0;

js/lib/helpers.js

@@ -184,4 +184,12 @@ function _getBoundingClientRect(dom){
 	if(!bounds.x) bounds.x = bounds.left; // crossbrowser crap
 	if(!bounds.y) bounds.y = bounds.top; // crossbrowser crap
 	return bounds;
+}
+function _stopPropButton(button){
+	button.onmousedown = function(event){
+		event.stopPropagation();
+	};
+	button.ontouchstart = function(event){
+		event.stopPropagation();
+	};
 }

js/main.js

@@ -1,5 +1,16 @@
 window.onload = function(){
 
+	// Start Preloading!
+	publish("prepreload");
+
+}
+
+subscribe("prepreload/done", function(){
+
+	// Bye Pre-Preloader!
+	var pre_preloader = $("#pre_preloader");
+	pre_preloader.parentNode.removeChild(pre_preloader);
+
 	// Setting up the main stuff
 	window.slideshow = new Slideshow();
 	window.pencil = new Pencil();
@@ -28,10 +39,14 @@ window.onload = function(){
 	}
 	window.requestAnimationFrame(update);
 
-	// Start Preloading!
+	// Go to THE SPLASH
-	publish("prepreload");
+	slideshow.gotoChapter("Preloader");
+	/*
+	slideshow.gotoChapter("Credits");
+	$("#navigation").style.display = "block";
+	*/
 
-}
+});
 
 subscribe("START", function(){
 
@@ -45,11 +60,13 @@ subscribe("START", function(){
 	$("#navigation").style.display = "block";
 
 	// Show Skip Button
-	$("#skip").style.display = "block";
+	var skippy = $("#skip");
-	$("#skip").onclick = function(){
+	skippy.style.display = "block";
+	skippy.onclick = function(){
 		publish("sound/button");
 		slideshow.next();
 	};
+	_stopPropButton(skippy);
 
 	// Introduction
 	slideshow.next();

js/sim/Connection.js

@@ -10,7 +10,7 @@ function Connection(config){
 
 	// Line Sprite
 	self.sprite = new Sprite({
-		src: "sprites/line.png",
+		img: "line",
 		frames:1, sw:300, sh:20,
 	});
 	self.sprite.pivotX = 2.8;
@@ -18,7 +18,7 @@ function Connection(config){
 
 	// Dot Sprite
 	self.dotSprite = new Sprite({
-		src: "sprites/peeps.png",
+		img: "peeps",
 		frames:6, sw:200, sh:200,
 	});
 	self.dotSprite.pivotX = 100;

js/sim/Peep.js

@@ -150,7 +150,7 @@ function Peep(config){
 	// Body Sprite
 	var _initSpriteScale = 0.3;
 	self.sprite = new Sprite({
-		src: "sprites/peeps.png",
+		img: "peeps",
 		frames:6, sw:200, sh:200,
 	});
 	self.sprite.pivotX = 100;
@@ -159,7 +159,7 @@ function Peep(config){
 
 	// Prop Sprite
 	self.propSprite = new Sprite({
-		src: "sprites/peeps.png",
+		img: "peeps",
 		frames:6, sw:200, sh:200,
 	});
 	self.propSprite.pivotX = 100;

js/sim/Simulations.js

@@ -109,6 +109,13 @@ function Simulations(){
 
 }
 
+// On resize, adjust the fullscreen sim (if any).
+window.addEventListener("resize", function(){
+	if(slideshow.simulations.sims.length>0){
+		slideshow.simulations.sims[0].resize();
+	}
+}, false);
+
 function Sim(config){
 
 	var self = this;
@@ -131,14 +138,12 @@ function Sim(config){
 	// Canvas
 	if(config.fullscreen){
 		var container = $("#simulations_container");
-		var simOffset = _getBoundingClientRect(self.container.dom);
 		self.canvas = createCanvas(container.clientWidth, container.clientHeight);
-		self.canvas.style.left = -simOffset.x;
-		self.canvas.style.top = -simOffset.y;
 	}else{
-		self.canvas = createCanvas(config.width||500, config.height||500);
+		alert("this code should not run. if it does, something bad has happened.");
+		/*(self.canvas = createCanvas(config.width||500, config.height||500);
 		self.canvas.style.left = config.x || 0;
-		self.canvas.style.top = config.y || 0;
+		self.canvas.style.top = config.y || 0;*/
 	}
 	//self.canvas.style.border = "1px solid #ccc";
 	self.ctx = self.canvas.getContext('2d');
@@ -149,6 +154,26 @@ function Sim(config){
 	// Connector-Cutter
 	self.connectorCutter = new ConnectorCutter({sim:self});
 
+	// Resize
+	var simOffset;
+	self.resize = function(){
+
+		var container = $("#simulations_container");
+		simOffset = _getBoundingClientRect(self.container.dom);
+		self.canvas.style.left = -simOffset.x;
+		self.canvas.style.top = -simOffset.y;
+
+		// Set difference in width & height
+		var width = container.clientWidth;
+		var height = container.clientHeight;
+		self.canvas.width = width*2;
+		self.canvas.height = height*2;
+		self.canvas.style.width = width;
+		self.canvas.style.height = height;
+
+	};
+	self.resize();
+
 	// Networks... clear/init
 	self.clear = function(){
 		self.peeps = [];
@@ -339,7 +364,7 @@ function Sim(config){
 
 	// Confetti Sprite
 	self.confettiSprite = new Sprite({
-		src: "sprites/confetti.png",
+		img: "confetti",
 		frames:3, sw:100, sh:50,
 	});
 	self.confettiSprite.pivotX = 50;

js/slideshow/Boxes.js

@@ -88,12 +88,7 @@ function Boxes(){
 			};
 
 			// to prevent sim from resetting...
-			nextButton.onmousedown = function(event){
+			_stopPropButton(nextButton);
-				event.stopPropagation();
-			};
-			nextButton.ontouchstart = function(event){
-				event.stopPropagation();
-			};
 
 			// Replace it in parent!
 			next.parentNode.replaceChild(nextButton, next);
@@ -107,6 +102,7 @@ function Boxes(){
 				publish("reference/show",[id]);
 				publish("sound/button");
 			};
+			_stopPropButton(ref);
 		});
 
 		// Bonus boxes...
@@ -117,6 +113,7 @@ function Boxes(){
 				publish("bonus/show", [bon.id]);
 				publish("sound/button");
 			};
+			_stopPropButton(bon);
 		});
 
 		// Replace icons

js/slideshow/Modal.js

@@ -48,6 +48,8 @@ window.Modal = {
 
 $("#modal_bg").onclick = Modal.hide;
 $("#modal_close").onclick = Modal.hide;
+_stopPropButton($("#modal_bg"));
+_stopPropButton($("#modal_close"));
 
 // Show big collected modals
 subscribe("modal/bonus", function(){

js/slideshow/Navigation.js

@@ -30,6 +30,7 @@ function Navigation(){
 					publish("sound/button");
 					slideshow.gotoChapter(chapter);
 				};
+				_stopPropButton(nav);
 			})(nav, chapter);
 		}
 
@@ -41,6 +42,7 @@ function Navigation(){
 					publish("sound/button");
 					publish("modal/"+modal);
 				};
+				_stopPropButton(nav);
 			})(nav, modal);
 		}
 
@@ -105,5 +107,6 @@ function Navigation(){
 			$("#sound").setAttribute("mute","yes");
 		}
 	};
+	_stopPropButton($("#sound"));
 
 }

js/slideshow/Pencil.js

@@ -14,11 +14,11 @@ function Pencil(){
 
 	// Sprites
 	self.sprite = new Sprite({
-		src: "sprites/pencil.png",
+		img: "pencil",
 		frames:3, sw:200, sh:200,
 	});
 	self.toolsSprite = new Sprite({
-		src: "sprites/sandbox_tools.png",
+		img: "sandbox_tools",
 		frames:6, sw:200, sh:200,
 	});
 	self.sprite.pivotX = self.toolsSprite.pivotX = 0;

js/slideshow/Preloader.js

@@ -18,15 +18,7 @@ subscribe("prepreload", function(){
 
 	],function(progress){
 		if(progress==1){
-			var pre_preloader = $("#pre_preloader");
+			publish("prepreload/done");
-			pre_preloader.parentNode.removeChild(pre_preloader);
-			
-			slideshow.gotoChapter("Preloader");
-			/*
-			slideshow.gotoChapter("Credits");
-			$("#navigation").style.display = "block";
-			*/
-
 			publish("preload");
 		}
 	});

js/slideshow/SandboxUI.js

@@ -162,6 +162,7 @@ function ChooseOne(config){
 			self.highlight(buttonDOM); // highlight
 			config.oninput(value); // input
 		};
+		_stopPropButton(buttonDOM);
 
 	});
 

js/slideshow/Scratch.js

@@ -1,7 +1,12 @@
 function Scratch(){
 
 	var self = this;
-	self.dom = $("#scratch");
+	self.canvas = $("#scratch");
+	self.ctx = self.canvas.getContext("2d");
+
+	// 711 x 400
+	var w = 711;
+	var h = 400;
 
 	self.scratchIn = function(){
 
@@ -10,7 +15,7 @@ function Scratch(){
 
 		// anim
 		self.startUpdateLoop(false, function(){
-			self.dom.style.display = "none";
+			self.canvas.style.display = "none";
 		});
 		
 	};
@@ -21,23 +26,32 @@ function Scratch(){
 		SOUNDS.scratch_in.play();
 
 		// anim
-		self.dom.style.display = "block";
+		self.canvas.style.display = "block";
 		self.startUpdateLoop(true);
 
 	};
 
 	self.startUpdateLoop = function(out, callback){
 		var frame = 0;
-		var xOffset = out ? 0 : -100;
+		var xOffset = out ? 0 : w;
 		var handle = subscribe("update", function(){
-			var yOffset = Math.floor(frame)*(-100);
+			var yOffset = Math.floor(frame)*h;
-			self.dom.style.backgroundPosition = xOffset+"% "+yOffset+"%";
+
+			// Redraw canvas
+			self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
+			self.ctx.drawImage(
+				IMAGES.scratch,
+				xOffset, yOffset, w, h,
+				0, 0, w, h);
+			
+			// Staaaahhhhhp
 			if(frame>19){
 				unsubscribe(handle);
 				if(callback) callback();
 				return;
 			}
 			frame+=0.5;
+
 		});
 	};
 

js/slideshow/SimUI.js

@@ -8,12 +8,6 @@ function SimUI(container, color){
 	var startButton = document.createElement("div");
 	startButton.id = "start_button";
 	self.container.appendChild(startButton);
-	startButton.onmousedown = function(event){
-		event.stopPropagation();
-	};
-	startButton.ontouchstart = function(event){
-		event.stopPropagation();
-	};
 	startButton.onclick = function(event){
 		publish("sound/button");
 		if(!Simulations.IS_RUNNING){
@@ -24,6 +18,7 @@ function SimUI(container, color){
 			publish("sim/stop");
 		}
 	};
+	_stopPropButton(startButton);
 
 	// Update button UI
 	var _updateButtonUI = function(){