feat: add match.js renderer and battle UI styles

public/js/storage.js

@@ -188,14 +188,63 @@ async function startMatch() {
   }
   const data = await res.json();
   if (data.match) {
-    setCurrentMatch(data.match);
-    window.location.href = '/';
+    setCurrentMatch({ matchId: data.matchId, match: data.match, turnToken: data.turnToken });
+    window.location.href = '/matches/current';
   } else {
     // eslint-disable-next-line no-alert
     alert(`Start match failed: ${data.errors ? data.errors.join(', ') : 'unknown'}`);
   }
 }
 
+async function startBundledMatch(id) {
+  if (typeof id !== 'string' || !/^[a-z0-9-]+$/.test(id)) {
+    return;
+  }
+  const csrf = getCsrfToken();
+  let manifest;
+  try {
+    const res = await fetch(`/scenarios/bundled/${encodeURIComponent(id)}`);
+    if (!res.ok) {
+      // eslint-disable-next-line no-alert
+      alert(`Could not load scenario: HTTP ${res.status}`);
+      return;
+    }
+    manifest = await res.json();
+  } catch (e) {
+    // eslint-disable-next-line no-alert
+    alert(`Network error: ${e.message}`);
+    return;
+  }
+  let response;
+  try {
+    response = await fetch(`/scenarios/${encodeURIComponent(id)}/start`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': csrf,
+      },
+      body: JSON.stringify(manifest),
+    });
+  } catch (e) {
+    // eslint-disable-next-line no-alert
+    alert(`Network error: ${e.message}`);
+    return;
+  }
+  if (!response.ok) {
+    // eslint-disable-next-line no-alert
+    alert(`Start match failed: HTTP ${response.status}`);
+    return;
+  }
+  const data = await response.json();
+  if (data.match && data.matchId && data.turnToken) {
+    setCurrentMatch({ matchId: data.matchId, match: data.match, turnToken: data.turnToken });
+    window.location.href = '/matches/current';
+  } else {
+    // eslint-disable-next-line no-alert
+    alert(`Start match failed: ${(data.errors || ['unknown']).join(', ')}`);
+  }
+}
+
 window.bfStorage = {
   load,
   save,
@@ -204,6 +253,7 @@ window.bfStorage = {
   currentMatch,
   setCurrentMatch,
   removeCurrentMatch,
+  startBundledMatch,
 };
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -216,4 +266,12 @@ document.addEventListener('DOMContentLoaded', () => {
       startMatch();
     });
   }
+  document.querySelectorAll('[data-bf-bundle]').forEach((button) => {
+    button.addEventListener('click', () => {
+      const id = button.getAttribute('data-bf-bundle');
+      if (id) {
+        startBundledMatch(id);
+      }
+    });
+  });
 });