Improved terminal feedback

links/main.css

@@ -7,6 +7,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 #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; }
+#surface.bright widget { color:#000; }
 #overlay { position:absolute; z-index:1000;}
 #surface { cursor:none;}
 

scripts/core/init.js

@@ -34,10 +34,11 @@ starting_canvas.height = parseInt(starting_canvas.height/40) * 40;
 ronin.terminal.query("~ "+ronin.timestamp());
 ronin.terminal.query("@ "+starting_canvas.render());
 ronin.terminal.query("@ layer=Main");
+ronin.terminal.query("@ #ff0000");
 ronin.terminal.query("- 0,0");
 ronin.terminal.query("- 1,1");
 ronin.terminal.query("- 2,2");
-ronin.terminal.query("- #ff0000");
+ronin.terminal.query("- #000000");
 ronin.terminal.query("~ Ready.");
 
 ronin.terminal.input_element.focus();

scripts/modules/brush.js

@@ -95,7 +95,7 @@ function Brush(rune)
     this.position_prev = position;
   }
   
-  // Cursor
+  // Mouse
   
   this.mouse_mode = function()
   {
@@ -106,14 +106,9 @@ function Brush(rune)
       return "<i style='color:"+this.color.hex+"'>&#9679;</i> Brush "+ronin.brush.pointers.length+"x "+this.size;  
     }
   }
-
-  this.is_drawing = false;
   
   this.mouse_down = function(position)
-  {
-    this.is_drawing = true;
-    this.position_prev = null;
-    
+  {    
     if(keyboard.shift_held == true){
       this.erase();
     }
@@ -122,12 +117,11 @@ function Brush(rune)
         ronin.brush.pointers[i].start();
       }
     }
-    
   }
   
   this.mouse_move = function(position,rect)
   {
-    if(this.is_drawing === false){ return; }
+    if(!this.mouse_held){ return; }
     
     if(keyboard.shift_held == true){
       this.erase();
@@ -140,10 +134,7 @@ function Brush(rune)
   }
   
   this.mouse_up = function(position,rect)
-  {
-    this.is_drawing = false;
-    this.position_prev = null;
-    
+  {    
     for (i = 0; i < ronin.brush.pointers.length; i++) {
       ronin.brush.pointers[i].stop();
     }

scripts/modules/cursor.js

@@ -38,7 +38,7 @@ function Cursor(rune)
 
     if(cmd.rect()){
       this.magnetism = cmd.rect();
-      this.draw(cmd.rect(),this.grid);
+      this.draw(this.magnetism,this.grid);
     }
   }
 
@@ -74,8 +74,6 @@ function Cursor(rune)
 
     this.pointer_last = this.pointer_last ? this.pointer_last : position;
 
-    this.layer.clear();
-
     this.layer.context().beginPath();
     this.layer.context().moveTo(this.pointer_last.x,this.pointer_last.y);
     this.layer.context().lineTo(position.x,position.y);
@@ -148,7 +146,7 @@ function Cursor(rune)
   
   this.mouse_down = function(position)
   {
-    this.layer.clear();
+    if(this.layer){ this.layer.clear(); }
 
     if(this.magnetism){
       position = this.magnetic_position(position);
@@ -158,13 +156,18 @@ function Cursor(rune)
 
     if(this.mode.constructor.name != Cursor.name){
       this.mode.mouse_from = position;
+      this.mode.mouse_held = true;
       this.mode.mouse_down(position);  
     }
   }
   
   this.mouse_move = function(position)
   {
+    if(!this.layer){ this.create_layer(); }
+    
+    this.layer.clear();
     this.draw_pointer(position);
+    if(this.magnetism){ this.draw(this.magnetism,this.grid); }
 
     if(this.mode.mouse_from == null){ return; }
 
@@ -180,8 +183,8 @@ function Cursor(rune)
 
     if(this.mode.constructor.name != Cursor.name){
       this.mode.mouse_move(position,rect);  
+      this.mode.mouse_prev = position;
     }
-
   }
   
   this.mouse_up = function(position)
@@ -198,6 +201,7 @@ function Cursor(rune)
 
     if(this.mode.constructor.name != Cursor.name){
       this.mode.mouse_up(position,rect);  
+      this.mode.mouse_held = false;
     }
     ronin.terminal.input_element.focus();
 

scripts/modules/module.js

@@ -81,6 +81,8 @@ function Module(rune)
   }
 
   this.mouse_from = null;
+  this.mouse_held = null;
+  this.mouse_prev = null;
   
   this.mouse_down = function(position)
   {

scripts/modules/surface.js

@@ -41,6 +41,7 @@ function Surface(rune)
       this.context().fill();
       ronin.terminal.log(new Log(this,"Filled layer: "+cmd.color().hex)); 
       this.element.style.border = "1px solid "+cmd.color().hex;
+      this.element.setAttribute("class",cmd.color().style());
     }
 
     if(cmd.bang() && Object.keys(ronin.surface.layers).length > 1){

scripts/modules/terminal.js

@@ -122,20 +122,23 @@ function Terminal(rune)
 
   this.update_hint = function(content = this.input_element.value)
   {
-    ronin.terminal.input_element.setAttribute("style","color:"+ronin.brush.color.hex);
+    // ronin.terminal.input_element.setAttribute("style","color:"+ronin.brush.color.hex);
 
     if(content.indexOf(";") > -1){
-      this.hint_element.innerHTML = " "+content.split(";").length+" commands";
+      this.hint_element.innerHTML = this.pad(content)+" "+content.split(";").length+" commands";
     }
     else if(ronin.module){
       this.hint_element.innerHTML = ronin.module.hint(content);  
     }
-    else{
+    else if(content == ""){
       this.hint_element.innerHTML = "";
       for(module in ronin.modules){
         this.hint_element.innerHTML += "<b>"+module+"</b> "+ronin.modules[module].constructor.name+" ";
       }
     } 
+    else{
+      this.hint_element.innerHTML = this.pad(content)+" Unknown Command."
+    }
   }
 
   this.update_menu = function()
@@ -165,6 +168,15 @@ function Terminal(rune)
 
     ronin.terminal.input_element.value = "> "+ronin.terminal.history[this.history_index];
   }
+
+  this.pad = function(input)
+  {
+    var s = "";
+    for (i = 0; i < input.length+1; i++){
+      s += "_";
+    }
+    return "<span style='color:#000'>"+s+"</span>";
+  }
 }
 
 // Log

scripts/modules/typographe.js

@@ -41,8 +41,6 @@ function Typographe(rune)
 
   // Mouse
 
-  this.click = null;
-
   this.mouse_mode = function()
   {
     return "Typographe";
@@ -50,24 +48,25 @@ function Typographe(rune)
 
   this.mouse_down = function(position)
   {
-    this.click = true;
     ronin.overlay.draw(position);
-    commander.element_input.value = "& "+position.render()+" ";
-    commander.hint.update();
+    ronin.terminal.input_element.value = "& "+position.render()+" ";
+    ronin.terminal.update_hint();
   }
   
-  this.mouse_move = function(position)
+  this.mouse_move = function(position,rect)
   {
-    if(!this.click){ return; }
+    if(!this.mouse_held){ return; }
+
     ronin.overlay.draw(position);
-    commander.element_input.value = "& "+position.render();
+    ronin.terminal.input_element.value = "& "+position.render()+" ";
+    ronin.terminal.update_hint();
   }
   
   this.mouse_up = function(position)
   {
-    this.click = null;
     ronin.overlay.draw(position);
-    commander.element_input.value = "& "+position.render();
+    ronin.terminal.input_element.value = "& "+position.render()+" ";
+    ronin.terminal.update_hint();
   }
 
   this.key_escape = function()

scripts/units/color.js

@@ -29,4 +29,14 @@ function Color(hex = '#000000')
   {
     return "#"+("0" + parseInt(rgb[0],10).toString(16)).slice(-2)+("0" + parseInt(rgb[1],10).toString(16)).slice(-2)+("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
   }
+
+  this.brightness = function()
+  {
+    return this.rgb() ? (this.rgb().r + this.rgb().g + this.rgb().b)/3 : 0;
+  }
+
+  this.style = function()
+  {
+    return this.brightness() > 150 ? "bright" : "dark";
+  }
 }