Fix puzzle UI and verifier normalization

frontend/src/components/PuzzleEditor 2.tsx

@@ -0,0 +1,502 @@
+import { useState } from "react";
+
+import type { PuzzleType } from "../lib/api";
+
+type Props = {
+  puzzleType: PuzzleType;
+  problemAscii: string;
+  boardAscii: string;
+  onChange: (nextAscii: string) => void;
+};
+
+type BridgesOpportunity = {
+  id: string;
+  kind: "horizontal" | "vertical";
+  cells: Array<[number, number]>;
+};
+
+const FLOW_FREE_COLORS = [
+  "#f15b5d",
+  "#f5a623",
+  "#f6df5a",
+  "#7ed957",
+  "#36cfc9",
+  "#4b8ef7",
+  "#7a5cff",
+  "#ff8bd1",
+  "#7d5a50",
+  "#5f6a6b",
+];
+
+function splitLines(board: string): string[] {
+  return board.replace(/\r/g, "").split("\n");
+}
+
+function cloneGrid(lines: string[]): string[][] {
+  return lines.map((line) => [...line]);
+}
+
+function joinGrid(grid: string[][]): string {
+  return grid.map((row) => row.join("")).join("\n");
+}
+
+function isClueChar(char: string): boolean {
+  return /[0-9A-G]/.test(char);
+}
+
+function parseBridges(problemAscii: string) {
+  const lines = splitLines(problemAscii);
+  const opportunities: BridgesOpportunity[] = [];
+  const cellToOpportunity = new Map<string, BridgesOpportunity>();
+  for (let r = 0; r < lines.length; r += 1) {
+    for (let c = 0; c < lines[r].length; c += 1) {
+      if (!isClueChar(lines[r][c])) {
+        continue;
+      }
+      let next = c + 1;
+      while (next < lines[r].length && lines[r][next] === ".") {
+        next += 1;
+      }
+      if (next < lines[r].length && isClueChar(lines[r][next]) && next > c + 1) {
+        const opp: BridgesOpportunity = {
+          id: `h-${r}-${c}-${next}`,
+          kind: "horizontal",
+          cells: [],
+        };
+        for (let cell = c + 1; cell < next; cell += 1) {
+          opp.cells.push([r, cell]);
+          cellToOpportunity.set(`${r}:${cell}`, opp);
+        }
+        opportunities.push(opp);
+      }
+      let nextRow = r + 1;
+      while (nextRow < lines.length && c < lines[nextRow].length && lines[nextRow][c] === ".") {
+        nextRow += 1;
+      }
+      if (
+        nextRow < lines.length &&
+        c < lines[nextRow].length &&
+        isClueChar(lines[nextRow][c]) &&
+        nextRow > r + 1
+      ) {
+        const opp: BridgesOpportunity = {
+          id: `v-${r}-${c}-${nextRow}`,
+          kind: "vertical",
+          cells: [],
+        };
+        for (let cell = r + 1; cell < nextRow; cell += 1) {
+          opp.cells.push([cell, c]);
+          cellToOpportunity.set(`${cell}:${c}`, opp);
+        }
+        opportunities.push(opp);
+      }
+    }
+  }
+  return { lines, opportunities, cellToOpportunity };
+}
+
+function bridgesBoardFromStates(
+  problemAscii: string,
+  states: Record<string, 0 | 1 | 2>,
+): string {
+  const parsed = parseBridges(problemAscii);
+  const grid = cloneGrid(parsed.lines);
+  for (const opportunity of parsed.opportunities) {
+    const level = states[opportunity.id] ?? 0;
+    const symbol =
+      opportunity.kind === "horizontal"
+        ? level === 2
+          ? "="
+          : level === 1
+            ? "-"
+            : "."
+        : level === 2
+          ? '"'
+          : level === 1
+            ? "|"
+            : ".";
+    for (const [r, c] of opportunity.cells) {
+      grid[r][c] = symbol;
+    }
+  }
+  return joinGrid(grid);
+}
+
+function bridgesStatesFromBoard(
+  problemAscii: string,
+  boardAscii: string,
+): Record<string, 0 | 1 | 2> {
+  const parsed = parseBridges(problemAscii);
+  const boardLines = splitLines(boardAscii);
+  const states: Record<string, 0 | 1 | 2> = {};
+  for (const opportunity of parsed.opportunities) {
+    const [r, c] = opportunity.cells[0];
+    const char = boardLines[r]?.[c] ?? ".";
+    if (opportunity.kind === "horizontal") {
+      states[opportunity.id] = char === "=" ? 2 : char === "-" ? 1 : 0;
+    } else {
+      states[opportunity.id] = char === '"' ? 2 : char === "|" ? 1 : 0;
+    }
+  }
+  return states;
+}
+
+function BridgesEditor({ problemAscii, boardAscii, onChange }: Omit<Props, "puzzleType">) {
+  const parsed = parseBridges(problemAscii);
+  const states = bridgesStatesFromBoard(problemAscii, boardAscii);
+
+  function cycle(opportunity: BridgesOpportunity) {
+    const nextStates = { ...states };
+    const current = nextStates[opportunity.id] ?? 0;
+    nextStates[opportunity.id] = (((current + 1) % 3) as 0 | 1 | 2);
+    onChange(bridgesBoardFromStates(problemAscii, nextStates));
+  }
+
+  return (
+    <div
+      className="board-grid"
+      style={{ gridTemplateColumns: `repeat(${parsed.lines[0]?.length ?? 0}, 38px)` }}
+    >
+      {parsed.lines.flatMap((line, r) =>
+        [...line].map((char, c) => {
+          const opportunity = parsed.cellToOpportunity.get(`${r}:${c}`);
+          const boardChar = splitLines(boardAscii)[r]?.[c] ?? char;
+          const className = isClueChar(char)
+            ? "board-cell fixed"
+            : opportunity
+              ? "board-cell"
+              : "board-cell water";
+          return (
+            <button
+              key={`${r}-${c}`}
+              type="button"
+              className={className}
+              onClick={() => opportunity && cycle(opportunity)}
+              disabled={!opportunity}
+            >
+              {isClueChar(char) ? char : boardChar === "." ? "" : boardChar}
+            </button>
+          );
+        }),
+      )}
+    </div>
+  );
+}
+
+function FlowFreeEditor({ problemAscii, boardAscii, onChange }: Omit<Props, "puzzleType">) {
+  const problemLines = splitLines(problemAscii);
+  const boardLines = splitLines(boardAscii);
+  const letters = [...new Set(problemAscii.replace(/[^A-Z]/g, "").split(""))].sort();
+  const [activeColor, setActiveColor] = useState(letters[0] ?? "A");
+
+  function updateCell(r: number, c: number) {
+    if (problemLines[r][c] !== ".") {
+      setActiveColor(problemLines[r][c]);
+      return;
+    }
+    const grid = cloneGrid(boardLines);
+    grid[r][c] = grid[r][c] === activeColor ? "." : activeColor;
+    onChange(joinGrid(grid));
+  }
+
+  function swatchColor(letter: string) {
+    return FLOW_FREE_COLORS[(letter.charCodeAt(0) - 65) % FLOW_FREE_COLORS.length];
+  }
+
+  return (
+    <div className="pattern-layout">
+      <div className="palette">
+        {letters.map((letter) => (
+          <button
+            key={letter}
+            type="button"
+            className={activeColor === letter ? "active" : ""}
+            style={{ background: swatchColor(letter) }}
+            onClick={() => setActiveColor(letter)}
+          >
+            {letter}
+          </button>
+        ))}
+      </div>
+      <div
+        className="board-grid"
+        style={{ gridTemplateColumns: `repeat(${problemLines[0]?.length ?? 0}, 38px)` }}
+      >
+        {boardLines.flatMap((line, r) =>
+          [...line].map((char, c) => {
+            const fixed = problemLines[r][c] !== ".";
+            const letter = fixed ? problemLines[r][c] : char;
+            return (
+              <button
+                key={`${r}-${c}`}
+                type="button"
+                className={`board-cell ${fixed ? "fixed" : "water"}`}
+                style={{
+                  background:
+                    letter === "."
+                      ? undefined
+                      : `${swatchColor(letter)}cc`,
+                }}
+                onClick={() => updateCell(r, c)}
+              >
+                {letter === "." ? "" : letter}
+              </button>
+            );
+          }),
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CharGridEditor({
+  problemAscii,
+  boardAscii,
+  onChange,
+  canEdit,
+  nextChar,
+}: {
+  problemAscii: string;
+  boardAscii: string;
+  onChange: (nextAscii: string) => void;
+  canEdit: (r: number, c: number, char: string) => boolean;
+  nextChar: (r: number, c: number, current: string, problemChar: string) => string;
+}) {
+  const problemLines = splitLines(problemAscii);
+  const boardLines = splitLines(boardAscii);
+  const width = Math.max(...boardLines.map((line) => line.length));
+  function updateCell(r: number, c: number) {
+    const current = boardLines[r]?.[c] ?? " ";
+    const problemChar = problemLines[r]?.[c] ?? " ";
+    const grid = boardLines.map((line) => line.padEnd(width, " ").split(""));
+    grid[r][c] = nextChar(r, c, current, problemChar);
+    onChange(joinGrid(grid).replace(/\s+$/g, "").replace(/\n\s+$/g, "\n"));
+  }
+  return (
+    <div
+      className="char-board"
+      style={{ gridTemplateColumns: `repeat(${width}, 24px)` }}
+    >
+      {Array.from({ length: boardLines.length }).flatMap((_, r) =>
+        Array.from({ length: width }).map((__, c) => {
+          const problemChar = problemLines[r]?.[c] ?? " ";
+          const current = boardLines[r]?.[c] ?? " ";
+          const editable = canEdit(r, c, problemChar);
+          return (
+            <button
+              key={`${r}-${c}`}
+              type="button"
+              className={`board-char ${editable ? "clickable" : ""}`}
+              disabled={!editable}
+              onClick={() => updateCell(r, c)}
+            >
+              {current === " " ? "\u00A0" : current}
+            </button>
+          );
+        }),
+      )}
+    </div>
+  );
+}
+
+function LoopyEditor({ problemAscii, boardAscii, onChange }: Omit<Props, "puzzleType">) {
+  return (
+    <CharGridEditor
+      problemAscii={problemAscii}
+      boardAscii={boardAscii}
+      onChange={onChange}
+      canEdit={(r, c, char) => {
+        if (char !== " ") {
+          return false;
+        }
+        const isHorizontal = r > 0 && r < splitLines(problemAscii).length - 1 && r % 2 === 1 && c % 2 === 0;
+        const isVertical = r > 0 && r < splitLines(problemAscii).length - 1 && r % 2 === 0 && c % 2 === 1;
+        return isHorizontal || isVertical;
+      }}
+      nextChar={(r, c, current, problemChar) => {
+        if (problemChar !== " ") {
+          return current;
+        }
+        const isHorizontal = r % 2 === 1 && c % 2 === 0;
+        if (isHorizontal) {
+          return current === " " ? "-" : current === "-" ? "x" : " ";
+        }
+        return current === " " ? "|" : current === "|" ? "x" : " ";
+      }}
+    />
+  );
+}
+
+function GalaxiesEditor({ problemAscii, boardAscii, onChange }: Omit<Props, "puzzleType">) {
+  return (
+    <CharGridEditor
+      problemAscii={problemAscii}
+      boardAscii={boardAscii}
+      onChange={onChange}
+      canEdit={(r, c, char) => {
+        if (char !== " ") {
+          return false;
+        }
+        const isHorizontal = r % 2 === 0 && c % 2 === 1;
+        const isVertical = r % 2 === 1 && c % 2 === 0;
+        return isHorizontal || isVertical;
+      }}
+      nextChar={(r, _c, current, _problemChar) => {
+        const isHorizontal = r % 2 === 0;
+        if (isHorizontal) {
+          return current === "-" ? " " : "-";
+        }
+        return current === "|" ? " " : "|";
+      }}
+    />
+  );
+}
+
+function parsePattern(boardAscii: string) {
+  const lines = splitLines(boardAscii);
+  const firstContentIndex = lines.findIndex((line) => line.includes("|"));
+  const topLines = lines.slice(0, firstContentIndex);
+  const rows: Array<{ prefix: string; cells: string[]; border: string }> = [];
+  for (let idx = firstContentIndex; idx < lines.length; idx += 2) {
+    const content = lines[idx];
+    const border = lines[idx + 1];
+    if (!content || !border) {
+      break;
+    }
+    const firstBar = content.indexOf("|");
+    const prefix = content.slice(0, firstBar);
+    const parts = content.slice(firstBar).split("|").slice(1, -1);
+    rows.push({ prefix, cells: parts, border });
+  }
+  return { topLines, rows };
+}
+
+function patternToAscii(template: ReturnType<typeof parsePattern>): string {
+  const lines = [...template.topLines];
+  for (const row of template.rows) {
+    lines.push(`${row.prefix}|${row.cells.join("|")}|`);
+    lines.push(row.border);
+  }
+  return lines.join("\n");
+}
+
+function PatternEditor({ boardAscii, onChange }: Omit<Props, "puzzleType" | "problemAscii"> & { problemAscii: string }) {
+  const template = parsePattern(boardAscii);
+
+  function cycle(rowIndex: number, cellIndex: number) {
+    const next = parsePattern(boardAscii);
+    const current = next.rows[rowIndex].cells[cellIndex];
+    next.rows[rowIndex].cells[cellIndex] =
+      current === "  " ? "##" : current === "##" ? ".." : "  ";
+    onChange(patternToAscii(next));
+  }
+
+  return (
+    <div className="pattern-layout">
+      <pre className="ascii-preview">{template.topLines.join("\n")}</pre>
+      <div className="pattern-grid">
+        {template.rows.map((row, rowIndex) => (
+          <div key={rowIndex} className="pattern-row">
+            <div className="pattern-clue">{row.prefix.trim()}</div>
+            <div className="board-grid" style={{ gridTemplateColumns: `repeat(${row.cells.length}, 44px)` }}>
+              {row.cells.map((cell, cellIndex) => (
+                <button
+                  key={`${rowIndex}-${cellIndex}`}
+                  type="button"
+                  className={`board-square ${cell === "##" ? "fill" : cell === ".." ? "empty" : ""}`}
+                  onClick={() => cycle(rowIndex, cellIndex)}
+                >
+                  {cell === "  " ? "" : cell}
+                </button>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function parseUndead(boardAscii: string) {
+  const lines = splitLines(boardAscii);
+  const header = lines[0] ?? "";
+  const topLine = lines[2] ?? "";
+  const bottomLine = lines.at(-1) ?? "";
+  const rows = lines.slice(3, -1).map((line) => {
+    const tokens = line.trim().split(/\s+/);
+    return {
+      left: tokens[0] ?? "",
+      cells: tokens.slice(1, -1),
+      right: tokens.at(-1) ?? "",
+    };
+  });
+  return { header, topLine, bottomLine, rows };
+}
+
+function undeadToAscii(template: ReturnType<typeof parseUndead>): string {
+  const lines = [template.header, "", template.topLine];
+  for (const row of template.rows) {
+    lines.push(` ${row.left} ${row.cells.join(" ")} ${row.right}`);
+  }
+  lines.push(template.bottomLine);
+  return lines.join("\n");
+}
+
+function UndeadEditor({ boardAscii, onChange }: Omit<Props, "puzzleType" | "problemAscii"> & { problemAscii: string }) {
+  const template = parseUndead(boardAscii);
+  function cycle(rowIndex: number, cellIndex: number) {
+    const current = template.rows[rowIndex].cells[cellIndex];
+    if (current === "/" || current === "\\") {
+      return;
+    }
+    const next = parseUndead(boardAscii);
+    next.rows[rowIndex].cells[cellIndex] =
+      current === "." ? "G" : current === "G" ? "V" : current === "V" ? "Z" : ".";
+    onChange(undeadToAscii(next));
+  }
+
+  return (
+    <div className="pattern-layout">
+      <pre className="ascii-preview">{`${template.header}\n\n${template.topLine}\n${template.bottomLine}`}</pre>
+      <div className="board-grid" style={{ gridTemplateColumns: `repeat(${template.rows[0]?.cells.length ?? 0}, 38px)` }}>
+        {template.rows.flatMap((row, rowIndex) =>
+          row.cells.map((cell, cellIndex) => {
+            const fixedMirror = cell === "/" || cell === "\\";
+            return (
+              <button
+                key={`${rowIndex}-${cellIndex}`}
+                type="button"
+                className={`board-cell ${fixedMirror ? "mirror" : ""}`}
+                onClick={() => cycle(rowIndex, cellIndex)}
+              >
+                {cell === "." ? "" : cell}
+              </button>
+            );
+          }),
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function PuzzleEditor(props: Props) {
+  if (props.puzzleType === "bridges") {
+    return <BridgesEditor {...props} />;
+  }
+  if (props.puzzleType === "flow_free") {
+    return <FlowFreeEditor {...props} />;
+  }
+  if (props.puzzleType === "galaxies") {
+    return <GalaxiesEditor {...props} />;
+  }
+  if (props.puzzleType === "loopy") {
+    return <LoopyEditor {...props} />;
+  }
+  if (props.puzzleType === "pattern") {
+    return <PatternEditor {...props} />;
+  }
+  if (props.puzzleType === "undead") {
+    return <UndeadEditor {...props} />;
+  }
+  return null;
+}

frontend/src/components/PuzzleEditor.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import type { PuzzleType } from "../lib/api";
 
@@ -259,11 +259,11 @@ function loopyBoardFromStates(
   const grid = cloneGrid(padLines(puzzle.lines, width));
 
   for (const edge of puzzle.horizontalEdges) {
-    const state = states[edge.id] ?? "unknown";
+    const state = states[edge.id] ?? "blocked";
     grid[edge.boardRow][edge.boardCol] = state === "line" ? "-" : state === "blocked" ? "x" : " ";
   }
   for (const edge of puzzle.verticalEdges) {
-    const state = states[edge.id] ?? "unknown";
+    const state = states[edge.id] ?? "blocked";
     grid[edge.boardRow][edge.boardCol] = state === "line" ? "|" : state === "blocked" ? "x" : " ";
   }
 
@@ -289,6 +289,9 @@ function parseGalaxies(problemAscii: string) {
 
   for (let r = 1; r < rows; r += 1) {
     for (let c = 0; c < cols; c += 1) {
+      if ((lines[2 * r]?.[1 + 2 * c] ?? " ") === "o") {
+        continue;
+      }
       horizontalBoundaries.push({
         id: `h-${r}-${c}`,
         kind: "horizontal",
@@ -302,6 +305,9 @@ function parseGalaxies(problemAscii: string) {
 
   for (let r = 0; r < rows; r += 1) {
     for (let c = 1; c < cols; c += 1) {
+      if ((lines[1 + 2 * r]?.[2 * c] ?? " ") === "o") {
+        continue;
+      }
       verticalBoundaries.push({
         id: `v-${r}-${c}`,
         kind: "vertical",
@@ -365,6 +371,44 @@ function parsePattern(boardAscii: string) {
   return { topLines, rows };
 }
 
+function normalizePatternAscii(boardAscii: string) {
+  const template = parsePattern(boardAscii);
+  let changed = false;
+  for (const row of template.rows) {
+    for (let index = 0; index < row.cells.length; index += 1) {
+      if (row.cells[index] === "  ") {
+        row.cells[index] = "..";
+        changed = true;
+      }
+    }
+  }
+  return changed ? patternToAscii(template) : boardAscii;
+}
+
+function parsePatternColumnClues(template: ReturnType<typeof parsePattern>): string[][] {
+  const topBorder = template.topLines.find((line) => line.includes("+"));
+  const clueLines = template.topLines.filter((line) => !line.includes("+"));
+  const firstRow = template.rows[0];
+  if (!topBorder || !firstRow) {
+    return [];
+  }
+
+  const firstBar = topBorder.indexOf("+");
+  const columnCount = firstRow.cells.length;
+  const columns: string[][] = Array.from({ length: columnCount }, () => []);
+
+  for (const line of clueLines) {
+    for (let col = 0; col < columnCount; col += 1) {
+      const cellSlice = line.slice(firstBar + 1 + col * 3, firstBar + 3 + col * 3).trim();
+      if (cellSlice) {
+        columns[col].push(cellSlice);
+      }
+    }
+  }
+
+  return columns;
+}
+
 function patternToAscii(template: ReturnType<typeof parsePattern>): string {
   const lines = [...template.topLines];
   for (const row of template.rows) {
@@ -526,8 +570,7 @@ function LoopyEditor({ problemAscii, boardAscii, onChange }: Omit<Props, "puzzle
 
   function cycle(edge: LoopyEdge) {
     const current = states[edge.id] ?? "unknown";
-    const next =
-      current === "unknown" ? "line" : current === "line" ? "blocked" : "unknown";
+    const next = current === "line" ? "blocked" : "line";
     onChange(
       loopyBoardFromStates(problemAscii, {
         ...states,
@@ -538,7 +581,7 @@ function LoopyEditor({ problemAscii, boardAscii, onChange }: Omit<Props, "puzzle
 
   return (
     <div className="editor-stack">
-      <div className="puzzle-note">Click any segment, including the outer border, to cycle blank, line, and blocked.</div>
+      <div className="puzzle-note">Click any segment, including the outer border, to toggle between part of the loop and definitely not part of it.</div>
       <div className="svg-board-shell">
         <svg className="svg-board" viewBox={`0 0 ${width} ${height}`} role="img" aria-label="Loopy board">
           {Array.from({ length: puzzle.rows + 1 }).map((_, row) =>
@@ -736,35 +779,72 @@ function GalaxiesEditor({ problemAscii, boardAscii, onChange }: Omit<Props, "puz
 }
 
 function PatternEditor({ boardAscii, onChange }: Omit<Props, "puzzleType">) {
-  const template = parsePattern(boardAscii);
-  const columnClues = template.topLines.map((line) => line.trimEnd()).join("\n");
+  const normalizedBoard = normalizePatternAscii(boardAscii);
+
+  useEffect(() => {
+    if (normalizedBoard !== boardAscii) {
+      onChange(normalizedBoard);
+    }
+  }, [boardAscii, normalizedBoard, onChange]);
+
+  const template = parsePattern(normalizedBoard);
+  const columnClues = parsePatternColumnClues(template);
+  const maxColumnClueDepth = Math.max(...columnClues.map((column) => column.length), 1);
 
   function cycle(rowIndex: number, cellIndex: number) {
-    const next = parsePattern(boardAscii);
+    const next = parsePattern(normalizedBoard);
     const current = next.rows[rowIndex].cells[cellIndex];
     next.rows[rowIndex].cells[cellIndex] =
-      current === "  " ? "##" : current === "##" ? ".." : "  ";
+      current === "##" ? ".." : "##";
     onChange(patternToAscii(next));
   }
 
   return (
     <div className="editor-stack">
-      <div className="puzzle-note">Click a square to cycle unknown, filled, and empty.</div>
+      <div className="puzzle-note">Every cell starts white. Click a square to toggle it between white and filled black.</div>
       <div className="pattern-layout">
-        <pre className="ascii-preview compact-preview">{columnClues}</pre>
+        <div className="pattern-top-clues" style={{ gridTemplateColumns: `92px repeat(${columnClues.length}, 46px)` }}>
+          <div />
+          {columnClues.map((column, index) => (
+            <div
+              key={`column-${index}`}
+              className="pattern-column-stack"
+              style={{ gridTemplateRows: `repeat(${maxColumnClueDepth}, 22px)` }}
+            >
+              {Array.from({ length: maxColumnClueDepth }).map((_, rowIndex) => {
+                const clue = column[rowIndex - (maxColumnClueDepth - column.length)] ?? "";
+                return (
+                  <div key={`${index}-${rowIndex}`} className="pattern-clue-pill">
+                    {clue}
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
         <div className="pattern-grid">
           {template.rows.map((row, rowIndex) => (
             <div key={rowIndex} className="pattern-row">
-              <div className="pattern-clue">{row.prefix.trim()}</div>
+              <div className="pattern-clue pattern-row-clue">
+                {row.prefix
+                  .trim()
+                  .split(/\s+/)
+                  .filter(Boolean)
+                  .map((clue, clueIndex) => (
+                    <span key={`${rowIndex}-${clueIndex}`} className="pattern-clue-pill">
+                      {clue}
+                    </span>
+                  ))}
+              </div>
               <div className="board-grid pattern-board" style={{ gridTemplateColumns: `repeat(${row.cells.length}, 46px)` }}>
                 {row.cells.map((cell, cellIndex) => (
                   <button
                     key={`${rowIndex}-${cellIndex}`}
                     type="button"
-                    className={`board-square ${cell === "##" ? "fill" : cell === ".." ? "empty" : "unknown"}`}
+                    className={`board-square ${cell === "##" ? "fill" : "empty"}`}
                     onClick={() => cycle(rowIndex, cellIndex)}
                   >
-                    {cell === "##" ? "■" : cell === ".." ? "·" : ""}
+                    {cell === "##" ? "■" : ""}
                   </button>
                 ))}
               </div>

frontend/src/index.css

@@ -413,6 +413,19 @@ a {
   gap: 16px;
 }
 
+.pattern-top-clues {
+  display: grid;
+  gap: 12px;
+  align-items: end;
+}
+
+.pattern-column-stack {
+  display: grid;
+  gap: 4px;
+  justify-items: center;
+  align-content: end;
+}
+
 .pattern-board {
   padding: 10px;
 }
@@ -430,13 +443,34 @@ a {
 }
 
 .pattern-clue {
+  color: #406257;
+}
+
+.pattern-row-clue {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding-right: 4px;
+}
+
+.pattern-clue-pill {
+  display: inline-flex;
+  min-width: 28px;
+  min-height: 22px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: rgba(18, 54, 44, 0.08);
+  color: #214338;
   font-family:
     "SFMono-Regular",
     "Menlo",
     "Consolas",
     monospace;
-  color: #406257;
-  text-align: right;
+  font-size: 0.86rem;
+  font-weight: 700;
 }
 
 .palette {

frontend/src/routes/PlayPage.tsx

@@ -8,8 +8,8 @@ const PUZZLE_HELP: Record<string, string> = {
   bridges: "Connect every numbered island into a single network. Each route cycles empty, single bridge, then double bridge.",
   flow_free: "Choose a color from the palette, then paint a continuous path between matching endpoints without changing the endpoints themselves.",
   galaxies: "Partition the board with interior walls so each region has exactly one dot-symmetry center.",
-  loopy: "Build one single loop. Every segment cycles blank, line, then blocked, including the outer perimeter.",
-  pattern: "Each square cycles unknown, filled, then empty so the row and column clues match the finished pattern.",
+  loopy: "Build one single loop. Every segment toggles between part of the loop and definitely not part of it, including the outer perimeter.",
+  pattern: "Every square starts white. Click a square to toggle it between white and filled black so the row and column clues match.",
   undead: "Place ghosts, vampires, and zombies so the side clues and the global monster counts all line up.",
 };
 
@@ -131,7 +131,7 @@ export function PlayPage() {
     if (!session) {
       return;
     }
-    setBoardAscii(session.payload.problem_ascii);
+    setBoardAscii(session.payload.current_board_ascii);
     setError(null);
     setStatusMessage("Board reset to the original puzzle.");
   }