FIX

components/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app-bar app color="deep-purple accent-4" dark>
-    <v-toolbar-title @click="$router.push('/')" class="text-white">Mon pokédex</v-toolbar-title>
+    <v-toolbar-title @click="$router.push('/')" class="text-white cursor-pointer">Mon pokédex</v-toolbar-title>
   </v-app-bar>
 </template>
 <script>

pages/index.vue

@@ -1,19 +1,16 @@
 <template>
-  <div class="p-4">
+  <div class="p-4" @scroll.passive="onScroll" ref="scrollContainer" style="height: 80vh; overflow-y: auto;">
     <GenerationFilter :selected="selectedGen" @change="onGenChange" />
-
     <v-container>
       <v-row>
-        <v-col cols="12" class="text-center" v-if="loading">
-          <v-progress-circular indeterminate color="primary" size="48" />
-        </v-col>
-
         <PokemonCard
-          v-for="poke in pokemons"
+          v-for="poke in displayedPokemons"
           :key="poke.pokedex_id"
           :pokemon="poke"
-          v-if="!loading"
         />
+        <v-col cols="12" class="text-center" v-if="loadingMore">
+          <v-progress-circular indeterminate color="primary" size="48" />
+        </v-col>
       </v-row>
     </v-container>
   </div>
@@ -29,8 +26,13 @@ export default {
   data() {
     return {
       selectedGen: 0,
-      pokemons: [],
+      allPokemons: [],
+      displayedPokemons: [],
       loading: false,
+      loadingMore: false,
+      batchSize: 20,
+      offset: 0,
+      noMoreData: false,
     }
   },
   async mounted() {
@@ -42,21 +44,45 @@ export default {
       try {
         const res = await axios.get('https://tyradex.vercel.app/api/v1/pokemon')
         const all = res.data
-        if (this.selectedGen === 0) {
-          this.pokemons = all
-        } else {
-          this.pokemons = all.filter(p => p.generation === this.selectedGen)
-        }
+        this.allPokemons = this.selectedGen === 0 ? all : all.filter(p => p.generation === this.selectedGen)
+        this.offset = 0
+        this.noMoreData = false
+        this.displayedPokemons = []
+        this.loadMore()
       } catch (error) {
         console.error('Erreur lors du chargement des pokémons :', error)
-        this.pokemons = []
+        this.allPokemons = []
+        this.displayedPokemons = []
       } finally {
         this.loading = false
       }
     },
+    loadMore() {
+      if (this.noMoreData) return
+
+      this.loadingMore = true
+      setTimeout(() => {
+        const nextBatch = this.allPokemons.slice(this.offset, this.offset + this.batchSize)
+        this.displayedPokemons.push(...nextBatch)
+        this.offset += this.batchSize
+        if (this.offset >= this.allPokemons.length) {
+          this.noMoreData = true
+        }
+        this.loadingMore = false
+      }, 500)
+    },
     async onGenChange(gen) {
       this.selectedGen = gen
       await this.loadPokemons()
+    },
+    onScroll() {
+      const container = this.$refs.scrollContainer
+      if (!container) return
+      if (container.scrollTop + container.clientHeight >= container.scrollHeight - 100) {
+        if (!this.loadingMore && !this.noMoreData) {
+          this.loadMore()
+        }
+      }
     }
   }
 }

pages/pokemon/_id.vue

@@ -2,20 +2,16 @@
   <v-container class="py-10">
     <v-card v-if="pokemon" class="mx-auto max-w-xl p-6">
       <h1 class="text-3xl font-bold mb-4">{{ pokemon.name.fr }}</h1>
-
-      <!-- Carousel sprites -->
-      <v-carousel hide-delimiter-background height="200" class="mb-6">
+      <v-carousel hide-delimiter-background height="400" class="mb-6">
         <v-carousel-item
           v-for="(sprite, index) in availableSprites"
           :key="index"
         >
-          <img :src="sprite.url" :alt="sprite.label" class="mx-auto h-40" />
+          <img :src="sprite.url" :alt="sprite.label" class="mx-auto h-80" />
           <div class="text-center mt-2 font-semibold">{{ sprite.label }}</div>
         </v-carousel-item>
       </v-carousel>
-
       <p><strong>Génération :</strong> {{ pokemon.generation }}</p>
-
       <div class="mb-4">
         <strong>Types :</strong>
         <span v-for="type in pokemon.types" :key="type.name" class="inline-flex items-center mr-3">
@@ -23,7 +19,6 @@
           {{ type.name }}
         </span>
       </div>
-
       <div class="mb-4">
         <strong>Talents :</strong>
         <ul>
@@ -32,7 +27,6 @@
           </li>
         </ul>
       </div>
-
       <div class="mb-4">
         <strong>Stats :</strong>
         <v-simple-table dense>
@@ -46,7 +40,6 @@
           </tbody>
         </v-simple-table>
       </div>
-
       <div class="mb-4">
         <strong>Résistances :</strong>
         <div class="flex flex-wrap gap-3">
@@ -61,23 +54,6 @@
           </span>
         </div>
       </div>
-
-      <div class="mb-4">
-        <strong>Évolution :</strong>
-        <div>
-          <div v-if="pokemon.evolution.pre">Précédent: {{ pokemon.evolution.pre.name || 'N/A' }}</div>
-          <div v-if="pokemon.evolution.next && pokemon.evolution.next.length">
-            Suivant:
-            <ul>
-              <li v-for="evo in pokemon.evolution.next" :key="evo.pokedex_id">
-                {{ evo.name }} - {{ evo.condition }}
-              </li>
-            </ul>
-          </div>
-          <div v-if="pokemon.evolution.mega">Méga: {{ pokemon.evolution.mega.name || 'N/A' }}</div>
-        </div>
-      </div>
-
       <div class="mb-4">
         <strong>Taille :</strong> {{ pokemon.height }}<br />
         <strong>Poids :</strong> {{ pokemon.weight }}<br />