Restructure & change a lot of this

.vscode/sftp.json

@@ -0,0 +1,12 @@
+{
+    "name": "My Server",
+    "host": "192.168.68.100",
+    "protocol": "sftp",
+    "port": 22,
+    "username": "root",
+"password": "9982",
+    "remotePath": "/var/www/nameacolor.lncvrt.xyz",
+    "uploadOnSave": true,
+    "useTempFile": false,
+    "openSsh": false
+}

config/captcha.php

@@ -1,3 +0,0 @@
-<?php
-$sitekey = "";
-$secretkey = "";

get.php

@@ -0,0 +1,11 @@
+<?php
+include __DIR__ . "/incl/util.php";
+header("Content-Type: application/json");
+
+$conn = connectToDatabase();
+
+$stmt = $conn->prepare("SELECT * FROM colors ORDER BY timestamp DESC");
+$stmt->execute();
+$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+echo json_encode($result);

incl/db.php

@@ -1,15 +0,0 @@
-<?php
-function connectToDatabase() {
-    include __DIR__ . "/../config/connection.php";
-    try {
-        $dsn = "mysql:host=$dbhost;dbname=$dbname;port=$dbport";
-        $options = [
-            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
-            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
-        ];
-        $conn = new PDO($dsn, $dbusername, $dbpass, $options);
-    } catch (PDOException $e) {
-        die("Failed to connect to database: " . $e->getMessage());
-    }
-    return $conn;
-}

incl/util.php

@@ -1,4 +1,19 @@
 <?php
 function formatWithCommas($number) {
     return number_format($number, 0, '.', ',');
+}
+
+function connectToDatabase() {
+    include __DIR__ . "/../config/connection.php";
+    try {
+        $dsn = "mysql:host=$dbhost;dbname=$dbname;port=$dbport";
+        $options = [
+            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+        ];
+        $conn = new PDO($dsn, $dbusername, $dbpass, $options);
+    } catch (PDOException $e) {
+        die("Failed to connect to database: " . $e->getMessage());
+    }
+    return $conn;
 }

index.php

@@ -1,7 +1,5 @@
 <?php
-include __DIR__ . "/../config/captcha.php";
+include __DIR__ . "/incl/util.php";
-include __DIR__ . "/../incl/db.php";
-include __DIR__ . "/../incl/util.php";
 
 $conn = connectToDatabase();
 
@@ -12,8 +10,6 @@ $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
 $total = 255 * 255 * 255;
 $named = count($result);
 $remaining = $total - $named;
-
-$lastInsertId = $_GET['highlight'] ?? null;
 ?>
 <!DOCTYPE html>
 <html lang="en">
@@ -25,7 +21,6 @@ $lastInsertId = $_GET['highlight'] ?? null;
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://challenges.cloudflare.com">
     <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
-    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
     <style>
         body {
             font-family: "Lexend", sans-serif;
@@ -63,13 +58,14 @@ $lastInsertId = $_GET['highlight'] ?? null;
         document.addEventListener('DOMContentLoaded', () => {
             const usedColors = <?= json_encode(array_column($result, 'color')) ?>;
             const usedNames = <?= json_encode(array_column($result, 'name')) ?>;
+            const form = document.querySelector('form');
             const colorInput = document.querySelector('.color-picker');
             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;
+            const colorContainer = document.querySelector(".colors");
 
             colorInput.value = '#<?= bin2hex(random_bytes(3)) ?>';
 
@@ -80,9 +76,7 @@ $lastInsertId = $_GET['highlight'] ?? null;
                     submit.disabled = true;
                 } else {
                     usedColorText.style.display = 'none';
-                    if (captchaComplete) {
+                    submit.disabled = false;
-                        submit.disabled = false;
-                    }
                 }
             };
 
@@ -92,24 +86,52 @@ $lastInsertId = $_GET['highlight'] ?? null;
                     submit.disabled = true;
                 } else {
                     usedNameText.style.display = 'none';
-                    if (captchaComplete) {
+                    submit.disabled = false;
-                        submit.disabled = false;
-                    }
                 }
             };
 
-            turnstile.ready(function () {
-                turnstile.render(".cf-turnstile", {
-                    sitekey: "<?= $sitekey ?>",
-                    callback: function (token) {
-                        captchaComplete = true;
-                        submit.disabled = false;
-                    },
-                });
-            });
-
             colorInput.addEventListener('input', checkColor);
             nameInput.addEventListener('input', checkName);
+            form.addEventListener('submit', async (e) => {
+                e.preventDefault();
+
+                const response = await fetch('/upload.php?' + new URLSearchParams(new FormData(form)));
+                const text = await response.text()
+                if (text == "-1") {
+                    alert("Invalid color")
+                } else if (text == "-2") {
+                    alert("Name too short")
+                } else if (text == "-3") {
+                    alert("Name too long")
+                } else if (text == "-4") {
+                    alert("Color already taken")
+                } else if (text == "-5") {
+                    alert("Name already taken")
+                } else {
+                    colorContainer?.firstElementChild?.classList.remove("highlight");
+
+                    const namedColor = document.createElement("div");
+                    namedColor.className = "named-color highlight";
+
+                    const color = document.createElement("div");
+                    color.className = "color";
+                    color.style.background = colorInput.value;
+
+                    const p = document.createElement("p");
+                    p.textContent = `${nameInput.value} • ${colorInput.value}`;
+
+                    namedColor.appendChild(color);
+                    namedColor.appendChild(p);
+                    colorContainer.prepend(namedColor);
+
+                    usedColors.push(colorInput.value)
+                    usedNames.push(btoa(nameInput.value))
+
+                    colorInput.value = `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
+                    nameInput.value = "";
+                }
+            });
+
             checkColor();
             checkName();
         });
@@ -120,7 +142,7 @@ $lastInsertId = $_GET['highlight'] ?? null;
     <p><?= formatWithCommas($named) ?>/<?= formatWithCommas($total) ?> colors named (<?= formatWithCommas($remaining) ?> left)</p>
     <hr>
     <h2>Name your own color!</h2>
-    <form action="upload.php" method="post">
+    <form>
         <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>
@@ -128,18 +150,19 @@ $lastInsertId = $_GET['highlight'] ?? null;
         <label for="name">Name:</label>
         <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>
+        <button type="submit" class="submit-button">Name it!</button>
-        <div class="cf-turnstile" style="margin-top: 8px;"></div>
     </form>
     <hr>
     <h2>Colors that were named</h2>
+    <div class="colors">
     <?php
     foreach ($result as $row) {
-        echo "<div class=\"named-color" . ($lastInsertId != null && $lastInsertId == $row['id'] && ($row['timestamp'] > time() - 10) ? " highlight" : "") . "\">";
+        echo "<div class=\"named-color\">";
         echo "<div class=\"color\" style=\"background: #" . $row['color'] . ";\"></div>";
         echo "<p>" . htmlspecialchars(base64_decode($row['name'])) . " &bull; #" . $row["color"] . "</p>";
         echo "</div>";
     }
     ?>
+    </div>
 </body>
 </html>

upload.php

@@ -0,0 +1,52 @@
+<?php
+include __DIR__ . "/incl/util.php";
+header("Content-Type: text/plain");
+
+$time = time();
+$conn = connectToDatabase();
+$color = $_GET['color'];
+$name = $_GET['name'];
+
+$color = ltrim($color, '#');
+if (!preg_match('/^[a-f0-9]{6}$/i', $color)) {
+    echo "-1";
+    exit;
+}
+
+if (strlen($name) < 3) {
+    echo "-2";
+    exit;
+}
+
+if (strlen($name) > 50) {
+    echo "-3";
+    exit;
+}
+$name = base64_encode($name);
+
+$stmt = $conn->prepare("SELECT name FROM colors WHERE color = :color");
+$stmt->bindParam(':color', $color);
+$stmt->execute();
+
+if ($stmt->rowCount() > 0) {
+    echo "-4";
+    exit;
+}
+
+$stmt = $conn->prepare("SELECT name FROM colors WHERE name = :name");
+$stmt->bindParam(':name', $name);
+$stmt->execute();
+
+if ($stmt->rowCount() > 0) {
+    echo "-5";
+    exit;
+}
+
+$stmt = $conn->prepare("INSERT INTO colors (color, name, timestamp) VALUES (:color, :name, :time)");
+$stmt->bindParam(':color', $color);
+$stmt->bindParam(':name', $name);
+$stmt->bindParam(':time', $time);
+$stmt->execute();
+$lastInsertId = $conn->lastInsertId();
+
+echo "1:" . $lastInsertId;

webroot/upload.php

@@ -1,87 +0,0 @@
-<?php
-include __DIR__ . "/../config/captcha.php";
-include __DIR__ . "/../incl/db.php";
-
-$time = time();
-
-if ($_SERVER['REQUEST_METHOD'] === 'POST') {
-    $ip = $_SERVER["HTTP_CF_CONNECTING_IP"];
-    $token = $_POST['cf-turnstile-response'] ?? '';
-    $url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
-
-    $data = [
-        'secret' => $secretkey,
-        'response' => $token,
-        'remoteip' => $ip,
-    ];
-
-    $ch = curl_init($url);
-    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
-    curl_setopt($ch, CURLOPT_POST, true);
-    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
-
-    $result = curl_exec($ch);
-    curl_close($ch);
-
-    if ($result !== false) {
-        $outcome = json_decode($result, true);
-
-        if (!isset($outcome['success']) || !$outcome['success']) {
-            echo "Invalid Captcha";
-            exit;
-        }
-    } else {
-        echo "Couldn't validate Captcha";
-        exit;
-    }
-
-    $conn = connectToDatabase();
-
-    $color = $_POST['color'];
-    $name = base64_encode($_POST['name'] ?? '');
-
-    $color = ltrim($color, '#');
-    if (!preg_match('/^[a-f0-9]{6}$/i', $color)) {
-        echo "Invalid color";
-        exit;
-    }
-
-    if (strlen($name) < 3) {
-        echo "Name too short";
-        exit;
-    }
-
-    if (strlen($name) > 50) {
-        echo "Name too long";
-        exit;
-    }
-
-    $stmt = $conn->prepare("SELECT name FROM colors WHERE color = :color");
-    $stmt->bindParam(':color', $color);
-    $stmt->execute();
-
-    if ($stmt->rowCount() > 0) {
-        echo "Color already taken";
-        exit;
-    }
-
-    $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) VALUES (:color, :name, :time)");
-    $stmt->bindParam(':color', $color);
-    $stmt->bindParam(':name', $name);
-    $stmt->bindParam(':time', $time);
-    $stmt->execute();
-    $lastInsertId = $conn->lastInsertId();
-    header("Location: /?highlight=$lastInsertId");
-    exit;
-}
-
-header("Location: /");