Compare commits
8 Commits
19b83159a9
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
 sucupira
|
9b867243fd | ||
|
sucupira
|
67142428ac | ||
|
sucupira
|
84c0363067 | ||
|
sucupira
|
70f448a4f7 | ||
|
sucupira
|
79b2ef72a9 | ||
|
sucupira
|
e4a0bfd045 | ||
|
sucupira
|
fab020ba75 | ||
|
sucupira
|
2e6f7e8830 |
@@ -0,0 +1,6 @@
|
||||
# Paquet YunoHost (dépôt séparé : ORGANISATION-KA-INTERNATIONALE/jwe_ynh)
|
||||
jwe_ynh/
|
||||
|
||||
# Artefacts de debug Kimi CLI
|
||||
kimi-debug-session*.zip
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# JWE
|
||||
|
||||
<p align="center">
|
||||
JWE est un jeu de géolocalisation souverain, dans l'esprit de GeoGuessr, centré sur 4 régions : <strong>Guadeloupe, Martinique, Guyane, La Réunion</strong>. Le joueur voit une photo unique d'un lieu et place un marqueur sur une carte pour deviner la commune — puis découvre une fiche éducative Wikipédia/Wikidata… ou un appel à contribution quand le lieu n'y est pas documenté (<em>Pwen blindé</em>).
|
||||
JWE est un jeu de géolocalisation souverain, dans l'esprit de GeoGuessr, centré sur 4 régions : <strong>Guadeloupe, Martinique, Guyane, La Réunion</strong>. Le joueur voit une photo unique d'un lieu — ou navigue dans une rue en visionneuse Mapillary (mode <em>An lari a</em>) — et place un marqueur sur une carte pour deviner la commune — puis découvre une fiche éducative Wikipédia/Wikidata… ou un appel à contribution quand le lieu n'y est pas documenté (<em>Pwen blindé</em>).
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
@@ -12,10 +12,11 @@ JWE est un jeu de géolocalisation souverain, dans l'esprit de GeoGuessr, centr
|
||||
</a>
|
||||
</p>
|
||||
|
||||
- **Souverain** : zéro Google, zéro Mapbox. MapLibre + tiles libres, Wikipédia/Wikidata, auto-hébergeable sur un petit VPS.
|
||||
- **Souverain** : zéro Google, zéro Mapbox. MapLibre + tiles libres, Wikipédia/Wikidata, auto-hébergeable sur un petit VPS. (Exception documentée : le mode street « An lari a » utilise la visionneuse Mapillary — images CC BY-SA 4.0, lib MIT, token client gratuit.)
|
||||
- **Éthique** : pas de comptes, pas de leaderboard, pas de mécanique dopaminergique.
|
||||
- **Bilingue** : français / créole.
|
||||
- **Stack** : Svelte 5 + SvelteKit 2, MapLibre GL JS, Node ≥ 20, licence MIT.
|
||||
- **5 modes** : Konnèt moniman, Kote mwen ye ?, Défi 5 rounds, Aprann (explorer), An lari a (street-level Mapillary).
|
||||
- **Stack** : Svelte 5 + SvelteKit 2, MapLibre GL JS, mapillary-js, Node ≥ 20, licence MIT.
|
||||
|
||||
## Utilisation
|
||||
|
||||
@@ -23,6 +24,7 @@ JWE est un jeu de géolocalisation souverain, dans l'esprit de GeoGuessr, centr
|
||||
git clone https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/JWE.git
|
||||
cd JWE/app
|
||||
npm ci
|
||||
cp .env.example .env # puis renseignez PUBLIC_MAPILLARY_TOKEN (token client gratuit)
|
||||
npm run dev # développement
|
||||
npm run build && node build # production (adapter-node)
|
||||
```
|
||||
@@ -46,4 +48,4 @@ La version 1 (PHP, cartes des communes) a été remplacée par cette refonte en
|
||||
|
||||
Copyright (C) 2024-2026 Cédric Famibelle-Pronzola & ORGANISATION KA INTERNATIONALE (OKI)
|
||||
|
||||
Code sous licence **MIT** (voir [LICENSE](LICENSE)). Les photographies restent la propriété de leurs auteurs sous leurs licences Wikimedia Commons (voir [`content/credits.md`](content/credits.md)) ; les extraits Wikipédia sont sous CC BY-SA 4.0.
|
||||
Code sous licence **MIT** (voir [LICENSE](LICENSE)). Les photographies restent la propriété de leurs auteurs sous leurs licences Wikimedia Commons ; les images street-level Mapillary sont sous CC BY-SA 4.0 par leurs contributeurs (voir [`content/credits.md`](content/credits.md)) ; les extraits Wikipédia sont sous CC BY-SA 4.0.
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
# Token client Mapillary (gratuit) : https://www.mapillary.com/dashboard/developers
|
||||
# Requis uniquement pour le mode street « An lari a » (visionneuse mapillary-js).
|
||||
# Token client : conçu pour être exposé côté navigateur (rate-limité par app).
|
||||
PUBLIC_MAPILLARY_TOKEN=
|
||||
|
||||
# Optionnel : URL d'un style/tiles auto-hébergé (tileserver-gl) — voir docs/deploiement.md
|
||||
# PUBLIC_TILES_URL=
|
||||
Generated
+291
-9
@@ -1,13 +1,14 @@
|
||||
{
|
||||
"name": "jwe",
|
||||
"version": "2.0.0",
|
||||
"version": "2.0.2",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "jwe",
|
||||
"version": "2.0.0",
|
||||
"version": "2.0.2",
|
||||
"dependencies": {
|
||||
"mapillary-js": "^4.1.2",
|
||||
"maplibre-gl": "^5.1.0",
|
||||
"sharp": "^0.35.3"
|
||||
},
|
||||
@@ -2586,6 +2587,12 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/earcut": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/earcut/-/earcut-2.1.4.tgz",
|
||||
"integrity": "sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
|
||||
@@ -2609,6 +2616,24 @@
|
||||
"undici-types": "~8.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/pako": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.7.tgz",
|
||||
"integrity": "sha512-YBtzT2ztNF6R/9+UXj2wTGFnC9NklAnASt3sC0h2m1bbH7G6FyBIkt4AN8ThZpNfxUo1b2iMVO0UawiJymEt8A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/pbf": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
|
||||
"integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/polylabel": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/polylabel/-/polylabel-1.1.3.tgz",
|
||||
"integrity": "sha512-9Zw2KoDpi+T4PZz2G6pO2xArE0m/GSMTW1MIxF2s8ZY8x9XDO6fv9um0ydRGvcbkFLlaq8yNK6eZxnmMZtDgWQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/proj4": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/proj4/-/proj4-2.5.2.tgz",
|
||||
@@ -2631,6 +2656,12 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/three": {
|
||||
"version": "0.134.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.134.0.tgz",
|
||||
"integrity": "sha512-4YB+99Rgqq27EjiYTItEoZtdjLnTh8W9LxowgpC9eWsjaQJIL4Kn/ZcUKAnW3gB/jS4hqGN8iqmid+RcUZDzpA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/trusted-types": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
|
||||
@@ -2638,6 +2669,12 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/virtual-dom": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/virtual-dom/-/virtual-dom-2.1.4.tgz",
|
||||
"integrity": "sha512-Y7L/frVydXRd16MevczslJZQu+QWsrqZlj6ytk7mST3xen0fkx7Ollw31By/89A8Wq+nfNWm/IoTR1ac/0fRhA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@xmldom/xmldom": {
|
||||
"version": "0.8.13",
|
||||
"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.13.tgz",
|
||||
@@ -2836,6 +2873,12 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/browser-split": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/browser-split/-/browser-split-0.0.1.tgz",
|
||||
"integrity": "sha512-JhvgRb2ihQhsljNda3BI8/UcRHVzrVwo3Q+P8vDtSiyobXuFpuZ9mq+MbRGMnC22CjW3RrfXdg6j6ITX8M+7Ow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/buffer": {
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
|
||||
@@ -2884,6 +2927,15 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/camelize": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
|
||||
"integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
|
||||
@@ -3221,6 +3273,11 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dom-walk": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
|
||||
"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
|
||||
},
|
||||
"node_modules/duplexer": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
|
||||
@@ -3245,6 +3302,16 @@
|
||||
"once": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/error": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/error/-/error-4.4.0.tgz",
|
||||
"integrity": "sha512-SNDKualLUtT4StGFP7xNfuFybL2f6iJujFtrWuvJqGbVQGaN+adE23veqzPz1hjUjTunLi2EnJ+0SJxtbJreKw==",
|
||||
"dependencies": {
|
||||
"camelize": "^1.0.0",
|
||||
"string-template": "~0.2.0",
|
||||
"xtend": "~4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/es-errors": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
|
||||
@@ -3329,6 +3396,14 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ev-store": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ev-store/-/ev-store-7.0.0.tgz",
|
||||
"integrity": "sha512-otazchNRnGzp2YarBJ+GXKVGvhxVATB1zmaStxJBYet0Dyq7A9VhH8IUEB/gRcL6Ch52lfpgPTRJ2m49epyMsQ==",
|
||||
"dependencies": {
|
||||
"individual": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/event-stream": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
|
||||
@@ -3631,6 +3706,16 @@
|
||||
"integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/global": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
|
||||
"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"min-document": "^2.19.0",
|
||||
"process": "^0.11.10"
|
||||
}
|
||||
},
|
||||
"node_modules/has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
@@ -3721,7 +3806,6 @@
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
|
||||
"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
@@ -3754,6 +3838,11 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/individual": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/individual/-/individual-3.0.0.tgz",
|
||||
"integrity": "sha512-rUY5vtT748NMRbEMrTNiFfy29BgGZwGXUi2NFUVMWQrogSLzlJvQV9eeMWi+g1aVaQ53tpyLAQtd5x/JH0Nh1g=="
|
||||
},
|
||||
"node_modules/inherits": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||
@@ -3867,6 +3956,15 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/is-object": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz",
|
||||
"integrity": "sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-reference": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
|
||||
@@ -3983,6 +4081,15 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/long": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz",
|
||||
"integrity": "sha512-ZYvPPOMqUwPoDsbJaR10iQJYnMuZhRTvHYl62ErLIEX7RgFlziSBUUvrt3OVfc47QlHHpzPZYP17g3Fv7oeJkg==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.21",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
|
||||
@@ -4000,6 +4107,63 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/mapillary-js": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/mapillary-js/-/mapillary-js-4.1.2.tgz",
|
||||
"integrity": "sha512-LYj6xbp/Y9wfBkr/prRwgJGb3+KwvzUri0yl5QEpMEH7oC1p52ErshWmPXysKefmm6JaFML4D7FJ89viwJ4T5g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/earcut": "^2.1.1",
|
||||
"@types/node": "^14.14.31",
|
||||
"@types/pako": "^1.0.2",
|
||||
"@types/pbf": "^3.0.2",
|
||||
"@types/polylabel": "^1.0.5",
|
||||
"@types/rbush": "^3.0.0",
|
||||
"@types/three": "^0.134.0",
|
||||
"@types/virtual-dom": "^2.1.1",
|
||||
"earcut": "^2.2.3",
|
||||
"martinez-polygon-clipping": "^0.7.1",
|
||||
"pako": "^2.0.4",
|
||||
"pbf": "^3.2.1",
|
||||
"polylabel": "^1.1.0",
|
||||
"rbush": "^3.0.1",
|
||||
"rxjs": "^7.3.0",
|
||||
"s2-geometry": "^1.2.10",
|
||||
"three": "^0.134.0",
|
||||
"virtual-dom": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/mapillary-js/node_modules/@types/node": {
|
||||
"version": "14.18.63",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
|
||||
"integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/mapillary-js/node_modules/@types/rbush": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-3.0.4.tgz",
|
||||
"integrity": "sha512-knSt9cCW8jj1ZSFcFeBZaX++OucmfPxxHiRwTahZfJlnQsek7O0bazTJHWD2RVj9LEoejUYF2de3/stf+QXcXw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/mapillary-js/node_modules/earcut": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
|
||||
"integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/mapillary-js/node_modules/pbf": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pbf/-/pbf-3.3.0.tgz",
|
||||
"integrity": "sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"ieee754": "^1.1.12",
|
||||
"resolve-protobuf-schema": "^2.1.0"
|
||||
},
|
||||
"bin": {
|
||||
"pbf": "bin/pbf"
|
||||
}
|
||||
},
|
||||
"node_modules/maplibre-gl": {
|
||||
"version": "5.24.0",
|
||||
"resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.24.0.tgz",
|
||||
@@ -4100,6 +4264,35 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/martinez-polygon-clipping": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/martinez-polygon-clipping/-/martinez-polygon-clipping-0.7.4.tgz",
|
||||
"integrity": "sha512-jBEwrKtA0jTagUZj2bnmb4Yg2s4KnJGRePStgI7bAVjtcipKiF39R4LZ2V/UT61jMYWrTcBhPazexeqd6JAVtw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"robust-predicates": "^2.0.4",
|
||||
"splaytree": "^0.1.4",
|
||||
"tinyqueue": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/martinez-polygon-clipping/node_modules/robust-predicates": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz",
|
||||
"integrity": "sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg==",
|
||||
"license": "Unlicense"
|
||||
},
|
||||
"node_modules/martinez-polygon-clipping/node_modules/splaytree": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/splaytree/-/splaytree-0.1.4.tgz",
|
||||
"integrity": "sha512-D50hKrjZgBzqD3FT2Ek53f2dcDLAQT8SSGrzj3vidNH5ISRgceeGVJ2dQIthKOuayqFXfFjXheHNo4bbt9LhRQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/martinez-polygon-clipping/node_modules/tinyqueue": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-1.2.3.tgz",
|
||||
"integrity": "sha512-Qz9RgWuO9l8lT+Y9xvbzhPT2efIUIFd69N7eF7tJ9lnQl0iLj1M7peK7IoUGZL9DJHw9XftqLreccfxcQgYLxA==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/mgrs": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
|
||||
@@ -4121,6 +4314,15 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/min-document": {
|
||||
"version": "2.19.2",
|
||||
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.2.tgz",
|
||||
"integrity": "sha512-8S5I8db/uZN8r9HSLFVWPdJCvYOejMcEC82VIzNUc6Zkklf/d1gg2psfE79/vyhWOj4+J8MtwmoOz3TmvaGu5A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dom-walk": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/minimist": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
|
||||
@@ -4260,6 +4462,12 @@
|
||||
"license": "MIT",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/next-tick": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-0.2.2.tgz",
|
||||
"integrity": "sha512-f7h4svPtl+QidoBv4taKXUjJ70G2asaZ8G28nS0OkqaalX8dwwrtWtyxEDPK62AC00ur/+/E0pUwBwY5EPn15Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/node-abi": {
|
||||
"version": "3.94.0",
|
||||
"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.94.0.tgz",
|
||||
@@ -4382,7 +4590,6 @@
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-2.2.0.tgz",
|
||||
"integrity": "sha512-zJq6RP/5q+TO2OpFV3FHzlPnFjmkb7Nc99a5SNjJE+uu/PkpChs+NIZSSzbBoD+6kjiISXjfYdwj1ZRQ81dz/w==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
@@ -4489,6 +4696,21 @@
|
||||
"splaytree": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/polylabel": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/polylabel/-/polylabel-1.1.0.tgz",
|
||||
"integrity": "sha512-bxaGcA40sL3d6M4hH72Z4NdLqxpXRsCFk8AITYg6x1rn1Ei3izf00UMLklerBZTO49aPA3CYrIwVulx2Bce2pA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"tinyqueue": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/polylabel/node_modules/tinyqueue": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
|
||||
"integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.5.19",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.19.tgz",
|
||||
@@ -4570,7 +4792,6 @@
|
||||
"version": "0.11.10",
|
||||
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
|
||||
"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6.0"
|
||||
@@ -4638,7 +4859,6 @@
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
|
||||
"integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"quickselect": "^2.0.0"
|
||||
@@ -4648,7 +4868,6 @@
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
|
||||
"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/rc": {
|
||||
@@ -4862,6 +5081,24 @@
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/rxjs": {
|
||||
"version": "7.8.2",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
|
||||
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/s2-geometry": {
|
||||
"version": "1.2.10",
|
||||
"resolved": "https://registry.npmjs.org/s2-geometry/-/s2-geometry-1.2.10.tgz",
|
||||
"integrity": "sha512-5WejfQu1XZ25ZerW8uL6xP1sM2krcOYKhI6TbfybGRf+vTQLrm3E+4n0+1lWg+MYqFjPzoe51zKhn2sBRMCt5g==",
|
||||
"license": "(MIT or Apache-2 or ISC)",
|
||||
"dependencies": {
|
||||
"long": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sade": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
|
||||
@@ -5117,6 +5354,11 @@
|
||||
"safe-buffer": "~5.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string-template": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
|
||||
"integrity": "sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw=="
|
||||
},
|
||||
"node_modules/strip-json-comments": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
|
||||
@@ -5284,6 +5526,12 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/three": {
|
||||
"version": "0.134.0",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.134.0.tgz",
|
||||
"integrity": "sha512-LbBerg7GaSPjYtTOnu41AMp7tV6efUNR3p4Wk5NzkSsNTBuA5mDGOfwwZL1jhhVMLx9V20HolIUo0+U3AXehbg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/through": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
||||
@@ -5346,8 +5594,7 @@
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD",
|
||||
"optional": true
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/tsscmp": {
|
||||
"version": "1.0.6",
|
||||
@@ -5419,6 +5666,22 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/virtual-dom": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/virtual-dom/-/virtual-dom-2.1.1.tgz",
|
||||
"integrity": "sha512-wb6Qc9Lbqug0kRqo/iuApfBpJJAq14Sk1faAnSmtqXiwahg7PVTvWMs9L02Z8nNIMqbwsxzBAA90bbtRLbw0zg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"browser-split": "0.0.1",
|
||||
"error": "^4.3.0",
|
||||
"ev-store": "^7.0.0",
|
||||
"global": "^4.3.0",
|
||||
"is-object": "^1.0.1",
|
||||
"next-tick": "^0.2.2",
|
||||
"x-is-array": "0.1.0",
|
||||
"x-is-string": "0.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.4.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz",
|
||||
@@ -5573,6 +5836,16 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/x-is-array": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/x-is-array/-/x-is-array-0.1.0.tgz",
|
||||
"integrity": "sha512-goHPif61oNrr0jJgsXRfc8oqtYzvfiMJpTqwE7Z4y9uH+T3UozkGqQ4d2nX9mB9khvA8U2o/UbPOFjgC7hLWIA=="
|
||||
},
|
||||
"node_modules/x-is-string": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
|
||||
"integrity": "sha512-GojqklwG8gpzOVEVki5KudKNoq7MbbjYZCbyWzEz7tyPA7eleiE0+ePwOWQQRb5fm86rD3S8Tc0tSFf3AOv50w=="
|
||||
},
|
||||
"node_modules/xml-utils": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.10.2.tgz",
|
||||
@@ -5580,6 +5853,15 @@
|
||||
"dev": true,
|
||||
"license": "CC0-1.0"
|
||||
},
|
||||
"node_modules/xtend": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
|
||||
"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/zarrita": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.7.3.tgz",
|
||||
|
||||
+2
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "jwe",
|
||||
"version": "2.0.0",
|
||||
"version": "2.0.2",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@@ -22,6 +22,7 @@
|
||||
"vite": "^6.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"mapillary-js": "^4.1.2",
|
||||
"maplibre-gl": "^5.1.0",
|
||||
"sharp": "^0.35.3"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,202 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Curation du corpus street (« An lari a ») — mode Mapillary.
|
||||
* « Fetch, pas recall » : pour chaque commune cible, interroge l'API Mapillary
|
||||
* (bbox autour du centre communal, préférence 360° + qualité + récence),
|
||||
* geo.api.gouv.fr (centre, superficie), api-adresse (nom de rue) et Wikidata
|
||||
* (QID de la commune via le sitelink frwiki).
|
||||
*
|
||||
* Usage : MAPILLARY_TOKEN=… node scripts/curate-street.mjs
|
||||
* (le token est aussi lu depuis .env : MAPILLARY_TOKEN ou PUBLIC_MAPILLARY_TOKEN)
|
||||
* Écrit src/lib/server/data/street.json.
|
||||
*/
|
||||
import { readFileSync, writeFileSync } from 'node:fs';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { dirname, join } from 'node:path';
|
||||
|
||||
const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
|
||||
|
||||
function chargeEnv() {
|
||||
try {
|
||||
for (const ligne of readFileSync(join(ROOT, '.env'), 'utf8').split('\n')) {
|
||||
const m = ligne.match(/^\s*([A-Z_]+)\s*=\s*(.+?)\s*$/);
|
||||
if (m && !process.env[m[1]]) process.env[m[1]] = m[2];
|
||||
}
|
||||
} catch {
|
||||
/* pas de .env */
|
||||
}
|
||||
}
|
||||
chargeEnv();
|
||||
const TOKEN = process.env.MAPILLARY_TOKEN || process.env.PUBLIC_MAPILLARY_TOKEN;
|
||||
if (!TOKEN) {
|
||||
console.error('Token Mapillary manquant (MAPILLARY_TOKEN ou PUBLIC_MAPILLARY_TOKEN).');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const UA = { 'User-Agent': 'JWE-OKI/2.0 (curation corpus street; contact: o-k-i.net)' };
|
||||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||||
const getJSON = async (url, headers = UA) => {
|
||||
const res = await fetch(url, { headers });
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status} sur ${url}`);
|
||||
return res.json();
|
||||
};
|
||||
|
||||
// Communes cibles : 5 par région, difficulté = précision exigée (pas de FACILE :
|
||||
// rayon 50 km = trivial en mode street). titreWiki = titre frwiki exact (désambiguïsé).
|
||||
const SPOTS = [
|
||||
// — Guadeloupe (971) —
|
||||
{ region: 'GUADELOUPE', commune: 'Pointe-à-Pitre', titreWiki: 'Pointe-à-Pitre', difficulte: 'MOYEN', indice1: 'Île papillon, aile droite', indice2: 'Port de commerce principal de l’archipel' },
|
||||
{ region: 'GUADELOUPE', commune: 'Les Abymes', titreWiki: 'Les Abymes', difficulte: 'MOYEN', indice1: 'Île papillon, aile droite', indice2: 'Commune la plus peuplée de l’archipel' },
|
||||
{ region: 'GUADELOUPE', commune: 'Le Gosier', titreWiki: 'Le Gosier', difficulte: 'DIFFICILE', indice1: 'Île papillon, aile droite', indice2: 'Station balnéaire au sud de la Grande-Terre' },
|
||||
{ region: 'GUADELOUPE', commune: 'Sainte-Anne', titreWiki: 'Sainte-Anne (Guadeloupe)', difficulte: 'DIFFICILE', indice1: 'Île papillon, aile droite', indice2: 'Plages au sud de la Grande-Terre' },
|
||||
{ region: 'GUADELOUPE', commune: 'Basse-Terre', titreWiki: 'Basse-Terre', difficulte: 'EXPERT', indice1: 'Île papillon, aile gauche', indice2: 'Chef-lieu au pied du volcan' },
|
||||
// — Martinique (972) —
|
||||
{ region: 'MARTINIQUE', commune: 'Fort-de-France', titreWiki: 'Fort-de-France', difficulte: 'MOYEN', indice1: 'Île aux fleurs', indice2: 'Chef-lieu, sur une grande baie' },
|
||||
{ region: 'MARTINIQUE', commune: 'Le Lamentin', titreWiki: 'Le Lamentin', difficulte: 'MOYEN', indice1: 'Île aux fleurs', indice2: 'Banlieue du chef-lieu, zone aéroportuaire' },
|
||||
{ region: 'MARTINIQUE', commune: 'Saint-Pierre', titreWiki: 'Saint-Pierre (Martinique)', difficulte: 'DIFFICILE', indice1: 'Île aux fleurs, côte caraïbe nord', indice2: 'Ville détruite par une éruption en 1902' },
|
||||
{ region: 'MARTINIQUE', commune: 'Le François', titreWiki: 'Le François', difficulte: 'DIFFICILE', indice1: 'Île aux fleurs, côte atlantique', indice2: 'Bourg face aux îlets du sud' },
|
||||
{ region: 'MARTINIQUE', commune: 'Sainte-Marie', titreWiki: 'Sainte-Marie (Martinique)', difficulte: 'EXPERT', indice1: 'Île aux fleurs, côte atlantique nord', indice2: 'Musée de la banane et rhum' },
|
||||
// — Guyane (973) —
|
||||
{ region: 'GUYANE', commune: 'Cayenne', titreWiki: 'Cayenne', difficulte: 'MOYEN', indice1: 'Terre de forêt amazonienne', indice2: 'Chef-lieu, sur l’île du même nom' },
|
||||
{ region: 'GUYANE', commune: 'Kourou', titreWiki: 'Kourou', difficulte: 'DIFFICILE', indice1: 'Terre de forêt amazonienne', indice2: 'Ville des fusées' },
|
||||
{ region: 'GUYANE', commune: 'Saint-Laurent-du-Maroni', titreWiki: 'Saint-Laurent-du-Maroni', difficulte: 'DIFFICILE', indice1: 'Terre de forêt amazonienne, à l’ouest', indice2: 'Ville du fleuve Maroni, ancien bagne' },
|
||||
{ region: 'GUYANE', commune: 'Matoury', titreWiki: 'Matoury', difficulte: 'EXPERT', indice1: 'Terre de forêt amazonienne', indice2: 'Banlieue sud du chef-lieu' },
|
||||
{ region: 'GUYANE', commune: 'Remire-Montjoly', titreWiki: 'Remire-Montjoly', difficulte: 'EXPERT', indice1: 'Terre de forêt amazonienne', indice2: 'Plages à l’est du chef-lieu' },
|
||||
// — La Réunion (974) —
|
||||
{ region: 'REUNION', commune: 'Saint-Denis', titreWiki: 'Saint-Denis (La Réunion)', difficulte: 'MOYEN', indice1: 'Île intense de l’océan Indien', indice2: 'Chef-lieu, au nord' },
|
||||
{ region: 'REUNION', commune: 'Saint-Pierre', titreWiki: 'Saint-Pierre (La Réunion)', difficulte: 'MOYEN', indice1: 'Île intense de l’océan Indien', indice2: 'Capitale du sud, front de mer animé' },
|
||||
{ region: 'REUNION', commune: 'Le Tampon', titreWiki: 'Le Tampon', difficulte: 'DIFFICILE', indice1: 'Île intense de l’océan Indien', indice2: 'Commune des hauts, dans le sud' },
|
||||
{ region: 'REUNION', commune: 'Saint-Paul', titreWiki: 'Saint-Paul (La Réunion)', difficulte: 'DIFFICILE', indice1: 'Île intense de l’océan Indien', indice2: 'Côte ouest, premier site de peuplement' },
|
||||
{ region: 'REUNION', commune: 'Saint-André', titreWiki: 'Saint-André (La Réunion)', difficulte: 'EXPERT', indice1: 'Île intense de l’océan Indien', indice2: 'Côte est, pays de la canne' }
|
||||
];
|
||||
|
||||
const PREFIXE_REGION = { GUADELOUPE: '971', MARTINIQUE: '972', GUYANE: '973', REUNION: '974' };
|
||||
|
||||
async function centreCommune(spot) {
|
||||
const data = await getJSON(
|
||||
`https://geo.api.gouv.fr/communes?nom=${encodeURIComponent(spot.commune)}&codeDepartement=${PREFIXE_REGION[spot.region]}&fields=centre,surface,code,mairie&limit=8`
|
||||
);
|
||||
const c = data[0];
|
||||
if (!c) throw new Error(`commune introuvable sur geo.api.gouv.fr`);
|
||||
// La mairie est un meilleur ancrage que le centroïde (les communes DOM
|
||||
// englobent des reliefs : le centroïde tombe souvent hors du centre-ville).
|
||||
const p = c.mairie?.coordinates ? c.mairie.coordinates : c.centre.coordinates;
|
||||
return { lat: p[1], lon: p[0], surfaceHa: c.surface };
|
||||
}
|
||||
|
||||
async function chercherImage(lat, lon) {
|
||||
const champs = 'id,is_pano,captured_at,computed_geometry,geometry,creator,quality_score';
|
||||
const note = (img) => (img.quality_score ?? 0.5) * 1e13 + (img.captured_at ?? 0);
|
||||
// 1) bbox autour de l'ancre (< 0,01° de côté, contrainte API), pano d'abord
|
||||
const demi = 0.0045;
|
||||
const bbox = `${lon - demi},${lat - demi},${lon + demi},${lat + demi}`;
|
||||
for (const pano of ['&is_pano=true', '']) {
|
||||
const data = await getJSON(
|
||||
`https://graph.mapillary.com/images?access_token=${encodeURIComponent(TOKEN)}&fields=${champs}&bbox=${bbox}&limit=200${pano}`
|
||||
);
|
||||
if (data.data?.length) {
|
||||
const triees = [...data.data].sort((a, b) => note(b) - note(a));
|
||||
return { image: triees[0], total: data.data.length };
|
||||
}
|
||||
}
|
||||
// 2) grille de recherches par rayon (50 m) autour de l'ancre
|
||||
const parId = new Map();
|
||||
for (const dLat of [-0.004, 0, 0.004]) {
|
||||
for (const dLon of [-0.004, 0, 0.004]) {
|
||||
try {
|
||||
const data = await getJSON(
|
||||
`https://graph.mapillary.com/images?access_token=${encodeURIComponent(TOKEN)}&fields=${champs}&lat=${lat + dLat}&lng=${lon + dLon}&radius=50&limit=10`
|
||||
);
|
||||
for (const img of data.data ?? []) parId.set(img.id, img);
|
||||
} catch {
|
||||
/* point sans couverture */
|
||||
}
|
||||
await sleep(120);
|
||||
}
|
||||
}
|
||||
if (!parId.size) return null;
|
||||
const triees = [...parId.values()].sort((a, b) => note(b) - note(a));
|
||||
return { image: triees[0], total: parId.size };
|
||||
}
|
||||
|
||||
async function nomDeRue(lat, lon) {
|
||||
try {
|
||||
const data = await getJSON(`https://api-adresse.data.gouv.fr/reverse/?lon=${lon}&lat=${lat}&type=street`);
|
||||
const f = data.features?.[0]?.properties;
|
||||
return f?.name ?? f?.street ?? null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// QIDs des communes via sitelinks frwiki (un seul appel batch)
|
||||
async function qidsCommunes() {
|
||||
const titres = SPOTS.map((s) => s.titreWiki);
|
||||
const data = await getJSON(
|
||||
`https://www.wikidata.org/w/api.php?action=wbgetentities&sites=frwiki&titles=${encodeURIComponent(titres.join('|'))}&props=sitelinks&sitefilter=frwiki&format=json&redirects=yes`
|
||||
);
|
||||
const parTitre = {};
|
||||
for (const [qid, e] of Object.entries(data.entities ?? {})) {
|
||||
if (e.sitelinks?.frwiki?.title) parTitre[e.sitelinks.frwiki.title] = qid;
|
||||
}
|
||||
const redirige = {};
|
||||
for (const r of data.redirects ?? []) redirige[r.from] = r.to;
|
||||
const res = {};
|
||||
for (const s of SPOTS) {
|
||||
const t = redirige[s.titreWiki] ?? s.titreWiki;
|
||||
res[s.titreWiki] = parTitre[t] ?? null;
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
const qids = await qidsCommunes();
|
||||
const lieux = [];
|
||||
let n = 0;
|
||||
for (const spot of SPOTS) {
|
||||
n++;
|
||||
try {
|
||||
const centre = await centreCommune(spot);
|
||||
await sleep(150);
|
||||
const trouve = await chercherImage(centre.lat, centre.lon);
|
||||
if (!trouve) {
|
||||
console.log(`VIDE ${spot.commune} (${spot.region}) — aucune image dans la bbox`);
|
||||
continue;
|
||||
}
|
||||
const img = trouve.image;
|
||||
const geo = img.computed_geometry ?? img.geometry;
|
||||
const coords = { lat: geo.coordinates[1], lon: geo.coordinates[0] };
|
||||
await sleep(150);
|
||||
const rue = await nomDeRue(coords.lat, coords.lon);
|
||||
const qid = qids[spot.titreWiki];
|
||||
lieux.push({
|
||||
id: `st-${String(n).padStart(2, '0')}`,
|
||||
nom: rue ? `${rue}, ${spot.commune}` : `Centre de ${spot.commune}`,
|
||||
nom_creole: `Lari ${spot.commune}`,
|
||||
region: spot.region,
|
||||
commune: spot.commune,
|
||||
coordonnees: coords,
|
||||
difficulte: spot.difficulte,
|
||||
mapillary_id: img.id,
|
||||
credit: {
|
||||
username: img.creator?.username ?? 'contributeur Mapillary',
|
||||
captured_at: new Date(img.captured_at).toISOString().slice(0, 10)
|
||||
},
|
||||
is_pano: !!img.is_pano,
|
||||
wikidata_id: qid,
|
||||
indices: [
|
||||
{ niveau: 1, texte: spot.indice1 },
|
||||
{ niveau: 2, texte: spot.indice2 }
|
||||
],
|
||||
aire_commune_km2: Math.round(centre.surfaceHa) / 100 // geo.api : hectares → km²
|
||||
});
|
||||
console.log(
|
||||
`OK ${spot.commune.padEnd(24)} img ${img.id} pano=${img.is_pano ? 'oui' : 'NON'} q=${img.quality_score?.toFixed(2) ?? '—'} pool=${trouve.total} qid=${qid ?? 'ABSENT'} rue=${rue ?? '—'}`
|
||||
);
|
||||
} catch (e) {
|
||||
console.log(`ERREUR ${spot.commune} — ${e.message}`);
|
||||
}
|
||||
await sleep(150);
|
||||
}
|
||||
|
||||
writeFileSync(join(ROOT, 'src/lib/server/data/street.json'), JSON.stringify(lieux, null, 2) + '\n');
|
||||
console.log(`\n${lieux.length} lieux écrits dans src/lib/server/data/street.json`);
|
||||
@@ -0,0 +1,132 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Validation du corpus street (« An lari a », mode Mapillary).
|
||||
* « Fetch, pas recall » : chaque mapillary_id est revérifié contre l'API
|
||||
* Mapillary (existence, computed_geometry < 100 m de la vérité curée, crédit
|
||||
* auteur, flag pano) et chaque wikidata_id contre Wikidata (sitelink frwiki).
|
||||
*
|
||||
* Usage : node scripts/validate-street.mjs
|
||||
* Token lu depuis .env (MAPILLARY_TOKEN ou PUBLIC_MAPILLARY_TOKEN).
|
||||
* Exit code 1 si au moins un FAIL.
|
||||
*/
|
||||
import { readFileSync } from 'node:fs';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { dirname, join } from 'node:path';
|
||||
|
||||
const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
|
||||
const STREET = JSON.parse(readFileSync(join(ROOT, 'src/lib/server/data/street.json'), 'utf8'));
|
||||
const UA = { 'User-Agent': 'JWE-OKI/2.0 (validation corpus street; contact: o-k-i.net)' };
|
||||
|
||||
function chargeEnv() {
|
||||
try {
|
||||
for (const ligne of readFileSync(join(ROOT, '.env'), 'utf8').split('\n')) {
|
||||
const m = ligne.match(/^\s*([A-Z_]+)\s*=\s*(.+?)\s*$/);
|
||||
if (m && !process.env[m[1]]) process.env[m[1]] = m[2];
|
||||
}
|
||||
} catch {
|
||||
/* pas de .env */
|
||||
}
|
||||
}
|
||||
chargeEnv();
|
||||
const TOKEN = process.env.MAPILLARY_TOKEN || process.env.PUBLIC_MAPILLARY_TOKEN;
|
||||
|
||||
const getJSON = async (url, headers = UA, essais = 3) => {
|
||||
for (let i = 0; ; i++) {
|
||||
const res = await fetch(url, { headers });
|
||||
if (res.ok) return res.json();
|
||||
// 429 (rate limit Wikidata/Mapillary) ou 5xx : backoff puis retry
|
||||
if ((res.status === 429 || res.status >= 500) && i < essais - 1) {
|
||||
await new Promise((r) => setTimeout(r, 2000 * (i + 1)));
|
||||
continue;
|
||||
}
|
||||
throw new Error(`HTTP ${res.status} sur ${url}`);
|
||||
}
|
||||
};
|
||||
|
||||
let fails = 0;
|
||||
const fail = (id, msg) => {
|
||||
fails++;
|
||||
console.log(`FAIL ${id} — ${msg}`);
|
||||
};
|
||||
|
||||
const distKm = (a, b) => {
|
||||
const R = 6371,
|
||||
dLa = ((b.lat - a.lat) * Math.PI) / 180,
|
||||
dLo = ((b.lon - a.lon) * Math.PI) / 180;
|
||||
const h =
|
||||
Math.sin(dLa / 2) ** 2 +
|
||||
Math.cos((a.lat * Math.PI) / 180) * Math.cos((b.lat * Math.PI) / 180) * Math.sin(dLo / 2) ** 2;
|
||||
return 2 * R * Math.asin(Math.sqrt(h));
|
||||
};
|
||||
|
||||
// --- Schéma ------------------------------------------------------------------
|
||||
const CHAMPS = ['id', 'nom', 'nom_creole', 'region', 'commune', 'coordonnees', 'difficulte', 'mapillary_id', 'credit', 'wikidata_id', 'indices'];
|
||||
const REGIONS = ['GUADELOUPE', 'MARTINIQUE', 'GUYANE', 'REUNION'];
|
||||
const ids = new Set();
|
||||
const mlyIds = new Set();
|
||||
for (const l of STREET) {
|
||||
for (const c of CHAMPS) if (!(c in l)) fail(l.nom, `champ manquant: ${c}`);
|
||||
if (ids.has(l.id)) fail(l.nom, `id dupliqué ${l.id}`);
|
||||
ids.add(l.id);
|
||||
if (mlyIds.has(l.mapillary_id)) fail(l.nom, `mapillary_id dupliqué ${l.mapillary_id}`);
|
||||
mlyIds.add(l.mapillary_id);
|
||||
if (!REGIONS.includes(l.region)) fail(l.nom, `région invalide: ${l.region}`);
|
||||
if (!['FACILE', 'MOYEN', 'DIFFICILE', 'EXPERT'].includes(l.difficulte)) fail(l.nom, `difficulté invalide`);
|
||||
if (!l.wikidata_id) fail(l.nom, `wikidata_id null (le mode street documente la commune)`);
|
||||
if (!(l.aire_commune_km2 > 0)) fail(l.nom, `aire_commune_km2 invalide`);
|
||||
}
|
||||
const parRegion = Object.groupBy(STREET, (l) => l.region);
|
||||
for (const r of REGIONS) {
|
||||
const n = parRegion[r]?.length ?? 0;
|
||||
if (n < 3) fail(r, `seulement ${n} lieux (< 3)`);
|
||||
}
|
||||
console.log(`Schéma : ${STREET.length} lieux contrôlés (${REGIONS.map((r) => `${r}=${parRegion[r]?.length ?? 0}`).join(', ')}).`);
|
||||
|
||||
if (!TOKEN) {
|
||||
console.log('Token Mapillary absent — vérifications API sautées (schéma seul).');
|
||||
} else {
|
||||
// --- Mapillary : existence, géométrie, crédit, pano -------------------------
|
||||
console.log('\n| Lieu | mapillary_id | écart coords | crédit | pano | PASS/FAIL |');
|
||||
console.log('|---|---|---|---|---|---|');
|
||||
for (const l of STREET) {
|
||||
try {
|
||||
const img = await getJSON(
|
||||
`https://graph.mapillary.com/${l.mapillary_id}?access_token=${encodeURIComponent(TOKEN)}&fields=id,is_pano,captured_at,computed_geometry,creator`
|
||||
);
|
||||
const geo = img.computed_geometry;
|
||||
const d = distKm(l.coordonnees, { lat: geo.coordinates[1], lon: geo.coordinates[0] });
|
||||
const notes = [];
|
||||
let ok = true;
|
||||
if (d > 0.1) {
|
||||
ok = false;
|
||||
notes.push(`écart ${(d * 1000).toFixed(0)} m > 100 m`);
|
||||
}
|
||||
if ((img.creator?.username ?? null) !== l.credit.username) {
|
||||
ok = false;
|
||||
notes.push(`crédit « ${l.credit.username} » ≠ « ${img.creator?.username} »`);
|
||||
}
|
||||
if (!!img.is_pano !== !!l.is_pano) notes.push(`pano API=${img.is_pano} corpus=${l.is_pano} (non bloquant)`);
|
||||
if (!ok) fail(l.nom, notes.join(' ; '));
|
||||
console.log(`| ${l.nom} | ${l.mapillary_id} | ${(d * 1000).toFixed(0)} m | ${l.credit.username} | ${img.is_pano ? 'oui' : 'non'} | ${ok ? 'PASS' : 'FAIL'} |`);
|
||||
} catch (e) {
|
||||
fail(l.nom, `Mapillary : ${e.message}`);
|
||||
}
|
||||
await new Promise((r) => setTimeout(r, 120));
|
||||
}
|
||||
}
|
||||
|
||||
// --- Wikidata : sitelink frwiki pour chaque commune ---------------------------
|
||||
const qids = STREET.map((l) => l.wikidata_id).filter(Boolean).join('|');
|
||||
const data = await getJSON(
|
||||
`https://www.wikidata.org/w/api.php?action=wbgetentities&ids=${qids}&props=sitelinks&sitefilter=frwiki&format=json`
|
||||
);
|
||||
console.log('\n| Lieu | QID commune | sitelink frwiki | PASS/FAIL |');
|
||||
console.log('|---|---|---|---|');
|
||||
for (const l of STREET) {
|
||||
const site = data.entities?.[l.wikidata_id]?.sitelinks?.frwiki?.title;
|
||||
if (!site) fail(l.nom, `${l.wikidata_id} sans sitelink frwiki`);
|
||||
console.log(`| ${l.nom} | ${l.wikidata_id} | ${site ?? 'ABSENT'} | ${site ? 'PASS' : 'FAIL'} |`);
|
||||
}
|
||||
|
||||
console.log(fails ? `\n${fails} FAIL.` : '\nTout est conforme.');
|
||||
process.exit(fails ? 1 : 0);
|
||||
@@ -4,6 +4,11 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#0b3d2e" />
|
||||
<script>
|
||||
// Gate motion : les états cachés initiaux (data-reveal, masques) ne
|
||||
// s'appliquent que si JS est actif — sans JS, tout reste visible.
|
||||
document.documentElement.classList.add('js');
|
||||
</script>
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||
<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
|
||||
%sveltekit.head%
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { Handle } from '@sveltejs/kit';
|
||||
|
||||
/**
|
||||
* CSP — domaines justifiés :
|
||||
* - tiles.openfreemap.org : style MapLibre (tuiles vectorielles + raster
|
||||
* natural_earth, sprites, glyphs — cf. src/lib/map/style-oki.json) ;
|
||||
* - upload.wikimedia.org : vignettes des fiches Wikipédia (wiki.thumbnail,
|
||||
* affichée en <img>) et photos Commons (service worker, Special:FilePath) ;
|
||||
* - commons.wikimedia.org : variantes Special:FilePath (service worker) ;
|
||||
* - graph.mapillary.com : API Mapillary (mapillary-js, seul domaine en dur
|
||||
* dans la lib) ; tiles.mapillary.com : tuiles vectorielles de couverture ;
|
||||
* images.mapillary.com : CDN des photos 360° (fetch ArrayBuffer → blob:) ;
|
||||
* - www.wikidata.org / fr.wikipedia.org : appelées côté serveur uniquement
|
||||
* (proxy /api/wiki), listées ici par précaution si un appel direct apparaît ;
|
||||
* - 'unsafe-inline' sur script-src : script inline de app.html (gate motion)
|
||||
* + payload d'hydratation injecté par SvelteKit adapter-node ;
|
||||
* - worker-src blob: : workers WebGL de MapLibre chargés en blob.
|
||||
*/
|
||||
const CSP = [
|
||||
"default-src 'self'",
|
||||
"script-src 'self' 'unsafe-inline'",
|
||||
"style-src 'self' 'unsafe-inline'",
|
||||
"img-src 'self' data: blob: https://upload.wikimedia.org https://commons.wikimedia.org https://tiles.openfreemap.org",
|
||||
"font-src 'self' data: https://tiles.openfreemap.org",
|
||||
"connect-src 'self' https://tiles.openfreemap.org https://graph.mapillary.com https://tiles.mapillary.com https://images.mapillary.com https://www.wikidata.org https://fr.wikipedia.org https://upload.wikimedia.org https://commons.wikimedia.org",
|
||||
"worker-src 'self' blob:",
|
||||
"frame-ancestors 'none'",
|
||||
"base-uri 'self'",
|
||||
"form-action 'self'",
|
||||
"object-src 'none'"
|
||||
].join('; ');
|
||||
|
||||
// Le jeu n'utilise ni caméra, ni micro, ni géolocalisation (la position est
|
||||
// devinée au clic sur la carte) — Permissions-Policy les coupe explicitement.
|
||||
export const handle: Handle = async ({ event, resolve }) => {
|
||||
const response = await resolve(event);
|
||||
response.headers.set('Content-Security-Policy', CSP);
|
||||
response.headers.set('X-Content-Type-Options', 'nosniff');
|
||||
response.headers.set('X-Frame-Options', 'DENY');
|
||||
response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
|
||||
response.headers.set('Permissions-Policy', 'geolocation=(), microphone=(), camera=()');
|
||||
return response;
|
||||
};
|
||||
@@ -125,6 +125,8 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { t } from '$lib/i18n/store.svelte';
|
||||
import { reveal } from '$lib/motion/reveal';
|
||||
import { syncopatedDelay } from '$lib/motion/tokens';
|
||||
|
||||
interface Props {
|
||||
/** Région sélectionnée (liaison bidirectionnelle) — ignorée si `selectionnable` est faux. */
|
||||
@@ -133,13 +135,19 @@
|
||||
selectionnable?: boolean;
|
||||
marqueurs?: MarqueurCarte[];
|
||||
attribution?: string;
|
||||
/**
|
||||
* Base d'index de la cascade syncopée d'entrée des 4 insets (accueil :
|
||||
* 5, après les 5 cartes de mode). null (défaut) = pas de cascade.
|
||||
*/
|
||||
cascadeBase?: number | null;
|
||||
}
|
||||
|
||||
let {
|
||||
selection = $bindable<SelectionCarte>(null),
|
||||
selectionnable = true,
|
||||
marqueurs = [],
|
||||
attribution = '© contributeurs OpenStreetMap / données publiques'
|
||||
attribution = '© contributeurs OpenStreetMap / données publiques',
|
||||
cascadeBase = null
|
||||
}: Props = $props();
|
||||
|
||||
let survol = $state<Region | null>(null);
|
||||
@@ -185,11 +193,14 @@
|
||||
aria-hidden={selectionnable ? 'true' : undefined}
|
||||
aria-label={selectionnable ? undefined : t().carte.carteRegionsLabel}
|
||||
>
|
||||
{#each INSETS as ins (ins.region)}
|
||||
{#each INSETS as ins, i (ins.region)}
|
||||
<g
|
||||
class="region"
|
||||
class:survolee={selectionnable && survol === ins.region}
|
||||
class:choisie={selectionnable && selection === ins.region}
|
||||
data-reveal={cascadeBase === null ? undefined : ''}
|
||||
style:--d={cascadeBase === null ? undefined : `${syncopatedDelay(cascadeBase + i)}ms`}
|
||||
use:reveal={cascadeBase !== null}
|
||||
>
|
||||
{#each ins.chemins as d (d)}
|
||||
<path {d} />
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
import { t } from '$lib/i18n/store.svelte';
|
||||
import { MAX_BOUNDS, MIN_ZOOM, REGION_BOUNDS, REGIONS } from '$lib/map/regions';
|
||||
import styleOki from '$lib/map/style-oki.json';
|
||||
import { dureeMs, easeKa, syncopatedDelay } from '$lib/motion/tokens';
|
||||
import type { Coordonnees, Region } from '$lib/types';
|
||||
import type { Map as MLMap, Marker, StyleSpecification } from 'maplibre-gl';
|
||||
|
||||
@@ -50,6 +51,9 @@
|
||||
let guessMarker: Marker | null = null;
|
||||
let realMarker: Marker | null = null;
|
||||
let explorerMarkers: Marker[] = [];
|
||||
let observateurTaille: ResizeObserver | null = null;
|
||||
let rafLigne: number | null = null; // tracé progressif de la ligne de distance
|
||||
let pulseAttendu = false; // pulse du marqueur au prochain positionnement (clic / dragend)
|
||||
|
||||
const SRC_LIGNE = 'jwe-ligne';
|
||||
const SRC_PAIRES = 'jwe-paires';
|
||||
@@ -93,6 +97,13 @@
|
||||
};
|
||||
}
|
||||
|
||||
function annulerTraceLigne(): void {
|
||||
if (rafLigne !== null) {
|
||||
cancelAnimationFrame(rafLigne);
|
||||
rafLigne = null;
|
||||
}
|
||||
}
|
||||
|
||||
function dessinerRevelation(): void {
|
||||
if (!map || !ml || !real) return;
|
||||
ensureSource(SRC_LIGNE);
|
||||
@@ -118,38 +129,69 @@
|
||||
paint: { 'text-color': '#0b3d2e', 'text-halo-color': '#fffdf8', 'text-halo-width': 2 }
|
||||
});
|
||||
}
|
||||
const features: GeoJSON.Feature[] = [];
|
||||
if (guess) {
|
||||
features.push(ligneFeature(guess, real, null));
|
||||
if (distanceKm !== null) {
|
||||
// Étiquette de distance au milieu de la ligne guess ↔ réel
|
||||
const positionReelle = real;
|
||||
/** Features de la ligne guess ↔ réel à la progression donnée (1 = complète). */
|
||||
function featuresLigne(progression: number): GeoJSON.Feature[] {
|
||||
if (!guess) return [];
|
||||
const tete = {
|
||||
lat: guess.lat + (positionReelle.lat - guess.lat) * progression,
|
||||
lon: guess.lon + (positionReelle.lon - guess.lon) * progression
|
||||
};
|
||||
const features: GeoJSON.Feature[] = [ligneFeature(guess, tete, null)];
|
||||
if (progression >= 1 && distanceKm !== null) {
|
||||
// Étiquette de distance au milieu de la ligne, posée à la fin du tracé
|
||||
features.push(
|
||||
pointFeature(
|
||||
{ lat: (guess.lat + real.lat) / 2, lon: (guess.lon + real.lon) / 2 },
|
||||
{ lat: (guess.lat + positionReelle.lat) / 2, lon: (guess.lon + positionReelle.lon) / 2 },
|
||||
{ etiquette: `${distanceKm} km` }
|
||||
)
|
||||
);
|
||||
}
|
||||
return features;
|
||||
}
|
||||
|
||||
annulerTraceLigne();
|
||||
const dureeTrace = dureeMs('--dur-phrase');
|
||||
if (guess && !reducedMotion && dureeTrace > 0) {
|
||||
// La ligne de distance se dessine depuis le guess vers le lieu réel :
|
||||
// croissance progressive du GeoJSON via rAF (jamais d'état réactif
|
||||
// par frame), easing --ease-ka, durée lue du token CSS.
|
||||
const t0 = performance.now();
|
||||
const tick = (t: number): void => {
|
||||
const p = Math.min(1, (t - t0) / dureeTrace);
|
||||
setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features: featuresLigne(easeKa(p)) });
|
||||
rafLigne = p < 1 ? requestAnimationFrame(tick) : null;
|
||||
};
|
||||
rafLigne = requestAnimationFrame(tick);
|
||||
} else {
|
||||
setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features: featuresLigne(1) });
|
||||
}
|
||||
setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features });
|
||||
|
||||
// Marqueur vert = position réelle ; le marqueur corail du joueur RESTE
|
||||
// à sa position : la comparaison visuelle guess ↔ réel est le cœur du jeu.
|
||||
realMarker?.remove();
|
||||
realMarker = new ml.Marker({ color: '#0b3d2e' }).setLngLat([real.lon, real.lat]).addTo(map);
|
||||
// Le marqueur « tombe » avec un petit rebond (transform only, keyframes CSS).
|
||||
if (!reducedMotion) realMarker.getElement().classList.add('tombe');
|
||||
|
||||
if (guess) {
|
||||
const bounds = new ml.LngLatBounds(
|
||||
[Math.min(guess.lon, real.lon), Math.min(guess.lat, real.lat)],
|
||||
[Math.max(guess.lon, real.lon), Math.max(guess.lat, real.lat)]
|
||||
);
|
||||
map.fitBounds(bounds, { padding: 80, duration: reducedMotion ? 0 : 900, maxZoom: 12 });
|
||||
// Le panneau résultat vient de remplacer la photo : synchroniser la
|
||||
// taille du canvas AVANT de calculer le cadrage, sinon il est faussé.
|
||||
// maxZoom 15 (et non 12) : pour un guess proche du lieu, les deux
|
||||
// marqueurs doivent rester distinguables (juger « à quel point on est bon »).
|
||||
map.resize();
|
||||
map.fitBounds(bounds, { padding: 90, duration: reducedMotion ? 0 : 900, maxZoom: 15 });
|
||||
} else {
|
||||
map.easeTo({ center: [real.lon, real.lat], zoom: 11, duration: reducedMotion ? 0 : 900 });
|
||||
}
|
||||
}
|
||||
|
||||
function nettoyerRevelation(): void {
|
||||
annulerTraceLigne();
|
||||
realMarker?.remove();
|
||||
realMarker = null;
|
||||
setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features: [] });
|
||||
@@ -165,6 +207,7 @@
|
||||
guessMarker.on('dragend', () => {
|
||||
const ll = guessMarker?.getLngLat();
|
||||
if (ll) {
|
||||
pulseAttendu = true; // le déplacement au drag est aussi un placement
|
||||
guess = { lat: ll.lat, lon: ll.lng };
|
||||
onguess?.(guess);
|
||||
}
|
||||
@@ -173,6 +216,17 @@
|
||||
guessMarker.setLngLat([guess.lon, guess.lat]);
|
||||
}
|
||||
guessMarker.setDraggable(interactive && !real);
|
||||
if (pulseAttendu) {
|
||||
pulseAttendu = false;
|
||||
if (!reducedMotion) {
|
||||
// Feedback de placement : pulse léger (redémarrage forcé si le
|
||||
// marqueur bouge à nouveau pendant l'animation).
|
||||
const el = guessMarker.getElement();
|
||||
el.classList.remove('pulse');
|
||||
void el.offsetWidth;
|
||||
el.classList.add('pulse');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
guessMarker?.remove();
|
||||
guessMarker = null;
|
||||
@@ -224,11 +278,15 @@
|
||||
if (!map || !ml) return;
|
||||
for (const m of explorerMarkers) m.remove();
|
||||
explorerMarkers = [];
|
||||
for (const info of markers) {
|
||||
for (const [i, info] of markers.entries()) {
|
||||
const el = document.createElement('button');
|
||||
el.type = 'button';
|
||||
el.className = 'marqueur-explorer';
|
||||
el.setAttribute('aria-label', info.label);
|
||||
// Cascade syncopée au (re)filtrage : rythme 3+3+2 sur le premier
|
||||
// cycle, plafonné à 960 ms au-delà (le catalogue peut être long).
|
||||
// Sans effet en reduced-motion : l'animation est sous gate média.
|
||||
el.style.animationDelay = `${Math.min(syncopatedDelay(i), 960)}ms`;
|
||||
const mk = new ml.Marker({ element: el, color: '#175e70' })
|
||||
.setLngLat([info.lon, info.lat])
|
||||
.addTo(map!);
|
||||
@@ -307,6 +365,7 @@
|
||||
map.addControl(new mod.NavigationControl({ showCompass: false }), 'top-left');
|
||||
map.on('click', (e) => {
|
||||
if (!interactive || real) return;
|
||||
pulseAttendu = true; // feedback au placement du marqueur
|
||||
guess = { lat: e.lngLat.lat, lon: e.lngLat.lng };
|
||||
onguess?.(guess);
|
||||
});
|
||||
@@ -316,9 +375,16 @@
|
||||
syncExplorerMarkers();
|
||||
if (real) dessinerRevelation();
|
||||
});
|
||||
// MapLibre ne détecte pas seul les changements de taille du conteneur
|
||||
// (panneau résultat qui remplace la photo, rotation d'écran…).
|
||||
observateurTaille = new ResizeObserver(() => map?.resize());
|
||||
observateurTaille.observe(conteneur);
|
||||
})();
|
||||
return () => {
|
||||
detruit = true;
|
||||
annulerTraceLigne();
|
||||
observateurTaille?.disconnect();
|
||||
observateurTaille = null;
|
||||
map?.remove();
|
||||
map = null;
|
||||
};
|
||||
@@ -326,7 +392,13 @@
|
||||
|
||||
let ancienReal: Coordonnees | null = null;
|
||||
$effect(() => {
|
||||
if (!map || !map.loaded()) return;
|
||||
// Lecture inconditionnelle de `real` : au montage la carte n'existe pas
|
||||
// encore, et un retour anticipé avant toute lecture réactive ferait que
|
||||
// Svelte n'enregistre aucune dépendance — l'effet ne serait jamais relancé.
|
||||
// (isStyleLoaded et non loaded : loaded() reste faux pendant le chargement
|
||||
// des tuiles, ce qui ferait rater le dessin juste après un zoom/pan.)
|
||||
void real;
|
||||
if (!map || !map.isStyleLoaded()) return;
|
||||
if (real && !ancienReal) dessinerRevelation();
|
||||
if (!real && ancienReal) nettoyerRevelation();
|
||||
ancienReal = real;
|
||||
@@ -374,33 +446,39 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.carte {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--oki-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Mobile : les sauts sortent de la carte — barre horizontale SOUS la carte,
|
||||
dimensionnée pour que les 4 régions tiennent sur 360px+ (scroll en repli),
|
||||
jamais recouverte par l'attribution ni un overlay. */
|
||||
.sauts {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 0 0.5rem;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.3rem;
|
||||
overflow-x: auto;
|
||||
padding: 0.1rem;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.saut {
|
||||
flex: 0 0 auto;
|
||||
min-height: 48px; /* cible tactile */
|
||||
background: rgba(255, 253, 248, 0.94);
|
||||
color: var(--oki-vert);
|
||||
border: 1px solid var(--oki-sable-fonce);
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.8rem;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 650;
|
||||
cursor: pointer;
|
||||
@@ -411,6 +489,22 @@
|
||||
background: var(--oki-vert-doux);
|
||||
}
|
||||
|
||||
/* Desktop : overlay bas-gauche, dégagé de l'attribution compacte (bas-droite). */
|
||||
@media (min-width: 768px) {
|
||||
.sauts {
|
||||
position: absolute;
|
||||
bottom: 0.6rem;
|
||||
left: 0.6rem;
|
||||
max-width: calc(100% - 5rem);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.saut {
|
||||
min-height: 0;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.35rem 0.8rem;
|
||||
} }
|
||||
|
||||
:global(.marqueur-explorer) {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
@@ -425,4 +519,61 @@
|
||||
:global(.marqueur-explorer:focus-visible) {
|
||||
background: var(--oki-vert-clair);
|
||||
}
|
||||
|
||||
/* — Motion des marqueurs : transform/opacity uniquement, gate no-preference
|
||||
(les classes tombe/pulse ne sont posées qu'hors reduced-motion, et les
|
||||
délais inline de la cascade explorer sont sans effet sans animation). — */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* Cascade syncopée d'entrée des marqueurs du catalogue explorer */
|
||||
:global(.marqueur-explorer) {
|
||||
animation: marqueur-pop var(--dur-mesure) var(--ease-ka) backwards;
|
||||
}
|
||||
|
||||
/* Le marqueur du lieu réel « tombe » avec un petit rebond */
|
||||
:global(.maplibregl-marker.tombe > svg) {
|
||||
transform-origin: bottom center;
|
||||
animation: marqueur-tombe var(--dur-mesure) var(--ease-ka);
|
||||
}
|
||||
|
||||
/* Pulse léger au placement du marqueur de guess */
|
||||
:global(.maplibregl-marker.pulse > svg) {
|
||||
transform-origin: bottom center;
|
||||
animation: marqueur-pulse var(--dur-mesure) var(--ease-ka);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marqueur-pop {
|
||||
from {
|
||||
transform: scale(0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marqueur-tombe {
|
||||
0% {
|
||||
transform: translateY(-34px) scale(0.85);
|
||||
opacity: 0;
|
||||
}
|
||||
55% {
|
||||
transform: translateY(3px) scale(1.03);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marqueur-pulse {
|
||||
0% {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -59,5 +59,6 @@
|
||||
font-size: 0.72rem;
|
||||
color: #fff;
|
||||
background: linear-gradient(transparent, rgba(11, 61, 46, 0.85));
|
||||
pointer-events: none; /* décoratif : ne bloque jamais les clics */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import WikiFiche from './WikiFiche.svelte';
|
||||
import { t } from '$lib/i18n/store.svelte';
|
||||
import { compte } from '$lib/motion/countup';
|
||||
import type { GuessResult } from '$lib/types';
|
||||
|
||||
interface Props {
|
||||
@@ -17,7 +18,11 @@
|
||||
<header class="score-bloc">
|
||||
<p class="bravo">{result.score > 0 ? t().micro.bravo : t().micro.kiteSaYe}</p>
|
||||
<p class="score">
|
||||
<span class="valeur">{result.score}</span>
|
||||
<!-- Count-up animé (aria-hidden) doublé de la valeur finale pour les
|
||||
lecteurs d'écran : la section est aria-live, l'animation rAF
|
||||
écrirait sinon une valeur par frame. -->
|
||||
<span class="valeur" aria-hidden="true" use:compte={result.score}>{result.score}</span>
|
||||
<span class="sr-only">{result.score}</span>
|
||||
<span class="unite">{t().resultat.points}</span>
|
||||
</p>
|
||||
{#if result.distanceKm !== null}
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<script lang="ts">
|
||||
import { SITE_NAME, SITE_URL } from '$lib/site';
|
||||
|
||||
interface Props {
|
||||
/** Titre de la page (sans le nom du site) — « JWE — … » est composé ici. */
|
||||
title: string;
|
||||
description: string;
|
||||
/** Chemin absolu de la route (ex. `/explorer`) — canonical + og:url. */
|
||||
path: string;
|
||||
/** URL absolue d'une image og (aucune émise si absente — pas d'image inventée). */
|
||||
image?: string;
|
||||
}
|
||||
|
||||
let { title, description, path, image }: Props = $props();
|
||||
|
||||
const titreComplet = $derived(`${SITE_NAME} — ${title}`);
|
||||
const urlCanonique = $derived(`${SITE_URL}${path}`);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{titreComplet}</title>
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href={urlCanonique} />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={urlCanonique} />
|
||||
<meta property="og:title" content={titreComplet} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:locale" content="fr_FR" />
|
||||
<meta property="og:site_name" content={SITE_NAME} />
|
||||
{#if image}
|
||||
<meta property="og:image" content={image} />
|
||||
{/if}
|
||||
|
||||
<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
|
||||
<meta name="twitter:title" content={titreComplet} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
{#if image}
|
||||
<meta name="twitter:image" content={image} />
|
||||
{/if}
|
||||
</svelte:head>
|
||||
@@ -0,0 +1,115 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { env } from '$env/dynamic/public';
|
||||
import { t } from '$lib/i18n/store.svelte';
|
||||
import type { Viewer } from 'mapillary-js';
|
||||
|
||||
interface Props {
|
||||
mapillaryId: string;
|
||||
credit?: string;
|
||||
}
|
||||
|
||||
let { mapillaryId, credit }: Props = $props();
|
||||
|
||||
let conteneur: HTMLDivElement;
|
||||
let viewer: Viewer | null = null;
|
||||
let etat = $state<'chargement' | 'pret' | 'erreur' | 'token'>('chargement');
|
||||
|
||||
onMount(() => {
|
||||
let detruit = false;
|
||||
// Lazy load : mapillary-js (JS + CSS) n'est chargé que sur l'écran de jeu street.
|
||||
void (async () => {
|
||||
const token = env.PUBLIC_MAPILLARY_TOKEN;
|
||||
if (!token) {
|
||||
etat = 'token';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const [mod] = await Promise.all([
|
||||
import('mapillary-js'),
|
||||
import('mapillary-js/dist/mapillary.css')
|
||||
]);
|
||||
if (detruit) return;
|
||||
// cover désactivé : la photo s'affiche directement, sans écran d'intro.
|
||||
viewer = new mod.Viewer({
|
||||
accessToken: token,
|
||||
container: conteneur,
|
||||
component: { cover: false }
|
||||
});
|
||||
// moveTo rejette si l'image a été retirée de Mapillary entre-temps.
|
||||
await viewer.moveTo(mapillaryId);
|
||||
if (detruit) return;
|
||||
etat = 'pret';
|
||||
} catch {
|
||||
if (!detruit) etat = 'erreur';
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
detruit = true;
|
||||
viewer?.remove();
|
||||
viewer = null;
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<figure class="street-panel">
|
||||
<div
|
||||
bind:this={conteneur}
|
||||
class="visionneuse"
|
||||
role="application"
|
||||
aria-label={t().jeu.streetAriaLabel}
|
||||
></div>
|
||||
{#if etat !== 'pret'}
|
||||
<div class="voile">
|
||||
<p>
|
||||
{#if etat === 'chargement'}{t().jeu.streetChargement}
|
||||
{:else if etat === 'token'}{t().jeu.streetToken}
|
||||
{:else}{t().jeu.streetErreur}{/if}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if credit && etat === 'pret'}
|
||||
<figcaption>{credit}</figcaption>
|
||||
{/if}
|
||||
</figure>
|
||||
|
||||
<style>
|
||||
.street-panel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--oki-vert);
|
||||
border-radius: var(--oki-radius);
|
||||
}
|
||||
|
||||
.visionneuse {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.voile {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
color: var(--oki-blanc);
|
||||
background: var(--oki-vert);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.72rem;
|
||||
color: #fff;
|
||||
background: linear-gradient(transparent, rgba(11, 61, 46, 0.85));
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@@ -17,6 +17,8 @@ const fr = {
|
||||
lieuDesc: 'Une rue, un bord de mer, une forêt… devine où tu es.',
|
||||
defi: 'Défi 5 rounds',
|
||||
defiDesc: '5 lieux d’affilée, monuments et lieux mélangés.',
|
||||
street: 'An lari a',
|
||||
streetDesc: 'Navigue dans une rue en photo 360° et devine la commune.',
|
||||
explorer: 'Aprann',
|
||||
explorerDesc: 'Explore la carte librement et lis les fiches Wikipédia. Sans score.'
|
||||
},
|
||||
@@ -40,6 +42,10 @@ const fr = {
|
||||
indicesRestants: 'indices restants',
|
||||
plusDIndice: 'Plus d’indice disponible',
|
||||
poserMarqueur: 'Clique sur la carte pour placer ton marqueur',
|
||||
streetChargement: 'Chargement de la vue de rue…',
|
||||
streetErreur: 'Impossible de charger la photo Mapillary. Réessaie ou passe au lieu suivant.',
|
||||
streetToken: 'Visionneuse indisponible : configuration Mapillary manquante.',
|
||||
streetAriaLabel: 'Vue de rue interactive. Flèches pour avancer, glisser pour regarder autour.',
|
||||
round: 'Manche',
|
||||
sur: 'sur',
|
||||
difficulte: {
|
||||
@@ -50,8 +56,6 @@ const fr = {
|
||||
}
|
||||
},
|
||||
resultat: {
|
||||
bravo: 'Bravo !',
|
||||
score: 'Score',
|
||||
points: 'points',
|
||||
distance: 'Distance',
|
||||
km: 'km',
|
||||
@@ -88,7 +92,6 @@ const fr = {
|
||||
telecharger: 'Télécharger l’image',
|
||||
taPosition: 'Ta position',
|
||||
positionReelle: 'Position réelle',
|
||||
manche: 'Manche',
|
||||
titreSeed: 'Défi — seed',
|
||||
copierLien: 'Copier le lien du défi',
|
||||
lienCopie: 'Lien copié !'
|
||||
@@ -109,8 +112,7 @@ const fr = {
|
||||
},
|
||||
micro: {
|
||||
bravo: 'Bravo !',
|
||||
kiteSaYe: 'Kité sa ye ?',
|
||||
pwenBlinde: 'Pwen blindé'
|
||||
kiteSaYe: 'Kité sa ye ?'
|
||||
},
|
||||
langue: {
|
||||
fr: 'Français',
|
||||
|
||||
@@ -19,6 +19,8 @@ const gcf: Dict = {
|
||||
lieuDesc: 'On lari, on bodlanmè, on fowé… chwé kote ou yé.',
|
||||
defi: 'Défi 5 rounds',
|
||||
defiDesc: '5 koté youn dèyè ròt, moniman épi plas mélanjé.',
|
||||
street: 'An lari a',
|
||||
streetDesc: 'Mache nan on lari an foto 360° é chwé komin-lan.',
|
||||
explorer: 'Aprann',
|
||||
explorerDesc: 'Flanné asou kat-la é li fich Wikipédia yo. San pwen.'
|
||||
},
|
||||
@@ -42,6 +44,10 @@ const gcf: Dict = {
|
||||
indicesRestants: 'endis ki rété',
|
||||
plusDIndice: 'Pa ni endis ankò',
|
||||
poserMarqueur: 'Kwiké asou kat-la pou mété makò-a',
|
||||
streetChargement: 'Nou ka chajé vi lari-a…',
|
||||
streetErreur: 'Nou pa rivé chajé foto Mapillary-la. Éséyé ankò oben pasé o koté swivan.',
|
||||
streetToken: 'Vi lari-a pa disponib : konfigirasyon Mapillary-la manké.',
|
||||
streetAriaLabel: 'Vi lari-a. Flèch yo pou avansé, glissé pou gadté toutò.',
|
||||
round: 'Mannèk',
|
||||
sur: 'asou',
|
||||
difficulte: {
|
||||
@@ -52,8 +58,6 @@ const gcf: Dict = {
|
||||
}
|
||||
},
|
||||
resultat: {
|
||||
bravo: 'Bravo !',
|
||||
score: 'Pwen',
|
||||
points: 'pwen',
|
||||
distance: 'Distans',
|
||||
km: 'km',
|
||||
@@ -90,7 +94,6 @@ const gcf: Dict = {
|
||||
telecharger: 'Téléchajé foto-a',
|
||||
taPosition: 'Pozisyon ou',
|
||||
positionReelle: 'Rèl pozisyon-an',
|
||||
manche: 'Mannèk',
|
||||
titreSeed: 'Défi — seed',
|
||||
copierLien: 'Kopié lyen défi-a',
|
||||
lienCopie: 'Lyen kopié !'
|
||||
@@ -111,8 +114,7 @@ const gcf: Dict = {
|
||||
},
|
||||
micro: {
|
||||
bravo: 'Bravo !',
|
||||
kiteSaYe: 'Kité sa ye ?',
|
||||
pwenBlinde: 'Pwen blindé'
|
||||
kiteSaYe: 'Kité sa ye ?'
|
||||
},
|
||||
langue: {
|
||||
fr: 'Français',
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
import { dureeMs, easeSyncope, prefersReducedMotion } from './tokens';
|
||||
|
||||
/**
|
||||
* Action `use:compte={cible}` — count-up de 0 (ou de la valeur précédente)
|
||||
* vers la cible, en `--dur-compte` avec easing syncopé. L'écriture se fait
|
||||
* directement dans le DOM via rAF : jamais d'état réactif par frame.
|
||||
*
|
||||
* Reduced-motion : la valeur finale est écrite immédiatement. Le markup doit
|
||||
* contenir la valeur finale (état SSR / premier rendu) et être doublé d'un
|
||||
* équivalent non animé pour les lecteurs d'écran (le span animé porte
|
||||
* aria-hidden="true" chez l'appelant).
|
||||
*/
|
||||
export function compte(node: HTMLElement, cible: number) {
|
||||
let raf: number | null = null;
|
||||
let affiche = 0;
|
||||
|
||||
function ecrire(valeur: number): void {
|
||||
affiche = valeur;
|
||||
node.textContent = String(valeur);
|
||||
}
|
||||
|
||||
function jouer(vers: number): void {
|
||||
if (raf !== null) {
|
||||
cancelAnimationFrame(raf);
|
||||
raf = null;
|
||||
}
|
||||
const depuis = affiche;
|
||||
const duree = dureeMs('--dur-compte');
|
||||
if (prefersReducedMotion() || vers === depuis || duree <= 0) {
|
||||
ecrire(vers);
|
||||
return;
|
||||
}
|
||||
const t0 = performance.now();
|
||||
const tick = (t: number): void => {
|
||||
const p = Math.min(1, (t - t0) / duree);
|
||||
ecrire(Math.round(depuis + (vers - depuis) * easeSyncope(p)));
|
||||
if (p < 1) {
|
||||
raf = requestAnimationFrame(tick);
|
||||
} else {
|
||||
raf = null;
|
||||
}
|
||||
};
|
||||
raf = requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
jouer(cible);
|
||||
|
||||
return {
|
||||
update(nouvelleCible: number) {
|
||||
jouer(nouvelleCible);
|
||||
},
|
||||
destroy() {
|
||||
if (raf !== null) cancelAnimationFrame(raf);
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* Action `use:reveal` — ajoute la classe `in` à l'entrée dans le viewport.
|
||||
*
|
||||
* Variante SSR de la brique o-k-i.net : l'état caché initial est rendu côté
|
||||
* serveur (`data-reveal` + `--d` directement dans le markup), et n'est actif
|
||||
* que sous `html.js` (classe posée par le script de app.html) ET
|
||||
* `prefers-reduced-motion: no-preference` (media query dans oki.css). Sans JS
|
||||
* ou en reduced-motion, le contenu est intégralement visible.
|
||||
*
|
||||
* @param actif false = pas d'observation (ex. CarteRegions sans cascade)
|
||||
*/
|
||||
export function reveal(node: Element, actif: boolean = true) {
|
||||
let observer: IntersectionObserver | null = null;
|
||||
|
||||
function observerNoeud(actifCourant: boolean): void {
|
||||
observer?.disconnect();
|
||||
observer = null;
|
||||
if (!actifCourant) return;
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const entry of entries) {
|
||||
if (entry.isIntersecting) {
|
||||
node.classList.add('in');
|
||||
observer?.disconnect();
|
||||
observer = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ threshold: 0.15, rootMargin: '0px 0px -5% 0px' }
|
||||
);
|
||||
observer.observe(node);
|
||||
}
|
||||
|
||||
observerNoeud(actif);
|
||||
|
||||
return {
|
||||
update(nouvelActif: boolean) {
|
||||
observerNoeud(nouvelActif);
|
||||
},
|
||||
destroy() {
|
||||
observer?.disconnect();
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
/** Gate unique prefers-reduced-motion (playbook §6). */
|
||||
export function prefersReducedMotion(): boolean {
|
||||
return browser && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Stagger syncopé de marque OKI (3+3+2) — charte §3.
|
||||
* Délais en ms pour l'index donné (cycle de 8 éléments).
|
||||
*/
|
||||
const SYNCOPATED_DELAYS = [0, 120, 300, 360, 600, 660, 900, 960];
|
||||
|
||||
export function syncopatedDelay(index: number): number {
|
||||
const cycle = Math.floor(index / 8);
|
||||
return SYNCOPATED_DELAYS[index % 8] + cycle * 1200;
|
||||
}
|
||||
|
||||
/**
|
||||
* Lit une durée depuis les tokens CSS de oki.css (--dur-*) — les valeurs ne
|
||||
* sont jamais dupliquées côté appelant. Client uniquement (les transitions
|
||||
* Svelte et les rAF ne courent de toute façon pas côté serveur).
|
||||
* Retourne 0 si le token est absent : l'animation se replie alors en
|
||||
* application immédiate, sans valeur de secours hardcodée.
|
||||
*/
|
||||
export function dureeMs(nom: string): number {
|
||||
if (!browser) return 0;
|
||||
const brut = getComputedStyle(document.documentElement).getPropertyValue(nom).trim();
|
||||
if (brut.endsWith('ms')) return Number.parseFloat(brut) || 0;
|
||||
if (brut.endsWith('s')) return (Number.parseFloat(brut) || 0) * 1000;
|
||||
return 0;
|
||||
}
|
||||
|
||||
/** cubic-bezier(0.22, 1, 0.36, 1) — --ease-ka : attaque franche, longue tenue. */
|
||||
export function easeKa(x: number): number {
|
||||
return 1 - Math.pow(1 - x, 5);
|
||||
}
|
||||
|
||||
/** cubic-bezier(0.65, 0, 0.35, 1) — --ease-syncope : symétrique, urgent. */
|
||||
export function easeSyncope(x: number): number {
|
||||
return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
|
||||
import { dureeMs, prefersReducedMotion } from './tokens';
|
||||
|
||||
/**
|
||||
* Transitions d'état du jeu — enrobent les transitions natives Svelte avec :
|
||||
* 1. des durées lues depuis les tokens CSS (--dur-*, jamais dupliquées) ;
|
||||
* 2. la gate prefers-reduced-motion (durée 0 → état final immédiat).
|
||||
*/
|
||||
|
||||
/** Fondu simple à la durée `--dur-mesure`. */
|
||||
export function fonduMesure(node: Element, params: FadeParams = {}) {
|
||||
if (prefersReducedMotion()) return fade(node, { ...params, duration: 0 });
|
||||
return fade(node, { duration: dureeMs('--dur-mesure'), ...params });
|
||||
}
|
||||
|
||||
/** Montée courte (translateY + fondu) à la durée `--dur-mesure`. */
|
||||
export function monteeMesure(node: Element, params: FlyParams = {}) {
|
||||
if (prefersReducedMotion()) return fly(node, { ...params, duration: 0, y: 0 });
|
||||
return fly(node, { duration: dureeMs('--dur-mesure'), y: 14, ...params });
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { t } from '$lib/i18n/store.svelte';
|
||||
import { defi } from '$lib/stores/defi.svelte';
|
||||
|
||||
/** Génère une image canvas téléchargeable : score total + manches du défi. */
|
||||
export function partager(): void {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 1080;
|
||||
canvas.height = 1080;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
// Fond sable + bandeau vert profond
|
||||
ctx.fillStyle = '#f5efe2';
|
||||
ctx.fillRect(0, 0, 1080, 1080);
|
||||
ctx.fillStyle = '#0b3d2e';
|
||||
ctx.fillRect(0, 0, 1080, 240);
|
||||
|
||||
ctx.fillStyle = '#fffdf8';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.font = '800 96px system-ui, sans-serif';
|
||||
ctx.fillText('JWE', 540, 130);
|
||||
ctx.font = '600 44px system-ui, sans-serif';
|
||||
ctx.fillText(t().modes.defi, 540, 200);
|
||||
|
||||
// Score total
|
||||
ctx.fillStyle = '#0b3d2e';
|
||||
ctx.font = '800 150px system-ui, sans-serif';
|
||||
ctx.fillText(`${defi.total}`, 540, 420);
|
||||
ctx.fillStyle = '#5a6b62';
|
||||
ctx.font = '500 40px system-ui, sans-serif';
|
||||
ctx.fillText(t().defi.scoreTotal, 540, 480);
|
||||
|
||||
// Manches : lieu, région, score
|
||||
let y = 580;
|
||||
for (const [i, m] of defi.manches.entries()) {
|
||||
ctx.fillStyle = i % 2 === 0 ? '#e3efe7' : '#f5efe2';
|
||||
ctx.fillRect(90, y - 44, 900, 74);
|
||||
ctx.fillStyle = '#22302a';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.font = '600 34px system-ui, sans-serif';
|
||||
ctx.fillText(`${i + 1}. ${m.result.nom}`, 120, y);
|
||||
ctx.fillStyle = '#17624a';
|
||||
ctx.font = '500 30px system-ui, sans-serif';
|
||||
ctx.fillText(t().regions[m.result.region], 120, y + 34);
|
||||
ctx.textAlign = 'right';
|
||||
ctx.fillStyle = '#0b3d2e';
|
||||
ctx.font = '800 40px system-ui, sans-serif';
|
||||
ctx.fillText(`${m.result.score}`, 960, y + 8);
|
||||
y += 92;
|
||||
}
|
||||
|
||||
ctx.fillStyle = '#5a6b62';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.font = '500 30px system-ui, sans-serif';
|
||||
ctx.fillText('labola.o-k-i.net', 540, 1010);
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = canvas.toDataURL('image/png');
|
||||
a.download = 'jwe-defi.png';
|
||||
a.click();
|
||||
}
|
||||
@@ -0,0 +1,602 @@
|
||||
[
|
||||
{
|
||||
"id": "st-01",
|
||||
"nom": "Rue Laurence Valmy, Pointe-à-Pitre",
|
||||
"nom_creole": "Lari Pointe-à-Pitre",
|
||||
"region": "GUADELOUPE",
|
||||
"commune": "Pointe-à-Pitre",
|
||||
"coordonnees": {
|
||||
"lat": 16.244455939903,
|
||||
"lon": -61.530342688698
|
||||
},
|
||||
"difficulte": "MOYEN",
|
||||
"mapillary_id": "2941939632687980",
|
||||
"credit": {
|
||||
"username": "cartophyl",
|
||||
"captured_at": "2015-07-07"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q335322",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île papillon, aile droite"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Port de commerce principal de l’archipel"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 2.78
|
||||
},
|
||||
{
|
||||
"id": "st-02",
|
||||
"nom": "Rue Achille René Boisneuf, Les Abymes",
|
||||
"nom_creole": "Lari Les Abymes",
|
||||
"region": "GUADELOUPE",
|
||||
"commune": "Les Abymes",
|
||||
"coordonnees": {
|
||||
"lat": 16.269078645766,
|
||||
"lon": -61.506631441162
|
||||
},
|
||||
"difficulte": "MOYEN",
|
||||
"mapillary_id": "306781020957650",
|
||||
"credit": {
|
||||
"username": "ratzillas",
|
||||
"captured_at": "2015-07-17"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q13636",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île papillon, aile droite"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Commune la plus peuplée de l’archipel"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 70.43
|
||||
},
|
||||
{
|
||||
"id": "st-03",
|
||||
"nom": "Place Renovation le Bourg, Le Gosier",
|
||||
"nom_creole": "Lari Le Gosier",
|
||||
"region": "GUADELOUPE",
|
||||
"commune": "Le Gosier",
|
||||
"coordonnees": {
|
||||
"lat": 16.205608856053,
|
||||
"lon": -61.492154911837
|
||||
},
|
||||
"difficulte": "DIFFICILE",
|
||||
"mapillary_id": "919062132219342",
|
||||
"credit": {
|
||||
"username": "kaartcam",
|
||||
"captured_at": "2016-01-02"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q918874",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île papillon, aile droite"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Station balnéaire au sud de la Grande-Terre"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 45.75
|
||||
},
|
||||
{
|
||||
"id": "st-04",
|
||||
"nom": "Rue Emmanuel Robinet, Sainte-Anne",
|
||||
"nom_creole": "Lari Sainte-Anne",
|
||||
"region": "GUADELOUPE",
|
||||
"commune": "Sainte-Anne",
|
||||
"coordonnees": {
|
||||
"lat": 16.223896372356,
|
||||
"lon": -61.384172350192
|
||||
},
|
||||
"difficulte": "DIFFICILE",
|
||||
"mapillary_id": "956408765176680",
|
||||
"credit": {
|
||||
"username": "ratzillas",
|
||||
"captured_at": "2019-07-15"
|
||||
},
|
||||
"is_pano": true,
|
||||
"wikidata_id": "Q386243",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île papillon, aile droite"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Plages au sud de la Grande-Terre"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 80.96
|
||||
},
|
||||
{
|
||||
"id": "st-05",
|
||||
"nom": "Route des Esclaves, Basse-Terre",
|
||||
"nom_creole": "Lari Basse-Terre",
|
||||
"region": "GUADELOUPE",
|
||||
"commune": "Basse-Terre",
|
||||
"coordonnees": {
|
||||
"lat": 15.992959593433,
|
||||
"lon": -61.730437544596
|
||||
},
|
||||
"difficulte": "EXPERT",
|
||||
"mapillary_id": "212605717097536",
|
||||
"credit": {
|
||||
"username": "kaartcam",
|
||||
"captured_at": "2016-01-04"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q167024",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île papillon, aile gauche"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Chef-lieu au pied du volcan"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 4.5
|
||||
},
|
||||
{
|
||||
"id": "st-06",
|
||||
"nom": "Rue Victor Sévère, Fort-de-France",
|
||||
"nom_creole": "Lari Fort-de-France",
|
||||
"region": "MARTINIQUE",
|
||||
"commune": "Fort-de-France",
|
||||
"coordonnees": {
|
||||
"lat": 14.60615582786,
|
||||
"lon": -61.069885806689
|
||||
},
|
||||
"difficulte": "MOYEN",
|
||||
"mapillary_id": "152801196814796",
|
||||
"credit": {
|
||||
"username": "kaartcam",
|
||||
"captured_at": "2015-12-31"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q81621",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île aux fleurs"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Chef-lieu, sur une grande baie"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 44.04
|
||||
},
|
||||
{
|
||||
"id": "st-07",
|
||||
"nom": "Rue des Barrières, Le Lamentin",
|
||||
"nom_creole": "Lari Le Lamentin",
|
||||
"region": "MARTINIQUE",
|
||||
"commune": "Le Lamentin",
|
||||
"coordonnees": {
|
||||
"lat": 14.615969225175,
|
||||
"lon": -60.999773265489
|
||||
},
|
||||
"difficulte": "MOYEN",
|
||||
"mapillary_id": "1120779875836768",
|
||||
"credit": {
|
||||
"username": "Caramel",
|
||||
"captured_at": "2024-04-29"
|
||||
},
|
||||
"is_pano": true,
|
||||
"wikidata_id": "Q947069",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île aux fleurs"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Banlieue du chef-lieu, zone aéroportuaire"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 62.73
|
||||
},
|
||||
{
|
||||
"id": "st-08",
|
||||
"nom": "Rue Gabriel Péri, Saint-Pierre",
|
||||
"nom_creole": "Lari Saint-Pierre",
|
||||
"region": "MARTINIQUE",
|
||||
"commune": "Saint-Pierre",
|
||||
"coordonnees": {
|
||||
"lat": 14.738699893002,
|
||||
"lon": -61.176412948112
|
||||
},
|
||||
"difficulte": "DIFFICILE",
|
||||
"mapillary_id": "1299527321706804",
|
||||
"credit": {
|
||||
"username": "jeremylavarenne",
|
||||
"captured_at": "2025-08-31"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q589980",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île aux fleurs, côte caraïbe nord"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Ville détruite par une éruption en 1902"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 38.69
|
||||
},
|
||||
{
|
||||
"id": "st-09",
|
||||
"nom": "Rue Florent Holo, Le François",
|
||||
"nom_creole": "Lari Le François",
|
||||
"region": "MARTINIQUE",
|
||||
"commune": "Le François",
|
||||
"coordonnees": {
|
||||
"lat": 14.615696752255,
|
||||
"lon": -60.902520891662
|
||||
},
|
||||
"difficulte": "DIFFICILE",
|
||||
"mapillary_id": "4102521129805870",
|
||||
"credit": {
|
||||
"username": "kaartcam",
|
||||
"captured_at": "2016-01-01"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q282944",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île aux fleurs, côte atlantique"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Bourg face aux îlets du sud"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 54.43
|
||||
},
|
||||
{
|
||||
"id": "st-10",
|
||||
"nom": "Passage des Fleurs, Sainte-Marie",
|
||||
"nom_creole": "Lari Sainte-Marie",
|
||||
"region": "MARTINIQUE",
|
||||
"commune": "Sainte-Marie",
|
||||
"coordonnees": {
|
||||
"lat": 14.783766654906,
|
||||
"lon": -60.995666311379
|
||||
},
|
||||
"difficulte": "EXPERT",
|
||||
"mapillary_id": "131479329019761",
|
||||
"credit": {
|
||||
"username": "kaartcam",
|
||||
"captured_at": "2015-12-31"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q1758414",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île aux fleurs, côte atlantique nord"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Musée de la banane et rhum"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 44.65
|
||||
},
|
||||
{
|
||||
"id": "st-11",
|
||||
"nom": "Rue Francois Arago, Cayenne",
|
||||
"nom_creole": "Lari Cayenne",
|
||||
"region": "GUYANE",
|
||||
"commune": "Cayenne",
|
||||
"coordonnees": {
|
||||
"lat": 4.9388185867966,
|
||||
"lon": -52.331808101487
|
||||
},
|
||||
"difficulte": "MOYEN",
|
||||
"mapillary_id": "259270559222687",
|
||||
"credit": {
|
||||
"username": "kaartcam",
|
||||
"captured_at": "2016-08-18"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q44401",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Terre de forêt amazonienne"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Chef-lieu, sur l’île du même nom"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 25.52
|
||||
},
|
||||
{
|
||||
"id": "st-12",
|
||||
"nom": "Rue de l’Odéon, Kourou",
|
||||
"nom_creole": "Lari Kourou",
|
||||
"region": "GUYANE",
|
||||
"commune": "Kourou",
|
||||
"coordonnees": {
|
||||
"lat": 5.1615176393394,
|
||||
"lon": -52.643325658226
|
||||
},
|
||||
"difficulte": "DIFFICILE",
|
||||
"mapillary_id": "198127629404270",
|
||||
"credit": {
|
||||
"username": "hacp",
|
||||
"captured_at": "2022-09-07"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q273312",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Terre de forêt amazonienne"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Ville des fusées"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 2289.2
|
||||
},
|
||||
{
|
||||
"id": "st-13",
|
||||
"nom": "Avenue Albert Sarraut, Saint-Laurent-du-Maroni",
|
||||
"nom_creole": "Lari Saint-Laurent-du-Maroni",
|
||||
"region": "GUYANE",
|
||||
"commune": "Saint-Laurent-du-Maroni",
|
||||
"coordonnees": {
|
||||
"lat": 5.5060375294565,
|
||||
"lon": -54.027135700884
|
||||
},
|
||||
"difficulte": "DIFFICILE",
|
||||
"mapillary_id": "147142287390967",
|
||||
"credit": {
|
||||
"username": "pma",
|
||||
"captured_at": "2021-01-18"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q319959",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Terre de forêt amazonienne, à l’ouest"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Ville du fleuve Maroni, ancien bagne"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 4320.77
|
||||
},
|
||||
{
|
||||
"id": "st-14",
|
||||
"nom": "Rue Maurice BOCS, Matoury",
|
||||
"nom_creole": "Lari Matoury",
|
||||
"region": "GUYANE",
|
||||
"commune": "Matoury",
|
||||
"coordonnees": {
|
||||
"lat": 4.8496318387901,
|
||||
"lon": -52.328783153736
|
||||
},
|
||||
"difficulte": "EXPERT",
|
||||
"mapillary_id": "582210316504280",
|
||||
"credit": {
|
||||
"username": "kaartcam",
|
||||
"captured_at": "2016-08-18"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q816739",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Terre de forêt amazonienne"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Banlieue sud du chef-lieu"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 146.68
|
||||
},
|
||||
{
|
||||
"id": "st-15",
|
||||
"nom": "Rue de la CANNE À SUCRE, Remire-Montjoly",
|
||||
"nom_creole": "Lari Remire-Montjoly",
|
||||
"region": "GUYANE",
|
||||
"commune": "Remire-Montjoly",
|
||||
"coordonnees": {
|
||||
"lat": 4.9037937340773,
|
||||
"lon": -52.273335996076
|
||||
},
|
||||
"difficulte": "EXPERT",
|
||||
"mapillary_id": "247810083801809",
|
||||
"credit": {
|
||||
"username": "kaartcam",
|
||||
"captured_at": "2016-08-18"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q996222",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Terre de forêt amazonienne"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Plages à l’est du chef-lieu"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 46.3
|
||||
},
|
||||
{
|
||||
"id": "st-16",
|
||||
"nom": "Rue de Paris, Saint-Denis",
|
||||
"nom_creole": "Lari Saint-Denis",
|
||||
"region": "REUNION",
|
||||
"commune": "Saint-Denis",
|
||||
"coordonnees": {
|
||||
"lat": -20.8832861,
|
||||
"lon": 55.4501
|
||||
},
|
||||
"difficulte": "MOYEN",
|
||||
"mapillary_id": "2262788723930767",
|
||||
"credit": {
|
||||
"username": "AllWays360",
|
||||
"captured_at": "2022-10-06"
|
||||
},
|
||||
"is_pano": true,
|
||||
"wikidata_id": "Q47045",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île intense de l’océan Indien"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Chef-lieu, au nord"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 142.33
|
||||
},
|
||||
{
|
||||
"id": "st-17",
|
||||
"nom": "Rue du Cimetiere, Saint-Pierre",
|
||||
"nom_creole": "Lari Saint-Pierre",
|
||||
"region": "REUNION",
|
||||
"commune": "Saint-Pierre",
|
||||
"coordonnees": {
|
||||
"lat": -21.338988428747,
|
||||
"lon": 55.478221620359
|
||||
},
|
||||
"difficulte": "MOYEN",
|
||||
"mapillary_id": "143202321798356",
|
||||
"credit": {
|
||||
"username": "sigstpierre",
|
||||
"captured_at": "2022-11-09"
|
||||
},
|
||||
"is_pano": true,
|
||||
"wikidata_id": "Q249884",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île intense de l’océan Indien"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Capitale du sud, front de mer animé"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 96.82
|
||||
},
|
||||
{
|
||||
"id": "st-18",
|
||||
"nom": "Rue Aristide Briand, Le Tampon",
|
||||
"nom_creole": "Lari Le Tampon",
|
||||
"region": "REUNION",
|
||||
"commune": "Le Tampon",
|
||||
"coordonnees": {
|
||||
"lat": -21.277675635385,
|
||||
"lon": 55.514338556402
|
||||
},
|
||||
"difficulte": "DIFFICILE",
|
||||
"mapillary_id": "1382811445417165",
|
||||
"credit": {
|
||||
"username": "vandecasteele",
|
||||
"captured_at": "2019-12-16"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q13648",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île intense de l’océan Indien"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Commune des hauts, dans le sud"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 182.09
|
||||
},
|
||||
{
|
||||
"id": "st-19",
|
||||
"nom": "Rue Elie Eudor, Saint-Paul",
|
||||
"nom_creole": "Lari Saint-Paul",
|
||||
"region": "REUNION",
|
||||
"commune": "Saint-Paul",
|
||||
"coordonnees": {
|
||||
"lat": -21.008621906549,
|
||||
"lon": 55.271355918998
|
||||
},
|
||||
"difficulte": "DIFFICILE",
|
||||
"mapillary_id": "928324514646684",
|
||||
"credit": {
|
||||
"username": "sogefi",
|
||||
"captured_at": "2018-10-14"
|
||||
},
|
||||
"is_pano": false,
|
||||
"wikidata_id": "Q316887",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île intense de l’océan Indien"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Côte ouest, premier site de peuplement"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 241.64
|
||||
},
|
||||
{
|
||||
"id": "st-20",
|
||||
"nom": "Ccal de la Republique, Saint-André",
|
||||
"nom_creole": "Lari Saint-André",
|
||||
"region": "REUNION",
|
||||
"commune": "Saint-André",
|
||||
"coordonnees": {
|
||||
"lat": -20.962268395233,
|
||||
"lon": 55.651364657007
|
||||
},
|
||||
"difficulte": "EXPERT",
|
||||
"mapillary_id": "519625869420978",
|
||||
"credit": {
|
||||
"username": "vandecasteele",
|
||||
"captured_at": "2019-06-28"
|
||||
},
|
||||
"is_pano": true,
|
||||
"wikidata_id": "Q1649370",
|
||||
"indices": [
|
||||
{
|
||||
"niveau": 1,
|
||||
"texte": "Île intense de l’océan Indien"
|
||||
},
|
||||
{
|
||||
"niveau": 2,
|
||||
"texte": "Côte est, pays de la canne"
|
||||
}
|
||||
],
|
||||
"aire_commune_km2": 54.66
|
||||
}
|
||||
]
|
||||
@@ -1,4 +1,5 @@
|
||||
import rawLieux from './data/lieux.json';
|
||||
import rawStreet from './data/street.json';
|
||||
import type {
|
||||
Categorie,
|
||||
Difficulte,
|
||||
@@ -6,10 +7,15 @@ import type {
|
||||
GuessResult,
|
||||
Lieu,
|
||||
Region,
|
||||
RoundPlace
|
||||
RoundPlace,
|
||||
StreetLieu
|
||||
} from '$lib/types';
|
||||
|
||||
const lieux = rawLieux as Lieu[];
|
||||
const street = rawStreet as StreetLieu[];
|
||||
|
||||
/** Lieu « scorable » : les deux corpus partagent les champs du scoring. */
|
||||
type Scoreable = Lieu | StreetLieu;
|
||||
|
||||
const REGIONS: Region[] = ['GUADELOUPE', 'MARTINIQUE', 'GUYANE', 'REUNION'];
|
||||
const CATEGORIES: Categorie[] = ['MONUMENT', 'LIEU'];
|
||||
@@ -43,7 +49,13 @@ function parseCategorie(value: string | null): Categorie | null {
|
||||
return value && CATEGORIES.includes(value as Categorie) ? (value as Categorie) : null;
|
||||
}
|
||||
|
||||
export function getLieuById(id: string): Lieu | undefined {
|
||||
/** Recherche dans les deux corpus (photos classiques + street Mapillary). */
|
||||
export function getLieuById(id: string): Scoreable | undefined {
|
||||
return lieux.find((l) => l.id === id) ?? street.find((l) => l.id === id);
|
||||
}
|
||||
|
||||
/** Recherche limitée au corpus photo classique (défi, proxy photo). */
|
||||
export function getLieuPhotoById(id: string): Lieu | undefined {
|
||||
return lieux.find((l) => l.id === id);
|
||||
}
|
||||
|
||||
@@ -74,6 +86,28 @@ export function getRandomLieu(options: {
|
||||
return pool[Math.floor(Math.random() * pool.length)];
|
||||
}
|
||||
|
||||
/** Sélection aléatoire d'un lieu street (mode « An lari a », corpus Mapillary). */
|
||||
export function getRandomStreet(options: {
|
||||
region?: string | null;
|
||||
exclude?: string | null;
|
||||
}): StreetLieu | null {
|
||||
const region = parseRegion(options.region ?? null);
|
||||
const excluded = new Set(
|
||||
(options.exclude ?? '')
|
||||
.split(',')
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean)
|
||||
);
|
||||
let pool = street.filter((l) => !excluded.has(l.id));
|
||||
if (region) pool = pool.filter((l) => l.region === region);
|
||||
// Si tout a été exclu, on réessaie sans les exclusions (le jeu doit continuer).
|
||||
if (pool.length === 0) {
|
||||
pool = region ? street.filter((l) => l.region === region) : street;
|
||||
}
|
||||
if (pool.length === 0) return null;
|
||||
return pool[Math.floor(Math.random() * pool.length)];
|
||||
}
|
||||
|
||||
/** Largeurs (px) servies par le proxy photo /api/photo/[id]?w=. */
|
||||
export const PHOTO_LARGEURS = [400, 800, 1200] as const;
|
||||
|
||||
@@ -103,6 +137,27 @@ export function sanitizeRound(lieu: Lieu): RoundPlace {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Anti-triche, mode street : ne garde que les champs publics.
|
||||
* Seul `mapillaryId` part au client (la visionneuse doit bien appeler Mapillary) ;
|
||||
* coords/commune/région/wikidata_id ne partent jamais avant le guess.
|
||||
* Limitation documentée (architecture.md §10) : l'image_key est publique côté
|
||||
* Mapillary, un joueur techniquement équipé peut retrouver la position — même
|
||||
* propriété que GeoGuessr/Street View, acceptable en solo sans leaderboard.
|
||||
*/
|
||||
export function sanitizeRoundStreet(lieu: StreetLieu): RoundPlace {
|
||||
return {
|
||||
id: lieu.id,
|
||||
nom: lieu.nom,
|
||||
nom_creole: lieu.nom_creole,
|
||||
categorie: 'LIEU',
|
||||
difficulte: lieu.difficulte,
|
||||
mapillaryId: lieu.mapillary_id,
|
||||
credit: `© ${lieu.credit.username} / Mapillary (CC BY-SA 4.0)`,
|
||||
indices: lieu.indices
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Rayon effectif (km) de la courbe de score (audit A1).
|
||||
* Les communes guyanaises sont immenses (Saint-Laurent-du-Maroni ≈ 4 321 km²) :
|
||||
@@ -111,7 +166,7 @@ export function sanitizeRound(lieu: Lieu): RoundPlace {
|
||||
* au moins celui du disque de même aire que la commune : sqrt(aire / π).
|
||||
* Champ optionnel : sans lui, on retombe sur le rayon de difficulté.
|
||||
*/
|
||||
export function rayonEffectifKm(lieu: Lieu): number {
|
||||
export function rayonEffectifKm(lieu: Scoreable): number {
|
||||
const base = RAYONS[lieu.difficulte];
|
||||
const aire = lieu.aire_commune_km2;
|
||||
if (typeof aire === 'number' && Number.isFinite(aire) && aire > 0) {
|
||||
@@ -126,7 +181,7 @@ export function rayonEffectifKm(lieu: Lieu): number {
|
||||
* bonus temps ≤ +20 % ; total plafonné à 5000.
|
||||
*/
|
||||
export function scoreGuess(
|
||||
lieu: Lieu,
|
||||
lieu: Scoreable,
|
||||
guess: { lat: number; lon: number },
|
||||
hintsUsed: number,
|
||||
timeMs?: number
|
||||
@@ -154,7 +209,7 @@ export function scoreGuess(
|
||||
}
|
||||
|
||||
/** Réponse « Passer » : la vérité est révélée, score 0, pas de distance. */
|
||||
export function skipResult(lieu: Lieu): GuessResult {
|
||||
export function skipResult(lieu: Scoreable): GuessResult {
|
||||
return {
|
||||
distanceKm: null,
|
||||
score: 0,
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
/** Constantes du site — domaine public de production (cf. jwe_ynh/manifest.toml). */
|
||||
export const SITE_URL = 'https://jwe.o-k-i.net';
|
||||
export const SITE_NAME = 'JWE';
|
||||
@@ -0,0 +1,514 @@
|
||||
/* Styles partagés des écrans de jeu : /jeu/[mode] et /defi/[seed].
|
||||
Layout « app » verrouillé au viewport (100dvh via +layout) : la page ne
|
||||
scrolle jamais, seuls les panneaux internes défilent. Mobile-first. */
|
||||
|
||||
.jeu {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.etat {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
/* — Split photo | carte — */
|
||||
.split {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Mobile : la photo s'adapte (plafond ~42dvh), la carte garde au minimum
|
||||
35dvh utiles + la barre de sauts (~3,5rem). */
|
||||
.panneau-photo {
|
||||
position: relative; /* ancre du panneau d'indices */
|
||||
flex: 1 1 0;
|
||||
min-height: 5rem;
|
||||
max-height: 42dvh;
|
||||
}
|
||||
|
||||
.panneau-carte {
|
||||
position: relative; /* ancre de la puce de statut et de l'aide */
|
||||
flex: 1 1 0;
|
||||
min-height: calc(35dvh + 3.5rem);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.panneau-carte > * {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* État résultat : le panneau photo devient une fiche scrollable interne. */
|
||||
.split.resultat .panneau-photo {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.split.resultat .panneau-carte {
|
||||
min-height: 10rem;
|
||||
}
|
||||
|
||||
.resultat-scroll {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background: var(--oki-blanc);
|
||||
border-radius: var(--oki-radius);
|
||||
box-shadow: var(--oki-ombre);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* — Puce de statut unique (manche, seed, minuteur) : haut-droite, une ligne.
|
||||
Aucun élément absolu au-dessus des zones interactives : les badges sont
|
||||
décoratifs, les clics les traversent. — */
|
||||
.statut {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.4rem;
|
||||
max-width: calc(100% - 1rem);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.badge-manche {
|
||||
background: rgba(255, 253, 248, 0.94);
|
||||
color: var(--oki-vert);
|
||||
border-radius: 999px;
|
||||
padding: 0.25rem 0.8rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--oki-ombre);
|
||||
}
|
||||
|
||||
/* Seed visible mais discrète : les joueurs vérifient qu'ils jouent le même défi */
|
||||
.badge-seed {
|
||||
background: rgba(255, 253, 248, 0.8);
|
||||
color: var(--oki-encre-doux);
|
||||
border-radius: 999px;
|
||||
padding: 0.15rem 0.7rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--oki-ombre);
|
||||
}
|
||||
|
||||
.badge-timer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* — Indices : panneau scrollable interne, en surimpression de la photo
|
||||
(zone non interactive) — jamais au-dessus de la carte. — */
|
||||
.indices {
|
||||
position: absolute;
|
||||
left: 0.4rem;
|
||||
right: 0.4rem;
|
||||
bottom: 0.4rem;
|
||||
z-index: 4;
|
||||
max-height: calc(100% - 0.8rem);
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: rgba(255, 253, 248, 0.96);
|
||||
border-radius: var(--oki-radius-petit);
|
||||
box-shadow: var(--oki-ombre);
|
||||
}
|
||||
|
||||
.indice {
|
||||
margin: 0.25rem 0;
|
||||
background: var(--oki-bleu-doux);
|
||||
border-left: 4px solid var(--oki-bleu);
|
||||
border-radius: var(--oki-radius-petit);
|
||||
padding: 0.5rem 0.8rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* — Aide « poser le marqueur » : pastille décorative sur la carte, les clics
|
||||
la traversent (pointer-events: none). Sur mobile elle flotte au bas du
|
||||
canevas, juste au-dessus de la barre de sauts (~3,65rem) ; sur desktop elle
|
||||
est décalée à droite pour ne pas chevaucher les sauts en overlay bas-gauche. — */
|
||||
.aide-carte {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 3.9rem; /* 48px de sauts + espacements, arrondi au-dessus */
|
||||
transform: translateX(-50%);
|
||||
z-index: 3;
|
||||
margin: 0;
|
||||
padding: 0.3rem 0.9rem;
|
||||
max-width: calc(100% - 5rem);
|
||||
background: rgba(255, 253, 248, 0.92);
|
||||
color: var(--oki-encre-doux);
|
||||
border-radius: 999px;
|
||||
box-shadow: var(--oki-ombre);
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* — Barre d'actions : en bas du flux (la page ne scrolle pas), opaque,
|
||||
au-dessus de la carte grâce au z-index explicite. — */
|
||||
.barre-actions {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.6rem;
|
||||
padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
|
||||
background: var(--oki-blanc);
|
||||
border-top: 1px solid var(--oki-sable-fonce);
|
||||
}
|
||||
|
||||
.barre-actions .btn {
|
||||
min-height: 48px; /* cible tactile */
|
||||
}
|
||||
|
||||
.actions-secondaires {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.actions-secondaires .btn {
|
||||
padding: 0.6rem 0.9rem;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.penalite {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.valider {
|
||||
flex: 0 1 auto;
|
||||
padding: 0.8rem 1.2rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Écrans très étroits : tout doit tenir sur une ligne. */
|
||||
@media (max-width: 420px) {
|
||||
.actions-secondaires .btn {
|
||||
padding: 0.55rem 0.7rem;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.penalite {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.valider {
|
||||
padding: 0.7rem 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Paysage / écrans très bas : on relâche les planchers pour éviter le rognage. */
|
||||
@media (max-height: 540px) {
|
||||
.panneau-photo {
|
||||
min-height: 3.5rem;
|
||||
max-height: 34dvh;
|
||||
}
|
||||
|
||||
.panneau-carte {
|
||||
min-height: 11rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop : split 50/50 qui remplit exactement la hauteur disponible. */
|
||||
@media (min-width: 768px) {
|
||||
.split {
|
||||
flex-direction: row;
|
||||
gap: 0.8rem;
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.panneau-photo,
|
||||
.split.resultat .panneau-photo {
|
||||
flex: 1 1 50%;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.panneau-carte,
|
||||
.split.resultat .panneau-carte {
|
||||
flex: 1 1 50%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.aide-carte {
|
||||
left: auto;
|
||||
right: 0.8rem;
|
||||
bottom: 3.4rem; /* au-dessus de la rangée de sauts en overlay bas-gauche */
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.barre-actions {
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* — Écran bilan du défi : compact, scroll interne en dernier recours. — */
|
||||
.bilan {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.bilan h1 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 1.6rem;
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
/* Filet drapeau du bilan : 3 segments francs aux couleurs OKI qui se
|
||||
dessinent (scaleX) en cascade syncopée — sobre, pas de confettis. */
|
||||
.filet-drapeau {
|
||||
display: flex;
|
||||
width: 132px;
|
||||
height: 5px;
|
||||
margin: 0 auto;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.filet-drapeau .seg {
|
||||
flex: 1;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.filet-drapeau .seg-vert {
|
||||
background: var(--oki-vert);
|
||||
}
|
||||
|
||||
.filet-drapeau .seg-corail {
|
||||
background: var(--oki-corail);
|
||||
}
|
||||
|
||||
.filet-drapeau .seg-bleu {
|
||||
background: var(--oki-bleu);
|
||||
}
|
||||
|
||||
/* Seed rappelée sous le titre du bilan (page /defi/[seed]) */
|
||||
.seed-discret {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
.total {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.total .valeur {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 800;
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
.total .unite {
|
||||
margin-left: 0.4rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
/* Carte SVG du récap : hauteur plafonnée à 44dvh via la largeur
|
||||
(viewBox 600×620 → hauteur ≈ largeur × 1,033). */
|
||||
.bilan-carte {
|
||||
width: min(100%, 42.5dvh, 520px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.recap {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.recap li {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.6rem;
|
||||
background: var(--oki-blanc);
|
||||
border-radius: var(--oki-radius-petit);
|
||||
box-shadow: var(--oki-ombre);
|
||||
padding: 0.5rem 0.9rem;
|
||||
}
|
||||
|
||||
.r-nom {
|
||||
font-weight: 700;
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
.r-region {
|
||||
flex: 1;
|
||||
color: var(--oki-encre-doux);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.r-score {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.bilan-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.bilan-actions .btn {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.legende {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
.puce.joueur {
|
||||
color: var(--oki-corail);
|
||||
}
|
||||
|
||||
.puce.reelle {
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
/* Bilan desktop : deux colonnes (carte | récap) pour tenir sans scroll. */
|
||||
@media (min-width: 900px) {
|
||||
.bilan {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
align-content: start;
|
||||
column-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.bilan h1,
|
||||
.bilan .seed-discret,
|
||||
.bilan .filet-drapeau,
|
||||
.bilan .total,
|
||||
.bilan .bilan-actions,
|
||||
.bilan .legende {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.bilan-carte {
|
||||
width: min(100%, 42.5dvh);
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hauteur limitée : resserre le bilan pour rester sans scroll dès 800px. */
|
||||
@media (max-height: 800px) {
|
||||
.bilan {
|
||||
gap: 0.55rem;
|
||||
padding-top: 0.6rem;
|
||||
}
|
||||
|
||||
.bilan h1 {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.total .valeur {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* — Motion (playbook §1.7) : transform/opacity uniquement, tout est sous
|
||||
gate html.js + no-preference — contenu statique complet sans JS ni motion. — */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* Moment révélation : la fiche résultat monte pendant que la carte prend
|
||||
l'emphase (léger zoom de reprise, --dur-mesure --ease-ka). */
|
||||
html.js .resultat-scroll {
|
||||
animation: jwe-montee var(--dur-mesure) var(--ease-ka);
|
||||
}
|
||||
|
||||
html.js .split.resultat .panneau-carte {
|
||||
animation: jwe-emphase var(--dur-mesure) var(--ease-ka);
|
||||
}
|
||||
|
||||
/* Pastilles de statut (manche, seed, minuteur) : apparition en pop. */
|
||||
html.js .badge-manche,
|
||||
html.js .badge-seed,
|
||||
html.js .badge-timer {
|
||||
animation: oki-pop var(--dur-mesure) var(--ease-ka) backwards;
|
||||
}
|
||||
|
||||
/* Filet drapeau du bilan : segments qui se dessinent 0 / 120 / 300 ms. */
|
||||
html.js .filet-drapeau .seg {
|
||||
animation: jwe-filet var(--dur-mesure) var(--ease-ka) backwards;
|
||||
}
|
||||
|
||||
html.js .filet-drapeau .seg-corail {
|
||||
animation-delay: 120ms;
|
||||
}
|
||||
|
||||
html.js .filet-drapeau .seg-bleu {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jwe-montee {
|
||||
from {
|
||||
transform: translateY(18px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jwe-emphase {
|
||||
from {
|
||||
transform: scale(0.965);
|
||||
opacity: 0.7;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jwe-filet {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
@@ -25,6 +25,61 @@
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
sans-serif;
|
||||
|
||||
/* Cadences gwoka (playbook §1.7) — lues aussi depuis le JS via
|
||||
getComputedStyle ($lib/motion/tokens.ts : dureeMs). */
|
||||
--ease-ka: cubic-bezier(0.22, 1, 0.36, 1); /* temps fort : attaque franche, longue tenue */
|
||||
--ease-syncope: cubic-bezier(0.65, 0, 0.35, 1); /* contretemps : symétrique, urgent */
|
||||
--dur-tanbou: 120ms; /* double-croche — micro-interactions, hovers */
|
||||
--dur-mesure: 480ms; /* une mesure — entrées, transitions d'état */
|
||||
--dur-phrase: 960ms; /* deux mesures — moments solennels (ligne de distance) */
|
||||
--dur-compte: 800ms; /* count-up du score — entre mesure et phrase */
|
||||
}
|
||||
|
||||
/* Lecture d'écran : valeur finale non animée qui double un compteur animé
|
||||
(le span animé porte aria-hidden="true"). */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Pop de marque (pastilles, marqueurs explorer) : scale 0.6 → 1.
|
||||
Toujours appliqué sous gate html.js + no-preference chez l'appelant. */
|
||||
@keyframes oki-pop {
|
||||
from {
|
||||
transform: scale(0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* États initiaux des reveals : uniquement si JS actif (classe `js` posée par
|
||||
app.html) ET motion autorisée — sans JS ou en reduced-motion, tout le
|
||||
contenu est visible (playbook §6). --d = délai syncopé posé dans le markup. */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
html.js [data-reveal] {
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition:
|
||||
opacity var(--dur-mesure) var(--ease-ka) var(--d, 0ms),
|
||||
transform var(--dur-mesure) var(--ease-ka) var(--d, 0ms);
|
||||
}
|
||||
|
||||
html.js [data-reveal].in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -50,6 +105,9 @@ button {
|
||||
|
||||
/* — Boutons — */
|
||||
.btn {
|
||||
position: relative;
|
||||
isolation: isolate; /* le balayage ::after reste sous le texte */
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -61,7 +119,11 @@ button {
|
||||
font-weight: 650;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.15s ease;
|
||||
transition:
|
||||
background-color var(--dur-tanbou) var(--ease-ka),
|
||||
color var(--dur-tanbou) var(--ease-ka),
|
||||
border-color var(--dur-tanbou) var(--ease-ka),
|
||||
transform var(--dur-tanbou) var(--ease-ka);
|
||||
}
|
||||
|
||||
.btn:focus-visible,
|
||||
@@ -78,8 +140,25 @@ a:focus-visible,
|
||||
box-shadow: var(--oki-ombre);
|
||||
}
|
||||
|
||||
.btn-primaire:hover {
|
||||
/* Balayage corail foncé qui glisse depuis la gauche (hover craft, pattern
|
||||
.btn OKI adapté au DS corail/vert — transform only) */
|
||||
.btn-primaire::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: var(--oki-corail-fonce);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left center;
|
||||
transition: transform var(--dur-tanbou) var(--ease-syncope);
|
||||
}
|
||||
|
||||
.btn-primaire:not(:disabled):hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-primaire:not(:disabled):hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.btn-primaire:disabled {
|
||||
|
||||
+28
-2
@@ -44,6 +44,27 @@ export interface Lieu {
|
||||
aire_commune_km2?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Lieu du mode street (« An lari a ») — serveur uniquement.
|
||||
* La photo statique est remplacée par une image Mapillary (CC BY-SA 4.0).
|
||||
* `wikidata_id` pointe vers la COMMUNE (phase éducative : fiche de la commune).
|
||||
*/
|
||||
export interface StreetLieu {
|
||||
id: string;
|
||||
nom: string;
|
||||
nom_creole: string;
|
||||
region: Region;
|
||||
commune: string;
|
||||
coordonnees: Coordonnees;
|
||||
difficulte: Difficulte;
|
||||
mapillary_id: string;
|
||||
credit: { username: string; captured_at: string };
|
||||
is_pano: boolean;
|
||||
wikidata_id: string | null;
|
||||
indices: Indice[];
|
||||
aire_commune_km2?: number;
|
||||
}
|
||||
|
||||
/** Lieu SANITISÉ envoyé par GET /api/round (aucune coordonnée, commune, région, wikidata_id). */
|
||||
export interface RoundPlace {
|
||||
id: string;
|
||||
@@ -51,7 +72,12 @@ export interface RoundPlace {
|
||||
nom_creole: string;
|
||||
categorie: Categorie;
|
||||
difficulte: Difficulte;
|
||||
photo: Photo;
|
||||
/** Modes photo (monument/lieu/defi). Absent en mode street. */
|
||||
photo?: Photo;
|
||||
/** Mode street : identifiant d'image Mapillary à charger dans la visionneuse. */
|
||||
mapillaryId?: string;
|
||||
/** Crédit affiché au résultat en mode street (« © auteur / Mapillary (CC BY-SA 4.0) »). */
|
||||
credit?: string;
|
||||
indices: Indice[];
|
||||
}
|
||||
|
||||
@@ -95,4 +121,4 @@ export interface WikiSummary {
|
||||
thumbnail: string | null;
|
||||
}
|
||||
|
||||
export type GameMode = 'monument' | 'lieu' | 'defi';
|
||||
export type GameMode = 'monument' | 'lieu' | 'defi' | 'street';
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
<style>
|
||||
.app {
|
||||
min-height: 100dvh;
|
||||
height: 100dvh; /* layout « app » verrouillé : chaque écran gère son overflow interne */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -76,6 +76,7 @@
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
+152
-22
@@ -1,7 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import CarteRegions from '$lib/components/CarteRegions.svelte';
|
||||
import Seo from '$lib/components/Seo.svelte';
|
||||
import { t } from '$lib/i18n/store.svelte';
|
||||
import { reveal } from '$lib/motion/reveal';
|
||||
import { syncopatedDelay } from '$lib/motion/tokens';
|
||||
import type { GameMode, Region } from '$lib/types';
|
||||
|
||||
type ChoixRegion = Region | 'TOUTES';
|
||||
@@ -13,7 +16,8 @@
|
||||
const modes: { id: GameMode; emoji: string }[] = [
|
||||
{ id: 'monument', emoji: '🏛️' },
|
||||
{ id: 'lieu', emoji: '📍' },
|
||||
{ id: 'defi', emoji: '⛰️' }
|
||||
{ id: 'defi', emoji: '⛰️' },
|
||||
{ id: 'street', emoji: '🛣️' }
|
||||
];
|
||||
|
||||
function jouer(): void {
|
||||
@@ -33,22 +37,23 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{t().app.titre} — {t().app.sousTitre}</title>
|
||||
<meta name="description" content={t().app.sousTitre} />
|
||||
</svelte:head>
|
||||
<Seo title={t().app.sousTitre} description={t().app.sousTitre} path="/" />
|
||||
|
||||
<div class="accueil">
|
||||
<section class="hero">
|
||||
<h1>{t().app.titre}</h1>
|
||||
<p class="accroche">{t().micro.kiteSaYe}</p>
|
||||
<h1>
|
||||
<span class="masque"><span class="ligne">{t().app.titre}</span></span>
|
||||
</h1>
|
||||
<p class="accroche">
|
||||
<span class="masque"><span class="ligne ligne-retard">{t().micro.kiteSaYe}</span></span>
|
||||
</p>
|
||||
<p class="sous-titre">{t().app.sousTitre}</p>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="titre-regions">
|
||||
<section class="sec-regions" aria-labelledby="titre-regions">
|
||||
<h2 id="titre-regions">{t().accueil.choixRegion}</h2>
|
||||
<div class="carte-accueil">
|
||||
<CarteRegions bind:selection={region} />
|
||||
<CarteRegions bind:selection={region} cascadeBase={5} />
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondaire toutes"
|
||||
@@ -61,15 +66,18 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="titre-modes">
|
||||
<section class="sec-modes" aria-labelledby="titre-modes">
|
||||
<h2 id="titre-modes">{t().accueil.choixMode}</h2>
|
||||
<div class="grille modes">
|
||||
{#each modes as m (m.id)}
|
||||
{#each modes as m, i (m.id)}
|
||||
<button
|
||||
type="button"
|
||||
class="carte-mode"
|
||||
class:choisi={mode === m.id}
|
||||
aria-pressed={mode === m.id}
|
||||
data-reveal
|
||||
style:--d="{syncopatedDelay(i)}ms"
|
||||
use:reveal
|
||||
onclick={() => (mode = m.id)}
|
||||
>
|
||||
<span class="emoji" aria-hidden="true">{m.emoji}</span>
|
||||
@@ -77,7 +85,13 @@
|
||||
<span class="desc">{t().modes[`${m.id}Desc`]}</span>
|
||||
</button>
|
||||
{/each}
|
||||
<a href="/explorer" class="carte-mode explorer">
|
||||
<a
|
||||
href="/explorer"
|
||||
class="carte-mode explorer"
|
||||
data-reveal
|
||||
style:--d="{syncopatedDelay(4)}ms"
|
||||
use:reveal
|
||||
>
|
||||
<span class="emoji" aria-hidden="true">🧭</span>
|
||||
<span class="nom">{t().modes.explorer}</span>
|
||||
<span class="desc">{t().modes.explorerDesc}</span>
|
||||
@@ -107,19 +121,57 @@
|
||||
|
||||
<style>
|
||||
.accueil {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto; /* scroll interne : l'en-tête reste visible */
|
||||
width: 100%;
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 1.25rem 1rem 7rem; /* espace pour le bouton fixe en zone pouce */
|
||||
padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
gap: 1.4rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Reveal masqué du titre : la ligne glisse dans un masque overflow hidden.
|
||||
Actif uniquement sous html.js + no-preference : sans JS ou en
|
||||
reduced-motion, le titre est affiché statiquement. */
|
||||
.masque {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ligne {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes montee-masque {
|
||||
from {
|
||||
transform: translateY(110%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:global(html.js) .masque {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(html.js) .ligne {
|
||||
animation: montee-masque var(--dur-mesure) var(--ease-ka) backwards;
|
||||
}
|
||||
|
||||
/* Contretemps gwoka : l'accroche suit le titre à 120 ms */
|
||||
:global(html.js) .ligne-retard {
|
||||
animation-delay: 120ms;
|
||||
}
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 0;
|
||||
font-size: 3rem;
|
||||
@@ -195,6 +247,9 @@
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 1rem 0.8rem;
|
||||
transition:
|
||||
transform var(--dur-tanbou) var(--ease-ka),
|
||||
border-color var(--dur-tanbou) var(--ease-ka);
|
||||
}
|
||||
|
||||
.carte-mode .emoji {
|
||||
@@ -211,7 +266,9 @@
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
/* Hover craft : lift + liseré (transform/couleur uniquement) */
|
||||
.carte-mode:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--oki-vert-clair);
|
||||
}
|
||||
|
||||
@@ -240,21 +297,16 @@
|
||||
accent-color: var(--oki-vert);
|
||||
}
|
||||
|
||||
/* Bouton « Jouer » : fixe en zone du pouce sur mobile */
|
||||
/* Bouton « Jouer » : barre d'action normale en flux (plus de fixe à dégradé
|
||||
qui rendait le contenu sous-jacent visible mais non cliquable). */
|
||||
.zone-pouce {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
|
||||
background: linear-gradient(transparent, var(--oki-sable) 35%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.jouer {
|
||||
width: min(420px, 100%);
|
||||
min-height: 48px;
|
||||
padding: 1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@@ -264,4 +316,82 @@
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop : deux colonnes — identité + modes à gauche, carte des régions
|
||||
à droite. Tout tient dans le viewport sans scroll dès 900px de haut. */
|
||||
@media (min-width: 1024px) {
|
||||
.accueil {
|
||||
max-width: 1120px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
|
||||
column-gap: 2.5rem;
|
||||
row-gap: 1.1rem;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.hero {
|
||||
grid-column: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sec-regions {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / span 5;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.sec-modes,
|
||||
.options,
|
||||
.zone-pouce {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.zone-pouce {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Hauteur de la carte SVG plafonnée (viewBox 600×620 → hauteur ≈ largeur × 1,033) */
|
||||
.carte-accueil {
|
||||
max-width: min(560px, calc(clamp(240px, 42dvh, 560px) * 0.94));
|
||||
}
|
||||
}
|
||||
|
||||
/* Viewports bas : on resserre titres, espacements et cartes de mode pour
|
||||
que tout reste visible sans scroll (la colonne gauche est la plus haute). */
|
||||
@media (min-width: 1024px) and (max-height: 999px) {
|
||||
.accueil {
|
||||
row-gap: 0.8rem;
|
||||
padding-top: 0.8rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
.accroche {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.carte-mode {
|
||||
padding: 0.6rem 0.7rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.carte-mode .emoji {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.carte-mode .desc {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.jouer {
|
||||
padding: 0.7rem 1rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { json } from '@sveltejs/kit';
|
||||
import { getLieuById, sanitizeRound } from '$lib/server/lieux';
|
||||
import { getLieuPhotoById, sanitizeRound } from '$lib/server/lieux';
|
||||
import { idsPourSeed, seedValide } from '$lib/server/tirage';
|
||||
import type { RequestHandler } from './$types';
|
||||
|
||||
@@ -17,7 +17,7 @@ export const GET: RequestHandler = ({ params }) => {
|
||||
);
|
||||
}
|
||||
const rounds = idsPourSeed(params.seed).map((id) => {
|
||||
const lieu = getLieuById(id);
|
||||
const lieu = getLieuPhotoById(id);
|
||||
if (!lieu) throw new Error(`Tirage incohérent : id inconnu (${id})`);
|
||||
return sanitizeRound(lieu);
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import sharp from 'sharp';
|
||||
import { getLieuById, PHOTO_LARGEURS } from '$lib/server/lieux';
|
||||
import { getLieuPhotoById, PHOTO_LARGEURS } from '$lib/server/lieux';
|
||||
import type { RequestHandler } from './$types';
|
||||
|
||||
const USER_AGENT = 'JWE-OKI/2.0 (https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/JWE; contact OKI)';
|
||||
@@ -22,7 +22,7 @@ const enVol = new Map<string, Promise<Buffer | null>>();
|
||||
* - conversion WebP + redimensionnement à la largeur demandée.
|
||||
*/
|
||||
async function chargerPhoto(id: string, w: Largeur): Promise<Buffer | null> {
|
||||
const lieu = getLieuById(id);
|
||||
const lieu = getLieuPhotoById(id);
|
||||
if (!lieu) return null;
|
||||
const res = await fetch(lieu.photo.url, { headers: { 'User-Agent': USER_AGENT } });
|
||||
if (!res.ok) throw new Error(`commons ${res.status}`);
|
||||
@@ -59,7 +59,7 @@ export const GET: RequestHandler = async ({ params, url }) => {
|
||||
}
|
||||
|
||||
// 404 immédiat si l'id est inconnu (avant tout fetch amont).
|
||||
if (!getLieuById(id)) {
|
||||
if (!getLieuPhotoById(id)) {
|
||||
return new Response('Lieu inconnu', { status: 404 });
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,25 @@
|
||||
import { json } from '@sveltejs/kit';
|
||||
import { getRandomLieu, sanitizeRound } from '$lib/server/lieux';
|
||||
import { getRandomLieu, getRandomStreet, sanitizeRound, sanitizeRoundStreet } from '$lib/server/lieux';
|
||||
import type { RequestHandler } from './$types';
|
||||
|
||||
/** GET /api/round?region=&categorie=&exclude=id1,id2 → lieu aléatoire SANITISÉ. */
|
||||
/**
|
||||
* GET /api/round?region=&categorie=&exclude=id1,id2 → lieu aléatoire SANITISÉ.
|
||||
* Avec `mode=street` : pioche dans le corpus Mapillary (catégorie ignorée,
|
||||
* réponse avec `mapillaryId` au lieu de `photo`).
|
||||
*/
|
||||
export const GET: RequestHandler = ({ url }) => {
|
||||
if (url.searchParams.get('mode') === 'street') {
|
||||
const lieu = getRandomStreet({
|
||||
region: url.searchParams.get('region'),
|
||||
exclude: url.searchParams.get('exclude')
|
||||
});
|
||||
if (!lieu) {
|
||||
return json({ erreur: 'Aucun lieu street disponible pour ces critères' }, { status: 404 });
|
||||
}
|
||||
return json(sanitizeRoundStreet(lieu), {
|
||||
headers: { 'Cache-Control': 'no-store' }
|
||||
});
|
||||
}
|
||||
const lieu = getRandomLieu({
|
||||
region: url.searchParams.get('region'),
|
||||
categorie: url.searchParams.get('categorie'),
|
||||
|
||||
@@ -1,11 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import '$lib/styles/jeu.css';
|
||||
import GameMap from '$lib/components/GameMap.svelte';
|
||||
import CarteRegions, { type MarqueurCarte } from '$lib/components/CarteRegions.svelte';
|
||||
import PhotoPanel from '$lib/components/PhotoPanel.svelte';
|
||||
import ResultPanel from '$lib/components/ResultPanel.svelte';
|
||||
import Seo from '$lib/components/Seo.svelte';
|
||||
import TimerRing from '$lib/components/TimerRing.svelte';
|
||||
import { t } from '$lib/i18n/store.svelte';
|
||||
import { compte } from '$lib/motion/countup';
|
||||
import { reveal } from '$lib/motion/reveal';
|
||||
import { syncopatedDelay } from '$lib/motion/tokens';
|
||||
import { fonduMesure, monteeMesure } from '$lib/motion/transitions';
|
||||
import { partager } from '$lib/partage';
|
||||
import { defi } from '$lib/stores/defi.svelte';
|
||||
import type { Coordonnees, GuessResult, RoundPlace } from '$lib/types';
|
||||
|
||||
@@ -124,65 +131,6 @@
|
||||
setTimeout(() => (lienCopie = false), 2500);
|
||||
}
|
||||
|
||||
/** Génère une image canvas téléchargeable : score total + lieux déjà révélés (V3). */
|
||||
function partager(): void {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 1080;
|
||||
canvas.height = 1080;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
// Fond sable + bandeau vert profond
|
||||
ctx.fillStyle = '#f5efe2';
|
||||
ctx.fillRect(0, 0, 1080, 1080);
|
||||
ctx.fillStyle = '#0b3d2e';
|
||||
ctx.fillRect(0, 0, 1080, 240);
|
||||
|
||||
ctx.fillStyle = '#fffdf8';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.font = '800 96px system-ui, sans-serif';
|
||||
ctx.fillText('JWE', 540, 130);
|
||||
ctx.font = '600 44px system-ui, sans-serif';
|
||||
ctx.fillText(t().modes.defi, 540, 200);
|
||||
|
||||
// Score total
|
||||
ctx.fillStyle = '#0b3d2e';
|
||||
ctx.font = '800 150px system-ui, sans-serif';
|
||||
ctx.fillText(`${defi.total}`, 540, 420);
|
||||
ctx.fillStyle = '#5a6b62';
|
||||
ctx.font = '500 40px system-ui, sans-serif';
|
||||
ctx.fillText(t().defi.scoreTotal, 540, 480);
|
||||
|
||||
// Manches : lieu, région, score
|
||||
let y = 580;
|
||||
for (const [i, m] of defi.manches.entries()) {
|
||||
ctx.fillStyle = i % 2 === 0 ? '#e3efe7' : '#f5efe2';
|
||||
ctx.fillRect(90, y - 44, 900, 74);
|
||||
ctx.fillStyle = '#22302a';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.font = '600 34px system-ui, sans-serif';
|
||||
ctx.fillText(`${i + 1}. ${m.result.nom}`, 120, y);
|
||||
ctx.fillStyle = '#17624a';
|
||||
ctx.font = '500 30px system-ui, sans-serif';
|
||||
ctx.fillText(t().regions[m.result.region], 120, y + 34);
|
||||
ctx.textAlign = 'right';
|
||||
ctx.fillStyle = '#0b3d2e';
|
||||
ctx.font = '800 40px system-ui, sans-serif';
|
||||
ctx.fillText(`${m.result.score}`, 960, y + 8);
|
||||
y += 92;
|
||||
}
|
||||
|
||||
ctx.fillStyle = '#5a6b62';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.font = '500 30px system-ui, sans-serif';
|
||||
ctx.fillText('labola.o-k-i.net', 540, 1010);
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = canvas.toDataURL('image/png');
|
||||
a.download = 'jwe-defi.png';
|
||||
a.click();
|
||||
}
|
||||
|
||||
// (Ré)initialise le défi au montage et à chaque changement de seed :
|
||||
// en navigation client d'un /defi/<seed> vers un autre, le composant est conservé.
|
||||
let seedJouee = '';
|
||||
@@ -196,17 +144,23 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{t().app.titre} — {t().modes.defi} — seed {seed}</title>
|
||||
</svelte:head>
|
||||
<Seo
|
||||
title="{t().modes.defi} — seed {seed}"
|
||||
description={t().modes.defiDesc}
|
||||
path="/defi/{seed}"
|
||||
/>
|
||||
|
||||
<div class="jeu">
|
||||
{#if bilan}
|
||||
<div class="bilan">
|
||||
<div class="bilan" in:monteeMesure>
|
||||
<h1>{t().defi.bilan}</h1>
|
||||
<p class="seed-discret">{t().defi.titreSeed} <strong>{seed}</strong></p>
|
||||
<div class="filet-drapeau" aria-hidden="true">
|
||||
<span class="seg seg-vert"></span><span class="seg seg-corail"></span><span class="seg seg-bleu"></span>
|
||||
</div>
|
||||
<p class="total">
|
||||
<span class="valeur">{defi.total}</span>
|
||||
<span class="valeur" aria-hidden="true" use:compte={defi.total}>{defi.total}</span>
|
||||
<span class="sr-only">{defi.total}</span>
|
||||
<span class="unite">{t().defi.scoreTotal}</span>
|
||||
</p>
|
||||
<div class="bilan-carte">
|
||||
@@ -214,7 +168,7 @@
|
||||
</div>
|
||||
<ol class="recap">
|
||||
{#each defi.manches as m, i (m.place.id)}
|
||||
<li>
|
||||
<li data-reveal style:--d="{syncopatedDelay(i)}ms" use:reveal>
|
||||
<span class="r-nom">{i + 1}. {m.result.nom}</span>
|
||||
<span class="r-region">{t().regions[m.result.region]}</span>
|
||||
<span class="r-score">{m.result.score} {t().resultat.points}</span>
|
||||
@@ -239,27 +193,34 @@
|
||||
</p>
|
||||
</div>
|
||||
{:else if erreur}
|
||||
<div class="etat">
|
||||
<div class="etat" in:fonduMesure>
|
||||
<p>{t().jeu.erreur}</p>
|
||||
<button type="button" class="btn btn-secondaire" onclick={chargerRound}>
|
||||
{t().jeu.reessayer}
|
||||
</button>
|
||||
</div>
|
||||
{:else if place}
|
||||
<div class="split" class:resultat={!!result}>
|
||||
<div class="split" class:resultat={!!result} in:monteeMesure>
|
||||
<section class="panneau-photo">
|
||||
{#if result}
|
||||
<div class="resultat-scroll">
|
||||
<ResultPanel
|
||||
{result}
|
||||
creditPhoto={place.photo.credit}
|
||||
creditPhoto={place.photo?.credit}
|
||||
labelBouton={defiTermine ? t().resultat.voirBilan : t().resultat.suivant}
|
||||
onsuivant={defiTermine ? montrerBilan : suivant}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
{:else if place.photo}
|
||||
<PhotoPanel photo={place.photo} />
|
||||
{/if}
|
||||
{#if !result && indicesMontres.length > 0}
|
||||
<aside class="indices" aria-live="polite">
|
||||
{#each indicesMontres as texte, i (texte)}
|
||||
<p class="indice"><strong>{t().jeu.indice} {i + 1}</strong> — {texte}</p>
|
||||
{/each}
|
||||
</aside>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section class="panneau-carte">
|
||||
@@ -270,14 +231,19 @@
|
||||
interactive={!result}
|
||||
onvalidate={() => void soumettre(false)}
|
||||
/>
|
||||
{#if !defiTermine}
|
||||
<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
|
||||
{/if}
|
||||
<span class="badge-seed">{t().defi.titreSeed} {seed}</span>
|
||||
{#if timerActif && !result}
|
||||
<div class="badge-timer">
|
||||
<TimerRing bind:this={timerRef} actif={!result} />
|
||||
</div>
|
||||
<div class="statut">
|
||||
{#if !defiTermine}
|
||||
<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
|
||||
{/if}
|
||||
<span class="badge-seed">{t().defi.titreSeed} {seed}</span>
|
||||
{#if timerActif && !result}
|
||||
<span class="badge-timer">
|
||||
<TimerRing bind:this={timerRef} actif={!result} />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if !result && !guess}
|
||||
<p class="aide-carte">{t().jeu.poserMarqueur}</p>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
@@ -307,284 +273,9 @@
|
||||
{t().jeu.valider}
|
||||
</button>
|
||||
</div>
|
||||
{#if indicesMontres.length > 0}
|
||||
<aside class="indices" aria-live="polite">
|
||||
{#each indicesMontres as texte, i (texte)}
|
||||
<p class="indice"><strong>{t().jeu.indice} {i + 1}</strong> — {texte}</p>
|
||||
{/each}
|
||||
</aside>
|
||||
{/if}
|
||||
{#if !guess}
|
||||
<p class="aide-carte">{t().jeu.poserMarqueur}</p>
|
||||
{/if}
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="etat"><p>{t().jeu.charger}</p></div>
|
||||
<div class="etat" in:fonduMesure><p>{t().jeu.charger}</p></div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.jeu {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.etat {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
.split {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
padding: 0.6rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Mobile : photo 60 % haut, carte 40 % bas */
|
||||
.panneau-photo {
|
||||
flex: 0 0 58%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.split.resultat .panneau-photo {
|
||||
flex: 1 1 55%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panneau-carte {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.resultat-scroll {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background: var(--oki-blanc);
|
||||
border-radius: var(--oki-radius);
|
||||
box-shadow: var(--oki-ombre);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.badge-manche {
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
right: 0.6rem;
|
||||
background: rgba(255, 253, 248, 0.94);
|
||||
color: var(--oki-vert);
|
||||
border-radius: 999px;
|
||||
padding: 0.25rem 0.8rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--oki-ombre);
|
||||
}
|
||||
|
||||
/* Seed visible mais discrète : les joueurs vérifient qu'ils jouent le même défi */
|
||||
.badge-seed {
|
||||
position: absolute;
|
||||
top: 2.7rem;
|
||||
right: 0.6rem;
|
||||
background: rgba(255, 253, 248, 0.8);
|
||||
color: var(--oki-encre-doux);
|
||||
border-radius: 999px;
|
||||
padding: 0.15rem 0.7rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
box-shadow: var(--oki-ombre);
|
||||
}
|
||||
|
||||
.badge-timer {
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
left: 3.4rem; /* à droite des boutons zoom */
|
||||
}
|
||||
|
||||
/* Barre d'actions : fixe en zone du pouce (tiers inférieur) */
|
||||
.barre-actions {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.6rem;
|
||||
padding: 0.7rem 0.8rem calc(0.7rem + env(safe-area-inset-bottom));
|
||||
background: var(--oki-blanc);
|
||||
border-top: 1px solid var(--oki-sable-fonce);
|
||||
}
|
||||
|
||||
.actions-secondaires {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.actions-secondaires .btn {
|
||||
padding: 0.7rem 1rem;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.penalite {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.valider {
|
||||
flex: 0 0 auto;
|
||||
padding: 0.9rem 1.4rem;
|
||||
}
|
||||
|
||||
.indices {
|
||||
padding: 0 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.indice {
|
||||
margin: 0.25rem 0;
|
||||
background: var(--oki-bleu-doux);
|
||||
border-left: 4px solid var(--oki-bleu);
|
||||
border-radius: var(--oki-radius-petit);
|
||||
padding: 0.5rem 0.8rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.aide-carte {
|
||||
margin: 0;
|
||||
padding: 0 1rem 0.6rem;
|
||||
text-align: center;
|
||||
font-size: 0.88rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
/* Desktop : 50/50 */
|
||||
@media (min-width: 768px) {
|
||||
.split {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.panneau-photo,
|
||||
.split.resultat .panneau-photo {
|
||||
flex: 1 1 50%;
|
||||
}
|
||||
|
||||
.panneau-carte {
|
||||
flex: 1 1 50%;
|
||||
}
|
||||
|
||||
.barre-actions {
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* — Écran bilan du défi — */
|
||||
.bilan {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 1.2rem 1rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.bilan h1 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
.seed-discret {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
.total {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.total .valeur {
|
||||
font-size: 2.8rem;
|
||||
font-weight: 800;
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
.total .unite {
|
||||
margin-left: 0.4rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
.bilan-carte {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.recap {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.recap li {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.6rem;
|
||||
background: var(--oki-blanc);
|
||||
border-radius: var(--oki-radius-petit);
|
||||
box-shadow: var(--oki-ombre);
|
||||
padding: 0.55rem 0.9rem;
|
||||
}
|
||||
|
||||
.r-nom {
|
||||
font-weight: 700;
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
.r-region {
|
||||
flex: 1;
|
||||
color: var(--oki-encre-doux);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.r-score {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.bilan-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.legende {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
.puce.joueur {
|
||||
color: var(--oki-corail);
|
||||
}
|
||||
|
||||
.puce.reelle {
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import GameMap from '$lib/components/GameMap.svelte';
|
||||
import WikiFiche from '$lib/components/WikiFiche.svelte';
|
||||
import Seo from '$lib/components/Seo.svelte';
|
||||
import { t } from '$lib/i18n/store.svelte';
|
||||
import { REGIONS } from '$lib/map/regions';
|
||||
import type { ExplorerLieu, Region } from '$lib/types';
|
||||
@@ -44,9 +45,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{t().app.titre} — {t().explorer.titre}</title>
|
||||
</svelte:head>
|
||||
<Seo title={t().explorer.titre} description={t().modes.explorerDesc} path="/explorer" />
|
||||
|
||||
<div class="explorer">
|
||||
<div class="filtres" role="group" aria-label={t().explorer.filtrer}>
|
||||
@@ -121,6 +120,7 @@
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
overflow: hidden; /* la partie repliée du sheet ne doit pas agrandir la page */
|
||||
}
|
||||
|
||||
.filtres {
|
||||
@@ -152,7 +152,8 @@
|
||||
.carte-explorer {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 0.6rem;
|
||||
padding: 0.6rem 0.6rem 3.6rem; /* réserve la bande de la poignée du sheet :
|
||||
la fiche repliée ne recouvre jamais la carte, les sauts ni l'attribution */
|
||||
}
|
||||
|
||||
.erreur {
|
||||
@@ -160,7 +161,8 @@
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
/* Bottom sheet mobile */
|
||||
/* Bottom sheet mobile : overlay dont les événements sont scopés à lui-même.
|
||||
Glisse --dur-mesure --ease-ka (cadence gwoka), coupée en reduced-motion. */
|
||||
.fiche {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -173,7 +175,7 @@
|
||||
box-shadow: 0 -4px 18px rgba(11, 61, 46, 0.2);
|
||||
padding: 1rem;
|
||||
transform: translateY(calc(100% - 3.2rem));
|
||||
transition: transform 0.25s ease;
|
||||
transition: transform var(--dur-mesure) var(--ease-ka);
|
||||
}
|
||||
|
||||
.fiche.ouvert {
|
||||
@@ -237,21 +239,32 @@
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
/* Panneau latéral desktop */
|
||||
/* Desktop : panneau latéral droit EN FLUX (grille) — plus aucune bande
|
||||
verticale par-dessus la carte, toute la carte reste cliquable. */
|
||||
@media (min-width: 768px) {
|
||||
.fiche {
|
||||
left: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 380px;
|
||||
max-height: none;
|
||||
border-radius: var(--oki-radius) 0 0 var(--oki-radius);
|
||||
transform: translateX(calc(100% - 3.2rem));
|
||||
.explorer {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 360px;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.fiche.ouvert {
|
||||
transform: translateX(0);
|
||||
.filtres {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.carte-explorer {
|
||||
padding: 0.8rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.fiche {
|
||||
position: static;
|
||||
transform: none;
|
||||
max-height: none;
|
||||
min-height: 0;
|
||||
border-radius: 0;
|
||||
border-left: 1px solid var(--oki-sable-fonce);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/state';
|
||||
import '$lib/styles/jeu.css';
|
||||
import GameMap from '$lib/components/GameMap.svelte';
|
||||
import CarteRegions, { type MarqueurCarte } from '$lib/components/CarteRegions.svelte';
|
||||
import PhotoPanel from '$lib/components/PhotoPanel.svelte';
|
||||
import StreetPanel from '$lib/components/StreetPanel.svelte';
|
||||
import ResultPanel from '$lib/components/ResultPanel.svelte';
|
||||
import Seo from '$lib/components/Seo.svelte';
|
||||
import TimerRing from '$lib/components/TimerRing.svelte';
|
||||
import { t } from '$lib/i18n/store.svelte';
|
||||
import { compte } from '$lib/motion/countup';
|
||||
import { reveal } from '$lib/motion/reveal';
|
||||
import { syncopatedDelay } from '$lib/motion/tokens';
|
||||
import { fonduMesure, monteeMesure } from '$lib/motion/transitions';
|
||||
import { partager } from '$lib/partage';
|
||||
import { defi } from '$lib/stores/defi.svelte';
|
||||
import type { Coordonnees, GuessResult, RoundPlace } from '$lib/types';
|
||||
|
||||
@@ -62,6 +70,7 @@
|
||||
if (regionParam) params.set('region', regionParam);
|
||||
if (mode === 'monument') params.set('categorie', 'MONUMENT');
|
||||
if (mode === 'lieu') params.set('categorie', 'LIEU');
|
||||
if (mode === 'street') params.set('mode', 'street');
|
||||
if (joues.length > 0) params.set('exclude', joues.join(','));
|
||||
const res = await fetch(`/api/round?${params}`);
|
||||
if (!res.ok) throw new Error(String(res.status));
|
||||
@@ -126,65 +135,6 @@
|
||||
void chargerRound();
|
||||
}
|
||||
|
||||
/** Génère une image canvas téléchargeable : score total + régions jouées. */
|
||||
function partager(): void {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 1080;
|
||||
canvas.height = 1080;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
// Fond sable + bandeau vert profond
|
||||
ctx.fillStyle = '#f5efe2';
|
||||
ctx.fillRect(0, 0, 1080, 1080);
|
||||
ctx.fillStyle = '#0b3d2e';
|
||||
ctx.fillRect(0, 0, 1080, 240);
|
||||
|
||||
ctx.fillStyle = '#fffdf8';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.font = '800 96px system-ui, sans-serif';
|
||||
ctx.fillText('JWE', 540, 130);
|
||||
ctx.font = '600 44px system-ui, sans-serif';
|
||||
ctx.fillText(t().modes.defi, 540, 200);
|
||||
|
||||
// Score total
|
||||
ctx.fillStyle = '#0b3d2e';
|
||||
ctx.font = '800 150px system-ui, sans-serif';
|
||||
ctx.fillText(`${defi.total}`, 540, 420);
|
||||
ctx.fillStyle = '#5a6b62';
|
||||
ctx.font = '500 40px system-ui, sans-serif';
|
||||
ctx.fillText(t().defi.scoreTotal, 540, 480);
|
||||
|
||||
// Manches : lieu, région, score
|
||||
let y = 580;
|
||||
for (const [i, m] of defi.manches.entries()) {
|
||||
ctx.fillStyle = i % 2 === 0 ? '#e3efe7' : '#f5efe2';
|
||||
ctx.fillRect(90, y - 44, 900, 74);
|
||||
ctx.fillStyle = '#22302a';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.font = '600 34px system-ui, sans-serif';
|
||||
ctx.fillText(`${i + 1}. ${m.result.nom}`, 120, y);
|
||||
ctx.fillStyle = '#17624a';
|
||||
ctx.font = '500 30px system-ui, sans-serif';
|
||||
ctx.fillText(t().regions[m.result.region], 120, y + 34);
|
||||
ctx.textAlign = 'right';
|
||||
ctx.fillStyle = '#0b3d2e';
|
||||
ctx.font = '800 40px system-ui, sans-serif';
|
||||
ctx.fillText(`${m.result.score}`, 960, y + 8);
|
||||
y += 92;
|
||||
}
|
||||
|
||||
ctx.fillStyle = '#5a6b62';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.font = '500 30px system-ui, sans-serif';
|
||||
ctx.fillText('labola.o-k-i.net', 540, 1010);
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = canvas.toDataURL('image/png');
|
||||
a.download = 'jwe-defi.png';
|
||||
a.click();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Nouveau défi : on repart de zéro quand on arrive sur la première manche.
|
||||
if (estDefi && defi.termine) defi.reinitialiser();
|
||||
@@ -192,16 +142,22 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{t().app.titre} — {t().modes[mode]}</title>
|
||||
</svelte:head>
|
||||
<Seo
|
||||
title={t().modes[mode]}
|
||||
description={t().modes[`${mode}Desc`]}
|
||||
path="/jeu/{mode}"
|
||||
/>
|
||||
|
||||
<div class="jeu">
|
||||
{#if bilan}
|
||||
<div class="bilan">
|
||||
<div class="bilan" in:monteeMesure>
|
||||
<h1>{t().defi.bilan}</h1>
|
||||
<div class="filet-drapeau" aria-hidden="true">
|
||||
<span class="seg seg-vert"></span><span class="seg seg-corail"></span><span class="seg seg-bleu"></span>
|
||||
</div>
|
||||
<p class="total">
|
||||
<span class="valeur">{defi.total}</span>
|
||||
<span class="valeur" aria-hidden="true" use:compte={defi.total}>{defi.total}</span>
|
||||
<span class="sr-only">{defi.total}</span>
|
||||
<span class="unite">{t().defi.scoreTotal}</span>
|
||||
</p>
|
||||
<div class="bilan-carte">
|
||||
@@ -209,7 +165,7 @@
|
||||
</div>
|
||||
<ol class="recap">
|
||||
{#each defi.manches as m, i (m.place.id)}
|
||||
<li>
|
||||
<li data-reveal style:--d="{syncopatedDelay(i)}ms" use:reveal>
|
||||
<span class="r-nom">{i + 1}. {m.result.nom}</span>
|
||||
<span class="r-region">{t().regions[m.result.region]}</span>
|
||||
<span class="r-score">{m.result.score} {t().resultat.points}</span>
|
||||
@@ -231,29 +187,38 @@
|
||||
</p>
|
||||
</div>
|
||||
{:else if chargement}
|
||||
<div class="etat"><p>{t().jeu.charger}</p></div>
|
||||
<div class="etat" in:fonduMesure><p>{t().jeu.charger}</p></div>
|
||||
{:else if erreur}
|
||||
<div class="etat">
|
||||
<div class="etat" in:fonduMesure>
|
||||
<p>{t().jeu.erreur}</p>
|
||||
<button type="button" class="btn btn-secondaire" onclick={() => void chargerRound()}>
|
||||
{t().jeu.reessayer}
|
||||
</button>
|
||||
</div>
|
||||
{:else if place}
|
||||
<div class="split" class:resultat={!!result}>
|
||||
<div class="split" class:resultat={!!result} in:monteeMesure>
|
||||
<section class="panneau-photo">
|
||||
{#if result}
|
||||
<div class="resultat-scroll">
|
||||
<ResultPanel
|
||||
{result}
|
||||
creditPhoto={place.photo.credit}
|
||||
creditPhoto={place.photo?.credit ?? place.credit}
|
||||
labelBouton={estDefi && defiTermine ? t().resultat.voirBilan : t().resultat.suivant}
|
||||
onsuivant={estDefi && defiTermine ? montrerBilan : suivant}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
{:else if place.mapillaryId}
|
||||
<StreetPanel mapillaryId={place.mapillaryId} credit={place.credit} />
|
||||
{:else if place.photo}
|
||||
<PhotoPanel photo={place.photo} />
|
||||
{/if}
|
||||
{#if !result && indicesMontres.length > 0}
|
||||
<aside class="indices" aria-live="polite">
|
||||
{#each indicesMontres as texte, i (texte)}
|
||||
<p class="indice"><strong>{t().jeu.indice} {i + 1}</strong> — {texte}</p>
|
||||
{/each}
|
||||
</aside>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section class="panneau-carte">
|
||||
@@ -264,13 +229,18 @@
|
||||
interactive={!result}
|
||||
onvalidate={() => void soumettre(false)}
|
||||
/>
|
||||
{#if estDefi && !defiTermine}
|
||||
<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
|
||||
{/if}
|
||||
{#if timerActif && !result}
|
||||
<div class="badge-timer">
|
||||
<TimerRing bind:this={timerRef} actif={!result} />
|
||||
</div>
|
||||
<div class="statut">
|
||||
{#if estDefi && !defiTermine}
|
||||
<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
|
||||
{/if}
|
||||
{#if timerActif && !result}
|
||||
<span class="badge-timer">
|
||||
<TimerRing bind:this={timerRef} actif={!result} />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if !result && !guess}
|
||||
<p class="aide-carte">{t().jeu.poserMarqueur}</p>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
@@ -300,261 +270,7 @@
|
||||
{t().jeu.valider}
|
||||
</button>
|
||||
</div>
|
||||
{#if indicesMontres.length > 0}
|
||||
<aside class="indices" aria-live="polite">
|
||||
{#each indicesMontres as texte, i (texte)}
|
||||
<p class="indice"><strong>{t().jeu.indice} {i + 1}</strong> — {texte}</p>
|
||||
{/each}
|
||||
</aside>
|
||||
{/if}
|
||||
{#if !guess}
|
||||
<p class="aide-carte">{t().jeu.poserMarqueur}</p>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.jeu {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.etat {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
.split {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
padding: 0.6rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Mobile : photo 60 % haut, carte 40 % bas */
|
||||
.panneau-photo {
|
||||
flex: 0 0 58%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.split.resultat .panneau-photo {
|
||||
flex: 1 1 55%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panneau-carte {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.resultat-scroll {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background: var(--oki-blanc);
|
||||
border-radius: var(--oki-radius);
|
||||
box-shadow: var(--oki-ombre);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.badge-manche {
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
right: 0.6rem;
|
||||
background: rgba(255, 253, 248, 0.94);
|
||||
color: var(--oki-vert);
|
||||
border-radius: 999px;
|
||||
padding: 0.25rem 0.8rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--oki-ombre);
|
||||
}
|
||||
|
||||
.badge-timer {
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
left: 3.4rem; /* à droite des boutons zoom */
|
||||
}
|
||||
|
||||
/* Barre d'actions : fixe en zone du pouce (tiers inférieur) */
|
||||
.barre-actions {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.6rem;
|
||||
padding: 0.7rem 0.8rem calc(0.7rem + env(safe-area-inset-bottom));
|
||||
background: var(--oki-blanc);
|
||||
border-top: 1px solid var(--oki-sable-fonce);
|
||||
}
|
||||
|
||||
.actions-secondaires {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.actions-secondaires .btn {
|
||||
padding: 0.7rem 1rem;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.penalite {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.valider {
|
||||
flex: 0 0 auto;
|
||||
padding: 0.9rem 1.4rem;
|
||||
}
|
||||
|
||||
.indices {
|
||||
padding: 0 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.indice {
|
||||
margin: 0.25rem 0;
|
||||
background: var(--oki-bleu-doux);
|
||||
border-left: 4px solid var(--oki-bleu);
|
||||
border-radius: var(--oki-radius-petit);
|
||||
padding: 0.5rem 0.8rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.aide-carte {
|
||||
margin: 0;
|
||||
padding: 0 1rem 0.6rem;
|
||||
text-align: center;
|
||||
font-size: 0.88rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
/* Desktop : 50/50 */
|
||||
@media (min-width: 768px) {
|
||||
.split {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.panneau-photo,
|
||||
.split.resultat .panneau-photo {
|
||||
flex: 1 1 50%;
|
||||
}
|
||||
|
||||
.panneau-carte {
|
||||
flex: 1 1 50%;
|
||||
}
|
||||
|
||||
.barre-actions {
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* — Écran bilan du défi — */
|
||||
.bilan {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 1.2rem 1rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.bilan h1 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
.total {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.total .valeur {
|
||||
font-size: 2.8rem;
|
||||
font-weight: 800;
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
.total .unite {
|
||||
margin-left: 0.4rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
.bilan-carte {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.recap {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.recap li {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.6rem;
|
||||
background: var(--oki-blanc);
|
||||
border-radius: var(--oki-radius-petit);
|
||||
box-shadow: var(--oki-ombre);
|
||||
padding: 0.55rem 0.9rem;
|
||||
}
|
||||
|
||||
.r-nom {
|
||||
font-weight: 700;
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
.r-region {
|
||||
flex: 1;
|
||||
color: var(--oki-encre-doux);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.r-score {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.bilan-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.legende {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
.puce.joueur {
|
||||
color: var(--oki-corail);
|
||||
}
|
||||
|
||||
.puce.reelle {
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { error } from '@sveltejs/kit';
|
||||
import type { GameMode } from '$lib/types';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
const MODES: GameMode[] = ['monument', 'lieu', 'defi'];
|
||||
const MODES: GameMode[] = ['monument', 'lieu', 'defi', 'street'];
|
||||
|
||||
export const load: PageLoad = ({ params }) => {
|
||||
if (!MODES.includes(params.mode as GameMode)) {
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://jwe.o-k-i.net/sitemap.xml
|
||||
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://jwe.o-k-i.net/</loc>
|
||||
<lastmod>2026-07-21</lastmod>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://jwe.o-k-i.net/explorer</loc>
|
||||
<lastmod>2026-07-21</lastmod>
|
||||
</url>
|
||||
</urlset>
|
||||
@@ -54,3 +54,34 @@ Chaque fichier est sous licence libre (Creative Commons, CC0 ou domaine public)
|
||||
(redimensionnement à 1200 px de large assuré par Wikimedia).
|
||||
- Photos « domaine public » : *La Pelée vue du Carbet.jpg* (Jurassi), *ILES et BAGNE 037.JPG* (davric), *Piton des Neiges1.JPG* (Dunog).
|
||||
- Photos CC0 (pas d'attribution requise, auteur crédité par courtoisie) : les deux clichés de Thérèse Gaigé (Anse Dufour, Anse Noire).
|
||||
|
||||
## Images Mapillary — mode street « An lari a »
|
||||
|
||||
Les 20 images du corpus `app/src/lib/server/data/street.json` sont servies par la plateforme
|
||||
Mapillary via la visionneuse mapillary-js (licence MIT). Chaque image reste la propriété de son
|
||||
auteur et est publiée sous **CC BY-SA 4.0** (contributeurs Mapillary) — vérifiée via l'API Mapillary
|
||||
(`creator.username`) par `app/scripts/validate-street.mjs`. Attribution affichée dans le jeu :
|
||||
« © <auteur> / Mapillary (CC BY-SA 4.0) » + logo Mapillary intégré à la visionneuse.
|
||||
|
||||
| # | Lieu | Région | Image Mapillary | Auteur | Date de capture | 360° |
|
||||
|---|------|--------|-----------------|--------|-----------------|------|
|
||||
| 1 | Rue Laurence Valmy, Pointe-à-Pitre | GUADELOUPE | [2941939632687980](https://www.mapillary.com/app/?pKey=2941939632687980) | cartophyl | 2015-07-07 | non |
|
||||
| 2 | Rue Achille René Boisneuf, Les Abymes | GUADELOUPE | [306781020957650](https://www.mapillary.com/app/?pKey=306781020957650) | ratzillas | 2015-07-17 | non |
|
||||
| 3 | Place Renovation le Bourg, Le Gosier | GUADELOUPE | [919062132219342](https://www.mapillary.com/app/?pKey=919062132219342) | kaartcam | 2016-01-02 | non |
|
||||
| 4 | Rue Emmanuel Robinet, Sainte-Anne | GUADELOUPE | [956408765176680](https://www.mapillary.com/app/?pKey=956408765176680) | ratzillas | 2019-07-15 | oui |
|
||||
| 5 | Route des Esclaves, Basse-Terre | GUADELOUPE | [212605717097536](https://www.mapillary.com/app/?pKey=212605717097536) | kaartcam | 2016-01-04 | non |
|
||||
| 6 | Rue Victor Sévère, Fort-de-France | MARTINIQUE | [152801196814796](https://www.mapillary.com/app/?pKey=152801196814796) | kaartcam | 2015-12-31 | non |
|
||||
| 7 | Rue des Barrières, Le Lamentin | MARTINIQUE | [1120779875836768](https://www.mapillary.com/app/?pKey=1120779875836768) | Caramel | 2024-04-29 | oui |
|
||||
| 8 | Rue Gabriel Péri, Saint-Pierre | MARTINIQUE | [1299527321706804](https://www.mapillary.com/app/?pKey=1299527321706804) | jeremylavarenne | 2025-08-31 | non |
|
||||
| 9 | Rue Florent Holo, Le François | MARTINIQUE | [4102521129805870](https://www.mapillary.com/app/?pKey=4102521129805870) | kaartcam | 2016-01-01 | non |
|
||||
| 10 | Passage des Fleurs, Sainte-Marie | MARTINIQUE | [131479329019761](https://www.mapillary.com/app/?pKey=131479329019761) | kaartcam | 2015-12-31 | non |
|
||||
| 11 | Rue Francois Arago, Cayenne | GUYANE | [259270559222687](https://www.mapillary.com/app/?pKey=259270559222687) | kaartcam | 2016-08-18 | non |
|
||||
| 12 | Rue de l’Odéon, Kourou | GUYANE | [198127629404270](https://www.mapillary.com/app/?pKey=198127629404270) | hacp | 2022-09-07 | non |
|
||||
| 13 | Avenue Albert Sarraut, Saint-Laurent-du-Maroni | GUYANE | [147142287390967](https://www.mapillary.com/app/?pKey=147142287390967) | pma | 2021-01-18 | non |
|
||||
| 14 | Rue Maurice BOCS, Matoury | GUYANE | [582210316504280](https://www.mapillary.com/app/?pKey=582210316504280) | kaartcam | 2016-08-18 | non |
|
||||
| 15 | Rue de la CANNE À SUCRE, Remire-Montjoly | GUYANE | [247810083801809](https://www.mapillary.com/app/?pKey=247810083801809) | kaartcam | 2016-08-18 | non |
|
||||
| 16 | Rue de Paris, Saint-Denis | REUNION | [2262788723930767](https://www.mapillary.com/app/?pKey=2262788723930767) | AllWays360 | 2022-10-06 | oui |
|
||||
| 17 | Rue du Cimetiere, Saint-Pierre | REUNION | [143202321798356](https://www.mapillary.com/app/?pKey=143202321798356) | sigstpierre | 2022-11-09 | oui |
|
||||
| 18 | Rue Aristide Briand, Le Tampon | REUNION | [1382811445417165](https://www.mapillary.com/app/?pKey=1382811445417165) | vandecasteele | 2019-12-16 | non |
|
||||
| 19 | Rue Elie Eudor, Saint-Paul | REUNION | [928324514646684](https://www.mapillary.com/app/?pKey=928324514646684) | sogefi | 2018-10-14 | non |
|
||||
| 20 | Ccal de la Republique, Saint-André | REUNION | [519625869420978](https://www.mapillary.com/app/?pKey=519625869420978) | vandecasteele | 2019-06-28 | oui |
|
||||
|
||||
@@ -110,3 +110,15 @@ Règles :
|
||||
## 9. Correctif UX résultat (2026-07-17)
|
||||
|
||||
- **Carte résultat façon GeoGuessr** : à la révélation, le marqueur du joueur **reste à sa position** (corail) et la position réelle apparaît (vert), reliées par une ligne pointillée avec **étiquette de distance au milieu** (`distanceKm`) ; la carte cadre les deux points (`fitBounds`, instantané si `prefers-reduced-motion`). Remplace l'ancien « vol » du marqueur vers la position réelle, qui détruisait la comparaison visuelle. Prop `distanceKm` ajoutée à `GameMap` (alimentée par la réponse serveur, jamais calculée côté client).
|
||||
|
||||
## 10. ADR-003 — Mode street « An lari a » via Mapillary (2026-07-18)
|
||||
|
||||
5e mode de jeu : le joueur voit une **photo street-level navigable** (visionneuse Mapillary) au lieu d'une photo statique, et devine la commune. Mécanique carte + guess + score **inchangée**.
|
||||
|
||||
- **Pourquoi Mapillary** : seule source de street-level imagery couvrant correctement les 4 régions (bonne couverture Gwada/Martinique/Réunion, littoral guyanais) ; images **CC BY-SA 4.0**, lib `mapillary-js` **MIT**, API gratuite (token client requis, rate-limité par app). **Exception documentée** à « zéro service tiers » (Mapillary = plateforme Meta), limitée à ce mode ; alternative souveraine future = Panoramax (reco R4 audit passe 2), couverture DOM encore insuffisante à cette date.
|
||||
- **Corpus curé, pas de tirage aléatoire dans l'API** : `app/src/lib/server/data/street.json` (20 lieux, 5/région), produit par `app/scripts/curate-street.mjs` (bbox < 0,01° ou grille de recherches par rayon autour de la **mairie** — le centroïde geo.api tombe souvent hors du centre-ville ; tri qualité/récence, préférence 360°), revérifié par `app/scripts/validate-street.mjs` (image existe, `computed_geometry` < 100 m, crédit auteur, sitelink frwiki). La vérité terrain (`coordonnees`) est **figée** dans le corpus (dérive possible de `computed_geometry` côté Mapillary).
|
||||
- **Phase éducative par commune** : `wikidata_id` = QID de la **commune** (un coin de rue n'a pas vocation à avoir sa page) → `WikiFiche` réutilisé tel quel, aucune variante Cas B nouvelle. `aire_commune_km2` renseigné (équité Guyane, A1).
|
||||
- **Anti-triche** : `/api/round?mode=street` + `sanitizeRoundStreet()` — seuls `id, nom, nom_creole, categorie, difficulte, mapillaryId, credit, indices` partent ; coords/commune/région/wikidata_id jamais avant le guess. **Limitation assumée** : l'`image_key` est publique (la visionneuse appelle Mapillary depuis le navigateur) → un joueur techniquement équipé peut retrouver la position via l'API Mapillary (même propriété que GeoGuessr/Street View ; acceptable en solo sans leaderboard). La visionneuse n'affiche **pas de carte** (mapillary-js n'en a pas par défaut), donc aucun spoiler visuel.
|
||||
- **Visionneuse** : `StreetPanel.svelte`, lazy load façon MapLibre (`import('mapillary-js')` + CSS — chunk séparé ~1 MB, 0 occurrence dans le bundle initial), `component.cover: false`, `moveTo()` avec état d'erreur (image retirée → message + round suivant possible). Token `PUBLIC_MAPILLARY_TOKEN` via `$env/dynamic/public` (pattern `PUBLIC_TILES_URL`) : **token client**, conçu par Mapillary pour être exposé côté navigateur.
|
||||
- **Réutilisation sans modification** : `GameMap`, `ResultPanel`, `WikiFiche`, scoring (`scoreGuess`/`skipResult` acceptent `Lieu | StreetLieu`), timer, indices, bouton « Passer ». `RoundPlace.photo` devient optionnel (`mapillaryId`/`credit` ajoutés) ; lookup unifié `getLieuById` (2 corpus) pour `/api/guess`, `getLieuPhotoById` conservé pour le défi et le proxy photo.
|
||||
- **Hors scope v1** : street dans `/defi/[seed]` et `/explorer`, cache SW des tuiles Mapillary (les requêtes `graph.mapillary.com`/FBCDN passent en direct).
|
||||
|
||||
+14
-1
@@ -1,6 +1,8 @@
|
||||
# JWE v2 — Guide de déploiement auto-hébergé
|
||||
|
||||
Cible : un petit VPS (1 vCPU / 1 Go RAM suffit) sous Debian/Ubuntu, derrière nginx ou Caddy. Aucun service propriétaire, aucune clé API.
|
||||
Cible : un petit VPS (1 vCPU / 1 Go RAM suffit) sous Debian/Ubuntu, derrière nginx ou Caddy. Aucun service propriétaire, aucune clé API payante.
|
||||
|
||||
> **Exception documentée (mode street)** : le 5e mode « An lari a » utilise la visionneuse Mapillary (images CC BY-SA 4.0, lib MIT) et requiert un **token client Mapillary gratuit** — voir §2.1. Sans ce token, les 4 autres modes fonctionnent normalement ; seul le mode street affiche un message d'indisponibilité.
|
||||
|
||||
## 1. Application SvelteKit
|
||||
|
||||
@@ -32,6 +34,7 @@ WorkingDirectory=/srv/jwe/app
|
||||
Environment=PORT=3000
|
||||
Environment=ORIGIN=https://jwe.o-k-i.net
|
||||
Environment=PUBLIC_TILES_URL=https://tiles.o-k-i.net/styles/oki/style.json
|
||||
Environment=PUBLIC_MAPILLARY_TOKEN=MLY|xxxxxxxx|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
ExecStart=/usr/bin/node build
|
||||
Restart=on-failure
|
||||
|
||||
@@ -39,6 +42,16 @@ Restart=on-failure
|
||||
WantedBy=multi-user.target
|
||||
```
|
||||
|
||||
## 2.1 Token Mapillary (mode street « An lari a »)
|
||||
|
||||
1. Créez un compte sur [mapillary.com](https://www.mapillary.com) puis une application sur le [dashboard développeurs](https://www.mapillary.com/dashboard/developers) : récupérez le **client token** (format `MLY|…|…`).
|
||||
2. Exposez-le via `PUBLIC_MAPILLARY_TOKEN` (service systemd ci-dessus, ou `app/.env` en développement — voir `app/.env.example`). C'est un **token client** : conçu pour être visible côté navigateur, rate-limité par application — ce n'est pas un secret.
|
||||
3. Vérifiez périodiquement le corpus street (images parfois retirées par leurs auteurs) :
|
||||
|
||||
```bash
|
||||
cd app && node scripts/validate-street.mjs # lit le token depuis .env
|
||||
```
|
||||
|
||||
## 2. Reverse proxy (exemple nginx)
|
||||
|
||||
```nginx
|
||||
|
||||
Reference in New Issue
Block a user