diff --git a/app/game-api/src/router/world/index.ts b/app/game-api/src/router/world/index.ts index 36b82562..75b97c7f 100644 --- a/app/game-api/src/router/world/index.ts +++ b/app/game-api/src/router/world/index.ts @@ -175,13 +175,14 @@ export const worldRouter = router({ const turns = generalIds.length ? await ctx.db.generalTurn.findMany({ where: { generalId: { in: generalIds }, turnIdx: { lt: 5 } }, + select: { generalId: true, turnIdx: true, actionCode: true, arg: true }, orderBy: [{ generalId: 'asc' }, { turnIdx: 'asc' }], }) : []; - const turnMap = new Map(); + const turnMap = new Map>(); for (const turn of turns) { const list = turnMap.get(turn.generalId) ?? []; - list[turn.turnIdx] = turn.actionCode; + list[turn.turnIdx] = { action: turn.actionCode, args: turn.arg }; turnMap.set(turn.generalId, list); } const nationMap = new Map(nations.map((item) => [item.id, item])); diff --git a/app/game-api/test/worldCurrentCityRouter.test.ts b/app/game-api/test/worldCurrentCityRouter.test.ts new file mode 100644 index 00000000..36b84234 --- /dev/null +++ b/app/game-api/test/worldCurrentCityRouter.test.ts @@ -0,0 +1,175 @@ +import { describe, expect, it, vi } from 'vitest'; + +import type { GameSessionTokenPayload } from '@sammo-ts/common/auth/gameToken'; +import type { RedisConnector } from '@sammo-ts/infra'; + +import { RedisAccessTokenStore } from '../src/auth/accessTokenStore.js'; +import { InMemoryFlushStore } from '../src/auth/flushStore.js'; +import type { DatabaseClient, GameApiContext, GeneralRow } from '../src/context.js'; +import { appRouter } from '../src/router.js'; + +vi.mock('../src/maps/mapLayout.js', () => ({ + loadMapLayout: vi.fn(async () => ({ + mapName: 'che', + cityList: [{ id: 1, name: '업', level: 8, region: 1, x: 0, y: 0, path: [] }], + regionMap: { 1: '하북' }, + levelMap: { 8: '특' }, + })), +})); + +vi.mock('@sammo-ts/game-engine/scenario/unitSetLoader.js', () => ({ + loadUnitSetDefinitionByName: vi.fn(async () => ({ crewTypes: [{ id: 1, name: '보병' }] })), +})); + +const now = new Date('2026-01-01T01:02:00Z'); +const general = (overrides: Partial = {}): GeneralRow => ({ + id: 1, + userId: 'u1', + name: '장수', + nationId: 1, + cityId: 1, + troopId: 0, + npcState: 0, + affinity: null, + bornYear: 180, + deadYear: 300, + picture: null, + imageServer: 0, + leadership: 70, + strength: 60, + intel: 50, + injury: 0, + experience: 900, + dedication: 100, + officerLevel: 1, + gold: 1000, + rice: 2000, + crew: 300, + crewTypeId: 1, + train: 90, + atmos: 90, + weaponCode: 'None', + bookCode: 'None', + horseCode: 'None', + itemCode: 'None', + turnTime: now, + recentWarTime: null, + age: 20, + startAge: 20, + personalCode: 'None', + specialCode: 'None', + special2Code: 'None', + lastTurn: {}, + meta: { defence_train: 80 }, + penalty: {}, + createdAt: now, + updatedAt: now, + ...overrides, +}); + +const token = (): GameSessionTokenPayload => ({ + version: 1, + profile: 'che:default', + issuedAt: now.toISOString(), + expiresAt: new Date(now.getTime() + 86_400_000).toISOString(), + sessionId: 'session-1', + user: { id: 'u1', username: 'u1', displayName: '장수', roles: [] }, + sanctions: {}, +}); + +const fixture = (authenticated = true) => { + const actor = general(); + const npc = general({ id: 2, userId: null, name: 'NPC', npcState: 2 }); + const city = { + id: 1, + name: '업', + nationId: 1, + level: 8, + region: 1, + population: 150_000, + populationMax: 620_500, + agriculture: 1_000, + agricultureMax: 12_500, + commerce: 1_000, + commerceMax: 11_300, + security: 1_000, + securityMax: 10_000, + trust: 80, + trade: 100, + defence: 5_000, + defenceMax: 11_700, + wall: 5_000, + wallMax: 12_200, + }; + const db = { + general: { + findFirst: vi.fn(async () => actor), + findMany: vi.fn(async ({ where }: { where: Record }) => { + if ('cityId' in where) return [actor, npc]; + if ('officerLevel' in where) return []; + if ('nationId' in where) return [actor, npc]; + return []; + }), + }, + nation: { + findUnique: vi.fn(async () => ({ id: 1, name: '위', color: '#008000', level: 1, meta: {} })), + findMany: vi.fn(async () => [{ id: 1, name: '위', color: '#008000', level: 1, meta: {} }]), + }, + city: { findMany: vi.fn(async () => [city]) }, + worldState: { + findFirst: vi.fn(async () => ({ config: {}, meta: { turntime: '2026-01-01 10:02:00' } })), + }, + generalTurn: { + findMany: vi.fn(async () => [ + { + generalId: 1, + turnIdx: 0, + actionCode: 'che_징병', + arg: { crewType: 1, amount: 300 }, + }, + ]), + }, + }; + const redis = { get: vi.fn(async () => null), set: vi.fn(async () => null) } as unknown as RedisConnector['client']; + const context: GameApiContext = { + db: db as unknown as DatabaseClient, + redis, + turnDaemon: {} as GameApiContext['turnDaemon'], + battleSim: {} as GameApiContext['battleSim'], + profile: { id: 'che', scenario: 'default', name: 'che:default' }, + auth: authenticated ? token() : null, + uploadDir: 'uploads', + uploadPath: '/uploads', + uploadPublicUrl: null, + accessTokenStore: new RedisAccessTokenStore(redis, 'che:default'), + flushStore: new InMemoryFlushStore(), + gameTokenSecret: 'secret', + }; + return { caller: appRouter.createCaller(context), db }; +}; + +describe('world current-city command projection', () => { + it('returns the first five own-user turns as canonical action and args while redacting NPC turns', async () => { + const { caller, db } = fixture(); + + const result = await caller.world.getCurrentCity(); + + expect(result.generals.find((entry) => entry.id === 1)?.turns).toEqual([ + { action: 'che_징병', args: { crewType: 1, amount: 300 } }, + ]); + expect(result.generals.find((entry) => entry.id === 2)?.turns).toEqual([]); + expect(db.generalTurn.findMany).toHaveBeenCalledWith( + expect.objectContaining({ + where: { generalId: { in: [1] }, turnIdx: { lt: 5 } }, + select: { generalId: true, turnIdx: true, actionCode: true, arg: true }, + }) + ); + }); + + it('keeps authentication and input validation in front of the city read model', async () => { + await expect(fixture(false).caller.world.getCurrentCity()).rejects.toMatchObject({ code: 'UNAUTHORIZED' }); + await expect(fixture().caller.world.getCurrentCity({ cityId: 0 })).rejects.toMatchObject({ + code: 'BAD_REQUEST', + }); + }); +}); diff --git a/app/game-engine/test/scenarioSeeder.test.ts b/app/game-engine/test/scenarioSeeder.test.ts index 2e072812..b81d9a3e 100644 --- a/app/game-engine/test/scenarioSeeder.test.ts +++ b/app/game-engine/test/scenarioSeeder.test.ts @@ -350,7 +350,7 @@ describeDb('scenario database seed', () => { databaseUrl, now: new Date('2030-01-01T00:00:00Z'), installOptions: { - turnTermMinutes: 60, + turnTermMinutes: 3, sync: false, fiction: 1, extend: false, @@ -386,7 +386,7 @@ describeDb('scenario database seed', () => { if (!worldState) { return; } - expect(worldState.tickSeconds).toBe(3600); + expect(worldState.tickSeconds).toBe(180); expect(worldState.currentMonth).toBe(1); expect(worldState.clockWallAnchor).toEqual(new Date('2030-01-01T02:00:00.000Z')); @@ -399,7 +399,7 @@ describeDb('scenario database seed', () => { expect(meta.develcost).toBe( (worldState.currentYear - (scenario.startYear ?? worldState.currentYear) + 10) * 2 ); - expect(meta.killturn).toBe(80); + expect(meta.killturn).toBe(1600); const autorun = (meta.autorun_user ?? {}) as Record; const autorunOptions = (autorun.options ?? {}) as Record; expect(autorunOptions.develop).toBe(true); diff --git a/app/game-frontend/e2e/inGameInfo.spec.ts b/app/game-frontend/e2e/inGameInfo.spec.ts index e90843f6..2270d1ce 100644 --- a/app/game-frontend/e2e/inGameInfo.spec.ts +++ b/app/game-frontend/e2e/inGameInfo.spec.ts @@ -210,7 +210,44 @@ const install = async ( } if (operation === 'general.me') return response(generalContext); if (operation === 'world.getMap') return response(mapFixture); - if (operation === 'turns.getCommandTable') return response({ general: [], nation: [] }); + if (operation === 'turns.getCommandTable') + return response({ + general: [ + { + category: '군사', + values: [ + { + key: 'che_징병', + name: '징병', + reqArg: true, + status: 'needsInput', + possible: true, + inputFields: [], + }, + { + key: 'che_화계', + name: '화계', + reqArg: true, + status: 'needsInput', + possible: true, + inputFields: [], + }, + ], + }, + ], + nation: [], + inputOptions: { + cities: [{ value: 1, label: '업 (아국)' }], + nations: [], + generals: [], + crewTypes: [{ value: 1, label: '보병' }], + armTypes: [], + nationTypes: [], + colors: [], + items: {}, + recruitment: null, + }, + }); if (operation === 'turns.reserved.getGeneral' || operation === 'turns.reserved.getNation') { return response({ turns: [], revision: 0 }); } @@ -373,7 +410,12 @@ const install = async ( crew: 500, train: 90, atmos: 90, - turns: denseCurrentCity ? ['징병', '훈련'] : ['징병'], + turns: denseCurrentCity + ? [ + { action: 'che_징병', args: { crewType: 1, amount: 300 } }, + { action: 'che_화계', args: { destCityId: 1 } }, + ] + : [{ action: 'che_징병', args: { crewType: 1, amount: 300 } }], }, ...(denseCurrentCity ? Array.from({ length: 12 }, (_, index) => ({ @@ -1082,8 +1124,10 @@ test('current-city wraps dense general names and only shrinks reserved turns', a const rows = page.locator('.generals tbody tr'); const reservedTurns = rows.nth(0).locator('.turns'); const npcTurns = rows.nth(1).locator('.turns'); - await expect(reservedTurns).toContainText('1 : 징병'); - await expect(reservedTurns).toContainText('2 : 훈련'); + await expect(reservedTurns).toContainText('1 : 【보병】 300명 징병'); + await expect(reservedTurns).toContainText('2 : 【업】에 화계실행'); + await expect(reservedTurns.locator('.turn-line').nth(0)).toHaveAttribute('title', '【보병】 300명 징병'); + await expect(reservedTurns.locator('.turn-line').nth(1)).toHaveAttribute('title', '【업】에 화계실행'); await expect(reservedTurns).toHaveClass(/turns--reserved/); await expect(npcTurns).toHaveText('NPC 장수'); await expect(npcTurns).not.toHaveClass(/turns--reserved/); diff --git a/app/game-frontend/e2e/inGameMenus.spec.ts b/app/game-frontend/e2e/inGameMenus.spec.ts index 3ed880fc..cb5265b8 100644 --- a/app/game-frontend/e2e/inGameMenus.spec.ts +++ b/app/game-frontend/e2e/inGameMenus.spec.ts @@ -38,6 +38,18 @@ const readGeneralPanelImages = async (panel: Locator) => }) ); +const readGeneralSummaryRows = async (summary: Locator) => + summary.evaluate((element) => { + const rows = new Map(); + for (const label of element.querySelectorAll(':scope > span')) { + const top = Math.round(label.getBoundingClientRect().top * 100) / 100; + const row = rows.get(top) ?? []; + row.push(label.textContent?.trim() ?? ''); + rows.set(top, row); + } + return [...rows.values()]; + }); + type FixtureState = { permission: 'head' | 'member'; myset: number; @@ -1242,19 +1254,12 @@ test('내 정보&설정 keeps desktop density and becomes a 390px horizontal-ide await expect(page.locator('.battle-general-extra')).toContainText('피살6,789'); await expect(page.locator('.battle-general-extra__recent-value')).toHaveText('01-01 00:00'); await expect(page.locator('.legacy-general-details')).toHaveCount(0); - await expect(page.locator('.battle-general-extra > span')).toHaveText([ - '명성', - '계급', - '전투', - '승리', - '패배', - '계략', - '사관', - '사살', - '피살', - '승률', - '살상률', - '최근 전투', + expect(await readGeneralSummaryRows(page.locator('.battle-general-extra'))).toEqual([ + ['명성', '계급', ''], + ['전투', '계략', '사관'], + ['승률', '승리', '패배'], + ['살상률', '사살', '피살'], + ['최근 전투'], ]); await expect(page.locator('.item-group')).toContainText('명마'); await expect(page.locator('#container')).not.toContainText('che_'); @@ -2043,19 +2048,12 @@ test('감찰부 keeps the selector interaction and shows the permission error pa await expect(page.locator('.battle-general-extra')).toContainText('사관4년'); await expect(page.locator('.battle-general-extra')).toContainText('승률62.50%'); await expect(page.locator('.battle-general-extra')).toContainText('살상률181.84%'); - await expect(page.locator('.battle-general-extra > span')).toHaveText([ - '명성', - '계급', - '전투', - '승리', - '패배', - '계략', - '사관', - '사살', - '피살', - '승률', - '살상률', - '최근 전투', + expect(await readGeneralSummaryRows(page.locator('.battle-general-extra'))).toEqual([ + ['명성', '계급', ''], + ['전투', '계략', '사관'], + ['승률', '승리', '패배'], + ['살상률', '사살', '피살'], + ['최근 전투'], ]); const battleImages = await readGeneralPanelImages(page.locator('.battle-general-card')); expect(battleImages).toHaveLength(2); diff --git a/app/game-frontend/e2e/mainNavigation.spec.ts b/app/game-frontend/e2e/mainNavigation.spec.ts index 12e29e3c..2114ca10 100644 --- a/app/game-frontend/e2e/mainNavigation.spec.ts +++ b/app/game-frontend/e2e/mainNavigation.spec.ts @@ -15,6 +15,7 @@ const errorResponse = (path: string, message: string) => ({ }); const artifactRoot = process.env.MAIN_NAVIGATION_ARTIFACT_DIR; const autoRefreshArtifactRoot = process.env.AUTO_REFRESH_ARTIFACT_DIR; +const mapSeasonArtifactRoot = process.env.MAP_SEASON_ARTIFACT_DIR; const productionBundle = process.env.PLAYWRIGHT_FRONTEND_MODE === 'production'; const basePath = `/${(process.env.PLAYWRIGHT_GAME_BASE_PATH ?? 'che').replace(/^\/+|\/+$/g, '')}`; const gameProfile = process.env.PLAYWRIGHT_GAME_PROFILE ?? 'che:default'; @@ -55,6 +56,10 @@ type NavigationFixture = { refCommandCategories?: boolean; currentYear?: number; currentMonth?: number; + mapName?: string; + validMapImages?: boolean; + mapImageGate?: Promise; + imageRequests?: string[]; serverId?: string; profile?: string; gameIdx?: number; @@ -146,6 +151,13 @@ const emitReadModelInvalidation = (page: Page, invalidation: ReturnType + expect + .poll(() => + page.evaluate(() => (window as unknown as { __hasMainRealtime: () => boolean }).__hasMainRealtime()) + ) + .toBe(true); + const refCommandCategoryFixture = ['개인', '내정', '군사', '인사', '계략', '국가'].map((category, index) => ({ category, values: [ @@ -506,9 +518,29 @@ const installFixture = async (page: Page, state: NavigationFixture) => { { profile: gameProfile } ); - await page.route('**/image/**', async (route) => { - await route.fulfill({ status: 200, contentType: 'image/jpeg', body: Buffer.from('') }); + page.on('request', (request) => { + const url = new URL(request.url()); + if (url.pathname.includes('/image/') || url.hostname === 'sam-image.hided.net') { + (state.imageRequests ??= []).push(url.pathname); + } }); + + const handleImageRoute = async (route: Route) => { + await state.mapImageGate; + if (state.validMapImages) { + const transparentPixel = Buffer.from( + 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEAQH/69aQ6wAAAABJRU5ErkJggg==', + 'base64' + ); + await route.fulfill({ status: 200, contentType: 'image/png', body: transparentPixel }); + return; + } + await route.fulfill({ status: 200, contentType: 'image/jpeg', body: Buffer.from('') }); + }; + if (process.env.SAMMO_E2E_REAL_MAP_ASSETS !== '1') { + await page.route('**/image/**', handleImageRoute); + await page.route('https://sam-image.hided.net/game/**', handleImageRoute); + } await page.route('**/events**', async (route) => { await route.abort(); }); @@ -663,7 +695,7 @@ const installFixture = async (page: Page, state: NavigationFixture) => { } if (operation === 'world.getMapLayout') { return response({ - mapName: 'che', + mapName: state.mapName ?? 'che', cityList: [{ id: 1, name: '업', level: 8, region: 1, x: 200, y: 120, path: [] }], regionMap: { 1: '하북' }, levelMap: { 8: '특' }, @@ -2228,7 +2260,43 @@ test('main cards and command input stay inside their Ref-sized grid slots', asyn await selectedMenu.evaluate((element) => ((element as HTMLDetailsElement).open = false)); await expect(selectedMenu).not.toHaveAttribute('open', ''); - await page.locator('[data-main-target="commands"] .select-command').click(); + const selectCommand = page.locator('[data-main-target="commands"] .select-command'); + await expect(selectCommand).toHaveClass(/legacy-button--info/u); + await page.mouse.move(1, 1); + const measureSelectCommand = () => + selectCommand.evaluate((element) => { + const rect = element.getBoundingClientRect(); + const style = getComputedStyle(element); + return { + top: rect.top, + bottom: rect.bottom, + height: rect.height, + marginTop: style.marginTop, + borderBottomWidth: style.borderBottomWidth, + borderRadius: style.borderRadius, + backgroundColor: style.backgroundColor, + }; + }); + const selectDefault = await measureSelectCommand(); + expect(selectDefault).toMatchObject({ + height: 34, + marginTop: '0px', + borderBottomWidth: '4px', + borderRadius: '5.25px', + backgroundColor: 'rgb(52, 152, 219)', + }); + await selectCommand.hover(); + const selectHover = await measureSelectCommand(); + expect(selectHover).toMatchObject({ height: 33, marginTop: '1px', borderBottomWidth: '3px' }); + expect(selectHover.bottom).toBeCloseTo(selectDefault.bottom, 2); + const selectBox = await selectCommand.boundingBox(); + if (!selectBox) throw new Error('select command control is not measurable'); + await page.mouse.move(selectBox.x + selectBox.width / 2, selectBox.y + selectBox.height / 2); + await page.mouse.down(); + const selectActive = await measureSelectCommand(); + expect(selectActive).toMatchObject({ height: 32, marginTop: '2px', borderBottomWidth: '2px' }); + expect(selectActive.bottom).toBeCloseTo(selectDefault.bottom, 2); + await page.mouse.up(); const picker = page.getByTestId('command-picker'); await expect(picker).toBeVisible(); // The trigger can end up directly above a newly opened category button. @@ -4224,6 +4292,285 @@ test('global activity, world history, and a month boundary refresh their visible ); }); +test('seasonal map decodes the next background and crossfades it without remounting map content', async ({ page }) => { + const useRealAssets = process.env.SAMMO_E2E_REAL_MAP_ASSETS === '1'; + let releaseInitialImages: () => void = () => undefined; + const initialImageGate = new Promise((resolveGate) => { + releaseInitialImages = resolveGate; + }); + const state: NavigationFixture = { + officerLevel: 5, + permission: 2, + nationLevel: 3, + stage: 0, + npcMode: 1, + generalMeCalls: 0, + operations: [], + currentMonth: 3, + validMapImages: true, + mapImageGate: useRealAssets ? undefined : initialImageGate, + }; + await installRealtimeHarness(page); + await installFixture(page, state); + await page.setViewportSize({ width: 1200, height: 900 }); + await waitForMain(page); + await waitForMainRealtime(page); + + const map = page.locator('[data-main-target="map"] .map-viewer').first(); + if (!useRealAssets) { + await expect(map.locator('.skeleton-line')).toHaveCount(4); + await expect(map.locator('.map-area')).toHaveCount(0); + releaseInitialImages(); + state.mapImageGate = undefined; + } + + const currentLayer = map.locator('[data-map-background-layer="current"]'); + const outgoingLayer = map.locator('[data-map-background-layer="outgoing"]'); + await expect(currentLayer.locator('img')).toHaveAttribute('src', /bg_spring\.jpg/u); + await expect(map.locator('.map-area')).toBeVisible(); + await expect + .poll(() => state.imageRequests?.some((url) => url.endsWith('/game/map/che/bg_summer.jpg')) ?? false) + .toBe(true); + + const initialGeometry = await map.locator('.map-area').evaluate((area) => { + const rect = area.getBoundingClientRect(); + const road = area.querySelector('.map-bgroad'); + const city = area.querySelector('.city-base'); + Object.defineProperty(window, '__mapSeasonTransitionProbe', { + configurable: true, + value: { area, road, city }, + }); + return { width: rect.width, height: rect.height }; + }); + expect(initialGeometry).toEqual({ width: 700, height: 500 }); + + if (mapSeasonArtifactRoot) { + await mkdir(mapSeasonArtifactRoot, { recursive: true }); + await map.screenshot({ path: resolve(mapSeasonArtifactRoot, 'season-spring-initial.png') }); + } + + state.currentMonth = 4; + await emitReadModelInvalidation(page, readModelInvalidation({ lobby: true, map: true })); + await expect(map).toContainText('185年 4月'); + await expect(outgoingLayer).toHaveClass(/is-transitioning/u); + await expect(outgoingLayer).toHaveCSS('transition-duration', '0.48s'); + let midpointOpacity = 0; + await expect + .poll( + async () => { + midpointOpacity = Number.parseFloat( + await outgoingLayer.evaluate((element) => getComputedStyle(element).opacity) + ); + return midpointOpacity > 0 && midpointOpacity < 1; + }, + { intervals: [16, 16, 16, 16, 16, 16], timeout: 350 } + ) + .toBe(true); + await expect(currentLayer.locator('img')).toHaveAttribute('src', /bg_summer\.jpg/u); + await expect(outgoingLayer.locator('img')).toHaveAttribute('src', /bg_spring\.jpg/u); + if (mapSeasonArtifactRoot) { + await map.screenshot({ path: resolve(mapSeasonArtifactRoot, 'season-spring-to-summer-midpoint.png') }); + } + + await expect(outgoingLayer).not.toHaveClass(/is-transitioning/u); + await expect(outgoingLayer.locator('img')).toHaveCount(0); + const finalState = await map.locator('.map-area').evaluate((area) => { + const probe = ( + window as unknown as { + __mapSeasonTransitionProbe: { area: Element; road: Element | null; city: Element | null }; + } + ).__mapSeasonTransitionProbe; + const rect = area.getBoundingClientRect(); + return { + areaMounted: probe.area === area, + roadMounted: probe.road === area.querySelector('.map-bgroad'), + cityMounted: probe.city === area.querySelector('.city-base'), + width: rect.width, + height: rect.height, + }; + }); + expect(finalState).toEqual({ + areaMounted: true, + roadMounted: true, + cityMounted: true, + width: 700, + height: 500, + }); + if (mapSeasonArtifactRoot) { + await map.screenshot({ path: resolve(mapSeasonArtifactRoot, 'season-summer-complete.png') }); + } + + await page.setViewportSize({ width: 500, height: 900 }); + await expect + .poll(() => + map.locator('.map-area').evaluate((area) => { + const rect = area.getBoundingClientRect(); + return { width: rect.width, height: rect.height }; + }) + ) + .toEqual({ width: 500, height: 357.140625 }); + await map.locator('.map-area').evaluate((area) => { + Object.defineProperty(window, '__mobileMapSeasonTransitionProbe', { + configurable: true, + value: area, + }); + }); + + state.currentMonth = 7; + await emitReadModelInvalidation(page, readModelInvalidation({ lobby: true, map: true })); + await expect(map).toContainText('185年 7月'); + await expect(currentLayer.locator('img')).toHaveAttribute('src', /bg_fall\.jpg/u); + await expect(outgoingLayer).not.toHaveClass(/is-transitioning/u); + await expect(outgoingLayer.locator('img')).toHaveCount(0); + expect( + await map.locator('.map-area').evaluate((area) => { + const probe = (window as unknown as { __mobileMapSeasonTransitionProbe: Element }) + .__mobileMapSeasonTransitionProbe; + const rect = area.getBoundingClientRect(); + return { + areaMounted: probe === area, + width: rect.width, + height: rect.height, + }; + }) + ).toEqual({ areaMounted: true, width: 500, height: 357.140625 }); + if (mapSeasonArtifactRoot) { + await map.screenshot({ path: resolve(mapSeasonArtifactRoot, 'season-fall-mobile-complete.png') }); + } +}); + +test('reduced-motion map swaps the decoded seasonal background without a fade', async ({ page }) => { + const state: NavigationFixture = { + officerLevel: 5, + permission: 2, + nationLevel: 3, + stage: 0, + npcMode: 1, + generalMeCalls: 0, + operations: [], + currentMonth: 3, + validMapImages: true, + }; + await page.emulateMedia({ reducedMotion: 'reduce' }); + await installRealtimeHarness(page); + await installFixture(page, state); + await page.setViewportSize({ width: 1200, height: 900 }); + await waitForMain(page); + await waitForMainRealtime(page); + + const map = page.locator('[data-main-target="map"] .map-viewer').first(); + const currentLayer = map.locator('[data-map-background-layer="current"]'); + const outgoingLayer = map.locator('[data-map-background-layer="outgoing"]'); + await expect(currentLayer.locator('img')).toHaveAttribute('src', /bg_spring\.jpg/u); + await outgoingLayer.evaluate((outgoing) => { + let transitionCount = 0; + const observer = new MutationObserver(() => { + if (outgoing.classList.contains('is-transitioning')) transitionCount += 1; + }); + observer.observe(outgoing, { attributes: true, attributeFilter: ['class'] }); + Object.defineProperty(window, '__reducedMotionMapProbe', { + configurable: true, + value: { + observer, + get transitionCount() { + return transitionCount; + }, + }, + }); + }); + + state.currentMonth = 4; + await emitReadModelInvalidation(page, readModelInvalidation({ lobby: true, map: true })); + await expect(map).toContainText('185年 4月'); + await expect(currentLayer.locator('img')).toHaveAttribute('src', /bg_summer\.jpg/u); + await page.waitForTimeout(100); + await expect(outgoingLayer).not.toHaveClass(/is-transitioning/u); + await expect(outgoingLayer.locator('img')).toHaveCount(0); + expect( + await outgoingLayer.evaluate(() => { + const probe = ( + window as unknown as { + __reducedMotionMapProbe: { observer: MutationObserver; transitionCount: number }; + } + ).__reducedMotionMapProbe; + probe.observer.disconnect(); + return probe.transitionCount; + }) + ).toBe(0); +}); + +test('seasonless map keeps its fixed background and does not start a month-boundary crossfade', async ({ page }) => { + const state: NavigationFixture = { + officerLevel: 5, + permission: 2, + nationLevel: 3, + stage: 0, + npcMode: 1, + generalMeCalls: 0, + operations: [], + currentMonth: 3, + mapName: 'ludo_rathowm', + validMapImages: true, + }; + await installRealtimeHarness(page); + await installFixture(page, state); + await page.setViewportSize({ width: 1200, height: 900 }); + await waitForMain(page); + await waitForMainRealtime(page); + + const map = page.locator('[data-main-target="map"] .map-viewer').first(); + const currentLayer = map.locator('[data-map-background-layer="current"]'); + const outgoingLayer = map.locator('[data-map-background-layer="outgoing"]'); + await expect(currentLayer.locator('img')).toHaveAttribute('src', /map\/ludo_rathowm\/back\.jpg/u); + await map.locator('.map-area').evaluate((area) => { + const outgoing = area.querySelector('[data-map-background-layer="outgoing"]'); + let transitionCount = 0; + const observer = new MutationObserver(() => { + if (outgoing?.classList.contains('is-transitioning')) transitionCount += 1; + }); + if (outgoing) observer.observe(outgoing, { attributes: true, attributeFilter: ['class'] }); + Object.defineProperty(window, '__seasonlessMapProbe', { + configurable: true, + value: { + area, + outgoing, + observer, + get transitionCount() { + return transitionCount; + }, + }, + }); + }); + + state.currentMonth = 4; + await emitReadModelInvalidation(page, readModelInvalidation({ lobby: true, map: true })); + await expect(map).toContainText('185年 4月'); + await page.waitForTimeout(650); + + await expect(currentLayer.locator('img')).toHaveAttribute('src', /map\/ludo_rathowm\/back\.jpg/u); + await expect(outgoingLayer).not.toHaveClass(/is-transitioning/u); + await expect(outgoingLayer.locator('img')).toHaveCount(0); + expect(state.imageRequests?.some((url) => url.includes('/game/map/che/bg_summer.jpg')) ?? false).toBe(false); + expect( + await map.locator('.map-area').evaluate((area) => { + const probe = ( + window as unknown as { + __seasonlessMapProbe: { + area: Element; + observer: MutationObserver; + transitionCount: number; + }; + } + ).__seasonlessMapProbe; + probe.observer.disconnect(); + return { areaMounted: probe.area === area, transitionCount: probe.transitionCount }; + }) + ).toEqual({ areaMounted: true, transitionCount: 0 }); + if (mapSeasonArtifactRoot) { + await map.screenshot({ path: resolve(mapSeasonArtifactRoot, 'seasonless-ludo-complete.png') }); + } +}); + test('same-account main tabs share one realtime diff and exclude a tab while sync is off', async ({ context, page, diff --git a/app/game-frontend/e2e/nationGeneralSecret.spec.ts b/app/game-frontend/e2e/nationGeneralSecret.spec.ts index 906c40d2..47f4426c 100644 --- a/app/game-frontend/e2e/nationGeneralSecret.spec.ts +++ b/app/game-frontend/e2e/nationGeneralSecret.spec.ts @@ -205,6 +205,86 @@ test('nation generals keeps the 1000px legacy grid and redacted member columns', await expect(page.locator('#nation-general-list')).toContainText('?'); }); +test('nation generals top controls share fixed Lumen state geometry on desktop and mobile', async ({ + page, +}, testInfo) => { + await install(page); + const evidence: Record = {}; + + for (const viewport of [ + { width: 1200, height: 900 }, + { width: 500, height: 900 }, + ]) { + await page.setViewportSize(viewport); + await page.goto('nation/generals'); + await expect(page.locator('#nation-general-list')).toBeVisible(); + const controls = [ + page.getByRole('button', { name: '돌아가기' }), + page.getByRole('button', { name: '갱신' }), + page.getByRole('button', { name: '보기 모드⌄' }), + page.getByRole('button', { name: '열 선택⌄' }), + ]; + const viewportEvidence: Record = {}; + + for (const control of controls) { + const label = (await control.textContent())?.trim() ?? 'unknown'; + await expect(control).toHaveClass(/legacy-button--fixed-height/u); + const measure = () => + control.evaluate((element) => { + const rect = element.getBoundingClientRect(); + const style = getComputedStyle(element); + return { + top: rect.top, + bottom: rect.bottom, + height: rect.height, + marginTop: style.marginTop, + borderBottomWidth: style.borderBottomWidth, + borderRadius: style.borderRadius, + backgroundColor: style.backgroundColor, + fontFamily: style.fontFamily, + fontSize: style.fontSize, + }; + }); + await page.mouse.move(viewport.width - 1, viewport.height - 1); + const base = await measure(); + expect(base).toMatchObject({ + height: 32, + marginTop: '0px', + borderBottomWidth: '4px', + borderRadius: '5.25px', + fontSize: '14px', + }); + expect(base.fontFamily).toContain('Pretendard'); + + await control.hover(); + const hover = await measure(); + expect(hover).toMatchObject({ height: 31, marginTop: '1px', borderBottomWidth: '3px' }); + expect(hover.bottom).toBeCloseTo(base.bottom, 2); + + const box = await control.boundingBox(); + if (!box) throw new Error(`${label} control is not measurable`); + await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); + await page.mouse.down(); + const active = await measure(); + expect(active).toMatchObject({ height: 30, marginTop: '2px', borderBottomWidth: '2px' }); + expect(active.bottom).toBeCloseTo(base.bottom, 2); + await page.mouse.move(viewport.width - 1, viewport.height - 1); + await page.mouse.up(); + viewportEvidence[label] = { default: base, hover, active }; + } + evidence[`${viewport.width}x${viewport.height}`] = viewportEvidence; + await page.screenshot({ + path: testInfo.outputPath(`nation-general-buttons-${viewport.width}.png`), + fullPage: true, + }); + } + + await testInfo.attach('nation-general-button-geometry', { + body: JSON.stringify(evidence, null, 2), + contentType: 'application/json', + }); +}); + test('nation generals restores Ref group, saved view, sort, and Korean search behavior', async ({ page }, testInfo) => { await install(page); await page.setViewportSize({ width: 1200, height: 900 }); @@ -405,17 +485,20 @@ test('secret office renders five Ref-style command briefs and the forbidden erro '5 : 휴식', ]); await expect(commandRows.nth(2)).toHaveAttribute('title', '【다른장수】에게 쌀 200을 증여'); - const geometry = await page.locator('#secret-general-list .turns').first().evaluate((element) => { - const rect = element.getBoundingClientRect(); - const style = getComputedStyle(element); - return { - width: rect.width, - height: rect.height, - fontSize: style.fontSize, - textAlign: style.textAlign, - horizontalOverflow: element.scrollWidth - element.clientWidth, - }; - }); + const geometry = await page + .locator('#secret-general-list .turns') + .first() + .evaluate((element) => { + const rect = element.getBoundingClientRect(); + const style = getComputedStyle(element); + return { + width: rect.width, + height: rect.height, + fontSize: style.fontSize, + textAlign: style.textAlign, + horizontalOverflow: element.scrollWidth - element.clientWidth, + }; + }); expect(geometry.width).toBeGreaterThanOrEqual(190); expect(geometry.width).toBeLessThanOrEqual(230); expect(geometry.height).toBeGreaterThanOrEqual(60); diff --git a/app/game-frontend/e2e/pastPlays.spec.ts b/app/game-frontend/e2e/pastPlays.spec.ts index 5ee95071..be294422 100644 --- a/app/game-frontend/e2e/pastPlays.spec.ts +++ b/app/game-frontend/e2e/pastPlays.spec.ts @@ -278,8 +278,8 @@ test('past plays is available without a current general and preserves desktop in await expect(detailToggle).toHaveAttribute('aria-expanded', 'true'); await expect(page.locator('.archive-general-card')).toHaveAttribute('data-general-basic-card', ''); await expect(page.locator('.archive-general-card [role="progressbar"]')).toHaveCount(14); - await expect(page.locator('[data-general-battle-summary]')).toContainText('승률62.5%'); - await expect(page.locator('[data-general-battle-summary]')).toContainText('살상률75.0%'); + await expect(page.locator('[data-general-battle-summary]')).toContainText('승률62.50%'); + await expect(page.locator('[data-general-battle-summary]')).toContainText('살상률75.00%'); const hallBattle = page.locator('[data-hall-battle-record]'); await expect(hallBattle).toContainText('명예의 전당 보존 기록'); await expect(hallBattle).toContainText('항목별 기록 시점이 서로 다를 수 있습니다.'); diff --git a/app/game-frontend/e2e/tournamentBracket.spec.ts b/app/game-frontend/e2e/tournamentBracket.spec.ts index 1b539f13..9fa44672 100644 --- a/app/game-frontend/e2e/tournamentBracket.spec.ts +++ b/app/game-frontend/e2e/tournamentBracket.spec.ts @@ -395,7 +395,10 @@ test('join refresh shows the assigned preliminary group immediately with accessi await refresh.focus(); await expect(refresh).toBeFocused(); await refresh.hover(); - await expect(refresh).toHaveCSS('filter', 'brightness(1.25)'); + await expect(refresh).toHaveCSS('filter', 'none'); + await expect(refresh).toHaveCSS('height', '43px'); + await expect(refresh).toHaveCSS('margin-top', '1px'); + await expect(refresh).toHaveCSS('border-bottom-width', '3px'); expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(390); }); @@ -602,7 +605,11 @@ test('mobile betting rankings use tabs and keep dedicated icons beside general n await expect(dialog.getByText('예상 환수금 280')).toBeVisible(); await dialog.getByLabel('베팅 금액').selectOption('50'); await expect(dialog.getByText('예상 환수금 1,400')).toBeVisible(); - await persistScreenshot(page, 'tournament-betting-dialog-mobile', testInfo.outputPath('betting-dialog-mobile.webp')); + await persistScreenshot( + page, + 'tournament-betting-dialog-mobile', + testInfo.outputPath('betting-dialog-mobile.webp') + ); await dialog.getByRole('button', { name: '베팅 등록' }).click(); await expect(dialog).not.toBeVisible(); await expect(page.getByRole('status')).toHaveText('베팅이 등록되었습니다.'); diff --git a/app/game-frontend/src/assets/styles/legacy-controls.css b/app/game-frontend/src/assets/styles/legacy-controls.css index b7111403..2b2fcba0 100644 --- a/app/game-frontend/src/assets/styles/legacy-controls.css +++ b/app/game-frontend/src/assets/styles/legacy-controls.css @@ -144,7 +144,7 @@ /* * Ref Bootstrap 5.2 + Lumen button family. This class owns the common raised * edge and pressed movement. Semantic modifiers below only select face, edge, - * and text colors; width and fixed-height compensation stay with the owner. + * and text colors; width and the optional fixed-height value stay with the owner. * Existing semantic modifiers also opt in for backward compatibility. */ .legacy-button:is( @@ -173,6 +173,15 @@ vertical-align: middle; } +/* + * Top bars and other fixed rows keep their owner-provided height while using + * the same Lumen edge movement. Shrinking the box with the edge keeps its + * bottom coordinate fixed instead of moving the whole control down. + */ +.legacy-button.legacy-button--fixed-height { + height: var(--legacy-button-height); +} + .legacy-button.legacy-button--secondary { --legacy-button-bg: var(--sammo-button-secondary-bg); --legacy-button-border: var(--sammo-button-secondary-border); @@ -213,6 +222,10 @@ background: var(--legacy-button-bg); } +.legacy-button.legacy-button--fixed-height:not(:disabled, [aria-disabled='true']):is(:hover, [aria-expanded='true']) { + height: calc(var(--legacy-button-height) - 1px); +} + .legacy-button:is( .legacy-button--lumen, .legacy-button--primary, @@ -244,6 +257,10 @@ box-shadow: none; } +.legacy-button.legacy-button--fixed-height:not(:disabled, [aria-disabled='true']):active { + height: calc(var(--legacy-button-height) - 2px); +} + .legacy-button:is( .legacy-button--lumen, .legacy-button--primary, diff --git a/app/game-frontend/src/components/command/ReservedCommandEditor.vue b/app/game-frontend/src/components/command/ReservedCommandEditor.vue index 0fc29698..b7ff6956 100644 --- a/app/game-frontend/src/components/command/ReservedCommandEditor.vue +++ b/app/game-frontend/src/components/command/ReservedCommandEditor.vue @@ -588,7 +588,13 @@ const clickOutsideMenu = (event: Event) => { - +
@@ -806,8 +812,7 @@ const clickOutsideMenu = (event: Event) => { } .control-pad > button, .clock, -.legacy-menu > summary, -.select-command { +.legacy-menu > summary { box-sizing: border-box; min-height: 34px; border: 0; @@ -822,6 +827,12 @@ const clickOutsideMenu = (event: Event) => { cursor: pointer; list-style: none; } +.select-command { + --legacy-button-height: 34px; + display: grid; + place-items: center; + padding: 4px; +} .clock { background: #345c85; font-variant-numeric: tabular-nums; @@ -1024,9 +1035,6 @@ const clickOutsideMenu = (event: Event) => { grid-template-columns: 5fr 7fr; order: 1; } -.advanced-actions > * { - border-radius: 0 !important; -} .bottom-actions { display: grid; grid-template-columns: repeat(3, 1fr); diff --git a/app/game-frontend/src/components/main/GeneralBattleSummary.vue b/app/game-frontend/src/components/main/GeneralBattleSummary.vue index 982bd647..7b2ec503 100644 --- a/app/game-frontend/src/components/main/GeneralBattleSummary.vue +++ b/app/game-frontend/src/components/main/GeneralBattleSummary.vue @@ -61,11 +61,12 @@ const killRate = computed(() => {