init v2 app

lib/components/pokemon_tile.dart

@@ -1,50 +1,84 @@
 import 'package:flutter/material.dart';
 import '../models/pokemon.dart';
 
-// Widget qui permet d'afficher un pokémon
-// Elle prend en paramètre un pokémon
-// Elle affiche l'image du pokémon, son nom et son numéro
-// Elle permet également de naviguer vers la page de détail du pokémon
-class PokemonTile extends StatefulWidget {
+class PokemonTile extends StatelessWidget {
   const PokemonTile(this.pokemon, {Key? key}) : super(key: key);
 
   final Pokemon pokemon;
 
-  @override
-  State<PokemonTile> createState() => _PokemonTileState();
-}
-
-class _PokemonTileState extends State<PokemonTile> {
   @override
   Widget build(BuildContext context) {
+    // If not caught, we don't allow navigating to the detail page (to force guessing)
     return GestureDetector(
-      onTap: () {
-        // Lorsqu'on tap sur le widget, on navigue vers la page de détail du pokémon
-        // On utilise la méthode Navigator.pushNamed pour naviguer vers la page de détail
-        // On passe en paramètre du Navigator le contexte et la route de la page de détail
-        // on utilise "widget.pokemon" pour accéder au pokémon passé en paramètre; widget représente l'instance de la classe PokemonTile
-        Navigator.pushNamed(context, "/pokemon-detail", arguments: widget.pokemon);
-      },
+      onTap: pokemon.isCaught ? () {
+        Navigator.pushNamed(context, "/pokemon-detail", arguments: pokemon);
+      } : null,
       child: Container(
-        height: 150,
-        margin: const EdgeInsets.all(10),
+        height: 80,
+        margin: const EdgeInsets.only(bottom: 12),
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
         decoration: BoxDecoration(
-          border: Border.all(color: Colors.black),
-          borderRadius: BorderRadius.circular(10),
+          color: const Color(0xFFE2EBF0), // lighter grey for tile surface
+          borderRadius: BorderRadius.circular(4),
+          border: Border.all(color: Colors.white, width: 2),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black.withAlpha(25),
+              blurRadius: 2,
+              offset: const Offset(2, 2),
+            )
+          ]
         ),
-        padding: const EdgeInsets.all(10),
-        child: Center(
-          child: Column(
-            children: [
-              Image.network(widget.pokemon.imageUrl, height: 100),
-              Text(widget.pokemon.formatedName, 
-                style: const TextStyle(
-                  fontWeight: FontWeight.bold, 
-                  fontSize: 16
-                ),
+        child: Row(
+          children: [
+            // Image box
+            Container(
+              width: 60,
+              height: 60,
+              decoration: BoxDecoration(
+                color: pokemon.isCaught ? const Color(0xFF78909C) : Colors.grey[700],
+                border: Border.all(color: Colors.white, width: 2),
+                borderRadius: BorderRadius.circular(4),
               ),
-            ],
-          )
+              child: pokemon.isCaught 
+                ? Image.network(pokemon.imageUrl, fit: BoxFit.contain)
+                : const SizedBox.expand(),
+            ),
+            const SizedBox(width: 16),
+            
+            // Name texts
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text(
+                    'No. ${pokemon.id.toString().padLeft(3, '0')}',
+                    style: TextStyle(
+                      fontSize: 12,
+                      fontWeight: FontWeight.bold,
+                      color: Colors.grey[600],
+                    ),
+                  ),
+                  const SizedBox(height: 4),
+                  Text(
+                    pokemon.isCaught ? pokemon.formatedName.toUpperCase() : '???',
+                    style: TextStyle(
+                      fontSize: 22,
+                      fontWeight: FontWeight.bold,
+                      color: pokemon.isCaught ? Colors.black87 : Colors.grey[500],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            
+            // Caught check icon
+            if (pokemon.isCaught)
+              const Icon(Icons.check_circle, color: Colors.green, size: 28)
+            else
+              Icon(Icons.help, color: Colors.grey[400], size: 24),
+          ],
         ),
       ),
     );