Added hints.

index.html

@@ -11,6 +11,7 @@
     <script type="text/javascript" src="scripts/ronin.canvas.js"></script>
     <script type="text/javascript" src="scripts/ronin.overlay.js"></script>
     <script type="text/javascript" src="scripts/ronin.file.js"></script>
+    <script type="text/javascript" src="scripts/ronin.hint.js"></script>
     <script type="text/javascript" src="scripts/ronin.brush.js"></script>
     <script type="text/javascript" src="scripts/ronin.brush.pointer.js"></script>
     
@@ -23,6 +24,7 @@
       <canvas id='overlay' width="1280" height="800"></canvas>
       <canvas id="myCanvas" width="1280" height="800" style="background:#efefef"></canvas>
       <div id ='commander'>
+        <div id='commander_hint'>Hey</div>
         <input id='commander_input'/>
       </div>
     </div>

links/main.css

@@ -8,4 +8,6 @@ canvas:hover { cursor: crosshair;}
 #commander { display:none; z-index: 2000; }
 #commander.visible { display:block; }
 #commander.hidden { display:none; }
-#commander input { background:black; padding:15px; position:fixed; bottom:0; color:white; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;}
+#commander input { background:black; padding:15px; position:fixed; bottom:0; color:white; font-size:14px; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;}
+
+#commander_hint {     background: black;position: absolute;bottom: 47px;padding: 15px 15px 0 15px;line-height: 17px;font-family: courier;font-size: 14px;width: 100vw;color: #999;}

scripts/commander.js

@@ -2,6 +2,7 @@ function Commander(element,element_input)
 {
   this.element = element;
   this.element_input = element_input;
+  this.cmd = null;
   
   this.show = function()
   {
@@ -25,7 +26,7 @@ function Commander(element,element_input)
       case "@":
         ronin.canvas.active(cmd);
         break;
-      case "~":
+      case "~": // TODO
         ronin.history.active(cmd);
         break;
       case "$":
@@ -40,13 +41,13 @@ function Commander(element,element_input)
       case "|":
         ronin.overlay.active(cmd);
         break;
-      case "^":
+      case "^": // TODO
         ronin.translate.active(cmd);
         break;
-      case "=":
+      case "=": // TODO
         ronin.zoom.active(cmd);
         break;
-      case "#":
+      case "#": // TODO
         ronin.layers.active(cmd);
         break;
       case ":":
@@ -61,35 +62,40 @@ function Commander(element,element_input)
   {
     var key = cmd_array[0];
     cmd_array.shift();
-    var cmd = new Command(cmd_array);
+    this.cmd = new Command(cmd_array);
     
     switch(key) {
       case "@":
-        ronin.canvas.passive(cmd);
+        ronin.canvas.passive(this.cmd);
+        ronin.module = ronin.canvas;
         break;
       case "~":
-        ronin.history.passive(cmd);
+        ronin.history.passive(this.cmd);
+        ronin.module = ronin.history;
         break;
       case "/":
-        ronin.file.passive(cmd);
+        ronin.file.passive(this.cmd);
+        ronin.module = ronin.file;
         break;
       case ">":
-        ronin.brush.passive(cmd);
+        ronin.brush.passive(this.cmd);
+        ronin.module = ronin.brush;
         break;
       case "|":
-        ronin.overlay.passive(cmd);
+        ronin.overlay.passive(this.cmd);
+        ronin.module = ronin.overlay;
         break;
-      case "^":
-        ronin.translate.passive(cmd);
+      case "^": // TODO
+        ronin.translate.passive(this.cmd);
+        ronin.module = ronin.translate;
         break;
-      case "=":
-        ronin.zoom.passive(cmd);
-        break;
-      case "#":
-        ronin.layers.passive(cmd);
+      case "=": // TODO
+        ronin.zoom.passive(this.cmd);
+        ronin.module = ronin.zoom;
         break;
       case ":":
-        ronin.filter.passive(cmd);
+        ronin.filter.passive(this.cmd);
+        ronin.module = ronin.filter;
         break;
     }
   }

scripts/keyboard.js

@@ -62,6 +62,8 @@ function Keyboard()
     else{
       commander.passive(cmd.split(" "));
     }
+    
+    ronin.hint.update();
   };
 
   this.key_tab = function()

scripts/main.js

@@ -7,6 +7,9 @@ ronin.canvas.element = canvas;
 ronin.overlay.element = document.getElementById('overlay');
 ronin.overlay.context().imageSmoothingEnabled = false;
 
+
+ronin.hint.element = document.getElementById('commander_hint');
+
 ronin.element = document.getElementById('ronin');
 
 var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));

scripts/ronin.brush.js

@@ -28,6 +28,15 @@ function Brush()
   {
   }
   
+  this.hint = function(cmd)
+  {
+    var hint_value = (cmd.value() ? "Size "+cmd.value()+" " : "");
+    var hint_position = (cmd.position() ? "Position "+cmd.position().x+","+cmd.position().y+" " : "");
+    var hint_color = (cmd.color() ? "Color "+cmd.color().hex+" " : "");
+    
+    return "Brush: "+hint_value+hint_position+hint_color;
+  }
+  
   // Commander
   
   this.settings = function(p)

scripts/ronin.canvas.js

@@ -26,6 +26,14 @@ function Canvas(element)
     }
   }
   
+  this.hint = function(cmd)
+  {
+    var hint_rect = (cmd.rect() ? "Resize to "+cmd.rect().width+"px by "+cmd.rect().height+"px " : "");
+    var hint_color = (cmd.color() ? "Fill with color "+cmd.color().hex+" " : "");
+    
+    return "Canvas: "+hint_rect+hint_color;
+  }
+  
   //
   
   this.resize = function(rect)

scripts/ronin.file.js

@@ -33,6 +33,15 @@ function File()
     }
   }
   
+  this.hint = function(cmd)
+  {
+    var hint_path = (cmd.path() ? "Path "+cmd.path()+" " : "");
+    var hint_position = (cmd.position() ? "Position "+cmd.position().x+","+cmd.position().y+" " : "");
+    var hint_rect = (cmd.rect() ? "Size "+cmd.rect().width+"px by "+cmd.rect().height+"px " : "");
+    
+    return "File: "+hint_path+hint_position+hint_rect;
+  }
+  
   this.save = function(cmd)
   {
     var d=canvas.toDataURL("image/png");

scripts/ronin.hint.js

@@ -0,0 +1,11 @@
+function Hint(element)
+{
+  Module.call(this);
+  
+  this.element = element;
+  
+  this.update = function()
+  {
+    this.element.innerHTML = !ronin.module ? "Missing" : ronin.module.hint(commander.cmd);
+  }
+}

scripts/ronin.history.js

@@ -0,0 +1,16 @@
+function History(element)
+{
+  Module.call(this);
+  
+  this.element = element;
+  
+  this.active = function(cmd)
+  {
+    
+  }
+  
+  this.passive = function(cmd)
+  {
+    
+  }
+}

scripts/ronin.js

@@ -5,6 +5,7 @@ function Ronin()
   this.overlay = new Overlay();
   this.brush   = new Brush();
   this.file   = new File();
+  this.hint   = new Hint();
   
   this.fill = function(p)
   {

scripts/ronin.module.js

@@ -1,12 +1,17 @@
 function Module()
 {
-  this.active = function()
+  this.active = function(cmd)
   {
     console.log("Nothing to do.");
   }
   
-  this.passive = function()
+  this.passive = function(cmd)
   {
     console.log("Nothing to do.");
   }
+  
+  this.hint = function(cmd)
+  {
+    return "unknown";
+  }
 }

scripts/ronin.overlay.js

@@ -16,6 +16,14 @@ function Overlay(element)
     
   }
   
+  this.hint = function(cmd)
+  {
+    var hint_position = (cmd.position() ? "Position "+cmd.position().x+","+cmd.position().y+" " : "");
+    var hint_rect = (cmd.rect() ? "Size "+cmd.rect().width+"px by "+cmd.rect().height+"px " : "");
+    
+    return "Overlay: "+hint_position+hint_rect;
+  }
+  
   // draw
   
   this.draw = function(position,rect)