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 18 / 29

tests.jschange 1/1

const assert = require('assert');
const { createPixels, floodFill, UndoStack, clonePixels } = require('./editor.js');
 
function test(name, fn) {
  try { fn(); console.log('✓', name); }
  catch (err) { console.error('✗', name); throw err; }
}
 
test('floodFill fills a contiguous empty region only', () => {
  const p = createPixels(4);
  p[0][2] = '#000000'; p[1][2] = '#000000'; p[2][2] = '#000000'; p[3][2] = '#000000';
  const result = floodFill(p, 0, 0, '#ff0000', 4);
  assert.equal(result.changed, true);
  assert.equal(result.count, 8);
  assert.equal(result.pixels[0][0], '#ff0000');
  assert.equal(result.pixels[3][1], '#ff0000');
  assert.equal(result.pixels[0][3], null);
  assert.equal(result.pixels[0][2], '#000000');
  assert.equal(p[0][0], null, 'original array must not be mutated');
});
 
test('floodFill reports unchanged when replacement equals target', () => {
  const p = createPixels(3, '#123456');
  const result = floodFill(p, 1, 1, '#123456', 3);
  assert.equal(result.changed, false);
  assert.equal(result.count, 0);
  assert.deepEqual(result.pixels, p);
});
 
test('UndoStack undo/redo traverses snapshots and drops redo after branch', () => {
  const a = createPixels(2);
  const history = new UndoStack(a);
  const b = clonePixels(a); b[0][0] = '#111111'; history.push(b);
  const c = clonePixels(b); c[1][1] = '#222222'; history.push(c);
 
  assert.equal(history.current()[1][1], '#222222');
  assert.equal(history.undo()[1][1], null);
  assert.equal(history.undo()[0][0], null);
  assert.equal(history.redo()[0][0], '#111111');
 
  const d = history.current(); d[0][1] = '#333333'; history.push(d);
  assert.equal(history.canRedo(), false);
  assert.equal(history.current()[0][1], '#333333');
});
 
test('UndoStack snapshots are immutable from caller mutation', () => {
  const a = createPixels(2);
  const history = new UndoStack(a);
  a[0][0] = '#ffffff';
  assert.equal(history.current()[0][0], null);
  const cur = history.current(); cur[0][0] = '#abcdef';
  assert.equal(history.current()[0][0], null);
});
 
console.log('All tests passed');
 

56 linesjs

Writes tests.html

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