Merge branch 'main' into feature/chief-center-parity-20260802
This commit is contained in:
@@ -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('조운');
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import 'tailwindcss';
|
||||
@import './styles/tokens.css';
|
||||
@import './styles/legacy-controls.css';
|
||||
@import './styles/game-shell.css';
|
||||
@import './styles/ref-shell.css';
|
||||
|
||||
@@ -44,33 +45,3 @@ textarea {
|
||||
background-color: #172a52;
|
||||
background-image: var(--sammo-texture-blue);
|
||||
}
|
||||
|
||||
.legacy-button {
|
||||
display: inline-block;
|
||||
border: 1px solid #12195b;
|
||||
border-radius: 3px;
|
||||
background: #141c65;
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.legacy-button:hover,
|
||||
.legacy-button:focus,
|
||||
.legacy-button:active {
|
||||
border-color: #0f154c;
|
||||
background: #101651;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.legacy-button:focus-visible {
|
||||
outline: 2px solid #f39c12;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.legacy-button:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
.legacy-button {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--sammo-button-base1-border);
|
||||
border-radius: 3px;
|
||||
padding: 5px 10px;
|
||||
background: var(--sammo-button-base1-bg);
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.legacy-button:hover,
|
||||
.legacy-button:focus,
|
||||
.legacy-button:active {
|
||||
border-color: var(--sammo-button-base1-hover-border);
|
||||
background: var(--sammo-button-base1-hover-bg);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.legacy-button:focus-visible {
|
||||
outline: 2px solid var(--sammo-color-accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.legacy-button:disabled,
|
||||
.legacy-button[aria-disabled='true'] {
|
||||
cursor: default;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/*
|
||||
* Ref Bootstrap 5.2 + Lumen button family. The modifier describes the legacy
|
||||
* semantic role; width and placement remain in the owning scoped component.
|
||||
*/
|
||||
.legacy-button:is(
|
||||
.legacy-button--primary,
|
||||
.legacy-button--secondary,
|
||||
.legacy-button--danger,
|
||||
.legacy-button--info,
|
||||
.legacy-button--navigation
|
||||
) {
|
||||
--legacy-button-bg: var(--sammo-button-primary-bg);
|
||||
--legacy-button-border: var(--sammo-button-primary-border);
|
||||
min-height: 35.5px;
|
||||
margin-top: 0;
|
||||
border-color: var(--legacy-button-border);
|
||||
border-style: solid;
|
||||
border-width: 0 1px 4px;
|
||||
border-radius: 5.25px;
|
||||
padding: 5.25px 10.5px;
|
||||
background: var(--legacy-button-bg);
|
||||
color: #fff;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.legacy-button.legacy-button--secondary {
|
||||
--legacy-button-bg: var(--sammo-button-secondary-bg);
|
||||
--legacy-button-border: var(--sammo-button-secondary-border);
|
||||
}
|
||||
|
||||
.legacy-button.legacy-button--danger {
|
||||
--legacy-button-bg: var(--sammo-button-danger-bg);
|
||||
--legacy-button-border: var(--sammo-button-danger-border);
|
||||
}
|
||||
|
||||
.legacy-button.legacy-button--info {
|
||||
--legacy-button-bg: var(--sammo-button-info-bg);
|
||||
--legacy-button-border: var(--sammo-button-info-border);
|
||||
}
|
||||
|
||||
.legacy-button.legacy-button--navigation {
|
||||
--legacy-button-bg: var(--sammo-button-navigation-bg);
|
||||
--legacy-button-border: var(--sammo-button-navigation-border);
|
||||
}
|
||||
|
||||
.legacy-button:is(
|
||||
.legacy-button--primary,
|
||||
.legacy-button--secondary,
|
||||
.legacy-button--danger,
|
||||
.legacy-button--info,
|
||||
.legacy-button--navigation
|
||||
):not(:disabled, [aria-disabled='true']):hover {
|
||||
margin-top: 1px;
|
||||
border-color: var(--legacy-button-border);
|
||||
border-bottom-width: 3px;
|
||||
background: var(--legacy-button-bg);
|
||||
}
|
||||
|
||||
.legacy-button:is(
|
||||
.legacy-button--primary,
|
||||
.legacy-button--secondary,
|
||||
.legacy-button--danger,
|
||||
.legacy-button--info,
|
||||
.legacy-button--navigation
|
||||
):not(:disabled, [aria-disabled='true']):active {
|
||||
margin-top: 2px;
|
||||
border-color: var(--legacy-button-border);
|
||||
border-bottom-width: 2px;
|
||||
background: var(--legacy-button-bg);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.legacy-button:is(
|
||||
.legacy-button--primary,
|
||||
.legacy-button--secondary,
|
||||
.legacy-button--danger,
|
||||
.legacy-button--info,
|
||||
.legacy-button--navigation
|
||||
):focus {
|
||||
border-color: var(--legacy-button-border);
|
||||
background: var(--legacy-button-bg);
|
||||
}
|
||||
@@ -6,6 +6,20 @@
|
||||
--sammo-color-border: rgba(201, 164, 90, 0.4);
|
||||
--sammo-color-action-bg: rgba(16, 16, 16, 0.6);
|
||||
--sammo-color-error: #f5b7b1;
|
||||
--sammo-button-base1-bg: #141c65;
|
||||
--sammo-button-base1-border: #12195b;
|
||||
--sammo-button-base1-hover-bg: #101651;
|
||||
--sammo-button-base1-hover-border: #0f154c;
|
||||
--sammo-button-primary-bg: #375a7f;
|
||||
--sammo-button-primary-border: #325172;
|
||||
--sammo-button-secondary-bg: #444;
|
||||
--sammo-button-secondary-border: #3d3d3d;
|
||||
--sammo-button-danger-bg: #e74c3c;
|
||||
--sammo-button-danger-border: #d04436;
|
||||
--sammo-button-info-bg: #3498db;
|
||||
--sammo-button-info-border: #2f89c5;
|
||||
--sammo-button-navigation-bg: #00582c;
|
||||
--sammo-button-navigation-border: #004f28;
|
||||
--sammo-texture-walnut: url('/image/game/back_walnut.jpg');
|
||||
--sammo-texture-green: url('/image/game/back_green.jpg');
|
||||
--sammo-texture-blue: url('/image/game/back_blue.jpg');
|
||||
|
||||
@@ -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),
|
||||
};
|
||||
};
|
||||
@@ -11,6 +11,18 @@ const error = ref('');
|
||||
const state = (value: number) => ({ 0: '★', 1: '▲', 2: '', 7: '@' })[value] ?? 'ㆍ';
|
||||
const stateClass = (value: number) => `state-${value}`;
|
||||
const nationMap = computed(() => new Map(data.value?.nations.map((nation) => [nation.id, nation]) ?? []));
|
||||
const isBrightColor = (color: string): boolean => {
|
||||
const normalized = color.trim().replace(/^#/u, '');
|
||||
if (!/^[0-9a-f]{6}$/iu.test(normalized)) return false;
|
||||
const red = Number.parseInt(normalized.slice(0, 2), 16);
|
||||
const green = Number.parseInt(normalized.slice(2, 4), 16);
|
||||
const blue = Number.parseInt(normalized.slice(4, 6), 16);
|
||||
return red * 0.299 + green * 0.587 + blue * 0.114 > 170;
|
||||
};
|
||||
const nationNameStyle = (color: string) => ({
|
||||
backgroundColor: color,
|
||||
color: isBrightColor(color) ? '#000' : '#fff',
|
||||
});
|
||||
onMounted(async () => {
|
||||
try {
|
||||
[data.value, layout.value] = await Promise.all([
|
||||
@@ -96,10 +108,29 @@ onMounted(async () => {
|
||||
<div class="map-grid">
|
||||
<MapViewer :map-data="data.map" :map-layout="layout" :loading="false" />
|
||||
<div class="nation-list">
|
||||
<div v-for="nation in data.nations" :key="nation.id">
|
||||
<b :style="{ color: nation.color }">【{{ nation.name }}】</b> {{ nation.power.toLocaleString()
|
||||
}}<br /><small>{{ nation.cities.join(', ') }}</small>
|
||||
</div>
|
||||
<table class="simple-nation-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="nation-name-column">국명</th>
|
||||
<th class="nation-power-column">국력</th>
|
||||
<th class="nation-count-column">장수</th>
|
||||
<th class="nation-count-column">속령</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="nation in data.nations" :key="nation.id">
|
||||
<td><span :style="nationNameStyle(nation.color)">{{ nation.name }}</span></td>
|
||||
<td>{{ nation.power.toLocaleString() }}</td>
|
||||
<td>{{ nation.generalCount.toLocaleString() }}</td>
|
||||
<td
|
||||
:title="nation.cities.join(', ')"
|
||||
:aria-label="`속령 ${nation.cities.length}개: ${nation.cities.join(', ')}`"
|
||||
>
|
||||
{{ nation.cities.length.toLocaleString() }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -218,9 +249,38 @@ onMounted(async () => {
|
||||
display: grid;
|
||||
grid-template-columns: 700px 300px;
|
||||
}
|
||||
.nation-list > div {
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid #666;
|
||||
.simple-nation-list {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.simple-nation-list thead {
|
||||
background-color: #ccc;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
.simple-nation-list th {
|
||||
border: 0;
|
||||
border-left: 1px solid gray;
|
||||
padding: 2px 6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.simple-nation-list td {
|
||||
border: 0;
|
||||
border-left: 1px solid gray;
|
||||
padding: 1px 6px;
|
||||
text-align: right;
|
||||
}
|
||||
.simple-nation-list td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
.nation-name-column {
|
||||
width: 44%;
|
||||
}
|
||||
.nation-power-column {
|
||||
width: 23%;
|
||||
}
|
||||
.nation-count-column {
|
||||
width: 15%;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
|
||||
@@ -427,9 +427,16 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<header class="top-back-bar legacy-bg0">
|
||||
<RouterLink class="top-button legacy-button" to="/">돌아가기</RouterLink>
|
||||
<RouterLink class="top-button legacy-button legacy-button--navigation" to="/">돌아가기</RouterLink>
|
||||
<strong>유산 관리</strong>
|
||||
<button class="top-button legacy-button" type="button" :disabled="loading" @click="loadStatus">갱신</button>
|
||||
<button
|
||||
class="top-button legacy-button legacy-button--navigation"
|
||||
type="button"
|
||||
:disabled="loading"
|
||||
@click="loadStatus"
|
||||
>
|
||||
갱신
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<main id="container" class="inherit-page legacy-bg0">
|
||||
@@ -490,7 +497,7 @@ onMounted(() => {
|
||||
></small
|
||||
>
|
||||
<button
|
||||
class="legacy-button buy-button"
|
||||
class="legacy-button legacy-button--primary buy-button"
|
||||
:disabled="isUnited || actionBusy"
|
||||
@click="reserveSpecialWar"
|
||||
>
|
||||
@@ -524,7 +531,7 @@ onMounted(() => {
|
||||
}}</small
|
||||
>
|
||||
<button
|
||||
class="legacy-button buy-button"
|
||||
class="legacy-button legacy-button--primary buy-button"
|
||||
:disabled="isUnited || actionBusy"
|
||||
@click="openUniqueAuction"
|
||||
>
|
||||
@@ -539,7 +546,11 @@ onMounted(() => {
|
||||
<article class="shop-item simple-item">
|
||||
<div class="control-row">
|
||||
<span>랜덤 턴 초기화</span
|
||||
><button class="legacy-button" :disabled="isUnited || actionBusy" @click="resetTurnTime">
|
||||
><button
|
||||
class="legacy-button legacy-button--primary"
|
||||
:disabled="isUnited || actionBusy"
|
||||
@click="resetTurnTime"
|
||||
>
|
||||
구입
|
||||
</button>
|
||||
</div>
|
||||
@@ -552,7 +563,11 @@ onMounted(() => {
|
||||
<article class="shop-item simple-item">
|
||||
<div class="control-row">
|
||||
<span>랜덤 유니크 획득</span
|
||||
><button class="legacy-button" :disabled="isUnited || actionBusy" @click="buyRandomUnique">
|
||||
><button
|
||||
class="legacy-button legacy-button--primary"
|
||||
:disabled="isUnited || actionBusy"
|
||||
@click="buyRandomUnique"
|
||||
>
|
||||
구입
|
||||
</button>
|
||||
</div>
|
||||
@@ -565,7 +580,11 @@ onMounted(() => {
|
||||
<article class="shop-item simple-item">
|
||||
<div class="control-row">
|
||||
<span>즉시 전투 특기 초기화</span
|
||||
><button class="legacy-button" :disabled="isUnited || actionBusy" @click="resetSpecialWar">
|
||||
><button
|
||||
class="legacy-button legacy-button--primary"
|
||||
:disabled="isUnited || actionBusy"
|
||||
@click="resetSpecialWar"
|
||||
>
|
||||
구입
|
||||
</button>
|
||||
</div>
|
||||
@@ -596,14 +615,14 @@ onMounted(() => {
|
||||
>
|
||||
<div class="dual-buttons">
|
||||
<button
|
||||
class="legacy-button secondary"
|
||||
class="legacy-button legacy-button--secondary"
|
||||
:disabled="actionBusy"
|
||||
@click="buffTargets[key] = status.buffLevels[key] ?? 0"
|
||||
>
|
||||
리셋
|
||||
</button>
|
||||
<button
|
||||
class="legacy-button"
|
||||
class="legacy-button legacy-button--primary"
|
||||
:disabled="isUnited || actionBusy"
|
||||
@click="buyHiddenBuff(key)"
|
||||
>
|
||||
@@ -635,7 +654,11 @@ onMounted(() => {
|
||||
>필요 포인트: {{ status.inheritConst.inheritCheckOwnerPoint }}</b
|
||||
></small
|
||||
>
|
||||
<button class="legacy-button buy-button" :disabled="isUnited || actionBusy" @click="checkOwner">
|
||||
<button
|
||||
class="legacy-button legacy-button--primary buy-button"
|
||||
:disabled="isUnited || actionBusy"
|
||||
@click="checkOwner"
|
||||
>
|
||||
소유자 찾기
|
||||
</button>
|
||||
<p v-if="ownerResult" class="owner-result">
|
||||
@@ -689,7 +712,7 @@ onMounted(() => {
|
||||
><br /><span v-if="resetStatErrors.length">{{ resetStatErrors[0] }}</span></small
|
||||
>
|
||||
<button
|
||||
class="legacy-button buy-button"
|
||||
class="legacy-button legacy-button--primary buy-button"
|
||||
:disabled="isUnited || actionBusy || resetStatErrors.length > 0"
|
||||
@click="resetStats"
|
||||
>
|
||||
@@ -707,7 +730,11 @@ onMounted(() => {
|
||||
<small>[{{ new Date(entry.createdAt).toLocaleString('ko-KR') }}]</small>
|
||||
<span>{{ entry.text }}</span>
|
||||
</div>
|
||||
<button class="legacy-button more-button" :disabled="logLoading || logEnd" @click="loadLogs()">
|
||||
<button
|
||||
class="legacy-button legacy-button--secondary more-button"
|
||||
:disabled="logLoading || logEnd"
|
||||
@click="loadLogs()"
|
||||
>
|
||||
더 가져오기
|
||||
</button>
|
||||
</section>
|
||||
@@ -872,11 +899,6 @@ onMounted(() => {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.legacy-button.secondary {
|
||||
border-color: #51585e;
|
||||
background: #5c636a;
|
||||
}
|
||||
|
||||
.bottom-actions .shop-item:first-child {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
@@ -213,8 +213,13 @@ onMounted(() => {
|
||||
<template>
|
||||
<main id="container" class="pageVote bg0">
|
||||
<header class="back_bar bg0">
|
||||
<RouterLink class="btn btn-sammo-base2 back_btn" to="/">창 닫기</RouterLink>
|
||||
<button class="btn btn-sammo-base2 reload_btn" type="button" :disabled="loading" @click="reloadVote">
|
||||
<RouterLink class="legacy-button legacy-button--navigation back_btn" to="/">창 닫기</RouterLink>
|
||||
<button
|
||||
class="legacy-button legacy-button--navigation reload_btn"
|
||||
type="button"
|
||||
:disabled="loading"
|
||||
@click="reloadVote"
|
||||
>
|
||||
갱신
|
||||
</button>
|
||||
<h2 class="title"></h2>
|
||||
@@ -305,7 +310,9 @@ onMounted(() => {
|
||||
<template v-if="canVote">
|
||||
<td class="text-center">투표</td>
|
||||
<td colspan="2">
|
||||
<button class="btn btn-primary vote-submit" @click="submitVote">투표</button>
|
||||
<button class="legacy-button legacy-button--secondary vote-submit" @click="submitVote">
|
||||
투표
|
||||
</button>
|
||||
</td>
|
||||
</template>
|
||||
<td v-else colspan="3" class="text-center">결산</td>
|
||||
@@ -348,7 +355,11 @@ onMounted(() => {
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><button class="btn btn-primary comment-submit" type="submit">댓글 달기</button></td>
|
||||
<td>
|
||||
<button class="legacy-button legacy-button--secondary comment-submit" type="submit">
|
||||
댓글 달기
|
||||
</button>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<input v-model="myComment" class="form-control" maxlength="200" aria-label="댓글" />
|
||||
</td>
|
||||
@@ -395,13 +406,15 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-submit">
|
||||
<button class="btn btn-primary" type="button" @click="submitNewVote">제출</button>
|
||||
<button class="legacy-button legacy-button--secondary" type="button" @click="submitNewVote">
|
||||
제출
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<footer class="bottom_bar bg0">
|
||||
<RouterLink class="btn btn-sammo-base2 back_btn" to="/">창 닫기</RouterLink>
|
||||
<RouterLink class="legacy-button legacy-button--navigation back_btn" to="/">창 닫기</RouterLink>
|
||||
</footer>
|
||||
</main>
|
||||
</template>
|
||||
@@ -438,54 +451,19 @@ onMounted(() => {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-height: 35.5px;
|
||||
padding: 5.25px 10.5px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5.25px;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
outline: 2px solid #8ab4f8;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn-sammo-base2 {
|
||||
.back_btn,
|
||||
.reload_btn {
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
margin-right: 2px;
|
||||
border-color: #004f28;
|
||||
background: #00582c;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back_bar .btn-sammo-base2 {
|
||||
.back_bar .back_btn,
|
||||
.back_bar .reload_btn {
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border-color: #0d6efd;
|
||||
background: #0d6efd;
|
||||
}
|
||||
|
||||
#vote-title {
|
||||
font-size: 1.8em;
|
||||
line-height: 1.5;
|
||||
|
||||
@@ -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">┏━━━━━━━━━━┻━━━━━━━━━━┓ ┏━━━━━━━━━━┻━━━━━━━━━━┓</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>
|
||||
<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;
|
||||
|
||||
@@ -177,8 +177,15 @@ onMounted(() => {
|
||||
<template>
|
||||
<main id="container" class="legacy-troop-page">
|
||||
<header class="topBackBar bg0">
|
||||
<RouterLink class="btn legacyNavButton backLink" to="/">돌아가기</RouterLink>
|
||||
<button class="btn legacyNavButton reloadButton" type="button" :disabled="loading" @click="refresh">
|
||||
<RouterLink class="legacy-button legacy-button--navigation legacyNavButton backLink" to="/"
|
||||
>돌아가기</RouterLink
|
||||
>
|
||||
<button
|
||||
class="legacy-button legacy-button--navigation legacyNavButton reloadButton"
|
||||
type="button"
|
||||
:disabled="loading"
|
||||
@click="refresh"
|
||||
>
|
||||
갱신
|
||||
</button>
|
||||
<h2>부대 편성</h2>
|
||||
@@ -242,25 +249,33 @@ onMounted(() => {
|
||||
|
||||
<div class="troopAction">
|
||||
<div v-if="dialogKind === null || dialogTroopId !== troop.id" class="actionButtons">
|
||||
<button v-if="data.me.troopId === 0" class="btn btn-primary" @click="joinTroop(troop)">
|
||||
<button
|
||||
v-if="data.me.troopId === 0"
|
||||
class="legacy-button legacy-button--primary"
|
||||
@click="joinTroop(troop)"
|
||||
>
|
||||
부대 탑승
|
||||
</button>
|
||||
<button
|
||||
v-if="data.me.troopId === troop.id"
|
||||
class="btn"
|
||||
:class="data.me.id === data.me.troopId ? 'btn-danger' : 'btn-primary'"
|
||||
class="legacy-button"
|
||||
:class="data.me.id === data.me.troopId ? 'legacy-button--danger' : 'legacy-button--primary'"
|
||||
@click="exitTroop(troop)"
|
||||
>
|
||||
{{ data.me.id === data.me.troopId ? '부대 해산' : '부대 탈퇴' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="data.me.troopId === troop.id && data.me.id === data.me.troopId"
|
||||
class="btn btn-secondary"
|
||||
class="legacy-button legacy-button--secondary"
|
||||
@click="openKick(troop)"
|
||||
>
|
||||
부대원 추방...
|
||||
</button>
|
||||
<button v-if="data.permission >= 4" class="btn btn-info" @click="openRename(troop)">
|
||||
<button
|
||||
v-if="data.permission >= 4"
|
||||
class="legacy-button legacy-button--info"
|
||||
@click="openRename(troop)"
|
||||
>
|
||||
부대명 변경...
|
||||
</button>
|
||||
</div>
|
||||
@@ -270,10 +285,12 @@ onMounted(() => {
|
||||
<input v-model.trim="editName" class="formControl" type="text" aria-label="새 부대명" />
|
||||
</div>
|
||||
<div class="subBtnCancel">
|
||||
<button class="btn btn-secondary" @click="closeDialog">취소</button>
|
||||
<button class="legacy-button legacy-button--secondary" @click="closeDialog">취소</button>
|
||||
</div>
|
||||
<div class="subBtnOK">
|
||||
<button class="btn btn-primary" @click="renameTroop(troop)">변경</button>
|
||||
<button class="legacy-button legacy-button--primary" @click="renameTroop(troop)">
|
||||
변경
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="subDialog kickDialog">
|
||||
@@ -290,10 +307,12 @@ onMounted(() => {
|
||||
</select>
|
||||
</div>
|
||||
<div class="subBtnCancel">
|
||||
<button class="btn btn-secondary" @click="closeDialog">취소</button>
|
||||
<button class="legacy-button legacy-button--secondary" @click="closeDialog">취소</button>
|
||||
</div>
|
||||
<div class="subBtnOK">
|
||||
<button class="btn btn-primary" @click="kickMember(troop)">추방</button>
|
||||
<button class="legacy-button legacy-button--primary" @click="kickMember(troop)">
|
||||
추방
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -305,12 +324,16 @@ onMounted(() => {
|
||||
<div v-if="data.me.troopId === 0" class="makeNewTroop">
|
||||
<div class="makeTitle bg1 center">부대 창설</div>
|
||||
<input v-model.trim="createName" class="formControl troopNameField" type="text" aria-label="부대명" />
|
||||
<button class="btn btn-secondary createButton" @click="makeTroop">부대 창설</button>
|
||||
<button class="legacy-button legacy-button--secondary createButton" @click="makeTroop">
|
||||
부대 창설
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="bottomBar bg0">
|
||||
<RouterLink class="btn legacyNavButton backLink" to="/">돌아가기</RouterLink>
|
||||
<RouterLink class="legacy-button legacy-button--navigation legacyNavButton backLink" to="/"
|
||||
>돌아가기</RouterLink
|
||||
>
|
||||
<div></div>
|
||||
</footer>
|
||||
<div v-if="popupMember" id="generalPopup" :style="{ top: `${popupTop}px` }" role="tooltip">
|
||||
@@ -359,14 +382,11 @@ onMounted(() => {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn.legacyNavButton {
|
||||
.legacyNavButton {
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
margin-right: 2px;
|
||||
border-color: #004f28;
|
||||
color: #fff;
|
||||
background: #00582c;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.notice {
|
||||
@@ -490,51 +510,6 @@ onMounted(() => {
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-height: 31px;
|
||||
padding: 0.2em 0.75em;
|
||||
border: 1px solid #777;
|
||||
border-radius: 4px;
|
||||
color: #eee;
|
||||
background: #555;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
outline: 2px solid #8ab4f8;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border-color: #0d6efd;
|
||||
background: #0d6efd;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
border-color: #dc3545;
|
||||
background: #dc3545;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
border-color: #0dcaf0;
|
||||
color: #111;
|
||||
background: #0dcaf0;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
border-color: #6c757d;
|
||||
background: #6c757d;
|
||||
}
|
||||
|
||||
.formControl {
|
||||
width: 100%;
|
||||
min-height: 31px;
|
||||
@@ -561,6 +536,9 @@ onMounted(() => {
|
||||
.bottomBar .legacyNavButton {
|
||||
width: 70px;
|
||||
margin: 0;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (min-width: 501px) {
|
||||
@@ -624,7 +602,7 @@ onMounted(() => {
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.legacy-troop-page {
|
||||
width: 511px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#generalPopup {
|
||||
|
||||
@@ -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