hecka cool sandbox
This commit is contained in:
parent
9261ee1a08
commit
4b456ac54c
53
index.css
53
index.css
|
@ -73,34 +73,77 @@ body{
|
||||||
background-size: 200% 2000%;
|
background-size: 200% 2000%;
|
||||||
background-position: 0% 0%;
|
background-position: 0% 0%;
|
||||||
}
|
}
|
||||||
.sim_button{
|
|
||||||
|
/* Sim UI */
|
||||||
|
.sim_ui{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
}
|
}
|
||||||
.sim_button > div{
|
.sim_ui > div{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #dd4040;
|
background: #dd4040;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.sim_button > #reset_button{
|
.sim_ui > #reset_button{
|
||||||
width: 150px;
|
width: 150px;
|
||||||
left:25px;
|
left:25px;
|
||||||
top:0px;
|
top:0px;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
transition: top 0.3s ease-in-out;
|
transition: top 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
.sim_button > #start_button{
|
.sim_ui > #start_button{
|
||||||
width: 200px;
|
width: 200px;
|
||||||
padding: 0.5em 0;
|
padding: 0.5em 0;
|
||||||
}
|
}
|
||||||
.sim_button[active] > #reset_button{
|
.sim_ui[active] > #reset_button{
|
||||||
top:60px;
|
top:60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Sandbox UI */
|
||||||
|
.sandbox_ui{
|
||||||
|
width: 270px;
|
||||||
|
}
|
||||||
|
.sandbox_ui input[type="range"]{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.choose_one{
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.choose_one > div{
|
||||||
|
float: left;
|
||||||
|
margin: 3px;
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
.choose_one > div[selected]{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.choose_color{
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: url(sprites/peeps.png);
|
||||||
|
background-size: auto 100%;
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
.choose_tool{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 3px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
#sandbox_shortcuts_label{
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
#sandbox_shortcuts{
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5em;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
/* MODAL */
|
/* MODAL */
|
||||||
#modal{
|
#modal{
|
||||||
display: none;
|
display: none;
|
||||||
|
|
49
index.html
49
index.html
|
@ -278,6 +278,53 @@ WIN
|
||||||
<words id="sim_reset">
|
<words id="sim_reset">
|
||||||
↺ reset
|
↺ reset
|
||||||
</words>
|
</words>
|
||||||
|
<words id="sandbox_contagion">
|
||||||
|
Contagion:
|
||||||
|
</words>
|
||||||
|
<words id="sandbox_contagion_simple">
|
||||||
|
simple
|
||||||
|
</words>
|
||||||
|
<words id="sandbox_contagion_complex">
|
||||||
|
complex
|
||||||
|
</words>
|
||||||
|
<words id="sandbox_color_chooser">
|
||||||
|
The Contagion's Color:
|
||||||
|
</words>
|
||||||
|
<words id="sandbox_tool_chooser">
|
||||||
|
Select a tool...
|
||||||
|
</words>
|
||||||
|
|
||||||
|
<words id="sandbox_tool_pencil">
|
||||||
|
Draw Connections
|
||||||
|
</words>
|
||||||
|
<words id="sandbox_tool_add">
|
||||||
|
Add Peep
|
||||||
|
</words>
|
||||||
|
<words id="sandbox_tool_add_infected">
|
||||||
|
Add "Infected" Peep
|
||||||
|
</words>
|
||||||
|
<words id="sandbox_tool_move">
|
||||||
|
Move Peep
|
||||||
|
</words>
|
||||||
|
<words id="sandbox_tool_delete">
|
||||||
|
Delete Peep
|
||||||
|
</words>
|
||||||
|
<words id="sandbox_tool_clear">
|
||||||
|
<b>CLEAR IT ALL</b>
|
||||||
|
</words>
|
||||||
|
|
||||||
|
<words id="sandbox_shortcuts_label">
|
||||||
|
(...or, use keyboard shortcuts!)
|
||||||
|
</words>
|
||||||
|
<words id="sandbox_shortcuts">
|
||||||
|
[1]: Add Peep
|
||||||
|
<br>
|
||||||
|
[2]: Add Infected Peep
|
||||||
|
<br>
|
||||||
|
[Space]: Move Peep
|
||||||
|
<br>
|
||||||
|
[Backspace]: Delete Peep
|
||||||
|
</words>
|
||||||
|
|
||||||
<!-- - - - - - - - - - - - - -->
|
<!-- - - - - - - - - - - - - -->
|
||||||
<!-- BONUS BOXES (footnotes) -->
|
<!-- BONUS BOXES (footnotes) -->
|
||||||
|
@ -312,6 +359,8 @@ WIN
|
||||||
<script src="js/slideshow/Boxes.js"></script>
|
<script src="js/slideshow/Boxes.js"></script>
|
||||||
<script src="js/slideshow/Scratch.js"></script>
|
<script src="js/slideshow/Scratch.js"></script>
|
||||||
<script src="js/slideshow/Navigation.js"></script>
|
<script src="js/slideshow/Navigation.js"></script>
|
||||||
|
<script src="js/slideshow/SimUI.js"></script>
|
||||||
|
<script src="js/slideshow/SandboxUI.js"></script>
|
||||||
|
|
||||||
<script src="js/sim/Peep.js"></script>
|
<script src="js/sim/Peep.js"></script>
|
||||||
<script src="js/sim/Connection.js"></script>
|
<script src="js/sim/Connection.js"></script>
|
||||||
|
|
|
@ -44,7 +44,7 @@ SLIDES.push(
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
x:380, y:165,
|
x:380, y:165,
|
||||||
sim_button:"red"
|
sim_ui:"red"
|
||||||
},
|
},
|
||||||
|
|
||||||
// Outro text
|
// Outro text
|
||||||
|
@ -104,7 +104,7 @@ SLIDES.push(
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
x:380, y:290,
|
x:380, y:290,
|
||||||
sim_button:"red"
|
sim_ui:"red"
|
||||||
},
|
},
|
||||||
|
|
||||||
// Intro text
|
// Intro text
|
||||||
|
|
|
@ -35,7 +35,7 @@ SLIDES.push(
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
x:440, y:225,
|
x:440, y:225,
|
||||||
sim_button:"red"
|
sim_ui:"red"
|
||||||
},
|
},
|
||||||
|
|
||||||
// End text
|
// End text
|
||||||
|
@ -96,7 +96,7 @@ SLIDES.push(
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
x:380, y:290,
|
x:380, y:290,
|
||||||
sim_button:"red"
|
sim_ui:"red"
|
||||||
},
|
},
|
||||||
|
|
||||||
// Intro text
|
// Intro text
|
||||||
|
@ -172,7 +172,7 @@ SLIDES.push(
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
x:380, y:140,
|
x:380, y:140,
|
||||||
sim_button:"red"
|
sim_ui:"red"
|
||||||
},
|
},
|
||||||
|
|
||||||
// Outro text
|
// Outro text
|
||||||
|
|
|
@ -5,6 +5,7 @@ SLIDES.push(
|
||||||
clear:true,
|
clear:true,
|
||||||
|
|
||||||
add:[
|
add:[
|
||||||
|
|
||||||
// The fullscreen simulation
|
// The fullscreen simulation
|
||||||
{
|
{
|
||||||
type:"sim",
|
type:"sim",
|
||||||
|
@ -15,7 +16,23 @@ SLIDES.push(
|
||||||
"peeps":[[443,213,1],[570,309,0],[686,194,0]],
|
"peeps":[[443,213,1],[570,309,0],[686,194,0]],
|
||||||
"connections":[[0,1,0],[1,2,0]]
|
"connections":[[0,1,0],[1,2,0]]
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// The Sandbox UI
|
||||||
|
{
|
||||||
|
type:"box",
|
||||||
|
x:0, y:0,
|
||||||
|
sandbox:true
|
||||||
|
},
|
||||||
|
|
||||||
|
// Simulation UI
|
||||||
|
{
|
||||||
|
type:"box",
|
||||||
|
x:35, y:450,
|
||||||
|
sim_ui:"red"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,7 +44,7 @@ function cloneObject(obj){
|
||||||
|
|
||||||
// Get words
|
// Get words
|
||||||
function getWords(wordsID){
|
function getWords(wordsID){
|
||||||
return $("words#"+wordsID).innerHTML;
|
return $("words#"+wordsID).innerHTML.trim();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove from array
|
// Remove from array
|
||||||
|
|
|
@ -295,7 +295,14 @@ function Sim(config){
|
||||||
|
|
||||||
// Kill
|
// Kill
|
||||||
self.kill = function(){
|
self.kill = function(){
|
||||||
|
|
||||||
self.clear();
|
self.clear();
|
||||||
|
|
||||||
|
// key handlers, too
|
||||||
|
_keyHandlers.forEach(function(_handler){
|
||||||
|
unsubscribe(_handler);
|
||||||
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
///////////////////
|
///////////////////
|
||||||
|
@ -361,8 +368,10 @@ function Sim(config){
|
||||||
};
|
};
|
||||||
|
|
||||||
self.reload = function(){
|
self.reload = function(){
|
||||||
|
var contagionLevel = self.contagion; // hack for sandbox: keep contagion the same
|
||||||
self.STEP = 0;
|
self.STEP = 0;
|
||||||
self.init();
|
self.init();
|
||||||
|
self.contagion = contagionLevel;
|
||||||
};
|
};
|
||||||
|
|
||||||
self.nextStep = function(){
|
self.nextStep = function(){
|
||||||
|
@ -387,7 +396,8 @@ function Sim(config){
|
||||||
|
|
||||||
var _draggingPeep = null;
|
var _draggingPeep = null;
|
||||||
var _draggingOffset = {x:0,y:0};
|
var _draggingOffset = {x:0,y:0};
|
||||||
subscribe("key/down/space",function(){
|
var _keyHandlers = [];
|
||||||
|
_keyHandlers.push(subscribe("key/down/space",function(){
|
||||||
if(!_draggingPeep){ // prevent double-activation
|
if(!_draggingPeep){ // prevent double-activation
|
||||||
var hoveredPeep = self.getHoveredPeep(0);
|
var hoveredPeep = self.getHoveredPeep(0);
|
||||||
if(hoveredPeep){
|
if(hoveredPeep){
|
||||||
|
@ -396,26 +406,26 @@ function Sim(config){
|
||||||
_draggingOffset.y = _draggingPeep.y-self.mouse.y;
|
_draggingOffset.y = _draggingPeep.y-self.mouse.y;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
subscribe("key/up/space",function(){
|
_keyHandlers.push(subscribe("key/up/space",function(){
|
||||||
_draggingPeep = null;
|
_draggingPeep = null;
|
||||||
});
|
}));
|
||||||
subscribe("key/down/1",function(){
|
_keyHandlers.push(subscribe("key/down/1",function(){
|
||||||
_addPeepAtMouse(false);
|
_addPeepAtMouse(false);
|
||||||
});
|
}));
|
||||||
subscribe("key/down/2",function(){
|
_keyHandlers.push(subscribe("key/down/2",function(){
|
||||||
_addPeepAtMouse(true);
|
_addPeepAtMouse(true);
|
||||||
});
|
}));
|
||||||
var _addPeepAtMouse = function(infected){
|
var _addPeepAtMouse = function(infected){
|
||||||
var overlapPeep = self.getHoveredPeep(20);
|
var overlapPeep = self.getHoveredPeep(20);
|
||||||
if(!overlapPeep){
|
if(!overlapPeep){
|
||||||
self.addPeep(self.mouse.x, self.mouse.y, infected);
|
self.addPeep(self.mouse.x, self.mouse.y, infected);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
subscribe("key/down/delete",function(){
|
_keyHandlers.push(subscribe("key/down/delete",function(){
|
||||||
var toDeletePeep = self.getHoveredPeep(0);
|
var toDeletePeep = self.getHoveredPeep(0);
|
||||||
if(toDeletePeep) self.removePeep(toDeletePeep);
|
if(toDeletePeep) self.removePeep(toDeletePeep);
|
||||||
});
|
}));
|
||||||
|
|
||||||
self.getCurrentNetwork = function(){
|
self.getCurrentNetwork = function(){
|
||||||
var savedNetwork = {
|
var savedNetwork = {
|
||||||
|
|
|
@ -61,9 +61,14 @@ function Boxes(){
|
||||||
box.style.backgroundImage = "url("+config.img+")"
|
box.style.backgroundImage = "url("+config.img+")"
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sim Button
|
// Sim UI
|
||||||
if(config.sim_button){
|
if(config.sim_ui){
|
||||||
var simButton = SimButton(box, config.sim_button);
|
var simUI = new SimUI(box, config.sim_ui);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sandbox UI
|
||||||
|
if(config.sandbox){
|
||||||
|
var sandboxUI = new SandboxUI(box);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Replace "next" buttons!
|
// Replace "next" buttons!
|
||||||
|
@ -129,48 +134,3 @@ function Boxes(){
|
||||||
};
|
};
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function SimButton(container, color){
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
self.container = container;
|
|
||||||
self.container.classList.add("sim_button");
|
|
||||||
|
|
||||||
// RESET
|
|
||||||
var resetButton = document.createElement("div");
|
|
||||||
resetButton.id = "reset_button";
|
|
||||||
resetButton.innerHTML = getWords("sim_reset");
|
|
||||||
self.container.appendChild(resetButton);
|
|
||||||
resetButton.onclick = function(){
|
|
||||||
if(Simulations.IS_RUNNING){
|
|
||||||
publish("sim/reset");
|
|
||||||
_updateButtonUI();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// START / NEXT
|
|
||||||
var startButton = document.createElement("div");
|
|
||||||
startButton.id = "start_button";
|
|
||||||
self.container.appendChild(startButton);
|
|
||||||
startButton.onclick = function(){
|
|
||||||
if(!Simulations.IS_RUNNING){
|
|
||||||
publish("sim/start");
|
|
||||||
_updateButtonUI();
|
|
||||||
}else{
|
|
||||||
publish("sim/next");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Update button UI
|
|
||||||
var _updateButtonUI = function(){
|
|
||||||
if(!Simulations.IS_RUNNING){
|
|
||||||
startButton.innerHTML = getWords("sim_start");
|
|
||||||
self.container.removeAttribute("active");
|
|
||||||
}else{
|
|
||||||
startButton.innerHTML = getWords("sim_next");
|
|
||||||
self.container.setAttribute("active",true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
_updateButtonUI();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,2 +1,155 @@
|
||||||
function SandboxUI(){
|
function SandboxUI(container){
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
self.container = container;
|
||||||
|
self.container.classList.add("sandbox_ui");
|
||||||
|
|
||||||
|
//////////////////////
|
||||||
|
// Contagion Slider //
|
||||||
|
//////////////////////
|
||||||
|
|
||||||
|
var contagionLabel = document.createElement("div");
|
||||||
|
var contagionInput = document.createElement("input");
|
||||||
|
contagionInput.type = "range";
|
||||||
|
contagionInput.min = 0;
|
||||||
|
contagionInput.max = 1;
|
||||||
|
contagionInput.step = 0.05;
|
||||||
|
contagionInput.value = 0.25;
|
||||||
|
contagionInput.oninput = function(){
|
||||||
|
_updateContagion();
|
||||||
|
};
|
||||||
|
var _labelContagion0 = getWords("sandbox_contagion");
|
||||||
|
var _labelContagion1 = getWords("sandbox_contagion_simple");
|
||||||
|
var _labelContagion2 = getWords("sandbox_contagion_complex");
|
||||||
|
var _updateContagion = function(){
|
||||||
|
|
||||||
|
// update sim
|
||||||
|
var contagion = contagionInput.value;
|
||||||
|
slideshow.simulations.sims[0].contagion = contagion;
|
||||||
|
|
||||||
|
// update label
|
||||||
|
var label = _labelContagion0+" ";
|
||||||
|
label += Math.round(contagion*100)+"% ";
|
||||||
|
label += "("+((contagion==0) ? _labelContagion1 : _labelContagion2)+")";
|
||||||
|
contagionLabel.innerHTML = label;
|
||||||
|
|
||||||
|
};
|
||||||
|
container.appendChild(contagionLabel);
|
||||||
|
container.appendChild(contagionInput);
|
||||||
|
setTimeout(function(){
|
||||||
|
_updateContagion();
|
||||||
|
},1);
|
||||||
|
|
||||||
|
///////////////////////////
|
||||||
|
// Choose Color of Peeps //
|
||||||
|
///////////////////////////
|
||||||
|
|
||||||
|
var colorChooserLabel = document.createElement("div");
|
||||||
|
colorChooserLabel.innerHTML = getWords("sandbox_color_chooser");
|
||||||
|
colorChooserLabel.style.marginTop = "1em";
|
||||||
|
var colorChooser = new ChooseOne({
|
||||||
|
options:[
|
||||||
|
1, // red
|
||||||
|
2, // yellow
|
||||||
|
3, // blue
|
||||||
|
4, // green
|
||||||
|
5, // pink
|
||||||
|
],
|
||||||
|
makeButton:function(value){
|
||||||
|
var button = document.createElement("div");
|
||||||
|
button.className = "choose_color";
|
||||||
|
button.style.backgroundPosition = (-40*value)+"px 0px";
|
||||||
|
return button;
|
||||||
|
},
|
||||||
|
oninput:function(value){
|
||||||
|
// update sim
|
||||||
|
slideshow.simulations.sims[0].options.infectedFrame = value;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
container.appendChild(colorChooserLabel);
|
||||||
|
container.appendChild(colorChooser.dom);
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// Choose Tool for Pencil //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
var toolChooserLabel = document.createElement("div");
|
||||||
|
toolChooserLabel.innerHTML = getWords("sandbox_tool_chooser");
|
||||||
|
toolChooserLabel.style.marginTop = "1em";
|
||||||
|
var toolChooser = new ChooseOne({
|
||||||
|
options:[
|
||||||
|
"pencil",
|
||||||
|
"add",
|
||||||
|
"add_infected",
|
||||||
|
"move",
|
||||||
|
"delete",
|
||||||
|
"clear"
|
||||||
|
],
|
||||||
|
makeButton: function(value){
|
||||||
|
var button = document.createElement("div");
|
||||||
|
button.className = "choose_tool";
|
||||||
|
button.innerHTML = getWords("sandbox_tool_"+value);
|
||||||
|
return button;
|
||||||
|
},
|
||||||
|
oninput:function(value){
|
||||||
|
}
|
||||||
|
});
|
||||||
|
container.appendChild(toolChooserLabel);
|
||||||
|
container.appendChild(toolChooser.dom);
|
||||||
|
|
||||||
|
////////////////////////
|
||||||
|
// Keyboard Shortcuts //
|
||||||
|
////////////////////////
|
||||||
|
|
||||||
|
var shortcutsLabel = document.createElement("div");
|
||||||
|
shortcutsLabel.innerHTML = getWords("sandbox_shortcuts_label");
|
||||||
|
shortcutsLabel.id = "sandbox_shortcuts_label";
|
||||||
|
shortcutsLabel.style.marginTop = "1em";
|
||||||
|
var shortcuts = document.createElement("div");
|
||||||
|
shortcuts.innerHTML = getWords("sandbox_shortcuts");
|
||||||
|
shortcuts.id = "sandbox_shortcuts";
|
||||||
|
container.appendChild(shortcutsLabel);
|
||||||
|
container.appendChild(shortcuts);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChooseOne(config){
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
// Container
|
||||||
|
self.dom = document.createElement("div");
|
||||||
|
self.dom.className = "choose_one";
|
||||||
|
|
||||||
|
// Make Buttons
|
||||||
|
var buttons = [];
|
||||||
|
config.options.forEach(function(option){
|
||||||
|
|
||||||
|
var buttonConfig = option;//.button;
|
||||||
|
var value = option;//.value;
|
||||||
|
|
||||||
|
// New Button
|
||||||
|
var buttonDOM = config.makeButton(buttonConfig);
|
||||||
|
self.dom.appendChild(buttonDOM);
|
||||||
|
buttons.push(buttonDOM);
|
||||||
|
|
||||||
|
// On Input
|
||||||
|
buttonDOM.onclick = function(){
|
||||||
|
self.highlight(buttonDOM); // highlight
|
||||||
|
config.oninput(value); // input
|
||||||
|
};
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// Highlight
|
||||||
|
self.highlight = function(toHighlight){
|
||||||
|
buttons.forEach(function(button){
|
||||||
|
button.removeAttribute("selected");
|
||||||
|
});
|
||||||
|
toHighlight.setAttribute("selected",true);
|
||||||
|
};
|
||||||
|
self.highlight(buttons[0]); // highlight 1st one always, whatever
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,6 @@ function Scratch(){
|
||||||
var handle = subscribe("update", function(){
|
var handle = subscribe("update", function(){
|
||||||
var yOffset = Math.floor(frame)*(-100);
|
var yOffset = Math.floor(frame)*(-100);
|
||||||
self.dom.style.backgroundPosition = xOffset+"% "+yOffset+"%";
|
self.dom.style.backgroundPosition = xOffset+"% "+yOffset+"%";
|
||||||
console.log(xOffset, yOffset);
|
|
||||||
if(frame>19){
|
if(frame>19){
|
||||||
unsubscribe(handle);
|
unsubscribe(handle);
|
||||||
if(callback) callback();
|
if(callback) callback();
|
||||||
|
|
|
@ -0,0 +1,44 @@
|
||||||
|
function SimUI(container, color){
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
self.container = container;
|
||||||
|
self.container.classList.add("sim_ui");
|
||||||
|
|
||||||
|
// RESET
|
||||||
|
var resetButton = document.createElement("div");
|
||||||
|
resetButton.id = "reset_button";
|
||||||
|
resetButton.innerHTML = getWords("sim_reset");
|
||||||
|
self.container.appendChild(resetButton);
|
||||||
|
resetButton.onclick = function(){
|
||||||
|
if(Simulations.IS_RUNNING){
|
||||||
|
publish("sim/reset");
|
||||||
|
_updateButtonUI();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// START / NEXT
|
||||||
|
var startButton = document.createElement("div");
|
||||||
|
startButton.id = "start_button";
|
||||||
|
self.container.appendChild(startButton);
|
||||||
|
startButton.onclick = function(){
|
||||||
|
if(!Simulations.IS_RUNNING){
|
||||||
|
publish("sim/start");
|
||||||
|
_updateButtonUI();
|
||||||
|
}else{
|
||||||
|
publish("sim/next");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update button UI
|
||||||
|
var _updateButtonUI = function(){
|
||||||
|
if(!Simulations.IS_RUNNING){
|
||||||
|
startButton.innerHTML = getWords("sim_start");
|
||||||
|
self.container.removeAttribute("active");
|
||||||
|
}else{
|
||||||
|
startButton.innerHTML = getWords("sim_next");
|
||||||
|
self.container.setAttribute("active",true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
_updateButtonUI();
|
||||||
|
|
||||||
|
}
|
|
@ -25,8 +25,14 @@ function Slideshow(){
|
||||||
|
|
||||||
// GOTO and NEXT
|
// GOTO and NEXT
|
||||||
var _delay = 300;
|
var _delay = 300;
|
||||||
|
self.IS_TRANSITIONING = false;
|
||||||
self.goto = function(index){
|
self.goto = function(index){
|
||||||
|
|
||||||
|
// Wait for transition to finish!
|
||||||
|
if(self.IS_TRANSITIONING) return;
|
||||||
|
self.IS_TRANSITIONING = true;
|
||||||
|
|
||||||
|
// Which slide?
|
||||||
self.slideIndex = index;
|
self.slideIndex = index;
|
||||||
var isFirstSlide = (self.currentSlide==null);
|
var isFirstSlide = (self.currentSlide==null);
|
||||||
var slide = SLIDES[self.slideIndex];
|
var slide = SLIDES[self.slideIndex];
|
||||||
|
@ -105,6 +111,11 @@ function Slideshow(){
|
||||||
self.currentState = {};
|
self.currentState = {};
|
||||||
if(slide.onstart) slide.onstart(self, self.currentState);
|
if(slide.onstart) slide.onstart(self, self.currentState);
|
||||||
|
|
||||||
|
// Transition done... sorta!
|
||||||
|
_setTimeout(function(){
|
||||||
|
self.IS_TRANSITIONING = false;
|
||||||
|
},800);
|
||||||
|
|
||||||
}, _delayNewSlide);
|
}, _delayNewSlide);
|
||||||
|
|
||||||
// Tell everyone it's a new chapter
|
// Tell everyone it's a new chapter
|
||||||
|
|
Loading…
Reference in New Issue