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

pigpt-5.5 · 29 steps · 2m 39s · 6 filessession a7c5097d-a36@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 10 / 29
editor.jschange 1/2
(function (root, factory) {
  const paletteApi = typeof require === 'function' && typeof module === 'object' && module.exports
    ? require('./palette.js')
    : root.PixelPalette;
  const api = factory(paletteApi);
  if (typeof module === 'object' && module.exports) module.exports = api;
  root.PixelEditor = api;
})(typeof globalThis !== 'undefined' ? globalThis : this, function (paletteApi) {
  const SIZE = 32;
  const EMPTY = null;
  const { DEFAULT_PALETTE, normalizeHex } = paletteApi;
 
  function createPixels(size = SIZE, fill = EMPTY) {
    return Array.from({ length: size }, () => Array.from({ length: size }, () => fill));
  }
 
  function clonePixels(pixels) {
    return pixels.map((row) => row.slice());
  }
 
  function inBounds(x, y, size = SIZE) {
    return x >= 0 && y >= 0 && x < size && y < size;
  }
 
  function floodFill(pixels, x, y, replacement, size = pixels.length) {
    if (!inBounds(x, y, size)) return { pixels: clonePixels(pixels), changed: false, count: 0 };
    replacement = replacement === undefined ? EMPTY : replacement;
    const target = pixels[y][x];
    if (target === replacement) return { pixels: clonePixels(pixels), changed: false, count: 0 };
 
    const next = clonePixels(pixels);
    const stack = [[x, y]];
    let count = 0;
    while (stack.length) {
      const [cx, cy] = stack.pop();
      if (!inBounds(cx, cy, size) || next[cy][cx] !== target) continue;
      next[cy][cx] = replacement;
      count++;
      stack.push([cx + 1, cy], [cx - 1, cy], [cx, cy + 1], [cx, cy - 1]);
    }
    return { pixels: next, changed: count > 0, count };
  }
 
  class UndoStack {
    constructor(initialState, limit = 100) {
      this.limit = limit;
      this.stack = [clonePixels(initialState)];
      this.index = 0;
    }
    current() { return clonePixels(this.stack[this.index]); }
    push(state) {
      const snapshot = clonePixels(state);
      this.stack = this.stack.slice(0, this.index + 1);
      this.stack.push(snapshot);
      if (this.stack.length > this.limit) this.stack.shift();
      this.index = this.stack.length - 1;
    }
    canUndo() { return this.index > 0; }
    canRedo() { return this.index < this.stack.length - 1; }
    undo() { if (this.canUndo()) this.index--; return this.current(); }
    redo() { if (this.canRedo()) this.index++; return this.current(); }
  }
 
  function boot() {
    if (typeof document === 'undefined') return;
    const canvas = document.getElementById('canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const preview = document.getElementById('preview');
    const pctx = preview.getContext('2d');
    const paletteEl = document.getElementById('palette');
    const colorPicker = document.getElementById('colorPicker');
    const toolButtons = [...document.querySelectorAll('[data-tool]')];
    const zoomInput = document.getElementById('zoom');
    const zoomLabel = document.getElementById('zoomLabel');
    const gridToggle = document.getElementById('gridToggle');
    const status = document.getElementById('status');
    const jsonFile = document.getElementById('jsonFile');
 
    const state = {
      pixels: createPixels(),
      color: '#ff004d',
      tool: 'pencil',
      zoom: Number(zoomInput.value),
      showGrid: true,
      drawing: false,
      lastKey: ''
    };
    let history = new UndoStack(state.pixels);
 
    function setStatus(text) { status.textContent = text; }
    function cellSize() { return canvas.width / SIZE; }
    function resize() {
      const css = SIZE * state.zoom;
      canvas.style.width = css + 'px';
      canvas.style.height = css + 'px';
      zoomLabel.textContent = state.zoom + '×';
      draw();
    }
    function draw() {
      ctx.imageSmoothingEnabled = false;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      const c = cellSize();
      for (let y = 0; y < SIZE; y++) for (let x = 0; x < SIZE; x++) {
        if (state.pixels[y][x]) {
          ctx.fillStyle = state.pixels[y][x];
          ctx.fillRect(x * c, y * c, c, c);
        }
      }
      if (state.showGrid) {
        ctx.strokeStyle = 'rgba(35,42,58,.55)';
        ctx.lineWidth = 1;
        for (let i = 0; i <= SIZE; i++) {
          ctx.beginPath(); ctx.moveTo(i * c + .5, 0); ctx.lineTo(i * c + .5, canvas.height); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(0, i * c + .5); ctx.lineTo(canvas.width, i * c + .5); ctx.stroke();
        }
      }
      pctx.imageSmoothingEnabled = false;
      pctx.clearRect(0, 0, preview.width, preview.height);
      pctx.drawImage(canvas, 0, 0, preview.width, preview.height);
    }
    function commit(before) {
      if (JSON.stringify(before) !== JSON.stringify(state.pixels)) history.push(state.pixels);
      draw();
    }
    function setTool(tool) {
      state.tool = tool;
      toolButtons.forEach((b) => b.classList.toggle('active', b.dataset.tool === tool));
      setStatus(tool + ' ready');
    }
    function setColor(color) {
      state.color = normalizeHex(color);
      colorPicker.value = state.color;
      [...paletteEl.children].forEach((b) => b.classList.toggle('selected', b.dataset.color === state.color));
    }
    function pointerCell(e) {
      const r = canvas.getBoundingClientRect();
      return {
        x: Math.floor((e.clientX - r.left) / r.width * SIZE),
        y: Math.floor((e.clientY - r.top) / r.height * SIZE)
      };
    }
    function applyAt(x, y, withCommit) {
      if (!inBounds(x, y)) return;
      const before = withCommit ? clonePixels(state.pixels) : null;
      if (state.tool === 'pencil') state.pixels[y][x] = state.color;
      else if (state.tool === 'eraser') state.pixels[y][x] = EMPTY;
      else if (state.tool === 'eyedropper') { if (state.pixels[y][x]) setColor(state.pixels[y][x]); setTool('pencil'); }
      else if (state.tool === 'fill') {
        const result = floodFill(state.pixels, x, y, state.color);
        state.pixels = result.pixels;
      }
      if (withCommit) commit(before); else draw();
    }
    function download(name, type, data) {
      const a = document.createElement('a');
      a.href = URL.createObjectURL(new Blob([data], { type }));
      a.download = name;
      a.click();
      setTimeout(() => URL.revokeObjectURL(a.href), 1000);
    }
    function exportPng() {
      const out = document.createElement('canvas');
      out.width = out.height = SIZE * 10;
      const o = out.getContext('2d');
      o.imageSmoothingEnabled = false;
      o.fillStyle = '#ffffff'; o.fillRect(0, 0, out.width, out.height);
      for (let y = 0; y < SIZE; y++) for (let x = 0; x < SIZE; x++) if (state.pixels[y][x]) {
        o.fillStyle = state.pixels[y][x]; o.fillRect(x * 10, y * 10, 10, 10);
      }
      const a = document.createElement('a'); a.download = 'pixel-art-320.png'; a.href = out.toDataURL('image/png'); a.click();
    }
    function exportJson() { download('pixel-art.json', 'application/json', JSON.stringify({ size: SIZE, pixels: state.pixels }, null, 2)); }
    function importJson(text) {
      const data = JSON.parse(text);
      if (data.size !== SIZE || !Array.isArray(data.pixels) || data.pixels.length !== SIZE) throw new Error('Expected 32x32 JSON');
      state.pixels = data.pixels.map((row) => row.map((c) => c ? normalizeHex(c) : EMPTY));
      history = new UndoStack(state.pixels);
      draw();
    }
 
    DEFAULT_PALETTE.forEach((color) => {
      const b = document.createElement('button'); b.className = 'swatch'; b.dataset.color = color; b.title = color; b.style.background = color;
      b.addEventListener('click', () => setColor(color)); paletteEl.appendChild(b);
    });
    toolButtons.forEach((b) => b.addEventListener('click', () => setTool(b.dataset.tool)));
    colorPicker.addEventListener('input', (e) => setColor(e.target.value));
    zoomInput.addEventListener('input', (e) => { state.zoom = Number(e.target.value); resize(); });
    gridToggle.addEventListener('change', (e) => { state.showGrid = e.target.checked; draw(); });
    document.getElementById('undoBtn').onclick = () => { state.pixels = history.undo(); draw(); };
    document.getElementById('redoBtn').onclick = () => { state.pixels = history.redo(); draw(); };
    document.getElementById('clearBtn').onclick = () => { const before = clonePixels(state.pixels); state.pixels = createPixels(); commit(before); };
    document.getElementById('pngBtn').onclick = exportPng;
    document.getElementById('jsonBtn').onclick = exportJson;
    document.getElementById('importBtn').onclick = () => jsonFile.click();
    jsonFile.onchange = () => jsonFile.files[0]?.text().then(importJson).catch((e) => alert(e.message));
    canvas.addEventListener('pointerdown', (e) => { state.drawing = true; canvas.setPointerCapture(e.pointerId); const p = pointerCell(e); applyAt(p.x, p.y, true); });
    canvas.addEventListener('pointermove', (e) => { if (!state.drawing || !['pencil', 'eraser'].includes(state.tool)) return; const p = pointerCell(e); applyAt(p.x, p.y, false); });
    canvas.addEventListener('pointerup', () => { state.drawing = false; history.push(state.pixels); });
    window.addEventListener('keydown', (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') { e.preventDefault(); state.pixels = e.shiftKey ? history.redo() : history.undo(); draw(); }
      else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'y') { e.preventDefault(); state.pixels = history.redo(); draw(); }
      else if (e.key === 'p') setTool('pencil'); else if (e.key === 'e') setTool('eraser'); else if (e.key === 'f') setTool('fill');
      else if (e.key === 'i') setTool('eyedropper'); else if (e.key === 'g') { gridToggle.checked = state.showGrid = !state.showGrid; draw(); }
      else if (e.key === '+' || e.key === '=') { zoomInput.value = state.zoom = Math.min(24, state.zoom + 1); resize(); }
      else if (e.key === '-') { zoomInput.value = state.zoom = Math.max(8, state.zoom - 1); resize(); }
    });
 
    setColor(state.color); setTool('pencil'); resize();
  }
 
  if (typeof document !== 'undefined') document.addEventListener('DOMContentLoaded', boot);
  return { SIZE, EMPTY, createPixels, clonePixels, floodFill, UndoStack, normalizeHex };
});
 
217 linesjs
**Refining stroke commit logic for undo accuracy**
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#css #gpt #gpt-5.5 #graphics #html #javascript #pi #quick #testing #ui
d4-pi
← all sessions