From 8498c0d398afef8869b0b9c51d3ed8aebc43b1a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bruno=20Jurkovi=C4=87?= <bruno.jurkovic1@gmail.com>
Date: Mon, 3 Mar 2025 12:11:46 +0100
Subject: [PATCH] simple debouncer preventing join spam

---
 src/client/PublicLobby.ts | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/client/PublicLobby.ts b/src/client/PublicLobby.ts
index 8403cefda..32631203a 100644
--- a/src/client/PublicLobby.ts
+++ b/src/client/PublicLobby.ts
@@ -9,8 +9,10 @@ import { GameInfo } from "../core/Schemas";
 export class PublicLobby extends LitElement {
   @state() private lobbies: GameInfo[] = [];
   @state() public isLobbyHighlighted: boolean = false;
+  @state() private isButtonDebounced: boolean = false;
   private lobbiesInterval: number | null = null;
   private currLobby: GameInfo = null;
+  private debounceDelay: number = 750;
 
   createRenderRoot() {
     return this;
@@ -80,9 +82,13 @@ export class PublicLobby extends LitElement {
     return html`
       <button
         @click=${() => this.lobbyClicked(lobby)}
+        ?disabled=${this.isButtonDebounced}
         class="w-full mx-auto p-4 md:p-6 ${this.isLobbyHighlighted
           ? "bg-gradient-to-r from-green-600 to-green-500"
-          : "bg-gradient-to-r from-blue-600 to-blue-500"} text-white font-medium rounded-xl transition-opacity duration-200 hover:opacity-90"
+          : "bg-gradient-to-r from-blue-600 to-blue-500"} text-white font-medium rounded-xl transition-opacity duration-200 hover:opacity-90 ${this
+          .isButtonDebounced
+          ? "opacity-70 cursor-not-allowed"
+          : ""}"
       >
         <div class="text-lg md:text-2xl font-semibold mb-2">Join next Game</div>
         <div class="flex">
@@ -125,6 +131,18 @@ export class PublicLobby extends LitElement {
   }
 
   private lobbyClicked(lobby: GameInfo) {
+    if (this.isButtonDebounced) {
+      return;
+    }
+
+    // Set debounce state
+    this.isButtonDebounced = true;
+
+    // Reset debounce after delay
+    setTimeout(() => {
+      this.isButtonDebounced = false;
+    }, this.debounceDelay);
+
     if (this.currLobby == null) {
       this.isLobbyHighlighted = true;
       this.currLobby = lobby;