feat,refac: vue3로 작성한 새 연감 페이지 (#217)

- 새 지도 렌더러 사용
- 새 연감 데이터 사용
- 500px 모드 지원
- Vue3 활용

Reviewed-on: https://storage.hided.net/gitea/devsam/core/pulls/217

hwe/ts/components/BottomBar.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="bg0" style="padding-top: 20px">
-    <button type="button" class="btn btn-sammo-base2 back_btn" @click="back">돌아가기</button>
+    <button type="button" class="btn btn-sammo-base2 back_btn" @click="back">
+      {{ props.type == "close" ? "창 닫기" : "돌아가기" }}
+    </button>
     <div />
   </div>
 </template>

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/components/TopBackBar.vue

@@ -1,6 +1,7 @@
 <template>
-  <div :class="['bg0', 'back_bar', teleportZone?'back_bar_teleport':undefined]">
-    <button type="button" class="btn btn-sammo-base2 back_btn" @click="back">돌아가기</button
+  <div :class="['bg0', 'back_bar', teleportZone ? 'back_bar_teleport' : undefined]">
+    <button type="button" class="btn btn-sammo-base2 back_btn" @click="back">
+      {{ props.type == "close" ? "창 닫기" : "돌아가기" }}</button
     ><button v-if="reloadable" type="button" class="btn btn-sammo-base2 reload_btn" @click="reload">갱신</button>
     <div v-else />
     <h2 class="title">
@@ -94,7 +95,7 @@ function reload() {
   margin-right: 2px;
 }
 
-.teleport-zone{
+.teleport-zone {
   height: 24pt;
 }