diff --git a/index.html b/index.html index 865b589..9f5fde7 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ + @@ -23,6 +24,7 @@
+
Hey
diff --git a/links/main.css b/links/main.css index 2a662e1..fea6a2e 100644 --- a/links/main.css +++ b/links/main.css @@ -8,4 +8,6 @@ canvas:hover { cursor: crosshair;} #commander { display:none; z-index: 2000; } #commander.visible { display:block; } #commander.hidden { display:none; } -#commander input { background:black; padding:15px; position:fixed; bottom:0; color:white; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;} \ No newline at end of file +#commander input { background:black; padding:15px; position:fixed; bottom:0; color:white; font-size:14px; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;} + +#commander_hint { background: black;position: absolute;bottom: 47px;padding: 15px 15px 0 15px;line-height: 17px;font-family: courier;font-size: 14px;width: 100vw;color: #999;} \ No newline at end of file diff --git a/scripts/commander.js b/scripts/commander.js index 57e547e..dd2550a 100644 --- a/scripts/commander.js +++ b/scripts/commander.js @@ -2,6 +2,7 @@ function Commander(element,element_input) { this.element = element; this.element_input = element_input; + this.cmd = null; this.show = function() { @@ -25,7 +26,7 @@ function Commander(element,element_input) case "@": ronin.canvas.active(cmd); break; - case "~": + case "~": // TODO ronin.history.active(cmd); break; case "$": @@ -40,13 +41,13 @@ function Commander(element,element_input) case "|": ronin.overlay.active(cmd); break; - case "^": + case "^": // TODO ronin.translate.active(cmd); break; - case "=": + case "=": // TODO ronin.zoom.active(cmd); break; - case "#": + case "#": // TODO ronin.layers.active(cmd); break; case ":": @@ -61,35 +62,40 @@ function Commander(element,element_input) { var key = cmd_array[0]; cmd_array.shift(); - var cmd = new Command(cmd_array); + this.cmd = new Command(cmd_array); switch(key) { case "@": - ronin.canvas.passive(cmd); + ronin.canvas.passive(this.cmd); + ronin.module = ronin.canvas; break; case "~": - ronin.history.passive(cmd); + ronin.history.passive(this.cmd); + ronin.module = ronin.history; break; case "/": - ronin.file.passive(cmd); + ronin.file.passive(this.cmd); + ronin.module = ronin.file; break; case ">": - ronin.brush.passive(cmd); + ronin.brush.passive(this.cmd); + ronin.module = ronin.brush; break; case "|": - ronin.overlay.passive(cmd); + ronin.overlay.passive(this.cmd); + ronin.module = ronin.overlay; break; - case "^": - ronin.translate.passive(cmd); + case "^": // TODO + ronin.translate.passive(this.cmd); + ronin.module = ronin.translate; break; - case "=": - ronin.zoom.passive(cmd); - break; - case "#": - ronin.layers.passive(cmd); + case "=": // TODO + ronin.zoom.passive(this.cmd); + ronin.module = ronin.zoom; break; case ":": - ronin.filter.passive(cmd); + ronin.filter.passive(this.cmd); + ronin.module = ronin.filter; break; } } diff --git a/scripts/keyboard.js b/scripts/keyboard.js index 7ce08ff..7801fee 100644 --- a/scripts/keyboard.js +++ b/scripts/keyboard.js @@ -62,6 +62,8 @@ function Keyboard() else{ commander.passive(cmd.split(" ")); } + + ronin.hint.update(); }; this.key_tab = function() diff --git a/scripts/main.js b/scripts/main.js index 9bcbdce..c9c9485 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -7,6 +7,9 @@ ronin.canvas.element = canvas; ronin.overlay.element = document.getElementById('overlay'); ronin.overlay.context().imageSmoothingEnabled = false; + +ronin.hint.element = document.getElementById('commander_hint'); + ronin.element = document.getElementById('ronin'); var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input")); diff --git a/scripts/ronin.brush.js b/scripts/ronin.brush.js index 0a2523b..85d38fe 100644 --- a/scripts/ronin.brush.js +++ b/scripts/ronin.brush.js @@ -28,6 +28,15 @@ function Brush() { } + this.hint = function(cmd) + { + var hint_value = (cmd.value() ? "Size "+cmd.value()+" " : ""); + var hint_position = (cmd.position() ? "Position "+cmd.position().x+","+cmd.position().y+" " : ""); + var hint_color = (cmd.color() ? "Color "+cmd.color().hex+" " : ""); + + return "Brush: "+hint_value+hint_position+hint_color; + } + // Commander this.settings = function(p) diff --git a/scripts/ronin.canvas.js b/scripts/ronin.canvas.js index cebffc0..2f44427 100644 --- a/scripts/ronin.canvas.js +++ b/scripts/ronin.canvas.js @@ -26,6 +26,14 @@ function Canvas(element) } } + this.hint = function(cmd) + { + var hint_rect = (cmd.rect() ? "Resize to "+cmd.rect().width+"px by "+cmd.rect().height+"px " : ""); + var hint_color = (cmd.color() ? "Fill with color "+cmd.color().hex+" " : ""); + + return "Canvas: "+hint_rect+hint_color; + } + // this.resize = function(rect) diff --git a/scripts/ronin.file.js b/scripts/ronin.file.js index e763683..f1b3b13 100644 --- a/scripts/ronin.file.js +++ b/scripts/ronin.file.js @@ -33,6 +33,15 @@ function File() } } + this.hint = function(cmd) + { + var hint_path = (cmd.path() ? "Path "+cmd.path()+" " : ""); + var hint_position = (cmd.position() ? "Position "+cmd.position().x+","+cmd.position().y+" " : ""); + var hint_rect = (cmd.rect() ? "Size "+cmd.rect().width+"px by "+cmd.rect().height+"px " : ""); + + return "File: "+hint_path+hint_position+hint_rect; + } + this.save = function(cmd) { var d=canvas.toDataURL("image/png"); diff --git a/scripts/ronin.hint.js b/scripts/ronin.hint.js new file mode 100644 index 0000000..8993a62 --- /dev/null +++ b/scripts/ronin.hint.js @@ -0,0 +1,11 @@ +function Hint(element) +{ + Module.call(this); + + this.element = element; + + this.update = function() + { + this.element.innerHTML = !ronin.module ? "Missing" : ronin.module.hint(commander.cmd); + } +} \ No newline at end of file diff --git a/scripts/ronin.history.js b/scripts/ronin.history.js new file mode 100644 index 0000000..e08c95a --- /dev/null +++ b/scripts/ronin.history.js @@ -0,0 +1,16 @@ +function History(element) +{ + Module.call(this); + + this.element = element; + + this.active = function(cmd) + { + + } + + this.passive = function(cmd) + { + + } +} \ No newline at end of file diff --git a/scripts/ronin.js b/scripts/ronin.js index 7e442ae..2afbe52 100644 --- a/scripts/ronin.js +++ b/scripts/ronin.js @@ -5,6 +5,7 @@ function Ronin() this.overlay = new Overlay(); this.brush = new Brush(); this.file = new File(); + this.hint = new Hint(); this.fill = function(p) { diff --git a/scripts/ronin.module.js b/scripts/ronin.module.js index cc8f0de..41e092f 100644 --- a/scripts/ronin.module.js +++ b/scripts/ronin.module.js @@ -1,12 +1,17 @@ function Module() { - this.active = function() + this.active = function(cmd) { console.log("Nothing to do."); } - this.passive = function() + this.passive = function(cmd) { console.log("Nothing to do."); } + + this.hint = function(cmd) + { + return "unknown"; + } } \ No newline at end of file diff --git a/scripts/ronin.overlay.js b/scripts/ronin.overlay.js index 08bb128..22523a1 100644 --- a/scripts/ronin.overlay.js +++ b/scripts/ronin.overlay.js @@ -16,6 +16,14 @@ function Overlay(element) } + this.hint = function(cmd) + { + var hint_position = (cmd.position() ? "Position "+cmd.position().x+","+cmd.position().y+" " : ""); + var hint_rect = (cmd.rect() ? "Size "+cmd.rect().width+"px by "+cmd.rect().height+"px " : ""); + + return "Overlay: "+hint_position+hint_rect; + } + // draw this.draw = function(position,rect)