Fist Push

public old/scripts/leafletBase.js

@@ -0,0 +1,166 @@
+import { testList } from "./poi/testGroups.js";
+import { coordOverlay } from "./coordOverlay.js";
+import { getOverlayMaps } from "./fetching.js";
+import customIcons from './iconsMap.js';
+
+const center = 127.5;
+let overlayPoi = {};
+
+var map = L.map("map", {
+  crs: L.CRS.Simple,
+  minZoom: 1,
+  maxZoom: 8,
+}).setView([-127.5, 127.5], 4); // Centre de la carte
+
+var boundsMax = [
+  [-255, 0],
+  [0, 255],
+];
+
+L.tileLayer("/tiles/{z}/{x}/{y}.jpg", {
+  tileSize: 255, // Assurez-vous que cette valeur correspond à la taille de vos tuiles
+  noWrap: true,
+  bounds: boundsMax,
+  attribution: "© Asheron's call 2 maps",
+}).addTo(map);
+
+var rectangle = L.rectangle(boundsMax, { color: "#ff7800", weight: 1 });
+
+map.on("click", function (ev) {
+  coordOverlay.update(GetLandBlockId(ev), coordToCardinal(ev.latlng.lat, ev.latlng.lng));
+  rectangle.remove();
+  rectLandBlock(ev, map);
+});
+
+var testtmp = L.layerGroup();
+
+var overlayMaps = {};
+
+async function setupOverlayMaps() {
+  overlayPoi = await getOverlayMaps(); // Attend que overlayPoi soit chargé
+
+  // Itérer sur les clés de overlayPoi
+  Object.keys(overlayPoi).forEach(key => {
+    const layerGroup = overlayPoi[key];
+    overlayMaps[key] = layerGroup; // Assigner chaque layerGroup à la clé correspondante dans overlayMaps
+    layerControl.addOverlay(layerGroup, key); // Ajoute chaque couche à la carte avec son nom
+  });
+}
+
+setupOverlayMaps(); // Appel de la fonction pour initialiser les overlayMaps
+
+
+var markers = L.markerClusterGroup({
+  chunkedLoading: true,
+  disableClusteringAtZoom: 8,
+});
+testList.eachLayer(function (layer) {
+  markers.addLayer(layer);
+});
+
+var layerControl = L.control.layers(null, overlayMaps).addTo(map);
+coordOverlay.addTo(map);
+
+function GetLandBlockId(ev) {
+  var latlng = ev.latlng;
+  var pointATmp = map.project(latlng, 4);
+  const blockSize = 16; // Taille d'un bloc
+  var y = Math.floor((4080 - pointATmp.y) / blockSize);
+  var x = Math.floor(pointATmp.x / blockSize);
+
+  return L.point(x, y);
+}
+
+function rectLandBlock(ev, map) {
+  // Latitude et longitude initiales du coin supérieur gauche du rectangle
+  var latlng = ev.latlng;
+
+  var pointATmp = map.project(latlng, 4);
+
+  const blockSize = 16; // Taille d'un bloc
+  var testReverse = Math.floor((4080 - pointATmp.y) / blockSize);
+  var pointA = L.point(Math.round(pointATmp.x), Math.round(pointATmp.y));
+  const blockX = Math.floor(pointA.x / blockSize) * 16;
+  const blockY = Math.floor(pointA.y / blockSize) * 16;
+
+  var landX = blockX / 16;
+
+  var pointAn = L.point(blockX, blockY);
+  var pointB = L.point(blockX + blockSize, blockY + blockSize);
+  console.log(pointAn, pointB);
+  var latlngA = map.unproject(pointAn, 4);
+  var latlngB = map.unproject(pointB, 4);
+
+  // Création du rectangle
+  var bounds = L.latLngBounds(latlngA, latlngB);
+  rectangle = L.rectangle(bounds, { color: "#ff7800", weight: 1, interactive: false })
+    .addTo(map)
+    .bindPopup(
+      "LandBlock : 0x" +
+      landX.toString(16).toUpperCase().padStart(2, "0") +
+      "" +
+      testReverse.toString(16).toUpperCase().padStart(2, "0") +
+      "FFFF"
+    );
+}
+
+setInterval(fetchCharacterLocations, 5000);
+
+// Fonction pour récupérer les positions des personnages
+function fetchCharacterLocations() {
+  fetch("/characterloc") // Effectuer une requête GET vers /characterloc
+    .then((response) => response.json()) // Convertir la réponse en JSON
+    .then((data) => {
+      // Parcourir les données et afficher chaque position de personnage
+      data.forEach((character) => {
+        updateCharacterMarker(
+          character.literalValue,
+          character.locy,
+          character.locx
+        );
+      });
+    })
+    .catch((error) => {
+      console.error("Error fetching character locations:", error);
+    });
+}
+
+// Dictionnaire pour stocker les marqueurs des personnages
+var characterMarkers = {};
+// Fonction pour créer ou mettre à jour un marqueur de personnage
+function updateCharacterMarker(characterId, lat, lng) {
+  // Vérifier si le marqueur existe déjà
+  if (characterMarkers[characterId]) {
+    // Mettre à jour la position du marqueur existant
+    characterMarkers[characterId].setLatLng([lat, lng]);
+  } else {
+    // Créer un nouveau marqueur
+    var marker = L.marker([lat, lng], { icon: customIcons.greenPlayer }).bindPopup(characterId).addTo(map);
+    // Stocker le marqueur dans le dictionnaire
+    characterMarkers[characterId] = marker;
+  }
+}
+
+function coordToCardinal(lat, lng) {
+  // Vérifier que les valeurs de lat et lng sont dans la plage spécifiée
+  if (lat > 0 || lat < -255 || lng < 0 || lng > 255) {
+    return "Coordonnées invalides";
+  }
+  let cardinalLng = 0;
+  if (lng < center) cardinalLng = 100 - (lng * 100 / center);
+  else if (lng > center) cardinalLng = (lng - center) * 100 / center;
+  else if (lng === center) cardinalLng = 0;
+
+  let cardinalLat = 0;
+  lat = lat * -1;
+  if (lat < center) cardinalLat = 100 - (lat * 100 / center);
+  else if (lat > center) cardinalLat = (lat - center) * 100 / center;
+  else if (lat === 0) cardinalLat = 0;
+
+  // Déterminer les directions
+  let directionLat = lat < center ? "N" : "S";
+  let directionLng = lng < center ? "W" : "E";
+
+  // Retourner la chaîne de caractères résultante
+  return cardinalLat.toFixed(1) + " " + directionLat + " - " + cardinalLng.toFixed(1) + " " + directionLng;
+}