Replacing commander with Terminal

2017-03-09 15:49:30 -07:00
parent 19d971fc79
commit 411d7d9fff
13 changed files with 226 additions and 175 deletions
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
    <script type="text/javascript" src="scripts/units/range.js"></script>
    
    <script type="text/javascript" src="scripts/modules/cursor.js"></script>
+    <script type="text/javascript" src="scripts/modules/terminal.js"></script>
    <script type="text/javascript" src="scripts/modules/module.js"></script>
    <script type="text/javascript" src="scripts/modules/stroke.js"></script>
    <script type="text/javascript" src="scripts/modules/vector.js"></script>
@@ -29,7 +30,6 @@
    <script type="text/javascript" src="scripts/modules/eye.js"></script>
    <script type="text/javascript" src="scripts/modules/typographe.js"></script>
    <script type="text/javascript" src="scripts/modules/render.js"></script>
-    <script type="text/javascript" src="scripts/modules/preset.js"></script>
    
    <script type="text/javascript" src="scripts/filters/filter.js"></script>
    <script type="text/javascript" src="scripts/filters/stencil.js"></script>
@@ -42,10 +42,7 @@

    <script type="text/javascript" src="scripts/core/keyboard.js"></script>
    <script type="text/javascript" src="scripts/core/command.js"></script>
-    <script type="text/javascript" src="scripts/core/commander.js"></script>
-    <script type="text/javascript" src="scripts/core/commander.hint.js"></script>
    <script type="text/javascript" src="scripts/core/ronin.js"></script>
-    <script type="text/javascript" src="scripts/core/widget.js"></script>
    
    <link rel="stylesheet" type="text/css" href="links/reset.css"/>
    <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
@@ -56,11 +53,7 @@
    <div id='ronin'>
      <div id='cursor'></div>
      <div id='surface'></div>
-      <div id='widget'>Loading..</div>
-      <div id ='commander'>
-        <div id='commander_hint'></div>
-        <input id='commander_input'/>
-      </div>
+      <div id='terminal'></div>
    </div>
    <script type="text/javascript" src="scripts/core/init.js"></script>
  </body>
--- a/links/main.css
+++ b/links/main.css
@@ -4,47 +4,17 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 canvas:hover { cursor: none;}

 #ronin { width:100%; height:100%; overflow:hidden; background:#111; background-image:url(../media/graphics/grid.svg); background-position: center center; }
-#surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:3px;}
-#surface .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
+#surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:5px; border:1px solid #333;}
+#surface > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
+#surface widget { position: absolute; top:0px; left:0px; line-height: 20px; font-size:10px; z-index:9000; color:white; width:100%; height:100%; }
+#surface widget span { display:inline-block; padding:2px 10px; }
+#surface widget .cursor { position:absolute; bottom:0px; right:0px; }
 #overlay { position:absolute; z-index:1000;}
-#widget { color:#fff; position:absolute; font-size:10px; padding-top:10px; border-top:1px solid #333; background-image:url(../media/graphics/logo.svg); background-repeat:no-repeat; background-size:80px 80px; height:100px; background-position: -10px 10px; line-height:20px;min-width: 300px}
-#widget .module:first-child { margin-left:80px; }
-#widget .module { float:left; margin-right:10px; margin-top:5px;}
-#widget .module .layer { color:#999; padding:2px 5px;}
-#widget .module .highlight { background:#fff; color:black;}
-#widget .module .highlight.managed { background:red; color:black; }
-#widget .cursor { text-align: right;margin-top: 5px;position: absolute;right:0px}
-#widget .layer:hover { cursor:pointer;}
 #cursor { width:10px; height:10px; position:fixed;border:1px solid red; border-radius:10px; z-index:8000; pointer-events: none}

-#commander { display:none; z-index: 2000; position:fixed; }
-#commander.visible { display:block; }
-#commander.hidden { display:none; }
-#commander input { background:none; padding:10px; position:fixed; bottom:0; color:white; font-size:11px; left:0; border:0; width:calc(100vw); cursor:pointer; display:block; height:35px;}
-#commander input:before { content:"input"; color:e7fff8;}
-
-#commander_hint { background: #000;position: fixed;bottom: 0px;left:0px;padding: 10px;font-size: 11px;width: calc(100vw - 20px);color: #999; height:15px;}
-#commander_hint .rune { color:#e7fff8; display:inline-block; margin-right:10px;}
-#commander_hint .module { color:#ccc; display:inline-block; margin-right:10px;}
-#commander_hint .command { color:#fff; display:inline-block; margin-right:10px;}
-#commander_hint .param { font-style: italic;}
-#commander_hint .param:after { content:" "; }
-#commander_hint .param:last-child:after { content:"";}
-#commander_hint .value { color:#e7fff8;}
-#commander_hint .value:after { content:" "; color:#999; }
-#commander_hint .value:last-child:after { content:"";}
-#commander_hint .variable_key { color:#aaa; font-weight:bold;}
-#commander_hint .variable_value { color:#aaa;}
-
-#help_view { background:white; position:fixed; top:0px; left:0px; height:100vh; width:100vw; display:none; font-size:11px; line-height:20px; z-index:9000;}
-#help_view .wrapper { padding:60px }
-#help_view .logo { width:90px; height:90px; display: block; margin-left:-10px; margin-bottom:40px;}
-#help_view h1 { font-family:"input_mono_regular",courier,monospace; font-size:20px; margin-bottom:20px; line-height:20px;}
-#help_view h2 { font-family:"input_mono_regular",courier,monospace; font-size:11px; line-height:20px; text-transform: uppercase;}
-#help_view b { display: inline-block; font-family:"input_mono_regular",courier,monospace; }
-#help_view a { text-decoration: underline; }
-#help_view div.cat { float:left; margin-right:40px; }
-#help_view div.cat ul { margin-bottom:20px; }
-#help_view ul li { line-height:20px; }
-#help_view a:hover { text-decoration: none; cursor: pointer }
-#help_view:hover { cursor: none; pointer-events: none}
+#terminal { position: fixed; bottom:0px; left:0px; background:#000; width:100vw; height: 120px;overflow: hidden;}
+#terminal input { display: block; position:absolute; bottom:0px; width:100vw; padding:0px 5px; font-size:10px; line-height: 20px; background:none; z-index:900;}
+#terminal hint { background:#cc0000; position:absolute; bottom:0px; line-height: 20px; padding:0px 5px; width:100vw;}
+#terminal logs { display: block;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; }
--- a/scripts/core/init.js
+++ b/scripts/core/init.js
@@ -1,13 +1,10 @@
 var ronin = new Ronin();
 ronin.element = document.getElementById('ronin');
 ronin.surface.element = document.getElementById('surface');
-ronin.widget.element = document.getElementById('widget');
 ronin.cursor.element = document.getElementById('cursor');
+ronin.terminal.element = document.getElementById('terminal');
 ronin.cursor.mode = ronin.brush;

-var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
-commander.hint.element = document.getElementById('commander_hint');
-
 // Cursor

 document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e));}, false);
@@ -34,13 +31,14 @@ starting_canvas.height = window.innerHeight - 300;
 starting_canvas.width = parseInt(starting_canvas.width/40) * 40;
 starting_canvas.height = parseInt(starting_canvas.height/40) * 40;

-commander.query("~ "+ronin.timestamp());
-commander.query("@ "+starting_canvas.render());
-commander.query("@ layer=Background");
-commander.query("@ #222");
-commander.query("@ layer=Main");
-commander.query("> 0,0");
-commander.query("> 1,1");
-commander.query("> 2,2");
-commander.query("> #ff0000");
-commander.query("~ Ready.");
+ronin.terminal.query("~ "+ronin.timestamp());
+ronin.terminal.query("@ "+starting_canvas.render());
+ronin.terminal.query("@ layer=Main");
+ronin.terminal.query("> 0,0");
+ronin.terminal.query("> 1,1");
+ronin.terminal.query("> 2,2");
+ronin.terminal.query("> #ff0000");
+ronin.terminal.query("~ Ready.");
+
+ronin.terminal.input_element.focus();
+ronin.surface.update_widget();
--- a/scripts/core/keyboard.js
+++ b/scripts/core/keyboard.js
@@ -12,7 +12,7 @@ function Keyboard()
      this.alt_held = true;
    }
    ronin.cursor.update(event);
-    ronin.widget.update();
+    ronin.surface.update_widget();
  }

  this.listen_onkeyup = function(event)
@@ -43,10 +43,9 @@ function Keyboard()
    }

    // Passive
-    commander.passive(commander.element_input.value);
+    ronin.terminal.passive(ronin.terminal.input_element.value);
    
-    // ronin.cursor.set_mode(ronin.brush);
-    ronin.widget.update();
+    ronin.surface.update_widget();
  };

  this.key_tab = function()
@@ -55,7 +54,7 @@ function Keyboard()

  this.key_enter = function()
  {
-    commander.query(commander.element_input.value);
+    ronin.terminal.query(ronin.terminal.input_element.value);
  }

  this.key_space = function()
@@ -64,12 +63,10 @@ function Keyboard()

  this.key_arrow_up = function()
  {
-    commander.prev_cmd();
  }

  this.key_arrow_down = function()
  {
-    commander.next_cmd();
  }

  this.key_arrow_left = function()
@@ -82,14 +79,11 @@ function Keyboard()

  this.key_colon = function()
  {
-    commander.show();
    return false;
  }

  this.key_escape = function()
  {
-    commander.hide();
-
    if(ronin.module){ ronin.module.key_escape(); }
  }

--- a/scripts/core/ronin.js
+++ b/scripts/core/ronin.js
@@ -2,22 +2,21 @@ function Ronin()
 {
  this.modules  = {};
  this.element  = null;  
-  this.widget   = new Widget();
  
  this.surface  = new Surface("@");
  this.fileload = new FileLoad("/");
  this.filesave = new FileSave("$");
  this.history  = new History("^");
  this.overlay  = new Overlay("|");
-  this.brush    = new Brush(">");
+  this.brush    = new Brush("-");
  this.eye      = new Eye("*");
  this.render   = new Render("%");
  this.stroke   = new Stroke("_");
  this.vector   = new Vector("+");
  this.help     = new Help("?");
  this.typo     = new Typographe("&");
-  this.preset   = new Preset("-");
  this.cursor   = new Cursor(".");
+  this.terminal = new Terminal(">");
  
  this.modules[this.surface.rune]  = this.surface;
  this.modules[this.fileload.rune] = this.fileload;
@@ -30,8 +29,8 @@ function Ronin()
  this.modules[this.typo.rune]     = this.typo;
  this.modules[this.stroke.rune]   = this.stroke;
  this.modules[this.vector.rune]   = this.vector;
-  this.modules[this.preset.rune]   = this.preset;
  this.modules[this.help.rune]     = this.help;
+  this.modules[this.terminal.rune] = this.terminal;

  this.modules[this.cursor.rune]   = this.cursor;

@@ -71,6 +70,5 @@ function Ronin()

  this.on_resize = function()
  {
-    this.widget.on_resize();
  }
 }
--- a/scripts/modules/brush.js
+++ b/scripts/modules/brush.js
@@ -48,13 +48,13 @@ function Brush(rune)
  this.size_up = function()
  {
    this.size -= this.size > 1 ? 1 : 0;
-    ronin.widget.update();
+    ronin.surface.update_widget();
  }

  this.size_down = function()
  {
     this.size += 1;
-     ronin.widget.update();
+     ronin.surface.update_widget();
  }
  
  this.add_pointer = function(cmd)
@@ -80,7 +80,7 @@ function Brush(rune)
      return "Eraser "+this.size;
    }
    else{
-      return "Brush "+ronin.brush.pointers.length+"x "+this.size+" <span style='color:"+this.color.hex+"'>&#9679;</span><br />";  
+      return "<i style='color:"+this.color.hex+"'>&#9679;</i> Brush "+ronin.brush.pointers.length+"x "+this.size;  
    }
  }

--- a/scripts/modules/cursor.js
+++ b/scripts/modules/cursor.js
@@ -126,7 +126,7 @@ function Cursor(rune)
    if(this.mode.constructor.name != Cursor.name){
      this.mode.mouse_down(position);  
    }
-    ronin.widget.update();
+    ronin.surface.update_widget();
  }
  
  this.mouse_move = function(position)
@@ -154,7 +154,7 @@ function Cursor(rune)
    if(this.mode.constructor.name != Cursor.name){
      this.mode.mouse_up(position);  
    }
-    ronin.widget.update();
-    commander.element_input.focus();
+    ronin.surface.update_widget();
+    ronin.terminal.input_element.focus();
  }
 }
--- a/scripts/modules/help.js
+++ b/scripts/modules/help.js
@@ -4,71 +4,58 @@ function Help(rune)

  this.view = document.createElement("div");
  
-  this.install = function(cmd)
+  this.active = function(cmd)
  {
-    console.log("Installing "+ronin.modules[this.rune].constructor.name);
+    s = "hello";

-    this.view.setAttribute("id","help_view");
-    var html = "";
-    html += "<img src='media/graphics/logo.black.svg' class='logo'/>";
-    html += this.view_controls();
-    html += this.view_modules();
-    html += this.view_units();
-    html += this.view_presets();
-    this.view.innerHTML = "<div class='wrapper'>"+html+"<hr/></div>";
+    lines = [];

-    ronin.element.appendChild(this.view);
-  }
+    // Modules
+    // TODO: Have the modules return their own help string
+    lines.push("Modules: ");
+    Object.keys(ronin.modules).forEach(function (key) {
+      html = "";
+      var parameters = "";
+      html += "<i>"+key+"</i> "+ronin.modules[key].constructor.name+" ";
+      for (i = 0; i < ronin.modules[key].parameters.length; i++) {
+        html += "<b>"+ronin.modules[key].parameters[i].name+"</b> ";
+      }
+      lines.push(html);
+    });

-  this.on_resize = function()
-  {
-    this.view.style.left = (window.innerWidth/2)-(ronin.surface.size.width/2);
-    this.view.style.top = (window.innerHeight/2)+(ronin.surface.size.height/2)+20;
-  }
+    // Filters
+    lines.push("Filters: ");
+    for(var filter in ronin.modules["%"].collection){
+      html = filter+" ";
+      for (i = 0; i < ronin.modules["%"].collection[filter].parameters.length; i++) {
+        html += "<b>"+ronin.modules["%"].collection[filter].parameters[i].name+"</b> ";
+      }
+      lines.push(html);
+    }

-  this.passive = function(cmd)
-  {
-    this.view.style.display = "block";
-    ronin.cursor.element.style.display = "none";
-  }
+    // Controls
+    lines.push("Controls: ");
+    lines.push("<b>ctrl</b> Draw Overlays\n");
+    lines.push("<b>alt</b> Drag Surface\n");
+    lines.push("<b>shift</b> Erase\n");
+    lines.push("<b>shift+ctrl</b> Eyedrop\n");
+    lines.push("<b>shift+alt</b> Move Layer\n");

-  this.key_escape = function()
-  {
-    this.view.style.display = "none";
+    // Units
+    lines.push("Units: ");
+    var units = [new Value(), new Position(), new Rect(), new Color(), new Angle(), new Variable(), new Bang()]
+    for(key in units){
+      lines.push(units[key].render());
+    }
+
+    // Print
+    for(line in lines){
+      ronin.terminal.log(new Log(this,lines[line]));
+    }
  }
  
  //

-  this.view_controls = function()
-  {
-    html = "<h1>Controls</h1>";
-    html += "<ul>";
-    html += "<li><b>ctrl</b> Draw Overlays</li>\n";
-    html += "<li><b>alt</b> Drag Surface</li>\n";
-    html += "<li><b>shift</b> Erase</li>\n";
-    html += "<li><b>shift+ctrl</b> Eyedrop</li>\n";
-    html += "<li><b>shift+alt</b> Move Layer</li>\n";
-    html += "</ul>";
-    return "<div class='cat'>"+html+"</div>";
-  }
-  
-  this.view_modules = function()
-  {
-    html = "<h1>Modules</h1>";
-    html += "<ul>";
-    Object.keys(ronin.modules).forEach(function (key) {
-      var parameters = "";
-      html += "<li><i>"+key+"</i> "+ronin.modules[key].constructor.name+" ";
-      for (i = 0; i < ronin.modules[key].parameters.length; i++) {
-        html += "<b>"+ronin.modules[key].parameters[i].name+"</b> ";
-      }
-      html += "</li>\n";
-    });
-    html += "</ul>";
-    html += "\n";
-    
-    return "<div class='cat'>"+html+"</div>";
-  }

  this.view_units = function()
  {
@@ -82,16 +69,7 @@ function Help(rune)
    html += "<li>rate=10 variable: rate=10</li>\n";
    html += "</ul>";
    html += "\n";
-    html += "<h1>Filters</h1>\n\n";
-    html += "<ul>";
-    for(var filter in ronin.modules["%"].collection){
-      html += "<li>"+filter+" ";
-      for (i = 0; i < ronin.modules["%"].collection[filter].parameters.length; i++) {
-        html += "<b>"+ronin.modules["%"].collection[filter].parameters[i].name+"</b> ";
-      }
-      html += "</li>\n";
-    }
-    html += "</ul>";
+    
    html += "\n";
    return "<div class='cat'>"+html+"</div>";
  }
--- a/scripts/modules/preset.js
+++ b/scripts/modules/preset.js
@@ -6,6 +6,7 @@ function Preset(rune)
  this.collection["grid"] = {};
  this.collection["grid"]["glyph"] = "@ 300x300; @ layer=background ; @ #A1A1A1 ; . 15x15 4,4 ; @ layer=main";
  this.collection["grid"]["icon"] = "@ 360x360; @ layer=background ; @ #000000 ; . 15x15 4,4 ; @ layer=main";
+  this.collection["grid"]["rune"] = "@ 240x360; @ layer=background ; @ #000000 ; . 15x15 4,4 ; @ layer=main";

  this.collection["custom"] = {};
  this.collection["custom"]["default"] = "@ 720x405 ; / ../assets/todo.jpg 720x 0,0 ; % chromatic 2 ; / ../assets/logo.png 35x35 15,355";
--- a/scripts/modules/surface.js
+++ b/scripts/modules/surface.js
@@ -11,7 +11,14 @@ function Surface(rune)
  this.render_layer = null;

  this.size = new Rect("200x200");
+
+  this.widget_element = document.createElement("widget");
  
+  this.install = function()
+  {
+    this.element.appendChild(this.widget_element);
+  }
+
  this.active = function(cmd)
  {
    if(cmd.rect()){
@@ -23,13 +30,15 @@ function Surface(rune)
      this.context().rect(0, 0, this.active_layer.element.width, this.active_layer.element.height);
      this.context().fillStyle = cmd.color().hex;
      this.context().fill();
+      ronin.terminal.log(new Log(this,"Filled layer: "+cmd.color().hex)); 
+      this.element.style.border = "1px solid "+cmd.color().hex;
    }

    if(cmd.bang() && Object.keys(ronin.surface.layers).length > 1){
      this.layers[this.active_layer.name].element.outerHTML = "";
      delete this.layers[this.active_layer.name];
      this.select_any_layer();
-      ronin.widget.update();
+      ronin.surface.update_widget();
    }

    if(cmd.variable("layer")){
@@ -55,7 +64,7 @@ function Surface(rune)

  this.add_layer = function(layer)
  {
-    console.log("Creating layer:"+layer.name+"("+(layer.manager ? layer.manager.constructor.name : "")+")"); 
+    ronin.terminal.log(new Log(this,"Creating layer:"+layer.name+(layer.manager ? "["+layer.manager.constructor.name+"]" : ""))); 

    layer.resize(this.size);
    this.layers[layer.name] = layer;
@@ -85,18 +94,14 @@ function Surface(rune)
    ronin.surface.element.style.marginTop = -(rect.height/2);

    ronin.on_resize();
+    ronin.terminal.log(new Log(this,"Resized Surface to "+this.size.render()));
  }

  this.widget = function()
  {
    if(!this.active_layer){ return ""; }

-    var s = "";
-
-    Object.keys(ronin.surface.layers).forEach(function (key) {
-      s = ronin.surface.layers[key].widget()+s;
-    });
-    return this.rune+" "+this.size.render()+"<br />"+s;
+    return this.rune+" "+this.size.render();
  }
  
  this.widget_cursor = function()
@@ -104,6 +109,28 @@ function Surface(rune)
    return "Drag";
  }

+  // Widget
+
+  this.update_widget = function()
+  {
+    var s = "";
+    
+    s += "<span class='module'>";
+    for (var key in ronin.modules){
+      s += ronin.modules[key].widget() ? ronin.modules[key].widget()+" " : "";
+    }
+    s += "</span>";
+  
+    s += "<span class='cursor'>"+ronin.cursor.mode.widget_cursor()+"</span>";
+    
+    var keys = Object.keys(ronin.surface.layers);
+    var loc = keys.indexOf(this.active_layer.name);
+
+    s += "<span class='layer'>"+ronin.surface.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")</span>";
+
+    this.widget_element.innerHTML = s;
+  }
+
  // Commands

  this.layer_up = function()
@@ -157,8 +184,6 @@ function Surface(rune)
    ronin.surface.element.style.marginTop = -(this.size.height/2) + this.drag_offset_y;

    ronin.element.style.backgroundPosition = ((this.drag_offset_x/8))-(window.innerWidth % 20)+"px "+((this.drag_offset_y/8)-(window.innerWidth % 20))+"px";
-    ronin.widget.element.style.marginLeft = this.drag_offset_x;
-    ronin.widget.element.style.marginTop = this.drag_offset_y;

    this.drag_from = new Position(position.x,position.y);
  }
--- a/scripts/modules/surface.layer.js
+++ b/scripts/modules/surface.layer.js
@@ -56,14 +56,10 @@ function Layer(name,manager = null)
    e_name += this.name;

    var e_class = "";
-    e_class += "layer ";
    if(ronin.surface.active_layer.name == this.name){ e_class += "highlight "; }
    if(this.manager != null){ e_class += "managed "; }

-    var e_icon = this.manager ? "~" : "-";
-
-
-    return "<span class='"+e_class+"'>"+e_icon+" "+e_name+"</span><br />";
+    return "<span class='"+e_class+"'>"+e_name+"</span>";
  }

  this.move_from = null;
--- a/scripts/modules/terminal.js
+++ b/scripts/modules/terminal.js
@@ -0,0 +1,101 @@
+function Terminal(rune)
+{
+  Module.call(this,rune);
+
+  this.element = null;
+  this.input_element = document.createElement("input");
+  this.hint_element = document.createElement("hint");
+  this.logs_element = document.createElement("logs");
+
+  // Module
+  this.install = function(cmd)
+  {
+    this.element.appendChild(this.input_element);
+    this.element.appendChild(this.hint_element);
+    this.element.appendChild(this.logs_element);
+
+    this.hint_element.innerHTML = "_";
+  }
+
+  this.active = function(cmd)
+  {
+  }
+  
+  this.passive = function(content)
+  {
+    var key = content[0];
+    var cmd = new Command(content.substring(1).trim().split(" "));
+    
+    ronin.module = null;
+    
+    if(ronin.modules[key]){
+      ronin.modules[key].passive(cmd);
+      ronin.module = ronin.modules[key];
+      ronin.cursor.set_mode(ronin.module);
+    }
+    else{
+      ronin.cursor.set_mode(ronin.brush);
+    }
+  }
+
+  this.cmd = function()
+  {
+    var content = this.input_element.value.trim();
+    var key = content[0];
+    var cmd = new Command(content.substring(1).trim().split(" "));
+    return cmd;
+  }
+
+  this.queue = [];
+  
+  this.query = function(input_str)
+  {
+    this.input_element.value = "";
+
+    if(input_str.indexOf(";") > 0){
+      this.queue = input_str.split(";");
+    }
+    else{
+      this.queue = [];
+      this.queue.push(input_str)
+    }
+    this.run();
+  }
+
+  this.run = function()
+  {
+    if(!ronin.terminal.queue[0]){ console.log("Finished queue"); return; }
+
+    active(ronin.terminal.queue[0].trim());
+    ronin.terminal.queue.shift();
+
+    setTimeout(function(){ ronin.terminal.run(); }, 100);
+  }
+
+  function active(content)
+  {
+    var key = content[0];
+    var cmd = new Command(content.substring(1).trim().split(" "));
+
+    if(ronin.modules[key]){
+      ronin.modules[key].active(cmd);
+      ronin.history.add(content);
+    }
+    else{
+      ronin.terminal.log(new Log(ronin.terminal,"Unknown module: "+key));
+    }    
+  }
+
+  this.log = function(log)
+  {
+    this.logs_element.appendChild(log.element);
+  }
+}
+
+// Log
+
+function Log(host,message)
+{
+  this.element = document.createElement("log");
+  this.element.innerHTML = "<span class='rune'>"+host.rune+"</span> "+message;
+}
--- a/scripts/modules/vector.js
+++ b/scripts/modules/vector.js
@@ -87,18 +87,16 @@ function Vector(rune)
  {
    this.click = true;

-    commander.element_input.value = "+ "+this.create_path();
-    commander.hint.update();
-    this.passive(commander.cmd());
+    ronin.terminal.input_element.value = "+ "+this.create_path();
+    this.passive(ronin.terminal.cmd());
  }
  
  this.mouse_move = function(position)
  {
    if(!this.click){ return; }
-    commander.element_input.value = "+ "+this.create_path();
-    commander.element_input.value += "L"+position.render();
-    commander.hint.update();
-    this.passive(commander.cmd());
+    ronin.terminal.input_element.value = "+ "+this.create_path();
+    ronin.terminal.input_element.value += "L"+position.render();
+    this.passive(ronin.terminal.cmd());
  }
  
  this.mouse_up = function(position)
@@ -125,9 +123,8 @@ function Vector(rune)
      }
    }

-    commander.element_input.value = "+ "+this.create_path();
-    commander.hint.update();
-    this.passive(commander.cmd());
+    ronin.terminal.input_element.value = "+ "+this.create_path();
+    this.passive(ronin.terminal.cmd());
    this.last_pos = position;
  }