devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(game-ui): 토너먼트 단계별 메인 메뉴를 전환한다

Browse Source
This commit is contained in:
Hide_D
2026-08-22 04:58:12 +00:00
parent 093bf67394
commit 8a4347bf6d
8 changed files with 233 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/mainNavigation.spec.ts
+107 -9
View File
@@ -29,6 +29,8 @@ type NavigationFixture = {
permission: number;
nationLevel: number;
stage: number;
tournamentType?: 0 | 1 | 2 | 3;
tournamentWinnerId?: number;
npcMode: number;
generalMeCalls: number;
operations: string[];
@@ -758,7 +760,16 @@ const installFixture = async (page: Page, state: NavigationFixture) => {
canSecret: state.permission >= 2,
});
}
if (operation === 'tournament.getState') return response({ stage: state.stage });
if (operation === 'tournament.getState') {
if (state.stage === 0 && state.tournamentType === undefined && state.tournamentWinnerId === undefined) {
return response(null);
}
return response({
stage: state.stage,
type: state.tournamentType ?? 0,
winnerId: state.tournamentWinnerId,
});
}
return response({ ok: true });
});
operations.forEach((operation, index) => {
@@ -1273,9 +1284,9 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
);
await tournamentToggle.click();
await expect(tournamentToggle).toHaveAttribute('aria-expanded', 'true');
await expect(nationMenu.locator('#nation-menu-tournament-betting [data-navigation-id="tournament-menu"]')).toHaveText(
'토너먼트'
);
await expect(
nationMenu.locator('#nation-menu-tournament-betting [data-navigation-id="tournament-menu"]')
).toHaveText('토너먼트');
await expect(nationMenu.locator('#nation-menu-tournament-betting [data-navigation-id="betting"]')).toHaveAttribute(
'href',
`${basePath}/betting`
@@ -1437,6 +1448,95 @@ test('shows the persisted official game index beside the scenario title without
}
});
test('tournament split main action follows recruitment, betting, finals, and tournament type on desktop and mobile', async ({
page,
}, testInfo) => {
const state: NavigationFixture = {
officerLevel: 5,
permission: 2,
nationLevel: 3,
stage: 1,
tournamentType: 3,
npcMode: 1,
scenarioTitle: '토너먼트 동적 메뉴 검증 시나리오',
generalMeCalls: 0,
operations: [],
};
await installFixture(page, state);
const cases = [
{ stage: 1, type: 3 as const, label: '설 전', route: '/tournament' },
{ stage: 5, type: 2 as const, label: '일 기 토', route: '/tournament' },
{ stage: 6, type: 2 as const, label: '베 팅 장', route: '/betting' },
{ stage: 7, type: 2 as const, label: '일 기 토', route: '/tournament' },
{ stage: 10, type: 3 as const, label: '설 전', route: '/tournament' },
{ stage: 0, type: 3 as const, label: '설 전', route: '/tournament', winnerId: 17 },
];
for (const viewport of [
{ width: 1200, height: 900 },
{ width: 500, height: 900 },
]) {
await page.setViewportSize(viewport);
for (const lifecycle of cases) {
state.stage = lifecycle.stage;
state.tournamentType = lifecycle.type;
state.tournamentWinnerId = lifecycle.winnerId;
if (page.url() === 'about:blank') {
await waitForMain(page);
} else {
await page.reload();
await waitForMain(page);
}
const nationMenu = page.locator('.main-nation-menu:visible');
const main = nationMenu.locator('[data-navigation-id="tournament"]');
await expect(main).toHaveText(lifecycle.label);
await expect(main).toHaveAttribute('href', `${basePath}${lifecycle.route}`);
await expect(main).toHaveClass(/highlight/);
const toggle = nationMenu.locator('[data-menu-id="tournament-betting"]');
await toggle.click();
const tournamentItem = nationMenu.locator(
'#nation-menu-tournament-betting [data-navigation-id="tournament-menu"]'
);
const bettingItem = nationMenu.locator('#nation-menu-tournament-betting [data-navigation-id="betting"]');
if (lifecycle.stage === 6) {
await expect(tournamentItem).not.toHaveClass(/highlight/);
await expect(bettingItem).toHaveClass(/highlight/);
} else {
await expect(tournamentItem).toHaveClass(/highlight/);
await expect(bettingItem).not.toHaveClass(/highlight/);
}
await page.keyboard.press('Escape');
if (viewport.width === 500) {
const nationTrigger = page.locator('[data-bottom-menu="nation"]');
await nationTrigger.click();
const mobileTournament = page.locator('#mobile-nation-menu [data-navigation-id="tournament-menu"]');
const mobileBetting = page.locator('#mobile-nation-menu [data-navigation-id="betting"]');
if (lifecycle.stage === 6) {
await expect(mobileTournament).not.toHaveClass(/highlight/);
await expect(mobileBetting).toHaveClass(/highlight/);
} else {
await expect(mobileTournament).toHaveClass(/highlight/);
await expect(mobileBetting).not.toHaveClass(/highlight/);
}
await page.keyboard.press('Escape');
}
}
await page
.locator('.main-nation-menu:visible [data-menu-id="tournament-betting"]')
.locator('..')
.screenshot({
path: artifactRoot
? resolve(artifactRoot, `tournament-dynamic-main-${viewport.width}.png`)
: testInfo.outputPath(`tournament-dynamic-main-${viewport.width}.png`),
});
}
});
test('shows game index zero for a profile whose first game starts at zero', async ({ page }) => {
const state: NavigationFixture = {
officerLevel: 5,
@@ -3986,9 +4086,7 @@ for (const viewport of [
await picker.getByLabel('장비 종류', { exact: true }).selectOption('weapon');
const equipment = picker.getByLabel('장비', { exact: true });
await equipment.selectOption('청룡언월도');
const optionLabelBeforeRefresh = await equipment
.locator('option[value="청룡언월도"]')
.textContent();
const optionLabelBeforeRefresh = await equipment.locator('option[value="청룡언월도"]').textContent();
await equipment.evaluate((element) => {
const select = element as HTMLSelectElement;
const valueDescriptor = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value');
@@ -4118,8 +4216,8 @@ test('keeps an Android Chromium native command select untouched while a turn sig
await waitForMain(mobilePage);
await expect
.poll(() =>
mobilePage.evaluate(
() => (window as unknown as { __hasMainRealtime: () => boolean }).__hasMainRealtime()
mobilePage.evaluate(() =>
(window as unknown as { __hasMainRealtime: () => boolean }).__hasMainRealtime()
)
)
.toBe(true);
app/game-frontend/src/components/main/MainMobileBottomBar.vue
+4 -2
View File
@@ -4,9 +4,9 @@ import { legacyNationTextColor } from '../../utils/legacyNationColor';
import MainNavigationLink from './MainNavigationLink.vue';
import {
buildGlobalNavigation,
buildNationNavigation,
isNationNavigationEnabled,
isNavigationConfigured,
nationNavigation,
quickNavigation,
type MainNavigationLink as MainNavigationLinkItem,
type MainNavigationEntry,
@@ -18,6 +18,7 @@ import { useMenuPopup } from './useMenuPopup';
const props = defineProps<{
access: NationNavigationAccess;
tournamentStage: number;
tournamentType: number | null;
nationColor: string;
npcMode: number;
realtimeEnabled: boolean;
@@ -35,6 +36,7 @@ const emit = defineEmits<{
const { setRoot, openId, close, toggle } = useMenuPopup();
const globalEntries = computed(() => buildGlobalNavigation(props.npcMode, props.entries));
const nationEntries = computed(() => buildNationNavigation(props.tournamentStage, props.tournamentType));
const nationMenuColor = computed(() => props.nationColor || '#000000');
const nationMenuTextColor = computed(() => legacyNationTextColor(nationMenuColor.value));
const isActive = (link: MainNavigationLinkItem) =>
@@ -150,7 +152,7 @@ const onAction = (action: NonNullable<MainNavigationLinkItem['action']>) => {
<span class="dropup-caret" aria-hidden="true"></span>
</button>
<ul v-if="openId === 'nation'" id="mobile-nation-menu" class="bottom-popup" role="menu">
<template v-for="entry in nationNavigation" :key="entry.id">
<template v-for="entry in nationEntries" :key="entry.id">
<li v-if="entry.kind === 'link'" role="none">
<MainNavigationLink
:link="entry"
app/game-frontend/src/components/main/MainNationMenu.vue
+5 -2
View File
@@ -1,8 +1,9 @@
<script setup lang="ts">
import { computed } from 'vue';
import MainNavigationLink from './MainNavigationLink.vue';
import {
buildNationNavigation,
isNationNavigationEnabled,
nationNavigation,
type MainNavigationLink as MainNavigationLinkItem,
type NationNavigationAccess,
} from './mainNavigation';
@@ -12,10 +13,12 @@ import { legacyNationTextColor } from '../../utils/legacyNationColor';
const props = defineProps<{
access: NationNavigationAccess;
tournamentStage: number;
tournamentType: number | null;
nationColor: string;
}>();
const { setRoot, openId, close, toggle } = useMenuPopup();
const entries = computed(() => buildNationNavigation(props.tournamentStage, props.tournamentType));
const isActive = (link: MainNavigationLinkItem) =>
link.highlightStage === props.tournamentStage ||
link.highlightStages?.some((stage) => stage === props.tournamentStage) === true;
@@ -29,7 +32,7 @@ const isActive = (link: MainNavigationLinkItem) =>
:class="{ 'dark-label': legacyNationTextColor(nationColor) === '#000000' }"
aria-label="국가 메뉴"
>
<template v-for="entry in nationNavigation" :key="entry.id">
<template v-for="entry in entries" :key="entry.id">
<MainNavigationLink
v-if="entry.kind === 'link'"
:link="entry"
app/game-frontend/src/components/main/mainNavigation.ts
+38 -4
View File
@@ -4,6 +4,7 @@ import type {
RuntimeNavigationLink,
} from '@sammo-ts/common/navigation/menuConfig';
import defaultNavigationJson from '../../../../../resources/navigation.json';
import { resolveTournamentMainPresentation } from '../../utils/tournamentNavigation';
export type NationAccessRule =
'always' | 'meeting' | 'secret' | 'nation-member' | 'nation-established' | 'nation-secret';
@@ -11,8 +12,8 @@ export type NationAccessRule =
export type MainNavigationLink = RuntimeNavigationLink & {
compactLabel?: string;
access?: NationAccessRule;
highlightStage?: 1 | 6;
highlightStages?: readonly [1, 6];
highlightStage?: number;
highlightStages?: readonly number[];
unavailableReason?: string;
};
@@ -155,7 +156,6 @@ export const nationNavigation: MainNavigationEntry[] = [
to: '/tournament',
newTab: true,
access: 'always',
highlightStages: [1, 6],
},
items: [
{
@@ -246,6 +246,39 @@ export const nationNavigation: MainNavigationEntry[] = [
{ kind: 'link', id: 'my-settings', label: '화면 설정', to: '/my-settings', access: 'always' },
];
export const buildNationNavigation = (
tournamentStage: number,
tournamentType: number | null,
source: MainNavigationEntry[] = nationNavigation
): MainNavigationEntry[] =>
source.map((entry) => {
if (entry.kind !== 'split' || entry.id !== 'tournament-betting') return entry;
const presentation = resolveTournamentMainPresentation(tournamentStage, tournamentType);
const main: MainNavigationLink = {
...entry.main,
label: presentation.label,
compactLabel: presentation.compactLabel,
to: presentation.to,
highlightStage: presentation.active ? tournamentStage : undefined,
highlightStages: undefined,
};
const items = entry.items.map((item) => {
if (item.kind !== 'link') return item;
if (item.id === 'tournament-menu') {
return {
...item,
highlightStage: presentation.active && !presentation.bettingActive ? tournamentStage : undefined,
};
}
if (item.id === 'betting') {
return { ...item, highlightStage: presentation.bettingActive ? tournamentStage : undefined };
}
return item;
});
return { ...entry, main, items };
});
export const quickNavigation: Array<QuickNavigationItem | MainNavigationDivider> = [
{ kind: 'divider', id: 'quick-nation-heading', label: '국가 정보' },
{ id: 'policy', label: '방침', tab: 'map', selector: '[data-main-target="policy"]' },
@@ -265,7 +298,8 @@ export const quickNavigation: Array<QuickNavigationItem | MainNavigationDivider>
{ id: 'diplomacy-message', label: '외교', tab: 'messages', selector: '[data-message-type="diplomacy"]' },
];
export const isNavigationConfigured = (link: MainNavigationLink): boolean => Boolean(link.to || link.href || link.action);
export const isNavigationConfigured = (link: MainNavigationLink): boolean =>
Boolean(link.to || link.href || link.action);
export const isNationNavigationEnabled = (link: MainNavigationLink, access: NationNavigationAccess): boolean => {
const rule = link.access ?? 'always';
app/game-frontend/src/stores/mainDashboard.ts
+13 -1
View File
@@ -49,6 +49,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
type RecentRecord = Awaited<ReturnType<typeof trpc.general.getRecentRecords.query>>['global'][number];
type FrontStatus = Awaited<ReturnType<typeof trpc.general.getFrontStatus.query>>;
type TournamentState = Awaited<ReturnType<typeof trpc.tournament.getState.query>>;
type TournamentType = NonNullable<TournamentState>['type'];
type ContextBundleDelta = Awaited<ReturnType<typeof trpc.dashboard.getContextBundleDelta.query>>;
type DashboardReadModelPatch = {
contextSnapshot?: GeneralContext;
@@ -76,6 +77,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
worldHistory?: RecentRecord[];
frontStatus?: FrontStatus | null;
tournamentStage?: number;
tournamentType?: TournamentType | null;
};
type DashboardTabMessage =
{ kind: 'patch'; patch: DashboardReadModelPatch } | { kind: 'status'; status: 'idle' | 'connected' };
@@ -117,6 +119,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
const worldHistory = ref<RecentRecord[]>([]);
const frontStatus = ref<FrontStatus | null>(null);
const tournamentStage = ref(0);
const tournamentType = ref<TournamentType | null>(null);
const surveyNotice = ref<NonNullable<FrontStatus['latestVote']> | null>(null);
let lastGeneralRecordId = 0;
let lastWorldHistoryId = 0;
@@ -440,6 +443,9 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
if (patch.tournamentStage !== undefined) {
tournamentStage.value = patch.tournamentStage;
}
if (patch.tournamentType !== undefined) {
tournamentType.value = patch.tournamentType;
}
if (patch.contextRevision !== undefined) {
contextRevision = patch.contextRevision;
contextSourceRevision = patch.contextSourceRevision ?? null;
@@ -487,6 +493,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
patch.worldHistory = toRaw(worldHistory.value);
patch.frontStatus = toRaw(frontStatus.value);
patch.tournamentStage = tournamentStage.value;
patch.tournamentType = tournamentType.value;
return patch;
};
@@ -637,6 +644,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
}
if (tournamentState !== undefined) {
tournamentStage.value = tournamentState?.stage ?? 0;
tournamentType.value = tournamentState?.type ?? null;
}
if (initializedMailboxGeneralId !== id) {
targetMailbox.value = MESSAGE_MAILBOX_NATIONAL_BASE + context.general.nationId;
@@ -765,7 +773,10 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
patch.worldHistory = nextWorldHistory;
}
if (nextFrontStatus) patch.frontStatus = nextFrontStatus;
if (tournamentState !== undefined) patch.tournamentStage = tournamentState?.stage ?? 0;
if (tournamentState !== undefined) {
patch.tournamentStage = tournamentState?.stage ?? 0;
patch.tournamentType = tournamentState?.type ?? null;
}
applyDashboardPatch(patch);
publishDashboardPatch(patch);
} catch (err) {
@@ -1290,6 +1301,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
worldHistory,
frontStatus,
tournamentStage,
tournamentType,
surveyNotice,
messageDraftText,
targetMailbox,
app/game-frontend/src/utils/tournamentNavigation.ts
+30
View File
@@ -0,0 +1,30 @@
export interface TournamentMainPresentation {
label: string;
compactLabel: string;
to: '/tournament' | '/betting';
active: boolean;
bettingActive: boolean;
}
const tournamentLabels = [
{ label: '전 력 전', compactLabel: '전력전' },
{ label: '통 솔 전', compactLabel: '통솔전' },
{ label: '일 기 토', compactLabel: '일기토' },
{ label: '설 전', compactLabel: '설전' },
] as const;
export const resolveTournamentMainPresentation = (
tournamentStage: number,
tournamentType: number | null
): TournamentMainPresentation => {
const active = tournamentStage > 0 || tournamentType !== null;
const bettingActive = tournamentStage === 6;
const tournamentLabel = tournamentType === null ? undefined : tournamentLabels[tournamentType];
return {
label: bettingActive ? '베 팅 장' : (tournamentLabel?.label ?? '토 너 먼 트'),
compactLabel: bettingActive ? '베팅장' : (tournamentLabel?.compactLabel ?? '토너먼트'),
to: bettingActive ? '/betting' : '/tournament',
active,
bettingActive,
};
};
app/game-frontend/src/views/MainView.vue
+4
View File
@@ -83,6 +83,7 @@ const {
worldHistory,
frontStatus,
tournamentStage,
tournamentType,
surveyNotice,
messageDraftText,
targetMailbox,
@@ -301,6 +302,7 @@ watch(
class="nation-menu-middle"
:access="nationAccess"
:tournament-stage="tournamentStage"
:tournament-type="tournamentType"
:nation-color="nationColor"
/>
</div>
@@ -480,6 +482,7 @@ watch(
class="nation-menu-middle"
:access="nationAccess"
:tournament-stage="tournamentStage"
:tournament-type="tournamentType"
:nation-color="nationColor"
/>
<section class="record-zone">
@@ -570,6 +573,7 @@ watch(
v-if="isMobile"
:access="nationAccess"
:tournament-stage="tournamentStage"
:tournament-type="tournamentType"
:nation-color="nationColor"
:npc-mode="npcMode"
:realtime-enabled="realtimeEnabled"
app/game-frontend/test/mainNavigation.test.ts
+32
View File
@@ -0,0 +1,32 @@
import assert from 'node:assert/strict';
import test from 'node:test';
import { resolveTournamentMainPresentation } from '../src/utils/tournamentNavigation.ts';
void test('routes every active tournament stage except betting to its type-specific tournament button', () => {
const expectedLabels = ['전력전', '통솔전', '일기토', '설전'];
for (const [type, expectedLabel] of expectedLabels.entries()) {
for (const stage of [1, 2, 3, 4, 5, 7, 8, 9, 10, 0]) {
const presentation = resolveTournamentMainPresentation(stage, type);
assert.equal(presentation.compactLabel, expectedLabel);
assert.equal(presentation.to, '/tournament');
assert.equal(presentation.active, true);
}
}
});
void test('routes the betting stage to the betting hall regardless of tournament type', () => {
for (const type of [0, 1, 2, 3]) {
const presentation = resolveTournamentMainPresentation(6, type);
assert.equal(presentation.compactLabel, '베팅장');
assert.equal(presentation.to, '/betting');
assert.equal(presentation.active, true);
}
});
void test('keeps the generic tournament button when no tournament state exists', () => {
const presentation = resolveTournamentMainPresentation(0, null);
assert.equal(presentation.compactLabel, '토너먼트');
assert.equal(presentation.to, '/tournament');
assert.equal(presentation.active, false);
});