devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge: 최신 main을 왕조 profile 경계 작업에 통합

Browse Source
This commit is contained in:
Hide_D
2026-08-20 15:45:01 +00:00
parent fd90bf1ebb d1731fdf59
commit 33eee98564
5 changed files with 1165 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/nationOffices.spec.ts
+83 -6
View File
@@ -11,6 +11,8 @@ type FixtureState = {
failPersonnelLoad?: boolean;
rate: number;
appointedGeneralId?: number;
appointedCityId?: number;
appointedOfficerLevel?: number;
noticeMutationInput?: string;
scoutMutationInput?: string;
uploadDataUrl?: string;
@@ -230,7 +232,9 @@ const installFixture = async (page: Page, state: FixtureState) => {
}
if (operation === 'nation.getStratFinan') return response(financeFixture(state));
if (operation === 'nation.appoint') {
state.appointedGeneralId = 6;
state.appointedGeneralId = Number(jsonInput.destGeneralId ?? 0);
state.appointedCityId = Number(jsonInput.destCityId ?? 0);
state.appointedOfficerLevel = Number(jsonInput.officerLevel ?? 0);
return response({ ok: true });
}
if (operation === 'nation.kick' || operation === 'nation.changePermission') return response({ ok: true });
@@ -281,7 +285,7 @@ const screenshot = async (page: Page, name: string) => {
await page.screenshot({ path: resolve(artifactRoot, name), fullPage: true });
};
test('personnel matches the 1000px legacy table geometry, textures, image, and interaction states', async ({
test('personnel keeps the legacy frame while presenting modern appointment cards and interaction states', async ({
page,
}) => {
await installFixture(page, { role: 'leader', rate: 20 });
@@ -309,6 +313,8 @@ test('personnel matches the 1000px legacy table geometry, textures, image, and i
heading: box('.heading-table'),
status: box('.chief-status'),
icon: box('.general-icon'),
appointmentCard: box('.appointment-card'),
selectionTrigger: box('.selection-trigger'),
documentWidth: document.documentElement.scrollWidth,
};
});
@@ -318,16 +324,17 @@ test('personnel matches the 1000px legacy table geometry, textures, image, and i
expect(computed.status.width).toBe(1000);
expect(computed.icon.width).toBeCloseTo(64.7, 0);
expect(computed.icon.height).toBeCloseTo(64, 0);
expect(computed.appointmentCard.width).toBeGreaterThan(450);
expect(computed.appointmentCard.height).toBeGreaterThan(140);
expect(computed.selectionTrigger.height).toBeGreaterThanOrEqual(70);
expect(computed.container.fontFamily).toContain('Pretendard');
expect(computed.container.fontSize).toBe('14px');
expect(computed.container.lineHeight).toBe('18.2px');
expect(computed.status.backgroundImage).toContain('back_walnut.jpg');
expect(computed.documentWidth).toBe(1000);
const appointButton = page.getByRole('button', { name: '임명' }).first();
expect(await appointButton.evaluate((button) => getComputedStyle(button).backgroundColor)).toBe(
'rgb(108, 117, 125)'
);
const appointButton = page.getByRole('button', { name: '주부 임명', exact: true });
expect(await appointButton.evaluate((button) => getComputedStyle(button).backgroundColor)).toBe('rgb(55, 104, 70)');
await appointButton.hover();
expect(await appointButton.evaluate((button) => getComputedStyle(button).cursor)).toBe('pointer');
await appointButton.focus();
@@ -335,6 +342,44 @@ test('personnel matches the 1000px legacy table geometry, textures, image, and i
await screenshot(page, 'core-personnel-desktop-leader.png');
});
test('personnel selects an informed general and reports the JosaUtil-composed result in a toast', async ({ page }) => {
const state: FixtureState = { role: 'head', rate: 20 };
await installFixture(page, state);
await page.setViewportSize({ width: 1000, height: 900 });
await gotoOffice(page, 'nation/personnel');
await page.getByRole('button', { name: '주부 장수 선택', exact: true }).click();
const picker = page.getByTestId('personnel-selection-dialog');
await expect(picker).toBeVisible();
await expect(picker.getByRole('heading', { name: '주부 임명 대상 선택' })).toBeVisible();
await picker.getByPlaceholder('장수명·도시·관직·특성 검색').fill('장료');
const candidate = picker.getByRole('button', { name: /장료/ });
await expect(candidate).toContainText('허창 · 일반 장수');
await expect(candidate).toContainText('통솔70');
await expect(candidate).toContainText('소속10년');
await expect(candidate).toContainText('병력100');
await candidate.hover();
expect(await candidate.evaluate((button) => getComputedStyle(button).cursor)).toBe('pointer');
await candidate.focus();
expect(await candidate.evaluate((button) => getComputedStyle(button).outlineStyle)).not.toBe('none');
await screenshot(page, 'core-personnel-desktop-general-picker.png');
await candidate.click();
await expect(page.getByRole('button', { name: '주부 장수 선택', exact: true })).toContainText('장료');
page.once('dialog', async (dialog) => {
expect(dialog.message()).toBe('장료를 주부직에 임명하시겠습니까?');
await dialog.accept();
});
await page.getByRole('button', { name: '주부 임명', exact: true }).click();
await expect(page.getByTestId('game-toast')).toContainText('장료를 임명했습니다.');
expect(state.appointedGeneralId).toBe(6);
expect(state.appointedCityId).toBe(0);
expect(state.appointedOfficerLevel).toBe(11);
await expect(page.locator('.feedback.status')).toHaveCount(0);
await screenshot(page, 'core-personnel-appointment-toast.png');
});
test('personnel preserves the legacy fixed 1000px document on a 500px viewport', async ({ page }) => {
await installFixture(page, { role: 'head', rate: 20 });
await page.setViewportSize({ width: 500, height: 900 });
@@ -346,6 +391,38 @@ test('personnel preserves the legacy fixed 1000px document on a 500px viewport',
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(1000);
await expect(page.getByRole('combobox', { name: '외교권자' })).toHaveCount(0);
await expect(page.getByRole('combobox', { name: '추방 대상 장수' })).toBeVisible();
await page.getByRole('button', { name: '태수 도시 선택', exact: true }).click();
const picker = page.getByTestId('personnel-selection-dialog');
await expect(picker).toBeVisible();
expect(await picker.evaluate((element) => getComputedStyle(element).transitionDuration)).toContain('0.15s');
await expect(picker).toHaveCSS('transform', 'none');
const pickerGeometry = await picker.evaluate((element) => {
const rect = element.getBoundingClientRect();
const style = getComputedStyle(element);
return {
left: rect.left,
right: rect.right,
bottom: rect.bottom,
width: rect.width,
maxHeight: style.maxHeight,
borderTopLeftRadius: style.borderTopLeftRadius,
};
});
expect(pickerGeometry.left).toBeGreaterThanOrEqual(0);
expect(pickerGeometry.right).toBeLessThanOrEqual(500);
expect(pickerGeometry.bottom).toBe(900);
expect(pickerGeometry.width).toBeGreaterThan(480);
expect(pickerGeometry.borderTopLeftRadius).toBe('16px');
await expect(picker.getByRole('button', { name: /낙양/ })).toContainText('중원 · 중도시');
await expect(picker.getByRole('button', { name: /허창/ })).toContainText('현재 태수하후돈');
await picker.getByRole('button', { name: /낙양/ }).focus();
expect(
await picker.getByRole('button', { name: /낙양/ }).evaluate((button) => getComputedStyle(button).outlineStyle)
).not.toBe('none');
await screenshot(page, 'core-personnel-mobile-city-picker.png');
await picker.getByRole('button', { name: /낙양/ }).click();
await expect(page.getByRole('button', { name: '태수 도시 선택', exact: true })).toContainText('낙양');
await screenshot(page, 'core-personnel-mobile-head.png');
});
app/game-frontend/src/components/personnel/PersonnelSelectionDialog.vue
+528
View File
@@ -0,0 +1,528 @@
<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
type SelectionMetric = {
label: string;
value: string;
};
type SelectionItem = {
id: number;
name: string;
subtitle: string;
searchText: string;
accent?: 'current' | 'assigned' | 'available';
iconBackground?: string;
badges?: string[];
stats?: SelectionMetric[];
details?: SelectionMetric[];
};
const props = withDefaults(
defineProps<{
open: boolean;
title: string;
description: string;
items: SelectionItem[];
selectedId: number;
searchPlaceholder?: string;
vacancyLabel?: string | null;
}>(),
{
searchPlaceholder: '이름이나 조건으로 검색',
vacancyLabel: null,
}
);
const emit = defineEmits<{
cancel: [];
select: [id: number];
}>();
const query = ref('');
const searchInput = ref<HTMLInputElement | null>(null);
const dialogPanel = ref<HTMLElement | null>(null);
let returnFocus: HTMLElement | null = null;
let previousBodyOverflow = '';
const normalizedQuery = computed(() => query.value.trim().toLocaleLowerCase('ko-KR'));
const filteredItems = computed(() => {
const keyword = normalizedQuery.value;
if (!keyword) return props.items;
return props.items.filter((item) => item.searchText.toLocaleLowerCase('ko-KR').includes(keyword));
});
const close = (): void => emit('cancel');
const select = (id: number): void => emit('select', id);
const restorePage = (): void => {
document.body.style.overflow = previousBodyOverflow;
const target = returnFocus;
returnFocus = null;
if (target?.isConnected) target.focus();
};
watch(
() => props.open,
async (open, previous) => {
if (open && !previous) {
query.value = '';
returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
previousBodyOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
await nextTick();
searchInput.value?.focus();
return;
}
if (!open && previous) restorePage();
},
{ flush: 'post' }
);
const handleKeydown = (event: KeyboardEvent): void => {
if (event.key === 'Escape') {
event.preventDefault();
close();
return;
}
if (event.key !== 'Tab' || !dialogPanel.value) return;
const focusable = [
...dialogPanel.value.querySelectorAll<HTMLElement>(
'input:not(:disabled), button:not(:disabled), [tabindex="0"]'
),
];
if (focusable.length === 0) return;
const first = focusable[0];
const last = focusable.at(-1);
if (event.shiftKey && document.activeElement === first) {
event.preventDefault();
last?.focus();
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault();
first?.focus();
}
};
onBeforeUnmount(() => {
if (props.open) restorePage();
});
</script>
<template>
<Teleport to="body">
<Transition name="personnel-picker">
<div v-if="open" class="personnel-picker-backdrop" @click.self="close">
<section
ref="dialogPanel"
class="personnel-picker"
role="dialog"
aria-modal="true"
aria-labelledby="personnel-picker-title"
aria-describedby="personnel-picker-description"
data-testid="personnel-selection-dialog"
@keydown="handleKeydown"
>
<header class="personnel-picker-header">
<div>
<p class="personnel-picker-eyebrow">인사부 선택 도우미</p>
<h2 id="personnel-picker-title">{{ title }}</h2>
<p id="personnel-picker-description">{{ description }}</p>
</div>
<button type="button" class="personnel-picker-close" aria-label="선택 창 닫기" @click="close">
×
</button>
</header>
<label class="personnel-picker-search">
<span class="sr-only">{{ searchPlaceholder }}</span>
<span aria-hidden="true">⌕</span>
<input ref="searchInput" v-model="query" type="search" :placeholder="searchPlaceholder" />
</label>
<div class="personnel-picker-results" aria-label="선택 후보">
<button
v-if="vacancyLabel"
type="button"
class="personnel-picker-card vacancy-card"
:class="{ selected: selectedId === 0 }"
:aria-pressed="selectedId === 0"
@click="select(0)"
>
<span class="vacancy-icon" aria-hidden="true">＋</span>
<span>
<strong>{{ vacancyLabel }}</strong>
<small>현재 관직을 비우려면 선택하세요.</small>
</span>
<span v-if="selectedId === 0" class="selection-check">선택됨</span>
</button>
<button
v-for="item in filteredItems"
:key="item.id"
type="button"
class="personnel-picker-card"
:class="[
item.accent ? `personnel-picker-card--${item.accent}` : '',
{ selected: selectedId === item.id },
]"
:aria-pressed="selectedId === item.id"
@click="select(item.id)"
>
<span
v-if="item.iconBackground"
class="personnel-picker-portrait"
:style="{ backgroundImage: item.iconBackground }"
aria-hidden="true"
/>
<span v-else class="personnel-picker-city-icon" aria-hidden="true">城</span>
<span class="personnel-picker-card-body">
<span class="personnel-picker-card-title">
<span>
<strong>{{ item.name }}</strong>
<small>{{ item.subtitle }}</small>
</span>
<span v-if="selectedId === item.id" class="selection-check">선택됨</span>
</span>
<span v-if="item.badges?.length" class="personnel-picker-badges">
<span v-for="badge in item.badges" :key="badge">{{ badge }}</span>
</span>
<span v-if="item.stats?.length" class="personnel-picker-stats">
<span v-for="stat in item.stats" :key="stat.label">
<small>{{ stat.label }}</small>
<strong>{{ stat.value }}</strong>
</span>
</span>
<span v-if="item.details?.length" class="personnel-picker-details">
<span v-for="detail in item.details" :key="detail.label">
<small>{{ detail.label }}</small>
<span>{{ detail.value }}</span>
</span>
</span>
</span>
</button>
<p v-if="filteredItems.length === 0" class="personnel-picker-empty">
검색 조건에 맞는 후보가 없습니다.
</p>
</div>
</section>
</div>
</Transition>
</Teleport>
</template>
<style scoped>
.personnel-picker-backdrop {
position: fixed;
z-index: 2050;
inset: 0;
display: grid;
place-items: center;
padding: 18px;
background: rgb(0 0 0 / 78%);
backdrop-filter: blur(3px);
}
.personnel-picker {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
width: min(780px, calc(100vw - 36px));
max-height: min(760px, calc(100vh - 36px));
overflow: hidden;
color: #f6f2e8;
background: #121411;
border: 1px solid #78653d;
border-radius: 14px;
box-shadow: 0 24px 70px rgb(0 0 0 / 78%);
font: 14px/1.45 var(--sammo-font-sans);
}
.personnel-picker-header {
display: flex;
gap: 18px;
align-items: flex-start;
justify-content: space-between;
padding: 20px 22px 16px;
background: linear-gradient(135deg, rgb(69 57 34 / 72%), rgb(25 28 22 / 96%));
border-bottom: 1px solid #53482f;
}
.personnel-picker-eyebrow {
margin: 0 0 3px;
color: #cbb171;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.13em;
}
.personnel-picker h2 {
margin: 0;
font-size: 22px;
line-height: 1.25;
}
.personnel-picker-header p:last-child {
margin: 7px 0 0;
color: #c9c8c2;
}
.personnel-picker-close {
flex: 0 0 auto;
width: 36px;
height: 36px;
border: 1px solid #6d634d;
border-radius: 999px;
padding: 0;
color: #ddd7ca;
background: rgb(0 0 0 / 28%);
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.personnel-picker-search {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: center;
margin: 14px 16px 10px;
padding: 0 12px;
color: #cbb171;
background: #080a08;
border: 1px solid #555949;
border-radius: 9px;
}
.personnel-picker-search input {
min-width: 0;
height: 42px;
border: 0;
outline: 0;
color: #fff;
background: transparent;
font: inherit;
}
.personnel-picker-search:focus-within {
border-color: #c7a85e;
box-shadow: 0 0 0 2px rgb(199 168 94 / 28%);
}
.personnel-picker-results {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
min-height: 160px;
padding: 6px 16px 18px;
overflow-y: auto;
overscroll-behavior: contain;
}
.personnel-picker-card {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
gap: 12px;
align-items: start;
min-width: 0;
padding: 12px;
color: #f4f1e8;
background: #1a1d18;
border: 1px solid #474b3d;
border-left: 4px solid #6f7560;
border-radius: 10px;
text-align: left;
cursor: pointer;
}
.personnel-picker-card:hover {
background: #24291f;
border-color: #8d835f;
transform: translateY(-1px);
}
.personnel-picker-card:focus,
.personnel-picker-card:focus-visible,
.personnel-picker-close:focus,
.personnel-picker-close:focus-visible {
outline: 2px solid #f3d27d;
outline-offset: 2px;
}
.personnel-picker-card.selected {
background: #252919;
border-color: #d2b45f;
box-shadow: inset 0 0 0 1px rgb(210 180 95 / 45%);
}
.personnel-picker-card--current {
border-left-color: #e36060;
}
.personnel-picker-card--assigned {
border-left-color: #d7a83f;
}
.personnel-picker-card--available {
border-left-color: #65a978;
}
.personnel-picker-portrait,
.personnel-picker-city-icon,
.vacancy-icon {
width: 58px;
height: 58px;
border: 1px solid #5c5f50;
border-radius: 10px;
background-color: #0b0c0a;
}
.personnel-picker-portrait {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.personnel-picker-city-icon,
.vacancy-icon {
display: grid;
place-items: center;
color: #d8be79;
background: radial-gradient(circle at 50% 30%, #353626, #11130f 72%);
font: 700 24px/1 var(--sammo-font-sans);
}
.personnel-picker-card-body,
.personnel-picker-card-title,
.personnel-picker-card-title > span:first-child {
display: grid;
min-width: 0;
}
.personnel-picker-card-title {
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.personnel-picker-card-title strong,
.vacancy-card strong {
font-size: 16px;
}
.personnel-picker-card-title small,
.vacancy-card small {
color: #b8b8b2;
}
.selection-check {
align-self: start;
padding: 2px 6px;
color: #13150f;
background: #d5bb6f;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
}
.personnel-picker-badges {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 8px;
}
.personnel-picker-badges span {
padding: 2px 6px;
color: #ddd5c0;
background: #32352d;
border: 1px solid #555948;
border-radius: 999px;
font-size: 10px;
}
.personnel-picker-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
margin-top: 9px;
}
.personnel-picker-stats > span {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 4px 6px;
background: #0e100d;
border-radius: 5px;
}
.personnel-picker-stats small,
.personnel-picker-details small {
color: #aaa99f;
font-size: 10px;
}
.personnel-picker-stats strong {
color: #f1d47e;
}
.personnel-picker-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3px 10px;
margin-top: 8px;
}
.personnel-picker-details > span {
display: flex;
gap: 5px;
min-width: 0;
}
.personnel-picker-details > span > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vacancy-card {
grid-template-columns: 58px minmax(0, 1fr) auto;
align-items: center;
}
.vacancy-card > span:nth-child(2) {
display: grid;
}
.personnel-picker-empty {
grid-column: 1 / -1;
margin: 40px 0;
color: #bdbbb2;
text-align: center;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.personnel-picker-enter-active,
.personnel-picker-leave-active {
transition: opacity 150ms ease;
}
.personnel-picker-enter-active .personnel-picker,
.personnel-picker-leave-active .personnel-picker {
transition:
transform 150ms ease,
opacity 150ms ease;
}
.personnel-picker-enter-from,
.personnel-picker-leave-to,
.personnel-picker-enter-from .personnel-picker,
.personnel-picker-leave-to .personnel-picker {
opacity: 0;
}
.personnel-picker-enter-from .personnel-picker,
.personnel-picker-leave-to .personnel-picker {
transform: translateY(10px) scale(0.985);
}
@media (max-width: 620px) {
.personnel-picker-backdrop {
align-items: end;
padding: 0;
}
.personnel-picker {
width: 100vw;
max-height: min(88vh, calc(100vh - env(safe-area-inset-top)));
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 16px 16px 0 0;
}
.personnel-picker-header {
padding: 16px;
}
.personnel-picker-results {
grid-template-columns: 1fr;
padding-bottom: max(18px, env(safe-area-inset-bottom));
}
}
@media (prefers-reduced-motion: reduce) {
.personnel-picker-enter-active,
.personnel-picker-leave-active,
.personnel-picker-enter-active .personnel-picker,
.personnel-picker-leave-active .personnel-picker {
transition: none;
}
}
</style>
app/game-frontend/src/views/BestGeneralView.vue
+14 -2
View File
@@ -87,8 +87,20 @@ watch(viewMode, () => {
</div>
<div class="view-selector" role="group" aria-label="장수 유형">
<input type="button" value="유저 보기" :aria-pressed="viewMode === 'user'" @click="viewMode = 'user'" />
<input type="button" value="NPC 보기" :aria-pressed="viewMode === 'npc'" @click="viewMode = 'npc'" />
<input
class="legacy-button"
type="button"
value="유저 보기"
:aria-pressed="viewMode === 'user'"
@click="viewMode = 'user'"
/>
<input
class="legacy-button"
type="button"
value="NPC 보기"
:aria-pressed="viewMode === 'npc'"
@click="viewMode = 'npc'"
/>
</div>
<div v-if="errorMessage" class="legacy-message error" role="alert">{{ errorMessage }}</div>
app/game-frontend/src/views/NationPersonnelView.vue
+510 -75
View File
@@ -2,6 +2,9 @@
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { JosaUtil } from '@sammo-ts/common';
import PersonnelSelectionDialog from '../components/personnel/PersonnelSelectionDialog.vue';
import { useGameFeedback } from '../composables/useGameFeedback';
import { resolveGeneralIconBackgroundImage } from '../utils/generalIcon';
import { trpc } from '../utils/trpc';
@@ -11,13 +14,28 @@ import { legacyNationTextColor } from '../utils/legacyNationColor';
type PersonnelResponse = Awaited<ReturnType<typeof trpc.nation.getPersonnelInfo.query>>;
type GeneralEntry = PersonnelResponse['generals'][number];
type OfficerLevel = 2 | 3 | 4;
type SelectionDialogItem = {
id: number;
name: string;
subtitle: string;
searchText: string;
accent: 'current' | 'assigned' | 'available';
iconBackground?: string;
badges: string[];
stats?: Array<{ label: string; value: string }>;
details: Array<{ label: string; value: string }>;
};
type SelectionContext =
| { kind: 'chief-general'; level: number }
| { kind: 'city'; level: OfficerLevel }
| { kind: 'city-general'; level: OfficerLevel };
const officerLabels: Record<OfficerLevel, string> = { 4: '태수', 3: '군사', 2: '종사' };
const cityOfficerLevels: OfficerLevel[] = [4, 3, 2];
const loading = ref(false);
const error = ref<string | null>(null);
const status = ref<string | null>(null);
const data = ref<PersonnelResponse | null>(null);
const selectionContext = ref<SelectionContext | null>(null);
const chiefAppointmentDraft = reactive<Record<number, number>>({});
const cityDraft = reactive<Record<OfficerLevel, { cityId: number; generalId: number }>>({
4: { cityId: 0, generalId: 0 },
@@ -28,7 +46,7 @@ const kickTargetId = ref(0);
const ambassadorSelection = ref<number[]>([]);
const auditorSelection = ref<number[]>([]);
const router = useRouter();
const { error: showErrorToast } = useGameFeedback();
const { success: showSuccessToast, error: showErrorToast } = useGameFeedback();
const resolveErrorMessage = (value: unknown): string =>
value instanceof Error ? value.message : typeof value === 'string' ? value : 'unknown_error';
@@ -39,7 +57,6 @@ const loadPersonnel = async () => {
error.value = null;
try {
data.value = await trpc.nation.getPersonnelInfo.query();
status.value = null;
} catch (err) {
error.value = resolveErrorMessage(err);
} finally {
@@ -72,8 +89,14 @@ const officerLocked = (value: number, level: number): boolean => (value & (1 <<
const chiefLocked = (level: number): boolean => officerLocked(data.value?.nation.chiefSet ?? 0, level);
const cityOfficerLocked = (city: PersonnelResponse['cityAssignments'][number], level: number): boolean =>
officerLocked(city.officerSet, level);
const candidateLabel = (general: GeneralEntry): string =>
`${general.name} 【${cityNameMap.value.get(general.cityId) ?? '-'}】`;
const currentOfficeText = (general: GeneralEntry): string => {
if (general.officerLevel <= 1) return '일반 장수';
const office = formatOfficerLevelText(general.officerLevel, nationLevel.value);
if (general.officerLevel >= 2 && general.officerLevel <= 4 && general.officerCityName) {
return `${general.officerCityName} ${office}`;
}
return office;
};
const chiefCandidates = (level: number): GeneralEntry[] => {
const minimum = data.value?.chiefStatMin ?? 0;
const candidates = (data.value?.generals ?? []).filter((general) => general.officerLevel !== 12);
@@ -90,6 +113,12 @@ const cityCandidates = (level: OfficerLevel): GeneralEntry[] => {
};
const openCities = (level: OfficerLevel) =>
(data.value?.cityAssignments ?? []).filter((city) => !cityOfficerLocked(city, level));
const selectedChief = (level: number): GeneralEntry | undefined =>
generalMap.value.get(chiefAppointmentDraft[level] ?? 0);
const selectedCity = (level: OfficerLevel): PersonnelResponse['cityAssignments'][number] | undefined =>
data.value?.cityAssignments.find((city) => city.id === cityDraft[level].cityId);
const selectedCityGeneral = (level: OfficerLevel): GeneralEntry | undefined =>
generalMap.value.get(cityDraft[level].generalId);
const kickCandidates = computed(() =>
(data.value?.generals ?? []).filter((general) => general.id !== data.value?.me.id)
);
@@ -114,14 +143,12 @@ watch(data, initializeDrafts);
const runMutation = async (action: () => Promise<unknown>, successMessage: string) => {
error.value = null;
status.value = null;
try {
await action();
status.value = successMessage;
await loadPersonnel();
status.value = successMessage;
showSuccessToast(successMessage);
} catch (err) {
error.value = resolveErrorMessage(err);
showErrorToast(resolveErrorMessage(err));
}
};
@@ -129,11 +156,13 @@ const appointChief = async (level: number) => {
const targetId = chiefAppointmentDraft[level] ?? 0;
const target = generalMap.value.get(targetId);
const office = formatOfficerLevelText(level, nationLevel.value);
const prompt = target ? `${target.name}을(를) ${office}직에 임명하시겠습니까?` : `${office}직을 비우시겠습니까?`;
const prompt = target
? `${JosaUtil.put(target.name, '을')} ${office}직에 임명하시겠습니까?`
: `${office}직을 비우시겠습니까?`;
if (!window.confirm(prompt)) return;
await runMutation(
() => trpc.nation.appoint.mutate({ destGeneralId: targetId, destCityId: 0, officerLevel: level }),
target ? `${target.name}을(를) 임명했습니다.` : '관직을 비웠습니다.'
target ? `${JosaUtil.put(target.name, '을')} 임명했습니다.` : '관직을 비웠습니다.'
);
};
@@ -142,7 +171,7 @@ const appointCityOfficer = async (level: OfficerLevel) => {
const city = data.value?.cityAssignments.find((entry) => entry.id === draft.cityId);
const target = generalMap.value.get(draft.generalId);
const prompt = target
? `${target.name}을(를) ${city?.name ?? ''} ${officerLabels[level]}직에 임명하시겠습니까?`
? `${JosaUtil.put(target.name, '을')} ${city?.name ?? ''} ${officerLabels[level]}직에 임명하시겠습니까?`
: `${city?.name ?? ''} ${officerLabels[level]}직을 비우시겠습니까?`;
if (!window.confirm(prompt)) return;
await runMutation(
@@ -152,10 +181,130 @@ const appointCityOfficer = async (level: OfficerLevel) => {
destCityId: draft.cityId,
officerLevel: level,
}),
target ? `${target.name}을(를) 임명했습니다.` : '관직을 비웠습니다.'
target ? `${JosaUtil.put(target.name, '을')} 임명했습니다.` : '관직을 비웠습니다.'
);
};
const generalSelectionItem = (general: GeneralEntry, targetLevel: number): SelectionDialogItem => {
const isCurrent = general.officerLevel === targetLevel;
const isAssigned = general.officerLevel > 1 && !isCurrent;
const office = currentOfficeText(general);
const city = general.cityName ?? cityNameMap.value.get(general.cityId) ?? '-';
const badges = [isCurrent ? '현재 임명 중' : isAssigned ? '다른 관직 재직' : '일반 장수'];
if (general.npcState > 0) badges.push('NPC');
if (general.personality?.name) badges.push(general.personality.name);
if (general.specialDomestic?.name) badges.push(general.specialDomestic.name);
if (general.specialWar?.name) badges.push(general.specialWar.name);
return {
id: general.id,
name: general.name,
subtitle: `${city} · ${office}`,
searchText: [
general.name,
city,
office,
general.personality?.name,
general.specialDomestic?.name,
general.specialWar?.name,
general.troopName,
]
.filter(Boolean)
.join(' '),
accent: isCurrent ? 'current' : isAssigned ? 'assigned' : 'available',
iconBackground: imageBackground(general),
badges,
stats: [
{ label: '통솔', value: general.stats.leadership.toLocaleString('ko-KR') },
{ label: '무력', value: general.stats.strength.toLocaleString('ko-KR') },
{ label: '지력', value: general.stats.intelligence.toLocaleString('ko-KR') },
],
details: [
{ label: '소속', value: `${general.belong.toLocaleString('ko-KR')}년` },
{ label: '병력', value: general.crew.toLocaleString('ko-KR') },
{ label: '부대', value: general.troopName ?? '없음' },
{ label: '부상', value: general.injury > 0 ? `${general.injury}%` : '없음' },
],
};
};
const citySelectionItem = (
city: PersonnelResponse['cityAssignments'][number],
level: OfficerLevel
): SelectionDialogItem => {
const current = city.officers[level];
const region = regionMap[city.region] ?? '-';
const scale = cityLevelMap[city.level] ?? '-';
return {
id: city.id,
name: city.name,
subtitle: `${region} · ${scale}도시`,
searchText: `${city.name} ${region} ${scale} ${current?.name ?? '공석'}`,
accent: current ? 'assigned' : 'available',
badges: [current ? `${officerLabels[level]} 재직 중` : `${officerLabels[level]} 공석`],
details: [
{ label: '지역', value: region },
{ label: '규모', value: `${scale}도시` },
{ label: `현재 ${officerLabels[level]}`, value: current?.name ?? '공석' },
{ label: '소재지', value: current?.cityName ?? '-' },
],
};
};
const selectionTitle = computed(() => {
const context = selectionContext.value;
if (!context) return '';
if (context.kind === 'chief-general') {
return `${formatOfficerLevelText(context.level, nationLevel.value)} 임명 대상 선택`;
}
if (context.kind === 'city') return `${officerLabels[context.level]} 임명 도시 선택`;
return `${officerLabels[context.level]} 임명 대상 선택`;
});
const selectionDescription = computed(() => {
const context = selectionContext.value;
if (!context) return '';
if (context.kind === 'city') {
return '지역과 도시 규모, 현재 재직자를 확인한 뒤 임명할 도시를 선택하세요.';
}
if (context.kind === 'chief-general') {
if (context.level === 11) return '군주를 제외한 장수 중에서 임명할 수 있습니다.';
const stat = context.level % 2 === 0 ? '무력' : '지력';
return `${stat} ${data.value?.chiefStatMin ?? 0} 이상인 장수만 표시합니다. 현재 관직과 주요 능력치를 함께 확인하세요.`;
}
if (context.level === 4) {
return `무력 ${data.value?.chiefStatMin ?? 0} 이상인 장수만 표시합니다. 현재 관직과 소재지를 함께 확인하세요.`;
}
if (context.level === 3) {
return `지력 ${data.value?.chiefStatMin ?? 0} 이상인 장수만 표시합니다. 현재 관직과 소재지를 함께 확인하세요.`;
}
return '현재 관직과 소재지, 주요 능력치를 확인한 뒤 임명할 장수를 선택하세요.';
});
const selectionItems = computed<SelectionDialogItem[]>(() => {
const context = selectionContext.value;
if (!context) return [];
if (context.kind === 'chief-general') {
return chiefCandidates(context.level).map((general) => generalSelectionItem(general, context.level));
}
if (context.kind === 'city') {
return openCities(context.level).map((city) => citySelectionItem(city, context.level));
}
return cityCandidates(context.level).map((general) => generalSelectionItem(general, context.level));
});
const selectionId = computed(() => {
const context = selectionContext.value;
if (!context) return 0;
if (context.kind === 'chief-general') return chiefAppointmentDraft[context.level] ?? 0;
if (context.kind === 'city') return cityDraft[context.level].cityId;
return cityDraft[context.level].generalId;
});
const applySelection = (id: number): void => {
const context = selectionContext.value;
if (!context) return;
if (context.kind === 'chief-general') chiefAppointmentDraft[context.level] = id;
else if (context.kind === 'city') cityDraft[context.level].cityId = id;
else cityDraft[context.level].generalId = id;
selectionContext.value = null;
};
const enforcePermissionLimit = (selection: number[]) => {
if (selection.length <= 2) return;
selection.splice(0, selection.length - 2);
@@ -173,10 +322,10 @@ const changePermissions = async (isAmbassador: boolean) => {
const kickGeneral = async () => {
const target = generalMap.value.get(kickTargetId.value);
if (!target || !window.confirm(`${target.name}을(를) 추방하시겠습니까?`)) return;
if (!target || !window.confirm(`${JosaUtil.put(target.name, '을')} 추방하시겠습니까?`)) return;
await runMutation(
() => trpc.nation.kick.mutate({ destGeneralId: target.id }),
`${target.name}을(를) 추방했습니다.`
`${JosaUtil.put(target.name, '을')} 추방했습니다.`
);
};
@@ -198,7 +347,6 @@ onMounted(() => void loadPersonnel());
</table>
<div v-if="error" class="feedback error" role="alert">{{ error }}</div>
<div v-if="status" class="feedback status" role="status">{{ status }}</div>
<div v-if="loading" class="loading">불러오는 중...</div>
<template v-if="data && !loading">
@@ -263,39 +411,83 @@ onMounted(() => void loadPersonnel());
<tr>
<td colspan="4" class="section-title blue">수 뇌 부 임 명</td>
</tr>
<tr v-for="(pair, pairIndex) in chiefPairs" :key="pairIndex">
<template v-for="level in pair" :key="level">
<td class="green-cell appoint-label">{{ formatOfficerLevelText(level, nationLevel) }}</td>
<td class="appoint-control">
<template v-if="canManage && level !== 12 && !chiefLocked(level)">
<select
v-model.number="chiefAppointmentDraft[level]"
:aria-label="`${formatOfficerLevelText(level, nationLevel)} 대상`"
>
<option :value="0">____공석____</option>
<option
v-for="candidate in chiefCandidates(level)"
:key="candidate.id"
:value="candidate.id"
<tr>
<td colspan="4" class="appointment-workspace-cell">
<div class="appointment-card-grid">
<article v-for="level in chiefLevels" :key="level" class="appointment-card">
<header class="appointment-card-header">
<span>{{ formatOfficerLevelText(level, nationLevel) }}</span>
<small v-if="chiefLocked(level)" class="appointment-lock">변경 잠금</small>
<small v-else> 현재 {{ chiefAssignments[level]?.name ?? '공석' }} </small>
</header>
<template v-if="canManage && level !== 12 && !chiefLocked(level)">
<button
type="button"
class="selection-trigger"
:aria-label="`${formatOfficerLevelText(level, nationLevel)} 장수 선택`"
aria-haspopup="dialog"
@click="selectionContext = { kind: 'chief-general', level }"
>
{{ candidateLabel(candidate) }}
</option>
</select>
<button type="button" @click="appointChief(level)">임명</button>
</template>
<template v-else>
{{ chiefAssignments[level]?.name ?? '-' }}
<template v-if="chiefAssignments[level]">
【{{ chiefAssignments[level]?.cityName ?? '-' }}】</template
>
</template>
</td>
</template>
<span
v-if="selectedChief(level)"
class="selection-trigger-portrait"
:style="{ backgroundImage: imageBackground(selectedChief(level)) }"
aria-hidden="true"
/>
<span v-else class="selection-trigger-empty" aria-hidden="true">＋</span>
<span class="selection-trigger-copy">
<small>임명 대상</small>
<strong>{{ selectedChief(level)?.name ?? '공석으로 두기' }}</strong>
<span v-if="selectedChief(level)">
{{ selectedChief(level)?.cityName ?? '-' }} ·
{{ currentOfficeText(selectedChief(level)!) }}
</span>
<span v-else>눌러서 장수를 선택하세요</span>
</span>
<span class="selection-trigger-chevron" aria-hidden="true">›</span>
</button>
<div v-if="selectedChief(level)" class="selected-general-stats">
<span
>통솔
<strong>{{ selectedChief(level)?.stats.leadership }}</strong></span
>
<span
>무력 <strong>{{ selectedChief(level)?.stats.strength }}</strong></span
>
<span
>지력
<strong>{{ selectedChief(level)?.stats.intelligence }}</strong></span
>
<span
>소속 <strong>{{ selectedChief(level)?.belong }}년</strong></span
>
</div>
<button type="button" class="appointment-submit" @click="appointChief(level)">
{{ formatOfficerLevelText(level, nationLevel) }} 임명
</button>
</template>
<div v-else class="appointment-readonly">
<span
v-if="chiefAssignments[level]"
class="selection-trigger-portrait"
:style="{ backgroundImage: imageBackground(chiefAssignments[level]) }"
aria-hidden="true"
/>
<span v-else class="selection-trigger-empty" aria-hidden="true">－</span>
<span>
<strong>{{ chiefAssignments[level]?.name ?? '공석' }}</strong>
<small>{{ chiefAssignments[level]?.cityName ?? '임명된 장수 없음' }}</small>
</span>
</div>
</article>
</div>
</td>
</tr>
<tr>
<td colspan="4" class="legend">
※ <span class="red">빨간색</span>은 현재 임명중인 장수, <span class="orange">노란색</span>은
다른 관직에 임명된 장수, 하얀색은 일반 장수를 뜻합니다.
※ 장수 선택 창에서 현재 임명 중인 장수, 다른 관직 재직자와 일반 장수를 구분하고 주요
능력치·소재지·부대 정보를 함께 확인할 수 있습니다.
</td>
</tr>
</tbody>
@@ -372,38 +564,97 @@ onMounted(() => void loadPersonnel());
<tr>
<td colspan="5" class="section-title orange-bg">도 시 관 직 임 명</td>
</tr>
<tr v-for="level in cityOfficerLevels" :key="level">
<td colspan="3" class="blue-cell city-appoint-label">{{ officerLabels[level] }} 임명</td>
<td colspan="2">
<select
v-model.number="cityDraft[level].cityId"
:aria-label="`${officerLabels[level]} 도시`"
>
<option v-for="city in openCities(level)" :key="city.id" :value="city.id">
【{{ regionMap[city.region] ?? '-' }}】 {{ city.name }}
</option>
</select>
<select
v-model.number="cityDraft[level].generalId"
:aria-label="`${officerLabels[level]} 장수`"
>
<option :value="0">____공석____</option>
<option
v-for="candidate in cityCandidates(level)"
:key="candidate.id"
:value="candidate.id"
<tr>
<td colspan="5" class="appointment-workspace-cell">
<div class="city-appointment-grid">
<article
v-for="level in cityOfficerLevels"
:key="level"
class="appointment-card city-appointment-card"
>
{{ candidateLabel(candidate) }}
</option>
</select>
<button type="button" @click="appointCityOfficer(level)">임명</button>
<header class="appointment-card-header">
<span>{{ officerLabels[level] }}</span>
<small>도시 관직</small>
</header>
<button
type="button"
class="selection-trigger compact"
:aria-label="`${officerLabels[level]} 도시 선택`"
aria-haspopup="dialog"
@click="selectionContext = { kind: 'city', level }"
>
<span class="selection-trigger-city" aria-hidden="true">城</span>
<span class="selection-trigger-copy">
<small>임명 도시</small>
<strong>{{ selectedCity(level)?.name ?? '도시 선택' }}</strong>
<span v-if="selectedCity(level)">
{{ regionMap[selectedCity(level)?.region ?? 0] ?? '-' }} ·
{{ cityLevelMap[selectedCity(level)?.level ?? 0] ?? '-' }}도시
</span>
</span>
<span class="selection-trigger-chevron" aria-hidden="true">›</span>
</button>
<button
type="button"
class="selection-trigger compact"
:aria-label="`${officerLabels[level]} 장수 선택`"
aria-haspopup="dialog"
@click="selectionContext = { kind: 'city-general', level }"
>
<span
v-if="selectedCityGeneral(level)"
class="selection-trigger-portrait"
:style="{
backgroundImage: imageBackground(selectedCityGeneral(level)),
}"
aria-hidden="true"
/>
<span v-else class="selection-trigger-empty" aria-hidden="true">＋</span>
<span class="selection-trigger-copy">
<small>임명 대상</small>
<strong>{{
selectedCityGeneral(level)?.name ?? '공석으로 두기'
}}</strong>
<span v-if="selectedCityGeneral(level)">
{{ selectedCityGeneral(level)?.cityName ?? '-' }} ·
{{ currentOfficeText(selectedCityGeneral(level)!) }}
</span>
</span>
<span class="selection-trigger-chevron" aria-hidden="true">›</span>
</button>
<div v-if="selectedCityGeneral(level)" class="selected-general-stats compact">
<span
>통
<strong>{{
selectedCityGeneral(level)?.stats.leadership
}}</strong></span
>
<span
>무
<strong>{{ selectedCityGeneral(level)?.stats.strength }}</strong></span
>
<span
>지
<strong>{{
selectedCityGeneral(level)?.stats.intelligence
}}</strong></span
>
</div>
<button
type="button"
class="appointment-submit"
:disabled="!selectedCity(level)"
@click="appointCityOfficer(level)"
>
{{ officerLabels[level] }} 임명
</button>
</article>
</div>
</td>
</tr>
<tr>
<td colspan="5" class="legend">
※ <span class="red">빨간색</span>은 현재 임명중인 장수,
<span class="orange">노란색</span>은 다른 관직에 임명된 장수, 하얀색은 일반 장수를
뜻합니다.
※ 도시의 지역·규모·현재 재직자와 장수의 능력치·현재 관직을 확인한 뒤 임명할 수 있습니다.
</td>
</tr>
</template>
@@ -514,6 +765,20 @@ onMounted(() => void loadPersonnel());
</table>
</template>
</main>
<PersonnelSelectionDialog
:open="selectionContext !== null"
:title="selectionTitle"
:description="selectionDescription"
:items="selectionItems"
:selected-id="selectionId"
:search-placeholder="
selectionContext?.kind === 'city' ? '도시명·지역·재직자 검색' : '장수명·도시·관직·특성 검색'
"
:vacancy-label="selectionContext?.kind === 'city' ? null : '공석으로 두기'"
@cancel="selectionContext = null"
@select="applySelection"
/>
</template>
<style scoped>
@@ -686,6 +951,179 @@ select[multiple] {
.appointment-table .appoint-control {
width: 398px;
}
.appointment-workspace-cell {
padding: 12px !important;
background: linear-gradient(rgb(7 9 7 / 72%), rgb(7 9 7 / 72%)), var(--sammo-texture-walnut);
}
.appointment-card-grid,
.city-appointment-grid {
display: grid;
gap: 12px;
}
.appointment-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.city-appointment-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.appointment-card {
min-width: 0;
padding: 12px;
background: linear-gradient(145deg, rgb(36 40 31 / 96%), rgb(16 18 15 / 98%));
border: 1px solid #555845;
border-radius: 10px;
box-shadow: 0 7px 18px rgb(0 0 0 / 28%);
}
.appointment-card-header {
display: flex;
gap: 8px;
align-items: baseline;
justify-content: space-between;
margin-bottom: 9px;
color: #e4cc8a;
}
.appointment-card-header > span {
font-size: 17px;
font-weight: 800;
}
.appointment-card-header small {
color: #aaa99f;
}
.appointment-card-header .appointment-lock {
color: #e6aa45;
}
.selection-trigger,
.appointment-readonly {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) 18px;
gap: 9px;
align-items: center;
width: 100%;
min-width: 0;
min-height: 70px;
border: 1px solid #5a5e4d;
border-radius: 8px;
padding: 8px;
color: #f7f4eb;
background: #10120f;
text-align: left;
}
.selection-trigger {
cursor: pointer;
}
.selection-trigger:hover {
filter: none;
background: #1d211a;
border-color: #9f9063;
}
.selection-trigger:focus-visible {
outline: 2px solid #f0cf75;
outline-offset: 2px;
}
.selection-trigger.compact {
grid-template-columns: 42px minmax(0, 1fr) 16px;
min-height: 62px;
margin-top: 7px;
}
.selection-trigger-portrait,
.selection-trigger-empty,
.selection-trigger-city {
width: 48px;
height: 48px;
border: 1px solid #5e6251;
border-radius: 8px;
background-color: #060706;
}
.selection-trigger-portrait {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.selection-trigger-empty,
.selection-trigger-city {
display: grid;
place-items: center;
color: #d9bf78;
background: radial-gradient(circle at 50% 30%, #363828, #0d0f0c 75%);
font: 700 22px/1 var(--sammo-font-sans);
}
.compact .selection-trigger-portrait,
.compact .selection-trigger-empty,
.compact .selection-trigger-city {
width: 42px;
height: 42px;
}
.selection-trigger-copy,
.appointment-readonly > span:last-child {
display: grid;
min-width: 0;
}
.selection-trigger-copy small,
.appointment-readonly small {
color: #aaa99f;
font-size: 10px;
}
.selection-trigger-copy strong,
.appointment-readonly strong {
overflow: hidden;
color: #fff;
font-size: 15px;
text-overflow: ellipsis;
white-space: nowrap;
}
.selection-trigger-copy > span:last-child {
overflow: hidden;
color: #c0c0b8;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.selection-trigger-chevron {
color: #cdb56e;
font-size: 26px;
text-align: center;
}
.appointment-readonly {
grid-template-columns: 48px minmax(0, 1fr);
color: #bbb;
background: #0d0e0c;
}
.selected-general-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
margin-top: 7px;
}
.selected-general-stats.compact {
grid-template-columns: repeat(3, 1fr);
}
.selected-general-stats > span {
display: flex;
gap: 4px;
justify-content: center;
padding: 4px 3px;
color: #aaa99f;
background: rgb(0 0 0 / 32%);
border-radius: 5px;
font-size: 10px;
}
.selected-general-stats strong {
color: #ead27f;
}
.appointment-submit {
width: 100%;
margin-top: 8px;
border-color: #4f7959;
color: #fff;
background: #376846;
font-weight: 800;
}
.appointment-submit:hover {
filter: brightness(1.15);
}
.city-appointment-card {
padding: 10px;
}
.legend {
line-height: 18px;
}
@@ -741,9 +1179,6 @@ select[multiple] {
.error {
color: #ff8080;
}
.status {
color: #80ff80;
}
@media (max-width: 1000px) {
.legacy-office {
margin: 0;
tools/frontend-legacy-parity/visual-parity.spec.ts
+30
View File
@@ -720,7 +720,37 @@ test.describe('best general legacy parity', () => {
expect(geometry.image).toMatchObject({ width: 64, height: 64, objectFit: 'fill' });
expect(geometry.image.naturalWidth).toBeGreaterThan(0);
const userButton = page.getByRole('button', { name: '유저 보기' });
const npcButton = page.getByRole('button', { name: 'NPC 보기' });
await expect(userButton).toHaveClass('legacy-button');
await expect(npcButton).toHaveClass('legacy-button');
await expect(userButton).toHaveCSS('background-color', 'rgb(55, 90, 127)');
await expect(npcButton).toHaveCSS('background-color', 'rgb(55, 90, 127)');
const selectorAppearance = await page.evaluate(() => {
const summarize = (element: Element) => {
const style = getComputedStyle(element);
return {
backgroundColor: style.backgroundColor,
borderRadius: style.borderRadius,
fontWeight: style.fontWeight,
lineHeight: style.lineHeight,
padding: style.padding,
};
};
const closeButton = document.querySelector('.legacy-ranking-title .legacy-button')!;
const selectorButtons = document.querySelectorAll('.view-selector .legacy-button');
const firstRect = selectorButtons[0]!.getBoundingClientRect();
const secondRect = selectorButtons[1]!.getBoundingClientRect();
return {
closeButton: summarize(closeButton),
userButton: summarize(selectorButtons[0]!),
npcButton: summarize(selectorButtons[1]!),
gap: secondRect.left - firstRect.right,
};
});
expect(selectorAppearance.userButton).toEqual(selectorAppearance.closeButton);
expect(selectorAppearance.npcButton).toEqual(selectorAppearance.closeButton);
expect(selectorAppearance.gap).toBe(4);
const npcButtonBox = await npcButton.boundingBox();
expect(npcButtonBox).not.toBeNull();
await page.mouse.move(