Almost there

links/main.css

@@ -1,28 +1,23 @@
 body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
 *:focus {outline: none; }
 
-#ronin { width:100%; height:100%; overflow:hidden; background:#ccc; background-image:url(../media/graphics/grid.svg); background-position: center center; }
-#frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px; background:#ddd;}
+#ronin { background:#ddd; width:100%; height:100%; overflow:hidden; background-image:url(../media/graphics/grid.svg); background-position: center center; }
+#frame { background:#111; width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px;  border-radius: 3px}
 #frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
-#frame.bright widget { color:#000; }
 #overlay { position:absolute; z-index:1000;}
 #frame { cursor:none;}
 
-#terminal { position: fixed;bottom: 0px;left: 0px;background: #eee;width: 100vw;height: 30px;overflow: hidden; }
-#terminal logs { display: none;position: absolute;bottom:20px;width:100vw;color:white}
-#terminal logs log { display: block; font-size:10px; line-height:25px; padding:0px 5px; color:#666;}
-#terminal logs log .rune { color:white; }
-#terminal logs log.error .rune { color:red; }
-#terminal logs log.input { color:white; }
-#terminal logs log.image img { height:85px;width:auto;border-radius: 3px }
-#terminal.locked input { color:red; }
-#terminal status { display: block;position: absolute;bottom: 0px;right: 0px;padding: 5px 15px 5px 31px;font-size: 12px;line-height: 20px;color: white;width:calc(40vw - 45px) }
-#terminal status .details { float:right; color:#555; }
+#terminal { position: fixed;bottom: 0px;left: 0px;background: #eee;width: 100vw;height: 60px;overflow: hidden;}
 
-#terminal.hide { height:25px; }
-#terminal.mini { height:120px; }
-#terminal.full { height:100vh; }
+#terminal #hint, #terminal #widget, #terminal input, #terminal #logs { display: block;position: fixed;bottom: 0px;line-height: 20px; width:calc(100vw - 40px); background:none; color:#777; font-size:11px; padding:5px 20px; white-space: pre; }
 
-#terminal input   { position:fixed; bottom:0px; z-index:900; line-height: 20px; width:calc(100vw - 20px); background:none; color:black; font-size:11px; padding:5px 10px;}
-#terminal hint    { display: block;position: fixed;bottom: 0px;line-height: 20px; width:calc(100vw - 20px); background:none; color:#999; font-size:11px; padding:5px 10px; white-space: pre; }
-#terminal #widget { display: block;position: fixed;bottom: 0px;line-height: 20px; width:calc(100vw - 20px); background:none; color:#999; font-size:11px; padding:5px 10px; white-space: pre; text-align: right}
+#terminal input { z-index: 9000; color:red; font-family: 'input_mono_regular'}
+#terminal input:focus { color:#000; }
+
+#terminal #logs { position:fixed; bottom:30px; border-bottom:1px solid #fff; }
+
+#terminal #widget { text-align: right}
+
+#terminal #hint .module { display: inline-block; color:black; }
+#terminal #hint .method { display: inline-block; color:black; }
+#terminal #hint .params { display: inline-block; color:#999; font-style: italic }

media/graphics/grid.svg

@@ -1,5 +1,6 @@
 <svg width="40px" height="40px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
-  <circle cx="20" cy="20" r="2" fill="#ddd"></circle>
-  <line x1="20" y1="0" x2="20" y2="40" stroke="#ddd"></line>
-  <line x1="0" y1="20" x2="40" y2="20" stroke="#ddd"></line>
+  <!-- <line x1="15" y1="13" x2="15" y2="17" stroke="#ccc"></line> -->
+  <line x1="0" y1="20" x2="40" y2="20" stroke="#ccc" stroke-dasharray="1,3" stroke-width="1"></line>
+  <line x1="20" y1="0" x2="20" y2="40" stroke="#ccc" stroke-dasharray="1,3" stroke-width="1"></line>
+  <circle cx="20" cy="20" r="1.5" fill="#ccc"></circle>
 </svg>

scripts/core/keyboard.js

@@ -21,12 +21,14 @@ function Keyboard()
     this.shift_held = false;
     this.alt_held = false;
 
-    switch (event.key || event.which) {
+    switch (event.key || event.keyCode || event.which) {
       case "Enter": this.key_enter(); break;
       case "ArrowUp": this.key_arrow_up(); break;
       case "ArrowDown": this.key_arrow_down(); break;
       case "ArrowLeft": this.key_arrow_left(); break;
       case "ArrowRight": this.key_arrow_right(); break;
+      case "]": ronin.brush.size_up(); break;
+      case "[": ronin.brush.size_down(); break;
       case ":": this.key_colon(); break;
       case "Escape": this.key_escape(); break;
       case 13:  this.key_enter();  break;

scripts/modules/brush.js

@@ -36,16 +36,12 @@ function Brush(rune)
 
   this.size_up = function()
   {
-    this.settings["size"] -= this.settings["size"] > 1 ? 1 : 0;
-    ronin.frame.widget.update();
-    ronin.terminal.log(new Log(this,"Increased pointer size to: "+this.settings["size"]));
+    this.settings["size"] += 1; 
   }
 
   this.size_down = function()
   {
-    this.settings["size"] += 1;
-    ronin.frame.widget.update();
-    ronin.terminal.log(new Log(this,"Decreased pointer size to: "+this.settings["size"]));
+    this.settings["size"] -= this.settings["size"] > 1 ? 1 : 0;
   }
 
   // Eraser

scripts/modules/cursor.js

@@ -152,9 +152,11 @@ function Cursor(rune)
   
   this.set_mode = function(mode = ronin.brush)
   {
+    if(!mode){ mode = ronin.brush; }
+
     if(this.mode == mode){ return; }
     this.mode = mode;
-    document.body.setAttribute("class",this.mode.constructor.name);
+    document.body.setAttribute("class",this.mode.name);
     ronin.widget.update();
   }
   

scripts/modules/frame.js

@@ -9,7 +9,7 @@ function Frame(rune)
   this.active_layer = null;
   this.render_layer = null;
 
-  this.add_method(new Method("resize",[new Rect().name]));
+  this.add_method(new Method("resize",[new Position().name,new Rect().name]));
   this.add_method(new Method("select",["text"]));
   
   this.install = function()
@@ -24,8 +24,8 @@ function Frame(rune)
 
     // Clamp
 
-    starting_canvas.width = parseInt(starting_canvas.width/40) * 40;
-    starting_canvas.height = parseInt(starting_canvas.height/40) * 40;
+    starting_canvas.width = parseInt(starting_canvas.width/40) * 40 - 40;
+    starting_canvas.height = parseInt(starting_canvas.height/40) * 40 - 40;
 
     this.resize(new Command(starting_canvas.width+"x"+starting_canvas.height));
   }
@@ -55,7 +55,7 @@ function Frame(rune)
 
     this.settings.size = rect;
 
-    return 1, "ok";
+    return 1, "Resized to "+this.settings.size.render();
   }
 
   this.select = function(params, preview = false)

scripts/modules/module.js

@@ -51,16 +51,26 @@ function Module(rune)
     this.methods[method.name] = method;
   }
   
-  this.hint = function(content)
+  this.hint = function(method)
   {
     var html = "";
 
-    for(method in this.methods){
-      html += ".<b>"+method+"</b> ";
+    if(method){
+      html += method.hint();
     }
-    for(setting in this.settings){
-      html += setting+"="+this.settings[setting]+" ";
+    else{
+      for(id in this.methods){
+        html += "<span class='method'>."+this.methods[id].name+"</span> ";
       }
+    }
+
+
+    // for(method in this.methods){
+    //   html += ".<b>"+method+"</b> ";
+    // }
+    // for(setting in this.settings){
+    //   html += setting+"="+this.settings[setting]+" ";
+    // }
 
     return html;
   }

scripts/modules/terminal.js

@@ -4,8 +4,11 @@ function Terminal(rune)
 
   this.element = document.createElement("div");
   this.input = document.createElement("input");
-  this.hint_element = document.createElement("hint");
-  this.logs_element = document.createElement("logs");
+  this.hint_element = document.createElement("div");
+  this.logs_element = document.createElement("div");
+  this.hint_element.id = "hint";
+  this.logs_element.id = "logs";
+  this.logs_element.innerHTML = "<log>Hello there</log>";
 
   this.history = [];
   this.locks = [];
@@ -26,7 +29,6 @@ function Terminal(rune)
 
   this.run = function()
   {
-
     var command = this.cmd();
     var module  = command.module();
     var method  = command.method();
@@ -47,18 +49,33 @@ function Terminal(rune)
     if(method){
       method.preview(command);
     }
-    this.hint_element.innerHTML = "<span class='input'>"+this.input.value+"</span> "+(module ? module.hint() : this.hint());
+    this.hint_element.innerHTML = "<span class='input'>"+this.input.value+"</span>"+(this.input.value ? " " : "")+(module ? module.hint(method) : this.hint(method));
+    ronin.cursor.set_mode(module);
   }
 
-  this.hint = function()
+  this.hint = function(method)
   {
     var html = "";
+    if(this.input.value){
       for(id in ronin.modules){
-      html += ronin.modules[id].name+" ";
+        if(this.input.value != ronin.modules[id].name.substr(0,this.input.value.length)){ continue; }
+        html += "<span class='module'>"+ronin.modules[id].name+"</span> ";
+      }
+    }
+    else{
+      for(id in ronin.modules){
+        html += "<span class='module'>"+ronin.modules[id].name+"</span> ";
+      }
     }
     return html;
   }
 
+  this.log = function(log)
+  {
+    this.logs_element.innerHTML = "";
+    this.logs_element.appendChild(log.element);
+  }
+
   this.cmd = function()
   {
     return new Command(this.input.value);
@@ -86,32 +103,6 @@ function Terminal(rune)
     rawFile.send(null);
     ronin.widget.update();
   }
-
-  this.parsed_input = function()
-  {
-    var content = this.input.value;
-
-    if(content.trim() == ""){ ronin.cursor.set_mode(ronin.brush); return "~"; }
-    if(content.trim()[0] == "~"){ return "~"; }
-
-    if(content.indexOf(".") > -1){
-      var module_name = content.split(" ")[0].split(".")[0]
-    }
-    else if(content.indexOf(":") > -1){
-      var module_name = content.split(" ")[0].split(":")[0]
-    }
-    else{
-      var module_name = content.split(" ")[0];
-    }
-
-    var method_name = content.indexOf(".") > -1 ? content.split(" ")[0].split(".")[1] : "default";
-    var setting_name = content.indexOf(":") > -1 ? content.split(" ")[0].split(":")[1] : null;
-
-    var parameters = content.split(" "); parameters.shift();
-    var parameters = new Command(parameters);
-
-    return {module_name: module_name, method_name: method_name, setting_name: setting_name, parameters: parameters};
-  }
 }
 
 // Log
@@ -123,6 +114,6 @@ function Log(host,message,error = false)
   this.error = error;
   this.element = document.createElement("log");
   this.element.setAttribute("class",error ? "error" : "okay");
-  this.element.innerHTML = "<span class='rune'>"+(host.rune ? host.rune : ">")+"</span> "+message;
+  this.element.innerHTML = "<span class='module'>"+host.name+"</span>: "+message;
   console.log(this.host.constructor.name,this.message);
 }

scripts/units/method.js

@@ -19,11 +19,11 @@ function Method(name,params,mouse_event)
     return s;
   }
 
-  this.help = function()
+  this.hint = function()
   {
     var s = "";
     for(id in this.params){
-      s += this.params[id]+":"
+      s += "<span class='params'>"+this.params[id]+"</span> ";
     }
     s = s.substr(0,s.length-1);
 
@@ -37,6 +37,6 @@ function Method(name,params,mouse_event)
 
   this.run = function(cmd)
   {
-    return this.host[this.name](cmd,false);
+    return ronin.terminal.log(new Log(this.host,this.host[this.name](cmd,false)));
   }
 }