merge: 최신 main을 첩보 명령 복원에 반영
This commit is contained in:
@@ -1231,7 +1231,9 @@ test('내 정보&설정의 지난 플레이는 기본 탐색과 분리되어 오
|
||||
const actions = element.querySelector<HTMLElement>('.title-actions')!.getBoundingClientRect();
|
||||
const navigation = element.querySelector<HTMLElement>('.navigation-actions')!.getBoundingClientRect();
|
||||
const back = element.querySelector<HTMLAnchorElement>('.navigation-actions a')!.getBoundingClientRect();
|
||||
const refresh = element.querySelector<HTMLButtonElement>('.navigation-actions button')!.getBoundingClientRect();
|
||||
const refresh = element
|
||||
.querySelector<HTMLButtonElement>('.navigation-actions button')!
|
||||
.getBoundingClientRect();
|
||||
const past = element.querySelector<HTMLAnchorElement>('.past-plays-link')!.getBoundingClientRect();
|
||||
const pastStyle = getComputedStyle(element.querySelector<HTMLAnchorElement>('.past-plays-link')!);
|
||||
return {
|
||||
@@ -1269,6 +1271,77 @@ test('내 정보&설정의 지난 플레이는 기본 탐색과 분리되어 오
|
||||
}
|
||||
});
|
||||
|
||||
test('내 정보&설정에서 모바일 메인 패널을 드래그하거나 버튼으로 재정렬하고 Ref 순서로 복원한다', async ({ page }) => {
|
||||
const state: FixtureState = { permission: 'head', myset: 3, settingMutations: [], accessPages: [] };
|
||||
await install(page, state);
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.goto('my-page');
|
||||
|
||||
await page.getByRole('button', { name: '순서 바꾸기', exact: true }).click();
|
||||
const dialog = page.getByRole('dialog', { name: '모바일 레이아웃 순서 바꾸기' });
|
||||
await expect(dialog).toBeVisible();
|
||||
const readOrder = () =>
|
||||
dialog
|
||||
.locator('[data-mobile-layout-id]')
|
||||
.evaluateAll((elements) => elements.map((element) => element.getAttribute('data-mobile-layout-id')));
|
||||
const defaultOrder = [
|
||||
'commands',
|
||||
'nation-menu',
|
||||
'nation',
|
||||
'general',
|
||||
'city',
|
||||
'map',
|
||||
'records',
|
||||
'global-menu',
|
||||
'messages',
|
||||
];
|
||||
await expect.poll(readOrder).toEqual(defaultOrder);
|
||||
|
||||
await dialog
|
||||
.locator('[data-mobile-layout-id="messages"]')
|
||||
.dragTo(dialog.locator('[data-mobile-layout-id="commands"]'));
|
||||
await expect
|
||||
.poll(readOrder)
|
||||
.toEqual(['messages', 'commands', 'nation-menu', 'nation', 'general', 'city', 'map', 'records', 'global-menu']);
|
||||
await dialog.getByRole('button', { name: '지도 위로' }).click();
|
||||
await expect
|
||||
.poll(readOrder)
|
||||
.toEqual(['messages', 'commands', 'nation-menu', 'nation', 'general', 'map', 'city', 'records', 'global-menu']);
|
||||
|
||||
const dialogGeometry = await dialog.evaluate((element) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const firstItem = element.querySelector<HTMLElement>('[data-mobile-layout-id]')?.getBoundingClientRect();
|
||||
const moveButton = element.querySelector<HTMLButtonElement>('[aria-label$="아래로"]')?.getBoundingClientRect();
|
||||
return {
|
||||
rect: rect.toJSON(),
|
||||
firstItem: firstItem?.toJSON() ?? null,
|
||||
moveButton: moveButton?.toJSON() ?? null,
|
||||
overflowX: getComputedStyle(element).overflowX,
|
||||
documentWidth: document.documentElement.scrollWidth,
|
||||
};
|
||||
});
|
||||
expect(dialogGeometry.rect.left).toBeGreaterThanOrEqual(0);
|
||||
expect(dialogGeometry.rect.right).toBeLessThanOrEqual(390);
|
||||
expect(dialogGeometry.firstItem?.height).toBeGreaterThanOrEqual(44);
|
||||
expect(dialogGeometry.moveButton?.width).toBeGreaterThanOrEqual(36);
|
||||
expect(dialogGeometry.documentWidth).toBe(390);
|
||||
await persistParityArtifact(page, 'core-my-page-mobile-layout-order-dialog', dialogGeometry);
|
||||
|
||||
await dialog.getByRole('button', { name: '적용', exact: true }).click();
|
||||
await expect(dialog).toBeHidden();
|
||||
await expect
|
||||
.poll(() => page.evaluate(() => JSON.parse(localStorage.getItem('sam.mobileMainPanelOrder.v1') ?? '[]')))
|
||||
.toEqual(['messages', 'commands', 'nation-menu', 'nation', 'general', 'map', 'city', 'records', 'global-menu']);
|
||||
|
||||
await page.getByRole('button', { name: '순서 바꾸기', exact: true }).click();
|
||||
await dialog.getByRole('button', { name: 'Ref 초깃값' }).click();
|
||||
await expect.poll(readOrder).toEqual(defaultOrder);
|
||||
await dialog.getByRole('button', { name: '적용', exact: true }).click();
|
||||
await expect
|
||||
.poll(() => page.evaluate(() => JSON.parse(localStorage.getItem('sam.mobileMainPanelOrder.v1') ?? '[]')))
|
||||
.toEqual(defaultOrder);
|
||||
});
|
||||
|
||||
for (const [label, failure] of [
|
||||
['daemon timeout', 'TIMEOUT'],
|
||||
['engine transaction 오류', 'INTERNAL_SERVER_ERROR'],
|
||||
|
||||
@@ -11,6 +11,7 @@ const isLegacyRequest = (route: Route): boolean =>
|
||||
|
||||
const installArchiveViews = async (page: Page) => {
|
||||
const hallRequests: string[] = [];
|
||||
const dynastyRequests: string[] = [];
|
||||
await page.addInitScript((profile) => {
|
||||
localStorage.setItem('sammo-game-token', 'ga_archive_views');
|
||||
localStorage.setItem('sammo-game-profile', profile);
|
||||
@@ -21,6 +22,9 @@ const installArchiveViews = async (page: Page) => {
|
||||
if (operations.some((operation) => operation.startsWith('ranking.getHallOfFame'))) {
|
||||
hallRequests.push(decodeURIComponent(`${route.request().url()} ${route.request().postData() ?? ''}`));
|
||||
}
|
||||
if (operations.some((operation) => operation.startsWith('dynasty.'))) {
|
||||
dynastyRequests.push(decodeURIComponent(`${route.request().url()} ${route.request().postData() ?? ''}`));
|
||||
}
|
||||
const results = operations.map((operation) => {
|
||||
if (operation === 'auth.status') return response({ ok: true });
|
||||
if (operation === 'lobby.info') return response({ myGeneral: { id: 1, name: '기록장수' } });
|
||||
@@ -67,8 +71,8 @@ const installArchiveViews = async (page: Page) => {
|
||||
{
|
||||
id: legacy ? 101 : 1,
|
||||
source: legacy ? 'legacy' : 'current',
|
||||
sourceProfile: legacy ? 'hwe' : 'che',
|
||||
serverId: legacy ? 'hwe-old-1' : 'che-current-1',
|
||||
sourceProfile: 'che',
|
||||
serverId: legacy ? 'che-old-1' : 'che-current-1',
|
||||
phase: legacy ? '이전 1기' : '현재 1기',
|
||||
name: '촉',
|
||||
year: 215,
|
||||
@@ -93,10 +97,10 @@ const installArchiveViews = async (page: Page) => {
|
||||
if (operation === 'dynasty.getDetail') {
|
||||
return response({
|
||||
source: 'legacy',
|
||||
sourceProfile: 'hwe',
|
||||
sourceProfile: 'che',
|
||||
emperor: {
|
||||
id: 101,
|
||||
serverId: 'hwe-old-1',
|
||||
serverId: 'che-old-1',
|
||||
winnerNationId: 1,
|
||||
phase: '이전 1기',
|
||||
nationCount: '1 / 2',
|
||||
@@ -189,7 +193,7 @@ const installArchiveViews = async (page: Page) => {
|
||||
});
|
||||
await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(results) });
|
||||
});
|
||||
return { hallRequests };
|
||||
return { dynastyRequests, hallRequests };
|
||||
};
|
||||
|
||||
test('명예의 전당은 현재 profile의 현재·이전 서버 기록만 조회한다', async ({ page }, testInfo) => {
|
||||
@@ -217,19 +221,36 @@ test('명예의 전당은 현재 profile의 현재·이전 서버 기록만 조
|
||||
await page.screenshot({ path: testInfo.outputPath('hall-profile-scope-mobile.png'), fullPage: true });
|
||||
});
|
||||
|
||||
test('왕조 일람과 상세는 이전 서버 source와 profile을 유지한다', async ({ page }) => {
|
||||
await installArchiveViews(page);
|
||||
test('왕조 일람과 상세는 현재 profile의 이전 서버 기록만 조회한다', async ({ page }, testInfo) => {
|
||||
const state = await installArchiveViews(page);
|
||||
await page.setViewportSize({ width: 1200, height: 800 });
|
||||
await page.goto('dynasty');
|
||||
|
||||
await expect(page.getByText('현재 1기')).toBeVisible();
|
||||
await page.getByLabel('기록 구분').focus();
|
||||
await expect(page.getByLabel('기록 구분')).toBeFocused();
|
||||
await page.getByLabel('기록 구분').selectOption('legacy');
|
||||
await expect(page.getByText(/이전 1기.*HWE 이전 서버/)).toBeVisible();
|
||||
await expect(page.getByText(/이전 1기.*이전 서버/)).toBeVisible();
|
||||
await expect(page.getByText(/CHE 이전 서버|HWE 이전 서버/)).toHaveCount(0);
|
||||
await expect(page.locator('.dynasty-page')).toHaveCSS('width', '1000px');
|
||||
await expect(page.locator('.dynasty-table')).toHaveCSS('height', '139px');
|
||||
await expect(page.locator('.dynasty-table .phase-heading')).toHaveCSS('background-color', 'rgb(135, 206, 235)');
|
||||
await page.screenshot({ path: testInfo.outputPath('dynasty-list-profile-scope-desktop.png'), fullPage: true });
|
||||
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await expect(page.locator('.dynasty-page')).toHaveCSS('width', '1000px');
|
||||
await page.screenshot({ path: testInfo.outputPath('dynasty-list-profile-scope-mobile.png'), fullPage: true });
|
||||
|
||||
await page.setViewportSize({ width: 1200, height: 800 });
|
||||
const detailLink = page.getByRole('link', { name: '자세히' });
|
||||
await expect(detailLink).toHaveAttribute('href', /dynasty\/101\?source=legacy$/);
|
||||
await detailLink.click();
|
||||
await expect(page.getByText(/이전 1기.*HWE 이전 서버/)).toBeVisible();
|
||||
await expect(page.getByText(/이전 1기.*이전 서버/)).toBeVisible();
|
||||
await expect(page.getByText(/CHE 이전 서버|HWE 이전 서버/)).toHaveCount(0);
|
||||
await expect(page.locator('.dynasty-page')).toHaveCSS('width', '1000px');
|
||||
expect(state.dynastyRequests.some((request) => request.includes('legacy'))).toBe(true);
|
||||
expect(state.dynastyRequests.every((request) => !request.includes('sourceProfile'))).toBe(true);
|
||||
await page.screenshot({ path: testInfo.outputPath('dynasty-detail-profile-scope-desktop.png'), fullPage: true });
|
||||
});
|
||||
|
||||
test('연감 국가 라벨은 밝은 배경에 검정, 어두운 배경에 흰 글자를 사용한다', async ({ page }, testInfo) => {
|
||||
|
||||
@@ -95,11 +95,10 @@ type DashboardBundleInput = {
|
||||
const operationInput = (route: Route, index: number): DashboardBundleInput => {
|
||||
const request = route.request();
|
||||
const queryInput = new URL(request.url()).searchParams.get('input');
|
||||
const parsed = (request.postData()
|
||||
? request.postDataJSON()
|
||||
: queryInput
|
||||
? JSON.parse(queryInput)
|
||||
: {}) as Record<string, unknown>;
|
||||
const parsed = (request.postData() ? request.postDataJSON() : queryInput ? JSON.parse(queryInput) : {}) as Record<
|
||||
string,
|
||||
unknown
|
||||
>;
|
||||
const entry = (parsed[String(index)] ?? parsed) as { json?: DashboardBundleInput };
|
||||
return entry.json ?? (entry as DashboardBundleInput);
|
||||
};
|
||||
@@ -253,32 +252,32 @@ const commandTableFixture = (large: boolean, blockedCount = 0, refCategories = f
|
||||
general: draftCommands
|
||||
? draftCommandGroups
|
||||
: refCategories
|
||||
? refCommandCategoryFixture
|
||||
: large
|
||||
? ['내정', '군사', '계략'].map((category, categoryIndex) => ({
|
||||
category,
|
||||
values: Array.from({ length: 16 }, (_, localIndex) => {
|
||||
const index = categoryIndex * 16 + localIndex;
|
||||
return {
|
||||
key: `command-${index}`,
|
||||
name: index === 0 ? '주민 선정과 장기 도시 개발' : `명령 ${index}`,
|
||||
reqArg: index % 2 === 0,
|
||||
possible: index >= blockedCount,
|
||||
status: index >= blockedCount ? 'available' : 'blocked',
|
||||
inputFields: [
|
||||
{
|
||||
key: 'amount',
|
||||
label: '수량',
|
||||
kind: 'number',
|
||||
required: true,
|
||||
min: 1,
|
||||
max: 10_000,
|
||||
},
|
||||
],
|
||||
};
|
||||
}),
|
||||
}))
|
||||
: [],
|
||||
? refCommandCategoryFixture
|
||||
: large
|
||||
? ['내정', '군사', '계략'].map((category, categoryIndex) => ({
|
||||
category,
|
||||
values: Array.from({ length: 16 }, (_, localIndex) => {
|
||||
const index = categoryIndex * 16 + localIndex;
|
||||
return {
|
||||
key: `command-${index}`,
|
||||
name: index === 0 ? '주민 선정과 장기 도시 개발' : `명령 ${index}`,
|
||||
reqArg: index % 2 === 0,
|
||||
possible: index >= blockedCount,
|
||||
status: index >= blockedCount ? 'available' : 'blocked',
|
||||
inputFields: [
|
||||
{
|
||||
key: 'amount',
|
||||
label: '수량',
|
||||
kind: 'number',
|
||||
required: true,
|
||||
min: 1,
|
||||
max: 10_000,
|
||||
},
|
||||
],
|
||||
};
|
||||
}),
|
||||
}))
|
||||
: [],
|
||||
nation: [],
|
||||
inputOptions: {
|
||||
cities: Array.from({ length: 20 }, (_, index) => ({ value: index + 1, label: `도시 ${index + 1}` })),
|
||||
@@ -500,7 +499,7 @@ const installFixture = async (page: Page, state: NavigationFixture) => {
|
||||
? response({ id: 'user-7', username: 'menu-user', displayName: '메뉴 사용자' })
|
||||
: operation === 'navigation.get'
|
||||
? response(runtimeNavigation)
|
||||
: response({ ok: true })
|
||||
: response({ ok: true })
|
||||
);
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
@@ -1558,10 +1557,7 @@ test('message targets keep reply behavior and use nation-color contrast in label
|
||||
|
||||
await page.setViewportSize({ width: 500, height: 900 });
|
||||
const mobilePanel = page.locator('.mobile-message-panel');
|
||||
await expect(mobilePanel.locator('.msg-plate[data-id="101"] .msg-target')).toHaveCSS(
|
||||
'color',
|
||||
'rgb(255, 255, 255)'
|
||||
);
|
||||
await expect(mobilePanel.locator('.msg-plate[data-id="101"] .msg-target')).toHaveCSS('color', 'rgb(255, 255, 255)');
|
||||
await expect(mobilePanel.locator('.msg-plate[data-id="103"] .msg-target')).toHaveCSS('color', 'rgb(0, 0, 0)');
|
||||
await expect(mobilePanel.locator('#mailbox_list optgroup[label="밝은국"]')).toHaveCSS('color', 'rgb(0, 0, 0)');
|
||||
await persistArtifact(page, `${basePath.slice(1)}-message-nation-contrast-mobile-500`);
|
||||
@@ -2217,6 +2213,49 @@ test('the 939/940 boundary switches to the Ref-style 500px single document', asy
|
||||
]) {
|
||||
await expect(page.locator(selector)).toBeVisible();
|
||||
}
|
||||
const readMobilePanelOrder = () =>
|
||||
page
|
||||
.locator('.layout-mobile > [data-mobile-panel-id]')
|
||||
.evaluateAll((elements) => elements.map((element) => element.getAttribute('data-mobile-panel-id')));
|
||||
await expect
|
||||
.poll(readMobilePanelOrder)
|
||||
.toEqual(['commands', 'nation-menu', 'nation', 'general', 'city', 'map', 'records', 'global-menu', 'messages']);
|
||||
await page.evaluate(() => {
|
||||
localStorage.setItem(
|
||||
'sam.mobileMainPanelOrder.v1',
|
||||
JSON.stringify([
|
||||
'messages',
|
||||
'map',
|
||||
'commands',
|
||||
'nation-menu',
|
||||
'nation',
|
||||
'general',
|
||||
'city',
|
||||
'records',
|
||||
'global-menu',
|
||||
])
|
||||
);
|
||||
document.dispatchEvent(new CustomEvent('sam-mobile-main-panel-order-changed'));
|
||||
});
|
||||
await expect
|
||||
.poll(readMobilePanelOrder)
|
||||
.toEqual(['messages', 'map', 'commands', 'nation-menu', 'nation', 'general', 'city', 'records', 'global-menu']);
|
||||
const customPanelGeometry = await page.locator('.layout-mobile > [data-mobile-panel-id]').evaluateAll((elements) =>
|
||||
elements.map((element) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
return {
|
||||
id: element.getAttribute('data-mobile-panel-id'),
|
||||
top: rect.top,
|
||||
bottom: rect.bottom,
|
||||
left: rect.left,
|
||||
right: rect.right,
|
||||
};
|
||||
})
|
||||
);
|
||||
expect(customPanelGeometry.every(({ left, right }) => left >= 0 && right <= 500)).toBe(true);
|
||||
expect(
|
||||
customPanelGeometry.every((panel, index) => index === 0 || panel.top >= customPanelGeometry[index - 1]!.bottom)
|
||||
).toBe(true);
|
||||
await persistArtifact(page, `${basePath.slice(1)}-mobile-500`);
|
||||
});
|
||||
|
||||
@@ -3040,9 +3079,9 @@ for (const viewport of [
|
||||
await refreshActivityAndCommands();
|
||||
await expect(picker.getByLabel('장비 종류', { exact: true })).toHaveValue('weapon');
|
||||
await expect(picker.getByLabel('장비', { exact: true })).toHaveValue('청룡언월도');
|
||||
await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(
|
||||
viewport.width
|
||||
);
|
||||
await expect
|
||||
.poll(() => page.evaluate(() => document.documentElement.scrollWidth))
|
||||
.toBeLessThanOrEqual(viewport.width);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,420 @@
|
||||
import { expect, test, type Page, type Route } from '@playwright/test';
|
||||
|
||||
import { gameProfile, gameTrpcRoute } from './gameTestPaths.js';
|
||||
|
||||
type Role = 'head' | 'member';
|
||||
type AppointmentInput = { destGeneralId: number; destCityId: number; officerLevel: number };
|
||||
type FixtureState = {
|
||||
role: Role;
|
||||
appointed: boolean;
|
||||
secretForbidden?: boolean;
|
||||
appointmentInputs: AppointmentInput[];
|
||||
};
|
||||
|
||||
const response = (data: unknown) => ({ result: { data } });
|
||||
const errorResponse = (path: string, message: string, code = 'BAD_REQUEST') => ({
|
||||
error: { message, code: -32000, data: { code, httpStatus: code === 'FORBIDDEN' ? 403 : 400, path } },
|
||||
});
|
||||
const operations = (route: Route): string[] =>
|
||||
decodeURIComponent(new URL(route.request().url()).pathname.split('/trpc/')[1] ?? '').split(',');
|
||||
const requestInput = (route: Route, index: number): Record<string, unknown> => {
|
||||
const body: unknown = route.request().postData() ? route.request().postDataJSON() : {};
|
||||
const record = body && typeof body === 'object' ? (body as Record<string, unknown>) : {};
|
||||
const raw = record[String(index)] ?? record;
|
||||
const payload = raw && typeof raw === 'object' ? (raw as Record<string, unknown>) : {};
|
||||
const input = payload.input && typeof payload.input === 'object' ? (payload.input as Record<string, unknown>) : {};
|
||||
const json = payload.json ?? input.json ?? payload;
|
||||
return json && typeof json === 'object' ? (json as Record<string, unknown>) : {};
|
||||
};
|
||||
|
||||
const cities = [
|
||||
{
|
||||
id: 1,
|
||||
name: '허창',
|
||||
level: 7,
|
||||
region: 2,
|
||||
population: 99_000,
|
||||
populationMax: 100_000,
|
||||
agriculture: 9_500,
|
||||
agricultureMax: 10_000,
|
||||
commerce: 8_000,
|
||||
commerceMax: 10_000,
|
||||
security: 8_000,
|
||||
securityMax: 10_000,
|
||||
trust: 80,
|
||||
trade: 100,
|
||||
defence: 4_500,
|
||||
defenceMax: 5_000,
|
||||
wall: 4_500,
|
||||
wallMax: 5_000,
|
||||
supplyState: 1,
|
||||
frontState: 0,
|
||||
incomes: { gold: 1000, rice: 900, wall: 800 },
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '낙양',
|
||||
level: 6,
|
||||
region: 2,
|
||||
population: 60_000,
|
||||
populationMax: 100_000,
|
||||
agriculture: 5_000,
|
||||
agricultureMax: 10_000,
|
||||
commerce: 5_000,
|
||||
commerceMax: 10_000,
|
||||
security: 5_000,
|
||||
securityMax: 10_000,
|
||||
trust: 70,
|
||||
trade: 90,
|
||||
defence: 2_500,
|
||||
defenceMax: 5_000,
|
||||
wall: 2_500,
|
||||
wallMax: 5_000,
|
||||
supplyState: 1,
|
||||
frontState: 0,
|
||||
incomes: { gold: 800, rice: 700, wall: 600 },
|
||||
},
|
||||
] as const;
|
||||
|
||||
const overviewFixture = (state: FixtureState) => ({
|
||||
me: { id: state.role === 'head' ? 20 : 21, officerLevel: state.role === 'head' ? 5 : 1 },
|
||||
nation: {
|
||||
id: 1,
|
||||
name: '위',
|
||||
color: '#008000',
|
||||
level: 3,
|
||||
typeCode: 'che_법가',
|
||||
capitalCityId: 1,
|
||||
rate: 20,
|
||||
},
|
||||
chiefStatMin: 65,
|
||||
cities: cities.map((city) => ({
|
||||
...city,
|
||||
officers: {
|
||||
4: state.appointed
|
||||
? { id: 21, name: '장료', npcState: 0, officerLevel: 4, cityId: 1, cityName: '허창' }
|
||||
: null,
|
||||
3: null,
|
||||
2: null,
|
||||
},
|
||||
})),
|
||||
generals: [
|
||||
{
|
||||
id: 1,
|
||||
name: '조조',
|
||||
npcState: 0,
|
||||
officerLevel: 12,
|
||||
cityId: 1,
|
||||
officerCity: 0,
|
||||
stats: { leadership: 90, strength: 80, intelligence: 90 },
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
name: '순욱',
|
||||
npcState: 0,
|
||||
officerLevel: 5,
|
||||
cityId: 1,
|
||||
officerCity: 0,
|
||||
stats: { leadership: 75, strength: 70, intelligence: 90 },
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
name: '장료',
|
||||
npcState: 0,
|
||||
officerLevel: state.appointed ? 4 : 1,
|
||||
cityId: 1,
|
||||
officerCity: state.appointed ? 1 : 0,
|
||||
stats: { leadership: 80, strength: 70, intelligence: 50 },
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
name: '조홍',
|
||||
npcState: 2,
|
||||
officerLevel: 1,
|
||||
cityId: 2,
|
||||
officerCity: 0,
|
||||
stats: { leadership: 60, strength: 65, intelligence: 40 },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const secretGeneral = (id: number, name: string, cityId: number, overrides: Record<string, unknown> = {}) => ({
|
||||
id,
|
||||
name,
|
||||
npcState: 0,
|
||||
injury: 0,
|
||||
stats: { leadership: 70, strength: 70, intelligence: 70 },
|
||||
leadershipBonus: 0,
|
||||
experienceLevel: 9,
|
||||
troopId: 0,
|
||||
troopName: null,
|
||||
gold: 1000,
|
||||
rice: 2000,
|
||||
cityId,
|
||||
cityName: cityId === 1 ? '허창' : '낙양',
|
||||
defenceTrain: 90,
|
||||
defenceTrainText: '☆',
|
||||
crewTypeId: 1,
|
||||
crewTypeName: '보병',
|
||||
crew: 300,
|
||||
train: 90,
|
||||
atmos: 90,
|
||||
killTurn: 7,
|
||||
turnTime: '2026-01-01T01:02:00.000Z',
|
||||
reservedCommands: ['농지 개간', '훈련'],
|
||||
...overrides,
|
||||
});
|
||||
|
||||
const secretFixture = () => ({
|
||||
nation: { id: 1, name: '위', color: '#008000', level: 3 },
|
||||
viewer: { generalId: 20, permission: 1 },
|
||||
summary: {
|
||||
gold: 4000,
|
||||
rice: 8000,
|
||||
crew: 1200,
|
||||
generalCount: 4,
|
||||
averageGold: 1000,
|
||||
averageRice: 2000,
|
||||
readiness: {
|
||||
90: { crew: 1200, generals: 4 },
|
||||
80: { crew: 1200, generals: 4 },
|
||||
60: { crew: 1200, generals: 4 },
|
||||
},
|
||||
},
|
||||
generals: [
|
||||
secretGeneral(1, '조조', 1, { leadershipBonus: 6 }),
|
||||
secretGeneral(20, '순욱', 1, { leadershipBonus: 3 }),
|
||||
secretGeneral(21, '장료', 1, {
|
||||
stats: { leadership: 80, strength: 70, intelligence: 50 },
|
||||
}),
|
||||
secretGeneral(22, '조홍', 2, { npcState: 2, reservedCommands: [] }),
|
||||
],
|
||||
});
|
||||
|
||||
const personnelGeneral = (id: number, name: string, officerLevel: number, overrides: Record<string, unknown> = {}) => ({
|
||||
id,
|
||||
name,
|
||||
npcState: 0,
|
||||
officerLevel,
|
||||
cityId: 1,
|
||||
cityName: '허창',
|
||||
troopId: 0,
|
||||
troopName: null,
|
||||
picture: null,
|
||||
imageServer: 0,
|
||||
officerCity: officerLevel >= 2 && officerLevel <= 4 ? 1 : 0,
|
||||
officerCityName: officerLevel >= 2 && officerLevel <= 4 ? '허창' : null,
|
||||
stats: { leadership: 70, strength: 70, intelligence: 70 },
|
||||
experience: 100,
|
||||
dedication: 200,
|
||||
injury: 0,
|
||||
gold: 1000,
|
||||
rice: 1000,
|
||||
crew: 100,
|
||||
personality: null,
|
||||
specialDomestic: null,
|
||||
specialWar: null,
|
||||
belong: 10,
|
||||
permission: 'normal',
|
||||
...overrides,
|
||||
});
|
||||
|
||||
const personnelFixture = (state: FixtureState) => {
|
||||
const allGenerals = [
|
||||
personnelGeneral(1, '조조', 12),
|
||||
personnelGeneral(20, '순욱', 5, { stats: { leadership: 75, strength: 70, intelligence: 90 } }),
|
||||
personnelGeneral(21, '장료', state.appointed ? 4 : 1, {
|
||||
stats: { leadership: 80, strength: 70, intelligence: 50 },
|
||||
}),
|
||||
personnelGeneral(22, '조홍', 1, {
|
||||
npcState: 2,
|
||||
cityId: 2,
|
||||
cityName: '낙양',
|
||||
stats: { leadership: 60, strength: 65, intelligence: 40 },
|
||||
}),
|
||||
];
|
||||
const canManage = state.role === 'head';
|
||||
return {
|
||||
me: {
|
||||
id: canManage ? 20 : 21,
|
||||
officerLevel: canManage ? 5 : 1,
|
||||
canManage,
|
||||
canChangePermissions: false,
|
||||
canKick: canManage,
|
||||
},
|
||||
nation: {
|
||||
id: 1,
|
||||
name: '위',
|
||||
color: '#008000',
|
||||
level: 3,
|
||||
typeCode: 'che_법가',
|
||||
capitalCityId: 1,
|
||||
chiefSet: 0,
|
||||
},
|
||||
chiefStatMin: 65,
|
||||
generals: canManage ? allGenerals : [],
|
||||
chiefAssignments: { 12: allGenerals[0], 5: allGenerals[1] },
|
||||
cityAssignments: cities.map((city) => ({
|
||||
id: city.id,
|
||||
name: city.name,
|
||||
level: city.level,
|
||||
region: city.region,
|
||||
officerSet: city.id === 1 && state.appointed ? 1 << 4 : 0,
|
||||
officers: {
|
||||
4: city.id === 1 && state.appointed ? allGenerals[2] : null,
|
||||
3: null,
|
||||
2: null,
|
||||
},
|
||||
})),
|
||||
awards: { tigers: [], eagles: [] },
|
||||
permissionCandidates: { ambassadors: [], auditors: [] },
|
||||
};
|
||||
};
|
||||
|
||||
const install = async (page: Page, state: FixtureState): Promise<void> => {
|
||||
await page.addInitScript((profile) => {
|
||||
localStorage.setItem('sammo-game-token', 'ga_city_office');
|
||||
localStorage.setItem('sammo-game-profile', profile);
|
||||
}, gameProfile);
|
||||
await page.route(gameTrpcRoute, async (route) => {
|
||||
const result = operations(route).map((operation, index) => {
|
||||
if (operation === 'auth.status') return response({ ok: true });
|
||||
if (operation === 'lobby.info') return response({ myGeneral: { id: 20, name: '순욱' } });
|
||||
if (operation === 'join.getConfig') return response({});
|
||||
if (operation === 'nation.getCityOverview') return response(overviewFixture(state));
|
||||
if (operation === 'nation.getSecretGeneralList') {
|
||||
return state.secretForbidden
|
||||
? errorResponse(
|
||||
operation,
|
||||
'권한이 부족합니다. 수뇌부가 아니거나 사관년도가 부족합니다.',
|
||||
'FORBIDDEN'
|
||||
)
|
||||
: response(secretFixture());
|
||||
}
|
||||
if (operation === 'nation.getPersonnelInfo') return response(personnelFixture(state));
|
||||
if (operation === 'nation.appoint') {
|
||||
const input = requestInput(route, index);
|
||||
state.appointmentInputs.push({
|
||||
destGeneralId: Number(input.destGeneralId),
|
||||
destCityId: Number(input.destCityId),
|
||||
officerLevel: Number(input.officerLevel),
|
||||
});
|
||||
state.appointed = true;
|
||||
return response({ ok: true });
|
||||
}
|
||||
return errorResponse(operation, `Unhandled fixture operation: ${operation}`);
|
||||
});
|
||||
await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(result) });
|
||||
});
|
||||
};
|
||||
|
||||
test('암행부 행을 도시별로 나누고 수뇌의 인사부 즉시 임명을 반영한다', async ({ page }, testInfo) => {
|
||||
const state: FixtureState = { role: 'head', appointed: false, appointmentInputs: [] };
|
||||
await install(page, state);
|
||||
await page.setViewportSize({ width: 1200, height: 900 });
|
||||
await page.goto('nation/cities');
|
||||
|
||||
await expect(page.locator('.nation-cities-page')).toBeVisible();
|
||||
await expect(page.locator('.city-user-table')).toHaveCount(0);
|
||||
await expect(page.getByRole('button', { name: '인사부 연동' })).toHaveCount(0);
|
||||
|
||||
await page.getByRole('button', { name: '암행부 연동' }).click();
|
||||
await expect(page.locator('.city-user-table')).toHaveCount(2);
|
||||
await expect(page.locator('.city[data-city-id="1"] .city-user-table tr[data-general-id="21"]')).toContainText(
|
||||
'장료'
|
||||
);
|
||||
await expect(page.locator('.city[data-city-id="2"] .city-user-table tr[data-general-id="22"]')).toContainText(
|
||||
'조홍'
|
||||
);
|
||||
await expect(page.locator('.city[data-city-id="2"] .city-user-table tr[data-general-id="21"]')).toHaveCount(0);
|
||||
await expect(page.locator('.city[data-city-id="1"] tr[data-general-id="21"] .command-attention')).toHaveText(
|
||||
'농지 개간'
|
||||
);
|
||||
|
||||
const integratedBox = await page.locator('.city[data-city-id="1"] .city-user-table').evaluate((element) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const style = getComputedStyle(element);
|
||||
return { width: rect.width, borderCollapse: style.borderCollapse, fontSize: style.fontSize };
|
||||
});
|
||||
expect(integratedBox).toEqual({ width: 941, borderCollapse: 'collapse', fontSize: '14px' });
|
||||
|
||||
await page.getByRole('button', { name: '인사부 연동' }).click();
|
||||
const ordinaryRow = page.locator('.city[data-city-id="1"] tr[data-general-id="21"]');
|
||||
await expect(ordinaryRow.locator('.appointment-button')).toHaveCount(3);
|
||||
await expect(ordinaryRow.locator('.mode-4')).toBeEnabled();
|
||||
await expect(ordinaryRow.locator('.mode-3')).toBeDisabled();
|
||||
await expect(ordinaryRow.locator('.mode-2')).toBeEnabled();
|
||||
await expect(page.locator('tr[data-general-id="1"] .appointment-button')).toHaveCount(0);
|
||||
|
||||
const disabledStyle = await ordinaryRow.locator('.mode-3').evaluate((button) => {
|
||||
const style = getComputedStyle(button);
|
||||
return { borderTopWidth: style.borderTopWidth, backgroundColor: style.backgroundColor };
|
||||
});
|
||||
expect(disabledStyle).toEqual({ borderTopWidth: '0px', backgroundColor: 'rgba(0, 0, 0, 0)' });
|
||||
const appointButton = page.getByRole('button', { name: '장료을(를) 허창 태수로 임명' });
|
||||
await appointButton.hover();
|
||||
expect(await appointButton.evaluate((button) => getComputedStyle(button).cursor)).toBe('pointer');
|
||||
await appointButton.focus();
|
||||
await expect(appointButton).toBeFocused();
|
||||
|
||||
await page.screenshot({ path: testInfo.outputPath('nation-city-integrated-desktop.png'), fullPage: true });
|
||||
await appointButton.click();
|
||||
await expect.poll(() => state.appointmentInputs).toEqual([{ destGeneralId: 21, destCityId: 1, officerLevel: 4 }]);
|
||||
await expect(page.locator('.city[data-city-id="1"] .officer-4-value')).toHaveText('장료');
|
||||
await expect(page.locator('.city[data-city-id="1"] .officer-4-value')).toHaveClass(/effective-officer/u);
|
||||
await expect(page.locator('.city[data-city-id="1"] tr[data-general-id="21"] .mode-4')).toBeDisabled();
|
||||
|
||||
await page.setViewportSize({ width: 500, height: 900 });
|
||||
expect(await page.locator('.nation-cities-page').evaluate((element) => element.getBoundingClientRect().width)).toBe(
|
||||
1000
|
||||
);
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeGreaterThanOrEqual(1000);
|
||||
await page.screenshot({ path: testInfo.outputPath('nation-city-integrated-mobile.png'), fullPage: true });
|
||||
});
|
||||
|
||||
test('수뇌 대상은 재확인하고 일반 장수에게는 임명 버튼을 열지 않는다', async ({ page }) => {
|
||||
const headState: FixtureState = { role: 'head', appointed: false, appointmentInputs: [] };
|
||||
await install(page, headState);
|
||||
await page.goto('nation/cities');
|
||||
await page.getByRole('button', { name: '암행부 연동' }).click();
|
||||
await page.getByRole('button', { name: '인사부 연동' }).click();
|
||||
|
||||
const chiefButton = page.getByRole('button', { name: '순욱을(를) 허창 태수로 임명' });
|
||||
expect(await chiefButton.evaluate((button) => getComputedStyle(button).color)).toBe('rgb(255, 0, 0)');
|
||||
page.once('dialog', async (dialog) => {
|
||||
expect(dialog.message()).toBe('수뇌입니다. 임명할까요?');
|
||||
await dialog.dismiss();
|
||||
});
|
||||
await chiefButton.click();
|
||||
await expect.poll(() => headState.appointmentInputs.length).toBe(0);
|
||||
|
||||
await page.unroute(gameTrpcRoute);
|
||||
const memberState: FixtureState = { role: 'member', appointed: false, appointmentInputs: [] };
|
||||
await install(page, memberState);
|
||||
await page.reload();
|
||||
await page.getByRole('button', { name: '암행부 연동' }).click();
|
||||
page.once('dialog', async (dialog) => {
|
||||
expect(dialog.message()).toBe('수뇌가 아닙니다!');
|
||||
await dialog.accept();
|
||||
});
|
||||
await page.getByRole('button', { name: '인사부 연동' }).click();
|
||||
await expect(page.locator('.appointment-button')).toHaveCount(0);
|
||||
expect(memberState.appointmentInputs).toEqual([]);
|
||||
});
|
||||
|
||||
test('암행부 권한 거부는 도시 기밀 행과 인사부 연동을 열지 않는다', async ({ page }) => {
|
||||
const state: FixtureState = {
|
||||
role: 'member',
|
||||
appointed: false,
|
||||
secretForbidden: true,
|
||||
appointmentInputs: [],
|
||||
};
|
||||
await install(page, state);
|
||||
await page.goto('nation/cities');
|
||||
await page.getByRole('button', { name: '암행부 연동' }).click();
|
||||
|
||||
await expect(page.locator('.integration-error')).toContainText('권한이 부족합니다.');
|
||||
await expect(page.locator('.city-user-table')).toHaveCount(0);
|
||||
await expect(page.getByRole('button', { name: '인사부 연동' })).toHaveCount(0);
|
||||
expect(state.appointmentInputs).toEqual([]);
|
||||
});
|
||||
@@ -21,6 +21,7 @@ export default defineConfig({
|
||||
'troop.spec.ts',
|
||||
'board.spec.ts',
|
||||
'inGameInfo.spec.ts',
|
||||
'nationCityOfficeIntegration.spec.ts',
|
||||
'inGameMenus.spec.ts',
|
||||
'nationOffices.spec.ts',
|
||||
'diplomacy.spec.ts',
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
export const MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY = 'sam.mobileMainPanelOrder.v1';
|
||||
export const MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT = 'sam-mobile-main-panel-order-changed';
|
||||
|
||||
export const MOBILE_MAIN_PANEL_DEFINITIONS = [
|
||||
{ id: 'commands', label: '명령 목록' },
|
||||
{ id: 'nation-menu', label: '국가 메뉴' },
|
||||
{ id: 'nation', label: '국가 정보' },
|
||||
{ id: 'general', label: '장수 정보' },
|
||||
{ id: 'city', label: '도시 정보' },
|
||||
{ id: 'map', label: '지도' },
|
||||
{ id: 'records', label: '기록 영역' },
|
||||
{ id: 'global-menu', label: '공통 메뉴' },
|
||||
{ id: 'messages', label: '서신' },
|
||||
] as const;
|
||||
|
||||
export type MobileMainPanelId = (typeof MOBILE_MAIN_PANEL_DEFINITIONS)[number]['id'];
|
||||
|
||||
export const DEFAULT_MOBILE_MAIN_PANEL_ORDER: readonly MobileMainPanelId[] = MOBILE_MAIN_PANEL_DEFINITIONS.map(
|
||||
({ id }) => id
|
||||
);
|
||||
|
||||
const mobilePanelIds = new Set<string>(DEFAULT_MOBILE_MAIN_PANEL_ORDER);
|
||||
|
||||
export const normalizeMobileMainPanelOrder = (value: unknown): MobileMainPanelId[] => {
|
||||
const source = Array.isArray(value) ? value : [];
|
||||
const seen = new Set<string>();
|
||||
const normalized: MobileMainPanelId[] = [];
|
||||
|
||||
for (const item of source) {
|
||||
if (typeof item !== 'string' || !mobilePanelIds.has(item) || seen.has(item)) continue;
|
||||
seen.add(item);
|
||||
normalized.push(item as MobileMainPanelId);
|
||||
}
|
||||
|
||||
for (const item of DEFAULT_MOBILE_MAIN_PANEL_ORDER) {
|
||||
if (!seen.has(item)) normalized.push(item);
|
||||
}
|
||||
|
||||
return normalized;
|
||||
};
|
||||
|
||||
export const parseMobileMainPanelOrder = (raw: string | null): MobileMainPanelId[] => {
|
||||
if (!raw) return [...DEFAULT_MOBILE_MAIN_PANEL_ORDER];
|
||||
try {
|
||||
return normalizeMobileMainPanelOrder(JSON.parse(raw));
|
||||
} catch {
|
||||
return [...DEFAULT_MOBILE_MAIN_PANEL_ORDER];
|
||||
}
|
||||
};
|
||||
|
||||
export const loadMobileMainPanelOrder = (storage: Pick<Storage, 'getItem'> = window.localStorage) =>
|
||||
parseMobileMainPanelOrder(storage.getItem(MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY));
|
||||
|
||||
export const saveMobileMainPanelOrder = (
|
||||
value: readonly MobileMainPanelId[],
|
||||
storage: Pick<Storage, 'setItem'> = window.localStorage
|
||||
): MobileMainPanelId[] => {
|
||||
const normalized = normalizeMobileMainPanelOrder(value);
|
||||
storage.setItem(MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY, JSON.stringify(normalized));
|
||||
if (typeof document !== 'undefined') {
|
||||
document.dispatchEvent(new CustomEvent(MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT));
|
||||
}
|
||||
return normalized;
|
||||
};
|
||||
|
||||
export const moveMobileMainPanel = (
|
||||
value: readonly MobileMainPanelId[],
|
||||
fromIndex: number,
|
||||
toIndex: number
|
||||
): MobileMainPanelId[] => {
|
||||
const normalized = normalizeMobileMainPanelOrder(value);
|
||||
if (
|
||||
fromIndex < 0 ||
|
||||
fromIndex >= normalized.length ||
|
||||
toIndex < 0 ||
|
||||
toIndex >= normalized.length ||
|
||||
fromIndex === toIndex
|
||||
) {
|
||||
return normalized;
|
||||
}
|
||||
const [moved] = normalized.splice(fromIndex, 1);
|
||||
if (!moved) return normalized;
|
||||
normalized.splice(toIndex, 0, moved);
|
||||
return normalized;
|
||||
};
|
||||
@@ -92,9 +92,7 @@ onMounted(loadDetail);
|
||||
<td class="phase-heading centered" colspan="6">
|
||||
<span class="large-text">
|
||||
{{ data.emperor.phase }}
|
||||
<template v-if="data.source === 'legacy'">
|
||||
[{{ data.sourceProfile.toUpperCase() }} 이전 서버]
|
||||
</template>
|
||||
<template v-if="data.source === 'legacy'"> [이전 서버] </template>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -98,9 +98,7 @@ watch(selectedSource, loadDynasty);
|
||||
<td class="phase-heading" colspan="8">
|
||||
<span class="large-text"
|
||||
>{{ entry.phase
|
||||
}}<template v-if="entry.source === 'legacy'">
|
||||
[{{ entry.sourceProfile.toUpperCase() }} 이전 서버]</template
|
||||
></span
|
||||
}}<template v-if="entry.source === 'legacy'"> [이전 서버]</template></span
|
||||
>
|
||||
<RouterLink
|
||||
:to="{
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { formatServerDateTime, JosaUtil } from '@sammo-ts/common';
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
@@ -379,7 +379,8 @@ const buyRandomUnique = async () => {
|
||||
};
|
||||
|
||||
const openUniqueAuction = async () => {
|
||||
if (!uniqueForm.itemId.trim()) {
|
||||
const selectedItem = status.value?.availableUnique.find((item) => item.key === uniqueForm.itemId.trim());
|
||||
if (!selectedItem) {
|
||||
actionError.value = '유니크를 선택해주세요.';
|
||||
return;
|
||||
}
|
||||
@@ -388,15 +389,20 @@ const openUniqueAuction = async () => {
|
||||
actionError.value = '입찰 포인트를 입력해주세요.';
|
||||
return;
|
||||
}
|
||||
if (!window.confirm(`유니크 경매를 ${amount} 포인트로 신청하시겠습니까?`)) {
|
||||
if (previousPoint.value < amount) {
|
||||
actionError.value = '유산 포인트가 부족합니다.';
|
||||
return;
|
||||
}
|
||||
const itemJosa = JosaUtil.pick(selectedItem.rawName, '을');
|
||||
if (!window.confirm(`${amount} 포인트로 ${selectedItem.name}${itemJosa} 입찰하겠습니까?`)) {
|
||||
return;
|
||||
}
|
||||
await runAction(async () => {
|
||||
await trpc.inherit.openUniqueAuction.mutate({
|
||||
itemId: uniqueForm.itemId.trim(),
|
||||
itemId: selectedItem.key,
|
||||
amount,
|
||||
});
|
||||
});
|
||||
}, '성공했습니다. 경매장을 확인해주세요.');
|
||||
};
|
||||
|
||||
const checkOwner = async () => {
|
||||
|
||||
@@ -29,6 +29,12 @@ import { useMainDashboardStore } from '../stores/mainDashboard';
|
||||
import { useGameFeedback } from '../composables/useGameFeedback';
|
||||
import { trpc } from '../utils/trpc';
|
||||
import type { CommandPatternEntry } from '../components/command/types';
|
||||
import {
|
||||
loadMobileMainPanelOrder,
|
||||
MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT,
|
||||
MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY,
|
||||
type MobileMainPanelId,
|
||||
} from '../utils/mobileMainPanelOrder';
|
||||
|
||||
const session = useSessionStore();
|
||||
const dashboard = useMainDashboardStore();
|
||||
@@ -38,8 +44,20 @@ const isMobile = useMediaQuery('(max-width: 939.98px)');
|
||||
const npcMode = ref(0);
|
||||
const globalNavigation = ref<MainNavigationEntry[]>(defaultGlobalNavigation);
|
||||
const versionDialog = ref<HTMLDialogElement | null>(null);
|
||||
const mobilePanelOrder = ref(loadMobileMainPanelOrder());
|
||||
const navigationUrl = (import.meta.env.VITE_GATEWAY_API_URL ?? '/api/trpc').replace(/\/trpc\/?$/u, '/navigation');
|
||||
|
||||
const reloadMobilePanelOrder = () => {
|
||||
mobilePanelOrder.value = loadMobileMainPanelOrder();
|
||||
};
|
||||
const handleMobilePanelStorage = (event: StorageEvent) => {
|
||||
if (event.key === MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY) reloadMobilePanelOrder();
|
||||
};
|
||||
const isFlushMobilePanel = (panelId: MobileMainPanelId, index: number): boolean => {
|
||||
const previous = mobilePanelOrder.value[index - 1];
|
||||
return (panelId === 'general' && previous === 'nation') || (panelId === 'city' && previous === 'general');
|
||||
};
|
||||
|
||||
const {
|
||||
loading,
|
||||
refreshing,
|
||||
@@ -100,10 +118,14 @@ onUnmounted(() => {
|
||||
clearTimeout(surveyNoticeTimer);
|
||||
}
|
||||
dashboard.stopRealtime();
|
||||
window.removeEventListener('storage', handleMobilePanelStorage);
|
||||
document.removeEventListener(MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT, reloadMobilePanelOrder);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
dashboard.startRealtime();
|
||||
window.addEventListener('storage', handleMobilePanelStorage);
|
||||
document.addEventListener(MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT, reloadMobilePanelOrder);
|
||||
void fetch(navigationUrl, { headers: { Accept: 'application/json' } })
|
||||
.then(async (response) => {
|
||||
if (!response.ok) throw new Error(`메뉴 설정 조회 실패: HTTP ${response.status}`);
|
||||
@@ -130,10 +152,7 @@ const repeatGeneralTurns = (amount: number) => {
|
||||
};
|
||||
|
||||
const loadMainData = async () => {
|
||||
const [, worldState] = await Promise.all([
|
||||
dashboard.loadMainData(),
|
||||
trpc.world.getState.query().catch(() => null),
|
||||
]);
|
||||
const [, worldState] = await Promise.all([dashboard.loadMainData(), trpc.world.getState.query().catch(() => null)]);
|
||||
npcMode.value = worldState?.config.npcMode ?? 0;
|
||||
};
|
||||
|
||||
@@ -239,131 +258,155 @@ watch(
|
||||
</aside>
|
||||
|
||||
<section v-if="isMobile" class="layout-mobile">
|
||||
<div class="mobile-panel">
|
||||
<PanelCard title="명령 목록" subtitle="예턴/명령 배치 영역" data-main-target="commands">
|
||||
<CommandListPanel
|
||||
:command-table="commandTable"
|
||||
:loading="loading"
|
||||
:reserved-general-turns="reservedGeneralTurns"
|
||||
:general="general"
|
||||
:current-year="lobbyInfo?.year"
|
||||
:current-month="lobbyInfo?.month"
|
||||
:turn-term-minutes="lobbyInfo?.turnTerm"
|
||||
:server-time="lobbyInfo?.serverTime"
|
||||
:clock-mode="lobbyInfo?.clockMode"
|
||||
:autorun-limit="reservedGeneralAutorunLimit"
|
||||
:map-data="worldMap"
|
||||
:map-layout="mapLayout"
|
||||
@set-general-turns="reserveGeneralTurns"
|
||||
@shift-general-turns="shiftGeneralTurns"
|
||||
@repeat-general-turns="repeatGeneralTurns"
|
||||
<template v-for="(panelId, panelIndex) in mobilePanelOrder" :key="panelId">
|
||||
<div v-if="panelId === 'commands'" class="mobile-panel" data-mobile-panel-id="commands">
|
||||
<PanelCard title="명령 목록" subtitle="예턴/명령 배치 영역" data-main-target="commands">
|
||||
<CommandListPanel
|
||||
:command-table="commandTable"
|
||||
:loading="loading"
|
||||
:reserved-general-turns="reservedGeneralTurns"
|
||||
:general="general"
|
||||
:current-year="lobbyInfo?.year"
|
||||
:current-month="lobbyInfo?.month"
|
||||
:turn-term-minutes="lobbyInfo?.turnTerm"
|
||||
:server-time="lobbyInfo?.serverTime"
|
||||
:clock-mode="lobbyInfo?.clockMode"
|
||||
:autorun-limit="reservedGeneralAutorunLimit"
|
||||
:map-data="worldMap"
|
||||
:map-layout="mapLayout"
|
||||
@set-general-turns="reserveGeneralTurns"
|
||||
@shift-general-turns="shiftGeneralTurns"
|
||||
@repeat-general-turns="repeatGeneralTurns"
|
||||
/>
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div v-else-if="panelId === 'nation-menu'" class="mobile-panel" data-mobile-panel-id="nation-menu">
|
||||
<MainNationMenu
|
||||
class="nation-menu-middle"
|
||||
:access="nationAccess"
|
||||
:tournament-stage="tournamentStage"
|
||||
:nation-color="nationColor"
|
||||
/>
|
||||
</PanelCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-panel">
|
||||
<MainNationMenu
|
||||
class="nation-menu-middle"
|
||||
:access="nationAccess"
|
||||
:tournament-stage="tournamentStage"
|
||||
:nation-color="nationColor"
|
||||
<div v-else-if="panelId === 'nation'" class="mobile-panel" data-mobile-panel-id="nation">
|
||||
<PanelCard title="국가 정보" data-main-target="nation">
|
||||
<NationBasicCard :nation="nation" :loading="loading" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="panelId === 'general'"
|
||||
class="mobile-panel"
|
||||
:class="{ 'mobile-panel--flush': isFlushMobilePanel(panelId, panelIndex) }"
|
||||
data-mobile-panel-id="general"
|
||||
>
|
||||
<PanelCard title="장수 스탯" data-main-target="general">
|
||||
<GeneralBasicCard :general="general" :loading="loading" :nation-color="nation?.color" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="panelId === 'city'"
|
||||
class="mobile-panel"
|
||||
:class="{ 'mobile-panel--flush': isFlushMobilePanel(panelId, panelIndex) }"
|
||||
data-mobile-panel-id="city"
|
||||
>
|
||||
<PanelCard title="도시 정보" data-main-target="city">
|
||||
<CityBasicCard :city="city" :loading="loading" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div v-else-if="panelId === 'map'" class="mobile-panel" data-mobile-panel-id="map">
|
||||
<PanelCard title="지도" data-main-target="map">
|
||||
<MapViewer :map-data="worldMap" :map-layout="mapLayout" :loading="loading" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="panelId === 'records'"
|
||||
class="mobile-panel record-zone-mobile"
|
||||
data-mobile-panel-id="records"
|
||||
>
|
||||
<RecordPanel title="장수 동향" data-main-target="global-records">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
|
||||
<div v-else class="record-list" data-record-bucket="global">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div
|
||||
v-for="entry in globalRecords"
|
||||
:key="entry.id"
|
||||
class="record-line"
|
||||
v-html="formatRecord(entry)"
|
||||
/>
|
||||
<div v-if="globalRecords.length === 0" class="record-empty">기록이 없습니다.</div>
|
||||
</div>
|
||||
</RecordPanel>
|
||||
<RecordPanel title="개인 기록" data-main-target="general-records">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
|
||||
<div v-else class="record-list" data-record-bucket="general">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div
|
||||
v-for="entry in generalRecords"
|
||||
:key="entry.id"
|
||||
class="record-line"
|
||||
v-html="formatRecord(entry, true)"
|
||||
/>
|
||||
<div v-if="generalRecords.length === 0" class="record-empty">기록이 없습니다.</div>
|
||||
</div>
|
||||
</RecordPanel>
|
||||
<RecordPanel title="중원 정세" data-main-target="world-history">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
|
||||
<div v-else class="record-list" data-record-bucket="history">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div
|
||||
v-for="entry in worldHistory"
|
||||
:key="entry.id"
|
||||
class="record-line"
|
||||
v-html="formatRecord(entry)"
|
||||
/>
|
||||
<div v-if="worldHistory.length === 0" class="record-empty">기록이 없습니다.</div>
|
||||
</div>
|
||||
</RecordPanel>
|
||||
</div>
|
||||
|
||||
<MainGlobalMenu
|
||||
v-else-if="panelId === 'global-menu'"
|
||||
class="common-menu-middle"
|
||||
data-menu-position="middle"
|
||||
data-mobile-panel-id="global-menu"
|
||||
:npc-mode="npcMode"
|
||||
:vote-active="voteActive"
|
||||
:entries="globalNavigation"
|
||||
@action="handleNavigationAction"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mobile-panel">
|
||||
<PanelCard title="국가 정보" data-main-target="nation">
|
||||
<NationBasicCard :nation="nation" :loading="loading" />
|
||||
</PanelCard>
|
||||
<PanelCard title="장수 스탯" data-main-target="general">
|
||||
<GeneralBasicCard :general="general" :loading="loading" :nation-color="nation?.color" />
|
||||
</PanelCard>
|
||||
<PanelCard title="도시 정보" data-main-target="city">
|
||||
<CityBasicCard :city="city" :loading="loading" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div class="mobile-panel">
|
||||
<PanelCard title="지도" data-main-target="map">
|
||||
<MapViewer :map-data="worldMap" :map-layout="mapLayout" :loading="loading" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div class="mobile-panel record-zone-mobile">
|
||||
<RecordPanel title="장수 동향" data-main-target="global-records">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
|
||||
<div v-else class="record-list" data-record-bucket="global">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div
|
||||
v-for="entry in globalRecords"
|
||||
:key="entry.id"
|
||||
class="record-line"
|
||||
v-html="formatRecord(entry)"
|
||||
/>
|
||||
<div v-if="globalRecords.length === 0" class="record-empty">기록이 없습니다.</div>
|
||||
</div>
|
||||
</RecordPanel>
|
||||
<RecordPanel title="개인 기록" data-main-target="general-records">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
|
||||
<div v-else class="record-list" data-record-bucket="general">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div
|
||||
v-for="entry in generalRecords"
|
||||
:key="entry.id"
|
||||
class="record-line"
|
||||
v-html="formatRecord(entry, true)"
|
||||
/>
|
||||
<div v-if="generalRecords.length === 0" class="record-empty">기록이 없습니다.</div>
|
||||
</div>
|
||||
</RecordPanel>
|
||||
<RecordPanel title="중원 정세" data-main-target="world-history">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
|
||||
<div v-else class="record-list" data-record-bucket="history">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div
|
||||
v-for="entry in worldHistory"
|
||||
:key="entry.id"
|
||||
class="record-line"
|
||||
v-html="formatRecord(entry)"
|
||||
/>
|
||||
<div v-if="worldHistory.length === 0" class="record-empty">기록이 없습니다.</div>
|
||||
</div>
|
||||
</RecordPanel>
|
||||
</div>
|
||||
|
||||
<MainGlobalMenu
|
||||
class="common-menu-middle"
|
||||
data-menu-position="middle"
|
||||
:npc-mode="npcMode"
|
||||
:vote-active="voteActive"
|
||||
:entries="globalNavigation"
|
||||
@action="handleNavigationAction"
|
||||
/>
|
||||
|
||||
<div class="mobile-panel">
|
||||
<MessagePanel
|
||||
class="mobile-message-panel"
|
||||
:messages="messages"
|
||||
:loading="loading"
|
||||
:target-mailbox="targetMailbox"
|
||||
:draft-text="messageDraftText"
|
||||
:mailbox-groups="mailboxGroups"
|
||||
:general-id="general?.id ?? 0"
|
||||
:general-name="general?.name ?? ''"
|
||||
:nation-id="general?.nationId ?? 0"
|
||||
:can-respond-diplomacy="messages?.canRespondDiplomacy ?? false"
|
||||
@update:target-mailbox="targetMailbox = $event"
|
||||
@update:draft-text="messageDraftText = $event"
|
||||
@send="dashboard.sendMessage"
|
||||
@load-older="dashboard.loadOlderMessages"
|
||||
@refresh="dashboard.refreshMessages"
|
||||
@respond="dashboard.respondToMessage"
|
||||
@read-latest="dashboard.readLatestMessage"
|
||||
@delete="dashboard.deleteMessage"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="mobile-panel" data-mobile-panel-id="messages">
|
||||
<MessagePanel
|
||||
class="mobile-message-panel"
|
||||
:messages="messages"
|
||||
:loading="loading"
|
||||
:target-mailbox="targetMailbox"
|
||||
:draft-text="messageDraftText"
|
||||
:mailbox-groups="mailboxGroups"
|
||||
:general-id="general?.id ?? 0"
|
||||
:general-name="general?.name ?? ''"
|
||||
:nation-id="general?.nationId ?? 0"
|
||||
:can-respond-diplomacy="messages?.canRespondDiplomacy ?? false"
|
||||
@update:target-mailbox="targetMailbox = $event"
|
||||
@update:draft-text="messageDraftText = $event"
|
||||
@send="dashboard.sendMessage"
|
||||
@load-older="dashboard.loadOlderMessages"
|
||||
@refresh="dashboard.refreshMessages"
|
||||
@respond="dashboard.respondToMessage"
|
||||
@read-latest="dashboard.readLatestMessage"
|
||||
@delete="dashboard.deleteMessage"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<section v-else class="layout-desktop">
|
||||
@@ -798,8 +841,8 @@ button {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.layout-mobile > .mobile-panel:nth-of-type(3) {
|
||||
gap: 0;
|
||||
.layout-mobile > .mobile-panel--flush {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.layout-mobile [data-main-target='commands'] {
|
||||
|
||||
@@ -9,11 +9,19 @@ import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIc
|
||||
import LegacyGeneralProgress from '../components/ui/LegacyGeneralProgress.vue';
|
||||
import GeneralBasicCard from '../components/main/GeneralBasicCard.vue';
|
||||
import { useGameFeedback } from '../composables/useGameFeedback';
|
||||
import {
|
||||
DEFAULT_MOBILE_MAIN_PANEL_ORDER,
|
||||
loadMobileMainPanelOrder,
|
||||
MOBILE_MAIN_PANEL_DEFINITIONS,
|
||||
moveMobileMainPanel,
|
||||
saveMobileMainPanelOrder,
|
||||
type MobileMainPanelId,
|
||||
} from '../utils/mobileMainPanelOrder';
|
||||
|
||||
const SCREEN_MODE_KEY = 'sam.screenMode';
|
||||
const CUSTOM_CSS_KEY = 'sam_customCSS';
|
||||
const PENDING_DIE_ON_PRESTART_KEY = 'sam.pending.dieOnPrestart';
|
||||
const { error: showErrorToast, showDialog } = useGameFeedback();
|
||||
const { success: showSuccessToast, error: showErrorToast, showDialog } = useGameFeedback();
|
||||
type ScreenMode = 'auto' | '500px' | '1000px';
|
||||
type LogType = 'generalHistory' | 'battleDetail' | 'battleResult' | 'generalAction';
|
||||
type ItemSlotKey = 'horse' | 'weapon' | 'book' | 'item';
|
||||
@@ -48,6 +56,9 @@ const screenMode = ref<ScreenMode>('auto');
|
||||
const customCss = ref('');
|
||||
const selectedIconId = ref('');
|
||||
const cssSaving = ref(false);
|
||||
const mobileLayoutDialog = ref<HTMLDialogElement | null>(null);
|
||||
const mobileLayoutOrder = ref<MobileMainPanelId[]>(loadMobileMainPanelOrder());
|
||||
const mobileLayoutDragIndex = ref<number | null>(null);
|
||||
const session = useSessionStore();
|
||||
let cssTimer: number | null = null;
|
||||
const readPendingDieOnPrestartId = (): string => {
|
||||
@@ -169,6 +180,43 @@ const items = computed<Array<{ key: ItemSlotKey; slotName: string; displayName:
|
||||
);
|
||||
const iconChoices = computed(() => data.value?.iconChoices ?? []);
|
||||
const selectedIcon = computed(() => iconChoices.value.find((icon) => icon.id === selectedIconId.value) ?? null);
|
||||
const mobileLayoutLabels = Object.fromEntries(
|
||||
MOBILE_MAIN_PANEL_DEFINITIONS.map(({ id, label }) => [id, label])
|
||||
) as Record<MobileMainPanelId, string>;
|
||||
|
||||
const openMobileLayoutDialog = () => {
|
||||
mobileLayoutOrder.value = loadMobileMainPanelOrder();
|
||||
mobileLayoutDialog.value?.showModal();
|
||||
window.requestAnimationFrame(() => mobileLayoutDialog.value?.querySelector<HTMLButtonElement>('button')?.focus());
|
||||
};
|
||||
|
||||
const moveMobileLayoutItem = (fromIndex: number, toIndex: number) => {
|
||||
mobileLayoutOrder.value = moveMobileMainPanel(mobileLayoutOrder.value, fromIndex, toIndex);
|
||||
};
|
||||
|
||||
const startMobileLayoutDrag = (event: DragEvent, index: number) => {
|
||||
mobileLayoutDragIndex.value = index;
|
||||
event.dataTransfer?.setData('text/plain', mobileLayoutOrder.value[index] ?? '');
|
||||
if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
|
||||
};
|
||||
|
||||
const dropMobileLayoutItem = (event: DragEvent, targetIndex: number) => {
|
||||
event.preventDefault();
|
||||
const sourceIndex = mobileLayoutDragIndex.value;
|
||||
mobileLayoutDragIndex.value = null;
|
||||
if (sourceIndex === null) return;
|
||||
moveMobileLayoutItem(sourceIndex, targetIndex);
|
||||
};
|
||||
|
||||
const resetMobileLayoutOrder = () => {
|
||||
mobileLayoutOrder.value = [...DEFAULT_MOBILE_MAIN_PANEL_ORDER];
|
||||
};
|
||||
|
||||
const applyMobileLayoutOrder = () => {
|
||||
mobileLayoutOrder.value = saveMobileMainPanelOrder(mobileLayoutOrder.value);
|
||||
mobileLayoutDialog.value?.close();
|
||||
showSuccessToast('모바일 메인 레이아웃 순서를 저장했습니다.');
|
||||
};
|
||||
|
||||
const autorunUser = computed(() => asRecord(world.value?.meta.autorun_user));
|
||||
const showAutoNationTurn = computed(() => asRecord(autorunUser.value.options).chief !== false);
|
||||
@@ -581,6 +629,16 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-layout-setting-row">
|
||||
<span>
|
||||
모바일 레이아웃 순서 바꾸기<br />
|
||||
<small>500px 메인 화면의 패널 순서를 이 기기에 저장합니다.</small>
|
||||
</span>
|
||||
<button class="mobile-layout-open" type="button" @click="openMobileLayoutDialog">
|
||||
순서 바꾸기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="item-title">아이템 파기</div>
|
||||
<div class="item-group">
|
||||
<button
|
||||
@@ -635,6 +693,61 @@ onMounted(() => {
|
||||
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작: HideD / Credit
|
||||
</footer>
|
||||
</main>
|
||||
<dialog
|
||||
ref="mobileLayoutDialog"
|
||||
class="mobile-layout-dialog"
|
||||
aria-labelledby="mobile-layout-dialog-title"
|
||||
@close="mobileLayoutDragIndex = null"
|
||||
>
|
||||
<div class="mobile-layout-dialog__header">
|
||||
<h2 id="mobile-layout-dialog-title">모바일 레이아웃 순서 바꾸기</h2>
|
||||
<form method="dialog">
|
||||
<button type="submit" aria-label="모바일 레이아웃 순서 창 닫기">×</button>
|
||||
</form>
|
||||
</div>
|
||||
<p>항목을 끌어 놓거나 위·아래 버튼으로 상대 순서를 바꿉니다.</p>
|
||||
<ol class="mobile-layout-list">
|
||||
<li
|
||||
v-for="(panelId, index) in mobileLayoutOrder"
|
||||
:key="panelId"
|
||||
:data-mobile-layout-id="panelId"
|
||||
draggable="true"
|
||||
@dragstart="startMobileLayoutDrag($event, index)"
|
||||
@dragend="mobileLayoutDragIndex = null"
|
||||
@dragover.prevent
|
||||
@drop.stop="dropMobileLayoutItem($event, index)"
|
||||
>
|
||||
<span class="mobile-layout-handle" aria-hidden="true">≡</span>
|
||||
<span class="mobile-layout-label">
|
||||
<span class="mobile-layout-position">{{ index + 1 }}</span>
|
||||
{{ mobileLayoutLabels[panelId] }}
|
||||
</span>
|
||||
<span class="mobile-layout-move-buttons">
|
||||
<button
|
||||
type="button"
|
||||
:aria-label="`${mobileLayoutLabels[panelId]} 위로`"
|
||||
:disabled="index === 0"
|
||||
@click="moveMobileLayoutItem(index, index - 1)"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:aria-label="`${mobileLayoutLabels[panelId]} 아래로`"
|
||||
:disabled="index === mobileLayoutOrder.length - 1"
|
||||
@click="moveMobileLayoutItem(index, index + 1)"
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="mobile-layout-dialog__actions">
|
||||
<button type="button" @click="resetMobileLayoutOrder">Ref 초깃값</button>
|
||||
<form method="dialog"><button type="submit">취소</button></form>
|
||||
<button class="mobile-layout-apply" type="button" @click="applyMobileLayoutOrder">적용</button>
|
||||
</div>
|
||||
</dialog>
|
||||
<div class="my-page-mobile-scroll-spacer" aria-hidden="true"></div>
|
||||
</template>
|
||||
|
||||
@@ -822,6 +935,125 @@ button:disabled {
|
||||
align-items: center;
|
||||
margin: 14px 0;
|
||||
}
|
||||
.mobile-layout-setting-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 128px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 14px 0;
|
||||
}
|
||||
.mobile-layout-setting-row small {
|
||||
color: orange;
|
||||
}
|
||||
.mobile-layout-open {
|
||||
min-height: 34px;
|
||||
background: #315f86;
|
||||
font-weight: 700;
|
||||
}
|
||||
.mobile-layout-dialog {
|
||||
box-sizing: border-box;
|
||||
width: min(460px, calc(100vw - 24px));
|
||||
max-height: calc(100dvh - 24px);
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
border: 1px solid #777;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
background: #171717 var(--sammo-texture-walnut);
|
||||
color: #fff;
|
||||
font: 14px/1.3 var(--sammo-font-sans);
|
||||
}
|
||||
.mobile-layout-dialog::backdrop {
|
||||
background: rgb(0 0 0 / 72%);
|
||||
}
|
||||
.mobile-layout-dialog__header,
|
||||
.mobile-layout-dialog__actions,
|
||||
.mobile-layout-move-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.mobile-layout-dialog__header {
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.mobile-layout-dialog__header h2,
|
||||
.mobile-layout-dialog p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.mobile-layout-dialog__header h2 {
|
||||
color: skyblue;
|
||||
font-size: 18px;
|
||||
}
|
||||
.mobile-layout-dialog__header form,
|
||||
.mobile-layout-dialog__actions form {
|
||||
margin: 0;
|
||||
}
|
||||
.mobile-layout-dialog__header button {
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.mobile-layout-list {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.mobile-layout-list > li {
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr) auto;
|
||||
min-height: 44px;
|
||||
align-items: center;
|
||||
border: 1px solid #777;
|
||||
background: #172a52 var(--sammo-texture-blue);
|
||||
cursor: grab;
|
||||
}
|
||||
.mobile-layout-list > li:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.mobile-layout-handle {
|
||||
color: #aaa;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
.mobile-layout-label {
|
||||
min-width: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
.mobile-layout-position {
|
||||
display: inline-grid;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
place-items: center;
|
||||
margin-right: 4px;
|
||||
border: 1px solid #7186a7;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
}
|
||||
.mobile-layout-move-buttons {
|
||||
gap: 4px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.mobile-layout-move-buttons button {
|
||||
width: 36px;
|
||||
min-height: 34px;
|
||||
background: #315f86;
|
||||
font-weight: 700;
|
||||
}
|
||||
.mobile-layout-dialog__actions {
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.mobile-layout-dialog__actions button {
|
||||
min-height: 34px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.mobile-layout-dialog__actions .mobile-layout-apply {
|
||||
background: #225500;
|
||||
font-weight: 700;
|
||||
}
|
||||
.button-group {
|
||||
display: flex;
|
||||
}
|
||||
@@ -933,6 +1165,12 @@ button:disabled {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
.mobile-layout-setting-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.mobile-layout-open {
|
||||
width: 100%;
|
||||
}
|
||||
.button-group {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useGameFeedback } from '../composables/useGameFeedback';
|
||||
import { getNpcColor } from '../utils/npcColor';
|
||||
import { legacyNationTextColor } from '../utils/legacyNationColor';
|
||||
import { cityLevelMap, regionMap } from '../utils/nationFormat';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type Result = Awaited<ReturnType<typeof trpc.nation.getCityOverview.query>>;
|
||||
type SecretResult = Awaited<ReturnType<typeof trpc.nation.getSecretGeneralList.query>>;
|
||||
type PersonnelResult = Awaited<ReturnType<typeof trpc.nation.getPersonnelInfo.query>>;
|
||||
type City = Result['cities'][number];
|
||||
type SecretGeneral = SecretResult['generals'][number];
|
||||
type OfficerLevel = 2 | 3 | 4;
|
||||
type Sort = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
const data = ref<Result | null>(null);
|
||||
const secretData = ref<SecretResult | null>(null);
|
||||
const personnelData = ref<PersonnelResult | null>(null);
|
||||
const error = ref('');
|
||||
const integrationError = ref('');
|
||||
const secretLoading = ref(false);
|
||||
const personnelLoading = ref(false);
|
||||
const pendingAppointment = ref('');
|
||||
const sort = ref<Sort>(10);
|
||||
const extraSort = ref<
|
||||
| 'name'
|
||||
@@ -25,10 +37,16 @@ const extraSort = ref<
|
||||
| null
|
||||
>(null);
|
||||
const router = useRouter();
|
||||
const { error: showErrorToast, info: showInfoToast, success: showSuccessToast } = useGameFeedback();
|
||||
const options = ['기본', '인구', '인구율', '민심', '농업', '상업', '치안', '수비', '성벽', '시세', '지역', '규모'];
|
||||
const officerLabels: Record<OfficerLevel, string> = { 4: '태수', 3: '군사', 2: '종사' };
|
||||
const generalsForCity = (cityId: number) => data.value?.generals.filter((general) => general.cityId === cityId) ?? [];
|
||||
const secretGeneralsForCity = (cityId: number) =>
|
||||
secretData.value?.generals.filter((general) => general.cityId === cityId) ?? [];
|
||||
const displayGeneralName = (general: Result['generals'][number]) =>
|
||||
general.npcState > 0 && !/^[ⓜⓝ]/u.test(general.name) ? `ⓝ${general.name}` : general.name;
|
||||
const displaySecretGeneralName = (general: SecretGeneral) =>
|
||||
general.npcState > 0 && !/^[ⓜⓝ㉥]/u.test(general.name) ? `ⓝ${general.name}` : general.name;
|
||||
const generalCount = (cityId: number) =>
|
||||
data.value?.generals.filter((general) => general.cityId === cityId).length ?? 0;
|
||||
const cities = computed(() => {
|
||||
@@ -91,6 +109,138 @@ const developmentClass = (
|
||||
const isRegionBreak = (city: City, index: number) =>
|
||||
sort.value === 10 && extraSort.value === null && (index === 0 || cities.value[index - 1]?.region !== city.region);
|
||||
const officer = (city: City, level: 2 | 3 | 4) => city.officers[level]?.name ?? '-';
|
||||
const officerIsStationed = (city: City, level: OfficerLevel): boolean =>
|
||||
secretData.value !== null && city.officers[level]?.cityId === city.id;
|
||||
const personnelGeneralMap = computed(
|
||||
() => new Map((personnelData.value?.generals ?? []).map((general) => [general.id, general]))
|
||||
);
|
||||
const personnelCityMap = computed(
|
||||
() => new Map((personnelData.value?.cityAssignments ?? []).map((city) => [city.id, city]))
|
||||
);
|
||||
const officerLocked = (cityId: number, level: OfficerLevel): boolean => {
|
||||
const officerSet = personnelCityMap.value.get(cityId)?.officerSet ?? 0;
|
||||
return (officerSet & (1 << level)) !== 0;
|
||||
};
|
||||
const canAppoint = (cityId: number, generalId: number, level: OfficerLevel): boolean => {
|
||||
if (!personnelData.value?.me.canManage || officerLocked(cityId, level)) return false;
|
||||
const general = personnelGeneralMap.value.get(generalId);
|
||||
if (!general || general.officerLevel === 12) return false;
|
||||
if (level === 4) return general.stats.strength >= personnelData.value.chiefStatMin;
|
||||
if (level === 3) return general.stats.intelligence >= personnelData.value.chiefStatMin;
|
||||
return true;
|
||||
};
|
||||
const canShowAppointmentButtons = (generalId: number): boolean => {
|
||||
const general = personnelGeneralMap.value.get(generalId);
|
||||
return personnelData.value?.me.canManage === true && general !== undefined && general.officerLevel !== 12;
|
||||
};
|
||||
const isChief = (generalId: number): boolean => (personnelGeneralMap.value.get(generalId)?.officerLevel ?? 0) >= 5;
|
||||
const appointmentKey = (cityId: number, generalId: number, level: OfficerLevel): string =>
|
||||
`${cityId}:${generalId}:${level}`;
|
||||
const commandNeedsAttention = (city: City, command: string): boolean => {
|
||||
const normalized = command.replaceAll(/\s/gu, '');
|
||||
if (normalized.includes('정착장려')) {
|
||||
return city.population - city.populationMax > -20_000 || city.population > city.populationMax * 0.92;
|
||||
}
|
||||
if (normalized.includes('농지개간')) return city.agriculture - city.agricultureMax > -1_000;
|
||||
if (normalized.includes('상업투자')) return city.commerce - city.commerceMax > -1_000;
|
||||
if (normalized.includes('치안강화')) return city.security - city.securityMax > -1_000;
|
||||
if (normalized.includes('수비강화')) return city.defence - city.defenceMax > -700;
|
||||
if (normalized.includes('성벽보수')) return city.wall - city.wallMax > -700;
|
||||
return false;
|
||||
};
|
||||
|
||||
const loadSecretIntegration = async (): Promise<void> => {
|
||||
if (secretLoading.value) {
|
||||
showInfoToast('암행부 정보를 불러오는 중입니다.');
|
||||
return;
|
||||
}
|
||||
if (secretData.value) {
|
||||
showInfoToast('암행부 정보가 이미 연동되어 있습니다.');
|
||||
return;
|
||||
}
|
||||
secretLoading.value = true;
|
||||
integrationError.value = '';
|
||||
try {
|
||||
secretData.value = await trpc.nation.getSecretGeneralList.query();
|
||||
} catch (cause) {
|
||||
integrationError.value = cause instanceof Error ? cause.message : '암행부 연동에 실패했습니다.';
|
||||
showErrorToast(integrationError.value);
|
||||
} finally {
|
||||
secretLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadPersonnelIntegration = async (): Promise<void> => {
|
||||
if (personnelLoading.value) {
|
||||
showInfoToast('인사부 정보를 불러오는 중입니다.');
|
||||
return;
|
||||
}
|
||||
if (personnelData.value?.me.canManage) {
|
||||
showInfoToast('인사부 정보가 이미 연동되어 있습니다.');
|
||||
return;
|
||||
}
|
||||
personnelLoading.value = true;
|
||||
integrationError.value = '';
|
||||
try {
|
||||
const personnel = await trpc.nation.getPersonnelInfo.query();
|
||||
if (!personnel.me.canManage) {
|
||||
window.alert('수뇌가 아닙니다!');
|
||||
return;
|
||||
}
|
||||
personnelData.value = personnel;
|
||||
} catch (cause) {
|
||||
integrationError.value = cause instanceof Error ? cause.message : '인사부 연동에 실패했습니다.';
|
||||
showErrorToast(integrationError.value);
|
||||
} finally {
|
||||
personnelLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const refreshIntegratedData = async (): Promise<void> => {
|
||||
const [overview, secret, personnel] = await Promise.all([
|
||||
trpc.nation.getCityOverview.query(),
|
||||
trpc.nation.getSecretGeneralList.query(),
|
||||
trpc.nation.getPersonnelInfo.query(),
|
||||
]);
|
||||
data.value = overview;
|
||||
secretData.value = secret;
|
||||
personnelData.value = personnel;
|
||||
};
|
||||
|
||||
const appointCityOfficer = async (city: City, general: SecretGeneral, level: OfficerLevel): Promise<void> => {
|
||||
if (!canAppoint(city.id, general.id, level)) return;
|
||||
const key = appointmentKey(city.id, general.id, level);
|
||||
if (pendingAppointment.value) {
|
||||
showInfoToast('다른 임명을 처리하는 중입니다.');
|
||||
return;
|
||||
}
|
||||
if (isChief(general.id) && !window.confirm('수뇌입니다. 임명할까요?')) return;
|
||||
|
||||
pendingAppointment.value = key;
|
||||
integrationError.value = '';
|
||||
try {
|
||||
await trpc.nation.appoint.mutate({
|
||||
destGeneralId: general.id,
|
||||
destCityId: city.id,
|
||||
officerLevel: level,
|
||||
});
|
||||
showSuccessToast(`${general.name}을(를) ${city.name} ${officerLabels[level]}로 임명했습니다.`);
|
||||
try {
|
||||
await refreshIntegratedData();
|
||||
} catch (cause) {
|
||||
integrationError.value =
|
||||
cause instanceof Error
|
||||
? `임명은 완료됐지만 화면을 갱신하지 못했습니다: ${cause.message}`
|
||||
: '임명은 완료됐지만 화면을 갱신하지 못했습니다.';
|
||||
showErrorToast(integrationError.value);
|
||||
}
|
||||
} catch (cause) {
|
||||
integrationError.value = cause instanceof Error ? cause.message : '임명에 실패했습니다.';
|
||||
showErrorToast(integrationError.value);
|
||||
} finally {
|
||||
pendingAppointment.value = '';
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
try {
|
||||
data.value = await trpc.nation.getCityOverview.query();
|
||||
@@ -121,7 +271,18 @@ onMounted(async () => {
|
||||
</option>
|
||||
</select>
|
||||
<input type="submit" value="정렬하기" />
|
||||
<button type="button">암행부 연동</button>
|
||||
<button type="button" :aria-busy="secretLoading" @click="loadSecretIntegration">
|
||||
암행부 연동
|
||||
</button>
|
||||
<button
|
||||
v-if="secretData"
|
||||
id="load-duty-button"
|
||||
type="button"
|
||||
:aria-busy="personnelLoading"
|
||||
@click="loadPersonnelIntegration"
|
||||
>
|
||||
인사부 연동
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -141,12 +302,14 @@ onMounted(async () => {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-if="error" class="error" role="alert">{{ error }}</p>
|
||||
<p v-if="integrationError" class="error integration-error" role="alert">{{ integrationError }}</p>
|
||||
<table
|
||||
v-for="(city, index) in cities"
|
||||
:key="city.id"
|
||||
class="legacy-table city legacy-bg2"
|
||||
:class="{ 'region-break': isRegionBreak(city, index) }"
|
||||
:data-city-id="city.id"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -223,18 +386,24 @@ onMounted(async () => {
|
||||
<th>시세</th>
|
||||
<td>{{ city.trade ?? '-' }}%</td>
|
||||
<th>태수</th>
|
||||
<td>{{ officer(city, 4) }}</td>
|
||||
<td class="officer-4-value" :class="{ 'effective-officer': officerIsStationed(city, 4) }">
|
||||
{{ officer(city, 4) }}
|
||||
</td>
|
||||
<th>군사</th>
|
||||
<td>{{ officer(city, 3) }}</td>
|
||||
<td class="officer-3-value" :class="{ 'effective-officer': officerIsStationed(city, 3) }">
|
||||
{{ officer(city, 3) }}
|
||||
</td>
|
||||
<th>종사</th>
|
||||
<td>{{ officer(city, 2) }}</td>
|
||||
<td class="officer-2-value" :class="{ 'effective-officer': officerIsStationed(city, 2) }">
|
||||
{{ officer(city, 2) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>장수</th>
|
||||
<td colspan="9" class="general-list">
|
||||
<template v-if="generalsForCity(city.id).length">
|
||||
<template v-for="(general, index) in generalsForCity(city.id)" :key="general.id">
|
||||
<span v-if="index">, </span
|
||||
<template v-for="(general, cityGeneralIndex) in generalsForCity(city.id)" :key="general.id">
|
||||
<span v-if="cityGeneralIndex">, </span
|
||||
><span :style="{ color: getNpcColor(general.npcState) }">{{
|
||||
displayGeneralName(general)
|
||||
}}</span>
|
||||
@@ -243,6 +412,108 @@ onMounted(async () => {
|
||||
<template v-else>-</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="secretData" class="secret-integration-row">
|
||||
<td colspan="10">
|
||||
<table class="city-user-table legacy-bg0">
|
||||
<colgroup>
|
||||
<col class="secret-name-column" />
|
||||
<col class="secret-stat-column" />
|
||||
<col class="secret-troop-column" />
|
||||
<col class="secret-gold-column" />
|
||||
<col class="secret-rice-column" />
|
||||
<col class="secret-defence-column" />
|
||||
<col class="secret-crew-type-column" />
|
||||
<col class="secret-crew-column" />
|
||||
<col class="secret-train-column" />
|
||||
<col class="secret-atmos-column" />
|
||||
<col class="secret-command-column" />
|
||||
<col class="secret-kill-column" />
|
||||
<col class="secret-turn-column" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>이 름</th>
|
||||
<th>통무지</th>
|
||||
<th>부 대</th>
|
||||
<th>자 금</th>
|
||||
<th>군 량</th>
|
||||
<th>守</th>
|
||||
<th>병 종</th>
|
||||
<th>병 사</th>
|
||||
<th>훈련</th>
|
||||
<th>사기</th>
|
||||
<th>명 령</th>
|
||||
<th>삭턴</th>
|
||||
<th>턴</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="general in secretGeneralsForCity(city.id)"
|
||||
:key="general.id"
|
||||
:data-general-id="general.id"
|
||||
>
|
||||
<td class="secret-name-cell">
|
||||
<span :style="{ color: getNpcColor(general.npcState) }">{{
|
||||
displaySecretGeneralName(general)
|
||||
}}</span
|
||||
><br />Lv {{ general.experienceLevel }}
|
||||
<template v-if="canShowAppointmentButtons(general.id)">
|
||||
<br class="for-duty" />
|
||||
<button
|
||||
v-for="level in [4, 3, 2] as const"
|
||||
:key="level"
|
||||
type="button"
|
||||
class="appointment-button for-duty"
|
||||
:class="[`mode-${level}`, { 'chief-target': isChief(general.id) }]"
|
||||
:disabled="
|
||||
!canAppoint(city.id, general.id, level) || pendingAppointment !== ''
|
||||
"
|
||||
:aria-label="`${general.name}을(를) ${city.name} ${officerLabels[level]}로 임명`"
|
||||
@click="appointCityOfficer(city, general, level)"
|
||||
>
|
||||
{{ officerLabels[level].slice(0, 1) }}
|
||||
</button>
|
||||
</template>
|
||||
</td>
|
||||
<td :class="{ injured: general.injury > 0 }">
|
||||
{{ general.stats.leadership
|
||||
}}<span v-if="general.leadershipBonus" class="bonus"
|
||||
>+{{ general.leadershipBonus }}</span
|
||||
>∥{{ general.stats.strength }}∥{{ general.stats.intelligence }}
|
||||
</td>
|
||||
<td>{{ general.troopName ?? '-' }}</td>
|
||||
<td>{{ general.gold }}</td>
|
||||
<td>{{ general.rice }}</td>
|
||||
<td>{{ general.defenceTrainText }}</td>
|
||||
<td>{{ general.crewTypeName }}</td>
|
||||
<td>{{ general.crew }}</td>
|
||||
<td>{{ general.train }}</td>
|
||||
<td>{{ general.atmos }}</td>
|
||||
<td class="secret-commands">
|
||||
<template v-if="general.npcState >= 2">NPC 장수</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="(command, commandIndex) in general.reservedCommands"
|
||||
:key="commandIndex"
|
||||
>
|
||||
{{ commandIndex + 1 }} :
|
||||
<span
|
||||
:class="{
|
||||
'command-attention': commandNeedsAttention(city, command),
|
||||
}"
|
||||
>{{ command }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
<td>{{ general.killTurn }}</td>
|
||||
<td>{{ formatServerDateTime(general.turnTime, { format: 'minuteSecond' }) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="legacy-table legacy-bg0 title footer">
|
||||
@@ -304,6 +575,81 @@ onMounted(async () => {
|
||||
.general-list {
|
||||
text-align: left !important;
|
||||
}
|
||||
.effective-officer {
|
||||
color: lightgreen;
|
||||
}
|
||||
.secret-integration-row > td {
|
||||
padding: 0;
|
||||
}
|
||||
.city-user-table {
|
||||
width: 940px;
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.city-user-table td,
|
||||
.city-user-table th {
|
||||
width: auto;
|
||||
border: 1px solid #808080;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
.city-user-table th {
|
||||
background-image: var(--sammo-texture-green);
|
||||
}
|
||||
.secret-name-column,
|
||||
.secret-stat-column,
|
||||
.secret-troop-column {
|
||||
width: 100px;
|
||||
}
|
||||
.secret-gold-column,
|
||||
.secret-rice-column,
|
||||
.secret-crew-type-column,
|
||||
.secret-crew-column,
|
||||
.secret-kill-column,
|
||||
.secret-turn-column {
|
||||
width: 60px;
|
||||
}
|
||||
.secret-defence-column {
|
||||
width: 30px;
|
||||
}
|
||||
.secret-train-column,
|
||||
.secret-atmos-column {
|
||||
width: 50px;
|
||||
}
|
||||
.secret-command-column {
|
||||
width: 150px;
|
||||
}
|
||||
.secret-name-cell {
|
||||
line-height: normal;
|
||||
}
|
||||
.secret-commands {
|
||||
text-align: left !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
.bonus {
|
||||
color: cyan;
|
||||
}
|
||||
.injured {
|
||||
color: red;
|
||||
}
|
||||
.command-attention {
|
||||
color: yellow;
|
||||
}
|
||||
.nation-cities-page .appointment-button {
|
||||
margin: 0;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
.nation-cities-page .appointment-button.chief-target:not(:disabled) {
|
||||
color: red;
|
||||
}
|
||||
.nation-cities-page .appointment-button:disabled {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: default;
|
||||
}
|
||||
.capital {
|
||||
color: #0ff;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
|
||||
import {
|
||||
DEFAULT_MOBILE_MAIN_PANEL_ORDER,
|
||||
MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY,
|
||||
loadMobileMainPanelOrder,
|
||||
moveMobileMainPanel,
|
||||
normalizeMobileMainPanelOrder,
|
||||
parseMobileMainPanelOrder,
|
||||
saveMobileMainPanelOrder,
|
||||
} from '../src/utils/mobileMainPanelOrder.ts';
|
||||
|
||||
void test('uses the Ref mobile panel order as the default', () => {
|
||||
assert.deepEqual(DEFAULT_MOBILE_MAIN_PANEL_ORDER, [
|
||||
'commands',
|
||||
'nation-menu',
|
||||
'nation',
|
||||
'general',
|
||||
'city',
|
||||
'map',
|
||||
'records',
|
||||
'global-menu',
|
||||
'messages',
|
||||
]);
|
||||
assert.deepEqual(parseMobileMainPanelOrder(null), DEFAULT_MOBILE_MAIN_PANEL_ORDER);
|
||||
});
|
||||
|
||||
void test('keeps known unique entries and appends newly introduced panels', () => {
|
||||
assert.deepEqual(normalizeMobileMainPanelOrder(['messages', 'commands', 'messages', 'unknown']), [
|
||||
'messages',
|
||||
'commands',
|
||||
'nation-menu',
|
||||
'nation',
|
||||
'general',
|
||||
'city',
|
||||
'map',
|
||||
'records',
|
||||
'global-menu',
|
||||
]);
|
||||
assert.deepEqual(parseMobileMainPanelOrder('{broken'), DEFAULT_MOBILE_MAIN_PANEL_ORDER);
|
||||
});
|
||||
|
||||
void test('moves and persists the normalized order', () => {
|
||||
const values = new Map<string, string>();
|
||||
const storage = {
|
||||
getItem: (key: string) => values.get(key) ?? null,
|
||||
setItem: (key: string, value: string) => values.set(key, value),
|
||||
};
|
||||
const moved = moveMobileMainPanel(DEFAULT_MOBILE_MAIN_PANEL_ORDER, 8, 0);
|
||||
assert.equal(moved[0], 'messages');
|
||||
assert.deepEqual(saveMobileMainPanelOrder(moved, storage), moved);
|
||||
assert.equal(values.has(MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY), true);
|
||||
assert.deepEqual(loadMobileMainPanelOrder(storage), moved);
|
||||
});
|
||||
Reference in New Issue
Block a user