Add final combat polish and saved settings

src/ui/matchForm.js

@@ -1,5 +1,10 @@
 import { NICKNAME_LENGTH } from "../constants.js";
 
+const STORAGE_KEYS = {
+  names: "arena.match.playerNames",
+  teamSize: "arena.match.teamSize",
+};
+
 export function createMatchForm() {
   const form = getElement("#fighter-form");
   const namesInput = getElement("#player-names");
@@ -14,9 +19,14 @@ export function createMatchForm() {
     teamSize: Number(teamSizeInput.value),
   });
 
+  restoreSavedMatchSettings(namesInput, teamSizeInput);
   syncTeamSizeOutput(teamSizeInput, teamSizeOutput);
+  namesInput.addEventListener("input", () => {
+    saveMatchSettings(namesInput, teamSizeInput);
+  });
   teamSizeInput.addEventListener("input", () => {
     syncTeamSizeOutput(teamSizeInput, teamSizeOutput);
+    saveMatchSettings(namesInput, teamSizeInput);
   });
 
   return {
@@ -62,3 +72,63 @@ function nicknameValues(value) {
 function syncTeamSizeOutput(input, output) {
   output.textContent = input.value;
 }
+
+function restoreSavedMatchSettings(namesInput, teamSizeInput) {
+  const storage = getLocalStorage();
+
+  if (!storage) {
+    return;
+  }
+
+  try {
+    const savedNames = storage.getItem(STORAGE_KEYS.names);
+    const savedTeamSize = storage.getItem(STORAGE_KEYS.teamSize);
+
+    if (savedNames !== null) {
+      namesInput.value = savedNames;
+    }
+
+    const normalizedTeamSize = normalizeTeamSize(savedTeamSize, teamSizeInput);
+
+    if (normalizedTeamSize) {
+      teamSizeInput.value = normalizedTeamSize;
+    }
+  } catch {
+    // Storage may be unavailable in private or restricted browser contexts.
+  }
+}
+
+function saveMatchSettings(namesInput, teamSizeInput) {
+  const storage = getLocalStorage();
+
+  if (!storage) {
+    return;
+  }
+
+  try {
+    storage.setItem(STORAGE_KEYS.names, namesInput.value);
+    storage.setItem(STORAGE_KEYS.teamSize, normalizeTeamSize(teamSizeInput.value, teamSizeInput));
+  } catch {
+    // Ignore storage failures so the match form remains usable.
+  }
+}
+
+function normalizeTeamSize(value, input) {
+  const min = Number(input.min) || 1;
+  const max = Number(input.max) || min;
+  const teamSize = Math.round(Number(value));
+
+  if (!Number.isFinite(teamSize)) {
+    return "";
+  }
+
+  return String(Math.min(max, Math.max(min, teamSize)));
+}
+
+function getLocalStorage() {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}