Add competitor functionality and enhance Pokémon management features

v2/actions.js

@@ -0,0 +1,104 @@
+document.querySelector("#register-pokemon").addEventListener("click", registerPokemon);
+document.querySelector("#edit-pokemon").addEventListener("click", editPokemon);
+document.querySelector("#delete-pokemon").addEventListener("click", deletePokemon);
+
+function registerPokemon() {
+  const name = prompt("Enter Pokémon name:");
+  const id = prompt("Enter Pokémon ID:");
+  const height = prompt("Enter Pokémon height:");
+  const weight = prompt("Enter Pokémon weight:");
+  const base_experience = prompt("Enter Pokémon base experience:");
+  const species_url = prompt("Enter Pokémon species URL:");
+  const image_url = prompt("Enter Pokémon image URL:");
+
+  if (name && id && height && weight && base_experience && species_url && image_url) {
+    fetch(`./register-pokemon.php`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ name, id, height, weight, base_experience, species_url, image_url }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.success) {
+          alert("Pokémon registered successfully!");
+          location.reload();
+        } else {
+          alert("Failed to register Pokémon.");
+        }
+      })
+      .catch((error) => {
+        console.error("Error registering Pokémon:", error);
+      });
+  } else {
+    alert("All fields are required.");
+  }
+}
+
+function editPokemon() {
+  const id = prompt("Enter Pokémon ID to edit:");
+  if (!id) {
+    alert("Pokémon ID is required.");
+    return;
+  }
+
+  const name = prompt("Enter new Pokémon name:");
+  const height = prompt("Enter new Pokémon height:");
+  const weight = prompt("Enter new Pokémon weight:");
+  const base_experience = prompt("Enter new Pokémon base experience:");
+  const species_url = prompt("Enter new Pokémon species URL:");
+  const image_url = prompt("Enter new Pokémon image URL:");
+
+  if (name && height && weight && base_experience && species_url && image_url) {
+    fetch(`./edit-pokemon.php`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ id, name, height, weight, base_experience, species_url, image_url }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.success) {
+          alert("Pokémon edited successfully!");
+          location.reload();
+        } else {
+          alert("Failed to edit Pokémon.");
+        }
+      })
+      .catch((error) => {
+        console.error("Error editing Pokémon:", error);
+      });
+  } else {
+    alert("All fields are required.");
+  }
+}
+
+function deletePokemon() {
+  const id = prompt("Enter Pokémon ID to delete:");
+  if (!id) {
+    alert("Pokémon ID is required.");
+    return;
+  }
+
+  fetch(`./delete-pokemon.php`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ id }),
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      if (data.success) {
+        alert("Pokémon marked as deleted successfully!");
+        location.reload();
+      } else {
+        alert("Failed to mark Pokémon as deleted.");
+      }
+    })
+    .catch((error) => {
+      console.error("Error marking Pokémon as deleted:", error);
+    });
+}

v2/delete-pokemon.php

@@ -0,0 +1,45 @@
+<?php
+$servername = "localhost:3306";
+$username = "database1";
+$password = "181t$1lJg";
+$dbname = "pokedex1";
+
+// Set the custom log file path
+$logFile = __DIR__ . '/error_log.txt';
+
+// Function to log messages
+function logMessage($message) {
+    global $logFile;
+    error_log($message . "\n", 3, $logFile);
+}
+
+$conn = new mysqli($servername, $username, $password, $dbname);
+
+if ($conn->connect_error) {
+    logMessage("Connection failed: " . $conn->connect_error);
+    die("Connection failed: " . $conn->connect_error);
+}
+
+header("Content-Type: application/json");
+
+$data = json_decode(file_get_contents("php://input"), true);
+
+if (isset($data['id'])) {
+    $id = intval($data['id']);
+    $sql = "UPDATE pokemon SET deleted = 1 WHERE id = $id";
+    logMessage("Executing query: $sql");
+
+    if ($conn->query($sql) === TRUE) {
+        logMessage("Pokémon marked as deleted successfully.");
+        echo json_encode(["success" => true]);
+    } else {
+        logMessage("Error: " . $conn->error);
+        echo json_encode(["success" => false, "error" => $conn->error]);
+    }
+} else {
+    logMessage("Invalid input data.");
+    echo json_encode(["success" => false, "error" => "Invalid input data."]);
+}
+
+$conn->close();
+?>

v2/error_log.txt

@@ -0,0 +1,4 @@
+Executing query: SELECT user_id, COUNT(pokemon_id) AS pokemon_count
+        FROM user_pokemon
+        GROUP BY user_id
+        ORDER BY pokemon_count DESC

v2/get-competitors.php

@@ -0,0 +1,41 @@
+<?php
+$servername = "localhost:3306";
+$username = "database1";
+$password = "181t$1lJg";
+$dbname = "pokedex1";
+
+// Set the custom log file path
+$logFile = __DIR__ . '/error_log.txt';
+
+// Function to log messages
+function logMessage($message) {
+    global $logFile;
+    error_log($message . "\n", 3, $logFile);
+}
+
+$conn = new mysqli($servername, $username, $password, $dbname);
+
+if ($conn->connect_error) {
+    logMessage("Connection failed: " . $conn->connect_error);
+    die("Connection failed: " . $conn->connect_error);
+}
+
+header("Cache-Control: max-age=86400"); // Cache for 24 hours
+
+// Fetch competitors data
+$sql = "SELECT user_id, COUNT(pokemon_id) AS pokemon_count
+        FROM user_pokemon
+        GROUP BY user_id
+        ORDER BY pokemon_count DESC";
+logMessage("Executing query: $sql");
+$result = $conn->query($sql);
+
+$competitors = [];
+while ($row = $result->fetch_assoc()) {
+    $competitors[] = $row;
+}
+logMessage("Query result: " . json_encode($competitors));
+echo json_encode($competitors);
+
+$conn->close();
+?>

v2/get-pokemon.php

@@ -32,7 +32,7 @@ if (isset($_GET['id'])) {
             LEFT JOIN pokemon_abilities pa ON p.id = pa.pokemon_id
             LEFT JOIN abilities a ON pa.ability_id = a.id
             LEFT JOIN stats st ON p.id = st.pokemon_id
-            WHERE p.id = $id
+            WHERE p.id = $id AND p.deleted = 0
             GROUP BY p.id";
     logMessage("Executing query: $sql");
     $result = $conn->query($sql);
@@ -48,7 +48,7 @@ if (isset($_GET['id'])) {
         echo json_encode(["error" => "No Pokémon found"]);
     }
 } else {
-    $sql = "SELECT * FROM pokemon";
+    $sql = "SELECT * FROM pokemon WHERE deleted = 0";
     logMessage("Executing query: $sql");
     $result = $conn->query($sql);
 

v2/index.html

@@ -90,6 +90,11 @@
               </div>
             </div>
           </div>
+          <div class="actions-wrapper">
+            <button id="register-pokemon" class="action-button">Register Pokémon</button>
+            <button id="edit-pokemon" class="action-button">Edit Pokémon</button>
+            <button id="delete-pokemon" class="action-button">Delete Pokémon</button>
+          </div>
         </div>
       </header>
       <section class="pokemon-list">
@@ -110,6 +115,17 @@
         </div>
         <div id="not-found-message">Pokemon not found</div>
       </section>
+      <section class="competitors-list">
+        <div class="container">
+          <h2>Competitors</h2>
+          <div class="list-wrapper" id="competitors-wrapper">
+            <!-- Competitors will be displayed here -->
+          </div>
+        </div>
+      </section>
     </main>
+    <script src="./pokemon.js" defer></script>
+    <script src="./search.js" defer></script>
+    <script src="./actions.js" defer></script>
   </body>
 </html>

v2/pokemon.js

@@ -7,6 +7,7 @@ const numberDescFilter = document.querySelector("#number-desc");
 const nameAscFilter = document.querySelector("#name-asc");
 const nameDescFilter = document.querySelector("#name-desc");
 const notFoundMessage = document.querySelector("#not-found-message");
+const competitorsWrapper = document.querySelector("#competitors-wrapper");
 
 let allPokemons = [];
 let filteredPokemons = [];
@@ -18,8 +19,9 @@ document.addEventListener("DOMContentLoaded", () => {
   if (cachedData && cacheTimestamp && (Date.now() - cacheTimestamp) < CACHE_DURATION) {
     allPokemons = JSON.parse(cachedData);
     console.log("Loaded Pokémon data from cache:", allPokemons);
-    filteredPokemons = allPokemons;
+    filteredPokemons = allPokemons.filter(pokemon => !pokemon.deleted);
     displayPokemons(filteredPokemons);
+    fetchCompetitors();
   } else {
     fetchPokemons();
   }
@@ -37,8 +39,9 @@ function fetchPokemons() {
         localStorage.setItem("pokemons", JSON.stringify(allPokemons));
         localStorage.setItem("pokemons_timestamp", Date.now().toString());
         console.log("Fetched and cached Pokémon data:", allPokemons);
-        filteredPokemons = allPokemons;
+        filteredPokemons = allPokemons.filter(pokemon => !pokemon.deleted);
         displayPokemons(filteredPokemons);
+        fetchCompetitors();
       } else {
         console.error("Unexpected response format:", data);
       }
@@ -165,7 +168,7 @@ function handleSearch() {
   filteredPokemons = allPokemons.filter((pokemon) => {
     const pokemonID = pokemon.id.toString();
     const pokemonName = pokemon.name.toLowerCase();
-    return pokemonID.startsWith(searchTerm) || pokemonName.startsWith(searchTerm);
+    return (pokemonID.startsWith(searchTerm) || pokemonName.startsWith(searchTerm)) && !pokemon.deleted;
   });
 
   displayPokemons(filteredPokemons);
@@ -197,7 +200,42 @@ closeButton.addEventListener("click", clearSearch);
 function clearSearch() {
   console.log("Clearing search input and displaying all Pokémon...");
   searchInput.value = "";
-  filteredPokemons = allPokemons;
+  filteredPokemons = allPokemons.filter(pokemon => !pokemon.deleted);
   displayPokemons(filteredPokemons);
   notFoundMessage.style.display = "none";
 }
+
+function fetchCompetitors() {
+  console.log("Fetching competitors data from server...");
+  fetch(`./get-competitors.php`)
+    .then((response) => response.json())
+    .then((data) => {
+      console.log("Competitors data:", data);
+      displayCompetitors(data);
+    })
+    .catch((error) => {
+      console.error("Error fetching competitors data:", error);
+    });
+}
+
+function displayCompetitors(competitors) {
+  competitorsWrapper.innerHTML = "";
+
+  competitors.forEach((competitor) => {
+    const listItem = document.createElement("div");
+    listItem.className = "list-item";
+    listItem.innerHTML = `
+        <div class="number-wrap">
+            <p class="caption-fonts">#${competitor.id}</p>
+        </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>
+        </div>
+    `;
+
+    competitorsWrapper.appendChild(listItem);
+  });
+}

v2/register-pokemon.php

@@ -0,0 +1,53 @@
+<?php
+$servername = "localhost:3306";
+$username = "database1";
+$password = "181t$1lJg";
+$dbname = "pokedex1";
+
+// Set the custom log file path
+$logFile = __DIR__ . '/error_log.txt';
+
+// Function to log messages
+function logMessage($message) {
+    global $logFile;
+    error_log($message . "\n", 3, $logFile);
+}
+
+$conn = new mysqli($servername, $username, $password, $dbname);
+
+if ($conn->connect_error) {
+    logMessage("Connection failed: " . $conn->connect_error);
+    die("Connection failed: " . $conn->connect_error);
+}
+
+header("Content-Type: application/json");
+
+$data = json_decode(file_get_contents("php://input"), true);
+
+if (isset($data['id'], $data['name'], $data['height'], $data['weight'], $data['base_experience'], $data['species_url'], $data['image_url'])) {
+    $id = intval($data['id']);
+    $name = $conn->real_escape_string($data['name']);
+    $height = intval($data['height']);
+    $weight = intval($data['weight']);
+    $base_experience = intval($data['base_experience']);
+    $species_url = $conn->real_escape_string($data['species_url']);
+    $image_url = $conn->real_escape_string($data['image_url']);
+
+    $sql = "INSERT INTO pokemon (id, name, height, weight, base_experience, species_url, image_url)
+            VALUES ($id, '$name', $height, $weight, $base_experience, '$species_url', '$image_url')";
+    logMessage("Executing query: $sql");
+
+    if ($conn->query($sql) === TRUE) {
+        logMessage("Pokémon registered successfully.");
+        echo json_encode(["success" => true]);
+    } else {
+        logMessage("Error: " . $conn->error);
+        echo json_encode(["success" => false, "error" => $conn->error]);
+    }
+} else {
+    logMessage("Invalid input data.");
+    echo json_encode(["success" => false, "error" => "Invalid input data."]);
+}
+
+$conn->close();
+?>

v2/style.css

@@ -530,3 +530,37 @@ div#not-found-message {
   border-color: transparent;
   background-color: transparent;
 }
+
+.actions-wrapper {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.action-button {
+  padding: 10px 20px;
+  background-color: var(--identity-primary);
+  color: var(--grayscale-white);
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.action-button:hover {
+  background-color: darken(var(--identity-primary), 10%);
+}
+
+.competitors-list {
+  margin-top: 20px;
+}
+
+.competitors-list h2 {
+  text-align: center;
+  color: var(--grayscale-dark);
+}
+
+#competitors-wrapper {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}