diff --git a/app/game-frontend/e2e/commandArguments.spec.ts b/app/game-frontend/e2e/commandArguments.spec.ts index 82a33833..a8fd6951 100644 --- a/app/game-frontend/e2e/commandArguments.spec.ts +++ b/app/game-frontend/e2e/commandArguments.spec.ts @@ -2032,7 +2032,10 @@ test('enters general and nation command arguments and sends exact values', async const rect = area.getBoundingClientRect(); return { width: rect.width, height: rect.height }; }); - await page.getByTestId('command-picker').getByRole('button', { name: / 입력$/ }).click(); + await page + .getByTestId('command-picker') + .getByRole('button', { name: / 입력$/ }) + .click(); await expect(page.locator('[data-command-scope="general"] .action-column > div').first()).toHaveText( '【허창】에 화계실행' ); @@ -3495,7 +3498,10 @@ test('keeps the shared main and chief shell geometry and interaction states', as await chiefArgumentForm.getByRole('button', { name: '쌀' }).click(); await chiefArgumentForm.locator('input[type=number]').fill('300'); await chiefArgumentForm.locator('select').selectOption('2'); - await page.getByTestId('command-picker').getByRole('button', { name: / 입력$/ }).click(); + await page + .getByTestId('command-picker') + .getByRole('button', { name: / 입력$/ }) + .click(); await expect(page.locator('[data-command-scope="nation"] .action-column > div').first()).toHaveText( '【관우】 쌀 300 포상' ); @@ -4130,8 +4136,89 @@ test('opens chief argument input as the same full-screen overlay with selected t expect(geometry.overlay).toMatchObject({ x: 0, y: 0, width: 1200, height: 900 }); expect(geometry.scrollWidth).toBe(geometry.clientWidth); await expect(overlay.getByTestId('command-argument-map')).toBeVisible(); + // Ref che_발령.vue는 distanceList를 받지만 표시하지 않는다. + await expect(overlay.getByTestId('city-distance-list')).toHaveCount(0); await page.screenshot({ path: testInfo.outputPath('chief-argument-overlay-1200.png') }); await page.goBack(); await expect(page.getByTestId('command-picker')).toHaveCount(0); expect(page.url()).toBe(mainUrl); }); + +// Ref ProcessCity + CitiesBasedOnDistance: 화계 계열·강행·첩보는 3칸, 이동·출병은 1칸까지 현재 도시 기준 +// 거리별 도시를 magenta/orange/yellow 밑줄 글자로 보여 주고, 누르면 대상 도시로 고른다. +for (const viewport of [ + { width: 1200, height: 900 }, + { width: 390, height: 844 }, +] as const) { + test(`lists Ref-style cities by distance for city target commands at ${viewport.width}px`, async ({ + page, + }, testInfo) => { + const requests = await install(page); + await page.setViewportSize(viewport); + await page.goto(gamePath('/')); + const editor = page.locator('[data-command-scope="general"]:visible'); + const openCommand = async (turn: number, category: string, name: string) => { + await editor.getByRole('button', { name: `${turn}턴 명령 입력`, exact: true }).click(); + const listPicker = page.getByTestId('command-picker'); + await listPicker.getByRole('button', { name: category, exact: true }).click(); + await listPicker.getByRole('button', { name, exact: true }).click(); + const overlay = page.getByRole('dialog', { name: `${name} ${turn}턴 명령 입력` }); + await expect(overlay).toBeVisible(); + return overlay; + }; + + let overlay = await openCommand(1, '계략', '화계'); + const list = overlay.getByTestId('city-distance-list'); + await expect(list).toBeVisible(); + await expect(list.locator('.city-distance-row')).toHaveText([ + '1칸 떨어진 도시: 허창', + '2칸 떨어진 도시:', + '3칸 떨어진 도시:', + ]); + const link = list.getByRole('button', { name: '허창', exact: true }); + const style = await link.evaluate((element) => { + const computed = getComputedStyle(element); + return { + color: computed.color, + textDecorationLine: computed.textDecorationLine, + fontWeight: computed.fontWeight, + }; + }); + expect(style).toEqual({ color: 'rgb(255, 0, 255)', textDecorationLine: 'underline', fontWeight: '400' }); + await expect(link).toHaveAttribute('aria-pressed', 'false'); + + await link.click(); + await expect(link).toHaveAttribute('aria-pressed', 'true'); + await expect(overlay.getByTestId('command-argument-form').locator('select')).toHaveValue('2'); + await expect(overlay.getByTestId('command-map-selection-status')).toContainText('허창'); + const geometry = await overlay.evaluate((element) => { + const fields = element.querySelector('.argument-fields')!.getBoundingClientRect(); + const distance = element.querySelector('[data-testid="city-distance-list"]')!; + const rect = distance.getBoundingClientRect(); + return { + fields: fields.toJSON(), + list: rect.toJSON(), + fontSize: getComputedStyle(distance).fontSize, + scrollWidth: element.scrollWidth, + clientWidth: element.clientWidth, + }; + }); + await writeFile(testInfo.outputPath(`city-distance-${viewport.width}.json`), JSON.stringify(geometry, null, 2)); + await page.screenshot({ path: testInfo.outputPath(`city-distance-${viewport.width}.png`) }); + expect(geometry.fontSize).toBe('14px'); + expect(geometry.list.x).toBeGreaterThanOrEqual(geometry.fields.x); + expect(geometry.list.right).toBeLessThanOrEqual(geometry.fields.right); + expect(geometry.scrollWidth).toBe(geometry.clientWidth); + + await overlay.getByRole('button', { name: '화계 입력', exact: true }).click(); + await expect + .poll(() => JSON.stringify(requests)) + .toContain('"turnList":[0],"action":"che_화계","args":{"destCityId":2}'); + + overlay = await openCommand(2, '군사', '출병'); + await expect(overlay.getByTestId('city-distance-list').locator('.city-distance-row')).toHaveText([ + '1칸 떨어진 도시: 허창', + ]); + await overlay.getByRole('button', { name: '명령 취소', exact: true }).click(); + }); +} diff --git a/app/game-frontend/src/components/command/commandCityDistance.ts b/app/game-frontend/src/components/command/commandCityDistance.ts new file mode 100644 index 00000000..81737192 --- /dev/null +++ b/app/game-frontend/src/components/command/commandCityDistance.ts @@ -0,0 +1,50 @@ +import type { CommandMapLayout } from './types'; + +// Ref `v_processing.php`의 ProcessCity는 명령별 `JSCitiesBasedOnDistance(현재 도시, N)` 결과를 +// `CitiesBasedOnDistance.vue`로 `N칸 떨어진 도시:` 줄에 보여 준다. 사령턴 도시 명령(천도·수몰 등)은 +// 빈 목록을 보내 줄이 없고, 발령·인구이동은 값을 보내지만 화면에 쓰지 않는다. +export const COMMAND_CITY_DISTANCE_RANGE: Readonly> = { + che_이동: 1, + che_출병: 1, + che_강행: 3, + che_첩보: 3, + che_화계: 3, + che_탈취: 3, + che_파괴: 3, + che_선동: 3, +}; + +export type CityDistanceGroup = { + distance: number; + cityIds: number[]; +}; + +type CityPathSource = Pick; + +/** + * Ref `searchDistance($from, $maxDist, true)`와 같은 BFS 순서로 1칸부터 maxDistance칸까지의 도시를 모은다. + * 같은 거리 안의 순서는 앞 거리 도시 순서와 각 도시 연결 목록 순서를 따른다. 빈 거리도 Ref처럼 남긴다. + */ +export const citiesBasedOnDistance = ( + startCityId: number, + cityList: readonly CityPathSource[], + maxDistance: number +): CityDistanceGroup[] => { + const paths = new Map(cityList.map((city) => [city.id, city.path])); + const visited = new Set([startCityId]); + const groups: CityDistanceGroup[] = []; + let frontier = [startCityId]; + for (let distance = 1; distance <= maxDistance; distance += 1) { + const next: number[] = []; + for (const cityId of frontier) { + for (const adjacentId of paths.get(cityId) ?? []) { + if (visited.has(adjacentId)) continue; + visited.add(adjacentId); + next.push(adjacentId); + } + } + groups.push({ distance, cityIds: next }); + frontier = next; + } + return groups; +}; diff --git a/app/game-frontend/src/components/main/CommandArgumentForm.vue b/app/game-frontend/src/components/main/CommandArgumentForm.vue index 79ce03bd..25b85410 100644 --- a/app/game-frontend/src/components/main/CommandArgumentForm.vue +++ b/app/game-frontend/src/components/main/CommandArgumentForm.vue @@ -10,6 +10,7 @@ import MapViewer from './MapViewer.vue'; import NationColorSelect from './NationColorSelect.vue'; import { commandArgumentPresentation, resolveCommandArgumentMapTarget } from '../command/commandArgumentPresentation'; import { commandCityOptions } from '../command/commandArgumentOptions'; +import { COMMAND_CITY_DISTANCE_RANGE, citiesBasedOnDistance } from '../command/commandCityDistance'; import { sortCommandGeneralOptions } from '../command/commandGeneralOptions'; import { commandArgumentFieldContract, @@ -309,6 +310,23 @@ const distanceFromMyCity = (destination: number): number | null => { return null; }; +// Ref CitiesBasedOnDistance.vue의 거리별 글자색이다. 도시 이름을 누르면 대상 도시로 고른다. +const CITY_DISTANCE_COLORS: Readonly> = { 1: 'magenta', 2: 'orange', 3: 'yellow' }; +const cityDistanceGroups = computed(() => { + const range = COMMAND_CITY_DISTANCE_RANGE[props.commandKey]; + const start = props.mapData?.myCity; + const layout = props.mapLayout; + const field = cityTargetField.value; + if (!range || !start || !layout || !field) return []; + const names = new Map(layout.cityList.map((city) => [city.id, city.name])); + const selectable = new Set(optionsFor(field).map((option) => option.value)); + return citiesBasedOnDistance(start, layout.cityList, range).map((group) => ({ + distance: group.distance, + color: CITY_DISTANCE_COLORS[group.distance], + cities: group.cityIds.map((id) => ({ id, name: names.get(id) ?? String(id), selectable: selectable.has(id) })), + })); +}); + const mapTargetSummary = computed(() => { if (!props.mapData || !props.mapLayout) return ''; if (mapTarget.value === 'city' && mapSelectedCityId.value) { @@ -623,6 +641,34 @@ watch( /> {{ commandTargetDescription(commandKey, selectedOptionFor(field)) }} +
+
+ {{ group.distance }}칸 떨어진 도시: + +
+
}; + +const readJson = (path: string): T => JSON.parse(readFileSync(new URL(path, import.meta.url), 'utf8')) as T; + +// Ref `hwe/func.php` searchDistance와 `func_legacy.php` JSCitiesBasedOnDistance 원문을 +// che 지도 CityConst로 실행한 결과(2026-09-23, 생성 절차는 report 참고)다. +const refDistances = readJson>>( + './fixtures/ref-cities-based-on-distance-che.json' +); +const cheMap = readJson('../../../resources/map/map_che.json'); +const cityList = cheMap.cities.map((city) => ({ id: city.id, path: city.connections })); + +void test('matches Ref JSCitiesBasedOnDistance order for every che city up to 3 distance', () => { + assert.equal(Object.keys(refDistances).length, cityList.length); + for (const city of cityList) { + const expected = refDistances[String(city.id)]; + assert.ok(expected, `Ref fixture has city ${city.id}`); + const actual = citiesBasedOnDistance(city.id, cityList, 3); + assert.deepEqual( + Object.fromEntries(actual.map((group) => [String(group.distance), group.cityIds])), + expected, + `city ${city.id}` + ); + assert.deepEqual(citiesBasedOnDistance(city.id, cityList, 1), [{ distance: 1, cityIds: expected['1'] }]); + } +}); + +void test('keeps empty distance rows like Ref when the graph ends early', () => { + const tiny = [ + { id: 1, path: [2] }, + { id: 2, path: [1] }, + ]; + assert.deepEqual(citiesBasedOnDistance(1, tiny, 3), [ + { distance: 1, cityIds: [2] }, + { distance: 2, cityIds: [] }, + { distance: 3, cityIds: [] }, + ]); + assert.deepEqual(citiesBasedOnDistance(99, tiny, 1), [{ distance: 1, cityIds: [] }]); +}); + +void test('uses the Ref ProcessCity distance for each general city command', () => { + assert.deepEqual(COMMAND_CITY_DISTANCE_RANGE, { + che_이동: 1, + che_출병: 1, + che_강행: 3, + che_첩보: 3, + che_화계: 3, + che_탈취: 3, + che_파괴: 3, + che_선동: 3, + }); + for (const nationCommand of ['che_천도', 'che_수몰', 'che_허보', 'che_초토화', 'che_백성동원', 'che_발령']) { + assert.equal(Object.hasOwn(COMMAND_CITY_DISTANCE_RANGE, nationCommand), false); + } +}); diff --git a/app/game-frontend/test/fixtures/ref-cities-based-on-distance-che.json b/app/game-frontend/test/fixtures/ref-cities-based-on-distance-che.json new file mode 100644 index 00000000..d3f4179f --- /dev/null +++ b/app/game-frontend/test/fixtures/ref-cities-based-on-distance-che.json @@ -0,0 +1 @@ +{"1":{"1":[9,18,70,78,80],"2":[36,77,19,81,3,23,35,2,74],"3":[37,8,17,38,39,71,72,42,65,10]},"2":{"1":[10,19,38,71,74,80],"2":[20,51,18,81,11,12,3,1],"3":[6,25,78,39,82,21,70,72,9]},"3":{"1":[70,71,72,74],"2":[1,23,35,2,10,42,19,80],"3":[9,18,78,65,17,38,20,51,73,81]},"4":{"1":[41,73,86],"2":[40,85,42,24,75],"3":[22,64,84,43,23,72,25,44]},"5":{"1":[26,27,87],"2":[44,45,46,47],"3":[75,76,88,28,48]},"6":{"1":[51,89],"2":[10,25,13,52,91],"3":[2,20,71,24,14,53,88,15,56]},"7":{"1":[31,82,83],"2":[57,92,93,11,56,21],"3":[67,15,33,34,62,12,20,38,91]},"8":{"1":[77,90],"2":[9,17,60,68],"3":[1,36,35,16,61,79]},"9":{"1":[1,36,77],"2":[18,70,78,80,37,8,17],"3":[19,81,3,23,35,2,74,39,79,90]},"10":{"1":[2,20,51,71],"2":[19,38,74,80,11,6,25,3],"3":[18,81,12,1,82,89,24,70,72]},"11":{"1":[12,20,38,82],"2":[21,39,10,2,81,7,56],"3":[83,37,51,71,19,74,80,18,31,15,91,92]},"12":{"1":[11,21,38,39],"2":[20,82,83,2,81,37],"3":[10,7,56,19,71,74,80,18,36,79]},"13":{"1":[14,53,88,89],"2":[15,30,54,45,6,52,91],"3":[56,58,92,55,49,26,27,51]},"14":{"1":[13,15,30,53,54],"2":[88,89,56,58,91,92,55,49],"3":[45,6,52,82,67,31,29,28,66]},"15":{"1":[14,56,58,91,92],"2":[13,30,53,54,82,55,67,52,89,31],"3":[88,49,7,11,29,57,59,6,93]},"16":{"1":[32,33,34,60,79],"2":[61,93,62,90,37],"3":[68,31,69,8,36,39]},"17":{"1":[35,77],"2":[23,70,8,9],"3":[42,65,1,3,90,36]},"18":{"1":[1,19,78,81],"2":[9,70,80,2,74,36,38,39],"3":[77,3,23,35,10,71,37,11,12,20]},"19":{"1":[2,18,74,80,81],"2":[10,38,71,1,78,3,39],"3":[20,51,11,12,9,70,36,72,37]},"20":{"1":[10,11,38],"2":[2,51,71,12,82,81],"3":[19,74,80,6,25,3,21,39,7,56,18]},"21":{"1":[12,83],"2":[11,38,39,7],"3":[20,82,2,81,37,31]},"22":{"1":[40,63,64],"2":[41,84,85],"3":[4,65,43]},"23":{"1":[35,42,65,70],"2":[17,72,73,84,1,3],"3":[77,4,40,63,9,18,78,80,71,74]},"24":{"1":[25,75,86],"2":[51,44,4],"3":[6,10,26,76,87,41,73]},"25":{"1":[24,51],"2":[75,86,6,10],"3":[44,4,89,2,20,71]},"26":{"1":[5,27,44,45],"2":[87,46,47,75,76,88],"3":[28,48,24,86,43,13]},"27":{"1":[5,26,45,46,47],"2":[87,44,88,28,48],"3":[75,76,13,49,66]},"28":{"1":[46,48,49],"2":[27,47,66,54],"3":[5,26,45,50,30,53,14]},"29":{"1":[50,55,59,67],"2":[66,30,58,94,57],"3":[48,49,14,54,15,69,31]},"30":{"1":[14,54,55],"2":[13,15,53,49,29,58],"3":[88,89,56,91,92,28,66,50,59,67]},"31":{"1":[7,57,92,93],"2":[82,83,67,15,56,33,34,62],"3":[11,21,29,58,59,14,91,16,69]},"32":{"1":[16,61],"2":[33,34,60,79,68],"3":[93,62,90,37]},"33":{"1":[16,34,93],"2":[32,60,79,62,31],"3":[61,90,37,69,7,57,92]},"34":{"1":[16,33,62,93],"2":[32,60,79,69,31],"3":[61,90,37,94,7,57,92]},"35":{"1":[17,23,70],"2":[77,42,65,1,3],"3":[8,9,72,73,84,18,78,80,71,74]},"36":{"1":[9,37,78],"2":[1,77,39,79,18],"3":[70,80,8,17,12,81,16,60,19]},"37":{"1":[36,39,79],"2":[9,78,12,81,16,60],"3":[1,77,18,11,21,38,19,32,33,34,61,90]},"38":{"1":[2,11,12,20,81],"2":[10,19,71,74,80,82,21,39,18],"3":[51,3,1,7,56,83,37,78]},"39":{"1":[12,37,81],"2":[11,21,38,36,79,18,19],"3":[20,82,83,2,9,78,16,60,1,74,80]},"40":{"1":[22,41,64,84],"2":[63,4,85,65],"3":[73,86,43,23]},"41":{"1":[4,40,85],"2":[73,86,22,64,84,43],"3":[42,24,75,63,65,76]},"42":{"1":[23,72,73],"2":[35,65,70,3,4],"3":[17,84,1,71,74,41,86]},"43":{"1":[76,85],"2":[44,41,64],"3":[26,75,87,4,40,22]},"44":{"1":[26,75,76,87],"2":[5,27,45,24,86,43],"3":[46,47,88,25,4,85]},"45":{"1":[26,27,88],"2":[5,44,46,47,13],"3":[87,75,76,28,48,14,53,89]},"46":{"1":[27,28,47],"2":[5,26,45,48,49],"3":[87,44,88,66,54]},"47":{"1":[27,46,48],"2":[5,26,45,28,66],"3":[87,44,88,49,50]},"48":{"1":[28,47,66],"2":[46,49,27,50],"3":[54,5,26,45,29]},"49":{"1":[28,54,66],"2":[46,48,30,53,14,50],"3":[27,47,55,13,15,29]},"50":{"1":[29,66],"2":[55,59,67,48,49],"3":[30,58,94,57,28,47,54]},"51":{"1":[6,10,25],"2":[89,2,20,71,24],"3":[13,52,91,19,38,74,80,11,3,75,86]},"52":{"1":[89,91],"2":[6,13,15,56],"3":[51,14,53,88,58,92,82]},"53":{"1":[13,14,54],"2":[88,89,15,30,49],"3":[45,6,52,91,56,58,92,55,28,66]},"54":{"1":[30,49,53,14],"2":[55,28,66,13,15],"3":[29,58,46,48,50,88,89,56,91,92]},"55":{"1":[29,30,58],"2":[50,59,67,14,54,15],"3":[66,94,57,13,53,49,56,91,92]},"56":{"1":[15,82,91,92],"2":[14,58,7,11,52,89,31],"3":[13,30,53,54,55,67,83,12,20,38,6,57,93]},"57":{"1":[31,67],"2":[7,92,93,29,58,59],"3":[82,83,15,56,33,34,62,50,55,94]},"58":{"1":[15,55,67],"2":[14,56,91,92,29,30,57,59],"3":[13,53,54,82,52,89,31,50,94]},"59":{"1":[29,67,94],"2":[50,55,57,58,69],"3":[66,30,31,15,62]},"60":{"1":[16,61,79,90],"2":[32,33,34,68,37,8],"3":[93,62,36,39,77]},"61":{"1":[32,60,68],"2":[16,79,90],"3":[33,34,37,8]},"62":{"1":[34,69,93],"2":[16,33,94,31],"3":[32,60,79,59,7,57,92]},"63":{"1":[22,84],"2":[40,64,65],"3":[41,85,23]},"64":{"1":[22,40,85],"2":[63,41,84,43],"3":[4,65,76]},"65":{"1":[23,84],"2":[35,42,70,40,63],"3":[17,72,73,1,3,22,41,64]},"66":{"1":[48,49,50],"2":[28,47,54,29],"3":[46,27,30,53,14,55,59,67]},"67":{"1":[29,57,58,59],"2":[50,55,31,15,94],"3":[66,30,7,92,93,14,56,91,69]},"68":{"1":[61,90],"2":[32,60,8],"3":[16,79,77]},"69":{"1":[62,94],"2":[34,93,59],"3":[16,33,31,29,67]},"70":{"1":[1,3,23,35],"2":[9,18,78,80,71,72,74,42,65,17],"3":[36,77,19,81,2,10,73,84]},"71":{"1":[2,3,10],"2":[19,38,74,80,70,72,20,51],"3":[18,81,11,12,1,23,35,42,6,25]},"72":{"1":[3,42],"2":[70,71,74,23,73],"3":[1,35,2,10,19,80,65,4]},"73":{"1":[4,42],"2":[41,86,23,72],"3":[40,85,24,75,35,65,70,3]},"74":{"1":[2,3,19,80],"2":[10,38,71,70,72,18,81,1],"3":[20,51,11,12,23,35,42,78,39,9]},"75":{"1":[24,44,86],"2":[25,26,76,87,4],"3":[51,5,27,45,43,41,73]},"76":{"1":[43,44],"2":[85,26,75,87],"3":[41,64,5,27,45,24,86]},"77":{"1":[8,9,17],"2":[90,1,36,35],"3":[60,68,18,70,78,80,37,23]},"78":{"1":[1,18,36],"2":[9,70,80,19,81,37],"3":[77,3,23,35,2,74,38,39,79]},"79":{"1":[16,37,60],"2":[32,33,34,36,39,61,90],"3":[93,62,9,78,12,81,68,8]},"80":{"1":[1,2,19,74],"2":[9,18,70,78,10,38,71,81,3],"3":[36,77,23,35,20,51,11,12,39,72]},"81":{"1":[18,19,38,39],"2":[1,78,2,74,80,11,12,20,37],"3":[9,70,36,10,71,3,82,21,79]},"82":{"1":[7,11,56],"2":[31,83,12,20,38,15,91,92],"3":[57,93,21,39,10,2,81,14,58,52,89]},"83":{"1":[7,21],"2":[31,82,12],"3":[57,92,93,11,56,38,39]},"84":{"1":[40,63,65],"2":[22,41,64,23],"3":[4,85,35,42,70]},"85":{"1":[41,43,64],"2":[4,40,76,22],"3":[73,86,84,44,63]},"86":{"1":[4,24,75],"2":[41,73,25,44],"3":[40,85,42,51,26,76,87]},"87":{"1":[5,44],"2":[26,27,75,76],"3":[45,46,47,24,86,43]},"88":{"1":[13,45],"2":[14,53,89,26,27],"3":[15,30,54,6,52,91,5,44,46,47]},"89":{"1":[6,13,52,91],"2":[51,14,53,88,15,56],"3":[10,25,30,54,45,58,92,82]},"90":{"1":[8,60,68],"2":[77,16,61,79],"3":[9,17,32,33,34,37]},"91":{"1":[15,52,56,89],"2":[14,58,92,82,6,13],"3":[30,53,54,55,67,31,7,11,51,88]},"92":{"1":[15,31,56],"2":[14,58,91,7,57,93,82],"3":[13,30,53,54,55,67,52,89,83,33,34,62,11]},"93":{"1":[31,33,34,62],"2":[7,57,92,16,69],"3":[82,83,67,15,56,32,60,79,94]},"94":{"1":[59,69],"2":[29,67,62],"3":[50,55,57,58,34,93]}}