working version

2026-01-16 10:14:55 +01:00
commit 0cb5dc9bab
26 changed files with 1269 additions and 0 deletions
--- a/src/components/PlayerMap.tsx
+++ b/src/components/PlayerMap.tsx
@@ -0,0 +1,82 @@
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import type { Plext } from "../types";
+
+// Fix Leaflet marker icons
+delete (L.Icon.Default.prototype as any)._getIconUrl;
+L.Icon.Default.mergeOptions({
+    iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+    iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+    shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+});
+
+interface PlayerMapProps {
+    plexts: Plext[];
+}
+
+export function PlayerMap({ plexts }: PlayerMapProps) {
+    // Get player locations from plexts
+    const playerLocations = plexts
+        .map((plext) => {
+            const player = plext.markup.find((item) => item.type === "PLAYER");
+            if (player && player.plain && plext.coordinates && plext.coordinates.coordinates) {
+                return {
+                    name: player.plain,
+                    team: player.team || "NEUTRAL",
+                    coordinates: [plext.coordinates.coordinates[1], plext.coordinates.coordinates[0]] as [number, number], // [lat, lon]
+                    eventType: plext.event_type,
+                    timestamp: plext.timestamp,
+                };
+            }
+            return null;
+        })
+        .filter(Boolean);
+
+    return (
+        <div className="map-container" style={{ height: "600px", width: "100%" }}>
+            <MapContainer
+                center={[45.57, 12.36]} // Default to Veneto region
+                zoom={12}
+                style={{ height: "100%", width: "100%" }}
+                scrollWheelZoom={true}
+            >
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                {playerLocations.map((location, index) => {
+                    if (!location) return null;
+
+                    const markerColor = location.team === "RESISTANCE" ? "blue" : "green";
+
+                    return (
+                        <Marker
+                            key={index}
+                            position={location.coordinates}
+                            icon={new L.Icon({
+                                iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${markerColor}.png`,
+                                shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+                                iconSize: [25, 41],
+                                iconAnchor: [12, 41],
+                                popupAnchor: [1, -34],
+                                shadowSize: [41, 41],
+                            })}
+                        >
+                            <Popup>
+                                <div className="marker-popup">
+                                    <h4 style={{ color: location.team === "RESISTANCE" ? "#0066ff" : "#00cc00" }}>
+                                        {location.name}
+                                    </h4>
+                                    <p><strong>Team:</strong> {location.team}</p>
+                                    <p><strong>Event:</strong> {location.eventType}</p>
+                                    <p><strong>Time:</strong> {new Date(location.timestamp).toLocaleString()}</p>
+                                </div>
+                            </Popup>
+                        </Marker>
+                    );
+                })}
+            </MapContainer>
+        </div>
+    );
+}