diff --git a/index.html b/index.html index ae12102..0e80aa9 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,13 @@ + - +
+ +
\ No newline at end of file diff --git a/links/main.css b/links/main.css index 0c578d6..ce5c990 100644 --- a/links/main.css +++ b/links/main.css @@ -1,3 +1,6 @@ body { margin:0px; padding:0px; overflow:hidden;} canvas:hover { cursor: crosshair;} -#commander { background:black; padding:15px; position:fixed; bottom:30; color:white; left:30px; border:0; width:calc(100vw - 60px); font-family:courier; cursor:pointer;} +#commander { display:none; } +#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;} diff --git a/scripts/commander.js b/scripts/commander.js new file mode 100644 index 0000000..17cfee2 --- /dev/null +++ b/scripts/commander.js @@ -0,0 +1,21 @@ +function Commander(element,element_input) +{ + this.element = element; + this.element_input = element_input; + + this.show = function() + { + this.element.setAttribute('class','visible'); + this.element_input.focus(); + } + + this.hide = function() + { + this.element.setAttribute('class','hidden'); + } + + this.validate = function() + { + console.log(this.element_input.value); + } +} \ No newline at end of file diff --git a/scripts/keyboard.js b/scripts/keyboard.js index aa6d433..94ee546 100644 --- a/scripts/keyboard.js +++ b/scripts/keyboard.js @@ -17,19 +17,30 @@ function Keyboard() this.listen = function(event) { if(this.is_locked === true){ return; } + + console.log(event.keyCode); switch (event.keyCode) { + case 9: this.key_tab(); break; case 13: this.key_enter(); break; case 32: this.key_space(); break; case 38: this.key_arrow_up(); break; case 40: this.key_arrow_down(); break; case 37: this.key_arrow_left(); break; case 39: this.key_arrow_right(); break; + case 186: this.key_colon(); break; + case 27: this.key_escape(); break; } }; + this.key_tab = function() + { + return; + } + this.key_enter = function() { + commander.validate(); } this.key_space = function() @@ -51,4 +62,14 @@ function Keyboard() this.key_arrow_right = function() { } + + this.key_colon = function() + { + commander.show(); + } + + this.key_escape = function() + { + commander.hide(); + } } \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index 4770fda..6a5eae5 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -2,6 +2,7 @@ var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var brush = new Brush(); +var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input")); canvas.addEventListener('mousemove', function(e) { brush.draw(e); @@ -23,4 +24,7 @@ var mirror_test2 = new Pointer(new Position(0,10)); mirror_test2.mirror = new Position(200,0); brush.add_pointer(mirror_test2); -brush.add_pointer(new Pointer(new Position(0,10))); \ No newline at end of file +brush.add_pointer(new Pointer(new Position(0,10))); + +var keyboard = new Keyboard(); +document.onkeydown = function myFunction(){ keyboard.listen(event); };