Fix sorting, add what hex is selected, and make names unique, and add a delete option, if the user's hashed ip is the current ip of the usre

database.sql

@@ -3,7 +3,7 @@
 -- https://www.phpmyadmin.net/
 --
 -- Host: 127.0.0.1:3306
--- Generation Time: Mar 08, 2025 at 06:43 AM
+-- Generation Time: Mar 08, 2025 at 05:27 PM
 -- Server version: 11.4.3-MariaDB-1
 -- PHP Version: 8.3.11
 
@@ -31,7 +31,8 @@ CREATE TABLE `colors` (
   `id` int(11) NOT NULL,
   `name` text NOT NULL,
   `color` char(6) NOT NULL,
-  `timestamp` int(11) NOT NULL
+  `timestamp` int(11) NOT NULL,
+  `hostname` char(64) DEFAULT NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_uca1400_ai_ci;
 
 --

webroot/assets/delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M267.33-120q-27.5 0-47.08-19.58-19.58-19.59-19.58-47.09V-740H160v-66.67h192V-840h256v33.33h192V-740h-40.67v553.33q0 27-19.83 46.84Q719.67-120 692.67-120H267.33Zm425.34-620H267.33v553.33h425.34V-740Zm-328 469.33h66.66v-386h-66.66v386Zm164 0h66.66v-386h-66.66v386ZM267.33-740v553.33V-740Z"/></svg>

webroot/delete.php

@@ -0,0 +1,16 @@
+<?php
+include __DIR__ . "/config/captcha.php";
+include __DIR__ . "/incl/db.php";
+
+$hostname = hash('sha256', $_SERVER["HTTP_CF_CONNECTING_IP"]);
+
+$conn = connectToDatabase();
+
+$id = $_GET['id'];
+
+$stmt = $conn->prepare("DELETE FROM colors WHERE id = :id AND hostname = :hostname");
+$stmt->bindParam(':id', $id);
+$stmt->bindParam(':hostname', $hostname);
+$stmt->execute();
+
+header("Location: /");

webroot/index.php

@@ -10,7 +10,7 @@ $stmt->execute();
 $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
 usort($result, function($a, $b) {
-    return strtotime($b['timestamp']) - strtotime($a['timestamp']);
+    return strcmp($b['timestamp'], $a['timestamp']);
 });
 
 $lastInsertId = $_GET['highlight'] ?? null;
@@ -47,6 +47,12 @@ $lastInsertId = $_GET['highlight'] ?? null;
             border: 2px solid #006eff
         }
 
+        .color {
+            width: 128px;
+            height: 128px;
+            border-radius: 5px;
+        }
+
         .used-text {
             display: none;
             color: red;
@@ -55,19 +61,36 @@ $lastInsertId = $_GET['highlight'] ?? null;
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             const usedColors = <?= json_encode(array_column($result, 'color')) ?>;
+            const usedNames = <?= json_encode(array_column($result, 'name')) ?>;
             const colorInput = document.querySelector('.color-picker');
-            const element = document.querySelector('.used-text');
+            const nameInput = document.querySelector('.name-input');
+            const usedColorText = document.querySelector('.used-color');
+            const usedNameText = document.querySelector('.used-text');
+            const colorValue = document.querySelector('.color-value');
             const submit = document.querySelector('.submit-button');
             let captchaComplete = false;
 
             colorInput.value = '#<?= bin2hex(random_bytes(3)) ?>';
 
             const checkColor = () => {
+                colorValue.innerText = `Hex: ${colorInput.value}`;
                 if (usedColors.includes(colorInput.value.substr(1))) {
-                    element.style.display = 'block';
+                    usedColorText.style.display = 'block';
                     submit.disabled = true;
                 } else {
-                    element.style.display = 'none';
+                    usedColorText.style.display = 'none';
+                    if (captchaComplete) {
+                        submit.disabled = false;
+                    }
+                }
+            };
+
+            const checkName = () => {
+                if (usedNames.includes(btoa(nameInput.value))) {
+                    usedNameText.style.display = 'block';
+                    submit.disabled = true;
+                } else {
+                    usedNameText.style.display = 'none';
                     if (captchaComplete) {
                         submit.disabled = false;
                     }
@@ -85,7 +108,9 @@ $lastInsertId = $_GET['highlight'] ?? null;
             });
 
             colorInput.addEventListener('input', checkColor);
+            nameInput.addEventListener('input', checkName);
             checkColor();
+            checkName();
         });
     </script>
 </head>
@@ -94,11 +119,13 @@ $lastInsertId = $_GET['highlight'] ?? null;
     <hr>
     <h2>Name your own color!</h2>
     <form action="upload.php" method="post">
-        <p class="used-text">This color has already been named!</p>
+        <p class="used-color">This color has already been named!</p>
+        <p class="used-text">This name has already been used!</p>
         <label for="color">Color:</label>
         <input type="color" id="color" name="color" class="color-picker" required>
         <label for="name">Name:</label>
-        <input type="text" id="name" name="name" maxlength="50" required>
+        <input type="text" id="name" name="name" maxlength="50" class="name-input" required>
+        <label class="color-value"></label>
         <button type="submit" class="submit-button" disabled>Name it!</button>
         <div class="cf-turnstile"></div>
     </form>
@@ -106,9 +133,12 @@ $lastInsertId = $_GET['highlight'] ?? null;
     <h2>Colors that were named</h2>
     <?php
     foreach ($result as $row) {
-        echo "<div class=\"named-color" . ($lastInsertId != null && $lastInsertId == $row['id'] ? " highlight" : "") . "\">";
+        echo "<div class=\"named-color" . ($lastInsertId != null && $lastInsertId == $row['id'] && ($row['timestamp'] > time() - 10) ? " highlight" : "") . "\">";
-        echo "<div style=\"width: 128px; height: 128px; background: #" . $row['color'] . ";\"></div>";
+        echo "<div class=\"color\" style=\"background: #" . $row['color'] . ";\"></div>";
         echo "<p>" . htmlspecialchars(base64_decode($row['name'])) . " &bull; #". $row["color"] ."</p>";
+        if ($row['hostname'] == hash('sha256', $_SERVER["HTTP_CF_CONNECTING_IP"])) {
+            echo "<img src=\"assets/delete.svg\" alt=\"Delete\" style=\"cursor: pointer; width: 24px; height: 24px;\" onclick=\"window.location.href='delete.php?id=" . $row['id'] . "'\">";
+        }
         echo "</div>";
     }
     ?>

webroot/upload.php

@@ -3,6 +3,7 @@ include __DIR__ . "/config/captcha.php";
 include __DIR__ . "/incl/db.php";
 
 $time = time();
+$hostname = hash('sha256', $_SERVER["HTTP_CF_CONNECTING_IP"]);
 
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 
@@ -66,10 +67,20 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         exit;
     }
 
-    $stmt = $conn->prepare("INSERT INTO colors (color, name, timestamp) VALUES (:color, :name, :time)");
+    $stmt = $conn->prepare("SELECT name FROM colors WHERE name = :name");
+    $stmt->bindParam(':name', $name);
+    $stmt->execute();
+
+    if ($stmt->rowCount() > 0) {
+        echo "Name already taken";
+        exit;
+    }
+
+    $stmt = $conn->prepare("INSERT INTO colors (color, name, timestamp, hostname) VALUES (:color, :name, :time, :hostname)");
     $stmt->bindParam(':color', $color);
     $stmt->bindParam(':name', $name);
     $stmt->bindParam(':time', $time);
+    $stmt->bindParam(':hostname', $hostname);
     $stmt->execute();
     $lastInsertId = $conn->lastInsertId();
     header("Location: /?highlight=$lastInsertId");