Merge pull request #260 from ToolboxAid/PR_26179_CHARLIE_024-sprites-canvas-grid

PR_26179_CHARLIE_024-sprites-canvas-grid

Author: ToolboxAid

assets/theme-v2/css/gamefoundrystudio.css

@@ -1153,6 +1153,48 @@ body.tool-focus-mode .tool-column:last-of-type {
   grid-row: 1 / span 2
 }
 
+.sprite-canvas-shell {
+  display: flex;
+  justify-content: center;
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  background: var(--panel-soft)
+}
+
+.sprite-canvas-grid {
+  --sprite-grid-size: 16;
+  display: grid;
+  grid-template-columns: repeat(var(--sprite-grid-size), minmax(0, 1fr));
+  width: min(100%, 520px);
+  aspect-ratio: 1;
+  border: 1px solid var(--line);
+  background: var(--panel)
+}
+
+.sprite-canvas-grid[data-sprites-grid-size="16"] {
+  --sprite-grid-size: 16
+}
+
+.sprite-canvas-grid[data-sprites-grid-size="32"] {
+  --sprite-grid-size: 32
+}
+
+.sprite-canvas-cell {
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  background: var(--card-background);
+  cursor: default
+}
+
+.sprite-canvas-cell:disabled {
+  opacity: 1
+}
+
 @media(max-width:980px) {
 
   .grid.cols-4,

assets/toolbox/sprites/js/index.js

@@ -0,0 +1,59 @@
+const DEFAULT_GRID_SIZE = 16;
+const SUPPORTED_GRID_SIZES = Object.freeze([16, 32]);
+
+function gridLabel(size) {
+  return `Sprite Creator ${size} by ${size} pixel canvas`;
+}
+
+function buttonForSize(size) {
+  return document.querySelector(`[data-sprites-grid-size="${size}"]`);
+}
+
+function setGridSize(size) {
+  const grid = document.querySelector("[data-sprites-pixel-grid]");
+  const status = document.querySelector("[data-sprites-grid-status]");
+  if (!grid || !SUPPORTED_GRID_SIZES.includes(size)) {
+    return;
+  }
+
+  grid.replaceChildren();
+  grid.dataset.spritesGridSize = String(size);
+  grid.setAttribute("aria-label", gridLabel(size));
+
+  for (let index = 0; index < size * size; index += 1) {
+    const row = Math.floor(index / size) + 1;
+    const column = (index % size) + 1;
+    const cell = document.createElement("button");
+    cell.className = "sprite-canvas-cell";
+    cell.type = "button";
+    cell.disabled = true;
+    cell.setAttribute("role", "gridcell");
+    cell.setAttribute("aria-label", `Pixel row ${row}, column ${column}`);
+    cell.dataset.spritePixelRow = String(row);
+    cell.dataset.spritePixelColumn = String(column);
+    grid.append(cell);
+  }
+
+  document.querySelectorAll("[data-sprites-grid-size]").forEach((button) => {
+    const isActive = button.dataset.spritesGridSize === String(size);
+    button.classList.toggle("primary", isActive);
+    button.setAttribute("aria-pressed", String(isActive));
+  });
+
+  if (status) {
+    status.textContent = `Canvas display mode: ${size}x${size}. No pixel data is saved.`;
+  }
+}
+
+function wireGridControls() {
+  SUPPORTED_GRID_SIZES.forEach((size) => {
+    const button = buttonForSize(size);
+    if (!button) {
+      return;
+    }
+    button.addEventListener("click", () => setGridSize(size));
+  });
+}
+
+wireGridControls();
+setGridSize(DEFAULT_GRID_SIZE);

dev/tests/playwright/tools/SpritesToolShell.spec.mjs

@@ -233,6 +233,13 @@ test("Sprite Creator shell loads with visible tool, canvas, details, and status
     }
     await expect(page.locator("main")).toContainText("Toolbar placeholders only");
     await expect(page.locator("[data-sprites-pixel-grid]")).toBeVisible();
+    await expect(page.locator("[data-sprites-pixel-grid] [role='gridcell']")).toHaveCount(256);
+    await expect(page.locator("[data-sprites-grid-status]")).toContainText("Canvas display mode: 16x16");
+    await page.getByRole("button", { name: "32x32" }).click();
+    await expect(page.locator("[data-sprites-pixel-grid]")).toHaveAttribute("aria-label", "Sprite Creator 32 by 32 pixel canvas");
+    await expect(page.locator("[data-sprites-pixel-grid] [role='gridcell']")).toHaveCount(1024);
+    await expect(page.locator("[data-sprites-grid-status]")).toContainText("Canvas display mode: 32x32");
+    await expect(page.getByRole("button", { name: "32x32" })).toHaveAttribute("aria-pressed", "true");
     await expect(page.locator("[data-sprites-shell-status]")).toContainText("Shell ready");
     await expect(page.locator("main")).toContainText("Palette/Colors keys only");
     await expect(page.locator("main")).not.toContainText(/Not implemented yet|future rebuild work|Static wireframe only|Plan sprite creation/i);

docs_build/dev/reports/PR_26179_CHARLIE_024-sprites-canvas-grid.md

@@ -0,0 +1,62 @@
+# PR_26179_CHARLIE_024-sprites-canvas-grid
+
+Team: CHARLIE
+Workflow: stacked feature workflow
+Base branch: PR_26179_CHARLIE_023-sprites-toolbar-placeholders
+Canonical ZIP path: dev/workspace/zip/PR_26179_CHARLIE_024-sprites-canvas-grid_delta.zip
+
+## Summary
+
+Added a visible Sprite Creator pixel canvas grid with 16x16 and 32x32 display modes. The grid is rendered by external JavaScript and styled through Theme V2 CSS. This PR adds display behavior only; no persistence, drawing, API, DB, schema, or authoritative browser product data was added.
+
+## Branch Validation
+
+PASS
+
+- Current branch: PR_26179_CHARLIE_024-sprites-canvas-grid
+- Based on: PR_26179_CHARLIE_023-sprites-toolbar-placeholders
+- No start_of_day files changed
+- No DB/API/schema files changed
+- No stale PR #219-#228 code copied
+
+## Requirement Checklist
+
+| Requirement | Status | Notes |
+| --- | --- | --- |
+| Add visible pixel canvas grid | PASS | Grid renders on page load. |
+| Support 16x16 display mode | PASS | Default grid has 256 cells. |
+| Support 32x32 display mode | PASS | Toggle renders 1024 cells. |
+| No persistence | PASS | No storage/API/database writes. |
+| No drawing behavior | PASS | Pixel cells are disabled display cells. |
+| Theme V2 compliant | PASS | CSS added to shared Theme V2 stylesheet; no inline styles. |
+| No DB/API/schema changes | PASS | Only shell, CSS, JS, test, reports changed. |
+
+## Validation Lane Report
+
+Commands:
+
+```text
+node --check assets/toolbox/sprites/js/index.js
+node --check dev/tests/playwright/tools/SpritesToolShell.spec.mjs
+git diff --check -- toolbox/sprites/index.html assets/toolbox/sprites/js/index.js assets/theme-v2/css/gamefoundrystudio.css dev/tests/playwright/tools/SpritesToolShell.spec.mjs
+rg --pcre2 -n -i "<style|style=|<script(?![^>]+src=)|on(click|change|submit|input|load|error)=|imageDataUrl|local-mem|fake-login|MEM DB" toolbox/sprites/index.html assets/toolbox/sprites/js/index.js dev/tests/playwright/tools/SpritesToolShell.spec.mjs
+npx playwright test dev/tests/playwright/tools/SpritesToolShell.spec.mjs --workers=1 --reporter=list --output=<temp>
+```
+
+Results:
+
+- Node syntax checks: PASS
+- `git diff --check`: PASS
+- Guard scan: PASS, no matches
+- Targeted Playwright: PASS, 1 test passed
+
+## Manual Validation Notes
+
+1. Open `/toolbox/sprites/index.html` from the stacked branch.
+2. Confirm the Pixel Grid renders in 16x16 mode by default.
+3. Click 32x32 and confirm the grid updates and the status text changes.
+4. Confirm no pixel drawing or save/load behavior exists yet.
+
+## ZIP Path
+
+`dev/workspace/zip/PR_26179_CHARLIE_024-sprites-canvas-grid_delta.zip`

docs_build/dev/reports/codex_changed_files.txt

@@ -1,5 +1,7 @@
 toolbox/sprites/index.html
+assets/toolbox/sprites/js/index.js
+assets/theme-v2/css/gamefoundrystudio.css
 dev/tests/playwright/tools/SpritesToolShell.spec.mjs
-docs_build/dev/reports/PR_26179_CHARLIE_023-sprites-toolbar-placeholders.md
+docs_build/dev/reports/PR_26179_CHARLIE_024-sprites-canvas-grid.md
 docs_build/dev/reports/codex_changed_files.txt
 docs_build/dev/reports/codex_review.diff