sandbox pretty much DONE in ONE day
This commit is contained in:
parent
4b456ac54c
commit
759c39768a
|
@ -54,7 +54,7 @@ body{
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
padding: 40px 0;
|
padding: 40px 0;
|
||||||
background-image: url(sprites/button_large.png);
|
background-image: url(../sprites/button_large.png);
|
||||||
background-size: 100% auto;
|
background-size: 100% auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -69,7 +69,7 @@ body{
|
||||||
#scratch{
|
#scratch{
|
||||||
display: none;
|
display: none;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-image: url(sprites/scratch.png);
|
background-image: url(../sprites/scratch.png);
|
||||||
background-size: 200% 2000%;
|
background-size: 200% 2000%;
|
||||||
background-position: 0% 0%;
|
background-position: 0% 0%;
|
||||||
}
|
}
|
||||||
|
@ -124,17 +124,24 @@ body{
|
||||||
.choose_color{
|
.choose_color{
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
background: url(sprites/peeps.png);
|
background: url(../sprites/peeps.png);
|
||||||
background-size: auto 100%;
|
background-size: auto 100%;
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
.choose_tool{
|
.choose_tool{
|
||||||
|
background: #fff;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
.choose_tool > #icon{
|
||||||
|
display: inline-block;
|
||||||
|
width:16px; height:16px;
|
||||||
|
background: url(../sprites/sandbox_tools.png);
|
||||||
|
background-size: auto 100%;
|
||||||
|
}
|
||||||
#sandbox_shortcuts_label{
|
#sandbox_shortcuts_label{
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
@ -261,6 +268,9 @@ words, bonus, glossary{
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TO SEE LAYOUT */
|
/* TO SEE LAYOUT */
|
||||||
.box, #simulations{
|
/*.box, #simulations{
|
||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
}
|
}*/
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,7 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>The Wisdom and/or Madness of Crowds</title>
|
<title>The Wisdom and/or Madness of Crowds</title>
|
||||||
<link rel="stylesheet" type="text/css" href="index.css">
|
<link rel="stylesheet" type="text/css" href="css/index.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
@ -301,7 +301,7 @@ Draw Connections
|
||||||
Add Peep
|
Add Peep
|
||||||
</words>
|
</words>
|
||||||
<words id="sandbox_tool_add_infected">
|
<words id="sandbox_tool_add_infected">
|
||||||
Add "Infected" Peep
|
Add "Infected"
|
||||||
</words>
|
</words>
|
||||||
<words id="sandbox_tool_move">
|
<words id="sandbox_tool_move">
|
||||||
Move Peep
|
Move Peep
|
||||||
|
@ -319,7 +319,7 @@ Delete Peep
|
||||||
<words id="sandbox_shortcuts">
|
<words id="sandbox_shortcuts">
|
||||||
[1]: Add Peep
|
[1]: Add Peep
|
||||||
<br>
|
<br>
|
||||||
[2]: Add Infected Peep
|
[2]: Add "Infected" Peep
|
||||||
<br>
|
<br>
|
||||||
[Space]: Move Peep
|
[Space]: Move Peep
|
||||||
<br>
|
<br>
|
||||||
|
|
|
@ -12,10 +12,21 @@ function ConnectorCutter(config){
|
||||||
|
|
||||||
// Update!
|
// Update!
|
||||||
self.state = 0; // 0-nothing | 1-connecting | 2-cutting
|
self.state = 0; // 0-nothing | 1-connecting | 2-cutting
|
||||||
|
self.sandbox_state = 0; // 0-pencil | 1-add_peep | 2-add_infected | 3-move | 4-delete | 5-bomb
|
||||||
self.update = function(){
|
self.update = function(){
|
||||||
|
|
||||||
var mouse = self.sim.mouse;
|
var mouse = self.sim.mouse;
|
||||||
|
|
||||||
|
// TOTAL HACK: if you're clicking within the sandbox UI, FORGET IT
|
||||||
|
if(mouse.x>0 && mouse.x<280){
|
||||||
|
if(mouse.justPressed){
|
||||||
|
return; // FORGET ITTTTTT
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// IF SANDBOX STATE = PENCIL, complex mouse shtuff
|
||||||
|
if(self.sandbox_state==0){
|
||||||
|
|
||||||
// only if sim is NOT RUNNING
|
// only if sim is NOT RUNNING
|
||||||
if(!Simulations.IS_RUNNING){
|
if(!Simulations.IS_RUNNING){
|
||||||
|
|
||||||
|
@ -85,15 +96,56 @@ function ConnectorCutter(config){
|
||||||
|
|
||||||
// Add to trail
|
// Add to trail
|
||||||
self.cutTrail.unshift([mouse.x,mouse.y]); // add to start
|
self.cutTrail.unshift([mouse.x,mouse.y]); // add to start
|
||||||
if(self.cutTrail.length>10){
|
|
||||||
self.cutTrail.pop(); // remove from end
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pencil's always RED
|
// Pencil's always RED
|
||||||
pencil.gotoFrame(2);
|
pencil.gotoFrame(2);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
self.cutTrail.pop(); // oh, and if not cutting, pop from end anyway
|
self.state=0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// IF SANDBOX STATE = ADD/DELETE PEEP or BOMB, just click to activate!
|
||||||
|
if(self.sandbox_state!=0){
|
||||||
|
if(mouse.justPressed){
|
||||||
|
|
||||||
|
// TODO: Publish sound effects!
|
||||||
|
|
||||||
|
// Add Peep
|
||||||
|
if(self.sandbox_state==1){
|
||||||
|
self.sim._addPeepAtMouse(false); // not infected
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add Infected Peep
|
||||||
|
if(self.sandbox_state==2){
|
||||||
|
self.sim._addPeepAtMouse(true); // IS infected
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete Peep
|
||||||
|
if(self.sandbox_state==4){
|
||||||
|
self.sim._deletePeep();
|
||||||
|
}
|
||||||
|
|
||||||
|
// BOMB
|
||||||
|
if(self.sandbox_state==5){
|
||||||
|
var contagionLevel = self.sim.contagion; // hack for sandbox: keep contagion the same
|
||||||
|
self.sim.clear();
|
||||||
|
self.sim.contagion = contagionLevel;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// IF SANDBOX STATE = MOVE...
|
||||||
|
if(self.sandbox_state==3){
|
||||||
|
if(mouse.justPressed) self.sim._startMove();
|
||||||
|
if(mouse.justReleased) self.sim._stopMove();
|
||||||
|
}
|
||||||
|
|
||||||
|
// If trail too long, or NOT cutting, pop trail from end
|
||||||
|
if(self.cutTrail.length>10 || self.state!=2 || self.sandbox_state!=0){
|
||||||
|
self.cutTrail.pop();
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -397,7 +397,14 @@ function Sim(config){
|
||||||
var _draggingPeep = null;
|
var _draggingPeep = null;
|
||||||
var _draggingOffset = {x:0,y:0};
|
var _draggingOffset = {x:0,y:0};
|
||||||
var _keyHandlers = [];
|
var _keyHandlers = [];
|
||||||
|
var _resetConnectorCutter = function(){
|
||||||
|
self.connectorCutter.sandbox_state = 0;
|
||||||
|
};
|
||||||
_keyHandlers.push(subscribe("key/down/space",function(){
|
_keyHandlers.push(subscribe("key/down/space",function(){
|
||||||
|
_resetConnectorCutter();
|
||||||
|
self._startMove();
|
||||||
|
}));
|
||||||
|
self._startMove = 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){
|
||||||
|
@ -406,26 +413,35 @@ function Sim(config){
|
||||||
_draggingOffset.y = _draggingPeep.y-self.mouse.y;
|
_draggingOffset.y = _draggingPeep.y-self.mouse.y;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}));
|
};
|
||||||
_keyHandlers.push(subscribe("key/up/space",function(){
|
_keyHandlers.push(subscribe("key/up/space",function(){
|
||||||
_draggingPeep = null;
|
self._stopMove();
|
||||||
}));
|
}));
|
||||||
|
self._stopMove = function(){
|
||||||
|
_draggingPeep = null;
|
||||||
|
};
|
||||||
_keyHandlers.push(subscribe("key/down/1",function(){
|
_keyHandlers.push(subscribe("key/down/1",function(){
|
||||||
_addPeepAtMouse(false);
|
_resetConnectorCutter();
|
||||||
|
self._addPeepAtMouse(false);
|
||||||
}));
|
}));
|
||||||
_keyHandlers.push(subscribe("key/down/2",function(){
|
_keyHandlers.push(subscribe("key/down/2",function(){
|
||||||
_addPeepAtMouse(true);
|
_resetConnectorCutter();
|
||||||
|
self._addPeepAtMouse(true);
|
||||||
}));
|
}));
|
||||||
var _addPeepAtMouse = function(infected){
|
self._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);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
_keyHandlers.push(subscribe("key/down/delete",function(){
|
_keyHandlers.push(subscribe("key/down/delete",function(){
|
||||||
|
_resetConnectorCutter();
|
||||||
|
self._deletePeep();
|
||||||
|
}));
|
||||||
|
self._deletePeep = 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 = {
|
||||||
|
|
|
@ -12,14 +12,19 @@ function Pencil(){
|
||||||
self.canvas = createCanvas( $("#pencil"), 100, 100 );
|
self.canvas = createCanvas( $("#pencil"), 100, 100 );
|
||||||
self.ctx = self.canvas.getContext('2d');
|
self.ctx = self.canvas.getContext('2d');
|
||||||
|
|
||||||
// Sprite
|
// Sprites
|
||||||
self.sprite = new Sprite({
|
self.sprite = new Sprite({
|
||||||
src: "sprites/pencil.png",
|
src: "sprites/pencil.png",
|
||||||
frames:3, sw:200, sh:200,
|
frames:3, sw:200, sh:200,
|
||||||
});
|
});
|
||||||
self.sprite.pivotX = 0;
|
self.toolsSprite = new Sprite({
|
||||||
self.sprite.pivotY = 200;
|
src: "sprites/sandbox_tools.png",
|
||||||
self.sprite.scale = 0.75;
|
frames:6, sw:200, sh:200,
|
||||||
|
});
|
||||||
|
self.sprite.pivotX = self.toolsSprite.pivotX = 0;
|
||||||
|
self.sprite.pivotY = self.toolsSprite.pivotY = 200;
|
||||||
|
self.sprite.scale = self.toolsSprite.scale = 0.75;
|
||||||
|
|
||||||
var _size = 100;
|
var _size = 100;
|
||||||
var _margin = 10;
|
var _margin = 10;
|
||||||
var _offset = 10;
|
var _offset = 10;
|
||||||
|
@ -43,6 +48,7 @@ function Pencil(){
|
||||||
var xy_velocity = ((Mouse.x-self.x) + (Mouse.y-self.y))/10; // in down-right direction
|
var xy_velocity = ((Mouse.x-self.x) + (Mouse.y-self.y))/10; // in down-right direction
|
||||||
var gotoRotation = -sigmoid(xy_velocity) * Math.TAU/8;
|
var gotoRotation = -sigmoid(xy_velocity) * Math.TAU/8;
|
||||||
self.sprite.rotation = self.sprite.rotation*0.8 + gotoRotation*0.2;
|
self.sprite.rotation = self.sprite.rotation*0.8 + gotoRotation*0.2;
|
||||||
|
self.toolsSprite.rotation = self.sprite.rotation;
|
||||||
|
|
||||||
// Pencil's offset
|
// Pencil's offset
|
||||||
var gotoOffset = Mouse.pressed ? -8 : 10;
|
var gotoOffset = Mouse.pressed ? -8 : 10;
|
||||||
|
@ -61,6 +67,17 @@ function Pencil(){
|
||||||
self.canvas.style.left = self.x-_margin;
|
self.canvas.style.left = self.x-_margin;
|
||||||
self.canvas.style.top = self.y-_size+_margin;
|
self.canvas.style.top = self.y-_size+_margin;
|
||||||
|
|
||||||
|
// Which sprite? (normal by default...)
|
||||||
|
var sprite = self.sprite;
|
||||||
|
var sim = slideshow.simulations.sims[0];
|
||||||
|
if(sim){
|
||||||
|
var frame = sim.connectorCutter.sandbox_state;
|
||||||
|
if(frame!=0){
|
||||||
|
sprite = self.toolsSprite;
|
||||||
|
sprite.gotoFrame(frame);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Reset canvas
|
// Reset canvas
|
||||||
var ctx = self.ctx;
|
var ctx = self.ctx;
|
||||||
ctx.clearRect(0,0,self.canvas.width,self.canvas.height);
|
ctx.clearRect(0,0,self.canvas.width,self.canvas.height);
|
||||||
|
@ -79,9 +96,9 @@ function Pencil(){
|
||||||
}
|
}
|
||||||
|
|
||||||
// Draw pencil
|
// Draw pencil
|
||||||
self.sprite.x = _offset;
|
sprite.x = _offset;
|
||||||
self.sprite.y = -_offset;
|
sprite.y = -_offset;
|
||||||
self.sprite.draw(ctx);
|
sprite.draw(ctx);
|
||||||
|
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
|
|
||||||
|
|
|
@ -76,22 +76,40 @@ function SandboxUI(container){
|
||||||
var toolChooserLabel = document.createElement("div");
|
var toolChooserLabel = document.createElement("div");
|
||||||
toolChooserLabel.innerHTML = getWords("sandbox_tool_chooser");
|
toolChooserLabel.innerHTML = getWords("sandbox_tool_chooser");
|
||||||
toolChooserLabel.style.marginTop = "1em";
|
toolChooserLabel.style.marginTop = "1em";
|
||||||
var toolChooser = new ChooseOne({
|
var tools = [
|
||||||
options:[
|
|
||||||
"pencil",
|
"pencil",
|
||||||
"add",
|
"add",
|
||||||
"add_infected",
|
"add_infected",
|
||||||
"move",
|
"move",
|
||||||
"delete",
|
"delete",
|
||||||
"clear"
|
"clear"
|
||||||
],
|
];
|
||||||
|
var toolChooser = new ChooseOne({
|
||||||
|
options:tools,
|
||||||
makeButton: function(value){
|
makeButton: function(value){
|
||||||
|
|
||||||
var button = document.createElement("div");
|
var button = document.createElement("div");
|
||||||
button.className = "choose_tool";
|
button.className = "choose_tool";
|
||||||
button.innerHTML = getWords("sandbox_tool_"+value);
|
|
||||||
|
// Icon
|
||||||
|
var buttonImage = document.createElement("div");
|
||||||
|
button.appendChild(buttonImage);
|
||||||
|
buttonImage.id = "icon";
|
||||||
|
var frame = tools.indexOf(value);
|
||||||
|
buttonImage.style.backgroundPosition = (-16*frame)+"px 0px";
|
||||||
|
|
||||||
|
// Label
|
||||||
|
var buttonLabel = document.createElement("span");
|
||||||
|
button.appendChild(buttonLabel);
|
||||||
|
buttonLabel.innerHTML = getWords("sandbox_tool_"+value);
|
||||||
|
|
||||||
return button;
|
return button;
|
||||||
|
|
||||||
},
|
},
|
||||||
oninput:function(value){
|
oninput:function(value){
|
||||||
|
// update sim
|
||||||
|
var sandbox_state = tools.indexOf(value);
|
||||||
|
slideshow.simulations.sims[0].connectorCutter.sandbox_state = sandbox_state;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
container.appendChild(toolChooserLabel);
|
container.appendChild(toolChooserLabel);
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 44 KiB |
Loading…
Reference in New Issue