2018-03-27 17:39:08 +00:00
|
|
|
/******************************************
|
|
|
|
|
|
|
|
THE SLIDESHOW
|
|
|
|
- background: fullscreen iframe (so can draw everywhere)
|
|
|
|
- foreground: words & pictures
|
|
|
|
|
|
|
|
******************************************/
|
2018-03-26 15:52:43 +00:00
|
|
|
|
|
|
|
var SLIDES = [];
|
|
|
|
|
|
|
|
function Slideshow(){
|
|
|
|
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
// The DOM & properties...
|
|
|
|
self.dom = $("#slideshow");
|
|
|
|
self.slideIndex = 0;
|
2018-03-28 17:12:05 +00:00
|
|
|
self.currentSlide = null;
|
|
|
|
self.currentState = null;
|
|
|
|
|
|
|
|
// My stuff...
|
|
|
|
self.boxes = new Boxes();
|
|
|
|
self.simulations = new Simulations();
|
2018-04-02 17:43:20 +00:00
|
|
|
self.scratch = new Scratch();
|
2018-03-26 15:52:43 +00:00
|
|
|
|
|
|
|
// GOTO and NEXT
|
2018-04-02 17:43:20 +00:00
|
|
|
var _delay = 300;
|
2018-04-06 16:06:55 +00:00
|
|
|
self.IS_TRANSITIONING = false;
|
2018-04-16 15:44:14 +00:00
|
|
|
self.goto = function(index, forceClear){
|
2018-04-06 16:06:55 +00:00
|
|
|
|
|
|
|
// Wait for transition to finish!
|
|
|
|
if(self.IS_TRANSITIONING) return;
|
|
|
|
self.IS_TRANSITIONING = true;
|
2018-03-26 15:52:43 +00:00
|
|
|
|
2018-04-06 16:06:55 +00:00
|
|
|
// Which slide?
|
2018-03-26 15:52:43 +00:00
|
|
|
self.slideIndex = index;
|
2018-04-02 17:43:20 +00:00
|
|
|
var isFirstSlide = (self.currentSlide==null);
|
2018-04-04 15:57:35 +00:00
|
|
|
var slide = SLIDES[self.slideIndex];
|
2018-03-26 15:52:43 +00:00
|
|
|
|
2018-03-28 17:12:05 +00:00
|
|
|
// Clear?
|
2018-04-02 17:43:20 +00:00
|
|
|
var _delayNewSlide = 0;
|
2018-04-16 15:44:14 +00:00
|
|
|
if((slide.clear || forceClear) && !isFirstSlide){
|
2018-04-04 15:57:35 +00:00
|
|
|
_delayNewSlide = 800;
|
2018-04-02 17:43:20 +00:00
|
|
|
self.scratch.scratchOut(); // Scratch out
|
2018-04-03 17:32:26 +00:00
|
|
|
$("#container").removeAttribute("sim_is_running"); // remove that UI
|
2018-04-18 15:25:41 +00:00
|
|
|
Simulations.IS_RUNNING = false; // STAHP
|
2018-04-02 17:43:20 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
_setTimeout(function(){
|
|
|
|
|
|
|
|
// Scratch in?
|
|
|
|
if(_delayNewSlide>0){
|
|
|
|
self.clear();
|
|
|
|
self.scratch.scratchIn(); // Scratch in
|
2018-04-01 16:34:52 +00:00
|
|
|
}
|
|
|
|
|
2018-04-02 17:43:20 +00:00
|
|
|
// Remove stuff
|
|
|
|
slide.remove = slide.remove || [];
|
|
|
|
slide.remove.forEach(function(childConfig){
|
|
|
|
var withFade = true;
|
|
|
|
switch(childConfig.type){
|
|
|
|
case "box":
|
2018-04-16 15:44:14 +00:00
|
|
|
if(self.boxes.getChildByID(childConfig.id)){
|
|
|
|
self.boxes.removeChildByID(childConfig.id, withFade);
|
|
|
|
}
|
2018-04-02 17:43:20 +00:00
|
|
|
break;
|
|
|
|
case "sim":
|
|
|
|
//self.simulations.removeChildByID(childConfig);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Move stuff
|
|
|
|
slide.move = slide.move || [];
|
|
|
|
slide.move.forEach(function(childConfig){
|
|
|
|
switch(childConfig.type){
|
|
|
|
case "box":
|
2018-04-12 19:50:59 +00:00
|
|
|
var box = self.boxes.getChildByID(childConfig.id);
|
|
|
|
box.classList.add("transitionable");
|
|
|
|
var from = {
|
|
|
|
x: parseInt(box.style.left),
|
|
|
|
y: parseInt(box.style.top)
|
|
|
|
};
|
|
|
|
var to = {
|
|
|
|
x: (childConfig.x===undefined) ? from.x : childConfig.x,
|
|
|
|
y: (childConfig.y===undefined) ? from.y : childConfig.y
|
|
|
|
};
|
|
|
|
box.style.left = to.x+"px";
|
|
|
|
box.style.top = to.y+"px";
|
2018-04-02 17:43:20 +00:00
|
|
|
break;
|
|
|
|
case "sim":
|
|
|
|
var sim = self.simulations.getChildByID(childConfig.id);
|
|
|
|
var newPosition = {
|
|
|
|
x: (childConfig.x===undefined) ? sim.config.x : childConfig.x,
|
|
|
|
y: (childConfig.y===undefined) ? sim.config.y : childConfig.y
|
|
|
|
};
|
|
|
|
tweenPosition(sim.config, newPosition);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Add stuff
|
|
|
|
slide.add = slide.add || [];
|
|
|
|
var _delayAdd = ((slide.remove.length + slide.move.length)>0) ? _delay : 0;
|
|
|
|
_setTimeout(function(){
|
|
|
|
var withFade = ((slide.remove.length + slide.move.length)>0);
|
|
|
|
|
|
|
|
slide.add.forEach(function(childConfig){
|
|
|
|
switch(childConfig.type){
|
|
|
|
case "box":
|
|
|
|
self.boxes.add(childConfig, withFade);
|
|
|
|
break;
|
|
|
|
case "sim":
|
2018-04-16 15:44:14 +00:00
|
|
|
if(childConfig.ONLY_IF_IT_DOESNT_ALREADY_EXIST
|
|
|
|
&& self.simulations.sims.length>0){
|
|
|
|
// then nothing
|
|
|
|
}else{
|
|
|
|
self.simulations.add(childConfig, withFade);
|
|
|
|
}
|
2018-04-02 17:43:20 +00:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
}, _delayAdd);
|
|
|
|
|
2018-04-04 15:57:35 +00:00
|
|
|
// I'm the new slide now
|
|
|
|
self.currentSlide = slide;
|
|
|
|
|
2018-04-02 17:43:20 +00:00
|
|
|
// On start (if any)
|
|
|
|
self.currentState = {};
|
|
|
|
if(slide.onstart) slide.onstart(self, self.currentState);
|
|
|
|
|
2018-04-06 16:06:55 +00:00
|
|
|
// Transition done... sorta!
|
|
|
|
_setTimeout(function(){
|
|
|
|
self.IS_TRANSITIONING = false;
|
|
|
|
},800);
|
|
|
|
|
2018-04-02 17:43:20 +00:00
|
|
|
}, _delayNewSlide);
|
2018-03-28 17:12:05 +00:00
|
|
|
|
2018-04-04 15:57:35 +00:00
|
|
|
// Tell everyone it's a new chapter
|
|
|
|
if(slide.chapter && slide.chapter.indexOf("-")<0){ // is chapter and not sub-chapter
|
|
|
|
publish("slideshow/goto/",[slide.chapter]);
|
|
|
|
}
|
|
|
|
|
2018-03-26 15:52:43 +00:00
|
|
|
};
|
2018-04-02 17:43:20 +00:00
|
|
|
var _setTimeout = function(callback, delay){
|
|
|
|
if(delay==0) return callback();
|
|
|
|
else setTimeout(callback, delay);
|
|
|
|
};
|
2018-03-26 15:52:43 +00:00
|
|
|
self.gotoChapter = function(chapterID){
|
|
|
|
var index = SLIDES.findIndex(function(slide){
|
|
|
|
return slide.chapter == chapterID;
|
|
|
|
});
|
2018-04-16 15:44:14 +00:00
|
|
|
self.goto(index, true);
|
2018-03-26 15:52:43 +00:00
|
|
|
};
|
|
|
|
self.next = function(){
|
2018-04-18 21:00:04 +00:00
|
|
|
if(self.slideIndex >= SLIDES.length-1) return; // there's no next
|
2018-03-26 15:52:43 +00:00
|
|
|
self.goto(self.slideIndex+1);
|
|
|
|
};
|
|
|
|
|
|
|
|
// Clear out the DOM
|
|
|
|
self.clear = function(){
|
2018-03-28 17:12:05 +00:00
|
|
|
self.boxes.clear();
|
|
|
|
self.simulations.clear();
|
2018-03-26 15:52:43 +00:00
|
|
|
self.dom.innerHTML = "";
|
2018-04-18 14:51:44 +00:00
|
|
|
pencil.gotoFrame(0);
|
2018-03-26 15:52:43 +00:00
|
|
|
};
|
|
|
|
|
2018-03-27 19:20:22 +00:00
|
|
|
// Update
|
|
|
|
self.update = function(){
|
2018-03-28 17:12:05 +00:00
|
|
|
var slide = self.currentSlide;
|
2018-04-16 15:44:14 +00:00
|
|
|
if(slide){
|
|
|
|
self.simulations.update();
|
|
|
|
if(slide.onupdate) slide.onupdate(self, self.currentState);
|
|
|
|
}
|
2018-03-27 19:20:22 +00:00
|
|
|
};
|
|
|
|
|
2018-03-28 17:12:05 +00:00
|
|
|
// Draw
|
|
|
|
self.draw = function(){
|
|
|
|
self.simulations.draw();
|
|
|
|
}
|
|
|
|
|
2018-03-26 15:52:43 +00:00
|
|
|
}
|
2018-04-20 18:47:58 +00:00
|
|
|
|
|
|
|
////////////////////////////////
|
|
|
|
// BUTTON SOUNDS COZ WHATEVER //
|
|
|
|
////////////////////////////////
|
|
|
|
|
|
|
|
var _BUTTON_SOUND = 0;
|
|
|
|
subscribe("sound/button",function(){
|
|
|
|
_BUTTON_SOUND = (_BUTTON_SOUND+1)%3;
|
|
|
|
SOUNDS["button"+_BUTTON_SOUND].play();
|
|
|
|
});
|