Enhance competitors data fetching with Pokémon details and update UI display

populate-user-pokemon.sql

@@ -0,0 +1,124 @@
+USE pokedex;
+
+-- Populate the user_pokemon table with random user IDs and Pokémon IDs
+INSERT INTO user_pokemon (user_id, pokemon_id) VALUES
+(101, 25),
+(202, 6),
+(303, 150),
+(404, 1),
+(505, 4),
+(606, 7),
+(707, 143),
+(808, 94),
+(909, 131),
+(123, 248),
+(234, 12),
+(345, 78),
+(456, 89),
+(567, 123),
+(678, 456),
+(789, 789),
+(890, 321),
+(111, 654),
+(222, 987),
+(333, 100),
+(1, 25),
+(2, 6),
+(3, 150),
+(4, 1),
+(5, 4),
+(6, 7),
+(7, 143),
+(8, 94),
+(9, 131),
+(10, 248),
+(11, 12),
+(12, 78),
+(13, 89),
+(14, 123),
+(15, 456),
+(16, 789),
+(17, 321),
+(18, 654),
+(19, 987),
+(20, 100),
+(21, 200),
+(22, 300),
+(23, 400),
+(24, 500),
+(25, 600),
+(26, 700),
+(27, 800),
+(28, 900),
+(29, 1000),
+(30, 50),
+(31, 75),
+(32, 90),
+(33, 110),
+(34, 120),
+(35, 140),
+(36, 160),
+(37, 180),
+(38, 190),
+(39, 210),
+(40, 220),
+(41, 230),
+(42, 240),
+(43, 260),
+(44, 270),
+(45, 280),
+(46, 290),
+(47, 310),
+(48, 320),
+(49, 330),
+(50, 340),
+(51, 350),
+(52, 360),
+(53, 370),
+(54, 380),
+(55, 390),
+(56, 400),
+(57, 410),
+(58, 420),
+(59, 430),
+(60, 440),
+(61, 450),
+(62, 460),
+(63, 470),
+(64, 480),
+(65, 490),
+(66, 500),
+(67, 510),
+(68, 520),
+(69, 530),
+(70, 540),
+(71, 550),
+(72, 560),
+(73, 570),
+(74, 580),
+(75, 590),
+(76, 600),
+(77, 610),
+(78, 620),
+(79, 630),
+(80, 640),
+(81, 650),
+(82, 660),
+(83, 670),
+(84, 680),
+(85, 690),
+(86, 700),
+(87, 710),
+(88, 720),
+(89, 730),
+(90, 740),
+(91, 750),
+(92, 760),
+(93, 770),
+(94, 780),
+(95, 790),
+(96, 800),
+(97, 810),
+(98, 820),
+(99, 830),
+(100, 840);

v2/get-competitors.php

@@ -27,10 +27,11 @@ header("Cache-Control: max-age=86400"); // Cache for 24 hours
 header("Content-Type: application/json"); // Ensure JSON response
 
 try {
-    // Fetch competitors data
-    $sql = "SELECT user_id, COUNT(pokemon_id) AS pokemon_count
-            FROM user_pokemon
-            GROUP BY user_id
+    // Fetch competitors data with Pokémon details
+    $sql = "SELECT u.user_id, COUNT(u.pokemon_id) AS pokemon_count, p.name, p.image_url
+            FROM user_pokemon u
+            JOIN pokemon p ON u.pokemon_id = p.id
+            GROUP BY u.user_id, p.name, p.image_url
             ORDER BY pokemon_count DESC";
     logMessage("Executing query: $sql");
     $result = $conn->query($sql);

v2/pokemon.js

@@ -246,13 +246,16 @@
       listItem.className = "list-item";
       listItem.innerHTML = `
           <div class="number-wrap">
-              <p class="caption-fonts">#${competitor.id}</p>
+              <p class="caption-fonts">User ID: ${competitor.user_id}</p>
+          </div>
+          <div class="img-wrap">
+              <img src="${competitor.image_url}" alt="${competitor.name}" />
           </div>
           <div class="name-wrap">
               <p class="body3-fonts">${competitor.name}</p>
           </div>
           <div class="pokemon-count">
-              <p class="body3-fonts">Pokémon: ${competitor.pokemon_count}</p>
+              <p class="body3-fonts">Pokémon Count: ${competitor.pokemon_count}</p>
           </div>
       `;