Merge branch 'main' into fix/tournament-bracket-20260802

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

@@ -219,6 +219,7 @@ const install = async (page: Page, mode: 'member' | 'wanderer' | 'admin' = 'memb
                             capitalCityId: 1,
                             level: 1,
                             power: 1234,
+                            generalCount: 2,
                             cities: ['업'],
                         },
                         {
@@ -228,6 +229,7 @@ const install = async (page: Page, mode: 'member' | 'wanderer' | 'admin' = 'memb
                             capitalCityId: 2,
                             level: 1,
                             power: 1000,
+                            generalCount: 1,
                             cities: ['허창'],
                         },
                     ],
@@ -350,6 +352,69 @@ test('four legacy menu pages keep the 1000px desktop table contract', async ({ p
     }
 });
 
+test('global-info renders the ref nation summary columns beside the map', async ({ page }) => {
+    await install(page);
+    await page.setViewportSize({ width: 1200, height: 900 });
+    await go(page, 'global-info');
+
+    const summary = page.locator('.simple-nation-list');
+    await expect(summary).toBeVisible();
+    await expect(summary.locator('thead')).toContainText('국명');
+    await expect(summary.locator('thead')).toContainText('국력');
+    await expect(summary.locator('thead')).toContainText('장수');
+    await expect(summary.locator('thead')).toContainText('속령');
+    await expect(summary.locator('tbody tr').first()).toHaveText(/아국\s*1,234\s*2\s*1/u);
+    await expect(summary.locator('tbody tr').first().locator('td').last()).toHaveAttribute('title', '업');
+
+    const geometry = await summary.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const headings = Array.from(element.querySelectorAll('th')).map((heading) => heading.getBoundingClientRect().width);
+        return { x: rect.x, width: rect.width, headings };
+    });
+    expect(geometry).toMatchObject({ x: 800, width: 300 });
+    expect(geometry.headings[0]).toBeCloseTo((300 * 44) / 97, 0);
+    expect(geometry.headings[1]).toBeCloseTo((300 * 23) / 97, 0);
+    expect(geometry.headings[2]).toBeCloseTo((300 * 15) / 97, 0);
+    expect(geometry.headings[3]).toBeCloseTo((300 * 15) / 97, 0);
+
+    if (artifactRoot) {
+        await mkdir(artifactRoot, { recursive: true });
+        await writeFile(
+            resolve(artifactRoot, 'core-global-info-computed-dom.json'),
+            `${JSON.stringify(
+                {
+                    geometry,
+                    headings: await summary.locator('th').allTextContents(),
+                    rows: await summary.locator('tbody tr').allTextContents(),
+                    cityTitles: await summary.locator('tbody td:last-child').evaluateAll((cells) =>
+                        cells.map((cell) => cell.getAttribute('title'))
+                    ),
+                },
+                null,
+                2
+            )}\n`,
+            'utf8'
+        );
+        await page.screenshot({ path: resolve(artifactRoot, 'core-global-info-desktop.png'), fullPage: true });
+    }
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    const mobileGeometry = await page.locator('.map-grid').evaluate((element) => {
+        const map = element.querySelector('.map-viewer')?.getBoundingClientRect();
+        const summary = element.querySelector('.simple-nation-list')?.getBoundingClientRect();
+        return {
+            map: map ? { y: map.y, width: map.width, bottom: map.bottom } : null,
+            summary: summary ? { y: summary.y, width: summary.width } : null,
+        };
+    });
+    expect(mobileGeometry.map?.width).toBe(500);
+    expect(mobileGeometry.summary?.width).toBe(500);
+    expect(mobileGeometry.summary?.y).toBe(mobileGeometry.map?.bottom);
+    if (artifactRoot) {
+        await page.screenshot({ path: resolve(artifactRoot, 'core-global-info-mobile.png'), fullPage: true });
+    }
+});
+
 test('current-city hides values and general rows for a wandering user', async ({ page }) => {
     await install(page, 'wanderer');
     await go(page, 'current-city');

app/game-frontend/src/views/GlobalInfoView.vue

@@ -11,6 +11,18 @@ const error = ref('');
 const state = (value: number) => ({ 0: '★', 1: '▲', 2: '', 7: '@' })[value] ?? 'ㆍ';
 const stateClass = (value: number) => `state-${value}`;
 const nationMap = computed(() => new Map(data.value?.nations.map((nation) => [nation.id, nation]) ?? []));
+const isBrightColor = (color: string): boolean => {
+    const normalized = color.trim().replace(/^#/u, '');
+    if (!/^[0-9a-f]{6}$/iu.test(normalized)) return false;
+    const red = Number.parseInt(normalized.slice(0, 2), 16);
+    const green = Number.parseInt(normalized.slice(2, 4), 16);
+    const blue = Number.parseInt(normalized.slice(4, 6), 16);
+    return red * 0.299 + green * 0.587 + blue * 0.114 > 170;
+};
+const nationNameStyle = (color: string) => ({
+    backgroundColor: color,
+    color: isBrightColor(color) ? '#000' : '#fff',
+});
 onMounted(async () => {
     try {
         [data.value, layout.value] = await Promise.all([
@@ -96,10 +108,29 @@ onMounted(async () => {
             <div class="map-grid">
                 <MapViewer :map-data="data.map" :map-layout="layout" :loading="false" />
                 <div class="nation-list">
-                    <div v-for="nation in data.nations" :key="nation.id">
-                        <b :style="{ color: nation.color }">【{{ nation.name }}】</b> {{ nation.power.toLocaleString()
-                        }}<br /><small>{{ nation.cities.join(', ') }}</small>
-                    </div>
+                    <table class="simple-nation-list">
+                        <thead>
+                            <tr>
+                                <th class="nation-name-column">국명</th>
+                                <th class="nation-power-column">국력</th>
+                                <th class="nation-count-column">장수</th>
+                                <th class="nation-count-column">속령</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="nation in data.nations" :key="nation.id">
+                                <td><span :style="nationNameStyle(nation.color)">{{ nation.name }}</span></td>
+                                <td>{{ nation.power.toLocaleString() }}</td>
+                                <td>{{ nation.generalCount.toLocaleString() }}</td>
+                                <td
+                                    :title="nation.cities.join(', ')"
+                                    :aria-label="`속령 ${nation.cities.length}개: ${nation.cities.join(', ')}`"
+                                >
+                                    {{ nation.cities.length.toLocaleString() }}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
             </div>
         </section>
@@ -218,9 +249,38 @@ onMounted(async () => {
     display: grid;
     grid-template-columns: 700px 300px;
 }
-.nation-list > div {
-    padding: 6px;
-    border-bottom: 1px solid #666;
+.simple-nation-list {
+    width: 100%;
+    border-collapse: collapse;
+}
+.simple-nation-list thead {
+    background-color: #ccc;
+    color: #000;
+    text-align: center;
+}
+.simple-nation-list th {
+    border: 0;
+    border-left: 1px solid gray;
+    padding: 2px 6px;
+    font-weight: 700;
+}
+.simple-nation-list td {
+    border: 0;
+    border-left: 1px solid gray;
+    padding: 1px 6px;
+    text-align: right;
+}
+.simple-nation-list td:first-child {
+    text-align: left;
+}
+.nation-name-column {
+    width: 44%;
+}
+.nation-power-column {
+    width: 23%;
+}
+.nation-count-column {
+    width: 15%;
 }
 .footer {
     margin-top: 20px;