diff --git a/index.css b/css/index.css
similarity index 92%
rename from index.css
rename to css/index.css
index bfdb8be..59d6267 100644
--- a/index.css
+++ b/css/index.css
@@ -54,7 +54,7 @@ body{
width: 300px;
height: 20px;
padding: 40px 0;
- background-image: url(sprites/button_large.png);
+ background-image: url(../sprites/button_large.png);
background-size: 100% auto;
text-align: center;
}
@@ -69,7 +69,7 @@ body{
#scratch{
display: none;
pointer-events: none;
- background-image: url(sprites/scratch.png);
+ background-image: url(../sprites/scratch.png);
background-size: 200% 2000%;
background-position: 0% 0%;
}
@@ -124,17 +124,24 @@ body{
.choose_color{
width: 40px;
height: 40px;
- background: url(sprites/peeps.png);
+ background: url(../sprites/peeps.png);
background-size: auto 100%;
transform: scale(1.2);
}
.choose_tool{
+ background: #fff;
font-size: 16px;
line-height: 16px;
border: 1px solid black;
padding: 3px;
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{
font-size: 18px;
}
@@ -261,6 +268,9 @@ words, bonus, glossary{
}
/* TO SEE LAYOUT */
-.box, #simulations{
+/*.box, #simulations{
border: 1px solid #eee;
-}
\ No newline at end of file
+}*/
+
+
+
diff --git a/index.html b/index.html
index dec18b4..b28014b 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@ Cursor is allowed to flow EVERYWHERE though...
The Wisdom and/or Madness of Crowds
-
+
@@ -301,7 +301,7 @@ Draw Connections
Add Peep
-Add "Infected" Peep
+Add "Infected"
Move Peep
@@ -319,7 +319,7 @@ Delete Peep
[1]: Add Peep
-[2]: Add Infected Peep
+[2]: Add "Infected" Peep
[Space]: Move Peep
diff --git a/js/sim/ConnectorCutter.js b/js/sim/ConnectorCutter.js
index 2bcb61c..ac953ac 100644
--- a/js/sim/ConnectorCutter.js
+++ b/js/sim/ConnectorCutter.js
@@ -12,88 +12,140 @@ function ConnectorCutter(config){
// Update!
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(){
var mouse = self.sim.mouse;
- // only if sim is NOT RUNNING
- if(!Simulations.IS_RUNNING){
-
- // JUST CLICKED, and state=0... can either start connecting or cutting!
- if(mouse.justPressed && self.state===0){
-
- // Clicked on a peep?
- var peepClicked = self.sim.getHoveredPeep(0);
- if(peepClicked){
- self.state = 1; // START CONNECTING
- self.connectFrom = peepClicked;
- }else{
- self.state = 2; // START ERASING
- }
-
+ // 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
}
-
- // JUST RELEASED, and state!=0... can either stop connecting or cutting!
- if(mouse.justReleased && self.state!==0){
-
- // End connect?
- if(self.state==1){
- var peepReleased = self.sim.getHoveredPeep(20);
- if(peepReleased){
- self.sim.addConnection(self.connectFrom, peepReleased);
- }
- }
-
- // back to normal
- self.state = 0;
-
- }
-
- }else{
- self.state = 0;
}
- // In "NORMAL" state... tell Pencil what frame to go to
- if(self.state==0){
+ // IF SANDBOX STATE = PENCIL, complex mouse shtuff
+ if(self.sandbox_state==0){
+
+ // only if sim is NOT RUNNING
if(!Simulations.IS_RUNNING){
- var peepHovered = self.sim.getHoveredPeep(0);
- pencil.gotoFrame( peepHovered ? 1 : 0 );
+
+ // JUST CLICKED, and state=0... can either start connecting or cutting!
+ if(mouse.justPressed && self.state===0){
+
+ // Clicked on a peep?
+ var peepClicked = self.sim.getHoveredPeep(0);
+ if(peepClicked){
+ self.state = 1; // START CONNECTING
+ self.connectFrom = peepClicked;
+ }else{
+ self.state = 2; // START ERASING
+ }
+
+ }
+
+ // JUST RELEASED, and state!=0... can either stop connecting or cutting!
+ if(mouse.justReleased && self.state!==0){
+
+ // End connect?
+ if(self.state==1){
+ var peepReleased = self.sim.getHoveredPeep(20);
+ if(peepReleased){
+ self.sim.addConnection(self.connectFrom, peepReleased);
+ }
+ }
+
+ // back to normal
+ self.state = 0;
+
+ }
+
}else{
- pencil.gotoFrame(0);
- }
- }
-
- // In "CONNECTING" state... show where to connect to
- if(self.state==1){
-
- // Connect to a nearby hovered peep?
- var peepHovered = self.sim.getHoveredPeep(20);
- if(peepHovered==self.connectFrom) peepHovered=null; // if same, nah
- self.connectTo = peepHovered ? peepHovered : mouse;
-
- // Pencil's always DARK
- pencil.gotoFrame(1);
-
- }
-
- // In "CUTTING" state... cut intersected lines! & add to trail
- if(self.state==2){
-
- // Try cutting
- var line = [mouse.lastX, mouse.lastY, mouse.x, mouse.y];
- self.sim.tryCuttingConnections(line);
-
- // Add to trail
- self.cutTrail.unshift([mouse.x,mouse.y]); // add to start
- if(self.cutTrail.length>10){
- self.cutTrail.pop(); // remove from end
+ self.state = 0;
}
- // Pencil's always RED
- pencil.gotoFrame(2);
+ // In "NORMAL" state... tell Pencil what frame to go to
+ if(self.state==0){
+ if(!Simulations.IS_RUNNING){
+ var peepHovered = self.sim.getHoveredPeep(0);
+ pencil.gotoFrame( peepHovered ? 1 : 0 );
+ }else{
+ pencil.gotoFrame(0);
+ }
+ }
+
+ // In "CONNECTING" state... show where to connect to
+ if(self.state==1){
+
+ // Connect to a nearby hovered peep?
+ var peepHovered = self.sim.getHoveredPeep(20);
+ if(peepHovered==self.connectFrom) peepHovered=null; // if same, nah
+ self.connectTo = peepHovered ? peepHovered : mouse;
+
+ // Pencil's always DARK
+ pencil.gotoFrame(1);
+
+ }
+
+ // In "CUTTING" state... cut intersected lines! & add to trail
+ if(self.state==2){
+
+ // Try cutting
+ var line = [mouse.lastX, mouse.lastY, mouse.x, mouse.y];
+ self.sim.tryCuttingConnections(line);
+
+ // Add to trail
+ self.cutTrail.unshift([mouse.x,mouse.y]); // add to start
+
+ // Pencil's always RED
+ pencil.gotoFrame(2);
+
+ }
}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();
}
};
diff --git a/js/sim/Simulations.js b/js/sim/Simulations.js
index 22a65fb..9d6943b 100644
--- a/js/sim/Simulations.js
+++ b/js/sim/Simulations.js
@@ -397,7 +397,14 @@ function Sim(config){
var _draggingPeep = null;
var _draggingOffset = {x:0,y:0};
var _keyHandlers = [];
+ var _resetConnectorCutter = function(){
+ self.connectorCutter.sandbox_state = 0;
+ };
_keyHandlers.push(subscribe("key/down/space",function(){
+ _resetConnectorCutter();
+ self._startMove();
+ }));
+ self._startMove = function(){
if(!_draggingPeep){ // prevent double-activation
var hoveredPeep = self.getHoveredPeep(0);
if(hoveredPeep){
@@ -406,26 +413,35 @@ function Sim(config){
_draggingOffset.y = _draggingPeep.y-self.mouse.y;
}
}
- }));
+ };
_keyHandlers.push(subscribe("key/up/space",function(){
- _draggingPeep = null;
+ self._stopMove();
}));
+ self._stopMove = function(){
+ _draggingPeep = null;
+ };
_keyHandlers.push(subscribe("key/down/1",function(){
- _addPeepAtMouse(false);
+ _resetConnectorCutter();
+ self._addPeepAtMouse(false);
}));
_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);
if(!overlapPeep){
self.addPeep(self.mouse.x, self.mouse.y, infected);
}
};
_keyHandlers.push(subscribe("key/down/delete",function(){
+ _resetConnectorCutter();
+ self._deletePeep();
+ }));
+ self._deletePeep = function(){
var toDeletePeep = self.getHoveredPeep(0);
if(toDeletePeep) self.removePeep(toDeletePeep);
- }));
+ };
self.getCurrentNetwork = function(){
var savedNetwork = {
diff --git a/js/slideshow/Pencil.js b/js/slideshow/Pencil.js
index 9f0bf2b..c056bfe 100644
--- a/js/slideshow/Pencil.js
+++ b/js/slideshow/Pencil.js
@@ -12,14 +12,19 @@ function Pencil(){
self.canvas = createCanvas( $("#pencil"), 100, 100 );
self.ctx = self.canvas.getContext('2d');
- // Sprite
+ // Sprites
self.sprite = new Sprite({
src: "sprites/pencil.png",
frames:3, sw:200, sh:200,
});
- self.sprite.pivotX = 0;
- self.sprite.pivotY = 200;
- self.sprite.scale = 0.75;
+ self.toolsSprite = new Sprite({
+ src: "sprites/sandbox_tools.png",
+ 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 _margin = 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 gotoRotation = -sigmoid(xy_velocity) * Math.TAU/8;
self.sprite.rotation = self.sprite.rotation*0.8 + gotoRotation*0.2;
+ self.toolsSprite.rotation = self.sprite.rotation;
// Pencil's offset
var gotoOffset = Mouse.pressed ? -8 : 10;
@@ -61,6 +67,17 @@ function Pencil(){
self.canvas.style.left = self.x-_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
var ctx = self.ctx;
ctx.clearRect(0,0,self.canvas.width,self.canvas.height);
@@ -79,9 +96,9 @@ function Pencil(){
}
// Draw pencil
- self.sprite.x = _offset;
- self.sprite.y = -_offset;
- self.sprite.draw(ctx);
+ sprite.x = _offset;
+ sprite.y = -_offset;
+ sprite.draw(ctx);
ctx.restore();
diff --git a/js/slideshow/SandboxUI.js b/js/slideshow/SandboxUI.js
index c4e23ec..89b2190 100644
--- a/js/slideshow/SandboxUI.js
+++ b/js/slideshow/SandboxUI.js
@@ -76,22 +76,40 @@ function SandboxUI(container){
var toolChooserLabel = document.createElement("div");
toolChooserLabel.innerHTML = getWords("sandbox_tool_chooser");
toolChooserLabel.style.marginTop = "1em";
+ var tools = [
+ "pencil",
+ "add",
+ "add_infected",
+ "move",
+ "delete",
+ "clear"
+ ];
var toolChooser = new ChooseOne({
- options:[
- "pencil",
- "add",
- "add_infected",
- "move",
- "delete",
- "clear"
- ],
+ options:tools,
makeButton: function(value){
+
var button = document.createElement("div");
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;
+
},
oninput:function(value){
+ // update sim
+ var sandbox_state = tools.indexOf(value);
+ slideshow.simulations.sims[0].connectorCutter.sandbox_state = sandbox_state;
}
});
container.appendChild(toolChooserLabel);
diff --git a/sprites/sandbox_tools.png b/sprites/sandbox_tools.png
new file mode 100644
index 0000000..dbd6670
Binary files /dev/null and b/sprites/sandbox_tools.png differ