Almost there
This commit is contained in:
parent
de175e12e7
commit
39fc652117
@ -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 }
|
@ -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 |
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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();
|
||||
}
|
||||
|
||||
|
@ -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)
|
||||
|
@ -51,17 +51,27 @@ 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;
|
||||
}
|
||||
|
||||
|
@ -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 = "";
|
||||
for(id in ronin.modules){
|
||||
html += ronin.modules[id].name+" ";
|
||||
if(this.input.value){
|
||||
for(id in ronin.modules){
|
||||
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);
|
||||
}
|
@ -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)));
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user