tryMe.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Parser Characters – Test</title>

  <style>
    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      background: #f5f7fa;
      color: #111827;
    }

    header {
      padding: 14px 18px;
      font-size: 1.1rem;
      font-weight: 700;
      border-bottom: 1px solid #d1d5db;
      background: #ffffff;
    }

    main {
      padding: 16px;
      max-width: 1200px;
      margin: 0 auto;
    }

    section {
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      margin-bottom: 16px;
      padding: 12px;
    }

    h2 {
      margin: 0 0 8px 0;
      font-size: 1rem;
    }

    textarea {
      width: 100%;
      min-height: 160px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.9rem;
      padding: 8px;
    }

    pre {
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      padding: 8px;
      font-size: 0.85rem;
      overflow: auto;
      max-height: 300px;
    }

    ul {
      margin: 0;
      padding-left: 18px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    th, td {
      border: 1px solid #d1d5db;
      padding: 6px 8px;
      vertical-align: top;
      text-align: left;
    }

    th {
      background: #f3f4f6;
      font-weight: 600;
    }

    tbody tr:nth-child(even) {
      background: #f9fafb;
    }
  </style>
</head>

<body>
  <header>Parser Characters – Test</header>

  <main>

    <section>
      <h2>Input</h2>
      <textarea id="input"></textarea>
    </section>

    <section>
      <h2>Errors</h2>
      <ul id="errors"></ul>
    </section>

    <section>
      <h2>Normalized String</h2>
      <pre id="normalized"></pre>
    </section>

    <section>
      <h2>Characters Table</h2>
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Group</th>
            <th>Aliases</th>
            <th>Infos</th>
            <th>Members</th>
          </tr>
        </thead>
        <tbody id="table-body"></tbody>
      </table>
    </section>
    
    <section>
      <h2>AST (JSON)</h2>
      <pre id="ast"></pre>
    </section>

  </main>

<script type="module">
  import { parseDataset, stringifyDataset } from "./parserCharacters.js";

  const inputEl = document.getElementById("input");
  const errorsEl = document.getElementById("errors");
  const normalizedEl = document.getElementById("normalized");
  const astEl = document.getElementById("ast");
  const tableBody = document.getElementById("table-body");

  inputEl.addEventListener("input", update);

  inputEl.value =
    "Alpha (a,b) (c); Alpha; Alpha (a); Beta [X]; Beta [Y] (i1,i2); Beta [X] (i3); Gamma [A;B]; Gamma [A; B]; Gamma [A; B; C]; Gamma [A [AA]; B]; Gamma [A; B [BB]]; Delta [One Two]; Delta [One; Two]; Delta [One; Two] (info); Epsilon [Solo]; Epsilon (info) [Solo]; Epsilon [Solo] (info1, info2); Zeta (a(b)); Zeta (a,b; Eta [Unclosed; Theta (Unclosed; Iota [A] [B]; Iota [A] (x) [B] (y); Kappa [M [N [O]]]; Kappa [M; N [O; P]]; Lambda; Lambda (x); Lambda (y); Mu [X; Y] [Z]; Mu [X] [Y; Z]; Nu [A [B; C]; D]; Xi; Omicron (o1,o2) (o3); Pi [P1 [P2] (pinfo)]; Rho [R1; R2] (rinfo1, rinfo2); Sigma [One Two; Three]; Tau [One; Two Three]; Upsilon [A; B] (u1) (u2,u3); Phi [A; B]; Chi [A [AA] (i1); B]; Psi [A; B] (i); Omega";

  update();

  function update() {
    const ast = parseDataset(inputEl.value);

    // ---------------- Errors ----------------
    errorsEl.innerHTML = "";
    if (ast.issuesDetailed.length === 0) {
      const li = document.createElement("li");
      li.textContent = "No errors";
      errorsEl.appendChild(li);
    } else {
      for (const e of ast.issuesDetailed) {
        const li = document.createElement("li");
        li.textContent = `${e.code} — ${e.raw}`;
        errorsEl.appendChild(li);
      }
    }

    // ---------------- Normalized string ----------------
    normalizedEl.textContent = stringifyDataset(ast);

    // ---------------- AST JSON ----------------
    astEl.textContent = JSON.stringify(ast, null, 2);

    // ---------------- Characters table ----------------
    tableBody.innerHTML = "";

    ast.entries.forEach((n, idx) => {
      const groups = n.fragments.filter(f => f.type === "group");
      const aliases = n.fragments.filter(f => f.type === "alias");
      const infos = n.fragments.filter(f => f.type === "info");

      // A node IS a group if it has at least one group fragment
      const isGroup = groups.length > 0;

      // Members are taken ONLY from group fragments
      const members = groups.flatMap(g => g.members.map(m => m.name));

      const tr = document.createElement("tr");
      tr.innerHTML = `
        <td>${idx}</td>
        <td>${n.name || "<missing>"}</td>
        <td>${isGroup ? n.name : ""}</td>
        <td>${aliases.map(a => a.raw.replace(/^\[\s*|\s*\]$/g,"")).join("<br>")}</td>
        <td>${infos.map(i => i.raw).join("<br>")}</td>
        <td>${members.join(", ")}</td>
      `;
      tableBody.appendChild(tr);
    });
  }
</script>


</body>
</html>