merge: 최신 main을 인사부 모바일 UX 작업에 통합
This commit is contained in:
@@ -416,6 +416,22 @@ const commandTable = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'che_첩보',
|
||||
name: '첩보',
|
||||
reqArg: true,
|
||||
possible: true,
|
||||
status: 'needsInput',
|
||||
inputFields: [
|
||||
{
|
||||
key: 'destCityId',
|
||||
label: '대상 도시',
|
||||
kind: 'select',
|
||||
required: true,
|
||||
optionSource: 'cities',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
@@ -921,6 +937,48 @@ test('renders and accepts every Ref strategy command at mobile width', async ({
|
||||
await picker.screenshot({ path: test.info().outputPath('all-strategy-commands-mobile.png') });
|
||||
});
|
||||
|
||||
test('shows and reserves the Ref spy command for a user on desktop and mobile', async ({ page }) => {
|
||||
const requests = await install(page);
|
||||
await page.setViewportSize({ width: 1200, height: 900 });
|
||||
await page.goto('/');
|
||||
const editor = page.locator('[data-command-scope="general"]');
|
||||
await editor.getByRole('button', { name: '1턴 명령 입력', exact: true }).click();
|
||||
|
||||
let picker = page.getByTestId('command-picker');
|
||||
await picker.getByRole('button', { name: '군사', exact: true }).click();
|
||||
const spy = picker.getByRole('button', { name: '첩보', exact: true });
|
||||
await expect(spy).toBeVisible();
|
||||
await spy.hover();
|
||||
await spy.focus();
|
||||
await expect(spy).toBeFocused();
|
||||
await spy.click();
|
||||
const form = picker.getByTestId('command-argument-form');
|
||||
await expect(form.getByTestId('command-argument-guidance')).toContainText(
|
||||
'선택한 도시에 첩보를 실행합니다.'
|
||||
);
|
||||
await expect(form.getByTestId('command-argument-guidance')).toContainText(
|
||||
'인접 도시에서는 더 많은 정보를 얻습니다.'
|
||||
);
|
||||
await form.locator('select').selectOption('2');
|
||||
await picker.screenshot({ path: test.info().outputPath('spy-command-desktop-1200.png') });
|
||||
await picker.getByRole('button', { name: '입력', exact: true }).click();
|
||||
await expect(editor.locator('.action-column > div').first()).toHaveText('【허창】에 첩보 실행');
|
||||
expect(JSON.stringify(requests)).toContain('"action":"che_첩보","args":{"destCityId":2}');
|
||||
|
||||
await page.setViewportSize({ width: 500, height: 900 });
|
||||
await editor.getByRole('button', { name: '2턴 명령 입력', exact: true }).click();
|
||||
picker = page.getByTestId('command-picker');
|
||||
await picker.getByRole('button', { name: '군사', exact: true }).click();
|
||||
await expect(picker.getByRole('button', { name: '첩보', exact: true })).toBeVisible();
|
||||
const geometry = await picker.evaluate((element) => ({
|
||||
width: element.getBoundingClientRect().width,
|
||||
horizontalOverflow: element.scrollWidth - element.clientWidth,
|
||||
}));
|
||||
expect(geometry.width).toBeLessThanOrEqual(500);
|
||||
expect(geometry.horizontalOverflow).toBeLessThanOrEqual(0);
|
||||
await picker.screenshot({ path: test.info().outputPath('spy-command-mobile-500.png') });
|
||||
});
|
||||
|
||||
test('defaults founding to a Ref-selectable nation trait and paints color option labels', async ({
|
||||
page,
|
||||
}) => {
|
||||
|
||||
@@ -52,6 +52,8 @@ type NavigationFixture = {
|
||||
currentYear?: number;
|
||||
currentMonth?: number;
|
||||
serverId?: string;
|
||||
profile?: string;
|
||||
gameIdx?: number;
|
||||
scenarioTitle?: string;
|
||||
nationColor?: string;
|
||||
lastExecuted?: string | null;
|
||||
@@ -529,6 +531,8 @@ const installFixture = async (page: Page, state: NavigationFixture) => {
|
||||
return response({
|
||||
myGeneral: { id: 7, name: '메뉴검증장수' },
|
||||
serverId: state.serverId ?? 'che_fixture_season',
|
||||
profile: state.profile ?? 'che',
|
||||
gameIdx: state.gameIdx ?? 101,
|
||||
year: state.currentYear ?? 185,
|
||||
month: state.currentMonth ?? 1,
|
||||
turnTerm: 10,
|
||||
@@ -1112,7 +1116,9 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
|
||||
await expect(page.locator('.main-mobile-bottom')).toBeHidden();
|
||||
await expect(page.locator('.layout-desktop')).toBeVisible();
|
||||
await expect(page.locator('.layout-mobile')).toHaveCount(0);
|
||||
await expect(page.getByRole('heading', { name: '메인 화면 검증 시나리오', exact: true })).toHaveCount(1);
|
||||
await expect(page.getByRole('heading', { name: '메인 화면 검증 시나리오 체섭 101기', exact: true })).toHaveCount(
|
||||
1
|
||||
);
|
||||
await expect(page.locator('.game-shell__subtitle')).toHaveCount(0);
|
||||
await expect(page.locator('.legacy-game-info')).toContainText('현재: 185년 1월');
|
||||
await expect(page.locator('.legacy-game-info')).toContainText('턴: 10분');
|
||||
@@ -1264,6 +1270,56 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
|
||||
await persistArtifact(page, `${basePath.slice(1)}-desktop-1200`);
|
||||
});
|
||||
|
||||
test('shows the persisted official game index beside the scenario title without viewport overflow', async ({ page }) => {
|
||||
const state: NavigationFixture = {
|
||||
officerLevel: 5,
|
||||
permission: 2,
|
||||
nationLevel: 3,
|
||||
stage: 0,
|
||||
npcMode: 1,
|
||||
profile: 'hwe',
|
||||
gameIdx: 7,
|
||||
scenarioTitle: '메인 화면 검증 시나리오',
|
||||
generalMeCalls: 0,
|
||||
operations: [],
|
||||
};
|
||||
await installFixture(page, state);
|
||||
if (artifactRoot) await mkdir(resolve(artifactRoot), { recursive: true });
|
||||
|
||||
for (const viewport of [
|
||||
{ width: 1200, height: 900 },
|
||||
{ width: 500, height: 900 },
|
||||
]) {
|
||||
await page.setViewportSize(viewport);
|
||||
if (page.url() === 'about:blank') await waitForMain(page);
|
||||
|
||||
const title = page.getByRole('heading', { name: '메인 화면 검증 시나리오 훼섭 7기', exact: true });
|
||||
await expect(title).toBeVisible();
|
||||
const geometry = await title.evaluate((element) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const mainRect = element.closest<HTMLElement>('.main-page')?.getBoundingClientRect();
|
||||
const style = getComputedStyle(element);
|
||||
return {
|
||||
left: rect.left,
|
||||
right: rect.right,
|
||||
mainLeft: mainRect?.left,
|
||||
mainRight: mainRect?.right,
|
||||
fontFamily: style.fontFamily,
|
||||
fontSize: style.fontSize,
|
||||
lineHeight: style.lineHeight,
|
||||
documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
|
||||
};
|
||||
});
|
||||
expect(geometry.left).toBeGreaterThanOrEqual(geometry.mainLeft ?? 0);
|
||||
expect(geometry.right).toBeLessThanOrEqual(geometry.mainRight ?? viewport.width);
|
||||
expect(geometry.documentOverflow).toBeLessThanOrEqual(0);
|
||||
expect(geometry.fontSize).toBe('25.6px');
|
||||
expect(geometry.lineHeight).toBe('38.4px');
|
||||
expect(geometry.fontFamily).toContain('Pretendard');
|
||||
await persistArtifact(page, `official-game-index-${viewport.width}`);
|
||||
}
|
||||
});
|
||||
|
||||
test('nation split buttons keep square inner corners and a single divider in every interaction state', async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
@@ -2239,7 +2295,7 @@ test('the 939/940 boundary switches to the Ref-style 500px single document', asy
|
||||
await expect(page.locator('.main-mobile-bottom')).toBeVisible();
|
||||
|
||||
await page.setViewportSize({ width: 500, height: 900 });
|
||||
await expect(page.getByRole('heading', { name: '모바일 검증 시나리오', exact: true })).toHaveCount(1);
|
||||
await expect(page.getByRole('heading', { name: '모바일 검증 시나리오 체섭 101기', exact: true })).toHaveCount(1);
|
||||
await expect(page.locator('.game-shell__subtitle')).toHaveCount(0);
|
||||
await expect(page.locator('.legacy-game-info')).toContainText('현재: 185년 1월');
|
||||
await expect(page.locator('.legacy-game-info')).toContainText('턴: 10분');
|
||||
|
||||
@@ -6,6 +6,7 @@ import { trpc } from '../utils/trpc';
|
||||
type InheritStatus = Awaited<ReturnType<typeof trpc.inherit.getStatus.query>>;
|
||||
type InheritLog = Awaited<ReturnType<typeof trpc.inherit.getLogs.query>>[number];
|
||||
type JoinConfig = Awaited<ReturnType<typeof trpc.join.getConfig.query>>;
|
||||
type UniqueItemSlot = InheritStatus['availableUnique'][number]['slot'];
|
||||
|
||||
type BuffKey =
|
||||
| 'warAvoidRatio'
|
||||
@@ -67,6 +68,14 @@ const pointOrder = [
|
||||
'betting',
|
||||
] as const;
|
||||
|
||||
const uniqueItemSlotOrder: readonly UniqueItemSlot[] = ['horse', 'weapon', 'book', 'item'];
|
||||
const uniqueItemSlotLabels: Record<UniqueItemSlot, string> = {
|
||||
horse: '명마',
|
||||
weapon: '무기',
|
||||
book: '서적',
|
||||
item: '도구',
|
||||
};
|
||||
|
||||
const pointHelp: Record<string, string> = {
|
||||
previous: '이전에 물려받은 포인트입니다.',
|
||||
lived_month: '살아남은 기간입니다. (1개월 단위)',
|
||||
@@ -196,6 +205,15 @@ const specialNameMap = computed(() => {
|
||||
const selectedSpecialWarInfo = computed(
|
||||
() => status.value?.availableSpecialWar.find((entry) => entry.key === nextSpecialKey.value)?.info ?? ''
|
||||
);
|
||||
const availableUniqueGroups = computed(() =>
|
||||
uniqueItemSlotOrder
|
||||
.map((slot) => ({
|
||||
slot,
|
||||
label: uniqueItemSlotLabels[slot],
|
||||
items: status.value?.availableUnique.filter((item) => item.slot === slot) ?? [],
|
||||
}))
|
||||
.filter((group) => group.items.length > 0)
|
||||
);
|
||||
|
||||
const buffCost = (key: BuffKey, target: number): number => {
|
||||
const points = status.value?.inheritConst.inheritBuffPoints ?? [0, 0, 0, 0, 0, 0];
|
||||
@@ -518,9 +536,11 @@ onMounted(() => {
|
||||
<label for="specific-unique">유니크 경매</label>
|
||||
<select id="specific-unique" v-model="uniqueForm.itemId">
|
||||
<option disabled value="">유니크 선택</option>
|
||||
<option v-for="item in status.availableUnique" :key="item.key" :value="item.key">
|
||||
{{ item.name }}
|
||||
</option>
|
||||
<optgroup v-for="group in availableUniqueGroups" :key="group.slot" :label="group.label">
|
||||
<option v-for="item in group.items" :key="item.key" :value="item.key">
|
||||
{{ item.name }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="control-row">
|
||||
|
||||
@@ -95,6 +95,27 @@ const nationAccess = computed(() => ({
|
||||
}));
|
||||
const nationColor = computed(() => nation.value?.color ?? '#000000');
|
||||
const voteActive = computed(() => Boolean(frontStatus.value?.latestVote));
|
||||
const profileLabels: Record<string, string> = {
|
||||
che: '체',
|
||||
kwe: '퀘',
|
||||
pwe: '풰',
|
||||
twe: '퉤',
|
||||
nya: '냐',
|
||||
pya: '퍄',
|
||||
hwe: '훼',
|
||||
};
|
||||
const gameProfileLabel = computed(() => {
|
||||
const profile = lobbyInfo.value?.profile?.trim();
|
||||
return profile ? (profileLabels[profile] ?? profile) : '';
|
||||
});
|
||||
const gameTitle = computed(() => {
|
||||
const scenarioTitle = lobbyInfo.value?.scenarioTitle || '전장 현황';
|
||||
const profileLabel = gameProfileLabel.value;
|
||||
const gameIdx = lobbyInfo.value?.gameIdx;
|
||||
return profileLabel && typeof gameIdx === 'number' && Number.isInteger(gameIdx) && gameIdx > 0
|
||||
? `${scenarioTitle} ${profileLabel}섭 ${gameIdx}기`
|
||||
: scenarioTitle;
|
||||
});
|
||||
const recordTimeSuffixPattern = /\d{2}:\d{2}(?:<\/>)?\s*$/u;
|
||||
const formatRecord = (entry: { text: string; createdAt?: string | Date }, appendTime = false): string => {
|
||||
if (!appendTime || recordTimeSuffixPattern.test(entry.text)) return formatLog(entry.text);
|
||||
@@ -199,7 +220,7 @@ watch(
|
||||
|
||||
<header class="game-shell__header">
|
||||
<h1 class="game-shell__title">
|
||||
{{ lobbyInfo?.scenarioTitle || '전장 현황' }}
|
||||
{{ gameTitle }}
|
||||
</h1>
|
||||
<div class="game-shell__actions desktop-action-controls">
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user