Almost there

This commit is contained in:
Devine Lu Linvega 2017-05-21 10:31:54 -10:00
parent de175e12e7
commit 39fc652117
9 changed files with 73 additions and 76 deletions

View File

@ -1,28 +1,23 @@
body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
*:focus {outline: none; }
#ronin { width:100%; height:100%; overflow:hidden; background:#ccc; background-image:url(../media/graphics/grid.svg); background-position: center center; }
#frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px; background:#ddd;}
#ronin { background:#ddd; width:100%; height:100%; overflow:hidden; background-image:url(../media/graphics/grid.svg); background-position: center center; }
#frame { background:#111; width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px; border-radius: 3px}
#frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
#frame.bright widget { color:#000; }
#overlay { position:absolute; z-index:1000;}
#frame { cursor:none;}
#terminal { position: fixed;bottom: 0px;left: 0px;background: #eee;width: 100vw;height: 30px;overflow: hidden; }
#terminal logs { display: none;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; }
#terminal logs log.error .rune { color:red; }
#terminal logs log.input { color:white; }
#terminal logs log.image img { height:85px;width:auto;border-radius: 3px }
#terminal.locked input { color:red; }
#terminal status { display: block;position: absolute;bottom: 0px;right: 0px;padding: 5px 15px 5px 31px;font-size: 12px;line-height: 20px;color: white;width:calc(40vw - 45px) }
#terminal status .details { float:right; color:#555; }
#terminal { position: fixed;bottom: 0px;left: 0px;background: #eee;width: 100vw;height: 60px;overflow: hidden;}
#terminal.hide { height:25px; }
#terminal.mini { height:120px; }
#terminal.full { height:100vh; }
#terminal #hint, #terminal #widget, #terminal input, #terminal #logs { display: block;position: fixed;bottom: 0px;line-height: 20px; width:calc(100vw - 40px); background:none; color:#777; font-size:11px; padding:5px 20px; white-space: pre; }
#terminal input { position:fixed; bottom:0px; z-index:900; line-height: 20px; width:calc(100vw - 20px); background:none; color:black; font-size:11px; padding:5px 10px;}
#terminal hint { display: block;position: fixed;bottom: 0px;line-height: 20px; width:calc(100vw - 20px); background:none; color:#999; font-size:11px; padding:5px 10px; white-space: pre; }
#terminal #widget { display: block;position: fixed;bottom: 0px;line-height: 20px; width:calc(100vw - 20px); background:none; color:#999; font-size:11px; padding:5px 10px; white-space: pre; text-align: right}
#terminal input { z-index: 9000; color:red; font-family: 'input_mono_regular'}
#terminal input:focus { color:#000; }
#terminal #logs { position:fixed; bottom:30px; border-bottom:1px solid #fff; }
#terminal #widget { text-align: right}
#terminal #hint .module { display: inline-block; color:black; }
#terminal #hint .method { display: inline-block; color:black; }
#terminal #hint .params { display: inline-block; color:#999; font-style: italic }

View File

@ -1,5 +1,6 @@
<svg width="40px" height="40px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
<circle cx="20" cy="20" r="2" fill="#ddd"></circle>
<line x1="20" y1="0" x2="20" y2="40" stroke="#ddd"></line>
<line x1="0" y1="20" x2="40" y2="20" stroke="#ddd"></line>
<!-- <line x1="15" y1="13" x2="15" y2="17" stroke="#ccc"></line> -->
<line x1="0" y1="20" x2="40" y2="20" stroke="#ccc" stroke-dasharray="1,3" stroke-width="1"></line>
<line x1="20" y1="0" x2="20" y2="40" stroke="#ccc" stroke-dasharray="1,3" stroke-width="1"></line>
<circle cx="20" cy="20" r="1.5" fill="#ccc"></circle>
</svg>

Before

Width:  |  Height:  |  Size: 283 B

After

Width:  |  Height:  |  Size: 436 B

View File

@ -21,12 +21,14 @@ function Keyboard()
this.shift_held = false;
this.alt_held = false;
switch (event.key || event.which) {
switch (event.key || event.keyCode || event.which) {
case "Enter": this.key_enter(); break;
case "ArrowUp": this.key_arrow_up(); break;
case "ArrowDown": this.key_arrow_down(); break;
case "ArrowLeft": this.key_arrow_left(); break;
case "ArrowRight": this.key_arrow_right(); break;
case "]": ronin.brush.size_up(); break;
case "[": ronin.brush.size_down(); break;
case ":": this.key_colon(); break;
case "Escape": this.key_escape(); break;
case 13: this.key_enter(); break;

View File

@ -36,16 +36,12 @@ function Brush(rune)
this.size_up = function()
{
this.settings["size"] -= this.settings["size"] > 1 ? 1 : 0;
ronin.frame.widget.update();
ronin.terminal.log(new Log(this,"Increased pointer size to: "+this.settings["size"]));
this.settings["size"] += 1;
}
this.size_down = function()
{
this.settings["size"] += 1;
ronin.frame.widget.update();
ronin.terminal.log(new Log(this,"Decreased pointer size to: "+this.settings["size"]));
this.settings["size"] -= this.settings["size"] > 1 ? 1 : 0;
}
// Eraser

View File

@ -152,9 +152,11 @@ function Cursor(rune)
this.set_mode = function(mode = ronin.brush)
{
if(!mode){ mode = ronin.brush; }
if(this.mode == mode){ return; }
this.mode = mode;
document.body.setAttribute("class",this.mode.constructor.name);
document.body.setAttribute("class",this.mode.name);
ronin.widget.update();
}

View File

@ -9,7 +9,7 @@ function Frame(rune)
this.active_layer = null;
this.render_layer = null;
this.add_method(new Method("resize",[new Rect().name]));
this.add_method(new Method("resize",[new Position().name,new Rect().name]));
this.add_method(new Method("select",["text"]));
this.install = function()
@ -24,8 +24,8 @@ function Frame(rune)
// Clamp
starting_canvas.width = parseInt(starting_canvas.width/40) * 40;
starting_canvas.height = parseInt(starting_canvas.height/40) * 40;
starting_canvas.width = parseInt(starting_canvas.width/40) * 40 - 40;
starting_canvas.height = parseInt(starting_canvas.height/40) * 40 - 40;
this.resize(new Command(starting_canvas.width+"x"+starting_canvas.height));
}
@ -55,7 +55,7 @@ function Frame(rune)
this.settings.size = rect;
return 1, "ok";
return 1, "Resized to "+this.settings.size.render();
}
this.select = function(params, preview = false)

View File

@ -51,16 +51,26 @@ function Module(rune)
this.methods[method.name] = method;
}
this.hint = function(content)
this.hint = function(method)
{
var html = "";
for(method in this.methods){
html += ".<b>"+method+"</b> ";
if(method){
html += method.hint();
}
for(setting in this.settings){
html += setting+"="+this.settings[setting]+" ";
else{
for(id in this.methods){
html += "<span class='method'>."+this.methods[id].name+"</span> ";
}
}
// for(method in this.methods){
// html += ".<b>"+method+"</b> ";
// }
// for(setting in this.settings){
// html += setting+"="+this.settings[setting]+" ";
// }
return html;
}

View File

@ -4,8 +4,11 @@ function Terminal(rune)
this.element = document.createElement("div");
this.input = document.createElement("input");
this.hint_element = document.createElement("hint");
this.logs_element = document.createElement("logs");
this.hint_element = document.createElement("div");
this.logs_element = document.createElement("div");
this.hint_element.id = "hint";
this.logs_element.id = "logs";
this.logs_element.innerHTML = "<log>Hello there</log>";
this.history = [];
this.locks = [];
@ -26,7 +29,6 @@ function Terminal(rune)
this.run = function()
{
var command = this.cmd();
var module = command.module();
var method = command.method();
@ -47,18 +49,33 @@ function Terminal(rune)
if(method){
method.preview(command);
}
this.hint_element.innerHTML = "<span class='input'>"+this.input.value+"</span> "+(module ? module.hint() : this.hint());
this.hint_element.innerHTML = "<span class='input'>"+this.input.value+"</span>"+(this.input.value ? " " : "")+(module ? module.hint(method) : this.hint(method));
ronin.cursor.set_mode(module);
}
this.hint = function()
this.hint = function(method)
{
var html = "";
if(this.input.value){
for(id in ronin.modules){
html += ronin.modules[id].name+" ";
if(this.input.value != ronin.modules[id].name.substr(0,this.input.value.length)){ continue; }
html += "<span class='module'>"+ronin.modules[id].name+"</span> ";
}
}
else{
for(id in ronin.modules){
html += "<span class='module'>"+ronin.modules[id].name+"</span> ";
}
}
return html;
}
this.log = function(log)
{
this.logs_element.innerHTML = "";
this.logs_element.appendChild(log.element);
}
this.cmd = function()
{
return new Command(this.input.value);
@ -86,32 +103,6 @@ function Terminal(rune)
rawFile.send(null);
ronin.widget.update();
}
this.parsed_input = function()
{
var content = this.input.value;
if(content.trim() == ""){ ronin.cursor.set_mode(ronin.brush); return "~"; }
if(content.trim()[0] == "~"){ return "~"; }
if(content.indexOf(".") > -1){
var module_name = content.split(" ")[0].split(".")[0]
}
else if(content.indexOf(":") > -1){
var module_name = content.split(" ")[0].split(":")[0]
}
else{
var module_name = content.split(" ")[0];
}
var method_name = content.indexOf(".") > -1 ? content.split(" ")[0].split(".")[1] : "default";
var setting_name = content.indexOf(":") > -1 ? content.split(" ")[0].split(":")[1] : null;
var parameters = content.split(" "); parameters.shift();
var parameters = new Command(parameters);
return {module_name: module_name, method_name: method_name, setting_name: setting_name, parameters: parameters};
}
}
// Log
@ -123,6 +114,6 @@ function Log(host,message,error = false)
this.error = error;
this.element = document.createElement("log");
this.element.setAttribute("class",error ? "error" : "okay");
this.element.innerHTML = "<span class='rune'>"+(host.rune ? host.rune : ">")+"</span> "+message;
this.element.innerHTML = "<span class='module'>"+host.name+"</span>: "+message;
console.log(this.host.constructor.name,this.message);
}

View File

@ -19,11 +19,11 @@ function Method(name,params,mouse_event)
return s;
}
this.help = function()
this.hint = function()
{
var s = "";
for(id in this.params){
s += this.params[id]+":"
s += "<span class='params'>"+this.params[id]+"</span> ";
}
s = s.substr(0,s.length-1);
@ -37,6 +37,6 @@ function Method(name,params,mouse_event)
this.run = function(cmd)
{
return this.host[this.name](cmd,false);
return ronin.terminal.log(new Log(this.host,this.host[this.name](cmd,false)));
}
}