Build a pixel-art editor as a static web app in this directory: index.html, style.css, …

claude-codeclaude-fable-5 · 37 steps · 8m 45s · 7 filessession 976f0ecc-d91@patrick-toulme
Build a pixel-art editor as a static web app in this directory: index.html, style.css, editor.js, palette.js. A 32x32 grid canvas with pencil/eraser/fill/eyedropper tools, color palette + custom picker, undo/redo, zoom, grid toggle, export as PNG (scaled 10x) and as JSON, import from JSON, keyboard shortcuts, dark theme, and tests.html + tests.js exercising the flood-fill and undo stack logic. Run the tests headless with node and fix what fails.
same matchclaude-code · 37 steps codex · 80 steps opencode · 31 steps pi · 29 steps antigravity · 34 steps
compare in arena
step 05 / 37
editor.jschange 1/1
/* Pixel-art editor.
   The core logic (grid helpers, flood fill, undo stack, serialization) is
   DOM-free so tests.js can require() this file under Node. The UI section at
   the bottom only runs in a browser page that has the editor canvas. */
(function (global) {
  'use strict';
 
  const GRID_SIZE = 32;
 
  // ---------------------------------------------------------------- core ----
 
  function createGrid(size = GRID_SIZE, fill = null) {
    return Array.from({ length: size }, () => new Array(size).fill(fill));
  }
 
  function cloneGrid(pixels) {
    return pixels.map((row) => row.slice());
  }
 
  function gridsEqual(a, b) {
    if (a.length !== b.length) return false;
    for (let y = 0; y < a.length; y++) {
      if (a[y].length !== b[y].length) return false;
      for (let x = 0; x < a[y].length; x++) {
        if (a[y][x] !== b[y][x]) return false;
      }
    }
    return true;
  }
 
  // Iterative 4-way flood fill. Mutates `pixels`; returns how many cells changed.
  function floodFill(pixels, x, y, color) {
    const h = pixels.length;
    const w = h ? pixels[0].length : 0;
    if (x < 0 || y < 0 || x >= w || y >= h) return 0;
    const target = pixels[y][x];
    if (target === color) return 0;
    let changed = 0;
    const stack = [[x, y]];
    while (stack.length) {
      const [cx, cy] = stack.pop();
      if (cx < 0 || cy < 0 || cx >= w || cy >= h) continue;
      if (pixels[cy][cx] !== target) continue;
      pixels[cy][cx] = color;
      changed += 1;
      stack.push([cx + 1, cy], [cx - 1, cy], [cx, cy + 1], [cx, cy - 1]);
    }
    return changed;
  }
 
  // Snapshot-based undo/redo. The caller owns the "current" state and trades
  // it for a stored snapshot: undo(current) -> previous, redo(current) -> next.
  class UndoStack {
    constructor(limit = 100) {
      this.limit = limit;
      this.past = [];
      this.future = [];
    }
 
    push(snapshot) {
      this.past.push(snapshot);
      if (this.past.length > this.limit) this.past.shift();
      this.future.length = 0;
    }
 
    undo(current) {
      if (!this.past.length) return null;
      this.future.push(current);
      return this.past.pop();
    }
 
    redo(current) {
      if (!this.future.length) return null;
      this.past.push(current);
      return this.future.pop();
    }
 
    canUndo() {
      return this.past.length > 0;
    }
 
    canRedo() {
      return this.future.length > 0;
    }
  }
 
  function serialize(pixels) {
    return JSON.stringify({
      app: 'pixel-art-editor',
      version: 1,
      width: pixels[0].length,
      height: pixels.length,
      pixels,
    });
  }
 
  function deserialize(json) {
    const data = JSON.parse(json);
    if (!data || !Array.isArray(data.pixels)) throw new Error('missing "pixels" array');
    const rows = data.pixels;
    if (rows.length !== GRID_SIZE) throw new Error(`expected ${GRID_SIZE} rows, got ${rows.length}`);
    const grid = createGrid();
    for (let y = 0; y < GRID_SIZE; y++) {
      if (!Array.isArray(rows[y]) || rows[y].length !== GRID_SIZE) {
        throw new Error(`row ${y} is not ${GRID_SIZE} cells`);
      }
      for (let x = 0; x < GRID_SIZE; x++) {
        const v = rows[y][x];
        if (v === null) continue;
        if (typeof v !== 'string' || !/^#[0-9a-fA-F]{6}$/.test(v)) {
          throw new Error(`bad pixel at ${x},${y}: ${JSON.stringify(v)}`);
        }
        grid[y][x] = v.toLowerCase();
      }
    }
    return grid;
  }
 
  const core = {
    GRID_SIZE,
    createGrid,
    cloneGrid,
    gridsEqual,
    floodFill,
    UndoStack,
    serialize,
    deserialize,
  };
 
  if (typeof module !== 'undefined' && module.exports) module.exports = core;
  global.PixelEditorCore = core;
 
  // ------------------------------------------------------------ browser -----
 
  if (typeof document === 'undefined') return;
 
  function initEditor() {
    const canvas = document.getElementById('canvas');
    if (!canvas) return; // tests.html loads this file without the editor UI
    const ctx = canvas.getContext('2d');
 
    const paletteApi = global.PixelPalette || { COLORS: ['#000000', '#ffffff'], DEFAULT_COLOR: '#ffffff' };
    const ZOOM_LEVELS = [4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32];
    const EXPORT_SCALE = 10;
 
    const state = {
      pixels: createGrid(),
      color: paletteApi.DEFAULT_COLOR,
      tool: 'pencil',
      zoom: 14,
      showGrid: true,
      history: new UndoStack(200),
      stroke: null, // snapshot taken at stroke start, pending an undo push
      strokeChanged: false,
    };
 
    const toolButtons = Array.from(document.querySelectorAll('[data-tool]'));
    const undoBtn = document.getElementById('undo');
    const redoBtn = document.getElementById('redo');
    const zoomLabel = document.getElementById('zoom-label');
    const gridBtn = document.getElementById('grid-toggle');
    const paletteEl = document.getElementById('palette');
    const currentSwatch = document.getElementById('current-swatch');
    const currentHex = document.getElementById('current-hex');
    const customColor = document.getElementById('custom-color');
    const importInput = document.getElementById('import-file');
    const statusEl = document.getElementById('status');
 
    // ---- rendering ----
 
    function render() {
      const size = GRID_SIZE * state.zoom;
      if (canvas.width !== size) {
        canvas.width = size;
        canvas.height = size;
      }
      const z = state.zoom;
      for (let y = 0; y < GRID_SIZE; y++) {
        for (let x = 0; x < GRID_SIZE; x++) {
          ctx.fillStyle = state.pixels[y][x] || ((x + y) % 2 ? '#26262d' : '#1f1f26');
          ctx.fillRect(x * z, y * z, z, z);
        }
      }
      if (state.showGrid && z >= 6) {
        drawGridLines(size, z, 1, 'rgba(255, 255, 255, 0.07)');
        drawGridLines(size, z, 8, 'rgba(255, 255, 255, 0.16)');
      }
      updateControls();
    }
 
    function drawGridLines(size, z, step, style) {
      ctx.strokeStyle = style;
      ctx.lineWidth = 1;
      ctx.beginPath();
      for (let i = step; i < GRID_SIZE; i += step) {
        ctx.moveTo(i * z + 0.5, 0);
        ctx.lineTo(i * z + 0.5, size);
        ctx.moveTo(0, i * z + 0.5);
        ctx.lineTo(size, i * z + 0.5);
      }
      ctx.stroke();
    }
 
    function updateControls() {
      undoBtn.disabled = !state.history.canUndo();
      redoBtn.disabled = !state.history.canRedo();
      zoomLabel.textContent = `${state.zoom}×`;
      gridBtn.setAttribute('aria-pressed', String(state.showGrid));
      gridBtn.classList.toggle('active', state.showGrid);
      toolButtons.forEach((b) => b.classList.toggle('active', b.dataset.tool === state.tool));
    }
 
    function updateStatus(cell) {
      statusEl.textContent = cell ? `${state.tool} — (${cell.x}, ${cell.y})` : state.tool;
    }
 
    // ---- tools & drawing ----
 
    function setTool(tool) {
      state.tool = tool;
      updateControls();
      updateStatus(null);
    }
 
    function setColor(color) {
      state.color = color.toLowerCase();
      currentSwatch.style.background = state.color;
      currentHex.textContent = state.color;
      if (/^#[0-9a-f]{6}$/.test(state.color)) customColor.value = state.color;
      paletteEl.querySelectorAll('.swatch').forEach((b) => {
        b.classList.toggle('active', b.dataset.color === state.color);
      });
    }
 
    function cellFromEvent(e) {
      const rect = canvas.getBoundingClientRect();
      const x = Math.floor(((e.clientX - rect.left) * (canvas.width / rect.width)) / state.zoom);
      const y = Math.floor(((e.clientY - rect.top) * (canvas.height / rect.height)) / state.zoom);
      if (x < 0 || y < 0 || x >= GRID_SIZE || y >= GRID_SIZE) return null;
      return { x, y };
    }
 
    function paint(cell) {
      const color = state.tool === 'eraser' ? null : state.color;
      if (state.pixels[cell.y][cell.x] !== color) {
        state.pixels[cell.y][cell.x] = color;
        state.strokeChanged = true;
      }
    }
 
    canvas.addEventListener('pointerdown', (e) => {
      e.preventDefault();
      const cell = cellFromEvent(e);
      if (!cell) return;
      if (state.tool === 'eyedropper') {
        const picked = state.pixels[cell.y][cell.x];
        if (picked) setColor(picked);
        return;
      }
      if (state.tool === 'fill') {
        const before = cloneGrid(state.pixels);
        if (floodFill(state.pixels, cell.x, cell.y, state.color) > 0) {
          state.history.push(before);
        }
        render();
        return;
      }
      state.stroke = cloneGrid(state.pixels);
      state.strokeChanged = false;
      canvas.setPointerCapture(e.pointerId);
      paint(cell);
      render();
    });
 
    canvas.addEventListener('pointermove', (e) => {
      const cell = cellFromEvent(e);
      updateStatus(cell);
      if (!state.stroke || !cell) return;
      paint(cell);
      render();
    });
 
    function endStroke() {
      if (!state.stroke) return;
      if (state.strokeChanged) state.history.push(state.stroke);
      state.stroke = null;
      updateControls();
    }
 
    canvas.addEventListener('pointerup', endStroke);
    canvas.addEventListener('pointercancel', endStroke);
    canvas.addEventListener('pointerleave', () => updateStatus(null));
 
    // ---- undo / redo / zoom / grid ----
 
    function doUndo() {
      const prev = state.history.undo(cloneGrid(state.pixels));
      if (prev) {
        state.pixels = prev;
        render();
      }
    }
 
    function doRedo() {
      const next = state.history.redo(cloneGrid(state.pixels));
      if (next) {
        state.pixels = next;
        render();
      }
    }
 
    function zoomBy(step) {
      const i = ZOOM_LEVELS.indexOf(state.zoom);
      const next = ZOOM_LEVELS[Math.min(ZOOM_LEVELS.length - 1, Math.max(0, i + step))];
      if (next !== state.zoom) {
        state.zoom = next;
        render();
      }
    }
 
    function toggleGrid() {
      state.showGrid = !state.showGrid;
      render();
    }
 
    // ---- import / export ----
 
    function download(name, href, revoke) {
      const a = document.createElement('a');
      a.href = href;
      a.download = name;
      document.body.appendChild(a);
      a.click();
      a.remove();
      if (revoke) setTimeout(() => URL.revokeObjectURL(href), 1000);
    }
 
    function exportPNG() {
      const off = document.createElement('canvas');
      off.width = GRID_SIZE * EXPORT_SCALE;
      off.height = GRID_SIZE * EXPORT_SCALE;
      const octx = off.getContext('2d');
      for (let y = 0; y < GRID_SIZE; y++) {
        for (let x = 0; x < GRID_SIZE; x++) {
          const v = state.pixels[y][x];
          if (!v) continue; // transparent pixels stay transparent
          octx.fillStyle = v;
          octx.fillRect(x * EXPORT_SCALE, y * EXPORT_SCALE, EXPORT_SCALE, EXPORT_SCALE);
        }
      }
      download('pixel-art.png', off.toDataURL('image/png'));
    }
 
    function exportJSON() {
      const blob = new Blob([serialize(state.pixels)], { type: 'application/json' });
      download('pixel-art.json', URL.createObjectURL(blob), true);
    }
 
    importInput.addEventListener('change', () => {
      const file = importInput.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = () => {
        try {
          const grid = deserialize(reader.result);
          state.history.push(cloneGrid(state.pixels));
          state.pixels = grid;
          render();
        } catch (err) {
          alert(`Import failed: ${err.message}`);
        }
        importInput.value = '';
      };
      reader.readAsText(file);
    });
 
    // ---- wiring ----
 
    toolButtons.forEach((b) => b.addEventListener('click', () => setTool(b.dataset.tool)));
    undoBtn.addEventListener('click', doUndo);
    redoBtn.addEventListener('click', doRedo);
    document.getElementById('zoom-in').addEventListener('click', () => zoomBy(1));
    document.getElementById('zoom-out').addEventListener('click', () => zoomBy(-1));
    gridBtn.addEventListener('click', toggleGrid);
    document.getElementById('export-png').addEventListener('click', exportPNG);
    document.getElementById('export-json').addEventListener('click', exportJSON);
    document.getElementById('import-json').addEventListener('click', () => importInput.click());
    customColor.addEventListener('input', () => setColor(customColor.value));
 
    paletteApi.COLORS.forEach((color) => {
      const b = document.createElement('button');
      b.className = 'swatch';
      b.style.background = color;
      b.title = color;
      b.dataset.color = color.toLowerCase();
      b.addEventListener('click', () => setColor(color));
      paletteEl.appendChild(b);
    });
 
    window.addEventListener('keydown', (e) => {
      const t = e.target;
      if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return;
      const mod = e.ctrlKey || e.metaKey;
      const key = e.key.toLowerCase();
      if (mod && key === 'z' && !e.shiftKey) {
        e.preventDefault();
        doUndo();
        return;
      }
      if (mod && (key === 'y' || (key === 'z' && e.shiftKey))) {
        e.preventDefault();
        doRedo();
        return;
      }
      if (mod) return;
      switch (key) {
        case 'p': setTool('pencil'); break;
        case 'e': setTool('eraser'); break;
        case 'f': setTool('fill'); break;
        case 'i': setTool('eyedropper'); break;
        case 'g': toggleGrid(); break;
        case '+': case '=': zoomBy(1); break;
        case '-': case '_': zoomBy(-1); break;
      }
    });
 
    setColor(state.color);
    setTool('pencil');
    render();
  }
 
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initEditor);
  } else {
    initEditor();
  }
})(typeof globalThis !== 'undefined' ? globalThis : this);
 
438 linesjs
Writes …/editor.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#claude #claude-code #claude-fable-5 #css #graphics #html #javascript #quick #testing #ui
d1-claude
← all sessions