Imported existing sources
Daniel Brunner
BIN
src/img/gym_blue.png
Normal file
|
After Width: | Height: | Size: 7.5 KiB |
BIN
src/img/gym_blue_battle.png
Normal file
|
After Width: | Height: | Size: 8.6 KiB |
BIN
src/img/gym_neutral.png
Normal file
|
After Width: | Height: | Size: 8.2 KiB |
BIN
src/img/gym_neutral_battle.png
Normal file
|
After Width: | Height: | Size: 7.1 KiB |
BIN
src/img/gym_red.png
Normal file
|
After Width: | Height: | Size: 7.7 KiB |
BIN
src/img/gym_red_battle.png
Normal file
|
After Width: | Height: | Size: 8.6 KiB |
BIN
src/img/gym_yellow.png
Normal file
|
After Width: | Height: | Size: 7.5 KiB |
BIN
src/img/gym_yellow_battle.png
Normal file
|
After Width: | Height: | Size: 8.5 KiB |
BIN
src/img/pokestop.png
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
src/img/pokestop_cooldown.png
Normal file
|
After Width: | Height: | Size: 5.3 KiB |
BIN
src/img/pokestop_cooldown_lure.png
Normal file
|
After Width: | Height: | Size: 5.4 KiB |
BIN
src/img/pokestop_lure.png
Normal file
|
After Width: | Height: | Size: 5.2 KiB |
18
src/index.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title></title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
138
src/script.js
Normal file
@ -0,0 +1,138 @@
|
||||
var websocketAddress = ((window.location.protocol === "https:") ? "wss:" : "ws:") + "//" + window.location.host + "/websocket";
|
||||
|
||||
if (typeof String.prototype.contains === 'undefined') {
|
||||
String.prototype.contains = function(it) {
|
||||
return this.indexOf(it) != -1;
|
||||
};
|
||||
}
|
||||
|
||||
var TeamColor = { Neutral: 0, Blue: 1, Red: 2, Yellow: 3 };
|
||||
var FortRenderingType = { Default: 0, InternalTest: 1 };
|
||||
var FortSponsor = { UnsetSponsor: 0, Mcdonalds: 1, PokemonStore: 2 };
|
||||
var FortType = { Gym: 0, Checkpoint: 1 };
|
||||
|
||||
function initMap() {
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
settings: {
|
||||
draggable: false
|
||||
}
|
||||
});
|
||||
|
||||
var playerMarker = new google.maps.Marker({
|
||||
map: map
|
||||
});
|
||||
|
||||
var fortPath = new google.maps.Polyline({
|
||||
path: [],
|
||||
geodesic: true,
|
||||
strokeColor: '#FF0000',
|
||||
strokeOpacity: 1.0,
|
||||
strokeWeight: 2
|
||||
});
|
||||
|
||||
var playerPos;
|
||||
var fortPathTarget;
|
||||
var fortMarkers;
|
||||
var intervalId;
|
||||
|
||||
var handleMessage = function(e) {
|
||||
var message = JSON.parse(e.data);
|
||||
var type = message.$type;
|
||||
if(type.contains('UpdatePositionEvent')) {
|
||||
var pos = {lat: message.Latitude, lng: message.Longitude};
|
||||
if(playerPos.lat == 0 && playerPos.lng == 0) {
|
||||
map.setCenter(pos);
|
||||
playerMarker.setPosition(pos);
|
||||
}
|
||||
playerPos = pos;
|
||||
} else if(type.contains('PokeStopListEvent')) {
|
||||
var now = new Date();
|
||||
for(var i in message.Forts.$values) {
|
||||
var fort = message.Forts.$values[i];
|
||||
|
||||
if(!(fort.Id in fortMarkers)) {
|
||||
fortMarkers[fort.Id] = new google.maps.Marker({
|
||||
map: map
|
||||
});
|
||||
}
|
||||
|
||||
fortMarkers[fort.Id].setPosition({lat: fort.Latitude, lng: fort.Longitude});
|
||||
if(fort.Type == FortType.Gym) {
|
||||
if(fort.OwnedByTeam == TeamColor.Neutral) {
|
||||
fortMarkers[fort.Id].setIcon('img/' + (fort.IsInBattle ? 'gym_neutral_battle.png' : 'gym_neutral.png'));
|
||||
} else if(fort.OwnedByTeam == TeamColor.Red) {
|
||||
fortMarkers[fort.Id].setIcon('img/' + (fort.IsInBattle ? 'gym_red_battle.png' : 'gym_red.png'));
|
||||
} else if(fort.OwnedByTeam == TeamColor.Blue) {
|
||||
fortMarkers[fort.Id].setIcon('img/' + (fort.IsInBattle ? 'gym_blue_battle.png' : 'gym_blue.png'));
|
||||
} else if(fort.OwnedByTeam == TeamColor.Yellow) {
|
||||
fortMarkers[fort.Id].setIcon('img/' + (fort.IsInBattle ? 'gym_yellow_battle.png' : 'gym_yellow.png'));
|
||||
} else {
|
||||
console.warn('Unknown FortData.OwnedByTeam: ' + fort.OwnedByTeam);
|
||||
}
|
||||
} else if(fort.Type == FortType.Checkpoint) {
|
||||
fortMarkers[fort.Id].lure = fort.LureInfo == null;
|
||||
if(new Date(fort.CooldownCompleteTimestampMs) < now) {
|
||||
fortMarkers[fort.Id].setIcon('img/' + (fortMarkers[fort.Id].lure ? 'pokestop.png' : 'pokestop_lure.png'));
|
||||
} else {
|
||||
fortMarkers[fort.Id].setIcon('img/' + (fortMarkers[fort.Id].lure ? 'pokestop_cooldown.png' : 'pokestop_cooldown_lure.png'));
|
||||
}
|
||||
} else {
|
||||
console.warn('Unknown FortData.Type: ' + fort.Type);
|
||||
}
|
||||
}
|
||||
} else if(type.contains("FortTargetEvent")) {
|
||||
fortPath.setMap(map);
|
||||
fortPathTarget = { lat: message.Latitude, lng: message.Longitude };
|
||||
fortPath.setPath([
|
||||
{ lat: playerMarker.position.lat(), lng: playerMarker.position.lng() },
|
||||
fortPathTarget
|
||||
]);
|
||||
} else if(type.contains("FortUsedEvent")) {
|
||||
fortPath.setMap(null);
|
||||
fortPathTarget = null;
|
||||
|
||||
fortMarkers[message.Id].setIcon('img/' + (fortMarkers[message.Id].lure ? 'pokestop_cooldown.png' : 'pokestop_cooldown_lure.png'));
|
||||
} /* else {
|
||||
console.warn('Unknown message: ' + message['$type']);
|
||||
console.warn(message);
|
||||
} */
|
||||
};
|
||||
|
||||
var connect = function() {
|
||||
var ws = new WebSocket(websocketAddress);
|
||||
ws.onopen = function() {
|
||||
map.setCenter(null);
|
||||
map.setZoom(17);
|
||||
playerMarker.setPosition(null);
|
||||
|
||||
playerPos = { lat: 0, lng: 0 };
|
||||
fortPathTarget = null;
|
||||
fortMarkers = {};
|
||||
|
||||
intervalId = setInterval(function(){
|
||||
var oldPos = playerMarker.position;
|
||||
var newPos = {
|
||||
lat: ((oldPos.lat() * 30) + playerPos.lat) / 31,
|
||||
lng: ((oldPos.lng() * 30) + playerPos.lng) / 31
|
||||
};
|
||||
map.setCenter(newPos);
|
||||
playerMarker.setPosition(newPos);
|
||||
if(fortPathTarget != null) {
|
||||
fortPath.setPath([
|
||||
newPos,
|
||||
fortPathTarget
|
||||
]);
|
||||
}
|
||||
}, 50);
|
||||
};
|
||||
ws.onclose = function() {
|
||||
console.log("onclose");
|
||||
|
||||
clearInterval(intervalId);
|
||||
|
||||
setTimeout(connect, 500);
|
||||
};
|
||||
ws.onmessage = handleMessage;
|
||||
};
|
||||
connect();
|
||||
}
|
||||
10
src/style.css
Normal file
@ -0,0 +1,10 @@
|
||||
html, body, #map, #connecting {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||