-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathspectate.html
125 lines (116 loc) · 2.6 KB
/
spectate.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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="chat.css">
</head>
<body>
<canvas id="canvas" width="!!canvas_w!!" height="!!canvas_h!!"></canvas>
<div>
<button type="button" onclick="move_spect(0,0,1)">Move up</button>
<button type="button" onclick="move_spect(0,0,-1)">Move down</button>
</div>
<br>
<img id="tilesheet" src="http://i.imgur.com/fUGSAWC.png" alt="tilesheet" style="display: none;">
<script src="map.js"></script>
<script>
setup_map("canvas","tilesheet",16,16,!!size!!)
var c = document.getElementById("canvas");
var view
function restore_view()
{
view={x:!!start_x!!,y:!!start_y!!,z:!!start_z!!}
}
restore_view()
var movement={
Numpad8:[0,-1,0],
Numpad7:[-1,-1,0],
Numpad4:[-1,0,0],
Numpad1:[-1,1,0],
Numpad2:[0,1,0],
Numpad3:[1,1,0],
Numpad6:[1,0,0],
Numpad9:[1,-1,0]
//TODO up/down
}
function isNil(value) {
return value == undefined;
}
var cur_movement
document.onkeydown=function (key) {
cur_movement=movement[key.code]
}
document.onkeyup=function (key) {
cur_movement=null
}
function key_movement(){
if(!isNil(cur_movement))
{
move_spect(cur_movement[0],cur_movement[1],cur_movement[2])
setTimeout(key_movement, 100);
}
else
{
setTimeout(key_movement, 100);
}
}
key_movement()
function update_map() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if(this.status==200)
{
var json_map= JSON.parse(this.responseText);
draw_map(json_map)
}
setTimeout(update_map, 100);
}
};
xhttp.open("GET", "map_spectate?x="+view.x+"&y="+view.y+"&z="+view.z, true);
xhttp.send();
}
function get_new_unit() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//do sth?
}
};
xhttp.open("GET", "new_unit", true);
xhttp.send();
}
var mouse_pos={x:0,y:0}
function move_spect(dx,dy,dz) {
view.x+=dx
view.y+=dy
view.z+=dz
}
var mouseIsDown = false;
function update_mouse(e) {
var cx=Math.floor(e.x/tile_x)-(canvas_tile_count-1)/2;
var cy=Math.floor(e.y/tile_y)-(canvas_tile_count-1)/2;
mouse_pos={x:cx,y:cy}
}
c.onmousedown = function(e){
update_mouse(e)
//dragOffset.x = e.x - mainLayer.trans.x;
//dragOffset.y = e.y - mainLayer.trans.y;
move_spect(mouse_pos.x,mouse_pos.y,0)
mouseIsDown = true;
}
c.onmouseup = function(e){
mouseIsDown = false;
}
/* //TODO issue commands each X time
c.onmousemove = function(e){
if(!mouseIsDown) return;
update_mouse(e)
return false;
}
*/
update_map();
</script>
</body>
</html>