Replacing commander with Terminal

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;  
     }
   }
 

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();
   }
 }

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>";
   }

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";

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);
   }

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;

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;
+}

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;
   }