Merge branch 'main' into feature/chief-center-parity-20260802

2026-08-02 05:13:04 +00:00
parent 4e1058ae86 62bc1c9121
commit 7d62d37f40
26 changed files with 1319 additions and 296 deletions
@@ -219,6 +219,7 @@ const install = async (page: Page, mode: 'member' | 'wanderer' | 'admin' = 'memb
                            capitalCityId: 1,
                            level: 1,
                            power: 1234,
+                            generalCount: 2,
                            cities: ['업'],
                        },
                        {
@@ -228,6 +229,7 @@ const install = async (page: Page, mode: 'member' | 'wanderer' | 'admin' = 'memb
                            capitalCityId: 2,
                            level: 1,
                            power: 1000,
+                            generalCount: 1,
                            cities: ['허창'],
                        },
                    ],
@@ -350,6 +352,69 @@ test('four legacy menu pages keep the 1000px desktop table contract', async ({ p
    }
 });

+test('global-info renders the ref nation summary columns beside the map', async ({ page }) => {
+    await install(page);
+    await page.setViewportSize({ width: 1200, height: 900 });
+    await go(page, 'global-info');
+
+    const summary = page.locator('.simple-nation-list');
+    await expect(summary).toBeVisible();
+    await expect(summary.locator('thead')).toContainText('국명');
+    await expect(summary.locator('thead')).toContainText('국력');
+    await expect(summary.locator('thead')).toContainText('장수');
+    await expect(summary.locator('thead')).toContainText('속령');
+    await expect(summary.locator('tbody tr').first()).toHaveText(/아국\s*1,234\s*2\s*1/u);
+    await expect(summary.locator('tbody tr').first().locator('td').last()).toHaveAttribute('title', '업');
+
+    const geometry = await summary.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const headings = Array.from(element.querySelectorAll('th')).map((heading) => heading.getBoundingClientRect().width);
+        return { x: rect.x, width: rect.width, headings };
+    });
+    expect(geometry).toMatchObject({ x: 800, width: 300 });
+    expect(geometry.headings[0]).toBeCloseTo((300 * 44) / 97, 0);
+    expect(geometry.headings[1]).toBeCloseTo((300 * 23) / 97, 0);
+    expect(geometry.headings[2]).toBeCloseTo((300 * 15) / 97, 0);
+    expect(geometry.headings[3]).toBeCloseTo((300 * 15) / 97, 0);
+
+    if (artifactRoot) {
+        await mkdir(artifactRoot, { recursive: true });
+        await writeFile(
+            resolve(artifactRoot, 'core-global-info-computed-dom.json'),
+            `${JSON.stringify(
+                {
+                    geometry,
+                    headings: await summary.locator('th').allTextContents(),
+                    rows: await summary.locator('tbody tr').allTextContents(),
+                    cityTitles: await summary.locator('tbody td:last-child').evaluateAll((cells) =>
+                        cells.map((cell) => cell.getAttribute('title'))
+                    ),
+                },
+                null,
+                2
+            )}\n`,
+            'utf8'
+        );
+        await page.screenshot({ path: resolve(artifactRoot, 'core-global-info-desktop.png'), fullPage: true });
+    }
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    const mobileGeometry = await page.locator('.map-grid').evaluate((element) => {
+        const map = element.querySelector('.map-viewer')?.getBoundingClientRect();
+        const summary = element.querySelector('.simple-nation-list')?.getBoundingClientRect();
+        return {
+            map: map ? { y: map.y, width: map.width, bottom: map.bottom } : null,
+            summary: summary ? { y: summary.y, width: summary.width } : null,
+        };
+    });
+    expect(mobileGeometry.map?.width).toBe(500);
+    expect(mobileGeometry.summary?.width).toBe(500);
+    expect(mobileGeometry.summary?.y).toBe(mobileGeometry.map?.bottom);
+    if (artifactRoot) {
+        await page.screenshot({ path: resolve(artifactRoot, 'core-global-info-mobile.png'), fullPage: true });
+    }
+});
+
 test('current-city hides values and general rows for a wandering user', async ({ page }) => {
    await install(page, 'wanderer');
    await go(page, 'current-city');
@@ -25,6 +25,7 @@ export default defineConfig({
        'nationGeneralSecret.spec.ts',
        'npcPolicy.spec.ts',
        'auction.spec.ts',
+        'tournamentBracket.spec.ts',
        'battleSimulator.spec.ts',
        'battleSimulatorRef.spec.ts',
        'commandArguments.spec.ts',
@@ -0,0 +1,201 @@
+import { expect, test, type Page, type Route } from '@playwright/test';
+import { readFile } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { gameProfile, gameTrpcRoute } from './gameTestPaths.js';
+
+const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../..');
+const imageRoots = [
+    ...(process.env.FRONTEND_PARITY_IMAGE_ROOT ? [resolve(process.env.FRONTEND_PARITY_IMAGE_ROOT, 'game')] : []),
+    resolve(repositoryRoot, '../image/game'),
+    resolve(repositoryRoot, '../../image/game'),
+];
+const names = [
+    '관우',
+    '장료',
+    '조운',
+    '하후돈',
+    '손책',
+    '태사자',
+    '마초',
+    '황충',
+    '여포',
+    '전위',
+    '감녕',
+    '문추',
+    '안량',
+    '허저',
+    '주태',
+    '방덕',
+];
+const participants = names.map((name, index) => ({
+    id: index + 1,
+    name,
+    leadership: 80,
+    strength: 80,
+    intel: 80,
+    level: 10,
+    groupId: 10 + (index % 8),
+    groupNo: Math.floor(index / 8),
+    win: 3 - (index % 2),
+    draw: index % 2,
+    lose: 0,
+    gl: 12 - index,
+    finalRank: Math.floor(index / 8) + 1,
+}));
+const matches = [
+    ...Array.from({ length: 8 }, (_, index) => ({
+        id: index + 1,
+        stage: 7,
+        roundIndex: index,
+        attackerId: index * 2 + 1,
+        defenderId: index * 2 + 2,
+        winnerId: index * 2 + 1,
+    })),
+    ...Array.from({ length: 4 }, (_, index) => ({
+        id: index + 9,
+        stage: 8,
+        roundIndex: index,
+        attackerId: index * 4 + 1,
+        defenderId: index * 4 + 3,
+        winnerId: index * 4 + 1,
+    })),
+    ...Array.from({ length: 2 }, (_, index) => ({
+        id: index + 13,
+        stage: 9,
+        roundIndex: index,
+        attackerId: index * 8 + 1,
+        defenderId: index * 8 + 5,
+        winnerId: index * 8 + 1,
+    })),
+    { id: 15, stage: 10, roundIndex: 0, attackerId: 1, defenderId: 9, winnerId: 1 },
+];
+
+const response = (data: unknown) => ({ result: { data } });
+const operationNames = (route: Route): string[] => {
+    const url = new URL(route.request().url());
+    return decodeURIComponent(url.pathname.slice(url.pathname.lastIndexOf('/trpc/') + 6)).split(',');
+};
+
+const readReferenceImage = async (filename: string): Promise<Buffer> => {
+    for (const imageRoot of imageRoots) {
+        try {
+            return await readFile(resolve(imageRoot, filename));
+        } catch {
+            // Worktrees can be nested at different depths.
+        }
+    }
+    throw new Error(`Reference image not found: ${filename}`);
+};
+
+const installFixture = async (page: Page) => {
+    await page.addInitScript((profile) => {
+        window.localStorage.setItem('sammo-game-token', 'ga_tournament_bracket_playwright');
+        window.localStorage.setItem('sammo-game-profile', profile);
+    }, gameProfile);
+    for (const filename of ['back_walnut.jpg', 'back_green.jpg', 'back_blue.jpg']) {
+        await page.route(`**/image/game/${filename}`, async (route) => {
+            await route.fulfill({ status: 200, contentType: 'image/jpeg', body: await readReferenceImage(filename) });
+        });
+    }
+    await page.route(gameTrpcRoute, async (route) => {
+        const results = operationNames(route).map((operation) => {
+            if (operation === 'auth.status') return response({ ok: true });
+            if (operation === 'lobby.info') return response({ myGeneral: { id: 1, name: names[0] } });
+            if (operation === 'join.getConfig') return response({});
+            if (operation === 'general.me') return response({ general: { id: 1, name: names[0] } });
+            if (operation === 'tournament.getAdminStatus') return response({ ok: false });
+            if (operation === 'tournament.getSnapshot') {
+                return response({
+                    state: {
+                        stage: 0,
+                        phase: 0,
+                        type: 0,
+                        auto: false,
+                        openYear: 184,
+                        openMonth: 1,
+                        termSeconds: 60,
+                        nextAt: '2026-08-02T00:00:00.000Z',
+                        winnerId: 1,
+                    },
+                    participants,
+                    matches,
+                    betCount: 16,
+                });
+            }
+            if (operation === 'tournament.getBettingSummary') {
+                return response({
+                    totals: Object.fromEntries(participants.map((participant, index) => [participant.id, 100 + index * 10])),
+                    myTotals: {},
+                    totalAmount: 2800,
+                    myAmount: 0,
+                });
+            }
+            return response(null);
+        });
+        await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(results) });
+    });
+};
+
+const openTournament = async (page: Page) => {
+    await installFixture(page);
+    await page.goto('tournament');
+    await expect(page.getByLabel('토너먼트 대진표')).toBeVisible();
+};
+
+test('desktop bracket connects every real general slot to the next round', async ({ page }, testInfo) => {
+    await page.setViewportSize({ width: 1365, height: 900 });
+    await openTournament(page);
+
+    await expect(page.locator('.bracket-canvas .bracket-name[data-general-id]')).toHaveCount(31);
+    await expect(page.locator('.bracket-canvas .connector-segment')).toHaveCount(15);
+    await expect(page.locator('.bracket-canvas .bracket-name.advanced', { hasText: '관우' })).toHaveCount(5);
+
+    const geometry = await page.locator('.bracket-canvas').evaluate((canvas) => {
+        const firstConnector = canvas.querySelector<HTMLElement>('.connector-segment')!.getBoundingClientRect();
+        const champion = canvas.querySelector<HTMLElement>('.bracket-champion .bracket-name')!.getBoundingClientRect();
+        const finalists = [...canvas.querySelectorAll<HTMLElement>('.bracket-round:nth-of-type(3) .bracket-name')].map(
+            (element) => element.getBoundingClientRect()
+        );
+        return {
+            canvasWidth: canvas.getBoundingClientRect().width,
+            connectorCenter: firstConnector.x + firstConnector.width / 2,
+            championCenter: champion.x + champion.width / 2,
+            finalistCenters: finalists.map((rect) => rect.x + rect.width / 2),
+            connectorQuarters: [firstConnector.x + firstConnector.width / 4, firstConnector.x + (firstConnector.width * 3) / 4],
+        };
+    });
+    expect(geometry.canvasWidth).toBe(2000);
+    expect(Math.abs(geometry.connectorCenter - geometry.championCenter)).toBeLessThan(1);
+    expect(geometry.finalistCenters).toHaveLength(2);
+    expect(Math.abs(geometry.finalistCenters[0]! - geometry.connectorQuarters[0]!)).toBeLessThan(1);
+    expect(Math.abs(geometry.finalistCenters[1]! - geometry.connectorQuarters[1]!)).toBeLessThan(1);
+
+    await page.screenshot({ path: testInfo.outputPath('tournament-bracket-desktop.webp'), fullPage: true });
+});
+
+test('mobile bracket shows every round and general within the handheld width', async ({ page }, testInfo) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await openTournament(page);
+
+    const bracket = page.locator('.mobile-bracket');
+    await expect(bracket).toBeVisible();
+    await expect(bracket.locator('.mobile-bracket-name')).toHaveCount(31);
+    await expect(bracket.locator('.mobile-bracket-name', { hasText: '방덕' })).toBeVisible();
+    await expect(bracket.locator('.mobile-bracket-name', { hasText: '관우' })).toHaveCount(5);
+    const bounds = await bracket.evaluate((element) => {
+        const names = [...element.querySelectorAll<HTMLElement>('.mobile-bracket-name')].map((name) =>
+            name.getBoundingClientRect()
+        );
+        const own = element.getBoundingClientRect();
+        return {
+            width: own.width,
+            minX: Math.min(...names.map((rect) => rect.left - own.left)),
+            maxX: Math.max(...names.map((rect) => rect.right - own.left)),
+        };
+    });
+    expect(bounds.width).toBe(390);
+    expect(bounds.minX).toBeGreaterThanOrEqual(0);
+    expect(bounds.maxX).toBeLessThanOrEqual(390);
+    await page.screenshot({ path: testInfo.outputPath('tournament-bracket-mobile.webp'), fullPage: true });
+});
@@ -259,13 +259,14 @@ test('renders the legacy desktop grid with matching computed geometry and states
    });

    const kickButton = page.getByRole('button', { name: '부대원 추방...' }).first();
+    expect(await kickButton.evaluate((button) => getComputedStyle(button).backgroundColor)).toBe('rgb(68, 68, 68)');
    await kickButton.hover();
    const hoverStyle = await kickButton.evaluate((button) => ({
        cursor: getComputedStyle(button).cursor,
-        filter: getComputedStyle(button).filter,
+        borderBottomWidth: getComputedStyle(button).borderBottomWidth,
    }));
    expect(hoverStyle.cursor).toBe('pointer');
-    expect(hoverStyle.filter).not.toBe('none');
+    expect(hoverStyle.borderBottomWidth).toBe('3px');

    await page.locator('.troopMember').nth(1).hover();
    await expect(page.getByRole('tooltip')).toContainText('조운');