Workers P2: Sichtprüfung im Browser – Schilder über den Figuren, Raumtitel über den Möbeln, Zoomknöpfe unten, Abstand der Meldung

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

tests/unit/helpers/fakeCtx.mjs

@@ -2,15 +2,18 @@
 // fillRect/fillText werden mit dem aktuellen fillStyle/font notiert, alles Übrige ist ein No-op.
 
 /**
- * makeCtx({ width, height }) → { ctx, rects, texts, counts, alphas }
+ * makeCtx({ width, height }) → { ctx, rects, texts, strokes, counts, alphas }
  *   rects:  [{ x, y, w, h, fill }]  jedes fillRect
  *   texts:  [{ text, x, y, font }]  jedes fillText (Nicht-String wirft wie im Smoke-Test)
+ *   strokes: [{ text, x, y, style, width, rects, texts }]  jedes strokeText (style/width = strokeStyle/lineWidth, rects/texts =
+ *           Anzahl der bis dahin gezeichneten fillRect/fillText: so ist die Reihenfolge prüfbar)
  *   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 strokes = []
   const counts = { save: 0, restore: 0 }
   const alphas = []
   const target = { canvas: { width, height }, fillStyle: '#000000', font: '10px sans-serif', globalAlpha: 1 }
@@ -27,6 +30,12 @@ export function makeCtx({ width = 960, height = 768 } = {}) {
           texts.push({ text, x, y, font: t.font })
         }
       }
+      if (prop === 'strokeText') {
+        return (text, x, y) => {
+          if (typeof text !== 'string') throw new Error('strokeText mit Nicht-String: ' + text)
+          strokes.push({ text, x, y, style: t.strokeStyle, width: t.lineWidth, rects: rects.length, texts: texts.length })
+        }
+      }
       if (prop === 'createLinearGradient' || prop === 'createRadialGradient') return () => ({ addColorStop() {} })
       if (prop === 'getImageData') return () => ({ data: new Uint8ClampedArray(4) })
       if (prop in t) return t[prop]
@@ -38,5 +47,5 @@ export function makeCtx({ width = 960, height = 768 } = {}) {
       return true
     },
   })
-  return { ctx, rects, texts, counts, alphas }
+  return { ctx, rects, texts, strokes, counts, alphas }
 }