feat: 중원정보, 연감에서 쓰는 단순 국가정보 component

hwe/ts/components/SimpleNationList.vue

@@ -0,0 +1,72 @@
+<template>
+  <table class="simple_nation_list">
+    <thead>
+      <tr>
+        <th style="width: 44%">국명</th>
+        <th style="width: 23%">국력</th>
+        <th style="width: 15%">장수</th>
+        <th style="width: 15%">속령</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="nation of nations" :key="nation.nation">
+        <td>
+          <span
+            :style="{
+              color: isBrightColor(nation.color) ? '#000' : '#fff',
+              backgroundColor: nation.color,
+            }"
+            >{{ nation.name }}</span
+          >
+        </td>
+        <td style="text-align: right">{{ nation.power.toLocaleString() }}</td>
+        <td style="text-align: right">{{ nation.gennum.toLocaleString() }}</td>
+        <td v-b-tooltip.hover style="text-align: right" :title="(nation.cities ?? []).join(', ')">
+          {{ (nation.cities ?? []).length }}
+        </td>
+      </tr>
+    </tbody>
+    <tfoot></tfoot>
+  </table>
+</template>
+
+<script lang="ts" setup>
+import type { SimpleNationObj } from "@/defs";
+import type { PropType } from "vue";
+import { isBrightColor } from "@/util/isBrightColor";
+
+defineProps({
+  nations: {
+    type: Array as PropType<SimpleNationObj[]>,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.simple_nation_list {
+  width: 100%;
+
+  thead {
+    background-color: #cccccc;
+    color: black;
+    text-align: center;
+  }
+  th {
+    border: 0;
+    border-left: 1px solid gray;
+    padding: 2px 6px;
+  }
+
+  td {
+    border: 0;
+    border-left: 1px solid gray;
+    padding: 1px 6px;
+    text-align: right;
+  }
+
+  td:first-child {
+    text-align: left;
+  }
+}
+</style>

hwe/ts/defs/index.ts

@@ -1,6 +1,6 @@
 import type { Args } from "@/processing/args";
 import type { ValidResponse, InvalidResponse } from "@/util/callSammoAPI";
-import type { GameObjClassKey } from "./GameObj";
+import type { GameIActionKey, GameObjClassKey } from "./GameObj";
 
 export type { ValidResponse, InvalidResponse };
 export type BasicGeneralListResponse = {
@@ -247,4 +247,17 @@ export type MapResult = {
 
     theme?: string,
     history?: string[],
+}
+
+
+export type SimpleNationObj = {
+    capital: number,
+    cities: string[],
+    color: string,
+    gennum: number,
+    level: number,
+    name: string,
+    nation: number,
+    power: number,
+    type: GameIActionKey
 }