wip

hwe/ts/components/GeneralLiteCard.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="general-card-basic bg2">
+    <div class="general-icon" :style="{
+      backgroundImage: `url(${iconPath})`,
+    }"></div>
+
+    <div class="general-name" :style="{
+      color: isBrightColor(nation.color) ? '#000' : '#fff',
+      backgroundColor: nation.color,
+    }">
+      {{ general.name }} 【{{ general.officerLevelText }} | {{ generalTypeCall }} |
+      <span :style="{ color: injuryInfo.color }">{{ injuryInfo.text }}</span>
+      】
+    </div>
+
+    <div class="bg1">통솔</div>
+    <div>
+      <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>
+    </div>
+    <div class="bg1">무력</div>
+    <div>
+      <div class="row gx-0">
+        <div class="col" :style="{ color: injuryInfo.color }">
+          {{ general.strength }}
+        </div>
+      </div>
+    </div>
+    <div class="bg1">지력</div>
+    <div>
+      <div class="row gx-0">
+        <div class="col" :style="{ color: injuryInfo.color }">
+          {{ general.intel }}
+        </div>
+      </div>
+    </div>
+
+    <div class="bg1">자금</div>
+    <div>{{ general.gold.toLocaleString() }}</div>
+    <div class="bg1">군량</div>
+    <div>{{ general.rice.toLocaleString() }}</div>
+    <div class="bg1">성격</div>
+    <div v-b-tooltip.hover :title="personal.info ?? undefined">{{ personal.name }}</div>
+
+    <div class="bg1">특기</div>
+    <div>
+      <span v-b-tooltip.hover :title="specialDomestic.info ?? undefined"> {{ specialDomestic.name }}</span> /
+      <span v-b-tooltip.hover :title="specialWar.info ?? undefined"> {{ specialWar.name }}</span>
+    </div>
+
+    <div class="bg1">Lv</div>
+    <div class="general-exp-level">
+      {{ general.explevel }}
+    </div>
+
+    <div class="bg1">연령</div>
+    <div :style="{ color: ageColor }">{{ general.age }}세</div>
+
+    <div class="bg1">삭턴</div>
+    <div>{{ general.killturn }} 턴</div>
+
+    <div class="bg1">벌점</div>
+    <div class="general-connect-score">
+      {{ formatConnectScore(general.connect) }} {{ general.connect.toLocaleString() }}점
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { GeneralListItemP0 } from "@/defs/API/Nation";
+import { computed, inject, toRefs, type Ref } from "vue";
+import { getIconPath } from "@/util/getIconPath";
+import { isBrightColor } from "@/util/isBrightColor";
+import { formatInjury } from "@/utilGame/formatInjury";
+import type { NationStaticItem } from "@/defs";
+import { unwrap } from "@/util/unwrap";
+import type { GameConstStore } from "@/GameConstStore";
+import { formatGeneralTypeCall } from "@/utilGame/formatGeneralTypeCall";
+import { formatConnectScore } from "@/utilGame/formatConnectScore";
+const gameConstStore = unwrap(inject<Ref<GameConstStore>>("gameConstStore"));
+const props = defineProps<{
+  general: GeneralListItemP0;
+  nation: NationStaticItem;
+}>();
+
+const { general, nation } = toRefs(props);
+const iconPath = computed(() => getIconPath(general.value.imgsvr, general.value.picture));
+const injuryInfo = computed(() => {
+  const [text, color] = formatInjury(general.value.injury);
+  return {
+    text,
+    color,
+  };
+});
+const generalTypeCall = computed(() =>
+  formatGeneralTypeCall(
+    general.value.leadership,
+    general.value.strength,
+    general.value.intel,
+    gameConstStore.value.gameConst
+  )
+);
+
+const personal = computed(
+  () => gameConstStore.value.iActionInfo.personality[general.value.personal] ?? { value: "None", name: "-" }
+);
+const specialDomestic = computed(
+  () =>
+    gameConstStore.value.iActionInfo.specialDomestic[general.value.specialDomestic] ?? {
+      value: "None",
+      name: `-`,
+    }
+);
+const specialWar = computed(
+  () =>
+    gameConstStore.value.iActionInfo.specialWar[general.value.specialWar] ?? {
+      value: "None",
+      name: `-`,
+    }
+);
+
+const ageColor = computed(() => {
+  const age = general.value.age;
+  const retirementYear = gameConstStore.value.gameConst.retirementYear;
+  if (age < retirementYear * 0.75) {
+    return "limegreen";
+  }
+  if (age < retirementYear) {
+    return "yellow";
+  }
+  return "red";
+});
+
+</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;
+
+  border-bottom: 1px solid gray;
+  border-right: 1px solid gray;
+
+  >div.bg1,
+  >.general-crew-type-icon,
+  >.general-icon {
+    border-left: 1px solid gray;
+  }
+
+  >div {
+    border-top: 1px solid gray;
+  }
+}
+
+.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-connect-score {
+  grid-column: 5 / 8;
+}
+</style>

hwe/ts/components/GeneralSupplementCard.vue

@@ -38,24 +38,24 @@
       <div class="bg1">피살</div>
       <div>{{ general.deathcrew.toLocaleString() }}</div>
     </div>
-    <div :class="[props.showCommandList ? 'col-7' : 'col', 'general-card-dex']">
+    <div :class="[(props.showCommandList && general.reservedCommand) ? 'col-8' : 'col', 'general-card-dex']">
       <div class="part-title bg1">숙련도</div>
       <template v-for="[dexType, dex, dexInfo] of dexList" :key="dexType">
         <div class="bg1">{{ dexType }}</div>
         <div :style="{ color: dexInfo.color }">{{ dexInfo.name }}</div>
         <div>{{ (dex / 1000).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }}K</div>
         <div class="d-grid">
-          <div class="align-self-center"><SammoBar :height="10" :percent="dex / 1_000_000 * 100" /></div>
+          <div class="align-self-center"><SammoBar :height="10" :percent="(dex / 1_000_000) * 100" /></div>
         </div>
       </template>
     </div>
     <div
       v-if="props.showCommandList && general.reservedCommand && general.reservedCommand.length > 0"
-      class="col-5 general-card-turn"
+      class="col-4 general-card-turn"
     >
-      <div class="part-title">예약턴</div>
-      <div v-for="(turn, idx) in general.reservedCommand.slice(0, 5)" :key="idx">
-        {{ turn.brief }}
+      <div class="part-title bg1">예약턴</div>
+      <div v-for="(turn, idx) in general.reservedCommand.slice(0, 5)" :key="idx" class="command">
+        <span>{{ turn.brief }}</span>
       </div>
     </div>
   </div>
@@ -161,12 +161,16 @@ const dexList = computed((): [string, number, DexInfo][] => {
 }
 
 .general-card-turn {
-  .bg1 {
-    border-left: solid 1px gray;
+  > div {
+    height: calc(64px / 3);
+    border-bottom: solid 1px gray;
+    border-right: solid 1px gray;
   }
 
-  > div {
-    border-bottom: solid 1px gray;
+  > .command{
+    font-size: 90%;
+    display: grid;
+    align-content: center;
   }
 }
 </style>