Merge branch 'main' into feature/best-general-live-ranking-audit
This commit is contained in:
@@ -82,15 +82,22 @@ export const worldRouter = router({
|
||||
throw new TRPCError({ code: 'PRECONDITION_FAILED', message: 'World state is not initialized.' });
|
||||
}
|
||||
const nationRows = nations
|
||||
.map((nation) => ({
|
||||
id: nation.id,
|
||||
name: nation.name,
|
||||
color: nation.color,
|
||||
capitalCityId: nation.capitalCityId ?? 0,
|
||||
level: nation.level,
|
||||
power: typeof asRecord(nation.meta).power === 'number' ? Number(asRecord(nation.meta).power) : 0,
|
||||
cities: cities.filter((city) => city.nationId === nation.id).map((city) => city.name),
|
||||
}))
|
||||
.map((nation) => {
|
||||
const meta = asRecord(nation.meta);
|
||||
return {
|
||||
id: nation.id,
|
||||
name: nation.name,
|
||||
color: nation.color,
|
||||
capitalCityId: nation.capitalCityId ?? 0,
|
||||
level: nation.level,
|
||||
power: typeof meta.power === 'number' && Number.isFinite(meta.power) ? meta.power : 0,
|
||||
generalCount:
|
||||
typeof meta.gennum === 'number' && Number.isFinite(meta.gennum)
|
||||
? Math.max(0, Math.trunc(meta.gennum))
|
||||
: 0,
|
||||
cities: cities.filter((city) => city.nationId === nation.id).map((city) => city.name),
|
||||
};
|
||||
})
|
||||
.sort((left, right) => right.power - left.power || left.id - right.id);
|
||||
const matrix: Record<number, Record<number, number>> = {};
|
||||
for (const nation of nationRows) {
|
||||
|
||||
@@ -106,6 +106,7 @@ const context = (
|
||||
findFirst: vi.fn(async ({ where }: { where: { userId: string } }) =>
|
||||
where.userId === me.userId ? me : null
|
||||
),
|
||||
findUnique: vi.fn(async ({ where }: { where: { id: number } }) => (where.id === me.id ? me : null)),
|
||||
findMany: vi.fn(async (args: { where?: Record<string, unknown>; select?: Record<string, boolean> }) => {
|
||||
if (args.where?.nationId === 1 && args.select?.cityId)
|
||||
return [
|
||||
@@ -128,14 +129,52 @@ const context = (
|
||||
meta: options.nationMeta ?? {},
|
||||
})),
|
||||
findMany: vi.fn(async () => [
|
||||
{ id: 1, name: '아국', color: '#008000', level: 1, capitalCityId: 1, meta: { power: 100 } },
|
||||
{ id: 2, name: '적국', color: '#800000', level: 1, capitalCityId: 2, meta: { power: 90 } },
|
||||
{
|
||||
id: 1,
|
||||
name: '아국',
|
||||
color: '#008000',
|
||||
level: 1,
|
||||
capitalCityId: 1,
|
||||
meta: { power: 100, gennum: 4 },
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '적국',
|
||||
color: '#800000',
|
||||
level: 1,
|
||||
capitalCityId: 2,
|
||||
meta: { power: 90, gennum: 3 },
|
||||
},
|
||||
]),
|
||||
},
|
||||
city: { findMany: vi.fn(async () => cities) },
|
||||
worldState: { findFirst: vi.fn(async () => ({ meta: { turntime: '2026-01-01' } })) },
|
||||
worldState: {
|
||||
findFirst: vi.fn(async () => ({
|
||||
currentYear: 200,
|
||||
currentMonth: 1,
|
||||
config: { startYear: 180 },
|
||||
meta: { turntime: '2026-01-01' },
|
||||
})),
|
||||
},
|
||||
generalTurn: { findMany: vi.fn(async () => []) },
|
||||
diplomacy: { findMany: vi.fn(async () => []) },
|
||||
$queryRaw: vi
|
||||
.fn()
|
||||
.mockResolvedValueOnce(
|
||||
cities.map((item) => ({
|
||||
id: item.id,
|
||||
level: item.level,
|
||||
nationId: item.nationId,
|
||||
region: item.region,
|
||||
supplyState: item.supplyState,
|
||||
meta: item.meta,
|
||||
}))
|
||||
)
|
||||
.mockResolvedValueOnce([
|
||||
{ id: 1, name: '아국', color: '#008000', capitalCityId: 1, meta: {} },
|
||||
{ id: 2, name: '적국', color: '#800000', capitalCityId: 2, meta: {} },
|
||||
])
|
||||
.mockResolvedValueOnce([{ cityId: me.cityId }]),
|
||||
};
|
||||
const redis = { get: vi.fn(async () => null), set: vi.fn(async () => null) } as unknown as RedisConnector['client'];
|
||||
const accessTokenStore = new RedisAccessTokenStore(redis, 'che:default');
|
||||
@@ -156,6 +195,15 @@ const context = (
|
||||
};
|
||||
|
||||
describe('in-game information permissions', () => {
|
||||
it('returns the ref nation summary fields in descending power order', async () => {
|
||||
const result = await appRouter.createCaller(context()).world.getGlobalInfo();
|
||||
|
||||
expect(result.nations).toEqual([
|
||||
expect.objectContaining({ id: 1, name: '아국', power: 100, generalCount: 4, cities: ['도시1', '도시80'] }),
|
||||
expect.objectContaining({ id: 2, name: '적국', power: 90, generalCount: 3, cities: ['도시2', '도시3'] }),
|
||||
]);
|
||||
});
|
||||
|
||||
it('does not expose nation-only pages to a wandering general', async () => {
|
||||
const caller = appRouter.createCaller(context({ me: general({ nationId: 0, officerLevel: 0 }) }));
|
||||
await expect(caller.nation.getNationInfo()).rejects.toMatchObject({ code: 'PRECONDITION_FAILED' });
|
||||
|
||||
@@ -244,7 +244,7 @@ export const seedScenarioToDatabase = async (options: ScenarioSeedOptions): Prom
|
||||
blockGeneralCreate: install?.blockGeneralCreate,
|
||||
npcMode: install?.npcMode,
|
||||
showImgLevel: install?.showImgLevel,
|
||||
tournamentTrig: install?.tournamentTrig,
|
||||
tournamentTrig: install?.tournamentTrig ?? true,
|
||||
extendedGeneral: includeExtendedGeneral,
|
||||
turnTermMinutes: install?.turnTermMinutes,
|
||||
syncTurnTime: install?.sync,
|
||||
|
||||
@@ -103,6 +103,7 @@ describeDb('scenario database seed', () => {
|
||||
await connector.connect();
|
||||
try {
|
||||
const prisma = connector.prisma as unknown as ScenarioSeederPrismaClient;
|
||||
const worldState = await prisma.worldState.findFirst();
|
||||
const [nationCount, cityCount, generalCount, diplomacyCount, eventCount] = await Promise.all([
|
||||
prisma.nation.count(),
|
||||
prisma.city.count(),
|
||||
@@ -116,6 +117,7 @@ describeDb('scenario database seed', () => {
|
||||
expect(generalCount).toBe(seed.generals.length);
|
||||
expect(diplomacyCount).toBe(seed.nations.length * Math.max(0, seed.nations.length - 1));
|
||||
expect(eventCount).toBe(seed.events.length);
|
||||
expect(worldState?.config).toMatchObject({ tournamentTrig: true });
|
||||
expect(generalCount).toBeGreaterThan(0);
|
||||
const seededGeneral = await prisma.general.findFirst();
|
||||
expect(seededGeneral?.startAge).toBe(seededGeneral?.age);
|
||||
@@ -201,7 +203,7 @@ describeDb('scenario database seed', () => {
|
||||
blockGeneralCreate: 2,
|
||||
npcMode: 0,
|
||||
showImgLevel: 3,
|
||||
tournamentTrig: true,
|
||||
tournamentTrig: false,
|
||||
joinMode: 'full',
|
||||
autorunUser: {
|
||||
limitMinutes: 60,
|
||||
@@ -234,6 +236,7 @@ describeDb('scenario database seed', () => {
|
||||
const config = (worldState.config ?? {}) as Record<string, unknown>;
|
||||
expect(config.extendedGeneral).toBe(false);
|
||||
expect(config.joinMode).toBe('full');
|
||||
expect(config.tournamentTrig).toBe(false);
|
||||
|
||||
const meta = (worldState.meta ?? {}) as Record<string, unknown>;
|
||||
const autorun = (meta.autorun_user ?? {}) as Record<string, unknown>;
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import { dirname, resolve } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { defineConfig } from '@playwright/test';
|
||||
|
||||
const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../..');
|
||||
const frontendUrl = process.env.CHIEF_CENTER_LIVE_FRONTEND_URL ?? 'http://127.0.0.1:15160/hwe/';
|
||||
|
||||
export default defineConfig({
|
||||
testDir: '.',
|
||||
testMatch: ['chiefCenterLive.spec.ts'],
|
||||
fullyParallel: false,
|
||||
workers: 1,
|
||||
timeout: 90_000,
|
||||
expect: { timeout: 15_000 },
|
||||
reporter: [['list']],
|
||||
outputDir: resolve(repositoryRoot, 'test-results/chief-center-live'),
|
||||
use: {
|
||||
baseURL: frontendUrl,
|
||||
trace: 'retain-on-failure',
|
||||
screenshot: 'only-on-failure',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,205 @@
|
||||
import { randomUUID } from 'node:crypto';
|
||||
|
||||
import { expect, test, type Browser, type Page } from '@playwright/test';
|
||||
import { encryptGameSessionToken } from '../../../packages/common/dist/auth/gameToken.js';
|
||||
import { createGamePostgresConnector } from '../../../packages/infra/dist/index.js';
|
||||
|
||||
const databaseUrl = process.env.CHIEF_CENTER_LIVE_DATABASE_URL;
|
||||
const gameTokenSecret = process.env.CHIEF_CENTER_LIVE_GAME_SECRET;
|
||||
const profile = process.env.PLAYWRIGHT_GAME_PROFILE ?? 'hwe:1010';
|
||||
const hasLiveFixture = Boolean(databaseUrl && gameTokenSecret);
|
||||
const gameSchema = profile.split(':', 1)[0] ?? '';
|
||||
|
||||
const resolveGameDatabaseUrl = (): string => {
|
||||
const parsed = new URL(databaseUrl!);
|
||||
const sourceSchema = parsed.searchParams.get('schema');
|
||||
if (!gameSchema || (sourceSchema !== 'public' && sourceSchema !== gameSchema)) {
|
||||
throw new Error(`Refusing unexpected chief-center schema: ${sourceSchema ?? '(missing)'}`);
|
||||
}
|
||||
parsed.searchParams.set('schema', gameSchema);
|
||||
return parsed.toString();
|
||||
};
|
||||
|
||||
const installSession = async (page: Page, userId: string, displayName: string): Promise<void> => {
|
||||
const now = new Date();
|
||||
const token = encryptGameSessionToken(
|
||||
{
|
||||
version: 1,
|
||||
profile,
|
||||
issuedAt: now.toISOString(),
|
||||
expiresAt: new Date(now.getTime() + 3_600_000).toISOString(),
|
||||
sessionId: `chief-center-live-${randomUUID()}`,
|
||||
user: {
|
||||
id: userId,
|
||||
username: userId,
|
||||
displayName,
|
||||
roles: ['user'],
|
||||
canUseGeneralPicture: false,
|
||||
},
|
||||
sanctions: {},
|
||||
identity: {
|
||||
kakaoVerified: true,
|
||||
canCreateGeneral: true,
|
||||
requiresKakaoVerification: false,
|
||||
graceEndsAt: null,
|
||||
},
|
||||
},
|
||||
gameTokenSecret!
|
||||
);
|
||||
await page.addInitScript(
|
||||
({ gameToken, gameProfile }) => {
|
||||
localStorage.setItem('sammo-game-token', gameToken);
|
||||
localStorage.setItem('sammo-game-profile', gameProfile);
|
||||
},
|
||||
{ gameToken: token, gameProfile: profile }
|
||||
);
|
||||
};
|
||||
|
||||
const newPage = async (browser: Browser, userId: string, displayName: string): Promise<Page> => {
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: 1365, height: 900 },
|
||||
deviceScaleFactor: 1,
|
||||
locale: 'ko-KR',
|
||||
timezoneId: 'Asia/Seoul',
|
||||
colorScheme: 'dark',
|
||||
});
|
||||
const page = await context.newPage();
|
||||
await installSession(page, userId, displayName);
|
||||
return page;
|
||||
};
|
||||
|
||||
test('persists one chief command and exposes it to a normal nation user and another chief', async ({
|
||||
browser,
|
||||
}, testInfo) => {
|
||||
test.skip(!hasLiveFixture, 'isolated chief-center PostgreSQL and token secret are required');
|
||||
test.setTimeout(90_000);
|
||||
|
||||
const connector = createGamePostgresConnector({ url: resolveGameDatabaseUrl() });
|
||||
await connector.connect();
|
||||
const db = connector.prisma;
|
||||
const editor = await db.general.findFirstOrThrow({ where: { name: 'GUI비교관리자' } });
|
||||
const candidates = await db.general.findMany({
|
||||
where: { nationId: editor.nationId, userId: null, id: { not: editor.id } },
|
||||
orderBy: { id: 'asc' },
|
||||
take: 2,
|
||||
});
|
||||
if (candidates.length !== 2) throw new Error('Two isolated visibility candidates are required.');
|
||||
const [viewer, otherChief] = candidates;
|
||||
const viewerUserId = `chief-center-viewer-${randomUUID()}`;
|
||||
const otherChiefUserId = `chief-center-peer-${randomUUID()}`;
|
||||
const originalTurns = await db.nationTurn.findMany({
|
||||
where: { nationId: editor.nationId, officerLevel: editor.officerLevel },
|
||||
orderBy: { turnIdx: 'asc' },
|
||||
});
|
||||
const originalRevision = await db.nationTurnRevision.findUnique({
|
||||
where: {
|
||||
nationId_officerLevel: { nationId: editor.nationId, officerLevel: editor.officerLevel },
|
||||
},
|
||||
});
|
||||
let selectedTargetId: number | undefined;
|
||||
|
||||
try {
|
||||
await db.$transaction([
|
||||
db.general.update({
|
||||
where: { id: viewer.id },
|
||||
data: {
|
||||
userId: viewerUserId,
|
||||
officerLevel: 1,
|
||||
npcState: 0,
|
||||
meta: { ...(viewer.meta as Record<string, unknown>), belong: 999 },
|
||||
penalty: {},
|
||||
},
|
||||
}),
|
||||
db.general.update({
|
||||
where: { id: otherChief.id },
|
||||
data: { userId: otherChiefUserId, officerLevel: 10, npcState: 0, penalty: {} },
|
||||
}),
|
||||
]);
|
||||
|
||||
const editorPage = await newPage(browser, editor.userId!, '사령부입력자');
|
||||
await editorPage.goto('chief-center');
|
||||
await expect(editorPage.getByRole('heading', { name: '사령부', exact: true })).toBeVisible();
|
||||
await editorPage.getByRole('button', { name: '1턴 명령 입력', exact: true }).click();
|
||||
const picker = editorPage.getByTestId('chief-command-picker');
|
||||
await expect(picker).toBeVisible();
|
||||
await picker.getByRole('button', { name: '인사', exact: true }).click();
|
||||
const reward = picker.getByRole('button', { name: /포상/ });
|
||||
await expect(reward).toBeEnabled();
|
||||
await reward.click();
|
||||
const argumentForm = picker.getByTestId('command-argument-form');
|
||||
await argumentForm.getByRole('button', { name: '쌀', exact: true }).click();
|
||||
await argumentForm.locator('input[type=number]').fill('1');
|
||||
const selectableGeneralIds = await argumentForm
|
||||
.locator('select option')
|
||||
.evaluateAll((options) =>
|
||||
options
|
||||
.map((option) => Number((option as HTMLOptionElement).value))
|
||||
.filter((value) => Number.isInteger(value) && value > 0)
|
||||
);
|
||||
selectedTargetId = selectableGeneralIds.find((generalId) => generalId !== editor.id);
|
||||
if (!selectedTargetId) throw new Error('No reward target is available in the live command table.');
|
||||
await argumentForm.locator('select').selectOption(String(selectedTargetId));
|
||||
await picker.getByRole('button', { name: '입력', exact: true }).click();
|
||||
await expect(
|
||||
editorPage.getByTestId('chief-command-editor').locator('.editor-turn-row strong').first()
|
||||
).toHaveText('포상');
|
||||
|
||||
const persisted = await db.nationTurn.findUniqueOrThrow({
|
||||
where: {
|
||||
nationId_officerLevel_turnIdx: {
|
||||
nationId: editor.nationId,
|
||||
officerLevel: editor.officerLevel,
|
||||
turnIdx: 0,
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(persisted.actionCode).toBe('che_포상');
|
||||
expect(persisted.arg).toEqual({ isGold: false, amount: 1, destGeneralId: selectedTargetId });
|
||||
await editorPage.screenshot({ path: testInfo.outputPath('chief-editor-command-entered.png'), fullPage: true });
|
||||
|
||||
const viewerPage = await newPage(browser, viewerUserId, '일반국가원');
|
||||
await viewerPage.goto('chief-center');
|
||||
await expect(viewerPage.getByRole('heading', { name: '사령부', exact: true })).toBeVisible();
|
||||
await expect(viewerPage.getByTestId('chief-command-editor')).toHaveCount(0);
|
||||
await expect(viewerPage.locator('.chief-grid-row').first().getByText('포상', { exact: true })).toBeVisible();
|
||||
await viewerPage.screenshot({ path: testInfo.outputPath('chief-normal-user-visible.png'), fullPage: true });
|
||||
|
||||
const peerPage = await newPage(browser, otherChiefUserId, '다른수뇌');
|
||||
await peerPage.goto('chief-center');
|
||||
await expect(peerPage.getByTestId('chief-command-editor')).toBeVisible();
|
||||
await expect(peerPage.locator('.chief-grid-row').first().getByText('포상', { exact: true })).toBeVisible();
|
||||
await peerPage.screenshot({ path: testInfo.outputPath('chief-peer-visible.png'), fullPage: true });
|
||||
} finally {
|
||||
await db.$transaction(async (transaction) => {
|
||||
await transaction.nationTurn.deleteMany({
|
||||
where: { nationId: editor.nationId, officerLevel: editor.officerLevel },
|
||||
});
|
||||
if (originalTurns.length) await transaction.nationTurn.createMany({ data: originalTurns });
|
||||
await transaction.nationTurnRevision.deleteMany({
|
||||
where: { nationId: editor.nationId, officerLevel: editor.officerLevel },
|
||||
});
|
||||
if (originalRevision) await transaction.nationTurnRevision.create({ data: originalRevision });
|
||||
await transaction.general.update({
|
||||
where: { id: viewer.id },
|
||||
data: {
|
||||
userId: viewer.userId,
|
||||
officerLevel: viewer.officerLevel,
|
||||
npcState: viewer.npcState,
|
||||
meta: viewer.meta,
|
||||
penalty: viewer.penalty,
|
||||
},
|
||||
});
|
||||
await transaction.general.update({
|
||||
where: { id: otherChief.id },
|
||||
data: {
|
||||
userId: otherChief.userId,
|
||||
officerLevel: otherChief.officerLevel,
|
||||
npcState: otherChief.npcState,
|
||||
meta: otherChief.meta,
|
||||
penalty: otherChief.penalty,
|
||||
},
|
||||
});
|
||||
});
|
||||
await connector.disconnect();
|
||||
}
|
||||
});
|
||||
@@ -211,6 +211,7 @@ const install = async (page: Page, rejectGeneral = false) => {
|
||||
requests.push(body);
|
||||
return response({
|
||||
ok: true,
|
||||
revision: 1,
|
||||
turns: [{ index: 0, action: 'che_포상', args: { isGold: false, amount: 300, destGeneralId: 2 } }],
|
||||
});
|
||||
}
|
||||
@@ -281,7 +282,7 @@ test('keeps the entered command visible and reports a server validation error',
|
||||
});
|
||||
|
||||
test('keeps the shared main and chief shell geometry and interaction states', async ({ page }) => {
|
||||
await install(page);
|
||||
const requests = await install(page);
|
||||
await page.setViewportSize({ width: 1000, height: 900 });
|
||||
await page.goto('/');
|
||||
await expect(page.getByRole('heading', { name: '전장 현황' })).toBeVisible();
|
||||
@@ -329,10 +330,23 @@ test('keeps the shared main and chief shell geometry and interaction states', as
|
||||
await page.locator('.main-nation-menu').first().locator('[data-navigation-id="chief-center"]').click();
|
||||
await expect(page).toHaveURL(/\/che\/chief-center$/);
|
||||
await expect(page.getByRole('heading', { name: '사령부', exact: true })).toBeVisible();
|
||||
await page.getByRole('button', { name: '1턴 명령 입력', exact: true }).click();
|
||||
await expect(page.getByTestId('chief-command-picker')).toBeVisible();
|
||||
await page.getByTestId('chief-command-picker').getByRole('button', { name: /포상/ }).click();
|
||||
const chiefArgumentForm = page.getByTestId('chief-command-picker').getByTestId('command-argument-form');
|
||||
await chiefArgumentForm.getByRole('button', { name: '쌀' }).click();
|
||||
await chiefArgumentForm.locator('input[type=number]').fill('300');
|
||||
await chiefArgumentForm.locator('select').selectOption('2');
|
||||
await page.getByTestId('chief-command-picker').getByRole('button', { name: '입력', exact: true }).click();
|
||||
await expect(page.getByTestId('chief-command-editor').locator('.editor-turn-row strong').first()).toHaveText(
|
||||
'포상'
|
||||
);
|
||||
expect(JSON.stringify(requests)).toContain('"action":"che_포상"');
|
||||
expect(JSON.stringify(requests)).toContain('"destGeneralId":2');
|
||||
const chiefDesktop = await page.locator('.chief-page').evaluate((element) => ({
|
||||
width: element.getBoundingClientRect().width,
|
||||
padding: getComputedStyle(element).padding,
|
||||
headerWidth: element.querySelector<HTMLElement>('.game-shell__header')!.getBoundingClientRect().width,
|
||||
headerWidth: element.querySelector<HTMLElement>('.chief-top')!.getBoundingClientRect().width,
|
||||
}));
|
||||
expect(chiefDesktop).toEqual({ width: 1000, padding: '0px', headerWidth: 1000 });
|
||||
|
||||
@@ -340,7 +354,7 @@ test('keeps the shared main and chief shell geometry and interaction states', as
|
||||
const chiefMobile = await page.locator('.chief-page').evaluate((element) => ({
|
||||
width: element.getBoundingClientRect().width,
|
||||
padding: getComputedStyle(element).padding,
|
||||
headerWidth: element.querySelector<HTMLElement>('.game-shell__header')!.getBoundingClientRect().width,
|
||||
headerWidth: element.querySelector<HTMLElement>('.chief-top')!.getBoundingClientRect().width,
|
||||
}));
|
||||
expect(chiefMobile).toEqual({ width: 500, padding: '0px', headerWidth: 500 });
|
||||
});
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -16,6 +16,8 @@
|
||||
"./npcPossessionLive.spec.ts",
|
||||
"./npcPossession.live.playwright.config.mjs",
|
||||
"./dieOnPrestartLive.spec.ts",
|
||||
"./dieOnPrestart.live.playwright.config.mjs"
|
||||
"./dieOnPrestart.live.playwright.config.mjs",
|
||||
"./chiefCenterLive.spec.ts",
|
||||
"./chiefCenter.live.playwright.config.mjs"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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,445 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import CommandArgumentForm from '../main/CommandArgumentForm.vue';
|
||||
import CommandSelectForm from '../main/CommandSelectForm.vue';
|
||||
import { getNpcColor } from '../../utils/npcColor';
|
||||
|
||||
type CommandOption = { value: string | number; label: string; color?: string };
|
||||
type CommandInputField = {
|
||||
key: string;
|
||||
label: string;
|
||||
kind: 'text' | 'number' | 'boolean' | 'select' | 'numberTuple' | 'hidden';
|
||||
required: boolean;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
constValue?: string | number;
|
||||
options?: CommandOption[];
|
||||
optionSource?: 'cities' | 'nations' | 'generals' | 'crewTypes' | 'armTypes' | 'nationTypes' | 'colors' | 'items';
|
||||
tupleLabels?: string[];
|
||||
};
|
||||
type CommandAvailability = {
|
||||
key: string;
|
||||
name: string;
|
||||
reqArg: boolean;
|
||||
status: 'available' | 'blocked' | 'needsInput' | 'unknown';
|
||||
possible: boolean;
|
||||
reason?: string;
|
||||
inputFields: CommandInputField[];
|
||||
};
|
||||
type CommandTable = {
|
||||
general: Array<{ category: string; values: CommandAvailability[] }>;
|
||||
nation: Array<{ category: string; values: CommandAvailability[] }>;
|
||||
inputOptions: {
|
||||
cities: CommandOption[];
|
||||
nations: CommandOption[];
|
||||
generals: CommandOption[];
|
||||
crewTypes: CommandOption[];
|
||||
armTypes: CommandOption[];
|
||||
nationTypes: CommandOption[];
|
||||
colors: CommandOption[];
|
||||
items: Record<string, CommandOption[]>;
|
||||
};
|
||||
};
|
||||
type TurnRow = { index: number; time: string; action: string; isRest: boolean };
|
||||
|
||||
const props = defineProps<{
|
||||
officerLevelText: string;
|
||||
name: string | null;
|
||||
npcState: number | null;
|
||||
rows: TurnRow[];
|
||||
commandTable: CommandTable | null;
|
||||
loading: boolean;
|
||||
mobile?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'reserve', payload: { index: number; action: string; args: Record<string, unknown> }): void;
|
||||
(event: 'shift', amount: number): void;
|
||||
(event: 'repeat', amount: number): void;
|
||||
}>();
|
||||
|
||||
const pickerTurnIndex = ref<number | null>(null);
|
||||
const selectedCommand = ref<CommandAvailability | null>(null);
|
||||
const commandArgs = ref<Record<string, unknown>>({});
|
||||
const commandArgsValid = ref(false);
|
||||
const editMode = ref(false);
|
||||
const repeatAmount = ref(0);
|
||||
|
||||
const nationCategoryOrder = ['휴식', '인사', '외교', '특수', '전략', '국가'];
|
||||
const nationOnlyTable = computed(() => {
|
||||
if (!props.commandTable) return null;
|
||||
const groupByCategory = new Map(props.commandTable.nation.map((group) => [group.category, group]));
|
||||
const orderedGroups = nationCategoryOrder.map(
|
||||
(category) => groupByCategory.get(category) ?? { category, values: [] }
|
||||
);
|
||||
const extraGroups = props.commandTable.nation.filter((group) => !nationCategoryOrder.includes(group.category));
|
||||
return { ...props.commandTable, general: [], nation: [...orderedGroups, ...extraGroups] };
|
||||
});
|
||||
const nameColor = computed(() => (props.npcState !== null ? getNpcColor(props.npcState) : undefined));
|
||||
|
||||
const closePicker = () => {
|
||||
pickerTurnIndex.value = null;
|
||||
selectedCommand.value = null;
|
||||
commandArgs.value = {};
|
||||
commandArgsValid.value = false;
|
||||
};
|
||||
|
||||
const openPicker = (turnIndex: number) => {
|
||||
pickerTurnIndex.value = turnIndex;
|
||||
selectedCommand.value = null;
|
||||
commandArgs.value = {};
|
||||
commandArgsValid.value = false;
|
||||
};
|
||||
|
||||
const selectCommand = (commandKey: string) => {
|
||||
const command =
|
||||
props.commandTable?.nation.flatMap((group) => group.values).find((entry) => entry.key === commandKey) ?? null;
|
||||
if (!command || pickerTurnIndex.value === null) return;
|
||||
selectedCommand.value = command;
|
||||
commandArgs.value = {};
|
||||
commandArgsValid.value = !command.reqArg;
|
||||
if (!command.reqArg) reserveSelected();
|
||||
};
|
||||
|
||||
const reserveSelected = () => {
|
||||
if (pickerTurnIndex.value === null || !selectedCommand.value || !commandArgsValid.value) return;
|
||||
emit('reserve', {
|
||||
index: pickerTurnIndex.value,
|
||||
action: selectedCommand.value.key,
|
||||
args: commandArgs.value,
|
||||
});
|
||||
closePicker();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="chief-editor" :class="{ mobile: props.mobile }" data-testid="chief-command-editor">
|
||||
<header v-if="!props.mobile" class="editor-header legacy-bg1">
|
||||
<span>{{ props.officerLevelText }} :</span>
|
||||
<strong :style="{ color: nameColor }">{{ props.name ?? '-' }}</strong>
|
||||
</header>
|
||||
|
||||
<div class="editor-body">
|
||||
<aside class="editor-controls">
|
||||
<div v-if="props.mobile" class="mobile-identity legacy-bg1">
|
||||
<strong :style="{ color: nameColor }">{{ props.name ?? '-' }}</strong>
|
||||
<span>{{ props.officerLevelText }}</span>
|
||||
</div>
|
||||
<time>{{ props.rows[0]?.time ?? '--:--' }}</time>
|
||||
<button type="button" @click="editMode = !editMode">{{ editMode ? '일반 모드' : '고급 모드' }}</button>
|
||||
<select
|
||||
v-model.number="repeatAmount"
|
||||
class="repeat-control"
|
||||
aria-label="반복 턴 수"
|
||||
@change="repeatAmount > 0 && emit('repeat', repeatAmount)"
|
||||
>
|
||||
<option :value="0" disabled>반복⌄</option>
|
||||
<option v-for="amount in 6" :key="amount" :value="amount">{{ amount }}턴</option>
|
||||
</select>
|
||||
<button type="button" @click="emit('shift', -1)">당기기⌄</button>
|
||||
<button type="button" @click="emit('shift', 1)">미루기⌄</button>
|
||||
</aside>
|
||||
|
||||
<div class="editor-turns">
|
||||
<div v-for="row in props.rows" :key="row.index" class="editor-turn-row">
|
||||
<time>{{ row.time }}</time>
|
||||
<strong>{{ row.action }}</strong>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-turn"
|
||||
:aria-label="`${row.index + 1}턴 명령 입력`"
|
||||
@click="openPicker(row.index)"
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="pickerTurnIndex !== null"
|
||||
:class="['command-picker', { 'has-command': selectedCommand }]"
|
||||
data-testid="chief-command-picker"
|
||||
>
|
||||
<header>
|
||||
<strong>{{ pickerTurnIndex + 1 }}턴 명령 입력</strong>
|
||||
<button type="button" aria-label="명령 입력 닫기" @click="closePicker">×</button>
|
||||
</header>
|
||||
<CommandSelectForm
|
||||
v-if="!selectedCommand"
|
||||
:command-table="nationOnlyTable"
|
||||
:loading="props.loading"
|
||||
scope="nation"
|
||||
@select="selectCommand"
|
||||
/>
|
||||
<button v-if="!selectedCommand" type="button" class="picker-close" @click="closePicker">닫기</button>
|
||||
<template v-else>
|
||||
<div class="selected-command">{{ selectedCommand.name }}</div>
|
||||
<CommandArgumentForm
|
||||
v-if="selectedCommand.reqArg && props.commandTable"
|
||||
:command-key="selectedCommand.key"
|
||||
:fields="selectedCommand.inputFields"
|
||||
:options="props.commandTable.inputOptions"
|
||||
@update:args="commandArgs = $event"
|
||||
@update:valid="commandArgsValid = $event"
|
||||
/>
|
||||
<div class="picker-actions">
|
||||
<button type="button" @click="selectedCommand = null">명령 다시 선택</button>
|
||||
<button type="button" :disabled="!commandArgsValid" @click="reserveSelected">입력</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chief-editor {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
}
|
||||
.editor-header {
|
||||
box-sizing: border-box;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
font-size: 16.8px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.editor-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.editor-controls {
|
||||
order: 2;
|
||||
min-height: 85px;
|
||||
padding: 2px 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 3px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.editor-controls > time {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 4px;
|
||||
background: #345c85;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.editor-controls button,
|
||||
.repeat-control {
|
||||
min-height: 36px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: #444;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
}
|
||||
.editor-controls button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.repeat-control {
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.editor-turns {
|
||||
order: 1;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(12, 30px);
|
||||
}
|
||||
.editor-turn-row {
|
||||
display: grid;
|
||||
grid-template-columns: 55px minmax(0, 1fr) 36px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
.editor-turn-row > time {
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #000;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.editor-turn-row > strong {
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
background: #0d204d;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.editor-turn-row:nth-child(odd) > strong {
|
||||
background: #12295d;
|
||||
}
|
||||
.edit-turn {
|
||||
align-self: stretch;
|
||||
border: 0;
|
||||
background: #444;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.command-picker {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: 54px;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 344px;
|
||||
overflow: auto;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: #303030;
|
||||
}
|
||||
.command-picker > header {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
}
|
||||
.command-picker.has-command {
|
||||
padding: 8px;
|
||||
}
|
||||
.command-picker.has-command > header {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
clip: auto;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.command-picker.has-command > header button {
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
}
|
||||
.command-picker :deep(.command-form) {
|
||||
gap: 4px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.command-picker :deep(.category-list) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 4px 2px;
|
||||
}
|
||||
.command-picker :deep(.category-btn) {
|
||||
min-width: 0;
|
||||
height: 35px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
background: #00a879;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.command-picker :deep(.category-btn.active) {
|
||||
background: #00bf91;
|
||||
}
|
||||
.command-picker :deep(.command-grid) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.command-picker :deep(.command-item) {
|
||||
min-height: 39px;
|
||||
border: 1px solid #888;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
.command-picker :deep(.command-status) {
|
||||
display: none;
|
||||
}
|
||||
.picker-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 7px;
|
||||
width: 65px;
|
||||
height: 35px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: #444;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
}
|
||||
.selected-command {
|
||||
margin-bottom: 6px;
|
||||
padding: 6px 8px;
|
||||
background: #0d204d;
|
||||
font-weight: 700;
|
||||
}
|
||||
.picker-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.picker-actions button {
|
||||
min-height: 34px;
|
||||
}
|
||||
.mobile-identity {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
min-height: 60px;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.chief-editor.mobile .editor-header {
|
||||
display: none;
|
||||
}
|
||||
.chief-editor.mobile {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.chief-editor.mobile .editor-body {
|
||||
height: 360px;
|
||||
display: grid;
|
||||
grid-template-columns: 109px 391px;
|
||||
}
|
||||
.chief-editor.mobile .editor-controls {
|
||||
order: initial;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
grid-template-columns: 1fr;
|
||||
align-content: start;
|
||||
}
|
||||
.chief-editor.mobile .editor-controls > time {
|
||||
min-height: 36px;
|
||||
}
|
||||
.chief-editor.mobile .editor-controls > button {
|
||||
min-height: 36px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.chief-editor.mobile .repeat-control {
|
||||
min-height: 36px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.chief-editor.mobile .editor-turns {
|
||||
order: initial;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.chief-editor.mobile .editor-turn-row {
|
||||
grid-template-columns: 74px minmax(0, 1fr) 53px;
|
||||
}
|
||||
.chief-editor.mobile .command-picker {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 130px;
|
||||
width: 370px;
|
||||
height: 327px;
|
||||
}
|
||||
</style>
|
||||
@@ -18,6 +18,7 @@ const props = defineProps<{
|
||||
compact?: boolean;
|
||||
isMe?: boolean;
|
||||
clickable?: boolean;
|
||||
turnTimeLabel?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -40,13 +41,26 @@ const handleClick = () => {
|
||||
@click="handleClick"
|
||||
>
|
||||
<header class="chief-header">
|
||||
<div class="chief-title">
|
||||
<span class="chief-level">{{ props.officerLevelText }}</span>
|
||||
<span class="chief-name" :style="{ color: nameColor }">
|
||||
{{ props.name ?? '-' }}
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="props.isMe" class="chief-me">ME</span>
|
||||
<template v-if="props.compact">
|
||||
<span
|
||||
class="compact-name"
|
||||
:style="{ color: nameColor, textDecoration: props.isMe ? 'underline' : undefined }"
|
||||
>{{ props.name ?? '-' }}</span
|
||||
>
|
||||
<span class="compact-meta"
|
||||
><span>{{ props.officerLevelText }}</span
|
||||
><time>{{ props.turnTimeLabel ?? '--:--' }}</time></span
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="chief-title">
|
||||
<span class="chief-level">{{ props.officerLevelText }}</span>
|
||||
<span class="chief-name" :style="{ color: nameColor }">
|
||||
{{ props.name ?? '-' }}
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="props.isMe" class="chief-me">ME</span>
|
||||
</template>
|
||||
</header>
|
||||
<div class="chief-rows">
|
||||
<div v-for="row in props.rows" :key="row.index" class="chief-row" :class="{ rest: row.isRest }">
|
||||
@@ -72,7 +86,9 @@ const handleClick = () => {
|
||||
|
||||
.chief-card.clickable {
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.chief-card.clickable:hover {
|
||||
@@ -163,6 +179,28 @@ const handleClick = () => {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.compact-name,
|
||||
.compact-meta {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.compact-meta {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.chief-card.compact .chief-header {
|
||||
height: 72px;
|
||||
grid-template-rows: 36px 36px;
|
||||
display: grid;
|
||||
padding: 0;
|
||||
}
|
||||
.chief-card.compact .chief-row {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
.chief-card.compact .chief-level,
|
||||
.chief-card.compact .chief-name {
|
||||
font-size: 0.6rem;
|
||||
|
||||
@@ -25,6 +25,7 @@ const props = defineProps<{
|
||||
commandTable: CommandTable | null;
|
||||
loading: boolean;
|
||||
activeCategory?: string;
|
||||
scope?: 'all' | 'general' | 'nation';
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -48,6 +49,10 @@ const categories = computed(() => {
|
||||
category: group.category,
|
||||
groupType: 'nation' as const,
|
||||
}));
|
||||
if (props.scope === 'general') return general;
|
||||
if (props.scope === 'nation') {
|
||||
return nation.map((entry) => ({ ...entry, label: entry.category === '국가' ? '기타' : entry.category }));
|
||||
}
|
||||
return [...general, ...nation];
|
||||
});
|
||||
|
||||
@@ -58,7 +63,10 @@ const selectedGroup = computed(() => {
|
||||
}
|
||||
const [scope, ...categoryParts] = selectedCategory.value.split(':');
|
||||
const category = categoryParts.join(':');
|
||||
return props.commandTable[scope === 'nation' ? 'nation' : 'general'].find((group) => group.category === category) ?? null;
|
||||
return (
|
||||
props.commandTable[scope === 'nation' ? 'nation' : 'general'].find((group) => group.category === category) ??
|
||||
null
|
||||
);
|
||||
});
|
||||
|
||||
watch(
|
||||
@@ -109,9 +117,7 @@ const statusLabel = (command: CommandAvailability) => {
|
||||
<div v-if="props.loading">
|
||||
<SkeletonLines :lines="4" />
|
||||
</div>
|
||||
<div v-else-if="!props.commandTable" class="empty">
|
||||
명령 목록을 불러오지 못했습니다.
|
||||
</div>
|
||||
<div v-else-if="!props.commandTable" class="empty">명령 목록을 불러오지 못했습니다.</div>
|
||||
<div v-else>
|
||||
<div class="category-list">
|
||||
<button
|
||||
|
||||
@@ -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),
|
||||
};
|
||||
};
|
||||
@@ -4,6 +4,7 @@ import { useMediaQuery } from '@vueuse/core';
|
||||
import { addMinutes, format } from 'date-fns';
|
||||
import SkeletonLines from '../components/ui/SkeletonLines.vue';
|
||||
import ChiefTurnCard from '../components/chief/ChiefTurnCard.vue';
|
||||
import ChiefCommandEditor from '../components/chief/ChiefCommandEditor.vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
import { formatOfficerLevelText } from '../utils/nationFormat';
|
||||
|
||||
@@ -260,7 +261,7 @@ const selectedChiefRows = computed(() => {
|
||||
return buildTurnRows(selectedChief.value);
|
||||
});
|
||||
|
||||
const updateMyTurns = (turns: ChiefEntry['turns'], revision: number) => {
|
||||
const updateMyTurns = (turns: Array<{ index: number; action: string; args?: unknown }>, revision: number) => {
|
||||
if (!data.value) {
|
||||
return;
|
||||
}
|
||||
@@ -269,29 +270,10 @@ const updateMyTurns = (turns: ChiefEntry['turns'], revision: number) => {
|
||||
if (!entry) {
|
||||
return;
|
||||
}
|
||||
entry.turns = turns;
|
||||
entry.turns = turns.map((turn) => ({ ...turn, args: turn.args ?? {} }));
|
||||
entry.revision = revision;
|
||||
};
|
||||
|
||||
const clearTurn = async (turnIndex: number) => {
|
||||
if (!data.value || !isEditingAllowed.value) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const result = await trpc.turns.reserved.setNation.mutate({
|
||||
generalId: data.value.me.id,
|
||||
turnIndex,
|
||||
action: '휴식',
|
||||
args: {},
|
||||
expectedRevision: selectedChief.value?.revision ?? 0,
|
||||
});
|
||||
updateMyTurns(result.turns, result.revision);
|
||||
} catch (err) {
|
||||
await loadChiefCenter();
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const shiftTurns = async (amount: number) => {
|
||||
if (!data.value || !isEditingAllowed.value) {
|
||||
return;
|
||||
@@ -308,6 +290,38 @@ const shiftTurns = async (amount: number) => {
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const reserveTurn = async (payload: { index: number; action: string; args: Record<string, unknown> }) => {
|
||||
if (!data.value || !isEditingAllowed.value) return;
|
||||
try {
|
||||
const result = await trpc.turns.reserved.setNation.mutate({
|
||||
generalId: data.value.me.id,
|
||||
turnIndex: payload.index,
|
||||
action: payload.action,
|
||||
args: payload.args,
|
||||
expectedRevision: selectedChief.value?.revision ?? 0,
|
||||
});
|
||||
updateMyTurns(result.turns, result.revision);
|
||||
} catch (err) {
|
||||
await loadChiefCenter();
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const repeatTurns = async (amount: number) => {
|
||||
if (!data.value || !isEditingAllowed.value) return;
|
||||
try {
|
||||
const result = await trpc.turns.reserved.repeatNation.mutate({
|
||||
generalId: data.value.me.id,
|
||||
amount,
|
||||
expectedRevision: selectedChief.value?.revision ?? 0,
|
||||
});
|
||||
updateMyTurns(result.turns, result.revision);
|
||||
} catch (err) {
|
||||
await loadChiefCenter();
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -316,7 +330,8 @@ const shiftTurns = async (amount: number) => {
|
||||
<RouterLink class="chief-nav" to="/">돌아가기</RouterLink>
|
||||
<button class="chief-nav" @click="loadChiefCenter">갱신</button>
|
||||
<h1>사령부</h1>
|
||||
<div></div><div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</header>
|
||||
|
||||
<div v-if="error" class="game-feedback game-feedback--error" role="alert">{{ error }}</div>
|
||||
@@ -324,47 +339,80 @@ const shiftTurns = async (amount: number) => {
|
||||
<section v-if="loading && !data" class="loading-panel"><SkeletonLines :lines="5" /></section>
|
||||
|
||||
<section v-else-if="data && isMobile" class="layout-mobile">
|
||||
<div class="mobile-editor">
|
||||
<aside class="mobile-controls legacy-bg1">
|
||||
<strong>{{ selectedChief?.name ?? '-' }}</strong>
|
||||
<span>{{ selectedChief ? formatOfficerLevelText(selectedChief.officerLevel, data.nation.level) : '-' }}</span>
|
||||
<time>{{ selectedChiefRows[0]?.time ?? '--:--' }}</time>
|
||||
<button>고급 모드</button><button>반복⌄</button>
|
||||
<button @click="shiftTurns(-1)">당기기⌄</button><button @click="shiftTurns(1)">미루기⌄</button>
|
||||
</aside>
|
||||
<div class="mobile-turns">
|
||||
<div v-for="row in selectedChiefRows" :key="row.index" class="mobile-turn-row">
|
||||
<time>{{ row.time }}</time><strong>{{ row.action }}</strong>
|
||||
<button :disabled="!isEditingAllowed" @click="clearTurn(row.index)">✎</button>
|
||||
</div>
|
||||
</div>
|
||||
<ChiefCommandEditor
|
||||
v-if="isEditingAllowed && selectedChief"
|
||||
:officer-level-text="formatOfficerLevelText(selectedChief.officerLevel, data.nation.level)"
|
||||
:name="selectedChief.name"
|
||||
:npc-state="selectedChief.npcState"
|
||||
:rows="selectedChiefRows"
|
||||
:command-table="commandTable"
|
||||
:loading="commandLoading"
|
||||
:mobile="true"
|
||||
@reserve="reserveTurn"
|
||||
@shift="shiftTurns"
|
||||
@repeat="repeatTurns"
|
||||
/>
|
||||
<div v-else-if="selectedChief" class="mobile-readonly">
|
||||
<ChiefTurnCard
|
||||
:officer-level-text="formatOfficerLevelText(selectedChief.officerLevel, data.nation.level)"
|
||||
:name="selectedChief.name"
|
||||
:npc-state="selectedChief.npcState"
|
||||
:rows="selectedChiefRows"
|
||||
/>
|
||||
</div>
|
||||
<div class="chief-overview">
|
||||
<ChiefTurnCard v-for="chief in chiefViews" :key="chief.officerLevel"
|
||||
:officer-level-text="chief.officerLevelText" :name="chief.name" :npc-state="chief.npcState"
|
||||
:rows="chief.rows" :compact="true" :selected="chief.officerLevel === selectedChief?.officerLevel"
|
||||
:is-me="chief.officerLevel === data.me.officerLevel" :clickable="true"
|
||||
@select="selectedChiefLevel = chief.officerLevel" />
|
||||
<div class="chief-overview-frame">
|
||||
<div class="chief-overview">
|
||||
<ChiefTurnCard
|
||||
v-for="chief in chiefViews"
|
||||
:key="chief.officerLevel"
|
||||
:officer-level-text="chief.officerLevelText"
|
||||
:name="chief.name"
|
||||
:npc-state="chief.npcState"
|
||||
:rows="chief.rows"
|
||||
:compact="true"
|
||||
:selected="chief.officerLevel === selectedChief?.officerLevel"
|
||||
:is-me="chief.officerLevel === data.me.officerLevel"
|
||||
:clickable="true"
|
||||
:turn-time-label="chief.rows[0]?.time"
|
||||
@select="selectedChiefLevel = chief.officerLevel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-else-if="data" class="layout-desktop">
|
||||
<div class="chief-grid">
|
||||
<ChiefTurnCard
|
||||
v-for="chief in chiefViews"
|
||||
:key="chief.officerLevel"
|
||||
:officer-level-text="chief.officerLevelText"
|
||||
:name="chief.name"
|
||||
:npc-state="chief.npcState"
|
||||
:rows="chief.rows"
|
||||
:selected="chief.officerLevel === selectedChief?.officerLevel"
|
||||
:is-me="chief.officerLevel === data.me.officerLevel"
|
||||
:clickable="true"
|
||||
@select="selectedChiefLevel = chief.officerLevel"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isEditingAllowed" class="desktop-actions legacy-bg0">
|
||||
<button @click="shiftTurns(-1)">당기기</button><button @click="shiftTurns(1)">미루기</button>
|
||||
<div
|
||||
v-for="(rowChiefs, rowIndex) in [chiefViews.slice(0, 4), chiefViews.slice(4, 8)]"
|
||||
:key="rowIndex"
|
||||
class="chief-grid-row"
|
||||
>
|
||||
<div class="turn-index-gutter legacy-bg0">
|
||||
<span></span><span v-for="idx in data.maxTurns" :key="idx">{{ idx }}</span>
|
||||
</div>
|
||||
<template v-for="chief in rowChiefs" :key="chief.officerLevel">
|
||||
<ChiefCommandEditor
|
||||
v-if="chief.officerLevel === data.me.officerLevel && data.me.officerLevel >= 5"
|
||||
:officer-level-text="chief.officerLevelText"
|
||||
:name="chief.name"
|
||||
:npc-state="chief.npcState"
|
||||
:rows="chief.rows"
|
||||
:command-table="commandTable"
|
||||
:loading="commandLoading"
|
||||
@reserve="reserveTurn"
|
||||
@shift="shiftTurns"
|
||||
@repeat="repeatTurns"
|
||||
/>
|
||||
<ChiefTurnCard
|
||||
v-else
|
||||
:officer-level-text="chief.officerLevelText"
|
||||
:name="chief.name"
|
||||
:npc-state="chief.npcState"
|
||||
:rows="chief.rows"
|
||||
/>
|
||||
</template>
|
||||
<div class="turn-index-gutter legacy-bg0">
|
||||
<span></span><span v-for="idx in data.maxTurns" :key="idx">{{ idx }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="chief-footer legacy-bg0"><RouterLink class="chief-nav" to="/">돌아가기</RouterLink></footer>
|
||||
@@ -580,66 +628,165 @@ const shiftTurns = async (amount: number) => {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.layout-desktop { display: block; }
|
||||
.chief-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
.layout-desktop {
|
||||
display: block;
|
||||
}
|
||||
.chief-grid :deep(.chief-header) { height: 24px; min-height: 24px; }
|
||||
.chief-grid :deep(.chief-row) { box-sizing: border-box; min-height: 30px; }
|
||||
.chief-grid :deep(.chief-card) { border-color: transparent; box-shadow: none; }
|
||||
.desktop-actions { padding: 2px 24px; }
|
||||
.desktop-actions button,
|
||||
.mobile-controls button {
|
||||
min-height: 35px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: #444;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
.chief-footer {
|
||||
min-height: 56px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.chief-footer { min-height: 56px; padding-top: 20px; }
|
||||
.chief-footer .chief-nav { width: 70px; }
|
||||
.mobile-editor {
|
||||
height: 371px;
|
||||
display: grid;
|
||||
grid-template-columns: 109px 1fr;
|
||||
background: #000;
|
||||
.chief-footer .chief-nav {
|
||||
width: 70px;
|
||||
}
|
||||
.mobile-controls {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-content: start;
|
||||
text-align: center;
|
||||
}
|
||||
.mobile-controls strong,
|
||||
.mobile-controls span,
|
||||
.mobile-controls time { grid-column: 1 / -1; min-height: 30px; line-height: 30px; }
|
||||
.mobile-controls time { border-radius: 5px; background: #345c85; }
|
||||
.mobile-controls button { grid-column: 1 / -1; margin-top: 5px; }
|
||||
.mobile-turns { display: grid; grid-template-rows: repeat(12, 30px); padding-top: 10px; }
|
||||
.mobile-turn-row {
|
||||
display: grid;
|
||||
grid-template-columns: 74px 1fr 53px;
|
||||
align-items: center;
|
||||
background: #071638;
|
||||
text-align: center;
|
||||
}
|
||||
.mobile-turn-row:nth-child(even) { background: #0d214e; }
|
||||
.mobile-turn-row button { height: 30px; border: 0; background: #3d3d3d; color: #fff; }
|
||||
.chief-overview {
|
||||
width: 445px;
|
||||
margin-top: 56px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 111.25px);
|
||||
}
|
||||
.chief-overview :deep(.chief-card) { border-color: transparent; box-shadow: none; }
|
||||
.chief-overview :deep(.chief-row) { height: 12px; line-height: 10px; }
|
||||
.chief-overview :deep(.chief-header) { height: 28px; }
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chief-page { width: 500px; min-width: 500px; }
|
||||
.chief-top { grid-template-columns: 89px 89px 1fr 0 0; }
|
||||
.chief-overview { grid-template-columns: repeat(4, 111.25px); }
|
||||
.chief-page {
|
||||
width: 500px;
|
||||
min-width: 500px;
|
||||
}
|
||||
.chief-top {
|
||||
grid-template-columns: 89px 89px 1fr 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ref PageChiefCenter의 24 + 4×238 + 24 행렬과 500px 축소 overview 계약입니다. */
|
||||
.layout-desktop {
|
||||
display: block;
|
||||
}
|
||||
.chief-grid-row {
|
||||
display: grid;
|
||||
grid-template-columns: 24px repeat(4, 238px) 24px;
|
||||
align-items: start;
|
||||
}
|
||||
.turn-index-gutter {
|
||||
display: grid;
|
||||
grid-template-rows: 24px repeat(12, 30px);
|
||||
text-align: center;
|
||||
}
|
||||
.turn-index-gutter span {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.chief-grid-row :deep(.chief-card) {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.chief-grid-row :deep(.chief-header) {
|
||||
box-sizing: border-box;
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
.chief-grid-row :deep(.chief-title) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.chief-grid-row :deep(.chief-level),
|
||||
.chief-grid-row :deep(.chief-name) {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: inherit;
|
||||
}
|
||||
.chief-grid-row :deep(.chief-level)::after {
|
||||
content: ':';
|
||||
}
|
||||
.chief-grid-row :deep(.chief-row) {
|
||||
box-sizing: border-box;
|
||||
min-height: 30px;
|
||||
height: 30px;
|
||||
grid-template-columns: 55px minmax(0, 1fr);
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.chief-grid-row :deep(.row-index) {
|
||||
display: none;
|
||||
}
|
||||
.chief-grid-row :deep(.row-time),
|
||||
.chief-grid-row :deep(.row-action) {
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.chief-grid-row :deep(.row-time) {
|
||||
background: #000;
|
||||
}
|
||||
.chief-grid-row :deep(.chief-row:nth-child(odd) .row-action) {
|
||||
background-color: rgba(18, 41, 93, 0.88);
|
||||
}
|
||||
.chief-grid-row :deep(.chief-row:nth-child(even) .row-action) {
|
||||
background-color: rgba(7, 22, 56, 0.88);
|
||||
}
|
||||
|
||||
.layout-mobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
.chief-overview-frame {
|
||||
width: 500px;
|
||||
height: 320px;
|
||||
margin-top: 56px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chief-overview {
|
||||
width: 890px;
|
||||
height: 1248px;
|
||||
margin-top: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 222.5px);
|
||||
transform: scale(0.5);
|
||||
transform-origin: left top;
|
||||
}
|
||||
.chief-overview :deep(.chief-card) {
|
||||
width: 222.5px;
|
||||
height: 624px;
|
||||
border: 0;
|
||||
border-left: 1px solid #fff;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.chief-overview :deep(.row-index) {
|
||||
display: none;
|
||||
}
|
||||
.chief-overview :deep(.chief-row) {
|
||||
grid-template-columns: 74px minmax(0, 1fr);
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
.chief-overview :deep(.row-time),
|
||||
.chief-overview :deep(.row-action) {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.mobile-readonly {
|
||||
width: 308px;
|
||||
min-height: 394px;
|
||||
margin: 10px auto 16px;
|
||||
}
|
||||
.mobile-readonly :deep(.chief-header) {
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
.mobile-readonly :deep(.chief-row) {
|
||||
height: 30px;
|
||||
grid-template-columns: 55px 1fr;
|
||||
padding: 0;
|
||||
}
|
||||
.mobile-readonly :deep(.row-index) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chief-overview {
|
||||
grid-template-columns: repeat(4, 222.5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
@@ -4,7 +4,12 @@ import path from 'node:path';
|
||||
import { createHash, randomBytes, randomUUID } from 'node:crypto';
|
||||
|
||||
import { type ScenarioInstallOptions } from '@sammo-ts/game-engine';
|
||||
import { createGamePostgresConnector, resolvePostgresConfigFromEnv } from '@sammo-ts/infra';
|
||||
import {
|
||||
createGamePostgresConnector,
|
||||
createRedisConnector,
|
||||
resolvePostgresConfigFromEnv,
|
||||
resolveRedisConfigFromEnv,
|
||||
} from '@sammo-ts/infra';
|
||||
import { isRecord } from '@sammo-ts/common';
|
||||
|
||||
import type { BuildCommand, BuildRunner } from './buildRunner.js';
|
||||
@@ -41,6 +46,7 @@ export interface GatewayOrchestratorOptions {
|
||||
profileReadinessTimeoutMs?: number;
|
||||
now?: () => Date;
|
||||
fetchImpl?: typeof fetch;
|
||||
clearTournamentRuntimeState?: (profileName: string) => Promise<void>;
|
||||
}
|
||||
|
||||
export interface ProfileRuntimeState {
|
||||
@@ -150,6 +156,18 @@ class OperationLeaseLostError extends Error {}
|
||||
|
||||
const normalizeMeta = (value: unknown): Record<string, unknown> => (isRecord(value) ? value : {});
|
||||
|
||||
export const buildTournamentRuntimeKeys = (profileName: string): string[] => [
|
||||
`sammo:${profileName}:tournament:state`,
|
||||
`sammo:${profileName}:tournament:participants`,
|
||||
`sammo:${profileName}:tournament:matches`,
|
||||
`sammo:${profileName}:tournament:betting`,
|
||||
];
|
||||
|
||||
export const clearTournamentRuntimeKeys = async (
|
||||
redis: { del(keys: string[]): Promise<number> },
|
||||
profileName: string
|
||||
): Promise<number> => redis.del(buildTournamentRuntimeKeys(profileName));
|
||||
|
||||
const buildServerId = (profileName: string, now: Date, installOperationId?: string): string => {
|
||||
const year = String(now.getFullYear()).slice(-2);
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
@@ -545,6 +563,7 @@ export class GatewayOrchestrator implements GatewayOrchestratorHandle {
|
||||
private readonly profileReadinessTimeoutMs: number;
|
||||
private readonly now: () => Date;
|
||||
private readonly fetchImpl: typeof fetch;
|
||||
private readonly clearTournamentRuntimeState: (profileName: string) => Promise<void>;
|
||||
private reconcileTimer?: NodeJS.Timeout;
|
||||
private scheduleTimer?: NodeJS.Timeout;
|
||||
private buildTimer?: NodeJS.Timeout;
|
||||
@@ -573,6 +592,9 @@ export class GatewayOrchestrator implements GatewayOrchestratorHandle {
|
||||
this.profileReadinessTimeoutMs = options.profileReadinessTimeoutMs ?? 30_000;
|
||||
this.now = options.now ?? (() => new Date());
|
||||
this.fetchImpl = options.fetchImpl ?? fetch;
|
||||
this.clearTournamentRuntimeState =
|
||||
options.clearTournamentRuntimeState ??
|
||||
((profileName) => this.clearTournamentRuntimeStateFromRedis(profileName));
|
||||
}
|
||||
|
||||
start(): void {
|
||||
@@ -1383,6 +1405,8 @@ export class GatewayOrchestrator implements GatewayOrchestratorHandle {
|
||||
if (!seedResult.ok) {
|
||||
throw new Error(`Selected profile seed failed: ${seedResult.output.slice(-4000)}`);
|
||||
}
|
||||
await this.clearTournamentRuntimeState(profile.profileName);
|
||||
await assertLease?.();
|
||||
const completedAt = this.now().toISOString();
|
||||
const now = this.now();
|
||||
const shouldPreopen = openAt ? openAt.getTime() > now.getTime() : false;
|
||||
@@ -1590,6 +1614,18 @@ export class GatewayOrchestrator implements GatewayOrchestratorHandle {
|
||||
}).url;
|
||||
}
|
||||
|
||||
private async clearTournamentRuntimeStateFromRedis(profileName: string): Promise<void> {
|
||||
const connector = createRedisConnector(
|
||||
resolveRedisConfigFromEnv(this.processConfig.baseEnv ?? process.env)
|
||||
);
|
||||
await connector.connect();
|
||||
try {
|
||||
await clearTournamentRuntimeKeys(connector.client, profileName);
|
||||
} finally {
|
||||
await connector.disconnect();
|
||||
}
|
||||
}
|
||||
|
||||
async cleanupStaleWorkspaces(): Promise<{ removed: string[]; skipped: string[] }> {
|
||||
const profiles = await this.repository.listProfiles();
|
||||
const cutoff = this.computeCutoffDate(6);
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import {
|
||||
buildTournamentRuntimeKeys,
|
||||
clearTournamentRuntimeKeys,
|
||||
} from '../src/orchestrator/gatewayOrchestrator.js';
|
||||
|
||||
describe('tournament reset state', () => {
|
||||
it('targets every season-owned tournament key for the selected profile only', () => {
|
||||
expect(buildTournamentRuntimeKeys('che:1010')).toEqual([
|
||||
'sammo:che:1010:tournament:state',
|
||||
'sammo:che:1010:tournament:participants',
|
||||
'sammo:che:1010:tournament:matches',
|
||||
'sammo:che:1010:tournament:betting',
|
||||
]);
|
||||
expect(buildTournamentRuntimeKeys('hwe:915')).not.toContain('sammo:che:1010:tournament:state');
|
||||
});
|
||||
|
||||
it('deletes the tournament state as one profile-scoped reset operation', async () => {
|
||||
const calls: string[][] = [];
|
||||
const deleted = await clearTournamentRuntimeKeys(
|
||||
{
|
||||
del: async (keys) => {
|
||||
calls.push(keys);
|
||||
return keys.length;
|
||||
},
|
||||
},
|
||||
'che:1010'
|
||||
);
|
||||
|
||||
expect(deleted).toBe(4);
|
||||
expect(calls).toEqual([buildTournamentRuntimeKeys('che:1010')]);
|
||||
});
|
||||
});
|
||||
@@ -22,6 +22,39 @@ loads the following layers:
|
||||
4. Scoped SFC styles: page-specific grids, fixed table dimensions, selectors,
|
||||
and state styling. These remain closest to the DOM contract they implement.
|
||||
|
||||
`styles/legacy-controls.css` is the shared control layer between tokens and the
|
||||
two shell layers. It owns only control geometry and state rules that are proven
|
||||
identical in the Ref Bootstrap/Lumen family. A page still owns control width,
|
||||
grid placement, and any visual family that is not Bootstrap/Lumen.
|
||||
|
||||
## Button composition
|
||||
|
||||
Choose the Ref visual family before choosing a semantic color. Buttons from
|
||||
different historical families are not made identical merely because they have
|
||||
the same label.
|
||||
|
||||
| Ref family | Core composition | Use |
|
||||
| ---------------------------- | ------------------------------------------ | -------------------------------------------------------------------------------------- |
|
||||
| Bootstrap/Lumen primary | `.legacy-button.legacy-button--primary` | commit, purchase, submit, or another affirmative mutation |
|
||||
| Bootstrap/Lumen secondary | `.legacy-button.legacy-button--secondary` | reset, cancel, neutral toggle, or load-more |
|
||||
| Bootstrap/Lumen danger | `.legacy-button.legacy-button--danger` | destructive action only when Ref uses `variant="danger"` |
|
||||
| Bootstrap/Lumen info | `.legacy-button.legacy-button--info` | informational or edit action only when Ref uses `variant="info"` |
|
||||
| `btn-sammo-base2` navigation | `.legacy-button.legacy-button--navigation` | page back/close and paired reload controls |
|
||||
| page-specific/native control | feature-namespaced scoped class | only when Ref computed geometry or interaction differs from the Bootstrap/Lumen family |
|
||||
|
||||
The base class supplies accessible link/button normalization and the historical
|
||||
`base1` fallback used by already measured screens. New Bootstrap/Lumen controls
|
||||
must add an explicit semantic modifier; do not infer a mutation role from a
|
||||
label such as `구입` in page CSS. A disabled control keeps its semantic color
|
||||
and uses the shared opacity/cursor state. Hover and active use the Ref Lumen
|
||||
bottom-border movement rather than an unrelated brightness filter.
|
||||
|
||||
Only layout belongs in the SFC: width, grid column, margins required by the
|
||||
page, and breakpoint-specific placement. Color, border, font weight,
|
||||
hover/focus/active, and disabled presentation belong in
|
||||
`legacy-controls.css` when the Ref family is shared. Generic `.btn`, `button`,
|
||||
or `.primary` rules must not be promoted globally.
|
||||
|
||||
## Class naming
|
||||
|
||||
- `.game-shell`, `.game-shell__header`, `.game-shell__actions`: flexible
|
||||
|
||||
@@ -167,6 +167,8 @@ test.describe('inheritance management legacy parity', () => {
|
||||
const container = getComputedStyle(document.querySelector<HTMLElement>('#container')!);
|
||||
const title = getComputedStyle(document.querySelector<HTMLElement>('.section-title')!);
|
||||
const button = getComputedStyle(document.querySelector<HTMLElement>('.buy-button')!);
|
||||
const navigation = getComputedStyle(document.querySelector<HTMLElement>('.top-button')!);
|
||||
const secondary = getComputedStyle(document.querySelector<HTMLElement>('.dual-buttons button')!);
|
||||
return {
|
||||
container: rect('#container'),
|
||||
firstPoint: rect('#inherit_sum'),
|
||||
@@ -175,6 +177,9 @@ test.describe('inheritance management legacy parity', () => {
|
||||
backgroundImage: container.backgroundImage,
|
||||
titleBackgroundImage: title.backgroundImage,
|
||||
buttonBackground: button.backgroundColor,
|
||||
buttonBorderBottomWidth: button.borderBottomWidth,
|
||||
navigationBackground: navigation.backgroundColor,
|
||||
secondaryBackground: secondary.backgroundColor,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -185,14 +190,42 @@ test.describe('inheritance management legacy parity', () => {
|
||||
expect(desktop.fontSize).toBe('14px');
|
||||
expect(desktop.backgroundImage).toContain('back_walnut.jpg');
|
||||
expect(desktop.titleBackgroundImage).toContain('back_green.jpg');
|
||||
expect(desktop.buttonBackground).toBe('rgb(55, 90, 127)');
|
||||
expect(desktop.buttonBorderBottomWidth).toBe('4px');
|
||||
expect(desktop.navigationBackground).toBe('rgb(0, 88, 44)');
|
||||
expect(desktop.secondaryBackground).toBe('rgb(68, 68, 68)');
|
||||
|
||||
const buyButton = page.locator('.buy-button').first();
|
||||
const beforeHover = await buyButton.evaluate((element) => getComputedStyle(element).backgroundColor);
|
||||
const beforeHover = await buyButton.evaluate((element) => {
|
||||
const style = getComputedStyle(element);
|
||||
return { background: style.backgroundColor, borderBottomWidth: style.borderBottomWidth };
|
||||
});
|
||||
await buyButton.hover();
|
||||
const afterHover = await buyButton.evaluate((element) => getComputedStyle(element).backgroundColor);
|
||||
expect(afterHover).not.toBe(beforeHover);
|
||||
const afterHover = await buyButton.evaluate((element) => {
|
||||
const style = getComputedStyle(element);
|
||||
return { background: style.backgroundColor, borderBottomWidth: style.borderBottomWidth };
|
||||
});
|
||||
expect(afterHover.background).toBe(beforeHover.background);
|
||||
expect(afterHover.borderBottomWidth).toBe('3px');
|
||||
|
||||
await buyButton.hover({ position: { x: 70, y: 20 } });
|
||||
await page.mouse.down();
|
||||
await expect
|
||||
.poll(() => buyButton.evaluate((element) => getComputedStyle(element).borderBottomWidth))
|
||||
.toBe('2px');
|
||||
await page.mouse.up();
|
||||
|
||||
await buyButton.focus();
|
||||
await expect(buyButton).toBeFocused();
|
||||
await page.keyboard.press('Tab');
|
||||
await page.keyboard.press('Shift+Tab');
|
||||
await expect(buyButton).toBeFocused();
|
||||
await expect.poll(() => buyButton.evaluate((element) => getComputedStyle(element).outlineStyle)).toBe('solid');
|
||||
|
||||
await buyButton.evaluate((element) => element.setAttribute('disabled', ''));
|
||||
await expect.poll(() => buyButton.evaluate((element) => getComputedStyle(element).opacity)).toBe('0.65');
|
||||
await buyButton.evaluate((element) => element.removeAttribute('disabled'));
|
||||
await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur());
|
||||
|
||||
if (artifactRoot) {
|
||||
await page.screenshot({ path: resolve(artifactRoot, 'inherit-core-desktop.png'), fullPage: true });
|
||||
@@ -214,6 +247,10 @@ test.describe('inheritance management legacy parity', () => {
|
||||
expect(mobile.containerWidth).toBe(500);
|
||||
expect(mobile.firstWidth).toBeCloseTo(482, 0);
|
||||
expect(mobile.stacked).toBe(true);
|
||||
|
||||
if (artifactRoot) {
|
||||
await page.screenshot({ path: resolve(artifactRoot, 'inherit-core-mobile.png'), fullPage: true });
|
||||
}
|
||||
});
|
||||
|
||||
test('submits a legacy buff purchase and refreshes status and logs', async ({ page }) => {
|
||||
|
||||
@@ -1014,6 +1014,12 @@ test.describe('survey legacy parity', () => {
|
||||
fontSize: getComputedStyle(title).fontSize,
|
||||
backgroundImage: getComputedStyle(title).backgroundImage,
|
||||
},
|
||||
voteButton: {
|
||||
backgroundColor: getComputedStyle(document.querySelector<HTMLElement>('.vote-submit')!)
|
||||
.backgroundColor,
|
||||
borderBottomWidth: getComputedStyle(document.querySelector<HTMLElement>('.vote-submit')!)
|
||||
.borderBottomWidth,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
@@ -1027,6 +1033,10 @@ test.describe('survey legacy parity', () => {
|
||||
expect(geometry.title.height).toBeCloseTo(37.8, 0);
|
||||
expect(geometry.title.fontSize).toBe('25.2px');
|
||||
expect(geometry.title.backgroundImage).toContain('back_blue.jpg');
|
||||
expect(geometry.voteButton).toEqual({
|
||||
backgroundColor: 'rgb(68, 68, 68)',
|
||||
borderBottomWidth: '4px',
|
||||
});
|
||||
|
||||
const secondOption = page.locator('#v-vote-1');
|
||||
await secondOption.check();
|
||||
@@ -1035,9 +1045,9 @@ test.describe('survey legacy parity', () => {
|
||||
await expect(secondOption).toBeFocused();
|
||||
|
||||
const voteButton = page.getByRole('button', { name: '투표', exact: true });
|
||||
const beforeHover = await voteButton.evaluate((element) => getComputedStyle(element).filter);
|
||||
const beforeHover = await voteButton.evaluate((element) => getComputedStyle(element).borderBottomWidth);
|
||||
await voteButton.hover();
|
||||
const afterHover = await voteButton.evaluate((element) => getComputedStyle(element).filter);
|
||||
const afterHover = await voteButton.evaluate((element) => getComputedStyle(element).borderBottomWidth);
|
||||
expect(afterHover).not.toBe(beforeHover);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
|
||||
import { sealGatewayPassword } from '../src/passwordEnvelope.js';
|
||||
|
||||
import type { AppRouter as GatewayAppRouter } from '@sammo-ts/gateway-api';
|
||||
import { createGatewayApiServer } from '@sammo-ts/gateway-api';
|
||||
import { clearTournamentRuntimeKeys, createGatewayApiServer } from '@sammo-ts/gateway-api';
|
||||
import type { AppRouter as GameAppRouter } from '@sammo-ts/game-api';
|
||||
import {
|
||||
buildTournamentKeys,
|
||||
@@ -17,7 +17,7 @@ import {
|
||||
processTournamentTick,
|
||||
TournamentStore,
|
||||
} from '@sammo-ts/game-api';
|
||||
import { createTurnDaemonRuntime } from '@sammo-ts/game-engine';
|
||||
import { createTurnDaemonRuntime, seedScenarioToDatabase } from '@sammo-ts/game-engine';
|
||||
import {
|
||||
createGamePostgresConnector,
|
||||
createGatewayPostgresConnector,
|
||||
@@ -92,7 +92,8 @@ const truncateSchema = async (schema: string): Promise<void> => {
|
||||
await connector.connect();
|
||||
try {
|
||||
const rows = (await connector.prisma.$queryRawUnsafe(
|
||||
`SELECT tablename FROM pg_tables WHERE schemaname = '${schema}'`
|
||||
`SELECT tablename FROM pg_tables
|
||||
WHERE schemaname = '${schema}' AND tablename <> '_prisma_migrations'`
|
||||
)) as Array<{ tablename: string }>;
|
||||
if (rows.length === 0) {
|
||||
return;
|
||||
@@ -168,6 +169,7 @@ describe('actual tournament lifecycle', () => {
|
||||
|
||||
gatewayServer = await createGatewayApiServer();
|
||||
await gatewayServer.app.listen({ host: gatewayServer.config.host, port: gatewayServer.config.port });
|
||||
process.env.GATEWAY_INTERNAL_API_URL = `http://127.0.0.1:${gatewayServer.config.port}`;
|
||||
gameServer = await createGameApiServer();
|
||||
await gameServer.app.listen({ host: gameServer.config.host, port: gameServer.config.port });
|
||||
|
||||
@@ -210,10 +212,23 @@ describe('actual tournament lifecycle', () => {
|
||||
localAccountGeneralCreationGraceDays: 7,
|
||||
},
|
||||
});
|
||||
await gatewayClient.admin.profiles.installNow.mutate({
|
||||
profileName: 'che:908',
|
||||
install: {
|
||||
scenarioId: 908,
|
||||
const staleTournamentRedis = createRedisConnector(resolveRedisConfigFromEnv());
|
||||
await staleTournamentRedis.connect();
|
||||
const staleTournamentKeys = buildTournamentKeys('che:908');
|
||||
try {
|
||||
await staleTournamentRedis.client.mSet({
|
||||
[staleTournamentKeys.stateKey]: JSON.stringify({ stage: 6, auto: true }),
|
||||
[staleTournamentKeys.participantsKey]: '[{"id":99999}]',
|
||||
[staleTournamentKeys.matchesKey]: '[{"id":99999}]',
|
||||
[staleTournamentKeys.bettingKey]: '[{"generalId":99999}]',
|
||||
});
|
||||
} finally {
|
||||
await staleTournamentRedis.disconnect();
|
||||
}
|
||||
await seedScenarioToDatabase({
|
||||
scenarioId: 908,
|
||||
databaseUrl: resolvePostgresConfigFromEnv({ schema: 'che' }).url,
|
||||
installOptions: {
|
||||
turnTermMinutes: 1,
|
||||
sync: false,
|
||||
fiction: 0,
|
||||
@@ -227,6 +242,41 @@ describe('actual tournament lifecycle', () => {
|
||||
},
|
||||
});
|
||||
|
||||
const resetTournamentRedis = createRedisConnector(resolveRedisConfigFromEnv());
|
||||
await resetTournamentRedis.connect();
|
||||
try {
|
||||
await clearTournamentRuntimeKeys(resetTournamentRedis.client, 'che:908');
|
||||
expect(
|
||||
await resetTournamentRedis.client.mGet([
|
||||
staleTournamentKeys.stateKey,
|
||||
staleTournamentKeys.participantsKey,
|
||||
staleTournamentKeys.matchesKey,
|
||||
staleTournamentKeys.bettingKey,
|
||||
])
|
||||
).toEqual([null, null, null, null]);
|
||||
} finally {
|
||||
await resetTournamentRedis.disconnect();
|
||||
}
|
||||
|
||||
const gameDatabaseUrl = resolvePostgresConfigFromEnv({ schema: 'che' }).url;
|
||||
const gatewayDatabaseUrl = resolvePostgresConfigFromEnv({ schema: 'public' }).url;
|
||||
gameConnector = createGamePostgresConnector({ url: gameDatabaseUrl });
|
||||
await gameConnector.connect();
|
||||
redisConnector = createRedisConnector(resolveRedisConfigFromEnv());
|
||||
await redisConnector.connect();
|
||||
store = new TournamentStore(redisConnector.client, buildTournamentKeys('che:908'));
|
||||
transport = new DatabaseTurnDaemonTransport(gameConnector.prisma, 30_000);
|
||||
turnDaemon = await createTurnDaemonRuntime({
|
||||
profile: 'che',
|
||||
profileName: 'che:908',
|
||||
databaseUrl: gameDatabaseUrl,
|
||||
gatewayDatabaseUrl,
|
||||
redisUrl: resolveRedisConfigFromEnv().url,
|
||||
});
|
||||
turnDaemonLoop = turnDaemon.lifecycle.start();
|
||||
const status = await transport.requestStatus(10_000);
|
||||
expect(status).not.toBeNull();
|
||||
|
||||
for (const [username, displayName] of users) {
|
||||
const login = await gatewayClient.auth.login.mutate({
|
||||
username,
|
||||
@@ -255,10 +305,6 @@ describe('actual tournament lifecycle', () => {
|
||||
}
|
||||
}
|
||||
|
||||
const gameDatabaseUrl = resolvePostgresConfigFromEnv({ schema: 'che' }).url;
|
||||
const gatewayDatabaseUrl = resolvePostgresConfigFromEnv({ schema: 'public' }).url;
|
||||
gameConnector = createGamePostgresConnector({ url: gameDatabaseUrl });
|
||||
await gameConnector.connect();
|
||||
await gameConnector.prisma.general.updateMany({
|
||||
where: { id: { in: [...generalIds.values()] } },
|
||||
data: { gold: 10_000 },
|
||||
@@ -296,19 +342,6 @@ describe('actual tournament lifecycle', () => {
|
||||
})),
|
||||
});
|
||||
|
||||
redisConnector = createRedisConnector(resolveRedisConfigFromEnv());
|
||||
await redisConnector.connect();
|
||||
store = new TournamentStore(redisConnector.client, buildTournamentKeys('che:908'));
|
||||
transport = new DatabaseTurnDaemonTransport(gameConnector.prisma, 30_000);
|
||||
|
||||
turnDaemon = await createTurnDaemonRuntime({
|
||||
profile: 'che',
|
||||
profileName: 'che:908',
|
||||
databaseUrl: gameDatabaseUrl,
|
||||
gatewayDatabaseUrl,
|
||||
redisUrl: resolveRedisConfigFromEnv().url,
|
||||
});
|
||||
|
||||
for (let attempt = 0; attempt < 36; attempt += 1) {
|
||||
const current = turnDaemon.world.getState().lastTurnTime;
|
||||
const next = new Date(current.getTime());
|
||||
@@ -319,10 +352,6 @@ describe('actual tournament lifecycle', () => {
|
||||
}
|
||||
}
|
||||
expect(await store.getState()).toMatchObject({ stage: 1, auto: true });
|
||||
|
||||
turnDaemonLoop = turnDaemon.lifecycle.start();
|
||||
const status = await transport.requestStatus(10_000);
|
||||
expect(status).not.toBeNull();
|
||||
}, 120_000);
|
||||
|
||||
afterAll(async () => {
|
||||
|
||||
Reference in New Issue
Block a user