public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 18:20:17 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

MVP systeme de zone quadrillage

Browse Source
This commit is contained in:
Quentin Roussel
2024-06-06 23:55:36 +02:00
parent 538b4b3bf6
commit ba846acc0c
13 changed files with 242 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
traque-front/components/admin/mapZoneSelector.jsx
View File

@@ -1,29 +1,15 @@
import { useEffect, useState } from 'react';
import { useLeafletContext } from '@react-leaflet/core';
import { useMapGrid } from '@/hook/mapDrawing';
import { latLngToTileNumber } from '../util/map';
import { TileNumber, latLngToTileNumber } from '../util/map';
import { useMapEvent } from 'react-leaflet';
export function MapGridZoneSelector({ onSelectedTile, tileSize }) {
const [coloredTiles, setColoredTiles] = useState([]);
const { map } = useLeafletContext();
useEffect(() => {
map.on('click', (e) => {
export function MapGridZoneSelector({ tilesColor, onClickTile, tileSize }) {
useMapEvent('click', (e) => {
const fractionalTileNumber = latLngToTileNumber(e.latlng, tileSize);
const tileNumber = new TileNumber(Math.floor(fractionalTileNumber.x), Math.floor(fractionalTileNumber.y));
if (coloredTiles.some(t => t.equals(tileNumber))) {
setColoredTiles(coloredTiles.filter(t => !t.equals(tileNumber)));
} else {
setColoredTiles([...coloredTiles, tileNumber]);
}
});
onClickTile(tileNumber);
});
useEffect(() => {
onSelectedTile(coloredTiles);
}, [coloredTiles]);
useMapGrid(coloredTiles, tileSize);
useMapGrid(tilesColor, tileSize);
return null;
}
}