dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved design

Browse Source
This commit is contained in:
Devine Lu Linvega 2016-12-25 16:07:47 -07:00
parent 42b47e817d
commit 0f2a6cdcd9
8 changed files with 50 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -49,7 +49,7 @@
</head> </head>
<body> <body>
<div id='ronin'> <div id='ronin'>
<div id='surface' style='left:0px;top:0px'> <div id='surface'>
<canvas id='overlay' width="1480" height="800"></canvas> <canvas id='overlay' width="1480" height="800"></canvas>
</div> </div>
<div id='widget'>Loading..</div> <div id='widget'>Loading..</div>

16
links/main.css
View File

@ -3,29 +3,29 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
canvas:hover { cursor: crosshair;} canvas:hover { cursor: crosshair;}
#ronin { width:100%; height:100%; overflow:hidden; background:#000; background-image:url(../media/grid_20.png);} #ronin { width:100%; height:100%; overflow:hidden; background:#ccc; background-image:url(../media/grid_20.png); background-position: center center; }
#surface { width:100vw; height:100vh; overflow:hidden; position:fixed; left:0px; top:0px; background:#efefef; border-radius:3px;} #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%;} #surface .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
#overlay { position:absolute; z-index:1000;} #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 { float:left; margin-right:10px; }
#widget .module .highlight { color:#72dec2; } #widget .module .highlight { color:#e7fff8; }
#widget .cursor { float:right;} #widget .cursor { float:right;}
#commander { display:none; z-index: 2000; position:fixed; } #commander { display:none; z-index: 2000; position:fixed; }
#commander.visible { display:block; } #commander.visible { display:block; }
#commander.hidden { display:none; } #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 { 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 { 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:#72dec2; display:inline-block; margin-right:10px;} #commander_hint .rune { color:#e7fff8; display:inline-block; margin-right:10px;}
#commander_hint .module { color:#ccc; 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 .command { color:#fff; display:inline-block; margin-right:10px;}
#commander_hint .param { font-style: italic;} #commander_hint .param { font-style: italic;}
#commander_hint .param:after { content:" "; } #commander_hint .param:after { content:" "; }
#commander_hint .param:last-child: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:after { content:" "; color:#999; }
#commander_hint .value:last-child:after { content:"";} #commander_hint .value:last-child:after { content:"";}
#commander_hint .variable_key { color:#aaa; font-weight:bold;} #commander_hint .variable_key { color:#aaa; font-weight:bold;}

2
scripts/core/commander.hint.js
View File

@ -52,7 +52,7 @@ function Hint(element)
var s = "<span class='module'>Modules</span>"; var s = "<span class='module'>Modules</span>";
for (var key in ronin.modules){ for (var key in ronin.modules){
s += "<span class='param'>"+ronin.modules[key].constructor.name+"<span> <span class='value'>"+key+"</span> "; s += "<span class='param'>"+ronin.modules[key].constructor.name.substr(0,2)+"<span> <span class='value'>"+key+"</span> ";
} }
return s; return s;

7
scripts/core/init.js
View File

@ -1,4 +1,5 @@
var ronin = new Ronin(); var ronin = new Ronin();
ronin.element = document.getElementById('ronin');
ronin.overlay.element = document.getElementById('overlay'); ronin.overlay.element = document.getElementById('overlay');
ronin.surface.element = document.getElementById('surface'); ronin.surface.element = document.getElementById('surface');
ronin.widget.element = document.getElementById('widget'); 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); // document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false);
// Keyboard // Keyboard
var keyboard = new Keyboard(); var keyboard = new Keyboard();
document.onkeyup = function myFunction(){ keyboard.listen_onkeyup(event); }; document.onkeyup = function myFunction(){ keyboard.listen_onkeyup(event); };
document.onkeydown = function myFunction(){ keyboard.listen_onkeydown(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.width = window.innerWidth - 200;
starting_canvas.height = window.innerHeight - 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("~ "+ronin.timestamp());
commander.query("# "+starting_canvas.render()); commander.query("# "+starting_canvas.render());
commander.query("# layer=render"); commander.query("# layer=render");

15
scripts/core/ronin.js
View File

@ -1,7 +1,7 @@
function Ronin() function Ronin()
{ {
this.modules = {}; this.modules = {};
this.element = null;
this.widget = new Widget(); this.widget = new Widget();
this.overlay = new Overlay("|"); this.overlay = new Overlay("|");
@ -36,14 +36,19 @@ function Ronin()
this.position_in_canvas = function(e) this.position_in_canvas = function(e)
{ {
var x = e.clientX - parseFloat(ronin.surface.element.style.left); var x = e.clientX;
var y = e.clientY- parseFloat(ronin.surface.element.style.top); x -= (window.innerWidth - this.surface.size.width)/2;
return new Position(x+","+y); 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) 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() this.timestamp = function()

1
scripts/modules/file.save.js
View File

@ -10,6 +10,7 @@ function FileSave(rune)
var f = cmd.variable("format"); var f = cmd.variable("format");
var d = ronin.surface.merge(); var d = ronin.surface.merge();
d = ronin.surface.layers["render"].element.toDataURL('image/png'); d = ronin.surface.layers["render"].element.toDataURL('image/png');
ronin.surface.layers["render"].clear();
var w = window.open('about:blank','image from canvas'); var w = window.open('about:blank','image from canvas');
w.document.write("<title>"+(n ? n : "Untitled")+"</title><img src='"+d+"'/>"); w.document.write("<title>"+(n ? n : "Untitled")+"</title><img src='"+d+"'/>");
} }

20
scripts/modules/surface.js
View File

@ -68,8 +68,8 @@ function Surface(rune)
ronin.surface.element.width = rect.width * 2; ronin.surface.element.width = rect.width * 2;
ronin.surface.element.height = rect.height * 2; ronin.surface.element.height = rect.height * 2;
ronin.surface.element.style.left = (window.innerWidth/2)-(rect.width/2); ronin.surface.element.style.marginLeft = -(rect.width/2);
ronin.surface.element.style.top = (window.innerHeight/2)-(rect.height/2); ronin.surface.element.style.marginTop = -(rect.height/2);
ronin.surface.element.style.width = rect.width+"px"; ronin.surface.element.style.width = rect.width+"px";
ronin.surface.element.style.height = rect.height+"px"; ronin.surface.element.style.height = rect.height+"px";
ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2); ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2);
@ -86,7 +86,7 @@ function Surface(rune)
var s = ""; var s = "";
Object.keys(ronin.surface.layers).forEach(function (key) { Object.keys(ronin.surface.layers).forEach(function (key) {
s += "# "+key+"<br />"; s += ronin.surface.layers[key].widget();
}); });
return s; // "# "+this.active_layer.name; return s; // "# "+this.active_layer.name;
} }
@ -114,7 +114,7 @@ function Surface(rune)
} }
}); });
for (i = a.length; i > 0 ; i--) { 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; return this.render_layer;
} }
@ -122,6 +122,8 @@ function Surface(rune)
// Cursor // Cursor
this.drag_from = null; this.drag_from = null;
this.drag_offset_x = 0;
this.drag_offset_y = 0;
this.mouse_down = function(position) this.mouse_down = function(position)
{ {
@ -136,9 +138,15 @@ function Surface(rune)
var offset_x = this.drag_from.x - position.x; var offset_x = this.drag_from.x - position.x;
var offset_y = this.drag_from.y - position.y; 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.marginLeft = -(this.size.width/2) + this.drag_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.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); this.drag_from = new Position(position.x,position.y);
} }

8
scripts/modules/surface.layer.js
View File

@ -1,6 +1,7 @@
function Layer(name) function Layer(name,host = "user")
{ {
this.name = name; this.name = name;
this.host = host;
this.element = document.createElement("canvas"); this.element = document.createElement("canvas");
this.element.setAttribute("id","_"+name); this.element.setAttribute("id","_"+name);
this.element.setAttribute("class","layer"); this.element.setAttribute("class","layer");
@ -52,6 +53,11 @@ function Layer(name)
return "Move"; return "Move";
} }
this.widget = function()
{
return "# "+this.name+"<br />";
}
this.move_from = null; this.move_from = null;
this.mouse_down = function(position) this.mouse_down = function(position)