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

Replacing commander with Terminal

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-03-09 15:49:30 -07:00
parent 19d971fc79
commit 411d7d9fff
13 changed files with 226 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -13,6 +13,7 @@
<script type="text/javascript" src="scripts/units/range.js"></script>
<script type="text/javascript" src="scripts/modules/cursor.js"></script>
<script type="text/javascript" src="scripts/modules/terminal.js"></script>
<script type="text/javascript" src="scripts/modules/module.js"></script>
<script type="text/javascript" src="scripts/modules/stroke.js"></script>
<script type="text/javascript" src="scripts/modules/vector.js"></script>
@ -29,7 +30,6 @@
<script type="text/javascript" src="scripts/modules/eye.js"></script>
<script type="text/javascript" src="scripts/modules/typographe.js"></script>
<script type="text/javascript" src="scripts/modules/render.js"></script>
<script type="text/javascript" src="scripts/modules/preset.js"></script>
<script type="text/javascript" src="scripts/filters/filter.js"></script>
<script type="text/javascript" src="scripts/filters/stencil.js"></script>
@ -42,10 +42,7 @@
<script type="text/javascript" src="scripts/core/keyboard.js"></script>
<script type="text/javascript" src="scripts/core/command.js"></script>
<script type="text/javascript" src="scripts/core/commander.js"></script>
<script type="text/javascript" src="scripts/core/commander.hint.js"></script>
<script type="text/javascript" src="scripts/core/ronin.js"></script>
<script type="text/javascript" src="scripts/core/widget.js"></script>
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/fonts.css"/>
@ -56,11 +53,7 @@
<div id='ronin'>
<div id='cursor'></div>
<div id='surface'></div>
<div id='widget'>Loading..</div>
<div id ='commander'>
<div id='commander_hint'></div>
<input id='commander_input'/>
</div>
<div id='terminal'></div>
</div>
<script type="text/javascript" src="scripts/core/init.js"></script>
</body>

52
links/main.css
View File

@ -4,47 +4,17 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
canvas:hover { cursor: none;}
#ronin { width:100%; height:100%; overflow:hidden; background:#111; background-image:url(../media/graphics/grid.svg); background-position: center center; }
#surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:3px;}
#surface .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
#surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:5px; border:1px solid #333;}
#surface > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
#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; }
#overlay { position:absolute; z-index:1000;}
#widget { color:#fff; position:absolute; font-size:10px; padding-top:10px; border-top:1px solid #333; background-image:url(../media/graphics/logo.svg); background-repeat:no-repeat; background-size:80px 80px; height:100px; background-position: -10px 10px; line-height:20px;min-width: 300px}
#widget .module:first-child { margin-left:80px; }
#widget .module { float:left; margin-right:10px; margin-top:5px;}
#widget .module .layer { color:#999; padding:2px 5px;}
#widget .module .highlight { background:#fff; color:black;}
#widget .module .highlight.managed { background:red; color:black; }
#widget .cursor { text-align: right;margin-top: 5px;position: absolute;right:0px}
#widget .layer:hover { cursor:pointer;}
#cursor { width:10px; height:10px; position:fixed;border:1px solid red; border-radius:10px; z-index:8000; pointer-events: none}
#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; height:35px;}
#commander input:before { content:"input"; color:e7fff8;}
#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:#e7fff8;}
#commander_hint .value:after { content:" "; color:#999; }
#commander_hint .value:last-child:after { content:"";}
#commander_hint .variable_key { color:#aaa; font-weight:bold;}
#commander_hint .variable_value { color:#aaa;}
#help_view { background:white; position:fixed; top:0px; left:0px; height:100vh; width:100vw; display:none; font-size:11px; line-height:20px; z-index:9000;}
#help_view .wrapper { padding:60px }
#help_view .logo { width:90px; height:90px; display: block; margin-left:-10px; margin-bottom:40px;}
#help_view h1 { font-family:"input_mono_regular",courier,monospace; font-size:20px; margin-bottom:20px; line-height:20px;}
#help_view h2 { font-family:"input_mono_regular",courier,monospace; font-size:11px; line-height:20px; text-transform: uppercase;}
#help_view b { display: inline-block; font-family:"input_mono_regular",courier,monospace; }
#help_view a { text-decoration: underline; }
#help_view div.cat { float:left; margin-right:40px; }
#help_view div.cat ul { margin-bottom:20px; }
#help_view ul li { line-height:20px; }
#help_view a:hover { text-decoration: none; cursor: pointer }
#help_view:hover { cursor: none; pointer-events: none}
#terminal { position: fixed; bottom:0px; left:0px; background:#000; width:100vw; height: 120px;overflow: hidden;}
#terminal input { display: block; position:absolute; bottom:0px; width:100vw; padding:0px 5px; font-size:10px; line-height: 20px; background:none; z-index:900;}
#terminal hint { background:#cc0000; position:absolute; bottom:0px; line-height: 20px; padding:0px 5px; width:100vw;}
#terminal logs { display: block;position: absolute;bottom:20px;width:100vw;color:white}
#terminal logs log { display: block; font-size:10px; line-height:25px; padding:0px 5px; color:#666;}
#terminal logs log .rune { color:white; }

26
scripts/core/init.js
View File

@ -1,13 +1,10 @@
var ronin = new Ronin();
ronin.element = document.getElementById('ronin');
ronin.surface.element = document.getElementById('surface');
ronin.widget.element = document.getElementById('widget');
ronin.cursor.element = document.getElementById('cursor');
ronin.terminal.element = document.getElementById('terminal');
ronin.cursor.mode = ronin.brush;
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
commander.hint.element = document.getElementById('commander_hint');
// Cursor
document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e));}, false);
@ -34,13 +31,14 @@ starting_canvas.height = window.innerHeight - 300;
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=Background");
commander.query("@ #222");
commander.query("@ layer=Main");
commander.query("> 0,0");
commander.query("> 1,1");
commander.query("> 2,2");
commander.query("> #ff0000");
commander.query("~ Ready.");
ronin.terminal.query("~ "+ronin.timestamp());
ronin.terminal.query("@ "+starting_canvas.render());
ronin.terminal.query("@ layer=Main");
ronin.terminal.query("> 0,0");
ronin.terminal.query("> 1,1");
ronin.terminal.query("> 2,2");
ronin.terminal.query("> #ff0000");
ronin.terminal.query("~ Ready.");
ronin.terminal.input_element.focus();
ronin.surface.update_widget();

14
scripts/core/keyboard.js
View File

@ -12,7 +12,7 @@ function Keyboard()
this.alt_held = true;
}
ronin.cursor.update(event);
ronin.widget.update();
ronin.surface.update_widget();
}
this.listen_onkeyup = function(event)
@ -43,10 +43,9 @@ function Keyboard()
}
// Passive
commander.passive(commander.element_input.value);
ronin.terminal.passive(ronin.terminal.input_element.value);
// ronin.cursor.set_mode(ronin.brush);
ronin.widget.update();
ronin.surface.update_widget();
};
this.key_tab = function()
@ -55,7 +54,7 @@ function Keyboard()
this.key_enter = function()
{
commander.query(commander.element_input.value);
ronin.terminal.query(ronin.terminal.input_element.value);
}
this.key_space = function()
@ -64,12 +63,10 @@ function Keyboard()
this.key_arrow_up = function()
{
commander.prev_cmd();
}
this.key_arrow_down = function()
{
commander.next_cmd();
}
this.key_arrow_left = function()
@ -82,14 +79,11 @@ function Keyboard()
this.key_colon = function()
{
commander.show();
return false;
}
this.key_escape = function()
{
commander.hide();
if(ronin.module){ ronin.module.key_escape(); }
}

8
scripts/core/ronin.js
View File

@ -2,22 +2,21 @@ function Ronin()
{
this.modules = {};
this.element = null;
this.widget = new Widget();
this.surface = new Surface("@");
this.fileload = new FileLoad("/");
this.filesave = new FileSave("$");
this.history = new History("^");
this.overlay = new Overlay("|");
this.brush = new Brush(">");
this.brush = new Brush("-");
this.eye = new Eye("*");
this.render = new Render("%");
this.stroke = new Stroke("_");
this.vector = new Vector("+");
this.help = new Help("?");
this.typo = new Typographe("&");
this.preset = new Preset("-");
this.cursor = new Cursor(".");
this.terminal = new Terminal(">");
this.modules[this.surface.rune] = this.surface;
this.modules[this.fileload.rune] = this.fileload;
@ -30,8 +29,8 @@ function Ronin()
this.modules[this.typo.rune] = this.typo;
this.modules[this.stroke.rune] = this.stroke;
this.modules[this.vector.rune] = this.vector;
this.modules[this.preset.rune] = this.preset;
this.modules[this.help.rune] = this.help;
this.modules[this.terminal.rune] = this.terminal;
this.modules[this.cursor.rune] = this.cursor;
@ -71,6 +70,5 @@ function Ronin()
this.on_resize = function()
{
this.widget.on_resize();
}
}

6
scripts/modules/brush.js
View File

@ -48,13 +48,13 @@ function Brush(rune)
this.size_up = function()
{
this.size -= this.size > 1 ? 1 : 0;
ronin.widget.update();
ronin.surface.update_widget();
}
this.size_down = function()
{
this.size += 1;
ronin.widget.update();
ronin.surface.update_widget();
}
this.add_pointer = function(cmd)
@ -80,7 +80,7 @@ function Brush(rune)
return "Eraser "+this.size;
}
else{
return "Brush "+ronin.brush.pointers.length+"x "+this.size+" <span style='color:"+this.color.hex+"'>&#9679;</span><br />";
return "<i style='color:"+this.color.hex+"'>&#9679;</i> Brush "+ronin.brush.pointers.length+"x "+this.size;
}
}

6
scripts/modules/cursor.js
View File

@ -126,7 +126,7 @@ function Cursor(rune)
if(this.mode.constructor.name != Cursor.name){
this.mode.mouse_down(position);
}
ronin.widget.update();
ronin.surface.update_widget();
}
this.mouse_move = function(position)
@ -154,7 +154,7 @@ function Cursor(rune)
if(this.mode.constructor.name != Cursor.name){
this.mode.mouse_up(position);
}
ronin.widget.update();
commander.element_input.focus();
ronin.surface.update_widget();
ronin.terminal.input_element.focus();
}
}

108
scripts/modules/help.js
View File

@ -4,71 +4,58 @@ function Help(rune)
this.view = document.createElement("div");
this.install = function(cmd)
this.active = function(cmd)
{
console.log("Installing "+ronin.modules[this.rune].constructor.name);
s = "hello";
this.view.setAttribute("id","help_view");
var html = "";
html += "<img src='media/graphics/logo.black.svg' class='logo'/>";
html += this.view_controls();
html += this.view_modules();
html += this.view_units();
html += this.view_presets();
this.view.innerHTML = "<div class='wrapper'>"+html+"<hr/></div>";
lines = [];
ronin.element.appendChild(this.view);
}
// Modules
// TODO: Have the modules return their own help string
lines.push("Modules: ");
Object.keys(ronin.modules).forEach(function (key) {
html = "";
var parameters = "";
html += "<i>"+key+"</i> "+ronin.modules[key].constructor.name+" ";
for (i = 0; i < ronin.modules[key].parameters.length; i++) {
html += "<b>"+ronin.modules[key].parameters[i].name+"</b> ";
}
lines.push(html);
});
this.on_resize = function()
{
this.view.style.left = (window.innerWidth/2)-(ronin.surface.size.width/2);
this.view.style.top = (window.innerHeight/2)+(ronin.surface.size.height/2)+20;
}
// Filters
lines.push("Filters: ");
for(var filter in ronin.modules["%"].collection){
html = filter+" ";
for (i = 0; i < ronin.modules["%"].collection[filter].parameters.length; i++) {
html += "<b>"+ronin.modules["%"].collection[filter].parameters[i].name+"</b> ";
}
lines.push(html);
}
this.passive = function(cmd)
{
this.view.style.display = "block";
ronin.cursor.element.style.display = "none";
}
// Controls
lines.push("Controls: ");
lines.push("<b>ctrl</b> Draw Overlays\n");
lines.push("<b>alt</b> Drag Surface\n");
lines.push("<b>shift</b> Erase\n");
lines.push("<b>shift+ctrl</b> Eyedrop\n");
lines.push("<b>shift+alt</b> Move Layer\n");
this.key_escape = function()
{
this.view.style.display = "none";
// Units
lines.push("Units: ");
var units = [new Value(), new Position(), new Rect(), new Color(), new Angle(), new Variable(), new Bang()]
for(key in units){
lines.push(units[key].render());
}
// Print
for(line in lines){
ronin.terminal.log(new Log(this,lines[line]));
}
}
//
this.view_controls = function()
{
html = "<h1>Controls</h1>";
html += "<ul>";
html += "<li><b>ctrl</b> Draw Overlays</li>\n";
html += "<li><b>alt</b> Drag Surface</li>\n";
html += "<li><b>shift</b> Erase</li>\n";
html += "<li><b>shift+ctrl</b> Eyedrop</li>\n";
html += "<li><b>shift+alt</b> Move Layer</li>\n";
html += "</ul>";
return "<div class='cat'>"+html+"</div>";
}
this.view_modules = function()
{
html = "<h1>Modules</h1>";
html += "<ul>";
Object.keys(ronin.modules).forEach(function (key) {
var parameters = "";
html += "<li><i>"+key+"</i> "+ronin.modules[key].constructor.name+" ";
for (i = 0; i < ronin.modules[key].parameters.length; i++) {
html += "<b>"+ronin.modules[key].parameters[i].name+"</b> ";
}
html += "</li>\n";
});
html += "</ul>";
html += "\n";
return "<div class='cat'>"+html+"</div>";
}
this.view_units = function()
{
@ -82,16 +69,7 @@ function Help(rune)
html += "<li>rate=10 variable: rate=10</li>\n";
html += "</ul>";
html += "\n";
html += "<h1>Filters</h1>\n\n";
html += "<ul>";
for(var filter in ronin.modules["%"].collection){
html += "<li>"+filter+" ";
for (i = 0; i < ronin.modules["%"].collection[filter].parameters.length; i++) {
html += "<b>"+ronin.modules["%"].collection[filter].parameters[i].name+"</b> ";
}
html += "</li>\n";
}
html += "</ul>";
html += "\n";
return "<div class='cat'>"+html+"</div>";
}

1
scripts/modules/preset.js
View File

@ -6,6 +6,7 @@ function Preset(rune)
this.collection["grid"] = {};
this.collection["grid"]["glyph"] = "@ 300x300; @ layer=background ; @ #A1A1A1 ; . 15x15 4,4 ; @ layer=main";
this.collection["grid"]["icon"] = "@ 360x360; @ layer=background ; @ #000000 ; . 15x15 4,4 ; @ layer=main";
this.collection["grid"]["rune"] = "@ 240x360; @ layer=background ; @ #000000 ; . 15x15 4,4 ; @ layer=main";
this.collection["custom"] = {};
this.collection["custom"]["default"] = "@ 720x405 ; / ../assets/todo.jpg 720x 0,0 ; % chromatic 2 ; / ../assets/logo.png 35x35 15,355";

45
scripts/modules/surface.js
View File

@ -11,7 +11,14 @@ function Surface(rune)
this.render_layer = null;
this.size = new Rect("200x200");
this.widget_element = document.createElement("widget");
this.install = function()
{
this.element.appendChild(this.widget_element);
}
this.active = function(cmd)
{
if(cmd.rect()){
@ -23,13 +30,15 @@ function Surface(rune)
this.context().rect(0, 0, this.active_layer.element.width, this.active_layer.element.height);
this.context().fillStyle = cmd.color().hex;
this.context().fill();
ronin.terminal.log(new Log(this,"Filled layer: "+cmd.color().hex));
this.element.style.border = "1px solid "+cmd.color().hex;
}
if(cmd.bang() && Object.keys(ronin.surface.layers).length > 1){
this.layers[this.active_layer.name].element.outerHTML = "";
delete this.layers[this.active_layer.name];
this.select_any_layer();
ronin.widget.update();
ronin.surface.update_widget();
}
if(cmd.variable("layer")){
@ -55,7 +64,7 @@ function Surface(rune)
this.add_layer = function(layer)
{
console.log("Creating layer:"+layer.name+"("+(layer.manager ? layer.manager.constructor.name : "")+")");
ronin.terminal.log(new Log(this,"Creating layer:"+layer.name+(layer.manager ? "["+layer.manager.constructor.name+"]" : "")));
layer.resize(this.size);
this.layers[layer.name] = layer;
@ -85,18 +94,14 @@ function Surface(rune)
ronin.surface.element.style.marginTop = -(rect.height/2);
ronin.on_resize();
ronin.terminal.log(new Log(this,"Resized Surface to "+this.size.render()));
}
this.widget = function()
{
if(!this.active_layer){ return ""; }
var s = "";
Object.keys(ronin.surface.layers).forEach(function (key) {
s = ronin.surface.layers[key].widget()+s;
});
return this.rune+" "+this.size.render()+"<br />"+s;
return this.rune+" "+this.size.render();
}
this.widget_cursor = function()
@ -104,6 +109,28 @@ function Surface(rune)
return "Drag";
}
// Widget
this.update_widget = function()
{
var s = "";
s += "<span class='module'>";
for (var key in ronin.modules){
s += ronin.modules[key].widget() ? ronin.modules[key].widget()+" " : "";
}
s += "</span>";
s += "<span class='cursor'>"+ronin.cursor.mode.widget_cursor()+"</span>";
var keys = Object.keys(ronin.surface.layers);
var loc = keys.indexOf(this.active_layer.name);
s += "<span class='layer'>"+ronin.surface.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")</span>";
this.widget_element.innerHTML = s;
}
// Commands
this.layer_up = function()
@ -157,8 +184,6 @@ function Surface(rune)
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);
}

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

@ -56,14 +56,10 @@ function Layer(name,manager = null)
e_name += this.name;
var e_class = "";
e_class += "layer ";
if(ronin.surface.active_layer.name == this.name){ e_class += "highlight "; }
if(this.manager != null){ e_class += "managed "; }
var e_icon = this.manager ? "~" : "-";
return "<span class='"+e_class+"'>"+e_icon+" "+e_name+"</span><br />";
return "<span class='"+e_class+"'>"+e_name+"</span>";
}
this.move_from = null;

101
scripts/modules/terminal.js Normal file
View File

@ -0,0 +1,101 @@
function Terminal(rune)
{
Module.call(this,rune);
this.element = null;
this.input_element = document.createElement("input");
this.hint_element = document.createElement("hint");
this.logs_element = document.createElement("logs");
// Module
this.install = function(cmd)
{
this.element.appendChild(this.input_element);
this.element.appendChild(this.hint_element);
this.element.appendChild(this.logs_element);
this.hint_element.innerHTML = "_";
}
this.active = function(cmd)
{
}
this.passive = function(content)
{
var key = content[0];
var cmd = new Command(content.substring(1).trim().split(" "));
ronin.module = null;
if(ronin.modules[key]){
ronin.modules[key].passive(cmd);
ronin.module = ronin.modules[key];
ronin.cursor.set_mode(ronin.module);
}
else{
ronin.cursor.set_mode(ronin.brush);
}
}
this.cmd = function()
{
var content = this.input_element.value.trim();
var key = content[0];
var cmd = new Command(content.substring(1).trim().split(" "));
return cmd;
}
this.queue = [];
this.query = function(input_str)
{
this.input_element.value = "";
if(input_str.indexOf(";") > 0){
this.queue = input_str.split(";");
}
else{
this.queue = [];
this.queue.push(input_str)
}
this.run();
}
this.run = function()
{
if(!ronin.terminal.queue[0]){ console.log("Finished queue"); return; }
active(ronin.terminal.queue[0].trim());
ronin.terminal.queue.shift();
setTimeout(function(){ ronin.terminal.run(); }, 100);
}
function active(content)
{
var key = content[0];
var cmd = new Command(content.substring(1).trim().split(" "));
if(ronin.modules[key]){
ronin.modules[key].active(cmd);
ronin.history.add(content);
}
else{
ronin.terminal.log(new Log(ronin.terminal,"Unknown module: "+key));
}
}
this.log = function(log)
{
this.logs_element.appendChild(log.element);
}
}
// Log
function Log(host,message)
{
this.element = document.createElement("log");
this.element.innerHTML = "<span class='rune'>"+host.rune+"</span> "+message;
}

17
scripts/modules/vector.js
View File

@ -87,18 +87,16 @@ function Vector(rune)
{
this.click = true;
commander.element_input.value = "+ "+this.create_path();
commander.hint.update();
this.passive(commander.cmd());
ronin.terminal.input_element.value = "+ "+this.create_path();
this.passive(ronin.terminal.cmd());
}
this.mouse_move = function(position)
{
if(!this.click){ return; }
commander.element_input.value = "+ "+this.create_path();
commander.element_input.value += "L"+position.render();
commander.hint.update();
this.passive(commander.cmd());
ronin.terminal.input_element.value = "+ "+this.create_path();
ronin.terminal.input_element.value += "L"+position.render();
this.passive(ronin.terminal.cmd());
}
this.mouse_up = function(position)
@ -125,9 +123,8 @@ function Vector(rune)
}
}
commander.element_input.value = "+ "+this.create_path();
commander.hint.update();
this.passive(commander.cmd());
ronin.terminal.input_element.value = "+ "+this.create_path();
this.passive(ronin.terminal.cmd());
this.last_pos = position;
}