NilsBriggen
c28c29a6c6
Render maps at natural resolution inside a CSS-transform world layer (zoom, pan, fit-to-view) instead of shrinking to maxWidth — large maps are now usable. Pure viewport math in src/lib/map/viewport.ts (unit-tested). New TokenPalette places party PCs / active-encounter combatants / blanks in one click with dup detection; tokens gain optional combatantId (Dexie v9) for live encounter HP. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
85 lines
3.7 KiB
TypeScript
85 lines
3.7 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
import { createCharacter } from './helpers';
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.evaluate(async () => {
|
|
indexedDB.deleteDatabase('ttrpg-manager');
|
|
localStorage.clear();
|
|
});
|
|
await page.reload();
|
|
});
|
|
|
|
test('maps: upload, place token, reveal all, show to players', async ({ page }) => {
|
|
await page.getByRole('button', { name: '+ New campaign' }).first().click();
|
|
await page.locator('input[data-autofocus]').fill('VTT');
|
|
await page.getByRole('button', { name: 'Create' }).click();
|
|
await page.getByRole('link', { name: 'Dashboard' }).click();
|
|
await page.getByRole('link', { name: 'Maps' }).click();
|
|
|
|
await page.locator('input[type="file"]').setInputFiles('public/pwa-512x512.png');
|
|
|
|
// Editor loads (Move tool present)
|
|
await expect(page.getByRole('button', { name: 'move', exact: true })).toBeVisible();
|
|
|
|
// Add a token
|
|
await page.getByRole('button', { name: '+ Token' }).click();
|
|
await expect(page.getByTestId('map-token')).toHaveCount(1);
|
|
|
|
// Reveal tool exposes the contextual fog controls; reveal all
|
|
await page.getByRole('button', { name: 'reveal', exact: true }).click();
|
|
await page.getByText('Fog', { exact: true }).locator('input[type=checkbox]').check();
|
|
await page.getByRole('button', { name: 'Reveal all' }).click();
|
|
|
|
// Show to players, then the player view renders the battle map
|
|
await page.getByRole('button', { name: 'Show to players' }).click();
|
|
await page.getByRole('link', { name: 'Open player view ↗' }).click();
|
|
await expect(page.getByRole('heading', { name: 'Battle map' })).toBeVisible();
|
|
await expect(page.getByTestId('map-token')).toHaveCount(1);
|
|
});
|
|
|
|
test('maps: zoom controls scale the canvas and fit resets', async ({ page }) => {
|
|
await page.getByRole('button', { name: '+ New campaign' }).first().click();
|
|
await page.locator('input[data-autofocus]').fill('Zoom');
|
|
await page.getByRole('button', { name: 'Create' }).click();
|
|
await page.getByRole('link', { name: 'Dashboard' }).click();
|
|
await page.getByRole('link', { name: 'Maps' }).click();
|
|
await page.locator('input[type="file"]').setInputFiles('public/pwa-512x512.png');
|
|
|
|
const world = page.getByTestId('map-world');
|
|
await expect(world).toBeVisible();
|
|
// World layer is sized to the image's natural pixels (not shrunk to a cap).
|
|
await expect(world).toHaveCSS('width', '512px');
|
|
|
|
const scaleOf = async () => {
|
|
const t = await world.evaluate((el) => getComputedStyle(el).transform);
|
|
const m = /matrix\(([^,]+)/.exec(t);
|
|
return m ? Number(m[1]) : 1;
|
|
};
|
|
const before = await scaleOf();
|
|
await page.getByRole('button', { name: 'Zoom in' }).click();
|
|
await page.getByRole('button', { name: 'Zoom in' }).click();
|
|
expect(await scaleOf()).toBeGreaterThan(before);
|
|
|
|
await page.getByRole('button', { name: 'Fit map to view' }).click();
|
|
expect(await scaleOf()).toBeCloseTo(before, 1);
|
|
});
|
|
|
|
test('maps: place a party token from the palette', async ({ page }) => {
|
|
await page.getByRole('button', { name: '+ New campaign' }).first().click();
|
|
await page.locator('input[data-autofocus]').fill('Party');
|
|
await page.getByRole('button', { name: 'Create' }).click();
|
|
|
|
await page.getByRole('link', { name: 'Characters' }).click();
|
|
await createCharacter(page, 'Aria');
|
|
|
|
await page.getByRole('link', { name: 'Dashboard' }).click();
|
|
await page.getByRole('link', { name: 'Maps' }).click();
|
|
await page.locator('input[type="file"]').setInputFiles('public/pwa-512x512.png');
|
|
|
|
// Palette lists the PC; clicking it drops a linked token.
|
|
await page.getByRole('button', { name: /Aria/ }).click();
|
|
await expect(page.getByTestId('map-token')).toHaveCount(1);
|
|
await expect(page.getByTestId('map-token')).toContainText('Aria');
|
|
});
|