diff --git a/index.html b/index.html index 65b0d80..cc9d60b 100644 --- a/index.html +++ b/index.html @@ -49,7 +49,7 @@
-
+
Loading..
diff --git a/links/main.css b/links/main.css index d2bdb36..b74bb37 100644 --- a/links/main.css +++ b/links/main.css @@ -3,29 +3,29 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium" canvas:hover { cursor: crosshair;} -#ronin { width:100%; height:100%; overflow:hidden; background:#000; background-image:url(../media/grid_20.png);} -#surface { width:100vw; height:100vh; overflow:hidden; position:fixed; left:0px; top:0px; background:#efefef; border-radius:3px;} +#ronin { width:100%; height:100%; overflow:hidden; background:#ccc; background-image:url(../media/grid_20.png); background-position: center center; } +#surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:#efefef; border-radius:3px;} #surface .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;} #overlay { position:absolute; z-index:1000;} -#widget { color:#efefef; position:absolute; font-size:10px; padding-top:10px;} +#widget { color:#fff; position:absolute; font-size:10px; padding-top:10px;} #widget .module { float:left; margin-right:10px; } -#widget .module .highlight { color:#72dec2; } +#widget .module .highlight { color:#e7fff8; } #widget .cursor { float:right;} #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; color:RGBA(0,0,0,0); height:35px;} -#commander input:before { content:"input"; color:red;} +#commander input:before { content:"input"; color:e7fff8;} -#commander_hint { background: #333;position: fixed;bottom: 0px;left:0px;padding: 10px;font-size: 11px;width: calc(100vw - 20px);color: #999; height:15px;} -#commander_hint .rune { color:#72dec2; display:inline-block; margin-right:10px;} +#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:#ff0000;} +#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;} diff --git a/scripts/core/commander.hint.js b/scripts/core/commander.hint.js index 1d121e0..b82273a 100644 --- a/scripts/core/commander.hint.js +++ b/scripts/core/commander.hint.js @@ -52,7 +52,7 @@ function Hint(element) var s = "Modules"; for (var key in ronin.modules){ - s += ""+ronin.modules[key].constructor.name+" "+key+" "; + s += ""+ronin.modules[key].constructor.name.substr(0,2)+" "+key+" "; } return s; diff --git a/scripts/core/init.js b/scripts/core/init.js index fa54bcd..fc15fed 100644 --- a/scripts/core/init.js +++ b/scripts/core/init.js @@ -1,4 +1,5 @@ var ronin = new Ronin(); +ronin.element = document.getElementById('ronin'); ronin.overlay.element = document.getElementById('overlay'); ronin.surface.element = document.getElementById('surface'); ronin.widget.element = document.getElementById('widget'); @@ -14,6 +15,7 @@ document.addEventListener('mouseup', function(e){ ronin.cursor.mouse_up(ronin.po // document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false); // Keyboard + var keyboard = new Keyboard(); document.onkeyup = function myFunction(){ keyboard.listen_onkeyup(event); }; document.onkeydown = function myFunction(){ keyboard.listen_onkeydown(event); }; @@ -23,6 +25,11 @@ var starting_canvas = new Rect(); starting_canvas.width = window.innerWidth - 200; starting_canvas.height = window.innerHeight - 200; +// Clamp + +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=render"); diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js index 79d54e1..4314336 100644 --- a/scripts/core/ronin.js +++ b/scripts/core/ronin.js @@ -1,7 +1,7 @@ function Ronin() { this.modules = {}; - + this.element = null; this.widget = new Widget(); this.overlay = new Overlay("|"); @@ -36,14 +36,19 @@ function Ronin() this.position_in_canvas = function(e) { - var x = e.clientX - parseFloat(ronin.surface.element.style.left); - var y = e.clientY- parseFloat(ronin.surface.element.style.top); - return new Position(x+","+y); + var x = e.clientX; + x -= (window.innerWidth - this.surface.size.width)/2; + x -= parseInt(this.surface.element.style.marginLeft) + (this.surface.size.width/2); + var y = e.clientY; + y -= (window.innerHeight - this.surface.size.height)/2; + y -= parseInt(this.surface.element.style.marginTop) + (this.surface.size.height/2); + return new Position(x,y); } this.position_in_window = function(p) { - return new Position(p.x + parseFloat(ronin.surface.element.style.left),p.y + parseFloat(ronin.surface.element.style.top)); + console.log(p.x); + return new Position(p.x + parseInt(this.surface.element.style.marginLeft),p.y + parseInt(this.surface.element.style.marginTop)); } this.timestamp = function() diff --git a/scripts/modules/file.save.js b/scripts/modules/file.save.js index 1530f48..46b27ce 100644 --- a/scripts/modules/file.save.js +++ b/scripts/modules/file.save.js @@ -10,6 +10,7 @@ function FileSave(rune) var f = cmd.variable("format"); var d = ronin.surface.merge(); d = ronin.surface.layers["render"].element.toDataURL('image/png'); + ronin.surface.layers["render"].clear(); var w = window.open('about:blank','image from canvas'); w.document.write(""+(n ? n : "Untitled")+""); } diff --git a/scripts/modules/surface.js b/scripts/modules/surface.js index 9b3ee71..c75d614 100644 --- a/scripts/modules/surface.js +++ b/scripts/modules/surface.js @@ -68,8 +68,8 @@ function Surface(rune) ronin.surface.element.width = rect.width * 2; ronin.surface.element.height = rect.height * 2; - ronin.surface.element.style.left = (window.innerWidth/2)-(rect.width/2); - ronin.surface.element.style.top = (window.innerHeight/2)-(rect.height/2); + ronin.surface.element.style.marginLeft = -(rect.width/2); + ronin.surface.element.style.marginTop = -(rect.height/2); ronin.surface.element.style.width = rect.width+"px"; ronin.surface.element.style.height = rect.height+"px"; ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2); @@ -86,7 +86,7 @@ function Surface(rune) var s = ""; Object.keys(ronin.surface.layers).forEach(function (key) { - s += "# "+key+"
"; + s += ronin.surface.layers[key].widget(); }); return s; // "# "+this.active_layer.name; } @@ -114,7 +114,7 @@ function Surface(rune) } }); for (i = a.length; i > 0 ; i--) { - ronin.surface.render_layer.context().drawImage(a[i-1].context().canvas,10,10); + ronin.surface.render_layer.context().drawImage(a[i-1].context().canvas,0,0,this.size.width/2,this.size.height/2); } return this.render_layer; } @@ -122,6 +122,8 @@ function Surface(rune) // Cursor this.drag_from = null; + this.drag_offset_x = 0; + this.drag_offset_y = 0; this.mouse_down = function(position) { @@ -136,10 +138,16 @@ function Surface(rune) var offset_x = this.drag_from.x - position.x; var offset_y = this.drag_from.y - position.y; + this.drag_offset_x -= offset_x; + this.drag_offset_y -= offset_y; - ronin.surface.element.style.left = ronin.surface.element.style.left ? parseInt(ronin.surface.element.style.left) - offset_x : offset_x; - ronin.surface.element.style.top = ronin.surface.element.style.top ? parseInt(ronin.surface.element.style.top) - offset_y : offset_y; - + ronin.surface.element.style.marginLeft = -(this.size.width/2) + this.drag_offset_x; + 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); } diff --git a/scripts/modules/surface.layer.js b/scripts/modules/surface.layer.js index c527ada..16c528e 100644 --- a/scripts/modules/surface.layer.js +++ b/scripts/modules/surface.layer.js @@ -1,6 +1,7 @@ -function Layer(name) +function Layer(name,host = "user") { this.name = name; + this.host = host; this.element = document.createElement("canvas"); this.element.setAttribute("id","_"+name); this.element.setAttribute("class","layer"); @@ -52,6 +53,11 @@ function Layer(name) return "Move"; } + this.widget = function() + { + return "# "+this.name+"
"; + } + this.move_from = null; this.mouse_down = function(position)