Implemented autocomplete

sources/links/main.css

@@ -13,8 +13,11 @@ yu { display:block; }
 
 #ronin { background:#eee; height: 100vh; width:100vw; }
 #commander, #hint { position: fixed;bottom: 0px;left: 0px;width: 100vw;line-height: 40px;-webkit-user-select: none;-webkit-app-region: drag;z-index: 900;height: 40px; font-size:11px;}
-#commander { z-index: 9000 }
+#commander { z-index: 9000; background:black; }
-#commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 40px;font-size: 11px;color: white; margin-left:20px; }
+#commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 40px;font-size: 11px;color: white; margin-left:20px;    z-index: 9000;position: relative; }
-#hint { background:black; color:#666; padding-left:20px;}
+#hint {  color:#666; padding-left:20px;}
 #hint b { font-family: 'input_mono_regular'; color:#999;}
 #hint i { font-style: italic; }
+#hint .autocomplete { background:white; color:black; }
+
+#cursor_hint { position: absolute;top: 0px;right: 20px;color: white;  }

sources/scripts/core/commander.js

@@ -77,6 +77,23 @@ function Commander()
     ronin.guide.update();
   }
 
+  this.autocomplete = function()
+  {
+    var target_module = ronin.commander.query().module;
+
+    if(ronin.modules[target_module]){
+      var ac = ronin.hint.find_autocomplete(ronin.modules[target_module].methods,":");
+    }
+    else{
+      var ac = ronin.hint.find_autocomplete(ronin.modules," ");
+    }
+
+    if(ac.lenght < 1 || !ac[0]){ return; }
+
+    this.append(ac[0]);
+    this.focus();
+  }
+
   this.on_input = function(e)
   {
     ronin.commander.update();
@@ -103,6 +120,12 @@ function Commander()
     ronin.commander.update();
   }
 
+  this.append = function(str)
+  {
+    ronin.commander.input_el.value += str;
+    ronin.commander.update();    
+  }
+
   this.query = function()
   {
     return new Query(ronin.commander.input_el.value);

sources/scripts/core/hint.js

@@ -2,11 +2,29 @@ function Hint()
 {
   this.el = document.createElement('yu');
   this.el.id = "hint";
+  this.cursor_hint_el = document.createElement('yu');
+  this.cursor_hint_el.id = "cursor_hint";
 
   this.install = function()
   {
-    ronin.el.appendChild(this.el);
+    ronin.commander.el.appendChild(this.el);
-    this.el.innerHTML = "";
+    ronin.commander.el.appendChild(this.cursor_hint_el);
+    this.cursor_hint_el.innerHTML = "Hello";
+  }
+
+  this.find_autocomplete = function(collection,append = "")
+  {
+    var target = ronin.commander.query().last;
+    var a = [];
+
+    for(id in collection){
+      var name = collection[id].name;
+      if(name && name.substr(0,target.length) == target){
+        a.push(name.substr(target.length,20)+append)
+      }
+    }
+
+    return a;
   }
 
   this.update = function(e = null)
@@ -25,20 +43,32 @@ function Hint()
       this.el.innerHTML = html;
     }
     else if(ronin.modules[target_module] && ronin.modules[target_module].methods[target_method]){
-      this.el.innerHTML = this.pad(ronin.commander.input_el.value)+ronin.modules[target_module].methods[target_method].docs();
+      this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" "+ronin.modules[target_module].methods[target_method].docs();
     }
     else if(ronin.modules[target_module]){
-      this.el.innerHTML = this.pad(ronin.commander.input_el.value)+ronin.modules[target_module].hint();
+      var ac = this.find_autocomplete(ronin.modules[target_module].methods,":");
+      if(ac.length > 0){
+        this.el.innerHTML = this.pad(ronin.commander.input_el.value)+"<span class='autocomplete'>"+ac[0]+"</span> > Press tab to autocomplete."  
       }
       else{
-      this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" > Idle."
+        this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" "+ronin.modules[target_module].hint();  
+      }
+    }
+    else{
+      var ac = this.find_autocomplete(ronin.modules);
+      if(ac.length > 0){
+        this.el.innerHTML = this.pad(ronin.commander.input_el.value)+"<span class='autocomplete'>"+ac[0]+"</span> > Press tab to autocomplete."  
+      }
+      else{
+        this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" > Unknown command."  
+      }
     }
   }
 
   this.pad = function(input)
   {
     var s = "";
-    for (i = 0; i < input.length+1; i++){
+    for (i = 0; i < input.length; i++){
       s += "_";
     }
     return "<span style='color:RGBA(0,0,0,0)'>"+s+"</span>";

sources/scripts/core/keyboard.js

@@ -23,7 +23,7 @@ function Keyboard()
 
     if(e.key == "tab" || e.keyCode == 9){
       e.preventDefault();
-      ronin.commander.focus();
+      ronin.commander.autocomplete();
       return;
     }
 

sources/scripts/core/query.js

@@ -7,6 +7,7 @@ function Query(query_str = "")
   this.methods = {};
   this.settings = {};
   this.routes = {};
+  this.last = query_str.indexOf(" ") > -1 ? query_str.split(" ")[query_str.split(" ").length-1] : query_str;
 
   for(part_id in parts){
     var part = parts[part_id];

sources/scripts/modules/path.js

@@ -4,17 +4,6 @@ function Path()
 
   this.settings = {thickness:4,color:"white",cap:"square"};
   
-  this.methods.svg = new Method("svg","M0,0 L100,100","",function(q){    
-    var path = ronin.commander.query().raw.replace("svg:","").trim();
-    var ctx = ronin.render.context();
-    ctx.beginPath();
-    ctx.lineCap = ronin.path.settings.cap;
-    ctx.lineWidth = ronin.path.settings.thickness;
-    ctx.strokeStyle = ronin.path.settings.color;
-    ctx.stroke(new Path2D(path));
-    ctx.closePath();
-  });
-
   this.methods.stroke = new Method("stroke","x,y&","",function(q){
     ronin.preview.clear();
 
@@ -23,9 +12,9 @@ function Path()
     var ctx = ronin.render.context();
 
     ctx.beginPath();
-    ctx.lineCap = r.path.settings.cap;
+    ctx.lineCap = ronin.path.settings.cap;
-    ctx.lineWidth = r.path.settings.thickness;
+    ctx.lineWidth = ronin.path.settings.thickness;
-    ctx.strokeStyle = r.path.settings.color;
+    ctx.strokeStyle = ronin.path.settings.color;
     ctx.stroke(new Path2D(path));
     ctx.closePath();
   });
@@ -38,13 +27,24 @@ function Path()
     var ctx = ronin.render.context();
 
     ctx.beginPath();
-    ctx.lineCap = r.path.settings.cap;
+    ctx.lineCap = ronin.path.settings.cap;
-    ctx.lineWidth = r.path.settings.thickness;
+    ctx.lineWidth = ronin.path.settings.thickness;
-    ctx.strokeStyle = r.path.settings.color;
+    ctx.fillStyle = ronin.path.settings.color;
     ctx.fill(new Path2D(path));
     ctx.closePath();
   });
 
+  this.methods.svg = new Method("svg","M0,0 L100,100","",function(q){    
+    var path = ronin.commander.query().raw.replace("svg:","").trim();
+    var ctx = ronin.render.context();
+    ctx.beginPath();
+    ctx.lineCap = ronin.path.settings.cap;
+    ctx.lineWidth = ronin.path.settings.thickness;
+    ctx.strokeStyle = ronin.path.settings.color;
+    ctx.stroke(new Path2D(path));
+    ctx.closePath();
+  });
+
   this.preview = function(q)
   {
     if(!q.methods.stroke){ return; }