diff --git a/components/explorer/PlaceCard.tsx b/components/explorer/PlaceCard.tsx index a0b3855..26c0a1b 100644 --- a/components/explorer/PlaceCard.tsx +++ b/components/explorer/PlaceCard.tsx @@ -32,6 +32,11 @@ export default function PlaceCard({ place }: PlaceCardProps) { src={place.image} alt={place.name} className="w-full h-full object-cover" + style={{ + imageRendering: 'auto', + } as React.CSSProperties} + loading="lazy" + fetchPriority="high" onError={() => setImageError(true)} /> ) : ( diff --git a/dist/compagnon-lagon-beta.apk b/dist/compagnon-lagon-beta.apk index 82e3253..e2cfd5f 100644 Binary files a/dist/compagnon-lagon-beta.apk and b/dist/compagnon-lagon-beta.apk differ diff --git a/scripts/README-IMAGES-HD.md b/scripts/README-IMAGES-HD.md new file mode 100644 index 0000000..99145d5 --- /dev/null +++ b/scripts/README-IMAGES-HD.md @@ -0,0 +1,91 @@ +# Guide pour télécharger les images en haute résolution + +Ce guide explique comment télécharger les images Google Maps en haute résolution pour améliorer la qualité d'affichage dans l'application. + +## Méthode 1 : Utiliser le script Node.js (Recommandé) + +### Étape 1 : Obtenir les URLs d'images depuis Google Maps + +Pour chaque lieu, suivez ces étapes : + +1. **Ouvrez le lien Google Maps** du lieu dans votre navigateur +2. **Faites défiler** jusqu'à voir les photos du lieu +3. **Cliquez sur une photo** pour l'agrandir +4. **Faites un clic droit** sur l'image agrandie > **Inspecter l'élément** +5. **Trouvez l'URL de l'image** dans le code HTML (généralement sur `googleusercontent.com`) +6. **Copiez l'URL complète** de l'image + +### Étape 2 : Modifier l'URL pour haute résolution + +Les URLs Google Maps contiennent des paramètres de taille comme `w=203-h=152`. Pour obtenir une meilleure résolution : + +- Remplacez `w=203` par `w=1600` (ou `w=2048` pour encore plus de qualité) +- Remplacez `h=152` par `h=1200` (ou `h=1536` pour encore plus de qualité) + +**Exemple :** +``` +URL originale: https://lh3.googleusercontent.com/...w=203-h=152-k-no +URL haute rés: https://lh3.googleusercontent.com/...w=1600-h=1200-k-no +``` + +### Étape 3 : Configurer le script + +Éditez le fichier `scripts/download-high-res-images.js` et ajoutez vos URLs dans le tableau `IMAGES_TO_DOWNLOAD` : + +```javascript +const IMAGES_TO_DOWNLOAD = [ + { + name: "Snack du Requin Dormeur", + url: "https://lh3.googleusercontent.com/...w=1600-h=1200-k-no", + outputFile: "restaurant-requin-dormeur.jpg" + }, + { + name: "Snack Kori Kori", + url: "https://lh3.googleusercontent.com/...w=1600-h=1200-k-no", + outputFile: "restaurant-kori-kori.jpg" + }, + // ... ajoutez les autres images +]; +``` + +### Étape 4 : Exécuter le script + +```bash +node scripts/download-high-res-images.js +``` + +Le script téléchargera toutes les images configurées dans le dossier `public/images/`. + +## Méthode 2 : Téléchargement manuel + +Si vous préférez télécharger manuellement : + +1. Suivez les étapes 1 et 2 ci-dessus pour obtenir les URLs en haute résolution +2. Ouvrez chaque URL dans votre navigateur +3. Faites un clic droit > **Enregistrer l'image sous...** +4. Enregistrez dans `public/images/` avec le bon nom de fichier + +## Images à télécharger + +Voici la liste des images qui proviennent de Google Maps et qui peuvent être améliorées : + +- `restaurant-requin-dormeur.jpg` - Snack du Requin Dormeur +- `restaurant-kori-kori.jpg` - Snack Kori Kori +- `plage-cocotier-pk9.jpg` - Plage PK 9 +- `phare-topaka.jpg` - Ancien Phare de Topaka +- `epicerie-tumoana.jpg` - Tumoana Markets +- `snack-chez-elda.jpg` - Snack Chez Elda + +## Résolution recommandée + +- **Minimum** : 1200x800 pixels +- **Recommandé** : 1600x1200 pixels +- **Maximum** : 2048x1536 pixels (pour éviter des fichiers trop lourds) + +## Notes importantes + +- Les URLs Google Maps peuvent expirer après un certain temps +- Si une URL ne fonctionne plus, vous devrez la récupérer à nouveau depuis Google Maps +- Les images haute résolution seront plus lourdes, mais la qualité d'affichage sera bien meilleure +- Le composant `PlaceCard` a été optimisé pour un meilleur rendu des images + diff --git a/scripts/download-high-res-images.js b/scripts/download-high-res-images.js new file mode 100755 index 0000000..60d31a2 --- /dev/null +++ b/scripts/download-high-res-images.js @@ -0,0 +1,153 @@ +#!/usr/bin/env node + +/** + * Script pour télécharger les images Google Maps en haute résolution + * + * Usage: + * node scripts/download-high-res-images.js + * + * Ce script télécharge les images depuis les URLs Google Maps en modifiant + * les paramètres de taille pour obtenir une meilleure résolution. + */ + +const fs = require('fs'); +const path = require('path'); +const https = require('https'); +const http = require('http'); + +const IMAGES_DIR = path.join(__dirname, '..', 'public', 'images'); + +// Configuration des images à télécharger +// Format: { name, url, outputFile } +// Les URLs doivent être les URLs directes des images Google Maps (googleusercontent.com) +// Pour obtenir ces URLs: +// 1. Ouvrez le lien Google Maps dans un navigateur +// 2. Faites un clic droit sur l'image > Inspecter l'élément +// 3. Copiez l'URL de l'image (généralement sur googleusercontent.com) +// 4. Modifiez les paramètres w=XXX par w=1600 et h=YYY par h=1200 dans l'URL +const IMAGES_TO_DOWNLOAD = [ + // Exemple (à remplacer par les vraies URLs): + // { + // name: "Snack du Requin Dormeur", + // url: "https://lh3.googleusercontent.com/...w=1600-h=1200-k-no", + // outputFile: "restaurant-requin-dormeur.jpg" + // }, +]; + +/** + * Télécharge une image depuis une URL + */ +function downloadImage(url, outputPath) { + return new Promise((resolve, reject) => { + const protocol = url.startsWith('https') ? https : http; + + const file = fs.createWriteStream(outputPath); + + protocol.get(url, (response) => { + if (response.statusCode === 200) { + response.pipe(file); + file.on('finish', () => { + file.close(); + resolve(); + }); + } else if (response.statusCode === 301 || response.statusCode === 302) { + // Suivre les redirections + file.close(); + fs.unlinkSync(outputPath); + downloadImage(response.headers.location, outputPath) + .then(resolve) + .catch(reject); + } else { + file.close(); + fs.unlinkSync(outputPath); + reject(new Error(`Erreur HTTP ${response.statusCode}`)); + } + }).on('error', (err) => { + file.close(); + if (fs.existsSync(outputPath)) { + fs.unlinkSync(outputPath); + } + reject(err); + }); + }); +} + +/** + * Vérifie si un fichier est une image valide + */ +function isValidImage(filePath) { + try { + const stats = fs.statSync(filePath); + if (stats.size === 0) return false; + + // Vérifier l'extension + const ext = path.extname(filePath).toLowerCase(); + return ['.jpg', '.jpeg', '.png', '.webp'].includes(ext); + } catch (err) { + return false; + } +} + +/** + * Fonction principale + */ +async function main() { + console.log('========================================'); + console.log('📥 Téléchargement images haute résolution'); + console.log('========================================\n'); + + // Créer le dossier images s'il n'existe pas + if (!fs.existsSync(IMAGES_DIR)) { + fs.mkdirSync(IMAGES_DIR, { recursive: true }); + } + + if (IMAGES_TO_DOWNLOAD.length === 0) { + console.log('⚠️ Aucune URL d\'image configurée dans le script.\n'); + console.log('Pour télécharger des images en haute résolution:'); + console.log('1. Ouvrez le lien Google Maps dans un navigateur'); + console.log('2. Faites un clic droit sur l\'image > Inspecter l\'élément'); + console.log('3. Copiez l\'URL de l\'image (généralement sur googleusercontent.com)'); + console.log('4. Modifiez les paramètres w=XXX par w=1600 et h=YYY par h=1200'); + console.log('5. Ajoutez l\'URL dans le tableau IMAGES_TO_DOWNLOAD du script\n'); + console.log('Exemple d\'URL Google Maps image:'); + console.log('https://lh3.googleusercontent.com/gps-cs-s/...w=1600-h=1200-k-no\n'); + return; + } + + let successCount = 0; + let failCount = 0; + + for (const image of IMAGES_TO_DOWNLOAD) { + const outputPath = path.join(IMAGES_DIR, image.outputFile); + + console.log(`📸 Téléchargement: ${image.name}`); + console.log(` URL: ${image.url.substring(0, 80)}...`); + + try { + await downloadImage(image.url, outputPath); + + if (isValidImage(outputPath)) { + const stats = fs.statSync(outputPath); + const sizeMB = (stats.size / (1024 * 1024)).toFixed(2); + console.log(` ✅ Téléchargé: ${image.outputFile} (${sizeMB} MB)\n`); + successCount++; + } else { + console.log(` ❌ Fichier invalide: ${image.outputFile}\n`); + failCount++; + } + } catch (error) { + console.log(` ❌ Erreur: ${error.message}\n`); + failCount++; + } + } + + console.log('========================================'); + console.log('✅ Téléchargement terminé'); + console.log('========================================'); + console.log(`✅ Succès: ${successCount}`); + console.log(`❌ Échecs: ${failCount}\n`); +} + +// Exécuter le script +main().catch(console.error); + diff --git a/scripts/download-high-res-images.sh b/scripts/download-high-res-images.sh new file mode 100755 index 0000000..1eadc35 --- /dev/null +++ b/scripts/download-high-res-images.sh @@ -0,0 +1,113 @@ +#!/bin/bash + +# Script pour télécharger les images Google Maps en haute résolution +# Usage: ./scripts/download-high-res-images.sh + +set -e + +IMAGES_DIR="public/images" +RESOLUTION="1600x1200" # Haute résolution + +echo "==========================================" +echo "📥 Téléchargement images haute résolution" +echo "==========================================" +echo "" + +# Fonction pour télécharger une image Google Maps en haute résolution +download_google_maps_image() { + local image_url=$1 + local output_file=$2 + local place_name=$3 + + echo "📸 Téléchargement: $place_name" + + # Extraire l'URL de l'image depuis l'URL Google Maps + # Les URLs Google Maps contiennent souvent des paramètres w= et h= pour la taille + # On va remplacer ces paramètres par des valeurs plus élevées + + # Si l'URL contient déjà des paramètres de taille, on les remplace + if [[ $image_url == *"w="* ]] && [[ $image_url == *"h="* ]]; then + # Remplacer w=XXX par w=1600 et h=YYY par h=1200 + high_res_url=$(echo "$image_url" | sed 's/w=[0-9]*/w=1600/g' | sed 's/h=[0-9]*/h=1200/g') + else + # Si pas de paramètres de taille, on essaie d'ajouter des paramètres + # Note: Google Maps peut ne pas accepter tous les paramètres, donc on utilise l'URL telle quelle + high_res_url="$image_url" + fi + + # Télécharger l'image + if curl -L -f -s "$high_res_url" -o "$output_file" 2>/dev/null; then + # Vérifier que le fichier est valide + if file "$output_file" | grep -q "image"; then + local size=$(du -h "$output_file" | cut -f1) + echo " ✅ Téléchargé: $output_file ($size)" + return 0 + else + echo " ❌ Fichier invalide: $output_file" + rm -f "$output_file" + return 1 + fi + else + echo " ⚠️ Échec du téléchargement (URL peut-être invalide ou expirée)" + return 1 + fi +} + +# Liste des images Google Maps à télécharger en haute résolution +# Format: "URL_IMAGE|FICHIER_SORTIE|NOM_LIEU" + +declare -a IMAGES=( + # Ces URLs doivent être extraites depuis les liens Google Maps + # Pour obtenir l'URL de l'image, il faut: + # 1. Ouvrir le lien Google Maps dans un navigateur + # 2. Faire un clic droit sur l'image > Inspecter l'élément + # 3. Copier l'URL de l'image (généralement sur googleusercontent.com) + # 4. Modifier les paramètres w= et h= pour augmenter la résolution + + # Exemple (à remplacer par les vraies URLs): + # "https://lh3.googleusercontent.com/...w=1600-h=1200...|restaurant-requin-dormeur.jpg|Snack du Requin Dormeur" +) + +if [ ${#IMAGES[@]} -eq 0 ]; then + echo "⚠️ Aucune URL d'image configurée dans le script." + echo "" + echo "Pour télécharger des images en haute résolution:" + echo "1. Ouvrez le lien Google Maps dans un navigateur" + echo "2. Faites un clic droit sur l'image > Inspecter l'élément" + echo "3. Copiez l'URL de l'image (généralement sur googleusercontent.com)" + echo "4. Modifiez les paramètres w=XXX par w=1600 et h=YYY par h=1200" + echo "5. Ajoutez l'URL dans le tableau IMAGES du script" + echo "" + echo "Exemple d'URL Google Maps image:" + echo "https://lh3.googleusercontent.com/gps-cs-s/...w=1600-h=1200-k-no" + exit 0 +fi + +# Créer le dossier images s'il n'existe pas +mkdir -p "$IMAGES_DIR" + +# Télécharger chaque image +success_count=0 +fail_count=0 + +for image_data in "${IMAGES[@]}"; do + IFS='|' read -r url output_file place_name <<< "$image_data" + + output_path="$IMAGES_DIR/$output_file" + + if download_google_maps_image "$url" "$output_path" "$place_name"; then + ((success_count++)) + else + ((fail_count++)) + fi + + echo "" +done + +echo "==========================================" +echo "✅ Téléchargement terminé" +echo "==========================================" +echo "✅ Succès: $success_count" +echo "❌ Échecs: $fail_count" +echo "" +