From e014bc05e8276b0e240383b7575067ece03a3e0a Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Tue, 19 Apr 2022 02:43:35 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A4=91=EC=9B=90=EC=A0=95=EB=B3=B4,?=
 =?UTF-8?q?=20=EC=97=B0=EA=B0=90=EC=97=90=EC=84=9C=20=EC=93=B0=EB=8A=94=20?=
 =?UTF-8?q?=EB=8B=A8=EC=88=9C=20=EA=B5=AD=EA=B0=80=EC=A0=95=EB=B3=B4=20com?=
 =?UTF-8?q?ponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/components/SimpleNationList.vue | 72 ++++++++++++++++++++++++++
 hwe/ts/defs/index.ts                   | 15 +++++-
 2 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 hwe/ts/components/SimpleNationList.vue

diff --git a/hwe/ts/components/SimpleNationList.vue b/hwe/ts/components/SimpleNationList.vue
new file mode 100644
index 00000000..e5599653
--- /dev/null
+++ b/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>
diff --git a/hwe/ts/defs/index.ts b/hwe/ts/defs/index.ts
index fce1617c..d1cdd8b8 100644
--- a/hwe/ts/defs/index.ts
+++ b/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
 }
\ No newline at end of file