fix(frontend): render responsive tournament bracket

2026-08-02 05:05:18 +00:00
parent 43ec211ff8
commit 4d0c3c8c18
7 changed files with 663 additions and 83 deletions
@@ -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 });
+});
@@ -15,6 +15,7 @@
        "test:e2e:board": "playwright test board.spec.ts --config e2e/playwright.config.mjs",
        "test:e2e:directories": "playwright test directoryLists.spec.ts --config e2e/playwright.config.mjs",
        "test:e2e:auction": "playwright test auction.spec.ts --config e2e/playwright.config.mjs",
+        "test:e2e:tournament-bracket": "playwright test tournamentBracket.spec.ts --config e2e/playwright.config.mjs",
        "test:e2e:battle-simulator": "playwright test battleSimulator.spec.ts --config e2e/playwright.config.mjs",
        "test:e2e:join-live": "playwright test --config e2e/joinGeneral.live.playwright.config.mjs --tsconfig e2e/playwright.live.tsconfig.json",
        "test:e2e:npc-possession": "playwright test npcPossession.spec.ts --config e2e/playwright.config.mjs",
@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+    buildTournamentBracket,
+    type TournamentBracketMatch,
+    type TournamentBracketParticipant,
+    type TournamentBracketRound,
+    type TournamentBracketSlot,
+} from '../../utils/tournamentBracket';
+
+const props = defineProps<{
+    participants: TournamentBracketParticipant[];
+    matches: TournamentBracketMatch[];
+    winnerId?: number;
+    betTotals?: Record<number, number>;
+    totalBet: number;
+}>();
+
+const bracket = computed(() => buildTournamentBracket(props.participants, props.matches, props.winnerId));
+
+const mobileColumns = computed(() => [
+    bracket.value.top16.slots,
+    bracket.value.quarter.slots,
+    bracket.value.semi.slots,
+    bracket.value.final.slots,
+    [bracket.value.champion],
+]);
+const mobileX = [38, 118, 198, 278, 352];
+const mobileY = (columnIndex: number, slotIndex: number) => {
+    const slotHeight = 32 * 2 ** columnIndex;
+    return 16 + slotHeight / 2 + slotIndex * slotHeight;
+};
+const mobileConnections = computed(() =>
+    mobileColumns.value.slice(0, -1).flatMap((column, columnIndex) => {
+        const sourceX = mobileX[columnIndex]! + 32;
+        const targetX = mobileX[columnIndex + 1]! - 32;
+        const jointX = (sourceX + targetX) / 2;
+        return Array.from({ length: column.length / 2 }, (_, pairIndex) => {
+            const left = column[pairIndex * 2]!;
+            const right = column[pairIndex * 2 + 1]!;
+            const y1 = mobileY(columnIndex, pairIndex * 2);
+            const y2 = mobileY(columnIndex, pairIndex * 2 + 1);
+            return {
+                id: `${columnIndex}-${pairIndex}`,
+                sourceX,
+                targetX,
+                jointX,
+                y1,
+                y2,
+                parentY: (y1 + y2) / 2,
+                leftActive: left.advanced,
+                rightActive: right.advanced,
+                parentActive: left.advanced || right.advanced,
+            };
+        });
+    })
+);
+
+const roundStyle = (round: TournamentBracketRound) => ({ '--slot-count': round.slots.length });
+const connectorGroups = (slots: TournamentBracketSlot[]) =>
+    Array.from({ length: slots.length / 2 }, (_, index) => [slots[index * 2]!, slots[index * 2 + 1]!] as const);
+const odds = (id: number | null) => {
+    if (id === null) return '0';
+    const amount = props.betTotals?.[id] ?? 0;
+    if (!amount) return '∞';
+    return (props.totalBet / amount).toFixed(2);
+};
+</script>
+
+<template>
+    <section class="tournament-bracket" aria-label="토너먼트 대진표" tabindex="0">
+        <div class="bracket-canvas">
+            <div class="bracket-round bracket-champion" style="--slot-count: 1">
+                <span
+                    class="bracket-name"
+                    :class="{ advanced: bracket.champion.advanced }"
+                    :data-general-id="bracket.champion.id ?? undefined"
+                >
+                    {{ bracket.champion.name }}
+                </span>
+            </div>
+
+            <div class="connector-row" style="--connector-count: 1">
+                <span class="connector-segment">
+                    <i class="stem" :class="{ active: bracket.champion.advanced }"></i>
+                    <i class="arm left" :class="{ active: bracket.final.slots[0]?.advanced }"></i>
+                    <i class="arm right" :class="{ active: bracket.final.slots[1]?.advanced }"></i>
+                </span>
+            </div>
+
+            <template v-for="round in [bracket.final, bracket.semi, bracket.quarter]" :key="round.stage">
+                <div class="bracket-round" :style="roundStyle(round)">
+                    <span
+                        v-for="(slot, index) in round.slots"
+                        :key="`${round.stage}-${slot.id ?? 'empty'}-${index}`"
+                        class="bracket-name"
+                        :class="{ advanced: slot.advanced }"
+                        :data-general-id="slot.id ?? undefined"
+                    >
+                        {{ slot.name }}
+                    </span>
+                </div>
+                <div class="connector-row" :style="{ '--connector-count': round.slots.length }">
+                    <span
+                        v-for="(pair, index) in connectorGroups(
+                            round.stage === 10
+                                ? bracket.semi.slots
+                                : round.stage === 9
+                                  ? bracket.quarter.slots
+                                  : bracket.top16.slots
+                        )"
+                        :key="`${round.stage}-connector-${index}`"
+                        class="connector-segment"
+                    >
+                        <i class="stem" :class="{ active: pair[0].advanced || pair[1].advanced }"></i>
+                        <i class="arm left" :class="{ active: pair[0].advanced }"></i>
+                        <i class="arm right" :class="{ active: pair[1].advanced }"></i>
+                    </span>
+                </div>
+            </template>
+
+            <div class="bracket-round" :style="roundStyle(bracket.top16)">
+                <span
+                    v-for="(slot, index) in bracket.top16.slots"
+                    :key="`7-${slot.id ?? 'empty'}-${index}`"
+                    class="bracket-name"
+                    :class="{ advanced: slot.advanced }"
+                    :data-general-id="slot.id ?? undefined"
+                >
+                    {{ slot.name }}
+                </span>
+            </div>
+            <div class="bracket-round bracket-odds" :style="roundStyle(bracket.top16)">
+                <span
+                    v-for="(slot, index) in bracket.top16.slots"
+                    :key="`odds-${slot.id ?? 'empty'}-${index}`"
+                    :data-candidate="slot.name"
+                >
+                    {{ odds(slot.id) }}
+                </span>
+            </div>
+        </div>
+        <div class="mobile-bracket" aria-label="모바일 토너먼트 대진">
+            <svg viewBox="0 0 390 544" aria-hidden="true">
+                <g v-for="connection in mobileConnections" :key="connection.id">
+                    <path
+                        class="mobile-connector"
+                        :d="`M ${connection.sourceX} ${connection.y1} H ${connection.jointX} V ${connection.y2} M ${connection.sourceX} ${connection.y2} H ${connection.jointX} M ${connection.jointX} ${connection.parentY} H ${connection.targetX}`"
+                    />
+                    <path
+                        v-if="connection.leftActive"
+                        class="mobile-connector active"
+                        :d="`M ${connection.sourceX} ${connection.y1} H ${connection.jointX} V ${connection.parentY}`"
+                    />
+                    <path
+                        v-if="connection.rightActive"
+                        class="mobile-connector active"
+                        :d="`M ${connection.sourceX} ${connection.y2} H ${connection.jointX} V ${connection.parentY}`"
+                    />
+                    <path
+                        v-if="connection.parentActive"
+                        class="mobile-connector active"
+                        :d="`M ${connection.jointX} ${connection.parentY} H ${connection.targetX}`"
+                    />
+                </g>
+            </svg>
+            <template v-for="(column, columnIndex) in mobileColumns" :key="`mobile-column-${columnIndex}`">
+                <span
+                    v-for="(slot, slotIndex) in column"
+                    :key="`mobile-${columnIndex}-${slot.id ?? 'empty'}-${slotIndex}`"
+                    class="mobile-bracket-name"
+                    :class="{ advanced: slot.advanced }"
+                    :style="{ left: `${mobileX[columnIndex]}px`, top: `${mobileY(columnIndex, slotIndex)}px` }"
+                >
+                    {{ slot.name }}
+                </span>
+            </template>
+        </div>
+        <p>배당률이 낮을수록 베팅된 금액이 많고 유저들이 우승후보로 많이 선택한 장수입니다.</p>
+    </section>
+</template>
+
+<style scoped>
+.tournament-bracket {
+    overflow-x: auto;
+    padding: 10px 0;
+    scrollbar-color: #777 #24140e;
+}
+.bracket-canvas {
+    width: 2000px;
+    min-width: 2000px;
+    margin: 0 auto;
+}
+.mobile-bracket {
+    position: relative;
+    display: none;
+    width: 390px;
+    height: 544px;
+    margin: 0 auto;
+}
+.mobile-bracket svg {
+    position: absolute;
+    inset: 0;
+    width: 390px;
+    height: 544px;
+}
+.mobile-connector {
+    fill: none;
+    stroke: #fff;
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+}
+.mobile-connector.active {
+    stroke: #ff4b4b;
+}
+.mobile-bracket-name {
+    position: absolute;
+    z-index: 1;
+    width: 64px;
+    overflow: hidden;
+    transform: translate(-50%, -50%);
+    border: 1px solid #555;
+    background: rgb(58 33 24 / 92%);
+    color: #fff;
+    font-size: 12px;
+    line-height: 22px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mobile-bracket-name.advanced {
+    border-color: #ff4b4b;
+    color: #ff4b4b;
+}
+.bracket-round,
+.connector-row {
+    display: grid;
+    grid-template-columns: repeat(var(--slot-count, var(--connector-count)), minmax(0, 1fr));
+    align-items: center;
+}
+.bracket-round {
+    min-height: 24px;
+}
+.bracket-name {
+    overflow: hidden;
+    padding: 0 3px;
+    color: #fff;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.bracket-name.advanced {
+    color: #ff4b4b;
+}
+.connector-row {
+    min-height: 24px;
+}
+.connector-segment {
+    position: relative;
+    display: block;
+    height: 24px;
+    color: #fff;
+}
+.connector-segment i {
+    position: absolute;
+    display: block;
+    color: inherit;
+    font-style: normal;
+}
+.connector-segment .stem {
+    top: 0;
+    left: 50%;
+    height: 13px;
+    border-left: 1px solid currentColor;
+}
+.connector-segment .arm {
+    top: 12px;
+    width: 25%;
+    height: 12px;
+    border-top: 1px solid currentColor;
+}
+.connector-segment .arm.left {
+    left: 25%;
+    border-left: 1px solid currentColor;
+}
+.connector-segment .arm.right {
+    right: 25%;
+    border-right: 1px solid currentColor;
+}
+.connector-segment .active {
+    color: #ff4b4b;
+}
+.bracket-odds {
+    color: skyblue;
+}
+.tournament-bracket p {
+    margin: 0;
+    color: skyblue;
+    font-size: 18px;
+}
+@media (max-width: 800px) {
+    .tournament-bracket {
+        width: 100vw;
+        max-width: 100vw;
+        overflow-x: hidden;
+    }
+    .bracket-canvas {
+        display: none;
+    }
+    .mobile-bracket {
+        display: block;
+    }
+}
+</style>
@@ -0,0 +1,76 @@
+export interface TournamentBracketParticipant {
+    id: number;
+    name: string;
+}
+
+export interface TournamentBracketMatch {
+    id: number;
+    stage: number;
+    roundIndex: number;
+    attackerId: number;
+    defenderId: number;
+    winnerId?: number;
+}
+
+export interface TournamentBracketSlot {
+    id: number | null;
+    name: string;
+    advanced: boolean;
+}
+
+export interface TournamentBracketRound {
+    stage: number;
+    slots: TournamentBracketSlot[];
+}
+
+export interface TournamentBracketModel {
+    champion: TournamentBracketSlot;
+    final: TournamentBracketRound;
+    semi: TournamentBracketRound;
+    quarter: TournamentBracketRound;
+    top16: TournamentBracketRound;
+}
+
+const emptySlot = (): TournamentBracketSlot => ({ id: null, name: '-', advanced: false });
+
+export const buildTournamentBracket = (
+    participants: TournamentBracketParticipant[],
+    matches: TournamentBracketMatch[],
+    winnerId?: number
+): TournamentBracketModel => {
+    const participantsById = new Map(participants.map((participant) => [participant.id, participant]));
+    const nameOf = (id: number | null): string =>
+        id === null ? '-' : (participantsById.get(id)?.name ?? `#${id}`);
+
+    const buildRound = (stage: number, slotCount: number): TournamentBracketRound => {
+        const roundMatches = matches
+            .filter((match) => match.stage === stage)
+            .sort((lhs, rhs) => lhs.roundIndex - rhs.roundIndex || lhs.id - rhs.id);
+        const slots: TournamentBracketSlot[] = roundMatches.flatMap((match) =>
+            [match.attackerId, match.defenderId].map((id) => ({
+                id,
+                name: nameOf(id),
+                advanced: match.winnerId === id,
+            }))
+        );
+        while (slots.length < slotCount) {
+            slots.push(emptySlot());
+        }
+        return { stage, slots: slots.slice(0, slotCount) };
+    };
+
+    const final = buildRound(10, 2);
+    const resolvedWinnerId = winnerId ?? matches.find((match) => match.stage === 10)?.winnerId ?? null;
+
+    return {
+        champion: {
+            id: resolvedWinnerId,
+            name: nameOf(resolvedWinnerId),
+            advanced: resolvedWinnerId !== null,
+        },
+        final,
+        semi: buildRound(9, 4),
+        quarter: buildRound(8, 8),
+        top16: buildRound(7, 16),
+    };
+};
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import TournamentBracket from '../components/tournament/TournamentBracket.vue';
 import { trpc } from '../utils/trpc';

 type Snapshot = Awaited<ReturnType<typeof trpc.tournament.getSnapshot.query>>;
@@ -60,27 +61,8 @@ const matchesAt = (stage: number) =>
        .filter((match) => match.stage === stage)
        .sort((a, b) => a.roundIndex - b.roundIndex);
 const nameOf = (id?: number) => (id ? (participantsById.value.get(id)?.name ?? `#${id}`) : '-');
-const roundNames = (stage: number, count: number) => {
-    const matches = matchesAt(stage);
-    const ids = matches.flatMap((match) => [match.attackerId, match.defenderId]);
-    return Array.from({ length: count }, (_, index) => nameOf(ids[index]));
-};
-const champion = computed(() => {
-    const winner = snapshot.value?.state?.winnerId ?? matchesAt(10)[0]?.winnerId;
-    return nameOf(winner);
-});
-const finalists = computed(() => roundNames(10, 2));
-const semiFinalists = computed(() => roundNames(9, 4));
-const quarterFinalists = computed(() => roundNames(8, 8));
-const top16 = computed(() => roundNames(7, 16));
 const totalBet = computed(() => betting.value?.totalAmount ?? 0);
-const odds = (id?: number) => {
-    if (!id) return '0';
-    const totals = betting.value?.totals as Record<number, number> | undefined;
-    const amount = totals?.[id] ?? 0;
-    if (!amount) return '∞';
-    return (totalBet.value / amount).toFixed(2);
-};
+const betTotals = computed(() => betting.value?.totals as Record<number, number> | undefined);
 const isParticipant = computed(() =>
    (snapshot.value?.participants ?? []).some((participant) => participant.id === myGeneralId.value)
 );
@@ -172,33 +154,14 @@ const start = async () => {
        </section>
        <section class="section-title bg2">16강 승자전</section>

-        <section class="bracket bg0" aria-label="토너먼트 대진표">
-            <div class="round champion">
-                <span>{{ champion }}</span>
-            </div>
-            <div class="connector">┻</div>
-            <div class="round final">
-                <span v-for="(name, index) in finalists" :key="index">{{ name }}</span>
-            </div>
-            <div class="connector">┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓</div>
-            <div class="round semi">
-                <span v-for="(name, index) in semiFinalists" :key="index">{{ name }}</span>
-            </div>
-            <div class="connector">┏━━━━━━━━━━┻━━━━━━━━━━┓&emsp;┏━━━━━━━━━━┻━━━━━━━━━━┓</div>
-            <div class="round quarter">
-                <span v-for="(name, index) in quarterFinalists" :key="index">{{ name }}</span>
-            </div>
-            <div class="connector">┏━━━━┻━━━━┓&emsp;┏━━━━┻━━━━┓&emsp;┏━━━━┻━━━━┓&emsp;┏━━━━┻━━━━┓</div>
-            <div class="round top16">
-                <span v-for="(name, index) in top16" :key="index">{{ name }}</span>
-            </div>
-            <div class="round odds">
-                <span v-for="(matchName, index) in top16" :key="index" :data-candidate="matchName">
-                    {{ odds(matchesAt(7).flatMap((match) => [match.attackerId, match.defenderId])[index]) }}
-                </span>
-            </div>
-            <p>배당률이 낮을수록 베팅된 금액이 많고 유저들이 우승후보로 많이 선택한 장수입니다.</p>
-        </section>
+        <TournamentBracket
+            class="bg0"
+            :participants="snapshot?.participants ?? []"
+            :matches="snapshot?.matches ?? []"
+            :winner-id="snapshot?.state?.winnerId"
+            :bet-totals="betTotals"
+            :total-bet="totalBet"
+        />

        <section v-if="currentMatch" class="fight bg0">
            <h2>{{ nameOf(currentMatch.attackerId) }} vs {{ nameOf(currentMatch.defenderId) }}</h2>
@@ -353,42 +316,6 @@ button:focus-visible {
    color: magenta;
    font-size: 24px;
 }
-.bracket {
-    padding: 10px 0;
-}
-.round {
-    display: grid;
-    align-items: center;
-    min-height: 24px;
-}
-.champion {
-    grid-template-columns: 1fr;
-}
-.final {
-    grid-template-columns: repeat(2, 1fr);
-}
-.semi {
-    grid-template-columns: repeat(4, 1fr);
-}
-.quarter {
-    grid-template-columns: repeat(8, 1fr);
-}
-.top16,
-.odds {
-    grid-template-columns: repeat(16, 125px);
-}
-.connector {
-    min-height: 24px;
-    white-space: pre;
-    color: #fff;
-}
-.odds {
-    color: skyblue;
-}
-.bracket p {
-    color: skyblue;
-    font-size: 18px;
-}
 .fight {
    padding: 8px;
    text-align: left;
@@ -0,0 +1,62 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+import { buildTournamentBracket } from '../src/utils/tournamentBracket.ts';
+
+const participants = Array.from({ length: 16 }, (_, index) => ({ id: index + 1, name: `장수${index + 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: 9 + index,
+        stage: 8,
+        roundIndex: index,
+        attackerId: index * 4 + 1,
+        defenderId: index * 4 + 3,
+        winnerId: index * 4 + 1,
+    })),
+    ...Array.from({ length: 2 }, (_, index) => ({
+        id: 13 + index,
+        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 },
+];
+
+void describe('tournament bracket', () => {
+    void it('keeps every general in the worker roundIndex order and marks the actual winner path', () => {
+        const bracket = buildTournamentBracket(participants, matches, 1);
+
+        assert.equal(bracket.champion.name, '장수1');
+        assert.deepEqual(
+            bracket.top16.slots.map((slot) => slot.name),
+            participants.map((participant) => participant.name)
+        );
+        assert.deepEqual(
+            bracket.top16.slots.filter((slot) => slot.advanced).map((slot) => slot.id),
+            [1, 3, 5, 7, 9, 11, 13, 15]
+        );
+        assert.deepEqual(
+            bracket.final.slots.map((slot) => slot.id),
+            [1, 9]
+        );
+    });
+
+    void it('renders missing future rounds as stable empty slots without inventing generals', () => {
+        const bracket = buildTournamentBracket(participants, matches.filter((match) => match.stage === 7));
+
+        assert.equal(bracket.champion.name, '-');
+        assert.deepEqual(bracket.final.slots.map((slot) => slot.name), ['-', '-']);
+        assert.equal(bracket.top16.slots[0]?.name, '장수1');
+        assert.equal(bracket.top16.slots[15]?.name, '장수16');
+    });
+});