NotDotTeam/crowds
NotDotTeam
/
crowds
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

basic crappy sim ui

This commit is contained in:
Nicky Case 2018-04-03 11:25:13 -04:00
parent ebc3c3046f
commit ea1958bf5c
7 changed files with 125 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
slides/index.css
View File

@ -25,9 +25,6 @@ body{
overflow: hidden;
cursor: none;
}
#simulations{
border: 1px solid #eee;
}
#simulations, #slideshow{
position: absolute;
width: 960px;
@ -60,7 +57,7 @@ body{
#slideshow .next_button:hover{
background-position: 0 -100px;
}
.fadeable{
.transitionable{
transition: opacity 0.3s ease-in-out;
}
#scratch{
@ -70,6 +67,9 @@ body{
background-size: 200% 2000%;
background-position: 0% 0%;
}
.sim_button{
}
/* MODAL */
#modal{
@ -98,3 +98,8 @@ body{
words, bonus, glossary{
display: none;
}
/* TO SEE LAYOUT */
.box, #simulations{
border: 1px solid #eee;
}

6
slides/index.html
View File

@ -24,7 +24,7 @@ Cursor is allowed to flow EVERYWHERE though...
</head>
<body>
<div id="container" class="fadeable">
<div id="container">
<!-- Simulation(s) in background -->
<div id="simulations_container">
@ -168,10 +168,10 @@ blah blah post-puzzle
WIN
</words>
<words id="sim_start">
start sim!
&gt; start sim
</words>
<words id="sim_next">
next day >>
&gt;&gt; next
</words>
<words id="sim_reset">
reset sim

11
slides/js/chapters/2_Simple_Contagion.js
View File

@ -16,6 +16,7 @@ SLIDES.push(
clear:true,
add:[
// Lil' contagion
{
type:"sim",
@ -31,6 +32,14 @@ SLIDES.push(
scale: 1.25
}
},
// UI for the simulation
{
type:"box",
x:380, y:180,
sim_button:"red"
},
]
},
@ -39,6 +48,7 @@ SLIDES.push(
clear:true,
add:[
// Lil' contagion
{
type:"sim",
@ -55,6 +65,7 @@ SLIDES.push(
startUncuttable: true
}
},
]
},

4
slides/js/lib/helpers.js
View File

@ -56,14 +56,14 @@ function removeFromArray(array, item){
// Fade In
function fadeIn(container, dom){
dom.style.opacity = 0;
dom.classList.add("fadeable");
dom.classList.add("transitionable");
container.appendChild(dom);
setTimeout(function(){
dom.style.opacity = 1;
},50);
}
function fadeOut(container, dom){
dom.classList.add("fadeable");
dom.classList.add("transitionable");
dom.style.opacity = 0;
setTimeout(function(){
container.removeChild(dom);

2
slides/js/main.js
View File

@ -28,6 +28,6 @@ window.onload = function(){
window.requestAnimationFrame(update);
// First slide!
slideshow.gotoChapter("Complex");
slideshow.gotoChapter("Simple");
}

55
slides/js/sim/Simulations.js
View File

@ -45,6 +45,29 @@ function Simulations(){
});
};
////////////////////////
// SIMULATION RUNNING //
////////////////////////
subscribe("sim/start", function(){
Simulations.IS_RUNNING = true;
self.sims.forEach(function(sim){
sim.save(); // save for later resetting
});
publish("sim/next");
});
subscribe("sim/reset", function(){
Simulations.IS_RUNNING = false;
self.sims.forEach(function(sim){
sim.reload(); // reload the network pre-sim
});
});
subscribe("sim/next", function(){
self.sims.forEach(function(sim){
sim.nextStep();
});
});
///////////////////////
// HELPERS AND STUFF //
///////////////////////
@ -62,7 +85,7 @@ function Sim(config){
var self = this;
self.config = config;
self.networkConfig = config.network;
self.networkConfig = cloneObject(config.network);
self.container = config.container;
self.options = config.options || {};
@ -316,6 +339,30 @@ function Sim(config){
};
////////////////////////
// SIMULATION RUNNING //
////////////////////////
self.save = function(){
self.networkConfig = self.getCurrentNetwork();
};
self.reload = function(){
self.init();
};
self.nextStep = function(){
// "Infect" the peeps who need to get infected
// TODO: Connection animation
self.peeps.filter(function(peep){
return peep.isPastThreshold;
}).forEach(function(peep){
peep.infect();
});
};
///////////////////////////////
// secret keyboard interface //
///////////////////////////////
@ -354,7 +401,7 @@ function Sim(config){
if(toDeletePeep) self.removePeep(toDeletePeep);
});
self.save = function(){
self.getCurrentNetwork = function(){
var savedNetwork = {
contagion: self.contagion,
peeps: [],
@ -368,6 +415,10 @@ function Sim(config){
var toIndex = self.peeps.indexOf(c.to);
savedNetwork.connections.push([fromIndex, toIndex]);
});
return savedNetwork;
};
self.serialize = function(){
var savedNetwork = self.getCurrentNetwork();
return '{\n'+
'\t"contagion":'+savedNetwork.contagion+",\n"+
'\t"peeps":'+JSON.stringify(savedNetwork.peeps)+",\n"+

46
slides/js/slideshow/Boxes.js
View File

@ -52,6 +52,11 @@ function Boxes(){
box.style.backgroundImage = "url("+config.img+")"
}
// Sim Button
if(config.sim_button){
var simButton = SimButton(box, config.sim_button);
}
// Replace "next" buttons!
var next;
if(next = box.querySelector("next")){
@ -111,3 +116,44 @@ function Boxes(){
};
}
function SimButton(container, color){
var self = this;
self.container = container;
self.container.classList.add("sim_button");
// RESET
var smallButton = document.createElement("div");
smallButton.innerHTML = getWords("sim_reset");
self.container.appendChild(smallButton);
smallButton.onclick = function(){
if(Simulations.IS_RUNNING){
publish("sim/reset");
_updateButtonUI();
}
};
// START / NEXT
var bigButton = document.createElement("div");
self.container.appendChild(bigButton);
bigButton.onclick = function(){
if(!Simulations.IS_RUNNING){
publish("sim/start");
_updateButtonUI();
}else{
publish("sim/next");
}
};
// Update button UI
var _updateButtonUI = function(){
if(!Simulations.IS_RUNNING){
bigButton.innerHTML = getWords("sim_start");
}else{
bigButton.innerHTML = getWords("sim_next");
}
};
_updateButtonUI();
}