refac: linter 관련 설정 변경 및 적용, map_theme 변수 제거

- eslint에 prettier 조합
- prettierrc에 width 120, tabWidth 2
- gameStor->map_theme 제거
- map_theme, mapTheme를 GameConst::$mapName으로 대체
- eslint에서 vue/vue3-essential 대신 vue3-recommended 적용
  - vue/max-attributes-per-line 완화
  - vue/v-on-event-hyphenation 해제
  - vue/attribute-hyphenation 해제
- 일부 tsc import type warning 해결
- 일부 vue template type warning 해결
- 일부 vue SFC를 script setup으로 변경
  - TipTap
  - TopBackBar
  - BottomBackBar
  - BoardArticle
  - ProcessCity

hwe/ts/processing/General/che_건국.vue

@@ -1,7 +1,7 @@
 <template>
   <TopBackBar :title="commandName" />
-  <div class="bg0" v-if="!available건국">더 이상 건국은 불가능합니다.</div>
-  <div class="bg0" v-else>
+  <div v-if="!available건국" class="bg0">더 이상 건국은 불가능합니다.</div>
+  <div v-else class="bg0">
     <div>현재 도시에서 나라를 세웁니다. 중, 소도시에서만 가능합니다.</div>
     <ul>
       <li v-for="nationType in nationTypes" :key="nationType.type" class="row">
@@ -16,22 +16,17 @@
       </li>
     </ul>
     <div class="row">
-      <div class="col-4 col-md-2">
-        국명 : <b-form-input maxlength="18" v-model="destNationName" />
-      </div>
-      <div class="col-3 col-md-2">
-        색상 : <ColorSelect :colors="colors" v-model="selectedColorID" />
-      </div>
+      <div class="col-4 col-md-2">국명 : <b-form-input v-model="destNationName" maxlength="18" /></div>
+      <div class="col-3 col-md-2">색상 : <ColorSelect v-model="selectedColorID" :colors="colors" /></div>
       <div class="col-3 col-md-2">
         <label>성향 :</label>
-        <b-form-select
-          :options="nationTypesOption"
-          v-model="selectedNationType"
-        />
+        <b-form-select v-model="selectedNationType" :options="nationTypesOption" />
       </div>
 
       <div class="col-2 col-md-2 d-grid">
-        <b-button @click="submit">{{ commandName }}</b-button>
+        <b-button @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
@@ -42,10 +37,10 @@
 import ColorSelect from "@/processing/SelectColor.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
-import { procNationTypeList } from "../processingRes";
+import type { procNationTypeList } from "../processingRes";
 
 declare const commandName: string;
 

hwe/ts/processing/General/che_군량매매.vue

@@ -1,28 +1,23 @@
 <template>
   <TopBackBar :title="commandName" />
   <div class="bg0">
-    <div>
-      자신의 군량을 사거나 팝니다.<br />
-    </div>
+    <div>자신의 군량을 사거나 팝니다.<br /></div>
     <div class="row">
       <div class="col-2 col-md-1">
         군량을 :
         <b-button-group>
-          <b-button :pressed="buyRice" @click="buyRice=true">삼</b-button>
-          <b-button :pressed="!buyRice" @click="buyRice=false">팜</b-button>
+          <b-button :pressed="buyRice" @click="buyRice = true"> 삼 </b-button>
+          <b-button :pressed="!buyRice" @click="buyRice = false"> 팜 </b-button>
         </b-button-group>
       </div>
       <div class="col-7 col-md-4">
         금액 :
-        <SelectAmount
-          :amountGuide="amountGuide"
-          v-model="amount"
-          :maxAmount="maxAmount"
-          :minAmount="minAmount"
-        />
+        <SelectAmount v-model="amount" :amountGuide="amountGuide" :maxAmount="maxAmount" :minAmount="minAmount" />
       </div>
       <div class="col-3 col-md-2 d-grid">
-        <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
+        <b-button variant="primary" @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
@@ -33,7 +28,7 @@
 import SelectAmount from "@/processing/SelectAmount.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 declare const commandName: string;

hwe/ts/processing/General/che_등용.vue

@@ -1,5 +1,5 @@
 <template>
-  <TopBackBar :title="commandName" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" />
   <div class="bg0">
     <div>
       재야나 타국의 장수를 등용합니다.<br />
@@ -10,15 +10,17 @@
       <div class="col-12 col-md-6">
         장수 :
         <SelectGeneral
+          v-model="selectedGeneralID"
           :generals="generalList"
           :groupByNation="nationList"
           :textHelper="textHelpGeneral"
           :searchable="searchable"
-          v-model="selectedGeneralID"
         />
       </div>
       <div class="col-4 col-md-2 d-grid">
-        <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
+        <b-button variant="primary" @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
@@ -29,17 +31,17 @@
 import SelectGeneral from "@/processing/SelectGeneral.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import {
   convertGeneralList,
   getProcSearchable,
-  procGeneralItem,
-  procGeneralKey,
-  procGeneralRawItemList,
-  procNationItem,
-  procNationList,
+  type procGeneralItem,
+  type procGeneralKey,
+  type procGeneralRawItemList,
+  type procNationItem,
+  type procNationList,
 } from "../processingRes";
 import { getNpcColor } from "@/common_legacy";
 declare const commandName: string;
@@ -57,18 +59,13 @@ export default defineComponent({
     BottomBar,
   },
   setup() {
-    const generalList = convertGeneralList(
-      procRes.generalsKey,
-      procRes.generals
-    );
+    const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
 
     const selectedGeneralID = ref(generalList[0].no);
 
     function textHelpGeneral(gen: procGeneralItem): string {
       const nameColor = getNpcColor(gen.npc);
-      const name = nameColor
-        ? `<span style="color:${nameColor}">${gen.name}</span>`
-        : gen.name;
+      const name = nameColor ? `<span style="color:${nameColor}">${gen.name}</span>` : gen.name;
       return name;
     }
 

hwe/ts/processing/General/che_선양.vue

@@ -1,5 +1,5 @@
 <template>
-  <TopBackBar :title="commandName" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" />
   <div class="bg0">
     <div v-if="commandName == '등용'">
       재야나 타국의 장수를 등용합니다.<br />
@@ -14,14 +14,16 @@
       <div class="col-9 col-md-4">
         장수 :
         <SelectGeneral
+          v-model="selectedGeneralID"
           :generals="generalList"
           :textHelper="textHelpGeneral"
           :searchable="searchable"
-          v-model="selectedGeneralID"
         />
       </div>
       <div class="col-3 col-md-2 d-grid">
-        <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
+        <b-button variant="primary" @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
@@ -32,15 +34,15 @@
 import SelectGeneral from "@/processing/SelectGeneral.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import {
   convertGeneralList,
   getProcSearchable,
-  procGeneralItem,
-  procGeneralKey,
-  procGeneralRawItemList,
+  type procGeneralItem,
+  type procGeneralKey,
+  type procGeneralRawItemList,
 } from "../processingRes";
 import { getNpcColor } from "@/common_legacy";
 declare const commandName: string;
@@ -57,18 +59,13 @@ export default defineComponent({
     BottomBar,
   },
   setup() {
-    const generalList = convertGeneralList(
-      procRes.generalsKey,
-      procRes.generals
-    );
+    const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
 
     const selectedGeneralID = ref(generalList[0].no);
 
     function textHelpGeneral(gen: procGeneralItem): string {
       const nameColor = getNpcColor(gen.npc);
-      const name = nameColor
-        ? `<span style="color:${nameColor}">${gen.name}</span>`
-        : gen.name;
+      const name = nameColor ? `<span style="color:${nameColor}">${gen.name}</span>` : gen.name;
       return `${name} (${gen.leadership}/${gen.strength}/${gen.intel})`;
     }
 

hwe/ts/processing/General/che_숙련전환.vue

@@ -1,78 +1,91 @@
 <template>
   <TopBackBar :title="commandName" />
   <div class="bg0">
-    <div>
-      본인의 특정 병종 숙련을 40% 줄이고, 줄어든 숙련 중 9/10(90%p)를 다른 병종
-      숙련으로 전환합니다.
-    </div>
+    <div>본인의 특정 병종 숙련을 40% 줄이고, 줄어든 숙련 중 9/10(90%p)를 다른 병종 숙련으로 전환합니다.</div>
     <div class="row">
       <div class="col-4 col-md-2">
         감소 대상 숙련 :
         <b-form-select v-model="srcArmTypeID">
-          <b-form-select-option
-            v-for="[armType, dexInfo] in dexFullInfo"
-            :key="armType"
-            :value="armType"
-            >{{ dexInfo.name }} (<span
-              :style="{ color: dexInfo.currentInfo.color }"
-              >{{ dexInfo.currentInfo.name }}</span>)</b-form-select-option
-          >
+          <b-form-select-option v-for="[armType, dexInfo] in dexFullInfo" :key="armType" :value="armType">
+            {{ dexInfo.name }} (<span :style="{ color: dexInfo.currentInfo.color }">{{ dexInfo.currentInfo.name }}</span
+            >)
+          </b-form-select-option>
         </b-form-select>
       </div>
       <div class="col-4 col-md-2">
         전환 대상 숙련 :
         <b-form-select v-model="destArmTypeID">
-          <b-form-select-option
-            v-for="[armType, dexInfo] in dexFullInfo"
-            :key="armType"
-            :value="armType"
-            >{{ dexInfo.name }} (<span
-              :style="{ color: dexInfo.currentInfo.color }"
-              >{{ dexInfo.currentInfo.name }}</span>)</b-form-select-option
-          >
+          <b-form-select-option v-for="[armType, dexInfo] in dexFullInfo" :key="armType" :value="armType">
+            {{ dexInfo.name }} (<span :style="{ color: dexInfo.currentInfo.color }">{{ dexInfo.currentInfo.name }}</span
+            >)
+          </b-form-select-option>
         </b-form-select>
       </div>
       <div class="col-4 col-md-2 d-grid">
-        <b-button @click="submit">{{ commandName }}</b-button>
+        <b-button @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
-      <div :style="{
-        display:'grid',
-        gridTemplateColumns: '3ch 1ch 2ch 10ch 1ch 3ch 1ch 2ch 10ch 1ch'
-      }">
-        <div>{{dexFullInfo.get(srcArmTypeID).name}}</div>
+      <div
+        :style="{
+          display: 'grid',
+          gridTemplateColumns: '3ch 1ch 2ch 10ch 1ch 3ch 1ch 2ch 10ch 1ch',
+        }"
+      >
+        <div>{{ unwrap(dexFullInfo.get(srcArmTypeID)).name }}</div>
         <div class="text-end">[</div>
-        <div :style="`color:${dexFullInfo.get(srcArmTypeID).currentInfo.color}`">{{dexFullInfo.get(srcArmTypeID).currentInfo.name}}</div>
-        <div class="f_tnum text-end">{{convNumberFormat(dexFullInfo.get(srcArmTypeID).currentInfo.amount)}}</div>
+        <div :style="`color:${unwrap(dexFullInfo.get(srcArmTypeID)).currentInfo.color}`">
+          {{ unwrap(dexFullInfo.get(srcArmTypeID)).currentInfo.name }}
+        </div>
+        <div class="f_tnum text-end">
+          {{ convNumberFormat(unwrap(dexFullInfo.get(srcArmTypeID)).currentInfo.amount) }}
+        </div>
         <div>]</div>
         <div class="text-center">→</div>
         <div class="text-end">[</div>
-        <div :style="`color:${dexFullInfo.get(srcArmTypeID).decreasedInfo.color}`">{{dexFullInfo.get(srcArmTypeID).decreasedInfo.name}}</div>
-        <div class="f_tnum text-end">{{convNumberFormat(dexFullInfo.get(srcArmTypeID).decreasedInfo.amount)}}</div>
+        <div :style="`color:${unwrap(dexFullInfo.get(srcArmTypeID)).decreasedInfo.color}`">
+          {{ unwrap(dexFullInfo.get(srcArmTypeID)).decreasedInfo.name }}
+        </div>
+        <div class="f_tnum text-end">
+          {{ convNumberFormat(unwrap(dexFullInfo.get(srcArmTypeID)).decreasedInfo.amount) }}
+        </div>
         <div>]</div>
       </div>
-      <div :style="{
-        display:'grid',
-        gridTemplateColumns: '3ch 1ch 2ch 10ch 1ch 3ch 1ch 2ch 10ch 1ch'
-      }">
-      <div>{{dexFullInfo.get(destArmTypeID).name}}</div>
+      <div
+        :style="{
+          display: 'grid',
+          gridTemplateColumns: '3ch 1ch 2ch 10ch 1ch 3ch 1ch 2ch 10ch 1ch',
+        }"
+      >
+        <div>{{ unwrap(dexFullInfo.get(destArmTypeID)).name }}</div>
         <div class="text-end">[</div>
         <template v-if="srcArmTypeID == destArmTypeID">
-          <div :style="`color:${dexFullInfo.get(destArmTypeID).decreasedInfo.color}`">{{dexFullInfo.get(destArmTypeID).decreasedInfo.name}}</div>
-          <div class="f_tnum text-end">{{convNumberFormat(dexFullInfo.get(destArmTypeID).decreasedInfo.amount)}}</div>
+          <div :style="`color:${unwrap(dexFullInfo.get(destArmTypeID)).decreasedInfo.color}`">
+            {{ unwrap(dexFullInfo.get(destArmTypeID)).decreasedInfo.name }}
+          </div>
+          <div class="f_tnum text-end">
+            {{ convNumberFormat(unwrap(dexFullInfo.get(destArmTypeID)).decreasedInfo.amount) }}
+          </div>
         </template>
         <template v-else>
-          <div :style="`color:${dexFullInfo.get(destArmTypeID).currentInfo.color}`">{{dexFullInfo.get(destArmTypeID).currentInfo.name}}</div>
-          <div class="f_tnum text-end">{{convNumberFormat(dexFullInfo.get(destArmTypeID).currentInfo.amount)}}</div>
+          <div :style="`color:${unwrap(dexFullInfo.get(destArmTypeID)).currentInfo.color}`">
+            {{ unwrap(dexFullInfo.get(destArmTypeID)).currentInfo.name }}
+          </div>
+          <div class="f_tnum text-end">
+            {{ convNumberFormat(unwrap(dexFullInfo.get(destArmTypeID)).currentInfo.amount) }}
+          </div>
         </template>
         <div>]</div>
         <div class="text-center">→</div>
         <div class="text-end">[</div>
-        <div :style="`color:${dexFullInfo.get(destArmTypeID).afterInfo.get(srcArmTypeID).color}`">{{dexFullInfo.get(destArmTypeID).afterInfo.get(srcArmTypeID).name}}</div>
-        <div class="f_tnum text-end">{{convNumberFormat(dexFullInfo.get(destArmTypeID).afterInfo.get(srcArmTypeID).amount)}}</div>
+        <div :style="`color:${unwrap(unwrap(dexFullInfo.get(destArmTypeID)).afterInfo.get(srcArmTypeID)).color}`">
+          {{ unwrap(unwrap(dexFullInfo.get(destArmTypeID)).afterInfo.get(srcArmTypeID)).name }}
+        </div>
+        <div class="f_tnum text-end">
+          {{ convNumberFormat(unwrap(unwrap(dexFullInfo.get(destArmTypeID)).afterInfo.get(srcArmTypeID)).amount) }}
+        </div>
         <div>]</div>
       </div>
-
-
     </div>
   </div>
   <BottomBar :title="commandName" />
@@ -81,7 +94,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 
@@ -195,7 +208,9 @@ export default defineComponent({
 
     function convDexFormat(value: dexInfo): string {
       const amount = convNumberFormat(value.amount);
-      return `<span class="f_tnum" style="color:${value.color}">${value.name}</span>,${"\xa0".repeat(Math.max(0, 3 - value.name.length))} ${amount}`;
+      return `<span class="f_tnum" style="color:${value.color}">${value.name}</span>,${"\xa0".repeat(
+        Math.max(0, 3 - value.name.length)
+      )} ${amount}`;
     }
 
     function convNumberFormat(value: number): string {
@@ -203,6 +218,7 @@ export default defineComponent({
     }
 
     return {
+      unwrap,
       ...procRes,
       srcArmTypeID,
       destArmTypeID,

hwe/ts/processing/General/che_임관.vue

@@ -1,23 +1,25 @@
 <template>
-  <TopBackBar :title="commandName" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" />
   <div class="bg0">
     <div>
-      국가에 임관합니다.<br />
-      이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br />
-      바로 군주의 위치로 이동합니다.<br />
-      임관할 국가를 목록에서 선택하세요.<br />
+      국가에 임관합니다.
+      <br>
+      이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.
+      <br>
+      바로 군주의 위치로 이동합니다.
+      <br>
+      임관할 국가를 목록에서 선택하세요.
+      <br>
     </div>
     <div class="row">
       <div class="col-6 col-md-3">
         국가 :
-        <SelectNation
-          :nations="nationList"
-          v-model="selectedNationID"
-          :searchable="searchable"
-        />
+        <SelectNation v-model="selectedNationID" :nations="nationList" :searchable="searchable" />
       </div>
       <div class="col-4 col-md-2 d-grid">
-        <b-button @click="submit">{{ commandName }}</b-button>
+        <b-button @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
     <div class="nation-list">
@@ -26,12 +28,13 @@
         <div>임관권유문</div>
         <div class="zoom-toggle d-grid">
           <b-button
+            v-model="toggleZoom"
             :pressed="toggleZoom"
             :variant="toggleZoom ? 'info' : 'secondary'"
-            v-model="toggleZoom"
             @click="toggleZoom = !toggleZoom"
-            >{{ toggleZoom ? "작게 보기" : "크게 보기" }}</b-button
           >
+            {{ toggleZoom ? "작게 보기" : "크게 보기" }}
+          </b-button>
         </div>
       </div>
       <div
@@ -51,6 +54,7 @@
           <div class="align-self-center center">{{ nation.name }}</div>
         </div>
         <div class="nation-scout-plate align-self-center">
+          <!-- eslint-disable-next-line vue/no-v-html -->
           <div class="nation-scout-msg" v-html="nation.scoutMsg" />
         </div>
       </div>
@@ -63,10 +67,10 @@
 import SelectNation from "@/processing/SelectNation.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
-import { procNationItem, procNationList, getProcSearchable } from "../processingRes";
+import { type procNationItem, type procNationList, getProcSearchable } from "../processingRes";
 import { isBrightColor } from "@/util/isBrightColor";
 declare const commandName: string;
 

hwe/ts/processing/General/che_장비매매.vue

@@ -1,12 +1,16 @@
 <template>
-  <TopBackBar :title="commandName" v-model:searchable="searchable" />
+  <!-- eslint-disable vue/no-v-html -->
+  <TopBackBar v-model:searchable="searchable" :title="commandName" />
   <div class="bg0">
     <div>
-      장비를 구입하거나 매각합니다.<br />
+      장비를 구입하거나 매각합니다.
+      <br>
       현재 구입 불가능한 것은 <span style="color: red">붉은색</span>으로
-      표시됩니다.<br />
+      표시됩니다.
+      <br>
       현재 도시 치안 : {{ citySecu.toLocaleString() }} &nbsp;&nbsp;&nbsp;현재
-      자금 : {{ gold.toLocaleString() }}<br />
+      자금 : {{ gold.toLocaleString() }}
+      <br>
     </div>
     <div class="row">
       <div class="col-8 col-md-4">
@@ -22,27 +26,27 @@
           label="searchText"
           track-by="simpleName"
           :show-labels="false"
-          selectLabel="선택(엔터)"
-          selectGroupLabel=""
-          selectedLabel="선택됨"
-          deselectLabel="해제(엔터)"
-          deselectGroupLabel=""
+          select-label="선택(엔터)"
+          select-group-label
+          selected-label="선택됨"
+          deselect-label="해제(엔터)"
+          deselect-group-label
           placeholder="아이템 선택"
-          :maxHeight="400"
+          :max-height="400"
           :searchable="searchable"
         >
-          <template v-slot:option="props">
+          <template #option="props">
             <div
               v-if="props.option.html"
+              :style="{
+                color: props.option.notAvailable ? 'red' : undefined,
+              }"
               v-html="
                 `${props.option.html} ${
                   props.option.notAvailable ? '(불가)' : ''
                 }`
               "
-              :style="{
-                color: props.option.notAvailable ? 'red' : undefined,
-              }"
-            ></div>
+            />
             <div
               v-else-if="props.option.simpleName"
               :style="{
@@ -53,21 +57,23 @@
               {{ props.option.notAvailable ? "(불가)" : undefined }}
             </div>
           </template>
-          <template v-slot:singleLabel="props">
-            [{{ ItemTypeNameMap[props.option.type] }}]
+          <template #singleLabel="props">
+            [{{ ItemTypeNameMap[props.option.type as keyof typeof ItemTypeNameMap] }}]
             {{ props.option.simpleName }}
           </template>
         </v-multiselect>
       </div>
       <div class="col-4 col-md-2 d-grid">
-        <b-button @click="submit">{{ commandName }}</b-button>
+        <b-button @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
     <div v-if="selectedItemObj.obj.id != NoneValue" class="row">
       <div class="col-4 col-md-2 align-self-center text-center">
         {{ selectedItemObj.obj.name }}
       </div>
-      <div class="col" v-html="selectedItemObj.obj.info"></div>
+      <div class="col" v-html="selectedItemObj.obj.info" />
     </div>
   </div>
 
@@ -78,11 +84,20 @@
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import { entriesWithType } from "@util/entriesWithType";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
-import { getProcSearchable, procItemList, procItemType } from "../processingRes";
-import { ItemTypeKey, ItemTypeNameMap, NoneValue, ValuesOf } from "@/defs";
+import {
+  getProcSearchable,
+  type procItemList,
+  type procItemType,
+} from "../processingRes";
+import {
+  type ItemTypeKey,
+  ItemTypeNameMap,
+  NoneValue,
+  type ValuesOf,
+} from "@/defs";
 import { convertSearch초성 } from "@/util/convertSearch초성";
 
 declare const commandName: string;
@@ -187,4 +202,4 @@ export default defineComponent({
     };
   },
 });
-</script>
+</script>

hwe/ts/processing/General/che_장수대상임관.vue

@@ -1,25 +1,33 @@
 <template>
-  <TopBackBar :title="commandName" v-model:searchable="searchable" />
+  <TopBackBar
+    v-model:searchable="searchable"
+    :title="commandName"
+  />
   <div class="bg0">
     <div>
-      장수를 따라 임관합니다.<br />
-      이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br />
-      바로 군주의 위치로 이동합니다.<br />
-      임관할 국가를 목록에서 선택하세요.<br />
+      장수를 따라 임관합니다.<br>
+      이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br>
+      바로 군주의 위치로 이동합니다.<br>
+      임관할 국가를 목록에서 선택하세요.<br>
     </div>
     <div class="row">
       <div class="col-8 col-md-4">
         장수 :
         <SelectGeneral
+          v-model="selectedGeneralID"
           :generals="generalList"
           :groupByNation="nationList"
           :textHelper="textHelpGeneral"
           :searchable="searchable"
-          v-model="selectedGeneralID"
         />
       </div>
       <div class="col-4 col-md-2 d-grid">
-        <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
+        <b-button
+          variant="primary"
+          @click="submit"
+        >
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
     <div class="nation-list">
@@ -28,12 +36,13 @@
         <div>임관권유문</div>
         <div class="zoom-toggle d-grid">
           <b-button
+            v-model="toggleZoom"
             :pressed="toggleZoom"
             :variant="toggleZoom ? 'info' : 'secondary'"
-            v-model="toggleZoom"
             @click="toggleZoom = !toggleZoom"
-            >{{ toggleZoom ? "작게 보기" : "크게 보기" }}</b-button
           >
+            {{ toggleZoom ? "작게 보기" : "크게 보기" }}
+          </b-button>
         </div>
       </div>
       <div
@@ -49,9 +58,12 @@
           }"
           class="d-grid"
         >
-          <div class="align-self-center center">{{ nation.name }}</div>
+          <div class="align-self-center center">
+            {{ nation.name }}
+          </div>
         </div>
         <div class="nation-scout-plate align-self-center">
+          <!-- eslint-disable-next-line vue/no-v-html -->
           <div class="nation-scout-msg" v-html="nation.scoutMsg" />
         </div>
       </div>
@@ -64,17 +76,17 @@
 import SelectGeneral from "@/processing/SelectGeneral.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import {
   convertGeneralList,
   getProcSearchable,
-  procGeneralItem,
-  procGeneralKey,
-  procGeneralRawItemList,
-  procNationItem,
-  procNationList,
+  type procGeneralItem,
+  type procGeneralKey,
+  type procGeneralRawItemList,
+  type procNationItem,
+  type procNationList,
 } from "../processingRes";
 import { getNpcColor } from "@/common_legacy";
 import { isBrightColor } from "@/util/isBrightColor";

hwe/ts/processing/General/che_징병.vue

@@ -4,42 +4,51 @@
     <div>
       병사를 모집합니다.
       <template v-if="commandName == '징병'">
-        훈련과 사기치는 낮지만 가격이 저렴합니다.<br />
+        훈련과 사기치는 낮지만 가격이 저렴합니다.<br>
       </template>
       <template v-else-if="commandName == '모병'">
-        훈련과 사기치는 높지만 자금이 많이 듭니다.<br />
+        훈련과 사기치는 높지만 자금이 많이 듭니다.<br>
       </template>
-      가능한 수보다 많게 입력하면 가능한 최대 병사를 모집합니다.<br />
+      가능한 수보다 많게 입력하면 가능한 최대 병사를 모집합니다.<br>
       이미 병사가 있는 경우 추가 {{ commandName }}되며, 병종이 다를경우는 기존의
-      병사는 소집해제됩니다. <br />
+      병사는 소집해제됩니다. <br>
       현재 {{ commandName }} 가능한 병종은
       <span style="color: green">녹색</span>으로 표시되며, 현재
       {{ commandName }} 가능한 특수병종은
       <span style="color: limegreen">초록색</span>으로 표시됩니다.
     </div>
-    <div class="crewTypeList" ref="defaultTarget">
+    <div
+      ref="defaultTarget"
+      class="crewTypeList"
+    >
       <div class="listFront">
         <div class="row gx-0 bg0">
           <div class="col-12 col-md-12 d-flex align-items-center">
-            <div v-if="commandName == '모병'" class="text-center w-100">
-              모병은 가격 2배의 자금이 소요됩니다.<br />
+            <div
+              v-if="commandName == '모병'"
+              class="text-center w-100"
+            >
+              모병은 가격 2배의 자금이 소요됩니다.<br>
             </div>
           </div>
         </div>
         <div class="row text-center bg2 gx-0">
-          <div class="col-4 col-md-2">현재 기술력 : {{ techLevel }}등급</div>
+          <div class="col-4 col-md-2">
+            현재 기술력 : {{ techLevel }}등급
+          </div>
           <div class="col-4 col-md-2">
             현재 통솔 :
             <span
               :style="{
                 color: leadership < fullLeadership ? 'red' : undefined,
               }"
-              >{{ leadership }}</span
-            >
+            >{{ leadership }}</span>
           </div>
-          <div class="col-4 col-md-2">최대 통솔 : {{ fullLeadership }}</div>
           <div class="col-4 col-md-2">
-            현재 병종 : {{ crewTypeMap.get(currentCrewType).name }}
+            최대 통솔 : {{ fullLeadership }}
+          </div>
+          <div class="col-4 col-md-2">
+            현재 병종 : {{ crewTypeMap?.get(currentCrewType)?.name }}
           </div>
           <div class="col-4 col-md-2">
             현재 병사 : {{ crew.toLocaleString() }}
@@ -58,15 +67,15 @@
               outline: 'solid 1px gray',
               height: '64px',
             }"
-          ></div>
+          />
           <div
             :style="{
               backgroundColor:
                 (destCrewType.notAvailable
                   ? 'red'
                   : destCrewType.reqTech == 0
-                  ? 'green'
-                  : 'limegreen') + ' !important',
+                    ? 'green'
+                    : 'limegreen') + ' !important',
               height: '100%',
             }"
             class="d-grid"
@@ -75,27 +84,39 @@
               {{ destCrewType.name }}
             </div>
           </div>
-          <div></div>
+          <div />
           <div class="crewTypePanel">
-            <b-button-group
-              ><b-button class="py-1" variant="dark" @click="beHalf"
-                >절반</b-button
-              ><b-button class="py-1" variant="dark" @click="beFilled"
-                >채우기</b-button
-              ><b-button class="py-1" variant="dark" @click="beFull"
-                >가득</b-button
-              ></b-button-group
-            >
+            <b-button-group>
+              <b-button
+                class="py-1"
+                variant="dark"
+                @click="beHalf"
+              >
+                절반
+              </b-button><b-button
+                class="py-1"
+                variant="dark"
+                @click="beFilled"
+              >
+                채우기
+              </b-button><b-button
+                class="py-1"
+                variant="dark"
+                @click="beFull"
+              >
+                가득
+              </b-button>
+            </b-button-group>
             <div class="row">
               <div class="col mx-2">
                 <div class="input-group my-0">
                   <span class="input-group-text py-1">병력</span>
                   <input
+                    v-model="amount"
                     type="number"
                     class="form-control py-1 f_tnum px-0 text-end"
-                    v-model="amount"
                     min="1"
-                  />
+                  >
                   <span class="input-group-text py-1 f_tnum">00명</span>
                   <span
                     class="input-group-text py-1 f_tnum"
@@ -105,35 +126,49 @@
                       color: #303030;
                       background-color: #ddd;
                     "
-                    ><div style="margin-left: auto">
-                      {{
-                        Math.ceil(
-                          amount * destCrewType.baseCost * goldCoeff
-                        ).toLocaleString()
-                      }}금
-                    </div></span
-                  >
+                  ><div style="margin-left: auto">
+                    {{
+                      Math.ceil(
+                        amount * destCrewType.baseCost * goldCoeff
+                      ).toLocaleString()
+                    }}금
+                  </div></span>
                 </div>
               </div>
             </div>
           </div>
-          <div></div>
-          <b-button variant="primary" @click="submit">{{
-            commandName
-          }}</b-button>
+          <div />
+          <b-button
+            variant="primary"
+            @click="submit"
+          >
+            {{
+              commandName
+            }}
+          </b-button>
         </div>
         <div class="listHeader crewTypeSubGrid text-center bg1">
-          <div class="crewTypeImg">사진</div>
-          <div class="crewTypeName">병종</div>
+          <div class="crewTypeImg">
+            사진
+          </div>
+          <div class="crewTypeName">
+            병종
+          </div>
           <div>공격</div>
           <div>방어</div>
           <div>기동</div>
           <div>회피</div>
           <div>가격</div>
           <div>군량</div>
-          <div class="crewTypePanel">병사 수</div>
-          <div class="crewTypeBtn">행동</div>
-          <div class="crewTypeInfo">특징</div>
+          <div class="crewTypePanel">
+            병사 수
+          </div>
+          <div class="crewTypeBtn">
+            행동
+          </div>
+          <div class="crewTypeInfo">
+            특징
+          </div>
         </div>
       </div>
       <div class="listMain">
@@ -156,19 +191,23 @@
                 :pressed="showNotAvailable.get(armCrewType.armType)"
                 class="btn-sm"
                 @click="toggleShowNotAvailable(armCrewType.armType)"
-                >{{
+              >
+                {{
                   showNotAvailable.get(armCrewType.armType)
                     ? "선택 할 수 있는 병종만 보기"
                     : "선택 할 수 없는 병종도 보기"
-                }}</b-button
-              >
+                }}
+              </b-button>
             </div>
           </div>
-          <template v-for="crewType in armCrewType.values" :key="crewType.id">
+          <template
+            v-for="crewType in armCrewType.values"
+            :key="crewType.id"
+          >
             <CrewTypeItem
               v-if="
                 showNotAvailable.get(armCrewType.armType) ||
-                !crewType.notAvailable
+                  !crewType.notAvailable
               "
               :crewType="crewType"
               :leadership="fullLeadership"
@@ -178,7 +217,7 @@
               :goldCoeff="goldCoeff"
               @submitOutput="trySubmit"
               @click="
-                destCrewType = crewTypeMap.get(crewType.id);
+                destCrewType = unwrap(crewTypeMap.get(crewType.id));
                 beFilled();
               "
             />
@@ -194,10 +233,10 @@
 import CrewTypeItem from "@/processing/CrewTypeItem.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
-import { procArmTypeItem, procCrewTypeItem } from "../processingRes";
+import type { procArmTypeItem, procCrewTypeItem } from "../processingRes";
 declare const commandName: string;
 
 declare const procRes: {
@@ -292,6 +331,7 @@ export default defineComponent({
       submit,
       toggleShowNotAvailable,
       trySubmit,
+      unwrap,
     };
   },
 });

hwe/ts/processing/General/che_헌납.vue

@@ -8,21 +8,36 @@
       <div class="col-2 col-md-1">
         자원 :
         <b-button-group>
-          <b-button :pressed="isGold" @click="isGold = true">금</b-button>
-          <b-button :pressed="!isGold" @click="isGold = false">쌀</b-button>
+          <b-button
+            :pressed="isGold"
+            @click="isGold = true"
+          >
+            금
+          </b-button>
+          <b-button
+            :pressed="!isGold"
+            @click="isGold = false"
+          >
+            쌀
+          </b-button>
         </b-button-group>
       </div>
       <div class="col-7 col-md-4">
         금액 :
         <SelectAmount
-          :amountGuide="amountGuide"
           v-model="amount"
+          :amountGuide="amountGuide"
           :maxAmount="maxAmount"
           :minAmount="minAmount"
         />
       </div>
       <div class="col-3 col-md-2 d-grid">
-        <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
+        <b-button
+          variant="primary"
+          @click="submit"
+        >
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
@@ -33,7 +48,7 @@
 import SelectAmount from "@/processing/SelectAmount.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 declare const commandName: string;