From 3ab09190c86f75a9e9096b211aaf3bb91804f0a4 Mon Sep 17 00:00:00 2001
From: overflowerror <mail@overflowerror.com>
Date: Sun, 4 Aug 2024 14:08:50 +0200
Subject: [PATCH] feat: Add New Pairing button

---
 html/index.php                  |  4 ++++
 html/styles/main.css            | 19 +++++++++++++++++++
 view/fragments/mobSelection.php |  8 ++++++++
 3 files changed, 31 insertions(+)

diff --git a/html/index.php b/html/index.php
index e932135..ac002ab 100644
--- a/html/index.php
+++ b/html/index.php
@@ -36,6 +36,10 @@ function reload(): void {
 }
 
 function newPairing(): array {
+    if ($_REQUEST["csrfToken"] != $_SESSION["csrfToken"]) {
+        return [$_SESSION["left"], $_SESSION["right"]];
+    }
+
     return makeInitialPairing(session_id());
 }
 
diff --git a/html/styles/main.css b/html/styles/main.css
index 8275936..f7ecf8d 100644
--- a/html/styles/main.css
+++ b/html/styles/main.css
@@ -151,6 +151,25 @@ h2 {
     position: relative;
 }
 
+.separator .new-pairing {
+    position: absolute;
+    width: 100%;
+    bottom: 5vw;
+    text-align: center;
+}
+
+.separator .new-pairing a, .separator .new-pairing a:visited  {
+    text-decoration: none;
+    color: black;
+    border-radius: 3px;
+    display: inline-block;
+    padding: 10px;
+}
+
+.separator .new-pairing a:hover {
+    text-decoration: underline;
+}
+
 .middle {
     width: 100%;
     position: absolute;
diff --git a/view/fragments/mobSelection.php b/view/fragments/mobSelection.php
index 55b369b..87505a0 100644
--- a/view/fragments/mobSelection.php
+++ b/view/fragments/mobSelection.php
@@ -6,6 +6,14 @@
 
 ?>
     <div class="separator">
+        <div class="new-pairing">
+            <a href="?new&csrfToken=<?= $csrfToken ?? "" ?>" onclick="return false;"
+               data-hx-get="?ajax&new&csrfToken=<?= $csrfToken ?? "" ?>" data-hx-target=".selection" data-hx-swap="outerHTML"
+               data-hx-ext="img-preload" data-loading-callback="startSpinner()" data-loaded-callback="stopSpinner()"
+            >
+                New Pairing <i class="fa fa-rotate-right"></i>
+            </a>
+        </div>
     </div>
 <?php