Add quick match making UI

home.html

@@ -150,19 +150,74 @@
             <button id="join" class="button">join</button>
         </div>
         <div class="or"></div>
-        Public games not added yet.
+        <div id="quick_match_info" style="visibility: hidden;">Searching for a game</div>
+        <button class="button" id="quick_match">quick match</button>
     </div>
 
     <script>
 
+        let dots = 0;
+
+        setInterval(() => {
+            let text = "Searching for a game";
+            for (let i = 0; i < dots; i++) {
+                text += ".";
+            }
+            document.getElementById("quick_match_info").innerText = text;
+            dots += 1;
+            if (dots == 4) {
+                dots = 0;
+            }
+        }, 1000);
+
         document.addEventListener('DOMContentLoaded', () => {
             const code = document.getElementById("code");
             const pat = new RegExp("^[a-z0-9]{4}$")
             document.getElementById("join").addEventListener("click", () => {
-                if (!pat.test(code.value)) {
+                if (!pat.test(code.value.toLowerCase())) {
                     alert("Invalid ID");
                 } else {
-                    window.location.href = window.location.origin + "/" + code.value;
+                    window.location.href = window.location.origin + "/" + code.value.toLowerCase();
+                }
+            });
+            const qm = document.getElementById("quick_match");
+            let matchmaking = -1;
+            let qid = -1;
+            qm.addEventListener("click", () => {
+                if (qm.innerText.toLowerCase() === "cancel") {
+                    qm.innerText = "quick match";
+                    document.getElementById("quick_match_info").style.visibility = "hidden";
+                    clearInterval(-1);
+                } else if (qm.innerText.toLowerCase() === "quick match") {
+                    qm.innerText = "cancel";
+                    document.getElementById("quick_match_info").style.visibility = "visible";
+                    fetch("/quick", {
+                        method: 'POST',
+                    })
+                        .then((response) => response.json())
+                        .then((data) => {
+                            qid = data.queue_id;
+                            matchmaking = setInterval(() => {
+                                fetch("/quick", {
+                                    method: 'POST',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify({ "queue_id": qid }),
+                                })
+                                    .then((response) => response.json())
+                                    .then((data) => {
+                                        if (data.room_id) {
+                                            clearInterval(matchmaking);
+                                            window.location.href = window.location.origin + "/" + data.room_id;
+                                        }
+                                    }).catch((error) => {
+                                        console.error(error);
+                                    })
+                            }, 1500);
+                        }).catch((error) => {
+                            console.error(error);
+                        })
                 }
             });
             document.getElementById("create").addEventListener("click", () => {