forked from balsama/Missile-Attack
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclient.html
109 lines (97 loc) · 4.7 KB
/
client.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="main.css">
<script type="text/javascript">
// Keyboard control
// made a jsfiddle to figure keycodes: http://jsfiddle.net/3n2hc8mu/
var HOST = "http://missile-attack:8080";
var CMD = {
UP : {url: "/up", selector: "#up", keycode: 38},
DOWN : {url: "/down", selector: "#down", keycode: 40},
LEFT : {url: "/left", selector: "#left", keycode: 37},
RIGHT : {url: "/right", selector: "#right", keycode: 39},
FIRE : {url: "/fire/1", selector: "#fire", keycode: 32},
ZERO : {url: "/zero", selector: "#zero", keycode: 13},
STOP : {url: "/stop", selector: "#stop"}
};
// used to surpress constantly firing get request during pressed state, because events are fired repeatedly
var isKeyDown = false;
var sendCommand = function(cmd){
if(cmd == CMD.STOP){
isKeyDown = false;
$('#up').removeClass('active');
$('#down').removeClass('active');
$('#right').removeClass('active');
$('#left').removeClass('active');
$('#zero').removeClass('active');
$('#fire').removeClass('active');
} else {
isKeyDown = true;
$(cmd.selector).addClass('active');
}
$.get(HOST + cmd.url, function(data){
log(data);
});
}
var log = function(msg){
var c = $('#console');
c.append(msg + "<br>");
var height = c[0].scrollHeight;
c.scrollTop(height);
}
// autostart
$(function(){
$('html').keydown(function(e){
if (e.which == CMD.UP.keycode && !isKeyDown) {
sendCommand(CMD.UP);
} else if (e.which == CMD.DOWN.keycode && !isKeyDown) {
sendCommand(CMD.DOWN);
} else if (e.which == CMD.LEFT.keycode && !isKeyDown) {
sendCommand(CMD.LEFT);
} else if (e.which == CMD.RIGHT.keycode && !isKeyDown) {
sendCommand(CMD.RIGHT);
} else if (e.which == CMD.FIRE.keycode && !isKeyDown) {
sendCommand(CMD.FIRE);
} else if (e.which == CMD.FIRE.keycode && !isKeyDown) {
sendCommand(CMD.ZERO);
} else if (e.which == 46) {
// clear console with delete key
$('#console').text("");
}
});
$('html').keyup(function(e){
if ((e.which == 38) || (e.which == 40) || (e.which == 37) || (e.which == 39) || (e.which == 32) || (e.which == 13)) {
// console.log("KEY UP!!!!");
sendCommand(CMD.STOP);
}
});
});
</script>
</head>
<body>
<h2>Client Demo</h2>
<p>jQuery.get() is used to fire a get request to the api on http://missile-attack:8080</p>
<p>You can also use arrow keys and space, delete key and enter for controlling the missile launcher.</p>
<div id="controls">
<ul>
<li onclick="$.get( 'http://missile-attack:8080/right/500');">go right 500 ms</li>
<li onclick="$.get( 'http://missile-attack:8080/left/500');">go left 500 ms</li>
<li onclick="$.get( 'http://missile-attack:8080/up/500');">go up 500 ms</li>
<li onclick="$.get( 'http://missile-attack:8080/down/500');">go down 500 ms</li>
<li onclick="$('#console').text('');">clear console</li>
<li id="zero" onclick="$.get( 'http://missile-attack:8080/zero/1');">go to zero</li>
<li id="fire" onclick="$.get( 'http://missile-attack:8080/fire/1');">FIRE!</li>
</ul>
<p>for continuous movement press and hold the mouse button.</p>
<ul>
<li id="right" onmousedown="sendCommand(CMD.RIGHT);" onmouseup="sendCommand(CMD.STOP);">continous right</li>
<li id="left" onmousedown="sendCommand(CMD.LEFT);" onmouseup="sendCommand(CMD.STOP);">continous left</li>
<li id="up" onmousedown="sendCommand(CMD.UP);" onmouseup="sendCommand(CMD.STOP);">continous up</li>
<li id="down" onmousedown="sendCommand(CMD.DOWN);" onmouseup="sendCommand(CMD.STOP);">continous down</li>
<li id="stop" onmousedown="sendCommand(CMD.STOP);" onmouseup="sendCommand(CMD.STOP);">emergency stop</li>
</ul>
</div>
<div id="console">Results of HTTP Requests are logged here - sent to http://missile-attack:8080<br></div>
</body>
</html>