merge: render responsive tournament bracket
This commit is contained in:
@@ -25,6 +25,7 @@ export default defineConfig({
|
|||||||
'nationGeneralSecret.spec.ts',
|
'nationGeneralSecret.spec.ts',
|
||||||
'npcPolicy.spec.ts',
|
'npcPolicy.spec.ts',
|
||||||
'auction.spec.ts',
|
'auction.spec.ts',
|
||||||
|
'tournamentBracket.spec.ts',
|
||||||
'battleSimulator.spec.ts',
|
'battleSimulator.spec.ts',
|
||||||
'battleSimulatorRef.spec.ts',
|
'battleSimulatorRef.spec.ts',
|
||||||
'commandArguments.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: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: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: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: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: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",
|
"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">
|
<script setup lang="ts">
|
||||||
import { computed, onMounted, ref } from 'vue';
|
import { computed, onMounted, ref } from 'vue';
|
||||||
|
import TournamentBracket from '../components/tournament/TournamentBracket.vue';
|
||||||
import { trpc } from '../utils/trpc';
|
import { trpc } from '../utils/trpc';
|
||||||
|
|
||||||
type Snapshot = Awaited<ReturnType<typeof trpc.tournament.getSnapshot.query>>;
|
type Snapshot = Awaited<ReturnType<typeof trpc.tournament.getSnapshot.query>>;
|
||||||
@@ -60,27 +61,8 @@ const matchesAt = (stage: number) =>
|
|||||||
.filter((match) => match.stage === stage)
|
.filter((match) => match.stage === stage)
|
||||||
.sort((a, b) => a.roundIndex - b.roundIndex);
|
.sort((a, b) => a.roundIndex - b.roundIndex);
|
||||||
const nameOf = (id?: number) => (id ? (participantsById.value.get(id)?.name ?? `#${id}`) : '-');
|
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 totalBet = computed(() => betting.value?.totalAmount ?? 0);
|
||||||
const odds = (id?: number) => {
|
const betTotals = computed(() => betting.value?.totals as Record<number, number> | undefined);
|
||||||
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 isParticipant = computed(() =>
|
const isParticipant = computed(() =>
|
||||||
(snapshot.value?.participants ?? []).some((participant) => participant.id === myGeneralId.value)
|
(snapshot.value?.participants ?? []).some((participant) => participant.id === myGeneralId.value)
|
||||||
);
|
);
|
||||||
@@ -172,33 +154,14 @@ const start = async () => {
|
|||||||
</section>
|
</section>
|
||||||
<section class="section-title bg2">16강 승자전</section>
|
<section class="section-title bg2">16강 승자전</section>
|
||||||
|
|
||||||
<section class="bracket bg0" aria-label="토너먼트 대진표">
|
<TournamentBracket
|
||||||
<div class="round champion">
|
class="bg0"
|
||||||
<span>{{ champion }}</span>
|
:participants="snapshot?.participants ?? []"
|
||||||
</div>
|
:matches="snapshot?.matches ?? []"
|
||||||
<div class="connector">┻</div>
|
:winner-id="snapshot?.state?.winnerId"
|
||||||
<div class="round final">
|
:bet-totals="betTotals"
|
||||||
<span v-for="(name, index) in finalists" :key="index">{{ name }}</span>
|
:total-bet="totalBet"
|
||||||
</div>
|
/>
|
||||||
<div class="connector">┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓</div>
|
|
||||||
<div class="round semi">
|
|
||||||
<span v-for="(name, index) in semiFinalists" :key="index">{{ name }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="connector">┏━━━━━━━━━━┻━━━━━━━━━━┓ ┏━━━━━━━━━━┻━━━━━━━━━━┓</div>
|
|
||||||
<div class="round quarter">
|
|
||||||
<span v-for="(name, index) in quarterFinalists" :key="index">{{ name }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="connector">┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓</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>
|
|
||||||
|
|
||||||
<section v-if="currentMatch" class="fight bg0">
|
<section v-if="currentMatch" class="fight bg0">
|
||||||
<h2>{{ nameOf(currentMatch.attackerId) }} vs {{ nameOf(currentMatch.defenderId) }}</h2>
|
<h2>{{ nameOf(currentMatch.attackerId) }} vs {{ nameOf(currentMatch.defenderId) }}</h2>
|
||||||
@@ -353,42 +316,6 @@ button:focus-visible {
|
|||||||
color: magenta;
|
color: magenta;
|
||||||
font-size: 24px;
|
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 {
|
.fight {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
text-align: left;
|
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');
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user