feat(game): match Ref nation basic card

app/game-frontend/e2e/inGameInfo.spec.ts

@@ -116,7 +116,31 @@ const generalContext = {
         items: { horse: 'None', weapon: 'None', book: 'None', item: 'None' },
     },
     city,
-    nation: { id: 1, name: '아국', color: '#008000', level: 1 },
+    nation: {
+        id: 1,
+        name: '아국',
+        color: '#008000',
+        level: 1,
+        gold: 10_000,
+        rice: 9_000,
+        tech: 100,
+        typeName: '유가',
+        typePros: '농상↑ 민심↑',
+        typeCons: '쌀수입↓',
+        population: { cityCount: 1, current: 150_000, max: 620_500 },
+        crew: { generalCount: 2, current: 500, max: 7_000 },
+        power: 1_234,
+        bill: 100,
+        taxRate: 20,
+        strategicCommandLimit: 0,
+        diplomaticLimit: 0,
+        prohibitScout: false,
+        prohibitWar: false,
+        techLevel: 0,
+        techLimited: false,
+        topChiefs: {},
+        impossibleStrategicCommands: [],
+    },
     settings: {},
     penalties: {},
 };

app/game-frontend/e2e/inGameMenus.spec.ts

@@ -145,9 +145,24 @@ const myGeneral = (state: FixtureState) => ({
               rice: 0,
               tech: 0,
               typeCode: 'None',
-              typeName: '해당 없음',
+              typeName: '-',
+              typePros: '',
+              typeCons: '',
               capitalCityId: null,
               capitalCityName: null,
+              population: { cityCount: 0, current: 0, max: 0 },
+              crew: { generalCount: 0, current: 0, max: 0 },
+              power: 0,
+              bill: 100,
+              taxRate: 20,
+              strategicCommandLimit: 0,
+              diplomaticLimit: 0,
+              prohibitScout: false,
+              prohibitWar: false,
+              techLevel: 0,
+              techLimited: false,
+              topChiefs: {},
+              impossibleStrategicCommands: [],
           }
         : {
               id: 1,
@@ -162,6 +177,21 @@ const myGeneral = (state: FixtureState) => ({
               typeName: '법가',
               capitalCityId: 1,
               capitalCityName: '업',
+              typePros: '금수입↑ 치안↑',
+              typeCons: '인구↓ 민심↓',
+              population: { cityCount: 1, current: 1_000, max: 2_000 },
+              crew: { generalCount: 2, current: 500, max: 7_000 },
+              power: 1_234,
+              bill: 100,
+              taxRate: 20,
+              strategicCommandLimit: 0,
+              diplomaticLimit: 0,
+              prohibitScout: false,
+              prohibitWar: false,
+              techLevel: 0,
+              techLimited: false,
+              topChiefs: {},
+              impossibleStrategicCommands: [],
           },
     settings: {
         tnmt: 0,

app/game-frontend/e2e/mainNavigation.spec.ts

@@ -260,6 +260,24 @@ const generalContext = (state: NavigationFixture) => ({
         bill: 100,
         capitalCityId: 1,
         typeCode: 'che_유가',
+        typeName: '유가',
+        typePros: '농상↑ 민심↑',
+        typeCons: '쌀수입↓',
+        population: { cityCount: 2, current: 150_000, max: 620_500 },
+        crew: { generalCount: 2, current: 500, max: 7_000 },
+        power: 1_234,
+        taxRate: state.nationRate ?? 20,
+        strategicCommandLimit: 2,
+        diplomaticLimit: 0,
+        prohibitScout: false,
+        prohibitWar: true,
+        techLevel: 0,
+        techLimited: false,
+        topChiefs: {
+            12: { id: 1, name: '군주', npcState: 0 },
+            11: { id: 2, name: '참모', npcState: 1 },
+        },
+        impossibleStrategicCommands: [{ name: '수몰', remainingTurns: 2, availableYear: 190, availableMonth: 5 }],
     },
     settings: {},
     penalties: {},
@@ -568,17 +586,17 @@ const persistArtifact = async (page: Page, name: string) => {
             nationPopup: describe('#mobile-nation-menu'),
             quickPopup: describe('#mobile-quick-menu'),
             commandMenu: describe('.reserved-command-editor details[open] .menu-items'),
-            commandDividers: [...document.querySelectorAll<HTMLElement>('.reserved-command-editor details[open] .menu-divider')].map(
-                (element) => {
-                    const rect = element.getBoundingClientRect();
-                    const style = getComputedStyle(element);
-                    return {
-                        rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-                        borderTop: style.borderTop,
-                        margin: style.margin,
-                    };
-                }
-            ),
+            commandDividers: [
+                ...document.querySelectorAll<HTMLElement>('.reserved-command-editor details[open] .menu-divider'),
+            ].map((element) => {
+                const rect = element.getBoundingClientRect();
+                const style = getComputedStyle(element);
+                return {
+                    rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+                    borderTop: style.borderTop,
+                    margin: style.margin,
+                };
+            }),
         };
     });
     const commandMenu = page.locator('.reserved-command-editor details[open] .menu-items').first();
@@ -867,6 +885,31 @@ test('main cards and command input stay inside their Ref-sized grid slots', asyn
     await expect(page.locator('[data-main-target="general"] [data-dex-progress]')).toHaveCount(0);
     await expect(page.locator('[data-main-target="general"] [role="progressbar"]')).toHaveCount(4);
 
+    const nationCard = page.locator('[data-main-target="nation"] [data-nation-basic-card]');
+    await expect(nationCard.locator('.head')).toHaveCount(17);
+    await expect(nationCard).toContainText('유가 (농상↑ 민심↑쌀수입↓)');
+    await expect(nationCard).toContainText('영주군주참모ⓝ참모');
+    await expect(nationCard).toContainText('총 주민150,000 / 620,500');
+    await expect(nationCard).toContainText('총 병사500 / 7,000');
+    await expect(nationCard).toContainText('지급률100%');
+    await expect(nationCard).toContainText('전략2턴');
+    await expect(nationCard).toContainText('임관허가');
+    await expect(nationCard).toContainText('전쟁금지');
+    expect(await nationCard.evaluate((element) => element.getBoundingClientRect().height)).toBe(193);
+    const nationRowHeights = await nationCard
+        .locator('.nation-grid')
+        .evaluate((element) => [...element.children].map((child) => child.getBoundingClientRect().height));
+    expect(Math.max(...nationRowHeights) - Math.min(...nationRowHeights)).toBeLessThanOrEqual(0.01);
+    const strategicCell = nationCard.locator('.strategic');
+    const strategicTooltip = strategicCell.getByRole('tooltip');
+    await expect(strategicTooltip).toBeHidden();
+    await strategicCell.hover();
+    await expect(strategicTooltip).toBeVisible();
+    await expect(strategicTooltip).toContainText('수몰: 2턴 뒤(190년 5월부터)');
+    await strategicCell.focus();
+    await expect(strategicCell).toBeFocused();
+    await expect(strategicTooltip).toBeVisible();
+
     expect(await cityBars.first().evaluate((element) => element.getBoundingClientRect().height)).toBe(9);
     expect(await statBars.first().evaluate((element) => element.getBoundingClientRect().height)).toBe(12);
     expect(await experienceBar.evaluate((element) => element.getBoundingClientRect().height)).toBe(12);
@@ -968,8 +1011,9 @@ test('main cards and command input stay inside their Ref-sized grid slots', asyn
     await modeButton.focus();
     await expect(modeButton).toBeFocused();
     await modeButton.click();
-    const advancedControlGeometry = await page.locator('[data-main-target="commands"] .reserved-command-editor').evaluate(
-        (editor) => {
+    const advancedControlGeometry = await page
+        .locator('[data-main-target="commands"] .reserved-command-editor')
+        .evaluate((editor) => {
             const range = editor.querySelector<HTMLElement>('.range-menu');
             const recent = [...editor.querySelectorAll<HTMLElement>('.control-pad summary')].find((element) =>
                 element.textContent?.includes('최근 실행')
@@ -984,8 +1028,7 @@ test('main cards and command input stay inside their Ref-sized grid slots', asyn
                 advancedBottom: advanced.getBoundingClientRect().bottom,
                 queueTop: queue.getBoundingClientRect().top,
             };
-        }
-    );
+        });
     expect(advancedControlGeometry.rangeTop).toBe(advancedControlGeometry.recentTop);
     expect(advancedControlGeometry.advancedTop).toBeGreaterThan(advancedControlGeometry.rangeTop);
     expect(advancedControlGeometry.advancedBottom).toBeLessThanOrEqual(advancedControlGeometry.queueTop);
@@ -1161,6 +1204,11 @@ test('main cards and command input stay inside their Ref-sized grid slots', asyn
     expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(500);
     await expect(page.locator('[data-main-target="city"] [role="progressbar"]')).toHaveCount(8);
     await expect(page.locator('[data-main-target="general"] [role="progressbar"]')).toHaveCount(4);
+    const mobileNationCard = page.locator('[data-main-target="nation"] [data-nation-basic-card]');
+    expect(await mobileNationCard.evaluate((element) => element.getBoundingClientRect().height)).toBe(193);
+    expect(await mobileNationCard.evaluate((element) => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(
+        0
+    );
     expect(
         await page
             .locator('[data-main-target="city"] [role="progressbar"]')
@@ -1362,12 +1410,7 @@ test('real mobile devices initially fit the complete 500px game canvas', async (
 
         const routeGeometry: Record<string, unknown> = {};
         if (deviceWidth === 390) {
-            for (const target of [
-                'chief-center',
-                'battle-center',
-                'inherit',
-                'nation-betting',
-            ]) {
+            for (const target of ['chief-center', 'battle-center', 'inherit', 'nation-betting']) {
                 await mobilePage.goto(target);
                 await expect
                     .poll(() => mobilePage.locator('#app').evaluate((element) => getComputedStyle(element).minWidth))
@@ -1721,10 +1764,7 @@ test('realtime read-model events skip clock-only work, merge bursts, patch in pl
         { op: 'replace', path: '/general/0/values/1/possible', value: false },
         { op: 'replace', path: '/general/0/values/1/status', value: 'blocked' },
     ];
-    await emitReadModelInvalidation(
-        page,
-        readModelInvalidation({ context: true, commands: true, boardAccess: true })
-    );
+    await emitReadModelInvalidation(page, readModelInvalidation({ context: true, commands: true, boardAccess: true }));
     await expect.poll(() => state.generalMeCalls, { timeout: 4_000 }).toBe(callsBeforeTax + 1);
 
     const callsBeforeCityState = state.generalMeCalls;
@@ -1751,10 +1791,7 @@ test('realtime read-model events skip clock-only work, merge bursts, patch in pl
     state.contextRevision = 'O'.repeat(22);
     state.contextOperations = [{ op: 'replace', path: '/missing/value', value: 'invalid-delta' }];
     state.commandTableOperations = [];
-    await emitReadModelInvalidation(
-        page,
-        readModelInvalidation({ context: true, commands: true, boardAccess: true })
-    );
+    await emitReadModelInvalidation(page, readModelInvalidation({ context: true, commands: true, boardAccess: true }));
     await expect.poll(() => state.generalMeCalls, { timeout: 4_000 }).toBe(callsBeforeFallback + 2);
     expect(state.forceSnapshotCalls).toBe(forcedBeforeFallback + 1);
     await expect(page.locator('.general-title')).toContainText('snapshot복구장수');

app/game-frontend/src/components/main/NationBasicCard.vue

@@ -1,86 +1,296 @@
 <script setup lang="ts">
 import SkeletonLines from '../ui/SkeletonLines.vue';
 import { legacyNationTextColor } from '../../utils/legacyNationColor';
+import { formatOfficerLevelText } from '../../utils/nationFormat';
+import { getNpcColor } from '../../utils/npcColor';
+
+interface NationChief {
+    id: number;
+    name: string;
+    npcState: number;
+}
 
 interface NationInfo {
     id: number;
     name: string;
     color: string;
     level: number;
-    levelName: string;
     gold: number;
     rice: number;
     tech: number;
-    typeCode: string;
     typeName: string;
-    capitalCityId: number | null;
-    capitalCityName: string | null;
+    typePros: string;
+    typeCons: string;
+    population: { cityCount: number; current: number; max: number };
+    crew: { generalCount: number; current: number; max: number };
+    power: number;
+    bill: number;
+    taxRate: number;
+    strategicCommandLimit: number;
+    diplomaticLimit: number;
+    prohibitScout: boolean;
+    prohibitWar: boolean;
+    techLevel: number;
+    techLimited: boolean;
+    topChiefs: Record<number, NationChief | undefined>;
+    impossibleStrategicCommands: Array<{
+        name: string;
+        remainingTurns: number;
+        availableYear: number;
+        availableMonth: number;
+    }>;
 }
 
 const props = defineProps<{
     nation: NationInfo | null;
     loading: boolean;
 }>();
+
+const number = (value: number): string => value.toLocaleString('ko-KR');
+const displayChiefName = (chief: NationChief | undefined): string => {
+    if (!chief) return '-';
+    return chief.npcState > 0 && !/^[ⓜⓝ㉥]/u.test(chief.name) ? `ⓝ${chief.name}` : chief.name;
+};
 </script>
 
 <template>
-    <div class="nation-card">
-        <div v-if="props.loading">
-            <SkeletonLines :lines="4" />
-        </div>
+    <div class="nation-card" data-nation-basic-card>
+        <div v-if="props.loading" class="loading"><SkeletonLines :lines="6" /></div>
         <div v-else-if="!props.nation" class="empty">국가 정보를 불러오지 못했습니다.</div>
-        <div v-else class="nation-body">
+        <div v-else class="nation-grid">
             <div
                 class="title"
                 :style="{ backgroundColor: props.nation.color, color: legacyNationTextColor(props.nation.color) }"
             >
-                {{ props.nation.name }}<template v-if="props.nation.id > 0"> ({{ props.nation.levelName }})</template>
-            </div>
-            <div class="grid">
-                <span>국고</span
-                ><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.gold.toLocaleString() }}</strong>
-                <span>국량</span
-                ><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.rice.toLocaleString() }}</strong>
-                <span>기술</span
-                ><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.tech.toLocaleString() }}</strong>
-                <span>체제</span><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.typeName }}</strong>
-                <span>수도</span
-                ><strong>{{ props.nation.id === 0 ? '해당 없음' : (props.nation.capitalCityName ?? '-') }}</strong>
-                <span>국가 등급</span
-                ><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.levelName }}</strong>
+                {{ props.nation.name }}
             </div>
+
+            <span class="head">성향</span>
+            <strong class="body type-body">
+                {{ props.nation.typeName }} (<span class="pros">{{ props.nation.typePros }}</span>
+                <span class="cons">{{ props.nation.typeCons }}</span
+                >)
+            </strong>
+
+            <span class="head">{{ formatOfficerLevelText(12, props.nation.level) }}</span>
+            <strong class="body" :style="{ color: getNpcColor(props.nation.topChiefs[12]?.npcState ?? 1) }">
+                {{ displayChiefName(props.nation.topChiefs[12]) }}
+            </strong>
+            <span class="head">{{ formatOfficerLevelText(11, props.nation.level) }}</span>
+            <strong class="body" :style="{ color: getNpcColor(props.nation.topChiefs[11]?.npcState ?? 1) }">
+                {{ displayChiefName(props.nation.topChiefs[11]) }}
+            </strong>
+
+            <span class="head">총 주민</span>
+            <strong class="body">{{
+                props.nation.id === 0
+                    ? '해당 없음'
+                    : `${number(props.nation.population.current)} / ${number(props.nation.population.max)}`
+            }}</strong>
+            <span class="head">총 병사</span>
+            <strong class="body">{{
+                props.nation.id === 0
+                    ? '해당 없음'
+                    : `${number(props.nation.crew.current)} / ${number(props.nation.crew.max)}`
+            }}</strong>
+
+            <span class="head">국고</span>
+            <strong class="body">{{ props.nation.id === 0 ? '해당 없음' : number(props.nation.gold) }}</strong>
+            <span class="head">병량</span>
+            <strong class="body">{{ props.nation.id === 0 ? '해당 없음' : number(props.nation.rice) }}</strong>
+
+            <span class="head">지급률</span>
+            <strong class="body">{{ props.nation.id === 0 ? '해당 없음' : `${props.nation.bill}%` }}</strong>
+            <span class="head">세율</span>
+            <strong class="body">{{ props.nation.id === 0 ? '해당 없음' : `${props.nation.taxRate}%` }}</strong>
+
+            <span class="head">속령</span>
+            <strong class="body">{{
+                props.nation.id === 0 ? '해당 없음' : number(props.nation.population.cityCount)
+            }}</strong>
+            <span class="head">장수</span>
+            <strong class="body">{{
+                props.nation.id === 0 ? '해당 없음' : number(props.nation.crew.generalCount)
+            }}</strong>
+
+            <span class="head">국력</span>
+            <strong class="body">{{ props.nation.id === 0 ? '해당 없음' : number(props.nation.power) }}</strong>
+            <span class="head">기술력</span>
+            <strong class="body">
+                <template v-if="props.nation.id === 0">해당 없음</template>
+                <template v-else>
+                    {{ props.nation.techLevel }}등급 /
+                    <span :class="props.nation.techLimited ? 'tech-limited' : 'available'">{{
+                        number(Math.floor(props.nation.tech))
+                    }}</span>
+                </template>
+            </strong>
+
+            <span class="head">전략</span>
+            <strong
+                class="body strategic"
+                :class="{ 'has-tooltip': props.nation.impossibleStrategicCommands.length > 0 }"
+                :tabindex="props.nation.impossibleStrategicCommands.length > 0 ? 0 : undefined"
+            >
+                <template v-if="props.nation.id === 0">해당 없음</template>
+                <span v-else-if="props.nation.strategicCommandLimit" class="blocked"
+                    >{{ number(props.nation.strategicCommandLimit) }}턴</span
+                >
+                <span v-else :class="props.nation.impossibleStrategicCommands.length > 0 ? 'warning' : 'available'"
+                    >가능</span
+                >
+                <span
+                    v-if="props.nation.impossibleStrategicCommands.length > 0"
+                    class="cooldown-tooltip"
+                    role="tooltip"
+                >
+                    <span v-for="command in props.nation.impossibleStrategicCommands" :key="command.name">
+                        {{ command.name }}: {{ number(command.remainingTurns) }}턴 뒤({{ command.availableYear }}년
+                        {{ command.availableMonth }}월부터)
+                    </span>
+                </span>
+            </strong>
+            <span class="head">외교</span>
+            <strong class="body">
+                <template v-if="props.nation.id === 0">해당 없음</template>
+                <span v-else-if="props.nation.diplomaticLimit" class="blocked"
+                    >{{ number(props.nation.diplomaticLimit) }}턴</span
+                >
+                <span v-else class="available">가능</span>
+            </strong>
+
+            <span class="head">임관</span>
+            <strong class="body">
+                <template v-if="props.nation.id === 0">해당 없음</template>
+                <span v-else :class="props.nation.prohibitScout ? 'blocked' : 'available'">{{
+                    props.nation.prohibitScout ? '금지' : '허가'
+                }}</span>
+            </strong>
+            <span class="head">전쟁</span>
+            <strong class="body">
+                <template v-if="props.nation.id === 0">해당 없음</template>
+                <span v-else :class="props.nation.prohibitWar ? 'blocked' : 'available'">{{
+                    props.nation.prohibitWar ? '금지' : '허가'
+                }}</span>
+            </strong>
         </div>
     </div>
 </template>
 
 <style scoped>
-.title {
-    min-height: 24px;
-    padding: 2px 6px;
-    text-align: center;
-    font-weight: 600;
-}
-.grid {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+.nation-card {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: 193px;
+    color: #fff;
     font-size: 12px;
 }
-.grid > * {
-    min-height: 23px;
+
+.nation-grid {
+    display: grid;
     box-sizing: border-box;
-    border-right: 1px solid #666;
-    border-bottom: 1px solid #666;
-    padding: 2px 5px;
+    width: 100%;
+    height: 193px;
+    grid-template-columns: 14% 36% 14% 36%;
+    grid-template-rows: repeat(10, calc(192px / 10));
+    border-right: 1px solid gray;
+    border-bottom: 1px solid gray;
+    background-color: #172a52;
+    background-image: var(--sammo-texture-blue);
 }
-.grid > span {
-    background: rgb(20 75 42 / 70%);
+
+.nation-grid > * {
+    box-sizing: border-box;
+    min-width: 0;
+    border-top: 1px solid gray;
+    border-left: 1px solid gray;
+    padding: 0;
+    overflow: hidden;
+    line-height: calc(193px / 10);
     text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
-.grid > strong {
-    text-align: right;
+
+.title {
+    grid-column: 1 / 5;
+    font-weight: 700;
+}
+
+.head {
+    background-color: rgb(20 75 42 / 70%);
+}
+
+.body {
+    position: relative;
     font-weight: 400;
 }
 
+.type-body {
+    grid-column: 2 / 5;
+}
+
+.pros {
+    color: cyan;
+}
+
+.cons,
+.tech-limited {
+    color: magenta;
+}
+
+.blocked {
+    color: red;
+}
+
+.available {
+    color: limegreen;
+}
+
+.warning {
+    color: yellow;
+}
+
+.strategic.has-tooltip {
+    overflow: visible;
+    text-decoration: underline dashed red;
+}
+
+.cooldown-tooltip {
+    position: absolute;
+    z-index: 20;
+    bottom: calc(100% + 3px);
+    left: 50%;
+    display: none;
+    width: max-content;
+    max-width: 280px;
+    transform: translateX(-50%);
+    border: 1px solid #888;
+    padding: 4px 7px;
+    background: #111;
+    color: #fff;
+    line-height: 1.35;
+    text-align: left;
+    white-space: normal;
+}
+
+.cooldown-tooltip > span {
+    display: block;
+}
+
+.has-tooltip:hover .cooldown-tooltip,
+.has-tooltip:focus .cooldown-tooltip {
+    display: block;
+}
+
+.loading,
+.empty {
+    box-sizing: border-box;
+    min-height: 193px;
+    padding: 8px;
+}
+
 .empty {
     color: rgba(232, 221, 196, 0.6);
 }