From 48e70ff0e84b27260c448f3e50cf9569075b57d6 Mon Sep 17 00:00:00 2001
From: Ilan Schemoul <ilanschemoul@gmail.com>
Date: Tue, 11 Mar 2025 22:34:55 +0100
Subject: [PATCH] feat: closable modal when desynced (#214)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

![Capture d'écran 2025-03-11
215857](https://github.com/user-attachments/assets/9aec98d9-dd3c-4a00-a257-aa0acb67633c)
---
 src/client/ClientGameRunner.ts | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/client/ClientGameRunner.ts b/src/client/ClientGameRunner.ts
index d0bae57f2..50992f4ee 100644
--- a/src/client/ClientGameRunner.ts
+++ b/src/client/ClientGameRunner.ts
@@ -221,6 +221,8 @@ export class ClientGameRunner {
           `desync from server: ${JSON.stringify(message)}`,
           "",
           this.lobby.clientID,
+          true,
+          "You are desynced from other players. What you see might differ from other players.",
         );
       }
       if (message.type == "turn") {
@@ -291,12 +293,22 @@ export class ClientGameRunner {
   }
 }
 
-function showErrorModal(errMsg: string, stack: string, clientID: ClientID) {
+function showErrorModal(
+  errMsg: string,
+  stack: string,
+  gameID: GameID,
+  clientID: ClientID,
+  closable = false,
+  heading = "Game crashed!",
+) {
   const errorText = `Error: ${errMsg}\nStack: ${stack}`;
-  consolex.error(errorText);
+
+  if (document.querySelector("#error-modal")) {
+    return;
+  }
 
   const modal = document.createElement("div");
-  const content = `Game crashed! client id: ${clientID}\nPlease paste the following in your bug report in Discord:\n${errorText}`;
+  const content = `${heading}\n game id: ${gameID}, client id: ${clientID}\nPlease paste the following in your bug report in Discord:\n${errorText}`;
 
   // Create elements
   const pre = document.createElement("pre");
@@ -313,11 +325,23 @@ function showErrorModal(errMsg: string, stack: string, clientID: ClientID) {
       .catch(() => (button.textContent = "Failed to copy"));
   });
 
+  const closeButton = document.createElement("button");
+  closeButton.textContent = "X";
+  closeButton.style.cssText =
+    "color: white;top: 0px;right: 0px;cursor: pointer;background: red;margin-right: 0px;position: fixed;width: 40px;";
+  closeButton.addEventListener("click", () => {
+    modal.style.display = "none";
+  });
+
   // Add to modal
   modal.style.cssText =
     "position:fixed; padding:20px; background:white; border:1px solid black; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;";
   modal.appendChild(pre);
   modal.appendChild(button);
+  modal.id = "error-modal";
+  if (closable) {
+    modal.appendChild(closeButton);
+  }
 
   document.body.appendChild(modal);
 }