dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved commander interface.

Browse Source
This commit is contained in:
Devine Lu Linvega 2016-11-12 08:52:18 -08:00
parent 6208744828
commit 970676a3ff
5 changed files with 55 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -5,10 +5,13 @@
<script type="text/javascript" src="scripts/pointer.js"></script> <script type="text/javascript" src="scripts/pointer.js"></script>
<script type="text/javascript" src="scripts/brush.js"></script> <script type="text/javascript" src="scripts/brush.js"></script>
<script type="text/javascript" src="scripts/keyboard.js"></script> <script type="text/javascript" src="scripts/keyboard.js"></script>
<script type="text/javascript" src="scripts/commander.js"></script>
</head> </head>
<body> <body>
<canvas id="myCanvas" width="1280" height="800" style="background:#efefef"></canvas> <canvas id="myCanvas" width="1280" height="800" style="background:#efefef"></canvas>
<input id ='commander'/> <div id ='commander'>
<input id='commander_input'/>
</div>
<script type="text/javascript" src="scripts/main.js"></script> <script type="text/javascript" src="scripts/main.js"></script>
</body> </body>
</html> </html>

5
links/main.css
View File

@ -1,3 +1,6 @@
body { margin:0px; padding:0px; overflow:hidden;} body { margin:0px; padding:0px; overflow:hidden;}
canvas:hover { cursor: crosshair;} 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;}

21
scripts/commander.js Normal file
View File

@ -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);
}
}

21
scripts/keyboard.js
View File

@ -17,19 +17,30 @@ function Keyboard()
this.listen = function(event) this.listen = function(event)
{ {
if(this.is_locked === true){ return; } if(this.is_locked === true){ return; }
console.log(event.keyCode);
switch (event.keyCode) switch (event.keyCode)
{ {
case 9: this.key_tab(); break;
case 13: this.key_enter(); break; case 13: this.key_enter(); break;
case 32: this.key_space(); break; case 32: this.key_space(); break;
case 38: this.key_arrow_up(); break; case 38: this.key_arrow_up(); break;
case 40: this.key_arrow_down(); break; case 40: this.key_arrow_down(); break;
case 37: this.key_arrow_left(); break; case 37: this.key_arrow_left(); break;
case 39: this.key_arrow_right(); 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() this.key_enter = function()
{ {
commander.validate();
} }
this.key_space = function() this.key_space = function()
@ -51,4 +62,14 @@ function Keyboard()
this.key_arrow_right = function() this.key_arrow_right = function()
{ {
} }
this.key_colon = function()
{
commander.show();
}
this.key_escape = function()
{
commander.hide();
}
} }

4
scripts/main.js
View File

@ -2,6 +2,7 @@
var canvas = document.getElementById('myCanvas'); var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
var brush = new Brush(); var brush = new Brush();
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
canvas.addEventListener('mousemove', function(e) { canvas.addEventListener('mousemove', function(e) {
brush.draw(e); brush.draw(e);
@ -24,3 +25,6 @@ mirror_test2.mirror = new Position(200,0);
brush.add_pointer(mirror_test2); brush.add_pointer(mirror_test2);
brush.add_pointer(new Pointer(new Position(0,10))); brush.add_pointer(new Pointer(new Position(0,10)));
var keyboard = new Keyboard();
document.onkeydown = function myFunction(){ keyboard.listen(event); };