diff --git a/README.md b/README.md index 172d51d..bb0e7aa 100644 --- a/README.md +++ b/README.md @@ -3,4 +3,25 @@ Ronin is a web based drawing application and visual language. The repository comes with a script that fires Ronin from within Localhost. Launch Ronin and press **:**(colon) to display the command prompt. -Enjoy \ No newline at end of file +Enjoy + + this.collection = {}; + 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"; + this.collection["custom"]["black"] = "@ 720x405 #ff0000 ; / ../assets/todo.jpg 720x 0,-30 ; % grey ; % sharpen ; % sharpen ; % chromatic 2 ; @ layer=icon ; / ../assets/logo.png 35x35 15,355 "; + + this.collection["photo"] = {}; + this.collection["photo"]["black"] = "@ 720x405 #ff0000 ; / ../assets/todo.jpg 720x 0,-30 ; % sharpen 0.2 ; % chromatic 2 ; % grey"; + + this.collection["brush"] = {}; + this.collection["brush"]["radial6"] = "> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'"; + this.collection["brush"]["radial8"] = "> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'"; + + this.collection["vector"] = {}; + this.collection["vector"]["ronin"] = "+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black"; + this.collection["vector"]["circle"] = "+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"; diff --git a/links/main.css b/links/main.css index 8a5eb2a..e871d96 100644 --- a/links/main.css +++ b/links/main.css @@ -13,8 +13,9 @@ canvas:hover { cursor: none;} #cursor { width:10px; height:10px; position:fixed;border:1px solid red; border-radius:10px; z-index:8000; 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 input { display: block; position:absolute; bottom:0px; width:100vw; padding:0px 5px; font-size:10px; line-height: 20px; background:none; z-index:900; color: #ff680a;} +#terminal hint { background:#000; position:absolute; bottom:0px; line-height: 20px; padding:0px 5px; width:100vw; color:#777; font-size:10px; white-space: pre;} +#terminal hint .name { font-family: "input_mono_regular"; color:#999; } #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; } \ No newline at end of file diff --git a/scripts/core/init.js b/scripts/core/init.js index f6010f4..71bbbd9 100644 --- a/scripts/core/init.js +++ b/scripts/core/init.js @@ -34,10 +34,10 @@ starting_canvas.height = parseInt(starting_canvas.height/40) * 40; 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("- 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(); diff --git a/scripts/core/keyboard.js b/scripts/core/keyboard.js index b68cc75..3f3f67c 100644 --- a/scripts/core/keyboard.js +++ b/scripts/core/keyboard.js @@ -44,7 +44,6 @@ function Keyboard() // Passive ronin.terminal.passive(ronin.terminal.input_element.value); - ronin.surface.update_widget(); }; @@ -84,7 +83,9 @@ function Keyboard() this.key_escape = function() { - if(ronin.module){ ronin.module.key_escape(); } + for(var key in ronin.modules){ + ronin.modules[key].key_escape(); + } } this.key_delete = function() diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index 8a2ec7f..f22e734 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -49,12 +49,14 @@ function Brush(rune) { this.size -= this.size > 1 ? 1 : 0; ronin.surface.update_widget(); + ronin.terminal.log(new Log(this,"Increased pointer size to: "+this.size)); } this.size_down = function() { - this.size += 1; - ronin.surface.update_widget(); + this.size += 1; + ronin.surface.update_widget(); + ronin.terminal.log(new Log(this,"Decreased pointer size to: "+this.size)); } this.add_pointer = function(cmd) diff --git a/scripts/modules/help.js b/scripts/modules/help.js index 1325f93..b81f289 100644 --- a/scripts/modules/help.js +++ b/scripts/modules/help.js @@ -53,50 +53,4 @@ function Help(rune) ronin.terminal.log(new Log(this,lines[line])); } } - - // - - - this.view_units = function() - { - html = "

Units

\n\n"; - html += ""; - html += "\n"; - - html += "\n"; - return "
"+html+"
"; - } - - this.view_presets = function() - { - html = "

Presets

\n\n"; - for(var key in ronin.modules["-"].collection){ - html += "

"+key+"

\n"; - } - - return "
"+html+"
"; - } - - - function pad(s,length) - { - if(!s){ return s; } - - var new_string = s; - while(new_string.length < length){ - new_string += " "; - } - return new_string; - } } \ No newline at end of file diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js index 39d2a20..7c2725a 100644 --- a/scripts/modules/overlay.js +++ b/scripts/modules/overlay.js @@ -111,6 +111,7 @@ function Overlay(rune) this.context = function() { + if(!this.layer){ this.create_layer(); } return this.layer.context(); } @@ -128,9 +129,7 @@ function Overlay(rune) ronin.overlay.clear(); ronin.overlay.draw_pointer(position); this.live_draw_from = position; - commander.show(); - commander.element_input.focus(); - commander.element_input.value = "| "+this.live_draw_from.render(); + ronin.terminal.input_element.value = "| "+this.live_draw_from.render(); } this.mouse_move = function(position) @@ -144,13 +143,15 @@ function Overlay(rune) rect.height = position.y - this.live_draw_from.y; ronin.overlay.draw_rect(this.live_draw_from,rect); - commander.element_input.value = "| "+this.live_draw_from.render()+" "+rect.render(); + ronin.terminal.input_element.value = "| "+this.live_draw_from.render()+" "+rect.render(); + + ronin.terminal.update_hint(); } this.mouse_up = function(position) { this.live_draw_from = null; - commander.element_input.focus(); + ronin.terminal.input_element.focus(); } // Widget @@ -159,4 +160,9 @@ function Overlay(rune) { return "Guide"; } + + this.key_escape = function() + { + if(this.layer){ this.layer.remove(this); } + } } \ No newline at end of file diff --git a/scripts/modules/preset.js b/scripts/modules/preset.js deleted file mode 100644 index 36b52b0..0000000 --- a/scripts/modules/preset.js +++ /dev/null @@ -1,62 +0,0 @@ -function Preset(rune) -{ - Module.call(this,rune); - - this.collection = {}; - 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"; - this.collection["custom"]["black"] = "@ 720x405 #ff0000 ; / ../assets/todo.jpg 720x 0,-30 ; % grey ; % sharpen ; % sharpen ; % chromatic 2 ; @ layer=icon ; / ../assets/logo.png 35x35 15,355 "; - - this.collection["photo"] = {}; - this.collection["photo"]["black"] = "@ 720x405 #ff0000 ; / ../assets/todo.jpg 720x 0,-30 ; % sharpen 0.2 ; % chromatic 2 ; % grey"; - - this.collection["brush"] = {}; - this.collection["brush"]["radial6"] = "> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'"; - this.collection["brush"]["radial8"] = "> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'"; - - this.collection["vector"] = {}; - this.collection["vector"]["ronin"] = "+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black"; - this.collection["vector"]["circle"] = "+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"; - - this.active = function(cmd) - { - var input = cmd.content.join(" ").trim().split(" ")[0]; - var name = cmd.content.join(" ").trim().split(" ")[1]; - var value = this.collection[input][name]; - - if(this.collection[input] && this.collection[input][name]){ - setTimeout(function(){ - commander.element.setAttribute('class','visible'); - commander.element_input.focus(); - commander.element_input.value = value; - }, 100); - } - } - - this.hint = function(cmd) - { - var input = cmd.content.join(" ").trim().split(" ")[0]; - var name = cmd.content.join(" ").trim().split(" ")[1]; - var s = this.pad(cmd.content.join(" ")); - - if(this.collection[input] && this.collection[input][name]){ - s += this.collection[input][name]; - } - else if(this.collection[input]){ - for(key in this.collection[input]) { - s += key+" "; - } - } - else{ - for(key in this.collection) { - s += key+" "; - } - } - return s; - } -} \ No newline at end of file diff --git a/scripts/modules/surface.layer.js b/scripts/modules/surface.layer.js index 90ba14c..ae60362 100644 --- a/scripts/modules/surface.layer.js +++ b/scripts/modules/surface.layer.js @@ -1,5 +1,6 @@ function Layer(name,manager = null) { + this.rune = "@"; this.name = name; this.manager = manager; this.element = document.createElement("canvas"); @@ -8,7 +9,7 @@ function Layer(name,manager = null) this.resize = function(rect) { - console.log("Resize "+this.name+" to "+rect.render()); + ronin.terminal.log(new Log(this,"Resize "+this.name+" to "+rect.render())); var pixels_rect = new Rect(this.element.width+"x"+this.element.height); @@ -27,7 +28,7 @@ function Layer(name,manager = null) this.remove = function(manager) { - console.log("Removing layer "+this.name); + ronin.terminal.log(new Log(this,"Removing layer "+this.name)); manager.layer = null; ronin.surface.layers[this.name].element.outerHTML = ""; delete ronin.surface.layers[this.name]; @@ -52,10 +53,9 @@ function Layer(name,manager = null) this.widget = function() { - var e_name = ""; - e_name += this.name; - + var e_name = this.name; var e_class = ""; + if(ronin.surface.active_layer.name == this.name){ e_class += "highlight "; } if(this.manager != null){ e_class += "managed "; } diff --git a/scripts/modules/terminal.js b/scripts/modules/terminal.js index a191a4a..d9d4ec5 100644 --- a/scripts/modules/terminal.js +++ b/scripts/modules/terminal.js @@ -27,11 +27,13 @@ function Terminal(rune) var cmd = new Command(content.substring(1).trim().split(" ")); ronin.module = null; + this.hint_element.innerHTML = ""; if(ronin.modules[key]){ ronin.modules[key].passive(cmd); ronin.module = ronin.modules[key]; ronin.cursor.set_mode(ronin.module); + this.update_hint(content); } else{ ronin.cursor.set_mode(ronin.brush); @@ -46,6 +48,8 @@ function Terminal(rune) return cmd; } + // Queue + this.queue = []; this.query = function(input_str) @@ -86,10 +90,41 @@ function Terminal(rune) } } + // + this.log = function(log) { this.logs_element.appendChild(log.element); } + + // Hint + + this.update_hint = function(content = this.input_element.value) + { + var padding = ""; + for (var i = 0; i < this.input_element.value.length; i++) { + padding += " "; + } + + if(content.indexOf(";") > -1){ + var h = padding+" "+content.split(";").length+" commands"; + } + else{ + var h = padding+" "+ronin.module.constructor.name+" "; + for(param in ronin.module.parameters){ + var name = new ronin.module.parameters[param]().constructor.name; + h += name+" "; + } + } + + this.hint_element.innerHTML = h; + } + + + this.key_escape = function() + { + this.input_element.value = ""; + } } // Log diff --git a/scripts/modules/vector.js b/scripts/modules/vector.js index bac3bdf..5a0e8d4 100644 --- a/scripts/modules/vector.js +++ b/scripts/modules/vector.js @@ -89,6 +89,7 @@ function Vector(rune) ronin.terminal.input_element.value = "+ "+this.create_path(); this.passive(ronin.terminal.cmd()); + ronin.terminal.update_hint(); } this.mouse_move = function(position) @@ -97,6 +98,7 @@ function Vector(rune) ronin.terminal.input_element.value = "+ "+this.create_path(); ronin.terminal.input_element.value += "L"+position.render(); this.passive(ronin.terminal.cmd()); + ronin.terminal.update_hint(); } this.mouse_up = function(position) @@ -126,6 +128,7 @@ function Vector(rune) ronin.terminal.input_element.value = "+ "+this.create_path(); this.passive(ronin.terminal.cmd()); this.last_pos = position; + ronin.terminal.update_hint(); } this.key_escape = function()