feat: closable modal when desynced (openfrontio#214)

![Capture d'écran 2025-03-11
215857](https://github.com/user-attachments/assets/9aec98d9-dd3c-4a00-a257-aa0acb67633c)

Author: ilan-schemoul

src/client/ClientGameRunner.ts

@@ -243,9 +243,9 @@ export class ClientGameRunner {
           "",
           this.lobby.gameID,
           this.lobby.clientID,
+          true,
+          "You are desynced from other players. What you see might differ from other players.",
         );
-        this.stop();
-        return;
       }
       if (message.type == "turn") {
         if (!this.hasJoined) {
@@ -320,12 +320,17 @@ function showErrorModal(
   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! game id: ${gameID}, 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");
@@ -342,11 +347,23 @@ function showErrorModal(
       .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);
 }