import { existsSync, readFileSync } from 'node:fs' import { resolve } from 'node:path' import { describe, expect, it, vi } from 'vitest' import { encodeIndexedPng } from '../scripts/png.ts' import { decodeDc6 } from '../src/formats/dc6.ts' import { decodePl2 } from '../src/formats/pl2.ts' import type { SpriteFrame } from '../src/formats/sprite.ts' import { TOWN_NPC_DESCRIPTORS } from '../src/game/npc-table.ts' import { MpqArchive } from '../src/mpq/archive.ts' import { fileSource } from '../src/mpq/file-source.ts' import { MountedArchives } from '../src/mpq/mount.ts' import { BAKED_UI_MANIFEST } from '../src/ui/baked-ui-meta.ts' <<<<<<< HEAD import type { D2ColorCode, D2FontName as FontSizeName, D2FontRenderer } from '../src/ui/font.ts' ======= import type { D2ColorCode, D2FontRenderer, D2FontName } from '../src/ui/font.ts' >>>>>>> ce00574 (fix(ui): restore authentic D2 v1.13c NPC dialog popup menu (Fixes #489)) import { InventoryPanel, type UiInventoryItem } from '../src/ui/inventory.ts' import { BLACKSMITH_CLASS_IDS, TRADER_CLASS_IDS, VENDOR_BUTTON_DRAW_Y, VENDOR_BUTTON_HIT_W, VENDOR_BUTTON_HIT_Y_MAX, VENDOR_BUTTON_HIT_Y_MIN, VENDOR_BUTTON_SPECS, VENDOR_BUTTON_TABLE_X, VENDOR_GRID_ORIGIN, VENDOR_TABS, WorldPanelsHud, computeNpcDialogLayout, drawStoneBoxFrame, hitTestNpcDialogOption, resolveVendorButtonLayout, } from '../src/ui/world-panels.ts' function readPngHeaderSize(buf: Uint8Array): { width: number; height: number } { const view = new DataView(buf.buffer, buf.byteOffset, buf.byteLength) return { width: view.getUint32(16, false), height: view.getUint32(20, false), } } function stitchIndexed( width: number, height: number, placements: ReadonlyArray<{ frame: SpriteFrame; x: number; y: number }>, ): Uint8Array { const out = new Uint8Array(width * height) for (const { frame, x: dstX, y: dstY } of placements) { for (let sy = 0; sy < frame.height; sy++) { const ty = dstY + sy if (ty < 0 || ty >= height) continue for (let sx = 0; sx < frame.width; sx++) { const tx = dstX + sx if (tx < 0 || tx >= width) continue const srcIdx = sy * frame.width + sx if (frame.mask[srcIdx] === 0) continue const color = frame.indices[srcIdx] ?? 0 if (color !== 0) { out[ty * width + tx] = color } } } } return out } function createFakeImage(width: number, height: number, tag: string): HTMLImageElement { return { width, height, tag } as unknown as HTMLImageElement } function createFakeVendorAssets() { return { borderLeftImg: createFakeImage(400, 553, 'borderLeft'), questBgImg: null, waypointBgImg: null, stashBgImg: null, cubeBgImg: null, vendorBgImg: createFakeImage(320, 432, 'vendorBg'), vendorTabsImg: createFakeImage(632, 31, 'vendorTabs'), buySellBtnImg: createFakeImage(736, 32, 'buySellBtn'), itemsAtlasImg: createFakeImage(2048, 2048, 'itemsAtlas'), } } interface DrawImageCall { tag: string args: number[] } interface FontCall { type: 'drawText' | 'drawRightText' | 'drawFramedTooltip' text: string x: number y: number size: D2FontName color: D2ColorCode | undefined } function createMockCanvasAndFont() { const drawImageCalls: DrawImageCall[] = [] const fillRectCalls: number[][] = [] const strokeRectCalls: number[][] = [] const fontCalls: FontCall[] = [] const ctx = { save: vi.fn(), restore: vi.fn(), drawImage: vi.fn((img: { tag?: string }, ...nums: number[]) => { drawImageCalls.push({ tag: img?.tag ?? 'unknown', args: nums }) }), fillRect: vi.fn((...nums: number[]) => { fillRectCalls.push(nums) }), strokeRect: vi.fn((...nums: number[]) => { strokeRectCalls.push(nums) }), beginPath: vi.fn(), moveTo: vi.fn(), lineTo: vi.fn(), stroke: vi.fn(), fillText: vi.fn(), fillStyle: '', strokeStyle: '', lineWidth: 1, } as unknown as CanvasRenderingContext2D const font = { loaded: true, measureText: vi.fn((text: string) => text.length * 10), drawText: vi.fn( ( _ctx: CanvasRenderingContext2D, text: string, x: number, y: number, opts?: { font?: D2FontName; color?: D2ColorCode; align?: 'left' | 'center' | 'right' }, ) => { fontCalls.push({ type: 'drawText', text, x, y, size: opts?.font ?? 'font16', color: opts?.color ?? 'white', }) }, ), drawRightText: vi.fn( ( _ctx: CanvasRenderingContext2D, text: string, rightX: number, y: number, size: D2FontName = 'font16', color: D2ColorCode = 'white', ) => { fontCalls.push({ type: 'drawRightText', text, x: rightX, y, size, color }) }, ), drawFramedTooltip: vi.fn( ( _ctx: CanvasRenderingContext2D, lines: Array<{ text: string; color?: D2ColorCode; size?: D2FontName }>, centerX: number, bottomY: number, ) => { fontCalls.push({ type: 'drawFramedTooltip', text: lines.map(l => l.text).join('\n'), x: centerX, y: bottomY, size: lines[0]?.size ?? 'font16', color: lines[0]?.color, }) }, ), } as unknown as D2FontRenderer return { ctx, font, drawImageCalls, fillRectCalls, strokeRectCalls, fontCalls } } describe('Diablo II 1.13c Vendor / BuySell Panel UI Parity', () => { it('verifies Monster2 10x10 grid origin and baked UI manifest entries', () => { // Inventory.txt Monster2: gridLeft = 96 (80 + 16), gridTop = 123 (60 + 63), 10x10, 29px expect(VENDOR_GRID_ORIGIN).toEqual({ x: 96, y: 123, cols: 10, rows: 10, cellPx: 29, }) expect(BAKED_UI_MANIFEST.images.vendorBg).toBe('/ui/vendor-bg.png') expect(BAKED_UI_MANIFEST.images.vendorTabs).toBe('/ui/vendor-tabs.png') expect(BAKED_UI_MANIFEST.images.buySellBtn).toBe('/ui/buysellbtn.png') }) it('verifies baked vendor-bg.png, vendor-tabs.png, and buysellbtn.png dimensions and MPQ byte parity', async () => { const publicUiDir = resolve(process.cwd(), 'public/ui') const vendorBgBytes = new Uint8Array(readFileSync(resolve(publicUiDir, 'vendor-bg.png'))) const vendorTabsBytes = new Uint8Array(readFileSync(resolve(publicUiDir, 'vendor-tabs.png'))) const buySellBtnBytes = new Uint8Array(readFileSync(resolve(publicUiDir, 'buysellbtn.png'))) expect(readPngHeaderSize(vendorBgBytes)).toEqual({ width: 320, height: 432 }) expect(readPngHeaderSize(vendorTabsBytes)).toEqual({ width: 632, height: 31 }) expect(readPngHeaderSize(buySellBtnBytes)).toEqual({ width: 736, height: 32 }) // Verify byte-exact PNG parity against freshly decoded MPQ buysell.dc6 and buyselltabs.dc6 const d2dataPath = resolve(process.cwd(), 'samples/d2/d2data.mpq') if (existsSync(d2dataPath)) { const archives = new MountedArchives() archives.add('d2data.mpq', await MpqArchive.open(await fileSource(d2dataPath))) const pl2 = decodePl2(await archives.read('data/global/palette/ACT1/pal.pl2')) const buysellSheet = decodeDc6(await archives.read('data/global/ui/Panel/buysell.dc6')) const bf = buysellSheet.groups[0]!.frames expect(bf).toHaveLength(4) const expectedBgPng = encodeIndexedPng({ width: 320, height: 432, pixels: stitchIndexed(320, 432, [ { frame: bf[0]!, x: 0, y: 0 }, { frame: bf[1]!, x: 256, y: 0 }, { frame: bf[2]!, x: 0, y: 256 }, { frame: bf[3]!, x: 256, y: 256 }, ]), palette: pl2.rgb, }) expect(Buffer.compare(Buffer.from(vendorBgBytes), Buffer.from(expectedBgPng))).toBe(0) const tabsSheet = decodeDc6(await archives.read('data/global/ui/Panel/buyselltabs.dc6')) const tf = tabsSheet.groups[0]!.frames expect(tf).toHaveLength(8) const expectedTabsPng = encodeIndexedPng({ width: 632, height: 31, pixels: stitchIndexed( 632, 31, tf.slice(0, 8).map((frame, i) => ({ frame, x: i * 79, y: 0 })), ), palette: pl2.rgb, transparentIndex: 0, }) expect(Buffer.compare(Buffer.from(vendorTabsBytes), Buffer.from(expectedTabsPng))).toBe(0) } }) it('verifies D2Client.dll 0x6fb3f430 4-button layout across all 16 trade NPCs, 6 gamble NPCs, and non-vendor NPCs', () => { const tradeNpcs = TOWN_NPC_DESCRIPTORS.filter(d => d.canTrade) const repairNpcs = TOWN_NPC_DESCRIPTORS.filter(d => d.canRepair) const gambleNpcs = TOWN_NPC_DESCRIPTORS.filter(d => d.canGamble) const nonVendorNpcs = TOWN_NPC_DESCRIPTORS.filter(d => !d.canTrade && !d.canGamble) expect(tradeNpcs).toHaveLength(16) expect(repairNpcs).toHaveLength(5) expect(gambleNpcs).toHaveLength(6) for (const desc of tradeNpcs) { const layout = resolveVendorButtonLayout(desc.hcIdx, 'trade') if (desc.canRepair) { expect(BLACKSMITH_CLASS_IDS.has(desc.hcIdx)).toBe(true) expect(layout).toEqual(['buy', 'sell', 'repair', 'repairAll']) } else { expect(TRADER_CLASS_IDS.has(desc.hcIdx)).toBe(true) expect(layout).toEqual(['buy', 'sell', 'blank', 'close']) } } // Gamble mode overrides blacksmith/trader check first per 0x6fb3f430 for (const desc of gambleNpcs) { expect(resolveVendorButtonLayout(desc.hcIdx, 'gamble')).toEqual(['buy', 'sell', 'blank', 'close']) } for (const desc of nonVendorNpcs) { expect(() => resolveVendorButtonLayout(desc.hcIdx, 'trade')).toThrow( /D2Client 0x6fb3f430 assigns no trade buttons to MonStats class/, ) } }) it('draws Charsi blacksmith panel with [2, 4, 6, 18] button frames, present tabs, CHI labels, and no extra close button', () => { const wp = new WorldPanelsHud() const inv = new InventoryPanel() wp.activePlayerInventory = inv expect(wp.openVendorForNpc('Charsi', 'trade', 24, 0)).toBe(true) const { ctx, font, drawImageCalls, strokeRectCalls, fontCalls } = createMockCanvasAndFont() const assets = { ...createFakeVendorAssets(), inventory: inv } wp.drawLeftDockPanel(ctx, 'vendor', assets, font) // 1. vendorBg drawn at (80, 60) const bgCalls = drawImageCalls.filter(c => c.tag === 'vendorBg') expect(bgCalls).toEqual([{ tag: 'vendorBg', args: [80, 60] }]) // 2. Exactly 4 buySellBtn calls (no 5th generic Close button at the end of drawLeftDockPanel!) const btnCalls = drawImageCalls.filter(c => c.tag === 'buySellBtn') expect(btnCalls).toHaveLength(4) expect(btnCalls.map(c => c.args)).toEqual([ [2 * 32, 0, 32, 32, 80 + 115, 60 + VENDOR_BUTTON_DRAW_Y, 32, 32], [4 * 32, 0, 32, 32, 80 + 168, 60 + VENDOR_BUTTON_DRAW_Y, 32, 32], [6 * 32, 0, 32, 32, 80 + 220, 60 + VENDOR_BUTTON_DRAW_Y, 32, 32], [18 * 32, 0, 32, 32, 80 + 272, 60 + VENDOR_BUTTON_DRAW_Y, 32, 32], ]) // 3. Present tabs drawn from vendorTabsImg with frames 0 (selected) and 5..7 (unselected) const tabCalls = drawImageCalls.filter(c => c.tag === 'vendorTabs') expect(tabCalls.length).toBeGreaterThanOrEqual(3) expect(tabCalls[0]!.args).toEqual([0 * 79, 0, 79, 31, 80 + 0, 60, 79, 31]) // 4. Tab labels use CHI .tbl strings ('裝甲', '武器', '其他') in font16 and NO fake strokeRects or vendor title banner expect(strokeRectCalls).toHaveLength(0) const tabLabels = fontCalls.filter(c => c.type === 'drawText').map(c => c.text) expect(tabLabels).toContain('裝甲') expect(tabLabels).toContain('武器') expect(tabLabels).toContain('其他') expect(tabLabels.some(t => t.includes('恰西') || t.includes('Charsi'))).toBe(false) }) it('draws Akara trader panel with [2, 4, 0, 10] button frames and omits empty tabs', () => { const wp = new WorldPanelsHud() const inv = new InventoryPanel() wp.activePlayerInventory = inv expect(wp.openVendorForNpc('Akara', 'trade', 12, 0)).toBe(true) // Force armor tab empty to verify 0x6fb45e5e-0x6fb45f5d tab presence guard wp.vendorTabPlacements.armor = [] wp.selectVendorTab('armor') expect(wp.activeVendorTab).not.toBe('armor') const { ctx, font, drawImageCalls, fontCalls } = createMockCanvasAndFont() wp.drawLeftDockPanel(ctx, 'vendor', { ...createFakeVendorAssets(), inventory: inv }, font) const btnCalls = drawImageCalls.filter(c => c.tag === 'buySellBtn') expect(btnCalls).toHaveLength(4) expect(btnCalls.map(c => c.args[0]! / 32)).toEqual([2, 4, 0, 10]) // Empty 'armor' tab must not draw its tab sprite or '裝甲' label const tabLabels = fontCalls.filter(c => c.type === 'drawText').map(c => c.text) expect(tabLabels).not.toContain('裝甲') }) it('draws Gamble panel with only tab 0 sprite and no tab text labels', () => { const wp = new WorldPanelsHud() const inv = new InventoryPanel() wp.activePlayerInventory = inv expect(wp.openVendorForNpc('Gheed', 'gamble', 30, 0)).toBe(true) const { ctx, font, drawImageCalls, fontCalls } = createMockCanvasAndFont() wp.drawLeftDockPanel(ctx, 'vendor', { ...createFakeVendorAssets(), inventory: inv }, font) const btnCalls = drawImageCalls.filter(c => c.tag === 'buySellBtn') expect(btnCalls.map(c => c.args[0]! / 32)).toEqual([2, 4, 0, 10]) const tabCalls = drawImageCalls.filter(c => c.tag === 'vendorTabs') expect(tabCalls).toEqual([{ tag: 'vendorTabs', args: [0, 0, 79, 31, 80, 60, 79, 31] }]) expect(fontCalls.filter(c => c.type === 'drawText')).toHaveLength(0) }) it('enforces open-interval button hit-testing, latching Buy/Sell/Repair states, Repair All cost tooltip, and Close', () => { const wp = new WorldPanelsHud() const inv = new InventoryPanel() inv.gold = 50000 wp.activePlayerInventory = inv expect(wp.openVendorForNpc('Charsi', 'trade', 24, 0)).toBe(true) // Damage an equipped item so Repair All has a non-zero cost const helm: UiInventoryItem = { id: 'damaged-cap', code: 'cap', name: 'Cap', nameZh: '帽子', baseNameZh: '帽子', quality: 'normal', invFile: 'invcap', invWidth: 2, invHeight: 2, allowedSlots: ['helm'], stats: [], identified: true, durability: { current: 4, max: 12 }, } inv.equipped.helm = helm const expectedCost = wp.getRepairAllCost(inv) expect(expectedCost).toBeGreaterThan(0) // Open-interval boundary check: relX = tableX (116) or tableX + 45 (161) must NOT hit expect(wp.hitTestVendorButtonSlot(80 + 116, 60 + 390)).toBeNull() expect(wp.hitTestVendorButtonSlot(80 + 116 + VENDOR_BUTTON_HIT_W, 60 + 390)).toBeNull() expect(wp.hitTestVendorButtonSlot(80 + 130, 60 + VENDOR_BUTTON_HIT_Y_MIN)).toBeNull() expect(wp.hitTestVendorButtonSlot(80 + 130, 60 + VENDOR_BUTTON_HIT_Y_MAX)).toBeNull() expect(wp.hitTestVendorButtonSlot(80 + 130, 60 + 390)).toBe(0) let closed = false const callbacks = { onClose: () => { closed = true }, onWaypointTeleport: () => {}, inventory: inv, } // Click slot 0 (Buy) -> latches 'buy' (frame 3) wp.handleLeftDockClick('vendor', 80 + VENDOR_BUTTON_TABLE_X[0] + 20, 60 + 390, callbacks) expect(wp.vendorTradeState).toBe('buy') expect(wp.getVendorButtonFrame(0)).toBe(3) // Click slot 1 (Sell) -> switches to 'sell' (frame 5) wp.handleLeftDockClick('vendor', 80 + VENDOR_BUTTON_TABLE_X[1] + 20, 60 + 390, callbacks) expect(wp.vendorTradeState).toBe('sell') expect(wp.getVendorButtonFrame(1)).toBe(5) // Click slot 2 (Repair) -> switches to 'repair' (frame 7) wp.handleLeftDockClick('vendor', 80 + VENDOR_BUTTON_TABLE_X[2] + 20, 60 + 390, callbacks) expect(wp.vendorTradeState).toBe('repair') expect(wp.getVendorButtonFrame(2)).toBe(7) expect(wp.repairCursorMode).toBe(true) // Hover slot 3 (Repair All) -> verifies left-anchored framed hover text "修復所有裝備：${cost}" wp.handleMouseMove(80 + VENDOR_BUTTON_TABLE_X[3] + 20, 60 + 390) expect(wp.hoveredVendorButtonSlot).toBe(3) const { ctx, font, fontCalls } = createMockCanvasAndFont() wp.drawLeftDockPanel(ctx, 'vendor', { ...createFakeVendorAssets(), inventory: inv }, font) expect( fontCalls.some( c => c.type === 'drawText' && c.text === `修復所有裝備：${expectedCost}` && c.x === 80 + VENDOR_BUTTON_TABLE_X[3] + 6, ), ).toBe(true) // Click slot 3 (Repair All on Charsi) -> repairs item, clears state to 'idle', and does NOT close panel! wp.handleLeftDockClick('vendor', 80 + VENDOR_BUTTON_TABLE_X[3] + 20, 60 + 390, callbacks) expect(closed).toBe(false) expect(wp.vendorTradeState).toBe('idle') expect(wp.pressedMomentarySlot).toBe(3) expect(helm.durability?.current).toBe(12) wp.releaseMomentaryVendorButton() expect(wp.pressedMomentarySlot).toBeNull() // Switch to Akara and click slot 3 (Close) -> closes panel, slot 2 (blank) is ignored wp.openVendorForNpc('Akara', 'trade', 24, 0) expect(wp.hitTestVendorButtonSlot(80 + VENDOR_BUTTON_TABLE_X[2] + 20, 60 + 390)).toBeNull() wp.handleLeftDockClick('vendor', 80 + VENDOR_BUTTON_TABLE_X[3] + 20, 60 + 390, callbacks) expect(closed).toBe(true) }) it('auto-cycles to the next non-empty tab when buying the last item on the active tab', () => { const wp = new WorldPanelsHud() const inv = new InventoryPanel() inv.gold = 999999 wp.activePlayerInventory = inv expect(wp.openVendorForNpc('Charsi', 'trade', 24, 0)).toBe(true) expect(wp.activeVendorTab).toBe('armor') // Leave only 1 non-permStore item on the armor tab and buy it const nonPerm = wp.vendorTabPlacements.armor.find(p => !p.item.permStore && !p.item.rawItem?.permStore) expect(nonPerm).toBeDefined() wp.vendorTabPlacements.armor = [nonPerm!] const res = wp.buyFromActiveVendor(nonPerm!.col, nonPerm!.row, inv, false) expect(res.ok).toBe(true) expect(wp.vendorTabPlacements.armor).toHaveLength(0) expect(wp.activeVendorTab).toBe('weapons1') }) it('verifies VENDOR_TABS and VENDOR_BUTTON_SPECS match D2Client.dll 1.13c constants', () => { expect(VENDOR_TABS.map(t => ({ xOffset: t.xOffset, width: t.width, height: t.height, centerX: t.centerX, labelZh: t.labelZh }))).toEqual([ { xOffset: 0, width: 79, height: 31, centerX: 42, labelZh: '裝甲' }, { xOffset: 80, width: 79, height: 31, centerX: 121, labelZh: '武器' }, { xOffset: 160, width: 79, height: 31, centerX: 201, labelZh: '武器' }, { xOffset: 240, width: 79, height: 31, centerX: 281, labelZh: '其他' }, ]) expect(VENDOR_BUTTON_SPECS.buy.labelZh).toBe('買') expect(VENDOR_BUTTON_SPECS.sell.labelZh).toBe('賣') expect(VENDOR_BUTTON_SPECS.repair.labelZh).toBe('修復') expect(VENDOR_BUTTON_SPECS.close.labelZh).toBe('關閉') }) it('verifies baked boxpieces.png and focus16.png dimensions and MPQ byte parity', async () => { expect(BAKED_UI_MANIFEST.images.boxPieces).toBe('/ui/boxpieces.png') expect(BAKED_UI_MANIFEST.images.focus16).toBe('/ui/focus16.png') const publicUiDir = resolve(process.cwd(), 'public/ui') const boxPiecesBytes = new Uint8Array(readFileSync(resolve(publicUiDir, 'boxpieces.png'))) const focus16Bytes = new Uint8Array(readFileSync(resolve(publicUiDir, 'focus16.png'))) expect(readPngHeaderSize(boxPiecesBytes)).toEqual({ width: 308, height: 15 }) expect(readPngHeaderSize(focus16Bytes)).toEqual({ width: 160, height: 20 }) const d2dataPath = resolve(process.cwd(), 'samples/d2/d2data.mpq') if (existsSync(d2dataPath)) { const archives = new MountedArchives() archives.add('d2data.mpq', await MpqArchive.open(await fileSource(d2dataPath))) const pl2 = decodePl2(await archives.read('data/global/palette/ACT1/pal.pl2')) const bpSheet = decodeDc6(await archives.read('data/global/ui/menu/boxpieces.dc6')) const bpFrames = bpSheet.groups[0]!.frames expect(bpFrames).toHaveLength(22) const expectedBpPng = encodeIndexedPng({ width: 308, height: 15, pixels: stitchIndexed( 308, 15, bpFrames.slice(0, 22).map((frame, i) => ({ frame, x: i * 14, y: 0 })), ), palette: pl2.rgb, transparentIndex: 0, }) expect(Buffer.compare(Buffer.from(boxPiecesBytes), Buffer.from(expectedBpPng))).toBe(0) const focusSheet = decodeDc6(await archives.read('data/global/ui/CURSOR/focus16.dc6')) const focusFrames = focusSheet.groups[0]!.frames expect(focusFrames).toHaveLength(8) const expectedFocusPng = encodeIndexedPng({ width: 160, height: 20, pixels: stitchIndexed( 160, 20, focusFrames.slice(0, 8).map((frame, i) => ({ frame, x: i * 20, y: 0 })), ), palette: pl2.rgb, transparentIndex: 0, }) expect(Buffer.compare(Buffer.from(focus16Bytes), Buffer.from(expectedFocusPng))).toBe(0) } }) it('verifies D2Client.dll 0x6fb53580 computeNpcDialogLayout auto-sizing, anchor, and 800x600 clamping', () => { const wp = new WorldPanelsHud() expect(wp.openNpcMenuByName('Charsi', 400, 220)).toBe(true) const { font } = createMockCanvasAndFont() const opts = wp.npcMenu!.options! // Charsi options: 交談 (3381), 交易/修理 (3334), 取消 (4142) -> 3 options expect(opts.map(o => ({ id: o.id, strIdx: o.strIdx, labelZh: o.labelZh }))).toEqual([ { id: 'talk', strIdx: 3381, labelZh: '交談' }, { id: 'trade', strIdx: 3334, labelZh: '交易/修理' }, { id: 'cancel', strIdx: 4142, labelZh: '取消' }, ]) // Initial selection is option 0 ('talk') per 0x6fb53829 -> 0x6fb53370 expect(wp.npcMenu!.hoveredOptionIdx).toBe(0) // With mock font (10px per char): 'Charsi' is 60px, '交易/修理' is 50px -> maxLineWidth = 60 // width = 60 + 20 = 80; height = (21 + 3 * 15) + 15 = 81 // left = 400 - 40 = 360; top = 220 - 21 = 199 const layout = computeNpcDialogLayout('Charsi', opts, 400, 220, font) expect(layout).toEqual({ left: 360, top: 199, width: 80, height: 81, headerY: 220, optionYs: [235, 250, 265], }) // Viewport clamping (0x6fb53624..0x6fb5366c): const clampedTopLeft = computeNpcDialogLayout('Charsi', opts, 5, 5, font) expect(clampedTopLeft.left).toBe(10) expect(clampedTopLeft.top).toBe(10) const clampedBottomRight = computeNpcDialogLayout('Charsi', opts, 795, 590, font) expect(clampedBottomRight.left).toBe(800 - 80) expect(clampedBottomRight.top).toBe(600 - 81 - 48) }) it('draws NPC popup menu with boxpieces.dc6 stone frame (0x6fb6e4c0), Font16 gold header, blue selected option, white unselected options, and no CSS strokeRect or divider', () => { const wp = new WorldPanelsHud() expect(wp.openNpcMenuByName('Charsi', 400, 220)).toBe(true) const { ctx, font, drawImageCalls, fillRectCalls, strokeRectCalls, fontCalls } = createMockCanvasAndFont() const boxPiecesImg = createFakeImage(308, 15, 'boxPieces') // Fail-fast if boxPiecesImg is missing in drawStoneBoxFrame expect(() => drawStoneBoxFrame(ctx, 360, 199, 80, 81, null)).toThrow( /Missing required baked UI asset boxpieces\.png/, ) wp.drawNpcMenu(ctx, font, { boxPiecesImg }) // 1. Dark translucent background fill at (left + 1, top, width - 2, height - 2) -> (361, 199, 78, 79), NO hover fillRect! expect(fillRectCalls).toEqual([[361, 199, 78, 79]]) expect(strokeRectCalls).toHaveLength(0) expect(ctx.beginPath).not.toHaveBeenCalled() // 2. Stone border pieces drawn from boxPiecesImg, ending with the 4 corners (frames 0, 1, 8, 9) const bpCalls = drawImageCalls.filter(c => c.tag === 'boxPieces') expect(bpCalls.length).toBeGreaterThanOrEqual(12) expect(bpCalls.slice(-4).map(c => c.args)).toEqual([ [0 * 14, 0, 14, 15, 360, 199 + 12 - 15, 14, 15], [1 * 14, 0, 14, 15, 360 + 80 - 12, 199 + 12 - 15, 14, 15], [8 * 14, 0, 14, 15, 360, 199 + 81 + 1 - 15, 14, 15], [9 * 14, 0, 14, 15, 360 + 80 - 12, 199 + 81 + 1 - 15, 14, 15], ]) // 3. Font16 text lines: Gold header ('Charsi'), Blue selected option 0 ('交談'), White unselected options ('交易/修理', '取消') expect(fontCalls).toEqual([ { type: 'drawText', text: 'Charsi', x: 400, y: 220, size: 'font16', color: 'gold' }, { type: 'drawText', text: '交談', x: 400, y: 235, size: 'font16', color: 'blue' }, { type: 'drawText', text: '交易/修理', x: 400, y: 250, size: 'font16', color: 'white' }, { type: 'drawText', text: '取消', x: 400, y: 265, size: 'font16', color: 'white' }, ]) // 4. Open-interval hit-testing (0x6fb534b0): move to option 1 (rowY = 250, hit y ∈ (239, 254), hit x ∈ (375, 425)) const layout = wp.getNpcMenuLayout(font)! expect(hitTestNpcDialogOption(layout, 375, 248)).toBeNull() expect(hitTestNpcDialogOption(layout, 425, 248)).toBeNull() expect(hitTestNpcDialogOption(layout, 400, 239)).toBeNull() expect(hitTestNpcDialogOption(layout, 400, 254)).toBeNull() expect(hitTestNpcDialogOption(layout, 400, 248)).toBe(1) wp.handleNpcMenuMove(400, 248, font) expect(wp.npcMenu!.hoveredOptionIdx).toBe(1) // Moving outside selectable options preserves current selection per 0x6fb533de wp.handleNpcMenuMove(365, 210, font) expect(wp.npcMenu!.hoveredOptionIdx).toBe(1) // Clicking option 1 ('交易/修理') opens vendor in 'trade' mode and closes npcMenu let openedVendorMode: string | null = null wp.handleNpcMenuClick( 400, 248, { onOpenVendor: (_desc, mode) => { openedVendorMode = mode }, onIdentifyAll: () => {}, }, font, ) expect(openedVendorMode).toBe('trade') expect(wp.npcMenu).toBeNull() }) })