Workers P2: Engine-Sprites (Raster, Figuren mit Posen, Text, Blasen)

Raster je Kontext in einem WeakMap (setGrid/px/tint), Figuren mit den Posen stand, type, coffee und sleep, Graustufe für nicht angeschlossene Worker, Warnzeichen, Text und Sprechblasen mit Klemmung in die Canvas-Breite. Aufzeichnender Test-Kontext in tests/unit/helpers/fakeCtx.mjs.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

tests/unit/helpers/fakeCtx.mjs

@@ -0,0 +1,42 @@
+// Aufzeichnender Canvas-Kontext für die Engine-Tests (Muster: Proxy aus entwuerfe/smoke.js).
+// fillRect/fillText werden mit dem aktuellen fillStyle/font notiert, alles Übrige ist ein No-op.
+
+/**
+ * makeCtx({ width, height }) → { ctx, rects, texts, counts, alphas }
+ *   rects:  [{ x, y, w, h, fill }]  jedes fillRect
+ *   texts:  [{ text, x, y, font }]  jedes fillText (Nicht-String wirft wie im Smoke-Test)
+ *   counts: { save, restore }       Aufrufe von ctx.save()/ctx.restore()
+ *   alphas: []                      jede Zuweisung an ctx.globalAlpha
+ */
+export function makeCtx({ width = 960, height = 768 } = {}) {
+  const rects = []
+  const texts = []
+  const counts = { save: 0, restore: 0 }
+  const alphas = []
+  const target = { canvas: { width, height }, fillStyle: '#000000', font: '10px sans-serif', globalAlpha: 1 }
+  const ctx = new Proxy(target, {
+    get(t, prop) {
+      if (typeof prop === 'symbol') return undefined
+      if (prop === 'save') return () => { counts.save++ }
+      if (prop === 'restore') return () => { counts.restore++ }
+      if (prop === 'measureText') return (text) => ({ width: String(text).length * 7 })
+      if (prop === 'fillRect') return (x, y, w, h) => { rects.push({ x, y, w, h, fill: t.fillStyle }) }
+      if (prop === 'fillText') {
+        return (text, x, y) => {
+          if (typeof text !== 'string') throw new Error('fillText mit Nicht-String: ' + text)
+          texts.push({ text, x, y, font: t.font })
+        }
+      }
+      if (prop === 'createLinearGradient' || prop === 'createRadialGradient') return () => ({ addColorStop() {} })
+      if (prop === 'getImageData') return () => ({ data: new Uint8ClampedArray(4) })
+      if (prop in t) return t[prop]
+      return () => {}
+    },
+    set(t, prop, value) {
+      if (prop === 'globalAlpha') alphas.push(value)
+      t[prop] = value
+      return true
+    },
+  })
+  return { ctx, rects, texts, counts, alphas }
+}

tests/unit/workersSprites.test.mjs

@@ -0,0 +1,140 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { loadModule } from './load.mjs'
+import { makeCtx } from './helpers/fakeCtx.mjs'
+
+// Engine-Grundlagen: Raster, Figuren mit Posen, Text, Sprechblasen
+const S = await loadModule('src/components/workers/engine/sprites.js')
+
+test('px: gerundete Kanten ohne Naht, Standardraster 3, Versatz, Mindestgröße', () => {
+  let { ctx, rects } = makeCtx(); S.setGrid(ctx, { k: 3.4, ox: 0, oy: 0 })
+  S.px(ctx, 0, 0, 1, 1, '#000'); S.px(ctx, 1, 0, 1, 1, '#111'); S.px(ctx, 2, 0, 1, 1, '#222')
+  assert.equal(rects[0].x + rects[0].w, rects[1].x); assert.equal(rects[1].x + rects[1].w, rects[2].x)
+  ;({ ctx, rects } = makeCtx()); S.px(ctx, 1, 2, 3, 4, '#fff'); assert.deepEqual([rects[0].x, rects[0].y, rects[0].w, rects[0].h], [3, 6, 9, 12])
+  ;({ ctx, rects } = makeCtx()); S.setGrid(ctx, { k: 2, ox: -10, oy: 0 }); S.px(ctx, 5, 0, 0.1, 1, '#fff'); assert.equal(rects[0].x, 0); assert.ok(rects[0].w >= 1)
+})
+test('label: Schriftgröße wächst mit dem Raster', () => {
+  const { ctx, texts } = makeCtx(); S.setGrid(ctx, { k: 6 }); S.label(ctx, 'Hallo', 1, 1, { size: 11 }); assert.match(texts[0].font, /22px/)
+})
+test('drawWorker: Trefferfläche', () => {
+  const { ctx } = makeCtx()
+  assert.deepEqual(S.drawWorker(ctx, 10, 20, { hat: 'haiku' }), { x: 10, y: 18, w: 12, h: 16 })
+  assert.equal(S.drawWorker(ctx, 10, 20, { hat: 'haiku', carrying: true }).w, 14)
+  assert.deepEqual(S.drawWorker(ctx, 10, 20, { hat: 'overseer', scale: 2 }), { x: 10, y: 16, w: 24, h: 32 })
+})
+test('drawWorker: Hutfarbe zeigt das Modell, Augen je Pose, Grau mit Alpha', () => {
+  for (const hat of ['opus', 'sonnet', 'haiku', 'overseer']) { const { ctx, rects } = makeCtx(); S.drawWorker(ctx, 0, 0, { hat }); assert.ok(rects.some((r) => r.fill === S.HAT[hat][0]), hat) }
+  const eyes = (pose) => { const { ctx, rects } = makeCtx(); S.drawWorker(ctx, 0, 0, { hat: 'haiku', pose }); return rects.filter((r) => r.fill === S.PAL.e).length }
+  assert.equal(eyes('stand'), 4); assert.equal(eyes('sleep'), 2)
+  for (const pose of ['stand', 'type', 'coffee', 'sleep']) { const { ctx, rects } = makeCtx(); S.drawWorker(ctx, 0, 0, { hat: 'sonnet', pose, t: 1.3 }); assert.ok(rects.length > 20, pose) }
+  const g = makeCtx(); S.drawWorker(g.ctx, 0, 0, { hat: 'opus', grey: true }); assert.ok(g.alphas.includes(0.55)); assert.equal(g.counts.save, g.counts.restore)
+})
+test('drawBubble bleibt im Bild (Spitze nahe am linken und rechten Rand, Raster 3, Breite 960)', () => {
+  const l = makeCtx(); S.drawBubble(l.ctx, 2, 30, 'Hallo'); assert.ok(Math.min(...l.rects.map((r) => r.x)) >= 0)
+  const r = makeCtx(); S.drawBubble(r.ctx, 318, 30, 'Hallo'); assert.ok(Math.max(...r.rects.map((q) => q.x + q.w)) <= 960)
+})
+
+// ---- Ergänzungen: Verhalten, das die fünf Tests oben nicht berühren ----
+
+test('Raster gilt je Kontext (WeakMap, kein Feld am Kontext); ohne setGrid gilt k = 3', () => {
+  const a = makeCtx()
+  const b = makeCtx()
+  S.setGrid(a.ctx, { k: 6, ox: 1, oy: 2 })
+  S.px(a.ctx, 1, 1, 1, 1, '#000')
+  S.px(b.ctx, 1, 1, 1, 1, '#000')
+  assert.deepEqual([a.rects[0].x, a.rects[0].y, a.rects[0].w, a.rects[0].h], [7, 8, 6, 6])
+  assert.deepEqual([b.rects[0].x, b.rects[0].y, b.rects[0].w, b.rects[0].h], [3, 3, 3, 3])
+  assert.equal('wkGrid' in a.ctx, false)
+})
+test('tint: Alpha nur um die Fläche, save und restore ausgeglichen', () => {
+  const { ctx, rects, alphas, counts } = makeCtx()
+  S.tint(ctx, 0, 0, 2, 2, '#ff0000', 0.25)
+  assert.deepEqual([rects.length, rects[0].fill, rects[0].w], [1, '#ff0000', 6])
+  assert.deepEqual(alphas, [0.25])
+  assert.deepEqual(counts, { save: 1, restore: 1 })
+})
+test('label: Zahl wird zu Text, Hintergrund folgt der Ausrichtung', () => {
+  const n = makeCtx()
+  S.label(n.ctx, 42, 1, 1)
+  assert.equal(n.texts[0].text, '42')
+  const c = makeCtx()
+  S.label(c.ctx, 'abcd', 10, 5, { size: 12, align: 'center', bg: '#ffffff' })
+  // Breite 4 * 7 = 28, Mitte bei 30: Kasten von 30 - 14 - 4 bis + 28 + 8, Höhe 12 + 5
+  assert.deepEqual([c.rects[0].x, c.rects[0].y, c.rects[0].w, c.rects[0].h, c.rects[0].fill], [12, 13, 36, 17, '#ffffff'])
+  assert.equal(c.texts[0].x, 30)
+})
+test('drawWorker: Schlafen zeigt ein z über dem Hut, das mit t steigt; stehen nicht', () => {
+  const zs = (pose, t) => {
+    const { ctx, rects } = makeCtx()
+    S.drawWorker(ctx, 20, 40, { hat: 'haiku', pose, t })
+    return rects.filter((r) => r.fill === S.PAL.mute)
+  }
+  const z0 = zs('sleep', 0)
+  const z1 = zs('sleep', 0.5)
+  assert.equal(z0.length, 3)
+  assert.equal(zs('stand', 0).length, 0)
+  assert.ok(z1[0].y < z0[0].y, 'steigt')
+  assert.ok(Math.max(...z0.map((r) => r.y + r.h)) <= (40 - 2) * 3, 'über dem Hut')
+})
+test('drawWorker: Kaffee zeichnet eine 3x3-Tasse und einen flackernden Dampfpixel', () => {
+  const run = (pose, t) => {
+    const { ctx, rects } = makeCtx()
+    S.drawWorker(ctx, 0, 0, { hat: 'sonnet', pose, t })
+    return rects
+  }
+  const cups = (rects) => rects.filter((r) => r.fill === S.PAL.metal2 && r.w === 9 && r.h === 9).length
+  const steam = (rects) => rects.filter((r) => r.fill === S.PAL.g).length
+  assert.equal(cups(run('coffee', 0)), 1)
+  assert.equal(cups(run('stand', 0)), 0)
+  assert.deepEqual([steam(run('coffee', 0)), steam(run('coffee', 0.4)), steam(run('stand', 0))], [1, 0, 0])
+})
+test('drawWorker: Grau tauscht Körper- und Hutfarben, Trefferfläche bleibt', () => {
+  const grey = makeCtx()
+  const hit = S.drawWorker(grey.ctx, 10, 20, { hat: 'opus', grey: true, carrying: true })
+  assert.deepEqual(hit, S.drawWorker(makeCtx().ctx, 10, 20, { hat: 'opus', carrying: true }))
+  const own = [S.PAL.b, S.PAL.s, S.PAL.h, S.HAT.opus[0], S.HAT.opus[1]]
+  assert.ok(!grey.rects.some((r) => own.includes(r.fill)))
+  assert.deepEqual([grey.alphas, grey.counts], [[0.55], { save: 1, restore: 1 }])
+})
+test('drawWorker: Auswahlpfeil nur bei selected, außerhalb der Graustufe', () => {
+  const ink = (opts) => {
+    const { ctx, rects, alphas } = makeCtx()
+    S.drawWorker(ctx, 0, 0, { hat: 'haiku', ...opts })
+    return [rects.filter((r) => r.fill === S.PAL.ink).length, alphas.length]
+  }
+  assert.deepEqual(ink({}), [0, 0])
+  assert.deepEqual(ink({ selected: true }), [9, 0])
+  assert.deepEqual(ink({ selected: true, grey: true }), [9, 1])
+})
+test('drawAlertMark: rotes 3x7-Ausrufezeichen mit Umriss, unten mittig bei (x, y)', () => {
+  const { ctx, rects } = makeCtx()
+  S.drawAlertMark(ctx, 50, 30)
+  assert.deepEqual([...new Set(rects.map((r) => r.fill))].sort(), [S.PAL.o, S.PAL.red].sort())
+  const red = rects.filter((r) => r.fill === S.PAL.red)
+  const left = Math.min(...red.map((r) => r.x))
+  const right = Math.max(...red.map((r) => r.x + r.w))
+  const top = Math.min(...red.map((r) => r.y))
+  const bottom = Math.max(...red.map((r) => r.y + r.h))
+  assert.deepEqual([right - left, bottom - top], [9, 21])
+  assert.ok(Math.abs((left + right) / 2 - 150) <= 1, 'mittig')
+  assert.equal(Math.max(...rects.map((r) => r.y + r.h)), 90)
+})
+test('drawBubble: Text und Maße folgen dem Raster, leerer Text zeichnet nichts, Spitze außerhalb bleibt im Bild', () => {
+  const a = makeCtx()
+  S.drawBubble(a.ctx, 50, 40, 'Hallo')
+  assert.deepEqual([a.texts.length, a.texts[0].text], [1, 'Hallo'])
+  assert.match(a.texts[0].font, /12px/)
+  const b = makeCtx()
+  S.setGrid(b.ctx, { k: 6 })
+  S.drawBubble(b.ctx, 50, 40, 'Hallo')
+  assert.match(b.texts[0].font, /24px/)
+  const e = makeCtx()
+  S.drawBubble(e.ctx, 50, 40, '')
+  assert.equal(e.rects.length, 0)
+  const o = makeCtx()
+  S.drawBubble(o.ctx, 330, 30, 'Hallo')
+  assert.ok(Math.max(...o.rects.map((q) => q.x + q.w)) <= 960)
+  const small = makeCtx({ width: 100 })
+  S.drawBubble(small.ctx, 20, 30, 'Hallo')
+  assert.ok(Math.max(...small.rects.map((q) => q.x + q.w)) <= 100)
+})