a whole bunch of crossbrowser and resizeable stuff
This commit is contained in:
parent
1ef8e92c3f
commit
587c54045c
|
@ -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);
|
||||
background-size: 200% 2000%;
|
||||
background-position: 0% 0%;
|
||||
width: 100%; height: 100%;
|
||||
}
|
||||
|
||||
/* Skip */
|
||||
|
|
11
index.html
11
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 ></div>
|
||||
|
|
|
@ -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){
|
||||
|
||||
|
|
|
@ -14,8 +14,7 @@ function Sprite(config){
|
|||
self.rotation = 0; // radians
|
||||
|
||||
// The image!
|
||||
self.image = new Image();
|
||||
self.image.src = config.src;
|
||||
self.image = IMAGES[config.img];
|
||||
|
||||
// Frames
|
||||
self.currentFrame = 0;
|
||||
|
|
|
@ -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();
|
||||
};
|
||||
}
|
27
js/main.js
27
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!
|
||||
publish("prepreload");
|
||||
// Go to THE SPLASH
|
||||
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";
|
||||
$("#skip").onclick = function(){
|
||||
var skippy = $("#skip");
|
||||
skippy.style.display = "block";
|
||||
skippy.onclick = function(){
|
||||
publish("sound/button");
|
||||
slideshow.next();
|
||||
};
|
||||
_stopPropButton(skippy);
|
||||
|
||||
// Introduction
|
||||
slideshow.next();
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -88,12 +88,7 @@ function Boxes(){
|
|||
};
|
||||
|
||||
// to prevent sim from resetting...
|
||||
nextButton.onmousedown = function(event){
|
||||
event.stopPropagation();
|
||||
};
|
||||
nextButton.ontouchstart = function(event){
|
||||
event.stopPropagation();
|
||||
};
|
||||
_stopPropButton(nextButton);
|
||||
|
||||
// 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
|
||||
|
|
|
@ -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(){
|
||||
|
|
|
@ -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"));
|
||||
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -18,15 +18,7 @@ subscribe("prepreload", function(){
|
|||
|
||||
],function(progress){
|
||||
if(progress==1){
|
||||
var pre_preloader = $("#pre_preloader");
|
||||
pre_preloader.parentNode.removeChild(pre_preloader);
|
||||
|
||||
slideshow.gotoChapter("Preloader");
|
||||
/*
|
||||
slideshow.gotoChapter("Credits");
|
||||
$("#navigation").style.display = "block";
|
||||
*/
|
||||
|
||||
publish("prepreload/done");
|
||||
publish("preload");
|
||||
}
|
||||
});
|
||||
|
|
|
@ -162,6 +162,7 @@ function ChooseOne(config){
|
|||
self.highlight(buttonDOM); // highlight
|
||||
config.oninput(value); // input
|
||||
};
|
||||
_stopPropButton(buttonDOM);
|
||||
|
||||
});
|
||||
|
||||
|
|
|
@ -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);
|
||||
self.dom.style.backgroundPosition = xOffset+"% "+yOffset+"%";
|
||||
var yOffset = Math.floor(frame)*h;
|
||||
|
||||
// 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;
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -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(){
|
||||
|
|
Loading…
Reference in New Issue