-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
316 lines (255 loc) · 9.5 KB
/
index.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Map chat</title>
</head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin="" />
<script src="pixi.min.js"></script>
<!-- TODO: Issue with z-index and clicking -->
<style>
#container {
position: relative;
}
#mapid {
height: 600px; width: 1000px; z-index: 1;
}
.canvas {
position: absolute; top: 0; left: 0; z-index: 2;
}
</style>
<div id="container">
<div id="mapid" class="canvas"></div>
<canvas class="canvas" id="pixi"></canvas>
</div>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js" integrity="sha512-C7BBF9irt5R7hqbUm2uxtODlUVs+IsNu2UULGuZN7gM+k/mmeG4xvIEac01BtQa4YIkUpp23zZC4wIwuXaPMQA=="
crossorigin=""></script>
<script>
/*
* LIST OF RENDERED PLAYERS
*/
var playerlist = new Map();
/*
* WEBSOCKET CODE
*/
var conn = new WebSocket('ws://localhost:8080');
conn.onopen = function (e) {
console.log("Connection established!");
};
conn.onmessage = function (e) {
let msg = JSON.parse(e.data);
console.log(msg);
// TODO render positions of new players
if(msg.t == "p") { // if type of msg is position
for(player in msg.d) {
playerlist.set(player, msg.d[player]);
console.log("Player: " + player + ", Position: " + playerlist.get(player));
//call function to render player
render_other_player(player);
}
}
else if(msg.t == "c") { // if type of msg is chat
for(player in msg.d) {
//call function to render chat bubble
}
}
else {
console.log("Not a valid msg type");
}
};
/*
* MAP CODE
*/
var mymap = L.map('mapid').setView([45.495278, -73.572693], 11); //coordinates and zoom-level
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
}).addTo(mymap);
var marker = L.marker([45.495278, -73.572693]).addTo(mymap);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
// disable zoom and panning
mymap.dragging.disable();
mymap.doubleClickZoom.disable();
mymap.scrollWheelZoom.disable();
var moveSpeed = 10000; // in meters
var currentPos = L.latLng([45.495278, -73.572693]); // center of screen
function onMapClick(e) {
var popup = L.popup();
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
//make sure panning speed is relative to distance
var dur = (mymap.getCenter().distanceTo(e.latlng)) / moveSpeed; // distance / speed
var panoptions = { easeLinearity: 1.0, duration: dur };
mymap.panTo(e.latlng, panoptions); // move to where clicked
currentPos = e.latlng; // update position (doesn't correspond to center of screen immediately)
conn.send(JSON.stringify({ "t": "p", i: [currentPos.lat.toFixed(4), currentPos.lng.toFixed(4)] })); // send currentPos to server (4-decimal precision)
}
mymap.on('click', onMapClick);
// when right clicking
function onContextMenu(e) {
// do nothing
}
mymap.on('contextmenu', onContextMenu);
/*
* PIXI CODE
*/
let type = "WebGL"
if (!PIXI.utils.isWebGLSupported()) {
type = "canvas"
}
PIXI.utils.sayHello(type);
let pixi_canvas = document.getElementById("pixi");
//Create a Pixi Application
let app = new PIXI.Application({
width: 800,
height: 600,
view: pixi_canvas, //try to place in pixi element
antialias: false,
transparent: true, // TODO probably very useful to overlay onto map
resolution: 1
}
);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
//load an image and run the `setup` function when it's done
PIXI.loader
.add("images/cat.png")
.add("images/Males/M_02.png")
.on("progress", loadProgressHandler) // function called whenever something is loading
.load(setup);
function loadProgressHandler(loader, resource) {
//Display the file `url` currently being loaded
console.log("loading: " + resource.url);
//Display the percentage of files currently loaded
console.log("progress: " + loader.progress + "%");
//If you gave your files names as the first argument
//of the `add` method, you can access them like this
//console.log("loading: " + resource.name);
}
// List of entities (global)
let cat;
let player;
let other_players = new Object(); //list of other players and their sprites
//This `setup` function will run when the image has loaded
function setup() {
//Create the cat sprite
cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture);
cat.x = 66;
cat.y = 96;
cat.vx = 0;
cat.vy = 0;
let player_texture = PIXI.utils.TextureCache["images/Males/M_02.png"];
let rectangle = new PIXI.Rectangle(0, 0, 16, 17); //x,y,width,height
player_texture.frame = rectangle;
player = new PIXI.Sprite(player_texture);
player.scale.x = 2;
player.scale.y = 2;
//Capture the keyboard arrow keys
let left = keyboard(37),
up = keyboard(38),
right = keyboard(39),
down = keyboard(40);
//Controls for the player
app.renderer.plugins.interaction.on('mousedown', onClickMap); // when you click on the map/window
function onClickMap(event) {
let point = event.data['global']
console.log(point); //coressponds to global (relative to stage) coords of click
player.x = point.x;
player.y = point.y;
}
//Left arrow key `press` method
left.press = () => {
//Change the cat's velocity when the key is pressed
cat.vx = -5;
cat.vy = 0;
};
//Left arrow key `release` method
left.release = () => {
//If the left arrow has been released, and the right arrow isn't down,
//and the cat isn't moving vertically:
//Stop the cat
if (!right.isDown && cat.vy === 0) {
cat.vx = 0;
}
};
//Add the cat to the stage
app.stage.addChild(cat);
app.stage.addChild(player);
//Render the stage
//renderer.render(stage);
//Start the game loop by adding the `gameLoop` function to
//Pixi's `ticker` and providing it with a `delta` argument.
app.ticker.add(delta => gameLoop(delta));
}
function render_other_player(id) {
if(!other_players.hasOwnProperty(id)) { //render player for first time
let player_texture = PIXI.utils.TextureCache["images/Males/M_02.png"];
let rectangle = new PIXI.Rectangle(0, 0, 16, 17); //x,y,width,height
player_texture.frame = rectangle;
let sprite = new PIXI.Sprite(player_texture);
sprite.scale.x = 2;
sprite.scale.y = 2;
app.stage.addChild(sprite);
other_players[id] = sprite; //add sprite to list
//TODO spawn sprite in right place
sprite.x = Math.random()*800
sprite.y = Math.random()*600;
}
else { //adjust player position
//TODO spawn sprite in right place
let sprite = other_players[id];
sprite.x = Math.random()*800
sprite.y = Math.random()*600;
}
}
// Keyboard control snippet
function keyboard(keyCode) {
let key = {};
key.code = keyCode;
key.isDown = false;
key.isUp = true;
key.press = undefined;
key.release = undefined;
//The `downHandler`
key.downHandler = event => {
if (event.keyCode === key.code) {
if (key.isUp && key.press) key.press();
key.isDown = true;
key.isUp = false;
}
event.preventDefault();
};
//The `upHandler`
key.upHandler = event => {
if (event.keyCode === key.code) {
if (key.isDown && key.release) key.release();
key.isDown = false;
key.isUp = true;
}
event.preventDefault();
};
//Attach event listeners
window.addEventListener(
"keydown", key.downHandler.bind(key), false
);
window.addEventListener(
"keyup", key.upHandler.bind(key), false
);
return key;
}
//Set the game state (so you can have different game states ie: menu/play/inventory)
state = play;
function gameLoop(delta) {
//Update the current game state:
state(delta);
}
function play(delta) {
//Move the cat 1 pixel to the right each frame
cat.x += cat.vx;
}
</script>
</html>