diff --git a/src/screens/Map.jsx b/src/screens/Map.jsx index 0b047ef..c69fb1b 100644 --- a/src/screens/Map.jsx +++ b/src/screens/Map.jsx @@ -3,11 +3,11 @@ import { WAYPOINTS, ROUTES } from '../constants.js' // H3 res-5 cell centre coordinates — hardcoded, h3-js not in browser bundle // Cross-checked against constants.js H3 IDs const CENTRES = { - ostia: { lat: 41.73, lng: 12.23 }, - capua: { lat: 41.09, lng: 14.21 }, - brundisium: { lat: 40.63, lng: 17.94 }, - carthago: { lat: 36.86, lng: 10.32 }, - alexandria: { lat: 31.20, lng: 29.92 }, + ostia: { lat: 41.73, lng: 12.23 }, + capua: { lat: 41.09, lng: 14.21 }, + brundisium: { lat: 40.63, lng: 17.94 }, + carthago: { lat: 36.86, lng: 10.32 }, + alexandria: { lat: 31.20, lng: 29.92 }, } // Bounding box clipped to relevant Mediterranean — no Atlantic needed @@ -21,22 +21,49 @@ function project(lat, lng) { return { x, y } } -// Rough Mediterranean land outline — placeholder, will be replaced -const LAND = [ - [43.4,5.3],[41.4,2.2],[40.4,0.7],[39.4,0.2],[38.0,0.1],[37.4,0.8], - [36.8,2.3],[36.2,5.4],[36.9,10.2],[37.1,11.1],[33.0,12.0],[32.9,14.0], - [32.1,15.0],[30.8,19.8],[30.9,25.2],[31.2,25.3],[31.5,28.0],[31.5,32.3], - [31.2,34.2],[33.0,35.1],[35.5,36.2],[36.5,36.2],[36.8,36.6], - [36.5,36.0],[35.4,34.6],[35.5,35.9],[36.5,36.2],[36.8,36.6], - [37.0,36.2],[37.5,36.8],[36.8,28.0],[37.0,27.2],[37.5,27.0], - [38.6,26.8],[39.1,26.4],[39.5,26.1],[40.2,26.3],[40.8,26.0], - [41.7,26.4],[41.5,28.0],[40.6,22.9],[40.0,22.6],[39.4,22.5], - [38.5,22.0],[37.5,21.1],[36.7,21.9],[37.5,22.4],[38.2,23.6], - [40.0,23.5],[40.5,23.0],[41.3,19.4],[42.4,18.5],[43.5,16.9], - [44.5,14.5],[45.8,13.6],[45.5,13.8],[44.4,12.3],[43.5,13.5], - [41.7,13.7],[40.9,15.6],[40.1,18.4],[38.1,15.7],[37.5,15.0], - [38.2,13.0],[37.1,11.8],[38.4,9.4],[39.0,8.9],[39.8,9.6], - [41.2,9.3],[41.9,8.7],[43.0,9.4],[43.8,7.4],[43.5,5.3], +function makePath(pts) { + return pts.map(([lat, lng], i) => { + const { x, y } = project(lat, lng) + return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}` + }).join(' ') + ' Z' +} + +// Europe + Asia Minor mainland polygon +// Traces: French Riviera → Italian peninsula → Adriatic → Greece → Thrace → +// top edge east → Turkey south coast → top edge west → close +const EUROPE = [ + [48.0,5.0], + [43.4,5.0],[43.5,5.3],[43.8,7.4], + [43.0,9.4],[41.9,8.7],[41.2,9.3],[39.8,9.6],[39.0,8.9],[38.4,9.4], + [37.9,11.7],[37.5,15.0],[38.1,15.7], + [40.1,18.4],[40.9,15.6],[41.7,13.7],[43.5,13.5],[44.4,12.3], + [45.5,13.8],[45.8,13.6],[45.2,14.0],[44.5,14.5],[43.5,16.9], + [42.4,18.5],[41.3,19.4], + [40.5,23.0],[40.0,23.5],[38.2,23.6],[37.5,22.4],[36.7,21.9], + [37.5,21.1],[38.5,22.0],[39.4,22.5],[40.0,22.6],[40.6,22.9], + [41.0,23.5],[41.5,24.5],[41.7,26.4],[41.5,28.0],[41.2,29.0], + [48.0,29.0],[48.0,38.0], + [36.8,36.6],[36.5,36.2],[36.8,35.1],[36.5,34.6],[36.2,33.3], + [36.2,32.0],[36.5,31.0],[37.0,30.0],[37.3,28.9],[37.5,27.5], + [37.0,27.2],[38.3,26.9],[38.6,26.8],[39.1,26.4],[39.6,26.2], + [40.3,26.4],[40.8,26.0], + [48.0,5.0], +] + +// North Africa mainland polygon +// Traces: Morocco → Algeria → Tunisia (with Cape Bon) → Libya → Egypt → +// Levant coast → east clip edge → south clip → close +const AFRICA = [ + [28.0,5.0], + [35.8,5.0],[35.2,5.7],[36.9,6.8],[37.2,8.5],[37.1,9.2], + [36.8,10.3],[37.1,10.8],[37.1,11.0], + [36.8,11.1],[35.5,11.1],[33.9,11.0],[33.6,11.6], + [33.0,12.0],[32.8,13.3],[32.1,15.0], + [30.8,18.5],[30.5,20.0],[30.9,20.1], + [31.2,25.0],[31.5,25.2],[31.5,28.0],[31.5,32.4], + [31.0,32.5],[31.2,33.8],[31.5,34.8],[32.0,34.7],[33.1,35.2],[35.5,36.2], + [35.0,38.0],[28.0,38.0], + [28.0,5.0], ] const ROUTE_ORDER = ['olive', 'wine', 'grain', 'linen'] @@ -52,10 +79,8 @@ export default function Map({ state }) { const currentId = WAYPOINT_IDS[Math.min(chapter - 1, 4)] - const landPath = LAND.map((c, i) => { - const { x, y } = project(c[0], c[1]) - return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}` - }).join(' ') + ' Z' + const europePath = makePath(EUROPE) + const africaPath = makePath(AFRICA) return (
@@ -67,8 +92,9 @@ export default function Map({ state }) { {/* Sea */} - {/* Land */} - + {/* Land — two polygons, no cross-sea lines */} + + {/* Routes */} {ROUTE_ORDER.map((routeId) => {