server: use a programmatic dialog for alerts

This element is browser-native but more programmable than traditional
`alert()` calls.

This implements a requested feature: automatically clear all the
`alert`s I missed while I was away. We do this by automatically closing
the dialog after 5s. Impatient users (or engaged players) can close the
dialog immediately by clicking anywhere (though this may not be
obvious).

server.rkt

@@ -320,11 +320,13 @@
          (script ([src "/static/events.js"]))
          ,@common-heads)
        (body
-         (h1 "Frosthaven Manager")
-         ,@(elements-body embed/url)
-         ,@(creatures-body embed/url)
-         ,@(bottom-info-body embed/url)
-         ))))
+        (dialog ([id "dialog"]
+                 [onclick "this.close()"]))
+        (h1 "Frosthaven Manager")
+        ,@(elements-body embed/url)
+        ,@(creatures-body embed/url)
+        ,@(bottom-info-body embed/url)
+        ))))
 
 (define/page (rewards)
   (define players
@@ -514,8 +516,8 @@
                            (list
                             (string-trim (action-script (list "player" "loot") (list id-binding)) ";" #:left? #f)
                             ".then((r) => r.json())"
-                            ".then((j) => { alert(`You got ${j.loot}!`); },"
-                            "      (_) => { alert('The loot deck is empty.'); })"))])
+                            ".then((j) => { showDialog(`You got ${j.loot}!`); },"
+                            "      (_) => { showDialog('The loot deck is empty.'); })"))])
                        "Loot!")))
        (div ([class "smash-inline"])
             (p (select ([id ,(~a "select-conditions-" id)]

static/events.js

@@ -73,5 +73,18 @@ evtSource.addEventListener('text', (event) => {
 
 evtSource.addEventListener('alert', (event) => {
   const text = JSON.parse(event.data);
-  alert(text);
+  showDialog(text);
 });
+
+let dialog;
+function showDialog(text) {
+  if (!dialog) {
+    dialog = document.getElementById('dialog');
+    if (!dialog) return;
+  }
+  dialog.innerHTML = text;
+  dialog.showModal();
+  setTimeout(function () {
+    dialog.close();
+  }, 5000);
+}