From 6e236213f11f54074f01f54ff76c3c28d36e844f Mon Sep 17 00:00:00 2001 From: TheClashFruit Date: Sat, 18 Nov 2023 13:29:03 +0100 Subject: [PATCH] feat: move map js to a js file --- index.php | 6 +- js/map.js | 145 ++++++++++++++++++++++++++++++++++ template/includes/nav.twig | 2 +- template/map.twig | 157 +------------------------------------ 4 files changed, 150 insertions(+), 160 deletions(-) create mode 100644 js/map.js diff --git a/index.php b/index.php index f722d0c..b71e0b0 100644 --- a/index.php +++ b/index.php @@ -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() { diff --git a/js/map.js b/js/map.js new file mode 100644 index 0000000..a4adf60 --- /dev/null +++ b/js/map.js @@ -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: '© CRSS 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); \ No newline at end of file diff --git a/template/includes/nav.twig b/template/includes/nav.twig index b476a68..273d935 100644 --- a/template/includes/nav.twig +++ b/template/includes/nav.twig @@ -17,7 +17,7 @@
  • - + Map
    • diff --git a/template/map.twig b/template/map.twig index 86cf51a..74f25ba 100644 --- a/template/map.twig +++ b/template/map.twig @@ -3,161 +3,6 @@
    Go Home - + {% include 'includes/foot.twig' %} \ No newline at end of file