feat: 장수 추가정보 카드

- 막대 구현
- 기존의 추가정보에 5턴분량 예턴 표기

hwe/ts/components/GeneralBasicCard.vue

@@ -21,21 +21,38 @@
 
     <div>통솔</div>
     <div>
-      <span :style="{ color: injuryInfo.color }">{{ general.leadership }}</span>
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <span v-if="general.lbonus > 0" style="color: cyan">+{{ general.lbonus }}</span>
+      <div class="row gx-0">
+        <div class="col">
+          <span :style="{ color: injuryInfo.color }">{{ general.leadership }}</span>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <span v-if="general.lbonus > 0" style="color: cyan">+{{ general.lbonus }}</span>
+        </div>
+        <div class="col">
+          <SammoBar :height="10" :percent="general.leadership_exp / 20" />
+        </div>
+      </div>
     </div>
     <div>무력</div>
     <div>
-      <span :style="{ color: injuryInfo.color }">
-        {{ general.strength }}
-      </span>
+      <div class="row gx-0">
+        <div class="col" :style="{ color: injuryInfo.color }">
+          {{ general.strength }}
+        </div>
+        <div class="col">
+          <SammoBar :height="10" :percent="general.strength_exp / 20" />
+        </div>
+      </div>
     </div>
     <div>지력</div>
     <div>
-      <span :style="{ color: injuryInfo.color }">
-        {{ general.intel }}
-      </span>
+      <div class="row gx-0">
+        <div class="col" :style="{ color: injuryInfo.color }">
+          {{ general.intel }}
+        </div>
+        <div class="col">
+          <SammoBar :height="10" :percent="general.intel_exp / 20" />
+        </div>
+      </div>
     </div>
 
     <div>명마</div>
@@ -126,6 +143,7 @@ import type { GameConstStore } from "@/GameConstStore";
 import { formatGeneralTypeCall } from "@/utilGame/formatGeneralTypeCall";
 import { nextExpLevelRemain } from "@/utilGame/nextExpLevelRemain";
 import { formatConnectScore } from "@/utilGame/formatConnectScore";
+import SammoBar from "@/components/SammoBar.vue";
 import { parseTime } from "@/util/parseTime";
 import { clamp } from "lodash";
 const imagePath = window.pathConfig.gameImage;
@@ -219,8 +237,8 @@ onMounted(() => {
 .general-icon {
   width: 64px;
   height: 64px;
-  background-size: "64px 64px";
-  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
   grid-row: 1 / 4;
 }
 
@@ -233,8 +251,8 @@ onMounted(() => {
 .general-crew-type-icon {
   width: 64px;
   height: 64px;
-  background-size: "64px 64px";
-  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
   grid-row: 4 / 7;
 }
 

hwe/ts/components/GeneralSupplementCard.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="general-card-supplement row gx-0">
+    <div class="col-12 general-card-info">
+      <div class="part-title">추가 정보</div>
+      <div>명성</div>
+      <div>{{ formatHonor(general.experience) }} ({{ general.experience.toLocaleString() }})</div>
+      <div>계급</div>
+      <div>{{ general.dedLevelText }} ({{ general.dedication.toLocaleString() }}</div>
+      <div>봉급</div>
+      <div>{{ general.bill.toLocaleString() }}</div>
+
+      <div>전투</div>
+      <div>{{ general.warnum.toLocaleString() }}</div>
+      <div>계략</div>
+      <div>{{ general.firenum.toLocaleString() }}</div>
+      <div>사관</div>
+      <div>{{ general.belong }}년차</div>
+
+      <div>승률</div>
+      <div>{{ ((general.killnum / Math.max(general.warnum, 1)) * 100).toFixed(2) }} %</div>
+      <div>승리</div>
+      <div>{{ general.killnum.toLocaleString() }}</div>
+      <div>패배</div>
+      <div>{{ general.deathnum.toPrecision() }}</div>
+
+      <div>살상률</div>
+      <div>
+        {{
+          ((general.killcrew / Math.max(general.deathcrew, 1)) * 100).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })
+        }}
+        %
+      </div>
+      <div>사살</div>
+      <div>{{ general.killcrew.toLocaleString() }}</div>
+      <div>피살</div>
+      <div>{{ general.deathcrew.toLocaleString() }}</div>
+    </div>
+    <div class="col-7 general-card-dex">
+      <div class="part-title">숙련도</div>
+      <template v-for="[dexType, dex, dexInfo] of dexList" :key="dexType">
+        <div>{{ dexType }}</div>
+        <div :style="{ color: dexInfo.color }">{{ dexInfo.name }}</div>
+        <div>{{ (dex / 1000).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }}K</div>
+        <div>
+          <SammoBar :height="10" :percent="dex / 1_000_000" />
+        </div>
+      </template>
+    </div>
+    <div class="col-5 general-card-turn">
+      <div class="part-title">예약턴</div>
+      <template v-if="general.reservedCommand">
+        <div v-for="(turn, idx) in general.reservedCommand.slice(0, 5)" :key="idx">
+          {{ turn.brief }}
+        </div>
+      </template>
+      <div v-else style="grid-row: 2 / 7">NPC</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { GeneralListItemP1 } from "@/defs/API/Nation";
+import { computed } from "vue";
+import SammoBar from "@/components/SammoBar.vue";
+import { formatDexLevel, type DexInfo } from "@/utilGame/formatDexLevel";
+import { formatHonor } from "@/utilGame/formatHonor";
+const props = defineProps<{
+  general: GeneralListItemP1;
+}>();
+
+const dexList = computed((): [string, number, DexInfo][] => {
+  return [
+    ["보병", props.general.dex1, formatDexLevel(props.general.dex1)],
+    ["궁병", props.general.dex2, formatDexLevel(props.general.dex2)],
+    ["기병", props.general.dex3, formatDexLevel(props.general.dex3)],
+    ["귀병", props.general.dex4, formatDexLevel(props.general.dex4)],
+    ["차병", props.general.dex5, formatDexLevel(props.general.dex5)],
+  ];
+});
+</script>
+
+<style lang="scss" scoped>
+.general-card-basic {
+  display: grid;
+  grid-template-columns: 64px repeat(3, 2fr 5fr);
+  grid-template-rows: repeat(9, calc(64px / 3));
+  text-align: center;
+  font-size: 14px;
+}
+.general-icon {
+  width: 64px;
+  height: 64px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  grid-row: 1 / 4;
+}
+
+.general-name {
+  grid-row: 1 / 2;
+  grid-column: 2 / 8;
+  font-weight: bold;
+}
+
+.general-crew-type-icon {
+  width: 64px;
+  height: 64px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  grid-row: 4 / 7;
+}
+
+.general-exp-level-bar {
+  grid-column: 3 / 6;
+}
+
+.general-defence-train {
+  grid-column: 2 / 4;
+}
+
+.general-card-info {
+  display: grid;
+  grid-template-columns: repeat(3, 64px 1fr);
+  grid-template-rows: repeat(5, calc(64px / 3));
+
+  .part-title {
+    grid-column: 1 / 4;
+  }
+}
+
+.general-card-dex {
+  display: grid;
+  grid-template-columns: 64px 40px 60px 1fr;
+  grid-template-rows: repeat(6, calc(64px / 3));
+
+  .part-title {
+    grid-column: 1 / 5;
+  }
+}
+
+.general-card-turn {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(6, calc(64px / 3));
+}
+</style>

hwe/ts/components/SammoBar.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    v-b-tooltip.hover.top
+    :title="`${props.percent}$`"
+    class="sammo-bar"
+    :style="{
+      height: `${props.height}px`,
+      backgroundImage: `url(${imagePath}/pr${props.height - 2}.png)`,
+      backgroundRepeat: 'repeat-x',
+      backgroundPosition: 'center',
+      borderTop: 'solid 1px #888',
+      borderBottom: 'solid 1px #333',
+    }"
+  >
+    <div
+      class="sammo-bar-in"
+      :style="{
+        height: `${props.height}px`,
+        backgroundImage: `url(${imagePath}/pb${props.height - 2}.png)`,
+        backgroundRepeat: 'repeat-x',
+        backgroundPosition: 'left center',
+        width: `${clamp(props.percent, 0, 100)}%`,
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { clamp } from "lodash";
+const imagePath = window.pathConfig.gameImage;
+const props = defineProps<{
+  height: 7 | 10;
+  percent: number;
+}>();
+</script>