feat: Initial project setup

src/ui/matchForm.js

@@ -0,0 +1,53 @@
+const nicknameLength = 18;
+
+export function createMatchForm() {
+  const form = getElement("#fighter-form");
+  const namesInput = getElement("#player-names");
+  const statusNode = getElement("#match-status");
+  const teamSizeInput = getElement("#team-size");
+  const teamSizeOutput = getElement("#team-size-value");
+
+  const readMatchConfig = () => ({
+    names: nicknameValues(namesInput.value),
+    teamSize: Number(teamSizeInput.value),
+  });
+
+  syncTeamSizeOutput(teamSizeInput, teamSizeOutput);
+  teamSizeInput.addEventListener("input", () => {
+    syncTeamSizeOutput(teamSizeInput, teamSizeOutput);
+  });
+
+  return {
+    onSubmit(handler) {
+      form.addEventListener("submit", (event) => {
+        event.preventDefault();
+        handler(readMatchConfig());
+      });
+    },
+    readMatchConfig,
+    setStatus(message) {
+      statusNode.textContent = message;
+    },
+  };
+}
+
+function getElement(selector) {
+  const element = document.querySelector(selector);
+
+  if (!element) {
+    throw new Error(`Missing required element: ${selector}`);
+  }
+
+  return element;
+}
+
+function nicknameValues(value) {
+  return value
+    .split(/\r?\n|,/)
+    .map((name) => name.trim().slice(0, nicknameLength))
+    .filter(Boolean);
+}
+
+function syncTeamSizeOutput(input, output) {
+  output.textContent = `${input.value} vs ${input.value}`;
+}