From 587c54045c9edb888cd8b829055def04aab718ef Mon Sep 17 00:00:00 2001 From: Nicky Case Date: Tue, 24 Apr 2018 14:12:38 -0400 Subject: [PATCH] a whole bunch of crossbrowser and resizeable stuff --- css/index.css | 7 ++++--- index.html | 11 ++++++----- js/lib/Mouse.js | 8 ++++++++ js/lib/Sprite.js | 3 +-- js/lib/helpers.js | 8 ++++++++ js/main.js | 27 ++++++++++++++++++++++----- js/sim/Connection.js | 4 ++-- js/sim/Peep.js | 4 ++-- js/sim/Simulations.js | 37 +++++++++++++++++++++++++++++++------ js/slideshow/Boxes.js | 9 +++------ js/slideshow/Modal.js | 2 ++ js/slideshow/Navigation.js | 3 +++ js/slideshow/Pencil.js | 4 ++-- js/slideshow/Preloader.js | 10 +--------- js/slideshow/SandboxUI.js | 1 + js/slideshow/Scratch.js | 26 ++++++++++++++++++++------ js/slideshow/SimUI.js | 7 +------ 17 files changed, 117 insertions(+), 54 deletions(-) diff --git a/css/index.css b/css/index.css index b51e163..72d61ff 100644 --- a/css/index.css +++ b/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); - background-size: 200% 2000%; - background-position: 0% 0%; + width: 100%; height: 100%; } /* Skip */ diff --git a/index.html b/index.html index 005614b..3b853d1 100644 --- a/index.html +++ b/index.html @@ -16,22 +16,23 @@ MY "WHY" FOR MAKING THIS: The Wisdom and/or Madness of Crowds - + + - + - + @@ -40,7 +41,7 @@ MY "WHY" FOR MAKING THIS: - + @@ -62,7 +63,7 @@ MY "WHY" FOR MAKING THIS: -
+ diff --git a/js/lib/Mouse.js b/js/lib/Mouse.js index ab45a62..0e732e1 100644 --- a/js/lib/Mouse.js +++ b/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){ diff --git a/js/lib/Sprite.js b/js/lib/Sprite.js index b056820..f40bcf8 100644 --- a/js/lib/Sprite.js +++ b/js/lib/Sprite.js @@ -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; diff --git a/js/lib/helpers.js b/js/lib/helpers.js index 85d5b2c..2312f5b 100644 --- a/js/lib/helpers.js +++ b/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(); + }; } \ No newline at end of file diff --git a/js/main.js b/js/main.js index 0cd9255..ac11230 100644 --- a/js/main.js +++ b/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(); diff --git a/js/sim/Connection.js b/js/sim/Connection.js index f656feb..85fb476 100644 --- a/js/sim/Connection.js +++ b/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; diff --git a/js/sim/Peep.js b/js/sim/Peep.js index 03308a4..a28ea9d 100644 --- a/js/sim/Peep.js +++ b/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; diff --git a/js/sim/Simulations.js b/js/sim/Simulations.js index 440da5c..02ddb0d 100644 --- a/js/sim/Simulations.js +++ b/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; diff --git a/js/slideshow/Boxes.js b/js/slideshow/Boxes.js index 00e3fb5..37485d2 100644 --- a/js/slideshow/Boxes.js +++ b/js/slideshow/Boxes.js @@ -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 diff --git a/js/slideshow/Modal.js b/js/slideshow/Modal.js index 1562908..9daf742 100644 --- a/js/slideshow/Modal.js +++ b/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(){ diff --git a/js/slideshow/Navigation.js b/js/slideshow/Navigation.js index 01e0678..6333a4f 100644 --- a/js/slideshow/Navigation.js +++ b/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")); } \ No newline at end of file diff --git a/js/slideshow/Pencil.js b/js/slideshow/Pencil.js index 14dde9f..8404079 100644 --- a/js/slideshow/Pencil.js +++ b/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; diff --git a/js/slideshow/Preloader.js b/js/slideshow/Preloader.js index 7624373..7d2681f 100644 --- a/js/slideshow/Preloader.js +++ b/js/slideshow/Preloader.js @@ -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"); } }); diff --git a/js/slideshow/SandboxUI.js b/js/slideshow/SandboxUI.js index 3aef802..afad4f7 100644 --- a/js/slideshow/SandboxUI.js +++ b/js/slideshow/SandboxUI.js @@ -162,6 +162,7 @@ function ChooseOne(config){ self.highlight(buttonDOM); // highlight config.oninput(value); // input }; + _stopPropButton(buttonDOM); }); diff --git a/js/slideshow/Scratch.js b/js/slideshow/Scratch.js index c25b29c..b0d4951 100644 --- a/js/slideshow/Scratch.js +++ b/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); - 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; + }); }; diff --git a/js/slideshow/SimUI.js b/js/slideshow/SimUI.js index 48a7979..ec9d7c5 100644 --- a/js/slideshow/SimUI.js +++ b/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(){