Cleaned folder structure

sources/scripts/layers/grid.js

@@ -0,0 +1,40 @@
+function Grid()
+{
+  Layer.call(this);
+
+  this.el.id = "grid";
+
+  this.draw = function()
+  {
+    var size = 60;
+    var x = 1;
+    while(x < this.el.width/size){
+      var y = 1;
+      while(y < (this.el.height/size)-1){
+        this.draw_vertex(x * size,y * size)
+        y += 1;
+      }
+      x += 1;
+    }
+  }
+
+  this.draw_vertex = function(x,y)
+  {
+    var ctx = this.context();
+    var r = 1.5;
+    ctx.beginPath();
+    ctx.arc(x, y, 1.5, 0, 2 * Math.PI, false);
+    ctx.fillStyle = '#ccc';
+    ctx.fill();
+  }
+
+  this.resize_to = function(size)
+  {
+    this.el.width = size.width * 2;
+    this.el.height = size.height * 2;
+    this.el.style.width = size.width+"px";
+    this.el.style.height = size.height+"px";
+
+    this.draw();
+  }
+}

sources/scripts/layers/guide.js

@@ -0,0 +1,92 @@
+function Guide()
+{
+  Layer.call(this);
+  
+  this.el.id = "guide";
+
+  this.update = function()
+  {
+    this.el.width = window.innerWidth * 2;
+    this.el.height = window.innerHeight * 2;
+    this.el.style.width = (window.innerWidth)+"px";
+    this.el.style.height = (window.innerHeight)+"px";
+
+    var u = ronin.guide.find_unit();
+    if(!u){ return; }
+
+    this.clear();
+    this.draw(u)
+  }
+
+  this.draw = function(u)
+  {    
+    if(u.x && u.y){
+      this.draw_pos(u);
+    }
+    if(u.width && u.height){
+      this.draw_rect(u);
+    }
+  }
+
+  this.draw_rect = function(u)
+  {
+    var ctx = this.context();
+
+    u.x = !u.x ? 0 : u.x;
+    u.y = !u.y ? 0 : u.y;
+
+    var offset = {x:u.x * 2, y:u.y * 2};
+    var rect = {width:u.width * 2,height:u.height * 2};
+
+    ctx.beginPath();
+    ctx.globalCompositeOperation="source-over";
+    ctx.moveTo(offset.x,offset.y);
+    ctx.lineTo(offset.x + rect.width,offset.y);
+    ctx.lineTo(offset.x + rect.width,offset.y + rect.height);
+    ctx.lineTo(offset.x,offset.y + rect.height);
+    ctx.lineTo(offset.x,offset.y);
+    ctx.lineCap="round";
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "#000";
+    ctx.stroke();
+    ctx.closePath();
+  }
+
+  this.draw_pos = function(u)
+  {
+    var ctx = this.context();
+
+    var offset = 2;
+    var radius = 5;
+
+    var pos = {x:u.x * 2, y:u.y * 2};
+
+    ctx.beginPath();
+    ctx.globalCompositeOperation="source-over";
+    ctx.moveTo(pos.x+offset,pos.y);
+    ctx.lineTo(pos.x+radius,pos.y);
+    ctx.moveTo(pos.x,pos.y+offset);
+    ctx.lineTo(pos.x,pos.y+radius);
+    ctx.moveTo(pos.x-offset,pos.y);
+    ctx.lineTo(pos.x-radius,pos.y);
+    ctx.moveTo(pos.x,pos.y-offset);
+    ctx.lineTo(pos.x,pos.y-radius);
+    ctx.lineCap="round";
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "#000";
+    ctx.stroke();
+    ctx.closePath();
+  }
+
+  this.find_unit = function(q = ronin.commander.query())
+  {
+    for(method_id in q.methods){
+      var params = q.methods[method_id];
+      if(!params){ return null; }
+      if(params.from){ return params.from[0]; }
+      if(params[0]){ return params[0]; }
+      return params;
+    }
+    return null;
+  }
+}

sources/scripts/layers/render.js

@@ -0,0 +1,6 @@
+function Render()
+{
+  Layer.call(this);
+  
+  this.el.id = "render";
+}