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>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed
1 parent
67df2fd902
commit
d44b28368d
3 files changed
+466
No files matched your search
@@ -0,0 +1,284 @@
|
||||
// Engine-Grundlagen des Hustler-Hochhauses: Palette, Raster, Figuren mit Posen, Text, Sprechblasen.
|
||||
// Portiert aus entwuerfe/sprites.js (ES5-IIFE mit fester Skala S = 3). Neu: Raster je Kontext statt fester Skala,
|
||||
// Posen (stand, type, coffee, sleep), Graustufe für nicht angeschlossene Worker, Warnzeichen.
|
||||
// Kein React, kein Appwrite, kein window/document: alles Zeichnen geht über den übergebenen Canvas-Kontext.
|
||||
|
||||
export const PAL = Object.freeze({
|
||||
o: '#3a2f3d', // Umriss (dunkles Pflaume-Grau statt Schwarz)
|
||||
b: '#d98a66', // Körper (Ton)
|
||||
s: '#b8694a', // Körper Schatten
|
||||
h: '#f2b897', // Körper Licht
|
||||
e: '#2b2230', // Augen
|
||||
w: '#ffffff',
|
||||
g: '#9aa3b2', // Papier-Umriss
|
||||
p: '#c3cad6', // Papier-Zeilen
|
||||
ink: '#1a1f36',
|
||||
mute: '#697386',
|
||||
line: '#ebeef1',
|
||||
floor: '#f6f7f9',
|
||||
floor2: '#eef0f4',
|
||||
wood: '#c9a27e', wood2: '#a8825f',
|
||||
metal: '#c3c8d2', metal2: '#8c93a3',
|
||||
screen: '#1f2a44',
|
||||
red: '#d6455d', green: '#3aa66b', gold: '#e8b730', gold2: '#b98a12',
|
||||
shadow: 'rgba(26,31,54,0.12)',
|
||||
})
|
||||
|
||||
// Hut-Farben zeigen das Modell: Opus = Krone, Sonnet = Kappe, Haiku = Mütze, Overseer = Kommandomütze
|
||||
export const HAT = Object.freeze({
|
||||
opus: Object.freeze(['#e8b730', '#b98a12']),
|
||||
sonnet: Object.freeze(['#4a7fd6', '#2f5ea8']),
|
||||
haiku: Object.freeze(['#5cbf8a', '#3a9466']),
|
||||
overseer: Object.freeze(['#7a5cd6', '#54399f']),
|
||||
})
|
||||
|
||||
// Ein Farbton pro Station/Team
|
||||
export const TEAM = Object.freeze({
|
||||
radar: '#4a90d9', // Anfragen-Radar
|
||||
aerzte: '#3fb6b2', // Ärzte & Praxen
|
||||
handwerk: '#e8873a', // Handwerk
|
||||
selbst: '#c66bd1', // Selbstständige
|
||||
laden: '#8fb83a', // Läden & Gastro
|
||||
bewertung: '#e0b13a',
|
||||
werkstatt: '#d98a66',
|
||||
pruefung: '#d6455d',
|
||||
freigabe: '#7a5cd6',
|
||||
archiv: '#8c93a3',
|
||||
tresor: '#3aa66b',
|
||||
})
|
||||
|
||||
export const FONT_FAMILY = '"Pixelify Sans", ui-monospace, Menlo, monospace'
|
||||
|
||||
// ---------- Raster ----------
|
||||
|
||||
// Raster je Kontext: k = Geräte-Pixel je logischer Einheit, (ox, oy) = Versatz in Geräte-Pixeln.
|
||||
// Ohne setGrid gilt k = 3 (die Skala der Vorlage). Ein WeakMap hält den Zustand außerhalb des Kontexts.
|
||||
const DEFAULT_GRID = Object.freeze({ k: 3, ox: 0, oy: 0 })
|
||||
const grids = new WeakMap()
|
||||
const gridOf = (ctx) => grids.get(ctx) || DEFAULT_GRID
|
||||
|
||||
export function setGrid(ctx, { k, ox = 0, oy = 0 }) {
|
||||
grids.set(ctx, { k, ox, oy })
|
||||
}
|
||||
|
||||
// Rechteck in logischen Einheiten. Beide Kanten werden einzeln gerundet (die rechte Kante eines Rechtecks ist die
|
||||
// linke des nächsten: keine Nähte), die Größe beträgt mindestens ein Geräte-Pixel.
|
||||
export function px(ctx, x, y, w, h, color) {
|
||||
const { k, ox, oy } = gridOf(ctx)
|
||||
const left = Math.round(x * k + ox)
|
||||
const top = Math.round(y * k + oy)
|
||||
ctx.fillStyle = color
|
||||
ctx.fillRect(
|
||||
left,
|
||||
top,
|
||||
Math.max(1, Math.round((x + w) * k + ox) - left),
|
||||
Math.max(1, Math.round((y + h) * k + oy) - top),
|
||||
)
|
||||
}
|
||||
|
||||
// Fläche mit Deckkraft (save/restore gleichen sich aus)
|
||||
export function tint(ctx, x, y, w, h, color, alpha) {
|
||||
ctx.save()
|
||||
ctx.globalAlpha = alpha
|
||||
px(ctx, x, y, w, h, color)
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
// ---------- Sprite-Karten ----------
|
||||
|
||||
const BODY = [
|
||||
'....oooo....',
|
||||
'..oohhhboo..',
|
||||
'.ohhbbbbbbo.',
|
||||
'.ohbbbbbbbo.',
|
||||
'obbebbbbebso',
|
||||
'obbebbbbebso',
|
||||
'obbbbbbbbbso',
|
||||
'obbbbbbbbbso',
|
||||
'.obbbbbbbso.',
|
||||
'.ossbbbbsso.',
|
||||
'..oossssoo..',
|
||||
]
|
||||
// Schlafen: die obere Augenzeile wird zu Körperfarbe, nur die Zeile darunter bleibt (zwei Augenpunkte)
|
||||
const BODY_SLEEP = BODY.map((row, i) => (i === 4 ? row.replace(/e/g, 'b') : row))
|
||||
const LEGS = [
|
||||
['...oo..oo...', '...oo..oo...'], // stehen
|
||||
['..oo....oo..', '.oo......oo.'], // Schritt A
|
||||
['....oooo....', '....oooo....'], // Schritt B
|
||||
]
|
||||
const HATS = {
|
||||
opus: ['...H.HH.H...', '...HHHHHH...', '...SSSSSS...'],
|
||||
sonnet: ['....HHHH....', '...HHHHHH...', '...SSSSSSSS.'],
|
||||
haiku: ['.....HH.....', '...HHHHHH...', '...HSHSHSH..'],
|
||||
overseer: ['...HHHHHH...', '..HHHHwHHH..', '..SSSSSSSS..'],
|
||||
}
|
||||
const VISOR = ['obVwVVVVVVso', 'obVVVVVVVVso'] // ersetzt die Augenzeilen 4–5 beim Overseer
|
||||
const PAPER = ['gggggg', 'gwwwwg', 'gwppwg', 'gwwwwg', 'gwppwg', 'gwwwwg', 'gggggg']
|
||||
const ARROW = ['ooooo', '.ooo.', '..o..']
|
||||
const ALERT = ['rrr', 'rrr', 'rrr', '.r.', '.r.', '...', '.r.'] // 3 × 7: „!“
|
||||
|
||||
// Umriss um eine Karte: jede leere Zelle (auch diagonal) neben einer belegten wird 'o'; die Karte wächst um 1 je Seite
|
||||
function outlined(map) {
|
||||
const h = map.length
|
||||
const w = map[0].length
|
||||
const at = (r, c) => (r >= 0 && r < h && c >= 0 && c < w ? map[r][c] : '.')
|
||||
const nextToInk = (r, c) => [-1, 0, 1].some((dr) => [-1, 0, 1].some((dc) => at(r + dr, c + dc) !== '.'))
|
||||
const rows = []
|
||||
for (let r = -1; r <= h; r++) {
|
||||
let row = ''
|
||||
for (let c = -1; c <= w; c++) row += at(r, c) === '.' && nextToInk(r, c) ? 'o' : at(r, c)
|
||||
rows.push(row)
|
||||
}
|
||||
return rows
|
||||
}
|
||||
const ALERT_OUTLINED = outlined(ALERT)
|
||||
|
||||
// Grautöne für nicht angeschlossene Worker (Umriss, Augen und Papier bleiben)
|
||||
const GREY = { b: '#aeb3bd', s: '#8a909c', h: '#c9cdd5', H: '#9ca2ae', S: '#7f8693' }
|
||||
|
||||
function workerColors(hat, grey) {
|
||||
const hc = HAT[hat] || HAT.haiku
|
||||
if (grey) return { o: PAL.o, b: GREY.b, s: GREY.s, h: GREY.h, e: PAL.e, w: PAL.w, g: PAL.g, p: PAL.p, H: GREY.H, S: GREY.S, V: GREY.S }
|
||||
return { o: PAL.o, b: PAL.b, s: PAL.s, h: PAL.h, e: PAL.e, w: PAL.w, g: PAL.g, p: PAL.p, H: hc[0], S: hc[1], V: HAT.overseer[1] }
|
||||
}
|
||||
|
||||
// Zeichnet eine Karte zellenweise: (x, y) = linke obere Ecke in logischen Einheiten, sc = Zellgröße, flip spiegelt
|
||||
function drawMap(ctx, map, x, y, colors, flip, sc) {
|
||||
for (let r = 0; r < map.length; r++) {
|
||||
const row = map[r]
|
||||
for (let c = 0; c < row.length; c++) {
|
||||
const ch = row[c]
|
||||
if (ch === '.') continue
|
||||
const col = colors[ch]
|
||||
if (!col) continue
|
||||
const cx = flip ? row.length - 1 - c : c
|
||||
px(ctx, x + cx * sc, y + r * sc, sc, sc, col)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawSelect(ctx, x, y, sc, t) {
|
||||
const hop = Math.round(Math.sin(t * 4)) * sc
|
||||
drawMap(ctx, ARROW, x, y + hop, { o: PAL.ink }, false, sc)
|
||||
}
|
||||
|
||||
// Kaffeetasse an der Hand (3 × 3) mit einem Dampfpixel, der mit t flackert
|
||||
function drawCup(ctx, x, y, sc, flip, t) {
|
||||
const cx = x + (flip ? -1 : 10) * sc
|
||||
const cy = y + 6 * sc
|
||||
px(ctx, cx, cy, 3 * sc, 3 * sc, PAL.metal2)
|
||||
px(ctx, cx, cy, 3 * sc, sc, PAL.wood2)
|
||||
if (Math.floor(t * 3) % 2 === 0) px(ctx, cx + sc, cy - 2 * sc, sc, sc, PAL.g)
|
||||
}
|
||||
|
||||
// Kleines „z“ aus drei Rechtecken über dem Hut, steigt in ganzen Pixeln mit t (alle 2,5 s von vorn)
|
||||
function drawSleepZ(ctx, x, y, sc, flip, t) {
|
||||
const rise = Math.floor((Math.max(0, t) * 2) % 5)
|
||||
const zx = x + (flip ? 0 : 9) * sc
|
||||
const zy = y - (6 + rise) * sc
|
||||
px(ctx, zx, zy, 3 * sc, sc, PAL.mute)
|
||||
px(ctx, zx + sc, zy + sc, sc, sc, PAL.mute)
|
||||
px(ctx, zx, zy + 2 * sc, 3 * sc, sc, PAL.mute)
|
||||
}
|
||||
|
||||
/* Zeichnet einen kleinen Worker. (x, y) = linke obere Ecke des Körpers (ohne Hut), logische Einheiten.
|
||||
hat: 'opus' | 'sonnet' | 'haiku' | 'overseer'; frame: 0 stehen, 1/2 laufen; facing: 1 rechts, -1 links;
|
||||
carrying: Dokument in der Hand; scale: 1 normal, 2 groß; selected: Pfeil über dem Hut;
|
||||
pose: 'stand' und 'type' sehen gleich aus (das Wippen macht die Regie), 'coffee' mit Tasse, 'sleep' mit z;
|
||||
grey: halb durchsichtig in Grautönen (nicht angeschlossen), t: Zeit in Sekunden für z, Dampf und Pfeil.
|
||||
Rückgabe: Trefferfläche { x, y, w, h } in logischen Einheiten (bei Graustufe unverändert). */
|
||||
export function drawWorker(ctx, x, y, { hat, frame = 0, facing = 1, carrying = false, scale = 1, selected = false, pose = 'stand', grey = false, t = 0 } = {}) {
|
||||
const sc = scale
|
||||
const flip = facing === -1
|
||||
const bob = frame === 1 ? -1 * sc : 0
|
||||
const colors = workerColors(hat, grey)
|
||||
|
||||
if (grey) {
|
||||
ctx.save()
|
||||
ctx.globalAlpha = 0.55
|
||||
}
|
||||
px(ctx, x + 2 * sc, y + 13 * sc, 8 * sc, 1 * sc, PAL.shadow)
|
||||
drawMap(ctx, LEGS[frame] || LEGS[0], x, y + 11 * sc, colors, flip, sc)
|
||||
drawMap(ctx, pose === 'sleep' ? BODY_SLEEP : BODY, x, y + bob, colors, flip, sc)
|
||||
if (hat === 'overseer') drawMap(ctx, VISOR, x, y + bob + 4 * sc, colors, flip, sc)
|
||||
drawMap(ctx, HATS[hat] || HATS.haiku, x, y + bob - 2 * sc, colors, flip, sc)
|
||||
if (carrying) drawMap(ctx, PAPER, x + (flip ? -2 : 8) * sc, y + bob + 6 * sc, colors, false, sc)
|
||||
if (pose === 'coffee') drawCup(ctx, x, y + bob, sc, flip, t)
|
||||
else if (pose === 'sleep') drawSleepZ(ctx, x, y + bob, sc, flip, t)
|
||||
if (grey) ctx.restore()
|
||||
|
||||
if (selected) drawSelect(ctx, x + 3.5 * sc, y + bob - 7 * sc, sc, t)
|
||||
return { x: x - (carrying && flip ? 2 * sc : 0), y: y - 2 * sc, w: (carrying ? 14 : 12) * sc, h: 16 * sc }
|
||||
}
|
||||
|
||||
export function drawPaper(ctx, x, y) {
|
||||
drawMap(ctx, PAPER, x, y, { g: PAL.g, w: PAL.w, p: PAL.p }, false, 1)
|
||||
}
|
||||
|
||||
// Rotes „!“ mit Umriss (bleibt stehen, solange ein Worker den Status fehler hat).
|
||||
// (x, y) = Mitte der Unterkante, wie die Spitze der Sprechblase: das Zeichen steht über diesem Punkt.
|
||||
export function drawAlertMark(ctx, x, y) {
|
||||
const cols = ALERT_OUTLINED[0].length
|
||||
drawMap(ctx, ALERT_OUTLINED, x - cols / 2, y - ALERT_OUTLINED.length, { r: PAL.red, o: PAL.o }, false, 1)
|
||||
}
|
||||
|
||||
// ---------- Text (Pixel-Schrift, Größe wächst mit dem Raster) ----------
|
||||
|
||||
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 } = {}) {
|
||||
const { k, ox, oy } = gridOf(ctx)
|
||||
const f = k / 3
|
||||
const str = String(text ?? '')
|
||||
const dx = Math.round(x * k + ox)
|
||||
const dy = Math.round(y * k + oy)
|
||||
ctx.font = fontOf(weight, size * f)
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.textAlign = align
|
||||
if (bg) {
|
||||
const tw = ctx.measureText(str).width
|
||||
const left = align === 'center' ? dx - tw / 2 : align === 'right' ? dx - tw : dx
|
||||
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))
|
||||
}
|
||||
ctx.fillStyle = color
|
||||
ctx.fillText(str, dx, dy)
|
||||
ctx.textAlign = 'left'
|
||||
}
|
||||
|
||||
function deviceRect(ctx, x, y, w, h, color) {
|
||||
ctx.fillStyle = color
|
||||
ctx.fillRect(x, y, w, h)
|
||||
}
|
||||
|
||||
/* Sprechblase über einem Worker: (x, y) = Spitze der Blase (logisch). Maße wachsen mit dem Raster; die Blase
|
||||
wird in Geräte-Pixeln in die Breite von ctx.canvas geklemmt (Rand 2 bei k = 3, ohne Canvas 960). */
|
||||
export function drawBubble(ctx, x, y, text) {
|
||||
const str = String(text ?? '')
|
||||
if (str === '') return
|
||||
const { k, ox, oy } = gridOf(ctx)
|
||||
const f = k / 3
|
||||
const u = (n) => Math.max(1, Math.round(n * f))
|
||||
ctx.font = fontOf(500, 12 * f)
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.textAlign = 'left'
|
||||
const pad = u(7)
|
||||
const edge = u(2)
|
||||
const bw = Math.ceil(ctx.measureText(str).width) + 2 * pad
|
||||
const bh = u(22)
|
||||
const tipX = Math.round(x * k + ox)
|
||||
const by = Math.round(y * k + oy) - bh - u(6)
|
||||
const maxW = ctx.canvas && ctx.canvas.width > 0 ? ctx.canvas.width : 960
|
||||
const bx = Math.max(edge, Math.min(maxW - bw - edge, Math.round(tipX - bw / 2)))
|
||||
// Die Spitze bleibt am Kasten, auch wenn der Kasten wegen des Rands verschoben wurde
|
||||
const tailW = u(6)
|
||||
const tx = Math.max(bx + Math.round(tailW / 2), Math.min(bx + bw - Math.round(tailW / 2), tipX))
|
||||
deviceRect(ctx, bx - edge, by - edge, bw + 2 * edge, bh + 2 * edge, PAL.o)
|
||||
deviceRect(ctx, bx, by, bw, bh, PAL.w)
|
||||
deviceRect(ctx, tx - Math.round(tailW / 2), by + bh + edge, tailW, u(3), PAL.o)
|
||||
deviceRect(ctx, tx - u(1), by + bh + edge + u(3), u(2), u(2), PAL.o)
|
||||
ctx.fillStyle = PAL.ink
|
||||
ctx.fillText(str, bx + pad, by + u(5))
|
||||
}
|
||||
Reference in new issue
Block a user