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; overflow: hidden;
cursor: none; cursor: none;
} }
#simulations{
border: 1px solid #eee;
}
#simulations, #slideshow{ #simulations, #slideshow{
position: absolute; position: absolute;
width: 960px; width: 960px;
@ -60,7 +57,7 @@ body{
#slideshow .next_button:hover{ #slideshow .next_button:hover{
background-position: 0 -100px; background-position: 0 -100px;
} }
.fadeable{ .transitionable{
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
} }
#scratch{ #scratch{
@ -70,6 +67,9 @@ body{
background-size: 200% 2000%; background-size: 200% 2000%;
background-position: 0% 0%; background-position: 0% 0%;
} }
.sim_button{
}
/* MODAL */ /* MODAL */
#modal{ #modal{
@ -98,3 +98,8 @@ body{
words, bonus, glossary{ words, bonus, glossary{
display: none; 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> </head>
<body> <body>
<div id="container" class="fadeable"> <div id="container">
<!-- Simulation(s) in background --> <!-- Simulation(s) in background -->
<div id="simulations_container"> <div id="simulations_container">
@ -168,10 +168,10 @@ blah blah post-puzzle
WIN WIN
</words> </words>
<words id="sim_start"> <words id="sim_start">
start sim! &gt; start sim
</words> </words>
<words id="sim_next"> <words id="sim_next">
next day >> &gt;&gt; next
</words> </words>
<words id="sim_reset"> <words id="sim_reset">
reset sim reset sim

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

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

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

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

2
slides/js/main.js
View File

@ -28,6 +28,6 @@ window.onload = function(){
window.requestAnimationFrame(update); window.requestAnimationFrame(update);
// First slide! // 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 // // HELPERS AND STUFF //
/////////////////////// ///////////////////////
@ -62,7 +85,7 @@ function Sim(config){
var self = this; var self = this;
self.config = config; self.config = config;
self.networkConfig = config.network; self.networkConfig = cloneObject(config.network);
self.container = config.container; self.container = config.container;
self.options = config.options || {}; 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 // // secret keyboard interface //
/////////////////////////////// ///////////////////////////////
@ -354,7 +401,7 @@ function Sim(config){
if(toDeletePeep) self.removePeep(toDeletePeep); if(toDeletePeep) self.removePeep(toDeletePeep);
}); });
self.save = function(){ self.getCurrentNetwork = function(){
var savedNetwork = { var savedNetwork = {
contagion: self.contagion, contagion: self.contagion,
peeps: [], peeps: [],
@ -368,6 +415,10 @@ function Sim(config){
var toIndex = self.peeps.indexOf(c.to); var toIndex = self.peeps.indexOf(c.to);
savedNetwork.connections.push([fromIndex, toIndex]); savedNetwork.connections.push([fromIndex, toIndex]);
}); });
return savedNetwork;
};
self.serialize = function(){
var savedNetwork = self.getCurrentNetwork();
return '{\n'+ return '{\n'+
'\t"contagion":'+savedNetwork.contagion+",\n"+ '\t"contagion":'+savedNetwork.contagion+",\n"+
'\t"peeps":'+JSON.stringify(savedNetwork.peeps)+",\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+")" box.style.backgroundImage = "url("+config.img+")"
} }
// Sim Button
if(config.sim_button){
var simButton = SimButton(box, config.sim_button);
}
// Replace "next" buttons! // Replace "next" buttons!
var next; var next;
if(next = box.querySelector("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();
}