feat: Making the game harder to 'beat'

public/js/ui/toast.js

@@ -3,10 +3,23 @@ import { $, h } from './dom.js';
 const DURATION_MS = 6000;
 const MAX_VISIBLE = 3; // a big jump (import, long absence) must not bury the page in messages
 
-export function showToast(message, { error = false } = {}) {
+/**
+ * Show a message for a few seconds.
+ * `sticky` messages are important: they stay until clicked, and routine messages never push them away.
+ */
+export function showToast(message, { error = false, sticky = false } = {}) {
   const container = $('#toasts');
-  const toast = h('p', { class: error ? 'toast toast--error' : 'toast', text: message });
+  const classes = ['toast', error && 'toast--error', sticky && 'toast--sticky'].filter(Boolean);
+  const toast = h('p', { class: classes.join(' '), text: message });
+
+  if (sticky) {
+    toast.setAttribute('role', 'alert');
+    toast.addEventListener('click', () => toast.remove());
+  } else {
+    setTimeout(() => toast.remove(), DURATION_MS);
+  }
   container.append(toast);
-  while (container.children.length > MAX_VISIBLE) container.firstElementChild.remove();
-  setTimeout(() => toast.remove(), DURATION_MS);
+
+  const routine = [...container.children].filter((el) => !el.classList.contains('toast--sticky'));
+  for (const old of routine.slice(0, Math.max(0, routine.length - MAX_VISIBLE))) old.remove();
 }