Added layer select with arrows

links/main.css

@@ -11,6 +11,7 @@ canvas:hover { cursor: crosshair;}
 #widget .module { float:left; margin-right:10px; }
 #widget .module .highlight { color:#e7fff8; }
 #widget .cursor { float:right; text-align: right}
+#widget .layer:hover { cursor:pointer;}
 
 #commander { display:none; z-index: 2000; position:fixed; }
 #commander.visible { display:block; }

scripts/core/init.js

@@ -12,7 +12,7 @@ commander.hint.element = document.getElementById('commander_hint');
 document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e));}, false);
 document.addEventListener('mousemove', function(e){ ronin.cursor.mouse_move(ronin.position_in_canvas(e));}, false);
 document.addEventListener('mouseup', function(e){ ronin.cursor.mouse_up(ronin.position_in_canvas(e));}, false);
-// document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false);
+document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false);
 window.addEventListener('resize', function(){ ronin.on_resize(); }, true);
 
 // Keyboard
@@ -33,6 +33,7 @@ starting_canvas.height = parseInt(starting_canvas.height/40) * 40;
 
 commander.query("~ "+ronin.timestamp());
 commander.query("# "+starting_canvas.render());
-commander.query("# layer=render");
+commander.query("# layer=background");
+commander.query("# #efefef");
 commander.query("# layer=main");
 commander.query("> 1 0,0 #000000");

scripts/core/keyboard.js

@@ -18,8 +18,10 @@ function Keyboard()
       case 13:  this.key_enter();  break;
       case 186: this.key_colon();  break;
       case 27:  this.key_escape(); break;
-      case 219:  ronin.brush.size -= ronin.brush.size > 1 ? 1 : 0;ronin.widget.update(); break;
-      case 221:  ronin.brush.size += 1;ronin.widget.update(); break;
+      case 219:  ronin.brush.size_up(); break;
+      case 221:  ronin.brush.size_down(); break;
+      case 38:  ronin.surface.layer_up(); break;
+      case 40:  ronin.surface.layer_down(); break;
     }
 
     // Passive

scripts/modules/brush.js

@@ -44,6 +44,18 @@ function Brush(rune)
       ronin.overlay.draw(cmd.position());
     }
   }
+
+  this.size_up = function()
+  {
+    this.size -= this.size > 1 ? 1 : 0;
+    ronin.widget.update();
+  }
+
+  this.size_down = function()
+  {
+     this.size += 1;
+     ronin.widget.update();
+  }
   
   this.add_pointer = function(cmd)
   {
@@ -74,10 +86,6 @@ function Brush(rune)
 
     return this.pointers.length > 0 ? "Brush "+this.size+", "+this.pointers.length+" pointers" : "No Pointers";
   }
-
-  // Commands
-
-  // this.
   
   // Cursor
 

scripts/modules/surface.js

@@ -80,12 +80,12 @@ function Surface(rune)
   {
     if(!this.active_layer){ return ""; }
 
-    var s = "# "+this.size.render()+"<br />";
+    var s = "";
 
     Object.keys(ronin.surface.layers).forEach(function (key) {
-      s += ronin.surface.layers[key].widget();
+      s = ronin.surface.layers[key].widget()+s;
     });
-    return s;
+    return "# "+this.size.render()+"<br />"+s;
   }
   
   this.widget_cursor = function()
@@ -93,6 +93,26 @@ function Surface(rune)
     return "Drag";
   }
 
+  // Commands
+
+  this.layer_up = function()
+  {
+    var keys = Object.keys(ronin.surface.layers);
+    var loc = keys.indexOf(this.active_layer.name);
+
+    if(loc >= keys.length-1){ console.log("Reached end"); return false; }
+
+    if(keys[loc+1] != null){this.select_layer(ronin.surface.layers[keys[loc+1]]);}
+  }
+
+  this.layer_down = function()
+  {
+    var keys = Object.keys(ronin.surface.layers);
+    var loc = keys.indexOf(this.active_layer.name);
+
+    if(keys[loc-1] != null){this.select_layer(ronin.surface.layers[keys[loc-1]]);}
+  }
+
   // Layers
 
   this.context = function()