feat: Add New Pairing button

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());
 }
 

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;

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