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
Download Patch File Download Diff File Expand all files Collapse all files

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;
}