feat: move map js to a js file
All checks were successful
️Upload Website / sftp (push) Successful in 13s
All checks were successful
️Upload Website / sftp (push) Successful in 13s
This commit is contained in:
parent
e2cb602ac7
commit
6e236213f1
GPG key ID:
09BB24C34C2F3204
|
|
@ -52,12 +52,12 @@
|
|||
echo $twig->render('rules.twig');
|
||||
});
|
||||
|
||||
$router->get('/map', function() {
|
||||
$router->get('/map.js', function() {
|
||||
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() {
|
||||
|
|
|
|||
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>
|
||||
</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
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -3,161 +3,6 @@
|
|||
<div id="map"></div>
|
||||
<a id="homeLink" href="/">Go Home</a>
|
||||
|
||||
<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>
|
||||
<script src="js/map.js"></script>
|
||||
|
||||
{% include 'includes/foot.twig' %}
|
||||
Loading…
Reference in a new issue