forked from CRSS/Website
feat: move map js to a js file
This commit is contained in:
parent
e2cb602ac7
commit
6e236213f1
|
@ -52,12 +52,12 @@
|
||||||
echo $twig->render('rules.twig');
|
echo $twig->render('rules.twig');
|
||||||
});
|
});
|
||||||
|
|
||||||
$router->get('/map', function() {
|
$router->get('/map.js', function() {
|
||||||
global $twig;
|
global $twig;
|
||||||
|
|
||||||
$twig->addGlobal('pageUri', '/map');
|
$twig->addGlobal('pageUri', '/map.js');
|
||||||
|
|
||||||
echo $twig->render('map.twig');
|
echo $twig->render('map.js.twig');
|
||||||
});
|
});
|
||||||
|
|
||||||
$router->get('/profile', function() {
|
$router->get('/profile', function() {
|
||||||
|
|
145
js/map.js
Normal file
145
js/map.js
Normal file
|
@ -0,0 +1,145 @@
|
||||||
|
L.TileLayer.CRSSLayer = L.TileLayer.extend({
|
||||||
|
getTileUrl: function(coordinate) {
|
||||||
|
console.log(coordinate);
|
||||||
|
|
||||||
|
const tileX = coordinate.x;
|
||||||
|
const tileY = coordinate.y;
|
||||||
|
|
||||||
|
const url = ('https://cdn.theclashfruit.me/crss/map_new/{xd}/{yd}/tile.{x}.{y}.png')
|
||||||
|
.replace('{yd}', Math.floor(tileY / 10))
|
||||||
|
.replace('{xd}', Math.floor(tileX / 10))
|
||||||
|
.replace('{y}', tileY)
|
||||||
|
.replace('{x}', tileX);
|
||||||
|
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
L.tileLayer.crssLayer = function(templateUrl, options) {
|
||||||
|
return new L.TileLayer.CRSSLayer(templateUrl, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
let mapLayer = L.tileLayer.crssLayer('https://cdn.theclashfruit.me/crss/map_new/{xd}/{yd}/tile.{x}.{y}.png', {
|
||||||
|
attribution: '© <a href="https://crss.blurryface.xyz/">CRSS</a> players',
|
||||||
|
|
||||||
|
tileSize: 256,
|
||||||
|
|
||||||
|
noWrap: true,
|
||||||
|
|
||||||
|
maxNativeZoom: 0,
|
||||||
|
minNativeZoom: 0,
|
||||||
|
|
||||||
|
minZoom: -2,
|
||||||
|
maxZoom: -2 + 12,
|
||||||
|
|
||||||
|
zoomOffset: -12
|
||||||
|
});
|
||||||
|
|
||||||
|
let ropMarkers = L.layerGroup([
|
||||||
|
L.marker([-75.5, 49.5])
|
||||||
|
.bindPopup('Info Centre')
|
||||||
|
]);
|
||||||
|
|
||||||
|
let rorMarkers = L.layerGroup([
|
||||||
|
|
||||||
|
]);
|
||||||
|
|
||||||
|
let miscMarkers = L.layerGroup([
|
||||||
|
L.marker([0.5, 0.5])
|
||||||
|
.bindPopup('0; 0'),
|
||||||
|
L.marker([1302.5, -661.5])
|
||||||
|
.bindPopup('The Dropper'),
|
||||||
|
]);
|
||||||
|
|
||||||
|
let playerMarkers = L.layerGroup([
|
||||||
|
|
||||||
|
]);
|
||||||
|
|
||||||
|
console.log(L.CRS.Simple.infinite)
|
||||||
|
|
||||||
|
let map = L.map('map', {
|
||||||
|
layers: [mapLayer, miscMarkers, ropMarkers, rorMarkers, playerMarkers],
|
||||||
|
preferCanvas: true,
|
||||||
|
crs: L.Util.extend(L.CRS.Simple, {
|
||||||
|
transformation: new L.Transformation(1, 0, 1, 0),
|
||||||
|
projection: L.Projection.LonLat
|
||||||
|
}),
|
||||||
|
}).setView([0, 0], 2);
|
||||||
|
|
||||||
|
let baseMaps = {
|
||||||
|
"Overworld": mapLayer
|
||||||
|
};
|
||||||
|
|
||||||
|
let overlayMaps = {
|
||||||
|
"Players": playerMarkers,
|
||||||
|
"Miscellaneous Markers": miscMarkers,
|
||||||
|
"Markers in RoP": ropMarkers,
|
||||||
|
"Markers in DRoR": rorMarkers,
|
||||||
|
};
|
||||||
|
|
||||||
|
let layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
|
||||||
|
|
||||||
|
L.control.mousePosition({
|
||||||
|
position: 'bottomright',
|
||||||
|
separator: '; ',
|
||||||
|
lngFormatter: (x) => {
|
||||||
|
return Math.floor(x)
|
||||||
|
},
|
||||||
|
latFormatter: (y) => {
|
||||||
|
return Math.floor(y)
|
||||||
|
},
|
||||||
|
wrapLng: false,
|
||||||
|
lngFirst: true
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
const mappedPlayers = {}
|
||||||
|
|
||||||
|
const updatePlayerPos = (players) =>{
|
||||||
|
for (const player of players) {
|
||||||
|
const playerMarker = mappedPlayers[player.uniqueId];
|
||||||
|
|
||||||
|
if(playerMarker) {
|
||||||
|
playerMarker.setLatLng([player.location.z, player.location.x]);
|
||||||
|
playerMarker.setPopupContent(`${player.displayName} (${Math.floor(player.location.x)}; ${Math.floor(player.location.y)}; ${Math.floor(player.location.z)})`);
|
||||||
|
|
||||||
|
mappedPlayers[player.uniqueId] = playerMarker;
|
||||||
|
} else {
|
||||||
|
const playerIcon = L.icon({
|
||||||
|
iconUrl: `https://mc-heads.net/avatar/${player.displayName}`,
|
||||||
|
iconSize: [28, 28],
|
||||||
|
iconAnchor: [14, 14],
|
||||||
|
popupAnchor: [0, -14]
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const marker = L.marker([player.location.z, player.location.x], { icon: playerIcon })
|
||||||
|
.bindPopup(`${player.displayName} (${Math.floor(player.location.x)}; ${Math.floor(player.location.y)}; ${Math.floor(player.location.z)})`);
|
||||||
|
|
||||||
|
playerMarkers.addLayer(marker);
|
||||||
|
|
||||||
|
mappedPlayers[player.uniqueId] = marker;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const [uniqueId, playerMarker] of Object.entries(mappedPlayers)) {
|
||||||
|
if(!players.find(p => p.uniqueId === uniqueId)) {
|
||||||
|
playerMarkers.removeLayer(playerMarker);
|
||||||
|
|
||||||
|
delete mappedPlayers[uniqueId];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch('https://crss.blurryface.xyz/api/v1/players')
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(p => {
|
||||||
|
updatePlayerPos(p);
|
||||||
|
});
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
fetch('https://crss.blurryface.xyz/api/v1/players')
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(p => {
|
||||||
|
updatePlayerPos(p);
|
||||||
|
});
|
||||||
|
}, 1000);
|
|
@ -17,7 +17,7 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a {% if page == 'map' %} class="active" href="#" {% else %} href="/map" {% endif %}>
|
<a {% if page == 'map.js' %} class="active" href="#" {% else %} href="/map" {% endif %}>
|
||||||
Map
|
Map
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -3,161 +3,6 @@
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<a id="homeLink" href="/">Go Home</a>
|
<a id="homeLink" href="/">Go Home</a>
|
||||||
|
|
||||||
<script>
|
<script src="js/map.js"></script>
|
||||||
L.TileLayer.CRSSLayer = L.TileLayer.extend({
|
|
||||||
getTileUrl: function(coordinate) {
|
|
||||||
console.log(coordinate);
|
|
||||||
|
|
||||||
const tileX = coordinate.x;
|
|
||||||
const tileY = coordinate.y;
|
|
||||||
|
|
||||||
const url = ('https://cdn.theclashfruit.me/crss/map_new/{xd}/{yd}/tile.{x}.{y}.png')
|
|
||||||
.replace('{yd}', Math.floor(tileY / 10))
|
|
||||||
.replace('{xd}', Math.floor(tileX / 10))
|
|
||||||
.replace('{y}', tileY)
|
|
||||||
.replace('{x}', tileX);
|
|
||||||
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
L.tileLayer.crssLayer = function(templateUrl, options) {
|
|
||||||
return new L.TileLayer.CRSSLayer(templateUrl, options);
|
|
||||||
}
|
|
||||||
|
|
||||||
let mapLayer = L.tileLayer.crssLayer('https://cdn.theclashfruit.me/crss/map_new/{xd}/{yd}/tile.{x}.{y}.png', {
|
|
||||||
attribution: '© <a href="https://crss.blurryface.xyz/">CRSS</a> players',
|
|
||||||
|
|
||||||
tileSize: 256,
|
|
||||||
|
|
||||||
noWrap: true,
|
|
||||||
|
|
||||||
maxNativeZoom: 0,
|
|
||||||
minNativeZoom: 0,
|
|
||||||
|
|
||||||
minZoom: -2,
|
|
||||||
maxZoom: -2 + 12,
|
|
||||||
|
|
||||||
zoomOffset: -12
|
|
||||||
});
|
|
||||||
|
|
||||||
const worldMinX = -3 * 512;
|
|
||||||
const worldMinY = -7 * 512;
|
|
||||||
const worldWidth = (8 + 1 - (-3)) * 512;
|
|
||||||
const worldHeight = (4 + 1 - (-7)) * 512;
|
|
||||||
|
|
||||||
const worldTileSize = 256;
|
|
||||||
|
|
||||||
const worldMaxZoomFactor = Math.pow(2, 0);
|
|
||||||
|
|
||||||
let ropMarkers = L.layerGroup([
|
|
||||||
L.marker([-75.5, 49.5])
|
|
||||||
.bindPopup('Info Centre')
|
|
||||||
]);
|
|
||||||
|
|
||||||
let rorMarkers = L.layerGroup([
|
|
||||||
|
|
||||||
]);
|
|
||||||
|
|
||||||
let miscMarkers = L.layerGroup([
|
|
||||||
L.marker([0.5, 0.5])
|
|
||||||
.bindPopup('0; 0'),
|
|
||||||
L.marker([1302.5, -661.5])
|
|
||||||
.bindPopup('The Dropper'),
|
|
||||||
]);
|
|
||||||
|
|
||||||
let playerMarkers = L.layerGroup([
|
|
||||||
|
|
||||||
]);
|
|
||||||
|
|
||||||
console.log(L.CRS.Simple.infinite)
|
|
||||||
|
|
||||||
let map = L.map('map', {
|
|
||||||
layers: [mapLayer, miscMarkers, ropMarkers, rorMarkers, playerMarkers],
|
|
||||||
preferCanvas: true,
|
|
||||||
crs: L.Util.extend(L.CRS.Simple, {
|
|
||||||
transformation: new L.Transformation(1, 0, 1, 0),
|
|
||||||
projection: L.Projection.LonLat
|
|
||||||
}),
|
|
||||||
}).setView([0, 0], 2);
|
|
||||||
|
|
||||||
let baseMaps = {
|
|
||||||
"Overworld": mapLayer
|
|
||||||
};
|
|
||||||
|
|
||||||
let overlayMaps = {
|
|
||||||
"Players": playerMarkers,
|
|
||||||
"Miscellaneous Markers": miscMarkers,
|
|
||||||
"Markers in RoP": ropMarkers,
|
|
||||||
"Markers in DRoR": rorMarkers,
|
|
||||||
};
|
|
||||||
|
|
||||||
let layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
|
|
||||||
|
|
||||||
L.control.mousePosition({
|
|
||||||
position: 'bottomright',
|
|
||||||
separator: '; ',
|
|
||||||
lngFormatter: (x) => {
|
|
||||||
return Math.floor(x)
|
|
||||||
},
|
|
||||||
latFormatter: (y) => {
|
|
||||||
return Math.floor(y)
|
|
||||||
},
|
|
||||||
wrapLng: false,
|
|
||||||
lngFirst: true
|
|
||||||
}).addTo(map);
|
|
||||||
|
|
||||||
const mappedPlayers = {}
|
|
||||||
|
|
||||||
const updatePlayerPos = (players) =>{
|
|
||||||
for (const player of players) {
|
|
||||||
const playerMarker = mappedPlayers[player.uniqueId];
|
|
||||||
|
|
||||||
if(playerMarker) {
|
|
||||||
playerMarker.setLatLng([player.location.z, player.location.x]);
|
|
||||||
playerMarker.setPopupContent(`${player.displayName} (${Math.floor(player.location.x)}; ${Math.floor(player.location.y)}; ${Math.floor(player.location.z)})`);
|
|
||||||
|
|
||||||
mappedPlayers[player.uniqueId] = playerMarker;
|
|
||||||
} else {
|
|
||||||
const playerIcon = L.icon({
|
|
||||||
iconUrl: `https://mc-heads.net/avatar/${player.displayName}`,
|
|
||||||
iconSize: [28, 28],
|
|
||||||
iconAnchor: [14, 14],
|
|
||||||
popupAnchor: [0, -14]
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const marker = L.marker([player.location.z, player.location.x], { icon: playerIcon })
|
|
||||||
.bindPopup(`${player.displayName} (${Math.floor(player.location.x)}; ${Math.floor(player.location.y)}; ${Math.floor(player.location.z)})`);
|
|
||||||
|
|
||||||
playerMarkers.addLayer(marker);
|
|
||||||
|
|
||||||
mappedPlayers[player.uniqueId] = marker;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const [uniqueId, playerMarker] of Object.entries(mappedPlayers)) {
|
|
||||||
if(!players.find(p => p.uniqueId === uniqueId)) {
|
|
||||||
playerMarkers.removeLayer(playerMarker);
|
|
||||||
|
|
||||||
delete mappedPlayers[uniqueId];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetch('https://crss.blurryface.xyz/api/v1/players')
|
|
||||||
.then(r => r.json())
|
|
||||||
.then(p => {
|
|
||||||
updatePlayerPos(p);
|
|
||||||
});
|
|
||||||
|
|
||||||
setInterval(() => {
|
|
||||||
fetch('https://crss.blurryface.xyz/api/v1/players')
|
|
||||||
.then(r => r.json())
|
|
||||||
.then(p => {
|
|
||||||
updatePlayerPos(p);
|
|
||||||
});
|
|
||||||
}, 1000)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{% include 'includes/foot.twig' %}
|
{% include 'includes/foot.twig' %}
|
Loading…
Reference in a new issue