Étape 3 – Contenu de la page "Monde Pokémon"

🎯 Objectifs de l’étape

Dans cette étape, vous allez enrichir la page Monde Pokémon avec une image interactive et du texte structuré.

Vous apprendrez à :

• afficher une image responsive avec Vuetify,
• structurer une page avec des titres et paragraphes,
• Créer du style CSS unique à ce compoant avec <style scoped>,
• (bonus) afficher une boîte de dialogue avec l’image en grand format au clic.

🧭 Où écrire le code ?

Tout le travail se fait dans le fichier src/pages/KantoMap.vue.

🧩 À faire

1. Styler le titre avec Vuetify

• Centrez le titre de la page avec la classe text-center.
• Ajoutez une marge (margin) de 6 unités en bas du titre avec la classe mb-6.

2. Afficher une image

• Utilisez le composant <v-img> pour afficher l'image de la carte du monde Pokémon.
• Le fichier image se trouve dans public/images/. Pour l’afficher, utilisez le chemin /images/pokemon-map.png.
• Ajoutez un texte alternatif (alt) pour l’image : Carte du monde Pokémon.
• Ajoutez la classe cursor-pointer pour que le curseur change au survol de l’image.
• Vérifiez que l’image s’affiche correctement, sans débordement.

3. Ajouter un texte explicatif

• Sous l’image, ajoutez le contenu ci-après dans une <v-card>
• Ajouter une marge (margin) de 8 unités en haut et en bas de la carte avec la classe my-8.

<h2>Un univers fascinant à découvrir</h2>
<p>Le monde Pokémon est un vaste et merveilleux univers peuplé de créatures
    extraordinaires appelées Pokémon. Cette
    carte représente les différentes régions que les dresseurs peuvent explorer,
    chacune offrant ses propres défis,
    Pokémon uniques et aventures palpitantes.</p>

<h2>Des régions diversifiées</h2>
<p>De Kanto à Galar, en passant par Johto, Hoenn, Sinnoh, Unova, Kalos et Alola,
    chaque région du monde Pokémon possède
    sa propre identité, sa culture et son écosystème unique. Les paysages
    varient des montagnes enneigées aux îles
    tropicales, offrant une diversité incroyable d'habitats pour les différentes
    espèces de Pokémon.</p>

<h2>Un monde en constante évolution</h2>
<p>Le monde Pokémon est en perpétuelle expansion, avec de nouvelles régions, de
    nouvelles espèces de Pokémon et de
    nouvelles aventures qui sont régulièrement découvertes. Cette carte n'est
    qu'un aperçu d'un univers riche et en
    constante évolution, prêt à être exploré par les dresseurs audacieux.</p>

<h2>Un appel à l'aventure</h2>
<p>Que vous soyez un dresseur débutant ou expérimenté, le monde Pokémon vous
    invite à partir à l'aventure. Capturez de
    nouveaux Pokémon, affrontez des champions d'arènes, déjouez les plans des
    équipes malveillantes et devenez peut-être
    le prochain Maître Pokémon. L'aventure commence ici, sur cette carte, mais
    où vous mènera-t-elle ?</p>

4. Ajouter du style

Afin d'aérer le texte, ajoutez des marges entre les titres et les paragraphes.

• Utilisez <style scoped> pour que le style ne s’applique qu’à ce composant.
• Ajoutez une marge (margin) de 1em en haut et .5em en bas de chaque titre h2.

5. (Bonus) Agrandir l’image au clic

• Rendez l’image cliquable avec @click.
• Lors du clic, ouvrez une boîte de dialogue contenant une version agrandie de l’image avec <v-dialog>.
• Utilisez une variable réactive (ref) pour ouvrir/fermer la boîte.

📘 Astuces

• Commencez par l’image seule.
• Puis ajoutez le texte structuré.
• Enfin, essayez d’implémenter la boîte de dialogue (facultatif).

🔗 Références utiles

• Vuetify – Image (v-img)
• Vuetify – Card (v-card)
• Vuetify – Dialog ( v-dialog)

📦 Solution

🗂️ src/pages/KantoMap.vue

<template>
  <!--
  Conteneur principal avec une largeur maximale et centré

    * max-width="800px" limite la largeur à 800px pour un affichage compact et centré
  -->
  <v-container max-width="600px">
    <!--
    Titre de la page
      * class="mb-6" ajoute une Marge en Bas de 6 unités
      * class="text-center" centre le texte
    -->
    <h1 class="mb-6 text-center">Le Monde Pokémon</h1>

    <!--
    Image de la carte du monde Pokémon
      * alt fournit une description pour l'accessibilité
      * class="cursor-pointer" change le curseur pour indiquer que l'image est cliquable
      * src définit le chemin de l'image
      * @click déclenche l'ouverture du dialogue d'image
    -->
    <v-img
            alt="Carte du monde Pokémon"
            class="cursor-pointer"
            src="/images/pokemon-map.png"
            @click="dialog = true"
    />

    <!--
    Carte de présentation du monde Pokémon
      * class="my-8" ajoute une Marge en Bas et en Haut de 8 unités
    -->
    <v-card class="my-8">
      <v-card-text>
        <h2>Un univers fascinant à découvrir</h2>
        <p>Le monde Pokémon est un vaste et merveilleux univers peuplé de créatures extraordinaires appelées Pokémon. Cette carte représente les différentes régions que les dresseurs peuvent explorer, chacune offrant ses propres défis, Pokémon uniques et aventures palpitantes.</p>

        <h2>Des régions diversifiées</h2>
        <p>De Kanto à Galar, en passant par Johto, Hoenn, Sinnoh, Unova, Kalos et Alola, chaque région du monde Pokémon possède sa propre identité, sa culture et son écosystème unique. Les paysages varient des montagnes enneigées aux îles tropicales, offrant une diversité incroyable d'habitats pour les différentes espèces de Pokémon.</p>

        <h2>Un monde en constante évolution</h2>
        <p>Le monde Pokémon est en perpétuelle expansion, avec de nouvelles régions, de nouvelles espèces de Pokémon et de nouvelles aventures qui sont régulièrement découvertes. Cette carte n'est qu'un aperçu d'un univers riche et en constante évolution, prêt à être exploré par les dresseurs audacieux.</p>

        <h2>Un appel à l'aventure</h2>
        <p>Que vous soyez un dresseur débutant ou expérimenté, le monde Pokémon vous invite à partir à l'aventure. Capturez de nouveaux Pokémon, affrontez des champions d'arènes, déjouez les plans des équipes malveillantes et devenez peut-être le prochain Maître Pokémon. L'aventure commence ici, sur cette carte, mais où vous mènera-t-elle ?</p>
      </v-card-text>
    </v-card>

    <!--
    Dialogue pour afficher la carte en grand format
      * v-model="dialog" contrôle l'affichage du dialogue, si true le dialogue est ouvert
    -->
    <v-dialog v-model="dialog">
      <v-card>
        <!-- Image de la carte en grand format dans le dialogue -->
        <v-img alt="Carte du monde Pokémon" src="/images/pokemon-map.png" />
        <!--
        Template (zone) pour les actions du dialogue
          * #actions permet de définir le contenu de la section d'actions du dialogue
        -->
        <template #actions>
          <!--
          Bouton pour fermer la dialogue
            * @click met à false la variable dialog pour fermer le dialogue
          -->
          <v-btn @click="dialog = false">Fermer</v-btn>
        </template>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script setup>
  // Importation de la fonction "ref" depuis Vue pour créer des variables réactives
  import { ref } from 'vue'

  /* Déclaration de la variable réactive "dialog" pour contrôler l'affichage du dialogue
    - ref(false) initialise "dialog" à false (fermé par défaut)
  */
  const dialog = ref(false)
</script>

<style scoped>
  /* Style pour le composant
    - l'attribut "scoped" limite l'application de ce style uniquement à ce composant
  */
  h2 {
    margin-top: 1em;
    margin-bottom: .5em;
  }
</style>