diff --git a/app/game-api/test/commandInput.test.ts b/app/game-api/test/commandInput.test.ts index 97d5c0c1..ad464973 100644 --- a/app/game-api/test/commandInput.test.ts +++ b/app/game-api/test/commandInput.test.ts @@ -6,10 +6,7 @@ import { } from '@sammo-ts/logic'; import { describe, expect, it } from 'vitest'; -import { - buildTurnCommandInputFields, - parseReservedTurnArgs, -} from '../src/turns/commandInput.js'; +import { buildTurnCommandInputFields, parseReservedTurnArgs } from '../src/turns/commandInput.js'; describe('turn command argument input', () => { it('builds supported fields for every argument-bearing command module', async () => { @@ -22,6 +19,9 @@ describe('turn command argument input', () => { key: spec.key, fields: buildTurnCommandInputFields(spec), })); + const nationFields = nation + .filter((spec) => spec.reqArg) + .map((spec) => ({ key: spec.key, fields: buildTurnCommandInputFields(spec) })); expect(argumentSpecs).toHaveLength(44); expect(fields.every((entry) => entry.fields.length > 0)).toBe(true); @@ -32,6 +32,34 @@ describe('turn command argument input', () => { { key: 'destNationId', kind: 'select', optionSource: 'nations' }, { key: 'amountList', kind: 'numberTuple' }, ]); + + expect( + nationFields + .filter((entry) => entry.key !== 'che_발령') + .flatMap((entry) => + entry.fields + .filter((field) => field.optionSource === 'cities' || field.optionSource === 'nations') + .map((field) => `${entry.key}:${field.optionSource}`) + ) + .sort() + ).toEqual( + [ + 'che_급습:nations', + 'che_물자원조:nations', + 'che_백성동원:cities', + 'che_불가침제의:nations', + 'che_불가침파기제의:nations', + 'che_선전포고:nations', + 'che_수몰:cities', + 'che_이호경식:nations', + 'che_종전제의:nations', + 'che_천도:cities', + 'che_초토화:cities', + 'che_피장파장:nations', + 'che_허보:cities', + 'cr_인구이동:cities', + ].sort() + ); }); it('normalizes valid arguments and rejects malformed or wrong-scope commands', async () => { @@ -50,8 +78,6 @@ describe('turn command argument input', () => { amount: 200, destGeneralId: 7, }); - await expect(parseReservedTurnArgs('general', 'che_포상', {})).rejects.toThrow( - 'Unknown general turn command' - ); + await expect(parseReservedTurnArgs('general', 'che_포상', {})).rejects.toThrow('Unknown general turn command'); }); }); diff --git a/app/game-frontend/e2e/commandArguments.spec.ts b/app/game-frontend/e2e/commandArguments.spec.ts index 4bb3bc29..4ca368ca 100644 --- a/app/game-frontend/e2e/commandArguments.spec.ts +++ b/app/game-frontend/e2e/commandArguments.spec.ts @@ -522,6 +522,21 @@ const commandTable = { buildCityCommand('che_백성동원', '백성동원'), buildCityCommand('che_수몰', '수몰'), buildCityCommand('che_허보', '허보'), + buildNationCommand('che_이호경식', '이호경식'), + buildNationCommand('che_급습', '급습'), + { + ...buildNationCommand('che_피장파장', '피장파장'), + inputFields: [ + ...buildNationCommand('che_피장파장', '피장파장').inputFields, + { + key: 'commandType', + label: '대응 명령', + kind: 'select', + required: true, + options: [{ value: 'che_수몰', label: '수몰' }], + }, + ], + }, ], }, ], @@ -815,7 +830,7 @@ const install = async (page: Page, rejectGeneral = false, commandTableResponse: { id: 2, name: '허창', level: 7, region: 2, x: 240, y: 180, path: [1] }, ], regionMap: { 1: '하북', 2: '예주' }, - levelMap: { 8: '특' }, + levelMap: { 8: '특', 7: '대' }, }); if (name === 'auth.status') return response({ ok: true }); if (name === 'lobby.info') @@ -1778,18 +1793,25 @@ test('uses the map to choose a nation target in the chief command window', async await page.screenshot({ path: test.info().outputPath('chief-nation-map-option.png'), fullPage: true }); }); -test('shows city or capital maps for every requested chief command', async ({ page }) => { +test('shows a map and target details for every city or nation argument chief command except assignment', async ({ + page, +}) => { await install(page); await page.setViewportSize({ width: 1200, height: 900 }); const cases = [ - { category: '인사', action: '발령', mode: 'city' }, { category: '특수', action: '초토화', mode: 'city' }, { category: '특수', action: '천도', mode: 'city' }, - { category: '특수', action: '증축', mode: 'capital' }, - { category: '특수', action: '감축', mode: 'capital' }, { category: '전략', action: '수몰', mode: 'city' }, { category: '전략', action: '허보', mode: 'city' }, { category: '전략', action: '백성동원', mode: 'city' }, + { category: '외교', action: '원조', mode: 'nation' }, + { category: '외교', action: '불가침 제의', mode: 'nation' }, + { category: '외교', action: '선전포고', mode: 'nation' }, + { category: '외교', action: '종전 제의', mode: 'nation' }, + { category: '외교', action: '불가침 파기 제의', mode: 'nation' }, + { category: '전략', action: '이호경식', mode: 'nation' }, + { category: '전략', action: '급습', mode: 'nation' }, + { category: '전략', action: '피장파장', mode: 'nation' }, ]; for (const entry of cases) { @@ -1803,24 +1825,51 @@ test('shows city or capital maps for every requested chief command', async ({ pa await expect(map, `${entry.action} 지도`).toBeVisible(); await expect(form.getByTestId('command-argument-guidance')).toBeVisible(); - if (entry.mode === 'capital') { - await expect(form.getByTestId('command-map-selection-status')).toContainText('현재 수도업'); - await expect(form.getByTestId('command-map-target-summary')).toContainText('현재 수도'); - await expect(map.locator('.city-base').first()).toHaveJSProperty('tagName', 'DIV'); - expect( - await map - .locator('.city-base') - .first() - .evaluate((node) => getComputedStyle(node).cursor) - ).toBe('default'); - } else { - await map.locator('.city-base').nth(1).click(); + await map.locator('.city-base').nth(1).click(); + if (entry.mode === 'city') { await expect(form.locator('#command-arg-destCityId')).toHaveValue('2'); await expect(form.getByTestId('command-map-selection-status')).toContainText('선택 도시허창'); + await expect(form.getByTestId('command-map-target-summary')).toContainText( + '허창 · 적국 · 예주 · 대 · 현재 도시에서 1칸' + ); + } else { + await expect(form.locator('#command-arg-destNationId')).toHaveValue('2'); + await expect(form.getByTestId('command-map-selection-status')).toContainText('선택 국가적국'); + await expect(form.getByTestId('command-map-target-summary')).toContainText('적국 · 수도 허창 · 도시 1개'); } + await expect(form.getByTestId('current-city-marker')).toHaveAttribute('aria-label', '현재 도시 업'); } - await page.screenshot({ path: test.info().outputPath('chief-command-map-guidance.png'), fullPage: true }); + await page.screenshot({ path: test.info().outputPath('chief-command-target-map-details.png'), fullPage: true }); + + await page.setViewportSize({ width: 500, height: 900 }); + await page.goto('/che/chief-center'); + await page.getByRole('button', { name: '1턴 명령 입력', exact: true }).click(); + const picker = page.getByTestId('command-picker'); + await picker.getByRole('button', { name: /^(?:국가:)?전략$/, exact: true }).click(); + await picker.getByRole('button', { name: /피장파장/ }).click(); + const form = picker.getByTestId('command-argument-form'); + const map = form.getByTestId('command-argument-map'); + const targetCity = map.locator('.city-base').nth(1); + await targetCity.hover(); + expect(await targetCity.evaluate((node) => getComputedStyle(node).cursor)).toBe('pointer'); + await targetCity.focus(); + await expect(targetCity).toBeFocused(); + await targetCity.click(); + await expect(form.locator('#command-arg-destNationId')).toHaveValue('2'); + const geometry = await picker.evaluate((element) => ({ + pickerWidth: element.getBoundingClientRect().width, + pickerOverflow: element.scrollWidth - element.clientWidth, + documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth, + mapInsidePicker: + element.querySelector('[data-testid="command-argument-map"]')!.getBoundingClientRect().right <= + element.getBoundingClientRect().right, + })); + expect(geometry).toEqual({ pickerWidth: 500, pickerOverflow: 0, documentOverflow: 0, mapInsidePicker: true }); + await page.screenshot({ + path: test.info().outputPath('chief-command-target-map-details-mobile.png'), + fullPage: true, + }); }); test('prioritizes own cities for assignment while retaining other map targets', async ({ page }) => { diff --git a/app/game-frontend/e2e/inGameMenus.spec.ts b/app/game-frontend/e2e/inGameMenus.spec.ts index 442a0535..3a9515cf 100644 --- a/app/game-frontend/e2e/inGameMenus.spec.ts +++ b/app/game-frontend/e2e/inGameMenus.spec.ts @@ -2,6 +2,7 @@ import { mkdir, readFile, writeFile } from 'node:fs/promises'; import { basename, resolve } from 'node:path'; import { expect, test, type Locator, type Page, type Route } from '@playwright/test'; import { gameBasePath, gameProfile, gameTrpcRoute } from './gameTestPaths.js'; +import { touchDrag } from './touchDrag.js'; const response = (data: unknown) => ({ result: { data } }); const parityArtifactDir = process.env.MENU_PARITY_ARTIFACT_DIR; @@ -1469,6 +1470,70 @@ test('내 정보&설정에서 모바일 메인 패널을 드래그하거나 버 .toEqual(defaultOrder); }); +test('실제 모바일 터치로 메인 패널 순서를 재정렬한다', async ({ browser }, testInfo) => { + const configuredBaseUrl = testInfo.project.use.baseURL; + if (typeof configuredBaseUrl !== 'string') { + throw new Error('Playwright baseURL is required for the mobile touch contract'); + } + const context = await browser.newContext({ + baseURL: configuredBaseUrl, + viewport: { width: 390, height: 844 }, + screen: { width: 390, height: 844 }, + deviceScaleFactor: 1, + isMobile: true, + hasTouch: true, + colorScheme: 'dark', + }); + const mobilePage = await context.newPage(); + try { + const state: FixtureState = { permission: 'head', myset: 3, settingMutations: [], accessPages: [] }; + await install(mobilePage, state); + await mobilePage.goto('my-page'); + await mobilePage.getByRole('button', { name: '순서 바꾸기', exact: true }).click(); + + const dialog = mobilePage.getByRole('dialog', { name: '모바일 레이아웃 순서 바꾸기' }); + const commands = dialog.locator('[data-mobile-layout-id="commands"]'); + const nationMenu = dialog.locator('[data-mobile-layout-id="nation-menu"]'); + await touchDrag(mobilePage, nationMenu, commands); + + await expect + .poll(() => + dialog + .locator('[data-mobile-layout-id]') + .evaluateAll((elements) => elements.map((element) => element.getAttribute('data-mobile-layout-id'))) + ) + .toEqual([ + 'nation-menu', + 'commands', + 'nation', + 'general', + 'city', + 'map', + 'records', + 'global-menu', + 'messages', + ]); + await dialog.screenshot({ path: testInfo.outputPath('mobile-main-panel-touch-dialog.png') }); + await dialog.getByRole('button', { name: '적용', exact: true }).click(); + await expect + .poll(() => mobilePage.evaluate(() => JSON.parse(localStorage.getItem('sam.mobileMainPanelOrder.v1') ?? '[]'))) + .toEqual([ + 'nation-menu', + 'commands', + 'nation', + 'general', + 'city', + 'map', + 'records', + 'global-menu', + 'messages', + ]); + await mobilePage.screenshot({ path: testInfo.outputPath('mobile-main-panel-touch.png'), fullPage: true }); + } finally { + await context.close(); + } +}); + for (const [label, failure] of [ ['daemon timeout', 'TIMEOUT'], ['engine transaction 오류', 'INTERNAL_SERVER_ERROR'], diff --git a/app/game-frontend/e2e/npcPolicy.spec.ts b/app/game-frontend/e2e/npcPolicy.spec.ts index 81fd4f2c..97e0b2ab 100644 --- a/app/game-frontend/e2e/npcPolicy.spec.ts +++ b/app/game-frontend/e2e/npcPolicy.spec.ts @@ -3,6 +3,7 @@ import { mkdir, readFile } from 'node:fs/promises'; import { dirname, resolve } from 'node:path'; import { fileURLToPath } from 'node:url'; import { gameProfile, gameTrpcRoute } from './gameTestPaths.js'; +import { touchDrag } from './touchDrag.js'; type FixtureState = { permissionLevel: number; @@ -320,6 +321,58 @@ test('500px layout stacks policy fields and priority panels like the reference', await screenshot(page, 'core-npc-policy-mobile.png'); }); +test('physical mobile touch reorders NPC priority across active and inactive lists', async ({ browser }, testInfo) => { + const configuredBaseUrl = testInfo.project.use.baseURL; + if (typeof configuredBaseUrl !== 'string') { + throw new Error('Playwright baseURL is required for the mobile touch contract'); + } + const context = await browser.newContext({ + baseURL: configuredBaseUrl, + viewport: { width: 390, height: 844 }, + screen: { width: 390, height: 844 }, + deviceScaleFactor: 1, + isMobile: true, + hasTouch: true, + colorScheme: 'dark', + }); + const mobilePage = await context.newPage(); + try { + await installFixture(mobilePage, { permissionLevel: 4, mutations: [] }); + await gotoPolicy(mobilePage); + await expect(mobilePage.locator('#container')).toBeVisible(); + + const nationPanel = mobilePage.locator('.priority-panel').first(); + const activeList = nationPanel.locator('.priority-column').nth(1).locator('.priority-list'); + const activeRows = activeList.locator('.priority-item'); + await touchDrag( + mobilePage, + activeRows.nth(0), + activeRows.nth(3), + { targetYRatio: 0.9 } + ); + await expect + .poll(() => + activeList + .locator('.priority-item .priority_info > span:nth-child(2)') + .first() + .textContent() + ) + .toBe('선전포고'); + + const activeItem = activeList.getByText('불가침제의', { exact: true }); + const inactiveList = nationPanel.locator('.priority-column').first().locator('.priority-list'); + await touchDrag(mobilePage, activeItem, inactiveList.locator('.inactive-header')); + + await expect(inactiveList.getByText('불가침제의', { exact: true })).toBeVisible(); + await expect( + activeList.getByText('불가침제의', { exact: true }) + ).toHaveCount(0); + await mobilePage.screenshot({ path: testInfo.outputPath('npc-priority-mobile-touch.png'), fullPage: true }); + } finally { + await context.close(); + } +}); + test('a read-level user sees enabled legacy controls but a forbidden save retains the draft', async ({ page }) => { const state: FixtureState = { permissionLevel: 1, failNextMutation: true, mutations: [] }; await installFixture(page, state); diff --git a/app/game-frontend/e2e/touchDrag.ts b/app/game-frontend/e2e/touchDrag.ts new file mode 100644 index 00000000..c79bcb99 --- /dev/null +++ b/app/game-frontend/e2e/touchDrag.ts @@ -0,0 +1,77 @@ +import type { Locator, Page } from '@playwright/test'; + +type TouchPoint = { + x: number; + y: number; +}; + +type TouchDragOptions = { + targetYRatio?: number; +}; + +const pointIn = async (locator: Locator, yRatio = 0.5): Promise => { + const box = await locator.boundingBox(); + if (!box) { + throw new Error('Touch drag target has no visible bounding box'); + } + return { + x: box.x + box.width / 2, + y: box.y + box.height * yRatio, + }; +}; + +export const touchDrag = async ( + page: Page, + source: Locator, + target: Locator, + options: TouchDragOptions = {} +): Promise => { + await source.scrollIntoViewIfNeeded(); + await target.scrollIntoViewIfNeeded(); + const from = await pointIn(source); + const to = await pointIn(target, options.targetYRatio); + const cdp = await page.context().newCDPSession(page); + await page.evaluate(() => { + document.documentElement.removeAttribute('data-playwright-touch-trusted'); + document.addEventListener( + 'touchstart', + (event) => document.documentElement.setAttribute('data-playwright-touch-trusted', String(event.isTrusted)), + { capture: true, once: true } + ); + }); + + await cdp.send('Input.dispatchTouchEvent', { + type: 'touchStart', + touchPoints: [{ ...from, id: 0, radiusX: 1, radiusY: 1, force: 1 }], + }); + await page.waitForTimeout(50); + const dispatchMove = async (ratio: number) => { + await cdp.send('Input.dispatchTouchEvent', { + type: 'touchMove', + touchPoints: [ + { + x: from.x + (to.x - from.x) * ratio, + y: from.y + (to.y - from.y) * ratio, + id: 0, + radiusX: 1, + radiusY: 1, + force: 1, + }, + ], + }); + }; + await dispatchMove(0.05); + await page.waitForTimeout(100); + for (let step = 2; step <= 20; step += 1) { + await dispatchMove(step / 20); + await page.waitForTimeout(16); + } + await page.waitForTimeout(50); + await cdp.send('Input.dispatchTouchEvent', { type: 'touchEnd', touchPoints: [] }); + const trusted = await page.evaluate( + () => document.documentElement.getAttribute('data-playwright-touch-trusted') === 'true' + ); + if (!trusted) { + throw new Error('Chromium did not dispatch a trusted touchstart event'); + } +}; diff --git a/app/game-frontend/package.json b/app/game-frontend/package.json index 992a9a0f..5297e4cf 100644 --- a/app/game-frontend/package.json +++ b/app/game-frontend/package.json @@ -47,6 +47,7 @@ "mitt": "^3.0.1", "pinia": "^3.0.4", "vue": "^3.5.26", + "vuedraggable-es": "4.1.1", "vue-router": "^4.6.4", "zod": "^4.3.5" }, diff --git a/app/game-frontend/src/components/command/commandArgumentPresentation.ts b/app/game-frontend/src/components/command/commandArgumentPresentation.ts index c5e80015..0e98a3a2 100644 --- a/app/game-frontend/src/components/command/commandArgumentPresentation.ts +++ b/app/game-frontend/src/components/command/commandArgumentPresentation.ts @@ -1,6 +1,10 @@ +import type { CommandInputField } from './types'; + +export type CommandArgumentMapTarget = 'city' | 'nation' | 'capital'; + export type CommandArgumentPresentation = { lines: string[]; - mapTarget?: 'city' | 'nation' | 'capital'; + mapTarget?: CommandArgumentMapTarget; }; const cityTarget = (lines: string[]): CommandArgumentPresentation => ({ lines, mapTarget: 'city' }); @@ -98,4 +102,18 @@ const PRESENTATIONS: Record = { export const commandArgumentPresentation = (commandKey: string): CommandArgumentPresentation => PRESENTATIONS[commandKey] ?? { lines: [] }; +/** + * 대상 지도는 명령명 목록이 아니라 API가 내린 실제 인자 계약을 우선한다. + * 인자가 없는 증축·감축의 수도 확인 지도만 presentation의 명시적 target을 사용한다. + */ +export const resolveCommandArgumentMapTarget = ( + commandKey: string, + fields: readonly CommandInputField[] +): CommandArgumentMapTarget | undefined => { + const selectableTargets = fields.filter((field) => field.kind === 'select'); + if (selectableTargets.some((field) => field.optionSource === 'cities')) return 'city'; + if (selectableTargets.some((field) => field.optionSource === 'nations')) return 'nation'; + return commandArgumentPresentation(commandKey).mapTarget; +}; + export const presentedCommandKeys = (): string[] => Object.keys(PRESENTATIONS); diff --git a/app/game-frontend/src/components/main/CommandArgumentForm.vue b/app/game-frontend/src/components/main/CommandArgumentForm.vue index 57e266d4..5f7278a4 100644 --- a/app/game-frontend/src/components/main/CommandArgumentForm.vue +++ b/app/game-frontend/src/components/main/CommandArgumentForm.vue @@ -1,7 +1,7 @@