wip: NationBasicCard

hwe/ts/PageFront.vue

@@ -26,7 +26,9 @@
           <div class="mapView">지도</div>
           <div class="reservedCommandZone">예턴</div>
           <div class="cityInfo">도시 정보</div>
-          <div class="nationInfo">국가 정보</div>
+          <div v-if="frontInfo" class="nationInfo">
+            <NationBasicCard />
+          </div>
           <div v-if="frontInfo && generalInfo && nationStaticInfo" class="generalInfo">
             <GeneralBasicCard
               :general="generalInfo"
@@ -97,6 +99,7 @@ import Denque from "denque";
 import { formatLog } from "@/utilGame/formatLog";
 import type { ExecuteResponse, GetFrontInfoResponse } from "./defs/API/Global";
 import { delay } from "./util/delay";
+import NationBasicCard from "./components/NationBasicCard.vue";
 import GeneralBasicCard from "./components/GeneralBasicCard.vue";
 import type { GeneralListItemP1 } from "./defs/API/Nation";
 import type { NationStaticItem } from "./defs";
@@ -297,7 +300,7 @@ watch(refreshCounter, async () => {
       power: rawNation.power,
     };
   } catch (e) {
-    recordLock = false;
+    generalInfoLock = false;
     console.error(e);
     toasts.danger({
       title: "최근 정보 갱신 실패",

hwe/ts/components/NationBasicCard.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="nation-card-basic bg2">
+    <div class="name tb-title">국가명</div>
+    <div class="type-head tb-head bg1">성향</div>
+    <div class="type-body tb-body"></div>
+    <div class="c12-head tb-head bg1">c12</div>
+    <div class="c12-body tb-body"></div>
+    <div class="c11-head tb-head bg1">c11</div>
+    <div class="c11-body tb-body"></div>
+    <div class="pop-head tb-head bg1">총 주민</div>
+    <div class="pop-body tb-body"></div>
+    <div class="crew-head tb-head bg1">총 병사</div>
+    <div class="crew-body tb-body"></div>
+    <div class="gold-head tb-head bg1">국고</div>
+    <div class="gold-body tb-body"></div>
+    <div class="rice-head tb-head bg1">병량</div>
+    <div class="rice-body tb-body"></div>
+    <div class="bill-head tb-head bg1">지급률</div>
+    <div class="bill-body tb-body"></div>
+    <div class="taxRate-head tb-head bg1">세율</div>
+    <div class="taxRate-body tb-body"></div>
+    <div class="cityCnt-head tb-head bg1">속령</div>
+    <div class="cityCnt-body tb-body"></div>
+    <div class="genCnt-head tb-head bg1">장수</div>
+    <div class="genCnt-body tb-body"></div>
+    <div class="power-head tb-head bg1">국력</div>
+    <div class="power-body tb-body"></div>
+    <div class="tech-head tb-head bg1">기술력</div>
+    <div class="tech-body tb-body"></div>
+    <div class="strategicCmd-head tb-head bg1">전략</div>
+    <div class="strategicCmd-body tb-body"></div>
+    <div class="diplomaticCmd-head tb-head bg1">외교</div>
+    <div class="diplomaticCmd-body tb-body"></div>
+    <div class="prohibitScout-head tb-head bg1">임관</div>
+    <div class="prohibitScout-body tb-body"></div>
+    <div class="prohibitWar-head tb-head bg1">전쟁</div>
+    <div class="prohibitWar-body tb-body"></div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.nation-card-basic{
+  width: 500px;
+  height: 193px;
+  display: grid;
+  grid-template-columns: 7fr 18fr 7fr 18fr;
+  grid-template-rows: repeat(10, calc(193px / 10));
+
+  border-bottom: solid 1px gray;
+  border-right: solid 1px gray;
+
+  .name{
+    grid-column: 1 / span 4;
+  }
+
+  .type-body{
+    grid-column: 2 / span 3;
+  }
+}
+
+.tb-title{
+  text-align: center;
+  padding: 0px;
+  line-height: calc(193px / 10);
+
+  border-left: solid 1px gray;
+  border-top: solid 1px gray;
+}
+.tb-head{
+  border-left: solid 1px gray;
+  border-top: solid 1px gray;
+
+  text-align: center;
+  padding: 0px;
+  line-height: calc(193px / 10);
+}
+
+.tb-body{
+  border-top: solid 1px gray;
+  padding: 0px;
+  line-height: calc(193px / 10);
+}
+</style>