Syntax Highlight

README.md

@@ -7,9 +7,9 @@ Enjoy
 
 ## TODOs
   General
-    Splash screen(Complete)
     Merge layers
     Export multiple layers file
+    Syntax highlight
   % Render
     balance auto=true ~ auto color
     balance 0.8       ~ equal RGB balance

links/main.css

@@ -27,7 +27,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 #terminal.mini { height:120px; }
 #terminal.full { height:100vh; }
 
-#terminal #widget { display:none; position: absolute; top:0px; left:0px; line-height: 20px; font-size:10px; z-index:9000; color:white; width:50vw; height:100px; }
+#terminal #widget { position: absolute;top: 0px;left: 0px;line-height: 30px;font-size: 12px;z-index: 9000;color: white;width: calc(40vw - 15px);height: 100px;padding-left:30px }
 #terminal #widget span { display:inline-block; line-height:15px; padding:0px 5px; vertical-align: top; min-width:100px;}
 #terminal #widget span name { display: block; border-bottom: 1px solid #333; line-height:25px; margin-bottom:5px;}
 #terminal #widget li { display:block; }
@@ -35,7 +35,11 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 #terminal #widget li.inactive { color:#fff; }
 #terminal #widget li.managed { color:#777; }
 
-#terminal hint { display: block;position: fixed;top: 100px;width: calc(40vw - 45px);height: calc(100vh - 130px);padding: 0px 15px;line-height: 20px;font-size: 12px;background: none;color: #999;border-left:1px solid #333;margin-left:15px}
+#terminal hint { display: block;position: fixed;top: 100px;width: calc(40vw - 45px);height: calc(100vh - 130px);padding: 0px 15px;line-height: 20px;font-size: 12px;background: none;color: #999;border-left:1px solid #333;margin-left:15px; z-index:9000;}
 #terminal hint line { display: inline; width:calc(100% - 30px); }
-#terminal hint line .input { opacity:0.1; }
-#terminal hint line .status { position: absolute;right:30px; }
+#terminal hint line .input { opacity:1; }
+#terminal hint line .status { position: absolute;right:30px; }
+#terminal hint line .input .module { color: white; }
+#terminal hint line .input .method { color: red; }
+#terminal hint line .input .setting { color: #72dec2; }
+

presets/default.rin

@@ -1,11 +1,14 @@
 ~ Default
 
 frame.resize 300x300 
-frame.select background 
-layer.fill #000000 
+frame.select main 
+layer.fill #ff0000 
 path:line_width 43
 path:line_color #EEEEEE
+path:line_cap square
 path.stroke M105,240 a-45,-45 0 0,0 -45,-45 M150,240 a-90,-90 0 0,0 -90,-90 M150,60 a90,90 0 0,0 90,90 M195,60 a45,45 0 0,0 45,45 M60,105 a45,-45 0 0,0 45,-45 M240,195 a-45,45 0 0,0 -45,45
 type:size 10
+type:color white
 type.write 38,262 "RONIN"
 type.write 38,252 "B07"
+brush:color #000000

presets/template.rabbits.rin

@@ -1,6 +1,5 @@
-terminal.display hide ; 
-frame.resize 1060x600 ;
-source.load /08.jpg x600 ;
-render.sharpen 0.25 ;
-source.load /hundred.rabbits.logo.white.svg 70x70 0,530 ;
-source.save
+~ Rabbits
+
+frame.resize 640x400
+source.load /08.jpg x400
+source.load /hundred.rabbits.logo.white.svg 70x70 0,530

scripts/core/keyboard.js

@@ -14,7 +14,7 @@ function Keyboard()
     ronin.cursor.update(event);
     ronin.widget.update();
     ronin.terminal.timer = 0;
-    ronin.terminal.update_status();
+    ronin.terminal.update();
   }
 
   this.listen_onkeyup = function(event)
@@ -46,7 +46,7 @@ function Keyboard()
 
     // Passive
     ronin.widget.update();
-    ronin.terminal.update_status();
+    ronin.terminal.update();
   };
 
   this.key_tab = function()

scripts/core/ronin.js

@@ -54,9 +54,7 @@ function Ronin()
     var x = e.clientX;
     x -= (window.innerWidth - this.frame.settings["size"].width) * 0.4 - 25;
     x -= parseInt(0) + (this.frame.settings["size"].width/2);
-    var y = e.clientY;
-    // y -= (window.innerHeight - this.frame.settings["size"].height)/2;
-    y -= parseInt(-100) + parseInt(this.frame.settings["size"].height/2);
+    var y = e.clientY - 100;
     return new Position(x,y);
   }
   

scripts/modules/brush.js

@@ -83,7 +83,7 @@ function Brush(rune)
       return "Eraser "+this.settings["size"];
     }
     else{
-      return "Brush "+this.settings["size"];  
+      return "Brush <i style='color:"+this.settings["color"]+"'>&#9679;</i> "+this.settings["size"];  
     }
   }
   

scripts/modules/cursor.js

@@ -54,12 +54,19 @@ function Cursor(rune)
     this.layer.context().closePath();
 
     this.layer.context().beginPath();
-    this.layer.context().arc(position.x, position.y, size+1, 0, 2 * Math.PI, false);
+    this.layer.context().arc(position.x, position.y, size/2, 0, 2 * Math.PI, false);
     this.layer.context().lineWidth = 1;
     this.layer.context().strokeStyle = "white";
     this.layer.context().stroke();
     this.layer.context().closePath();
 
+    this.layer.context().beginPath();
+    this.layer.context().arc(position.x, position.y, (size/2)+1, 0, 2 * Math.PI, false);
+    this.layer.context().lineWidth = 1;
+    this.layer.context().strokeStyle = "black";
+    this.layer.context().stroke();
+    this.layer.context().closePath();
+
     this.pointer_last = position;
   }
 

scripts/modules/magnet.js

@@ -2,13 +2,13 @@ function Magnet(rune)
 {
   Module.call(this,rune);
   
-  this.settings = {"grid" : new Rect("1x1"), "marker": new Position("4,4"), "reset" : new Bang()};
+  this.settings = {"grid" : new Rect("1x1"), "marker": new Position("4,4")};
 
   this.add_method(new Method("grid",["rect","position"]));
 
   this.grid = function(params,preview = false)
   {
-    if(!params.rect()){ return; }
+    if(!params.rect()){ return 0, "Rect?"; }
 
     if(!this.layer){ this.create_layer(); }
 
@@ -19,6 +19,8 @@ function Magnet(rune)
       this.settings["grid"] = params.rect();
       this.settings["market"] = params.position();
     }
+
+    return 1, preview ? "preview" : "ok";
   }
 
   this.draw_grid = function(rect,grid)

scripts/modules/terminal.js

@@ -57,8 +57,6 @@ function Terminal(rune)
       ronin.terminal.run();
     }
 
-    this.update_status();
-
     this.history = this.textarea.value;
     this.timer = 0;
   }
@@ -106,6 +104,9 @@ function Terminal(rune)
     else if(ronin["render"].collection[method_name]){
       return ronin["render"].collection[method_name].render(parameters);
     }
+    else if(setting_name){
+      return 0, "Unknown Setting";
+    }
     else if(ronin[module_name]){
       return 0, "Unknown Method";
     }
@@ -120,6 +121,24 @@ function Terminal(rune)
 
   this.syntax_highlight = function(line)
   {
+    var line = line;
+    
+    // Method
+    if(line.indexOf(".") > 0){
+      var module = line.split(".")[0];
+      var method = line.split(".")[1].split(" ")[0];
+      line = line.replace(module,"<span class='module'>"+module+"</span>");  
+      line = line.replace(method,"<span class='method'>"+method+"</span>");  
+    }
+
+    // Setting
+    if(line.indexOf(":") > 0){
+      var module = line.split(":")[0];
+      var setting = line.split(":")[1].split(" ")[0];
+      line = line.replace(module,"<span class='module'>"+module+"</span>");  
+      line = line.replace(setting,"<span class='setting'>"+setting+"</span>");  
+    }
+    
     return line;
   }
 
@@ -133,7 +152,7 @@ function Terminal(rune)
     this.timer = 10;
   }
 
-  this.update_status = function()
+  this.update = function()
   {
     if(ronin.terminal.has_changed() == true){ 
       this.status_element.innerHTML = "Changes Pending.";
@@ -143,6 +162,12 @@ function Terminal(rune)
     }
 
     this.status_element.innerHTML += "<span class='details'>"+this.textarea.value.length+"c "+this.textarea.value.split("\n").length+"l</span>";
+
+    this.hint_element.innerHTML = "";
+    var queue = ronin.terminal.textarea.value.split("\n")
+    for(id in queue){
+      this.hint_element.innerHTML += "<line><text class='input'>"+this.syntax_highlight(queue[id])+"</text></line><br />";
+    }
   }
 
   this.log = function(log)

scripts/modules/terminal.widget.js

@@ -14,9 +14,10 @@ function Widget(rune)
   {
     var s = "";
 
-    for (var key in ronin.modules){
-      s += ronin.modules[key].widget() ? "<span class='"+key+"'><name>"+key+"</name>"+ronin.modules[key].widget()+"</span> " : "";
-    }
+    s += ronin.cursor.widget();
+    // for (var key in ronin.modules){
+    //   s += ronin.modules[key].widget() ? "<span class='"+key+"'><name>"+key+"</name>"+ronin.modules[key].widget()+"</span> " : "";
+    // }
 
     this.element.innerHTML = s;
   }