Files
tickte-system/tests/unit/workersSprites.test.mjs
T
ClaudeandClaude Sonnet 5.5 d44b28368d 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>
2026-10-18 01:50:40 +00:00

141 lines
7.6 KiB
JavaScript

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)
})