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>

src/components/workers/engine/sprites.js

@@ -227,8 +227,9 @@ export function drawAlertMark(ctx, x, y) {
 const fontOf = (weight, devPx) => `${weight} ${Math.round(devPx * 100) / 100}px ${FONT_FAMILY}`
 
 /* Text an (x, y) in logischen Einheiten (y = Oberkante der Zeile). Schrift = size * k / 3 Geräte-Pixel,
-   bei k = 3 also size px. bg: Farbe eines Kastens hinter dem Text; align: 'left' | 'center' | 'right'. */
-export function label(ctx, text, x, y, { size = 12, color = PAL.ink, weight = 500, align = 'left', bg } = {}) {
+   bei k = 3 also size px. bg: Farbe eines Kastens hinter dem Text; halo: Farbe eines dünnen Rands um die Buchstaben
+   (lesbar auch über dunklen Flächen wie einem Monitor); align: 'left' | 'center' | 'right'. */
+export function label(ctx, text, x, y, { size = 12, color = PAL.ink, weight = 500, align = 'left', bg, halo } = {}) {
   const { k, ox, oy } = gridOf(ctx)
   const f = k / 3
   const str = String(text ?? '')
@@ -243,6 +244,12 @@ export function label(ctx, text, x, y, { size = 12, color = PAL.ink, weight = 50
     ctx.fillStyle = bg
     ctx.fillRect(Math.round(left - 4 * f), Math.round(dy - 2 * f), Math.round(tw + 8 * f), Math.round(size * f + 5 * f))
   }
+  if (halo) {
+    ctx.lineJoin = 'round'
+    ctx.lineWidth = Math.max(2, Math.round(3 * f))
+    ctx.strokeStyle = halo
+    ctx.strokeText(str, dx, dy)
+  }
   ctx.fillStyle = color
   ctx.fillText(str, dx, dy)
   ctx.textAlign = 'left'