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/CitiesBasedOnDistance.vue

@@ -2,15 +2,17 @@
   <div v-for="(cityList, distance) in distanceList" :key="distance">
     {{ distance }}칸 떨어진 도시:
     <template v-for="(cityID, key) in cityList" :key="key">
-      <template v-if="key !== 0">, </template>
-      <a :style="{ color: colorMap[distance] ?? undefined, textDecoration:'underline' }" @click="$emit('selected', cityID)">{{
-        citiesMap.get(cityID)?.name
-      }}</a>
+      <template v-if="key !== 0"> , </template>
+      <a
+        :style="{ color: colorMap[distance as keyof typeof colorMap] ?? undefined, textDecoration:'underline' }"
+        @click="$emit('selected', cityID)"
+        >{{ citiesMap.get(cityID)?.name }}</a
+      >
     </template>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 export default defineComponent({
   props: {
@@ -23,7 +25,7 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['selected'],
+  emits: ["selected"],
   data() {
     return {
       colorMap: {

hwe/ts/processing/CrewTypeItem.vue

@@ -8,21 +8,15 @@
         backgroundSize: '64px',
         outline: 'solid 1px gray',
       }"
-    ></div>
+    />
     <div
       :style="{
-        backgroundColor: crewType.notAvailable
-          ? 'red'
-          : crewType.reqTech == 0
-          ? 'green'
-          : 'limegreen',
+        backgroundColor: crewType.notAvailable ? 'red' : crewType.reqTech == 0 ? 'green' : 'limegreen',
         height: '100%',
       }"
       class="d-grid crewTypeName"
     >
-      <div style="margin: auto">
-        {{ crewType.name }}
-      </div>
+      <div style="margin: auto">{{ crewType.name }}</div>
     </div>
     <div>{{ crewType.attack }}</div>
     <div>{{ crewType.defence }}</div>
@@ -31,37 +25,25 @@
     <div>{{ crewType.baseCost.toFixed(1) }}</div>
     <div>{{ crewType.baseRice.toFixed(1) }}</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
-              type="number"
-              class="form-control py-1 f_tnum px-0 text-end"
-              v-model="amount"
-              min="1"
-            />
+            <input v-model="amount" type="number" class="form-control py-1 f_tnum px-0 text-end" min="1" />
             <span class="input-group-text py-1 f_tnum">00명</span>
             <span
               class="input-group-text py-1 f_tnum"
-              style="
-                text-align: right;
-                min-width: 10ch;
-                color: #303030;
-                background-color: #ddd;
-              "
-              ><div style="margin-left: auto">
-                {{ Math.ceil(amount * crewType.baseCost * goldCoeff).toLocaleString() }}금
-              </div></span
+              style="text-align: right; min-width: 10ch; color: #303030; background-color: #ddd"
             >
+              <div style="margin-left: auto">
+                {{ Math.ceil(amount * crewType.baseCost * goldCoeff).toLocaleString() }}금
+              </div>
+            </span>
           </div>
         </div>
       </div>
@@ -69,10 +51,9 @@
     <div class="crewTypeBtn d-grid">
       <b-button variant="primary" @click="doSubmit">{{ commandName }}</b-button>
     </div>
-    <div
-      class="crewTypeInfo text-start"
-      v-html="crewType.info.join('<br>')"
-    ></div>
+
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div class="crewTypeInfo text-start" v-html="crewType.info.join('<br>')" />
   </div>
 </template>
 <script lang="ts">
@@ -89,11 +70,6 @@ export default defineComponent({
     goldCoeff: VueTypes.number.isRequired,
   },
   emits: ["submitOutput", "update:amount"],
-  watch: {
-    amount(val: number) {
-      this.$emit("update:amount", val);
-    },
-  },
   setup(props, { emit }) {
     const amount = ref(0);
 
@@ -103,10 +79,7 @@ export default defineComponent({
 
     function beFilled() {
       if (props.crewType.id == props.currentCrewType) {
-        amount.value = Math.max(
-          1,
-          props.leadership - Math.floor(props.crew / 100)
-        );
+        amount.value = Math.max(1, props.leadership - Math.floor(props.crew / 100));
       } else {
         amount.value = props.leadership;
       }
@@ -130,5 +103,10 @@ export default defineComponent({
       doSubmit,
     };
   },
+  watch: {
+    amount(val: number) {
+      this.$emit("update:amount", val);
+    },
+  },
 });
 </script>

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;

hwe/ts/processing/Nation/che_국기변경.vue

@@ -1,5 +1,8 @@
 <template>
-  <TopBackBar :title="commandName" type="chief" />
+  <TopBackBar
+    :title="commandName"
+    type="chief"
+  />
   <div class="bg0">
     <div>
       국기를 변경합니다. 단 1회 가능합니다.<br>
@@ -7,14 +10,22 @@
     <div class="row">
       <div class="col-6 col-md-3">
         색상 :
-        <ColorSelect :colors="colors" v-model="selectedColorID" />
+        <ColorSelect
+          v-model="selectedColorID"
+          :colors="colors"
+        />
       </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>
-  <BottomBar :title="commandName" type="chief" />
+  <BottomBar
+    :title="commandName"
+    type="chief"
+  />
 </template>
 
 <script lang="ts">

hwe/ts/processing/Nation/che_국호변경.vue

@@ -1,20 +1,31 @@
 <template>
-  <TopBackBar :title="commandName" type="chief" />
+  <TopBackBar
+    :title="commandName"
+    type="chief"
+  />
   <div class="bg0">
     <div>
-      나라의 이름을 바꿉니다. 황제가 된 후 1회 가능합니다.<br />
+      나라의 이름을 바꿉니다. 황제가 된 후 1회 가능합니다.<br>
     </div>
     <div class="row">
       <div class="col-6 col-md-3">
         국명 :
-        <b-form-input maxlength="18" v-model="destNationName"/>
+        <b-form-input
+          v-model="destNationName"
+          maxlength="18"
+        />
       </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>
-  <BottomBar :title="commandName" type="chief" />
+  <BottomBar
+    :title="commandName"
+    type="chief"
+  />
 </template>
 
 <script lang="ts">

hwe/ts/processing/Nation/che_물자원조.vue

@@ -1,13 +1,13 @@
 <template>
-  <TopBackBar :title="commandName" type="chief" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" type="chief" />
   <div class="bg0">
     <MapLegacyTemplate
+      v-model="selectedCityObj"
       :isDetailMap="false"
       :clickableAll="true"
       :neutralView="true"
       :useCachedMap="true"
-      :mapTheme="mapTheme"
-      v-model="selectedCityObj"
+      :mapName="mapName"
     />
     <div>
       타국에게 원조합니다.<br />
@@ -37,14 +37,14 @@
     <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-6 col-md-0"></div>
+      <div class="col-6 col-md-0" />
       <div class="col-8 col-md-4">
         금 :
         <SelectAmount
-          :amountGuide="amountGuide"
           v-model="goldAmount"
+          :amountGuide="amountGuide"
           :step="10"
           :maxAmount="maxAmount"
           :minAmount="minAmount"
@@ -53,15 +53,17 @@
       <div class="col-8 col-md-4">
         쌀 :
         <SelectAmount
-          :amountGuide="amountGuide"
           v-model="riceAmount"
+          :amountGuide="amountGuide"
           :step="10"
           :maxAmount="maxAmount"
           :minAmount="minAmount"
         />
       </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>
@@ -69,19 +71,19 @@
 </template>
 
 <script lang="ts">
-import MapLegacyTemplate, {
-  MapCityParsed,
-} from "@/components/MapLegacyTemplate.vue";
+import MapLegacyTemplate, { type MapCityParsed } from "@/components/MapLegacyTemplate.vue";
 import SelectNation from "@/processing/SelectNation.vue";
 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";
-import { getProcSearchable, procNationItem, procNationList } from "../processingRes";
-declare const mapTheme: string;
-declare const commandName: string;
+import { getProcSearchable, type procNationItem, type procNationList } from "../processingRes";
+declare const staticValues: {
+  mapName: string;
+  commandName: string;
+};
 
 declare const procRes: {
   nationList: procNationList;
@@ -106,14 +108,6 @@ export default defineComponent({
     TopBackBar,
     BottomBar,
   },
-  watch: {
-    selectedCityObj(city: MapCityParsed) {
-      if (!city.nationID) {
-        return;
-      }
-      this.selectedNationID = city.nationID;
-    },
-  },
   setup() {
     const nationList = new Map<number, procNationItem>();
     for (const nationItem of procRes.nationList) {
@@ -138,7 +132,7 @@ export default defineComponent({
 
     return {
       searchable: getProcSearchable(),
-      mapTheme,
+      mapName: staticValues.mapName,
       goldAmount,
       riceAmount,
       nationList,
@@ -149,9 +143,17 @@ export default defineComponent({
       minAmount: ref(procRes.minAmount),
       maxAmount: ref(procRes.maxAmount),
       amountGuide: procRes.amountGuide,
-      commandName,
+      commandName: staticValues.commandName,
       submit,
     };
   },
+  watch: {
+    selectedCityObj(city: MapCityParsed) {
+      if (!city.nationID) {
+        return;
+      }
+      this.selectedNationID = city.nationID;
+    },
+  },
 });
 </script>

hwe/ts/processing/Nation/che_발령.vue

@@ -1,13 +1,13 @@
 <template>
-  <TopBackBar :title="commandName" type="chief" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" type="chief" />
   <div class="bg0">
     <MapLegacyTemplate
+      v-model="selectedCityObj"
       :isDetailMap="false"
       :clickableAll="true"
       :neutralView="true"
       :useCachedMap="true"
-      :mapTheme="mapTheme"
-      v-model="selectedCityObj"
+      :mapName="mapName"
     />
 
     <div>
@@ -19,20 +19,22 @@
       <div class="col-12 col-md-6">
         장수 :
         <SelectGeneral
+          v-model="selectedGeneralID"
           :cities="citiesMap"
           :generals="generalList"
           :troops="troops"
           :textHelper="textHelpGeneral"
           :searchable="searchable"
-          v-model="selectedGeneralID"
         />
       </div>
       <div class="col-6 col-md-4">
         도시 :
-        <SelectCity :cities="citiesMap" v-model="selectedCityID" :searchable="searchable" />
+        <SelectCity v-model="selectedCityID" :cities="citiesMap" :searchable="searchable" />
       </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>
@@ -40,28 +42,29 @@
 </template>
 
 <script lang="ts">
-import MapLegacyTemplate, {
-  MapCityParsed,
-} from "@/components/MapLegacyTemplate.vue";
+import MapLegacyTemplate, { type MapCityParsed } from "@/components/MapLegacyTemplate.vue";
 import SelectCity from "@/processing/SelectCity.vue";
 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,
-  procTroopList,
+  type procGeneralItem,
+  type procGeneralKey,
+  type procGeneralRawItemList,
+  type procTroopList,
 } from "../processingRes";
 import { getNpcColor } from "@/common_legacy";
-declare const mapTheme: string;
-declare const currentCity: number;
-declare const commandName: string;
+
+declare const staticValues: {
+  mapName: string;
+  currentCity: number;
+  commandName: string;
+};
 
 declare const procRes: {
   distanceList: Record<number, number[]>;
@@ -79,11 +82,6 @@ export default defineComponent({
     TopBackBar,
     BottomBar,
   },
-  watch: {
-    selectedCityObj(city: MapCityParsed) {
-      this.selectedCityID = city.id;
-    },
-  },
   setup() {
     const citiesMap = new Map<
       number,
@@ -96,11 +94,8 @@ export default defineComponent({
       citiesMap.set(id, { name });
     }
 
-    const generalList = convertGeneralList(
-      procRes.generalsKey,
-      procRes.generals
-    );
-    const selectedCityID = ref(currentCity);
+    const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
+    const selectedCityID = ref(staticValues.currentCity);
 
     function selectedCity(cityID: number) {
       selectedCityID.value = cityID;
@@ -108,11 +103,13 @@ export default defineComponent({
 
     const selectedGeneralID = ref(generalList[0].no);
 
-    function textHelpGeneral(gen: procGeneralItem): string{
-      const troops = (!gen.troopID)?'':`,${procRes.troops[gen.troopID].name}`;
+    function textHelpGeneral(gen: procGeneralItem): string {
+      const troops = !gen.troopID ? "" : `,${procRes.troops[gen.troopID].name}`;
       const nameColor = getNpcColor(gen.npc);
-      const name = nameColor?`<span style="color:${nameColor}">${gen.name}</span>`:gen.name;
-      return `${name} [${citiesMap.get(unwrap(gen.cityID))?.name}${troops}] (${gen.leadership}/${gen.strength}/${gen.intel}) <병${unwrap(gen.crew).toLocaleString()}/훈${gen.train}/사${gen.atmos}>`;
+      const name = nameColor ? `<span style="color:${nameColor}">${gen.name}</span>` : gen.name;
+      return `${name} [${citiesMap.get(unwrap(gen.cityID))?.name}${troops}] (${gen.leadership}/${gen.strength}/${
+        gen.intel
+      }) <병${unwrap(gen.crew).toLocaleString()}/훈${gen.train}/사${gen.atmos}>`;
     }
 
     async function submit(e: Event) {
@@ -127,7 +124,7 @@ export default defineComponent({
 
     return {
       searchable: getProcSearchable(),
-      mapTheme: ref(mapTheme),
+      mapName: ref(staticValues.mapName),
       citiesMap: ref(citiesMap),
       selectedCityID,
       selectedGeneralID,
@@ -135,11 +132,16 @@ export default defineComponent({
       distanceList: procRes.distanceList,
       troops: procRes.troops,
       generalList,
-      commandName,
+      commandName: staticValues.commandName,
       selectedCity,
       textHelpGeneral,
       submit,
     };
   },
+  watch: {
+    selectedCityObj(city: MapCityParsed) {
+      this.selectedCityID = city.id;
+    },
+  },
 });
 </script>

hwe/ts/processing/Nation/che_불가침제의.vue

@@ -1,13 +1,13 @@
 <template>
-  <TopBackBar :title="commandName" type="chief" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" type="chief" />
   <div class="bg0">
     <MapLegacyTemplate
+      v-model="selectedCityObj"
       :isDetailMap="false"
       :clickableAll="true"
       :neutralView="true"
       :useCachedMap="true"
-      :mapTheme="mapTheme"
-      v-model="selectedCityObj"
+      :mapName="mapName"
     />
 
     <div>
@@ -20,30 +20,29 @@
     <div class="row">
       <div class="col-4 col-md-3">
         국가 :
-        <SelectNation :nations="nationList" v-model="selectedNationID" :searchable="searchable" />
+        <SelectNation v-model="selectedNationID" :nations="nationList" :searchable="searchable" />
       </div>
       <div class="col-5 col-md-3">
         기간 :
         <div class="input-group">
-          <b-form-select class="text-end selectedYear" v-model="selectedYear"
-            ><b-form-select-option
-              v-for="yearP in maxYear - minYear + 1"
-              :key="yearP"
-              :value="yearP + minYear - 1"
-              >{{ yearP + minYear - 1 }}</b-form-select-option
-            >
+          <b-form-select v-model="selectedYear" class="text-end selectedYear">
+            <b-form-select-option v-for="yearP in maxYear - minYear + 1" :key="yearP" :value="yearP + minYear - 1">
+              {{ yearP + minYear - 1 }}
+            </b-form-select-option>
           </b-form-select>
           <span class="input-group-text px-2">년</span>
-          <b-form-select class="text-center" v-model="selectedMonth"
-            ><b-form-select-option v-for="month in 12" :key="month" :value="month">{{
-              month
-            }}</b-form-select-option>
+          <b-form-select v-model="selectedMonth" class="text-center">
+            <b-form-select-option v-for="month in 12" :key="month" :value="month">
+              {{ month }}
+            </b-form-select-option>
           </b-form-select>
           <span class="input-group-text px-2">월</span>
         </div>
       </div>
       <div class="col-3 col-md-2 d-grid">
-        <b-button @click="submit">{{ commandName }}</b-button>
+        <b-button @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
@@ -51,18 +50,19 @@
 </template>
 
 <script lang="ts">
-import MapLegacyTemplate, {
-  MapCityParsed,
-} from "@/components/MapLegacyTemplate.vue";
+import MapLegacyTemplate, { type MapCityParsed } from "@/components/MapLegacyTemplate.vue";
 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 { getProcSearchable, procNationItem, procNationList } from "../processingRes";
-declare const mapTheme: string;
-declare const commandName: string;
+import { getProcSearchable, type procNationItem, type procNationList } from "../processingRes";
+
+declare const staticValues: {
+  mapName: string,
+  commandName: string,
+}
 
 declare const procRes: {
   nationList: procNationList;
@@ -79,14 +79,6 @@ export default defineComponent({
     TopBackBar,
     BottomBar,
   },
-  watch: {
-    selectedCityObj(city: MapCityParsed) {
-      if (!city.nationID) {
-        return;
-      }
-      this.selectedNationID = city.nationID;
-    },
-  },
   setup() {
     const nationList = new Map<number, procNationItem>();
     for (const nationItem of procRes.nationList) {
@@ -119,20 +111,28 @@ export default defineComponent({
       ...procRes,
       selectedYear,
       selectedMonth,
-      mapTheme: ref(mapTheme),
+      mapName: staticValues.mapName,
       nationList: ref(nationList),
       selectedCityObj,
       selectedNationID,
-      commandName,
+      commandName: staticValues.commandName,
       selectedNation,
       submit,
     };
   },
+  watch: {
+    selectedCityObj(city: MapCityParsed) {
+      if (!city.nationID) {
+        return;
+      }
+      this.selectedNationID = city.nationID;
+    },
+  },
 });
 </script>
 
 <style lang="scss" scoped>
-.selectedYear{
-  width:32%;
+.selectedYear {
+  width: 32%;
 }
-</style>
+</style>

hwe/ts/processing/Nation/che_피장파장.vue

@@ -1,13 +1,13 @@
 <template>
-  <TopBackBar :title="commandName" type="chief" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" type="chief" />
   <div class="bg0">
     <MapLegacyTemplate
+      v-model="selectedCityObj"
       :isDetailMap="false"
       :clickableAll="true"
       :neutralView="true"
       :useCachedMap="true"
-      :mapTheme="mapTheme"
-      v-model="selectedCityObj"
+      :mapName="mapName"
     />
     <div>
       선택된 국가에 피장파장을 발동합니다.<br />
@@ -22,17 +22,16 @@
     <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-3 col-md-2">
         <label>전략 :</label>
-        <b-form-select
-          :options="commandTypesOption"
-          v-model="selectedCommandID"
-        />
+        <b-form-select v-model="selectedCommandID" :options="commandTypesOption" />
       </div>
       <div class="col-3 col-md-2 d-grid">
-        <b-button @click="submit">{{ commandName }}</b-button>
+        <b-button @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
@@ -40,18 +39,19 @@
 </template>
 
 <script lang="ts">
-import MapLegacyTemplate, {
-  MapCityParsed,
-} from "@/components/MapLegacyTemplate.vue";
+import MapLegacyTemplate, { type MapCityParsed } from "@/components/MapLegacyTemplate.vue";
 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 { getProcSearchable, procNationItem, procNationList } from "../processingRes";
-declare const mapTheme: string;
-declare const commandName: string;
+import { getProcSearchable, type procNationItem, type procNationList } from "../processingRes";
+
+declare const staticValues: {
+  mapName: string;
+  commandName: string;
+};
 
 declare const procRes: {
   nationList: procNationList;
@@ -74,14 +74,6 @@ export default defineComponent({
     TopBackBar,
     BottomBar,
   },
-  watch: {
-    selectedCityObj(city: MapCityParsed) {
-      if (!city.nationID) {
-        return;
-      }
-      this.selectedNationID = city.nationID;
-    },
-  },
   setup() {
     const nationList = new Map<number, procNationItem>();
     for (const nationItem of procRes.nationList) {
@@ -94,18 +86,16 @@ export default defineComponent({
     const commandTypesOption: { html: string; value: string }[] = [];
     for (const [commandTypeID, commandTypeInfo] of Object.entries(procRes.availableCommandTypeList)) {
       const notAvailable = commandTypeInfo.remainTurn > 0;
-      const notAvailableText = notAvailable?' (불가)':'';
+      const notAvailableText = notAvailable ? " (불가)" : "";
       const name = `${commandTypeInfo.name}${notAvailableText}`;
-      const html = notAvailable?`<span style='color:red;'>${name}</span>`:name;
+      const html = notAvailable ? `<span style='color:red;'>${name}</span>` : name;
       commandTypesOption.push({
         html,
         value: commandTypeID,
       });
     }
 
-    const selectedCommandID = ref(
-      Object.keys(procRes.availableCommandTypeList)[0]
-    );
+    const selectedCommandID = ref(Object.keys(procRes.availableCommandTypeList)[0]);
 
     function selectedNation(nationID: number) {
       selectedNationID.value = nationID;
@@ -124,16 +114,23 @@ export default defineComponent({
     return {
       searchable: getProcSearchable(),
       ...procRes,
+      ...staticValues,
       selectedCommandID,
       commandTypesOption,
-      mapTheme: ref(mapTheme),
       nationList: ref(nationList),
       selectedCityObj,
       selectedNationID,
-      commandName,
       selectedNation,
       submit,
     };
   },
+  watch: {
+    selectedCityObj(city: MapCityParsed) {
+      if (!city.nationID) {
+        return;
+      }
+      this.selectedNationID = city.nationID;
+    },
+  },
 });
 </script>

hwe/ts/processing/ProcessCity.vue

@@ -1,13 +1,13 @@
 <template>
-  <TopBackBar :title="commandName" :type="procEntryMode" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" :type="procEntryMode" />
   <div class="bg0">
     <MapLegacyTemplate
+      v-model="selectedCityObj"
       :isDetailMap="false"
       :clickableAll="true"
       :neutralView="true"
       :useCachedMap="true"
-      :mapTheme="mapTheme"
-      v-model="selectedCityObj"
+      :mapName="mapName"
     />
 
     <div v-if="commandName == '강행'">
@@ -31,8 +31,7 @@
       목록을 선택하거나 도시를 클릭하세요.<br />
     </div>
     <div v-else-if="commandName in { 화계: 1, 탈취: 1, 파괴: 1, 선동: 1 }">
-      선택된 도시에 {{ commandName
-      }}{{ JosaPick(commandName, "을") }} 실행합니다.<br />
+      선택된 도시에 {{ commandName }}{{ JosaPick(commandName, "을") }} 실행합니다.<br />
       목록을 선택하거나 도시를 클릭하세요.<br />
     </div>
     <div v-else-if="commandName == '수몰'">
@@ -57,104 +56,92 @@
     </div>
     <div v-else-if="commandName == '초토화'">
       선택된 도시를 초토화 시킵니다.<br />
-      도시가 공백지가 되며, 도시의 인구, 내정 상태에 따라 상당량의 국고가
-      확보됩니다.<br />
+      도시가 공백지가 되며, 도시의 인구, 내정 상태에 따라 상당량의 국고가 확보됩니다.<br />
       국가의 수뇌들은 명성을 잃고, 모든 장수들은 배신 수치가 1 증가합니다.<br />
       목록을 선택하거나 도시를 클릭하세요.<br />
     </div>
     <div class="row">
       <div class="col-4 col-md-2">
         도시:
-        <SelectCity :cities="citiesMap" v-model="selectedCityID" :searchable="searchable" />
+        <SelectCity v-model="selectedCityID" :cities="citiesMap" :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>
-    <CityBasedOnDistance
-      :citiesMap="citiesMap"
-      :distanceList="distanceList"
-      @selected="selected"
-    />
+    <CityBasedOnDistance :citiesMap="citiesMap" :distanceList="distanceList" @selected="selected" />
   </div>
   <BottomBar :title="commandName" :type="procEntryMode" />
 </template>
 
 <script lang="ts">
-import MapLegacyTemplate, {
-  MapCityParsed,
-} from "@/components/MapLegacyTemplate.vue";
-import SelectCity from "@/processing/SelectCity.vue";
-import CityBasedOnDistance from "@/processing/CitiesBasedOnDistance.vue";
-import { defineComponent, ref } from "vue";
-import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
-import TopBackBar from "@/components/TopBackBar.vue";
-import BottomBar from "@/components/BottomBar.vue";
-import { pick as JosaPick } from "@util/JosaUtil";
-import { getProcSearchable } from "./processingRes";
-declare const mapTheme: string;
-declare const currentCity: number;
-declare const commandName: string;
+declare const staticValues: {
+  mapName: string;
+  currentCity: number;
+  commandName: string;
+  entryInfo: ["General" | "Nation", unknown];
+};
 declare const procRes: {
   distanceList: Record<number, number[]>;
   cities: [number, string][];
 };
-declare const entryInfo: ['General'|'Nation', unknown];
+</script>
 
-export default defineComponent({
-  components: {
-    MapLegacyTemplate,
-    SelectCity,
-    CityBasedOnDistance,
-    TopBackBar,
-    BottomBar,
-  },
-  watch: {
-    selectedCityObj(city: MapCityParsed) {
-      this.selectedCityID = city.id;
+<script lang="ts" setup>
+import MapLegacyTemplate, { type MapCityParsed } from "@/components/MapLegacyTemplate.vue";
+import SelectCity from "@/processing/SelectCity.vue";
+import CityBasedOnDistance from "@/processing/CitiesBasedOnDistance.vue";
+import { ref, type Ref, watch } from "vue";
+import { unwrap } from "@/util/unwrap";
+import type { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import { pick as JosaPick } from "@util/JosaUtil";
+import { getProcSearchable } from "./processingRes";
+
+const { distanceList } = procRes;
+
+const citiesMap = ref(
+  new Map<
+    number,
+    {
+      name: string;
+      info?: string;
+    }
+  >()
+);
+for (const [id, name] of procRes.cities) {
+  citiesMap.value.set(id, { name });
+}
+
+const selectedCityID = ref(staticValues.currentCity);
+
+function selected(cityID: number) {
+  selectedCityID.value = cityID;
+}
+
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      destCityID: selectedCityID.value,
     },
-  },
-  setup() {
-    const citiesMap = new Map<
-      number,
-      {
-        name: string;
-        info?: string;
-      }
-    >();
-    for (const [id, name] of procRes.cities) {
-      citiesMap.set(id, { name });
-    }
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
 
-    const selectedCityID = ref(currentCity);
+const searchable = getProcSearchable();
+const mapName = staticValues.mapName;
 
-    function selected(cityID: number) {
-      selectedCityID.value = cityID;
-    }
+const procEntryMode: Ref<"chief" | "normal"> = ref(staticValues.entryInfo[0] == "Nation" ? "chief" : "normal");
+const selectedCityObj = ref<MapCityParsed>();
+const commandName = ref(staticValues.commandName);
 
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          destCityID: selectedCityID.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
-
-    return {
-      procEntryMode: entryInfo[0] == 'Nation'?'chief':'normal',
-      searchable: getProcSearchable(),
-      mapTheme: ref(mapTheme),
-      citiesMap: ref(citiesMap),
-      selectedCityID,
-      selectedCityObj: ref(undefined as MapCityParsed | undefined),
-      distanceList: procRes.distanceList,
-      commandName,
-      JosaPick,
-      selected,
-      submit,
-    };
-  },
+watch(selectedCityObj, (city?: MapCityParsed) => {
+  if (city === undefined) {
+    return;
+  }
+  selectedCityID.value = city.id;
 });
 </script>

hwe/ts/processing/ProcessGeneralAmount.vue

@@ -1,12 +1,16 @@
 <template>
-  <TopBackBar :title="commandName" :type="procEntryMode" v-model:searchable="searchable" />
+  <TopBackBar
+    v-model:searchable="searchable"
+    :title="commandName"
+    :type="procEntryMode"
+  />
   <div class="bg0">
     <div v-if="commandName == '몰수'">
-      장수의 자금이나 군량을 몰수합니다.<br />
-      몰수한것은 국가재산으로 귀속됩니다.<br />
+      장수의 자금이나 군량을 몰수합니다.<br>
+      몰수한것은 국가재산으로 귀속됩니다.<br>
     </div>
     <div v-else-if="commandName == '포상'">
-      국고로 장수에게 자금이나 군량을 지급합니다.<br />
+      국고로 장수에게 자금이나 군량을 지급합니다.<br>
     </div>
     <div v-else-if="commandName == '증여'">
       자신의 자금이나 군량을 다른 장수에게 증여합니다.<br>
@@ -15,9 +19,9 @@
       <div class="col-12 col-md-5">
         장수 :
         <SelectGeneral
+          v-model="selectedGeneralID"
           :cities="citiesMap"
           :generals="generalList"
-          v-model="selectedGeneralID"
           :textHelper="textHelpGeneral"
           :searchable="searchable"
         />
@@ -25,25 +29,43 @@
       <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>
-  <BottomBar :title="commandName" :type="procEntryMode" />
+  <BottomBar
+    :title="commandName"
+    :type="procEntryMode"
+  />
 </template>
 
 <script lang="ts">
@@ -51,15 +73,15 @@ import SelectGeneral from "@/processing/SelectGeneral.vue";
 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";
 import {
   convertGeneralList,
   getProcSearchable,
-  procGeneralItem,
-  procGeneralKey,
-  procGeneralRawItemList,
+  type procGeneralItem,
+  type procGeneralKey,
+  type procGeneralRawItemList,
 } from "./processingRes";
 import { getNpcColor } from "@/common_legacy";
 declare const commandName: string;
@@ -125,7 +147,7 @@ export default defineComponent({
     }
 
     return {
-      procEntryMode: entryInfo[0] == 'Nation'?'chief':'normal',
+      procEntryMode: <'chief'|'normal'>(entryInfo[0] == 'Nation'?'chief':'normal'),
       searchable: getProcSearchable(),
       amount,
       isGold,

hwe/ts/processing/ProcessNation.vue

@@ -1,25 +1,20 @@
 <template>
-  <TopBackBar
-    :title="commandName"
-    :type="procEntryMode"
-    v-model:searchable="searchable"
-  />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" :type="procEntryMode" />
   <div class="bg0">
     <MapLegacyTemplate
+      v-model="selectedCityObj"
       :isDetailMap="false"
       :clickableAll="true"
       :neutralView="true"
       :useCachedMap="true"
-      :mapTheme="mapTheme"
-      v-model="selectedCityObj"
+      :mapName="mapName"
     />
 
     <div v-if="commandName == '선전포고'">
       타국에게 선전 포고합니다.<br />
       선전 포고할 국가를 목록에서 선택하세요.<br />
       고립되지 않은 아국 도시에서 인접한 국가에 선포 가능합니다.<br />
-      초반제한 해제 2년전부터 선포가 가능합니다. ({{ startYear + 1 }}년 1월부터
-      가능)<br />
+      초반제한 해제 2년전부터 선포가 가능합니다. ({{ startYear + 1 }}년 1월부터 가능)<br />
       현재 선포가 불가능한 국가는 배경색이
       <span style="color: red">붉은색</span>으로 표시됩니다.<br />
     </div>
@@ -58,14 +53,12 @@
     <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>
@@ -73,24 +66,20 @@
 </template>
 
 <script lang="ts">
-import MapLegacyTemplate, {
-  MapCityParsed,
-} from "@/components/MapLegacyTemplate.vue";
+import MapLegacyTemplate, { type MapCityParsed } from "@/components/MapLegacyTemplate.vue";
 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 {
-  getProcSearchable,
-  procNationItem,
-  procNationList,
-} from "./processingRes";
-declare const mapTheme: string;
-declare const commandName: string;
-declare const entryInfo: ['General'|'Nation', unknown];
+import { getProcSearchable, type procNationItem, type procNationList } from "./processingRes";
 
+declare const staticValues: {
+  mapName: string;
+  commandName: string;
+  entryInfo: ["General" | "Nation", unknown];
+};
 declare const procRes: {
   nationList: procNationList;
   startYear: number;
@@ -103,14 +92,6 @@ export default defineComponent({
     TopBackBar,
     BottomBar,
   },
-  watch: {
-    selectedCityObj(city: MapCityParsed) {
-      if (!city.nationID) {
-        return;
-      }
-      this.selectedNationID = city.nationID;
-    },
-  },
   setup() {
     const nationList = new Map<number, procNationItem>();
     for (const nationItem of procRes.nationList) {
@@ -134,17 +115,25 @@ export default defineComponent({
     }
 
     return {
-      procEntryMode: entryInfo[0] == "Nation" ? "chief" : "normal",
+      procEntryMode: (staticValues.entryInfo[0] == "Nation" ? "chief" : "normal") as 'chief'|'normal',
       searchable: getProcSearchable(),
       startYear: procRes.startYear,
-      mapTheme: ref(mapTheme),
+      mapName: staticValues.mapName,
       nationList: ref(nationList),
       selectedCityObj,
       selectedNationID,
-      commandName,
+      commandName: staticValues.commandName,
       selectedNation,
       submit,
     };
   },
+  watch: {
+    selectedCityObj(city: MapCityParsed) {
+      if (!city.nationID) {
+        return;
+      }
+      this.selectedNationID = city.nationID;
+    },
+  },
 });
 </script>

hwe/ts/processing/SelectAmount.vue

@@ -1,104 +1,63 @@
 <template>
   <div class="input-group">
-    <b-button
-      v-if="maxAmount > 20000"
-      class="btn-sm"
-      @click="amount = Math.max(amount - 10000, minAmount)"
-      >-만</b-button
-    >
-    <b-button
-      v-if="maxAmount > 2000"
-      class="btn-sm"
-      @click="amount = Math.max(amount - 1000, minAmount)"
-      >-천</b-button
-    >
-    <b-button
-      v-if="maxAmount > 200"
-      class="btn-sm"
-      @click="amount = Math.max(amount - 100, minAmount)"
-      >-백</b-button
-    >
+    <b-button v-if="maxAmount > 20000" class="btn-sm" @click="amount = Math.max(amount - 10000, minAmount)">
+      -만
+    </b-button>
+    <b-button v-if="maxAmount > 2000" class="btn-sm" @click="amount = Math.max(amount - 1000, minAmount)">
+      -천
+    </b-button>
+    <b-button v-if="maxAmount > 200" class="btn-sm" @click="amount = Math.max(amount - 100, minAmount)"> -백 </b-button>
     <input
+      v-model="amount"
       type="number"
       class="form-control text-end"
       :max="maxAmount"
       :min="minAmount"
       :step="step"
-      v-model="amount"
       placeholder="금액"
     />
-    <b-dropdown right text="" class="amount-dropdown" v-if="amountGuide">
-      <b-dropdown-item
-        v-for="guide in amountGuide"
-        :key="guide"
-        @click="amount = guide"
-        ><div class="text-end">
+    <b-dropdown v-if="amountGuide" right text="" class="amount-dropdown">
+      <b-dropdown-item v-for="guide in amountGuide" :key="guide" @click="amount = guide">
+        <div class="text-end">
           {{ guide.toLocaleString() }}
-        </div></b-dropdown-item
-      >
+        </div>
+      </b-dropdown-item>
     </b-dropdown>
-    <b-button
-      v-if="maxAmount > 200"
-      class="btn-sm"
-      @click="amount = Math.min(amount + 100, maxAmount)"
-      >+백</b-button
-    >
-    <b-button
-      v-if="maxAmount > 2000"
-      class="btn-sm"
-      @click="amount = Math.min(amount + 1000, maxAmount)"
-      >+천</b-button
-    >
-    <b-button
-      v-if="maxAmount > 20000"
-      class="btn-sm"
-      @click="amount = Math.min(amount + 10000, maxAmount)"
-      >+만</b-button
-    >
+    <b-button v-if="maxAmount > 200" class="btn-sm" @click="amount = Math.min(amount + 100, maxAmount)"> +백 </b-button>
+    <b-button v-if="maxAmount > 2000" class="btn-sm" @click="amount = Math.min(amount + 1000, maxAmount)">
+      +천
+    </b-button>
+    <b-button v-if="maxAmount > 20000" class="btn-sm" @click="amount = Math.min(amount + 10000, maxAmount)">
+      +만
+    </b-button>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent } from "vue";
+import VueTypes from "vue-types";
 
 export default defineComponent({
   props: {
-    modelValue: {
-      type: Number,
-      required: true,
-    },
-    minAmount: {
-      type: Number,
-      required: true,
-    },
-    maxAmount: {
-      type: Number,
-      required: true,
-    },
-    amountGuide: {
-      type: Array as PropType<number[]>,
-      required: false,
-    },
-    step: {
-      type: Number,
-      required: false,
-      default: 1,
-    },
+    modelValue: VueTypes.number.isRequired,
+    minAmount: VueTypes.number.isRequired,
+    maxAmount: VueTypes.number.isRequired,
+    amountGuide: VueTypes.arrayOf(Number).def([1000, 2000, 5000, 10000]),
+    step: VueTypes.number.def(1),
   },
   emits: ["update:modelValue"],
-  watch: {
-    amount(val: number) {
-      this.$emit("update:modelValue", val);
-    },
-  },
   data() {
     return {
       amount: this.modelValue,
     };
   },
+  watch: {
+    amount(val: number) {
+      this.$emit("update:modelValue", val);
+    },
+  },
 });
 </script>
 
-
 <style lang="scss">
 .btn-group.amount-dropdown > .btn {
   border-radius: 0;
@@ -107,4 +66,4 @@ export default defineComponent({
 .btn-group.amount-dropdown .dropdown-menu.show {
   min-width: 6rem;
 }
-</style>
+</style>

hwe/ts/processing/SelectCity.vue

@@ -16,28 +16,30 @@
     :maxHeight="400"
     :searchable="searchable"
   >
-    <template v-slot:option="props"
+    <template #option="props"
       ><span
         :style="{
           color: props.option.notAvailable ? 'red' : undefined,
         }"
       >
         {{ props.option.title }}
-        <span v-if="props.option.info">({{ props.option.info }})</span> {{ props.option.notAvailable ? "(불가)" : undefined }}</span
+        <span v-if="props.option.info">({{ props.option.info }})</span>
+        {{ props.option.notAvailable ? "(불가)" : undefined }}</span
       >
     </template>
-    <template v-slot:singleLabel="props">
+    <template #singleLabel="props">
       <span
         :style="{
           color: props.option.notAvailable ? 'red' : undefined,
         }"
-      >{{ props.option.simpleName }} {{ props.option.notAvailable ? "(불가)" : undefined }}</span>
+        >{{ props.option.simpleName }} {{ props.option.notAvailable ? "(불가)" : undefined }}</span
+      >
     </template>
   </v-multiselect>
 </template>
 <script lang="ts">
 import { convertSearch초성 } from "@/util/convertSearch초성";
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 type SelectedCity = {
   value: number;
@@ -65,15 +67,6 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue"],
-  watch: {
-    modelValue(val: number) {
-      const target = this.targets.get(val);
-      this.selectedCity = target;
-    },
-    selectedCity(val: SelectedCity) {
-      this.$emit("update:modelValue", val.value);
-    },
-  },
   data() {
     const citiesForFind = [];
     const targets = new Map<number, SelectedCity>();
@@ -84,7 +77,7 @@ export default defineComponent({
         title: name,
         info: info,
         simpleName: name,
-        searchText: convertSearch초성(name).join('|'),
+        searchText: convertSearch초성(name).join("|"),
       };
       if (value == this.modelValue) {
         selectedCity = obj;
@@ -98,5 +91,14 @@ export default defineComponent({
       targets,
     };
   },
+  watch: {
+    modelValue(val: number) {
+      const target = this.targets.get(val);
+      this.selectedCity = target;
+    },
+    selectedCity(val: SelectedCity) {
+      this.$emit("update:modelValue", val.value);
+    },
+  },
 });
 </script>

hwe/ts/processing/SelectColor.vue

@@ -16,7 +16,7 @@
     :maxHeight="400"
     :searchable="false"
   >
-    <template v-slot:option="props">
+    <template #option="props">
       <div
         :class="`sam-color-${props.option.title.slice(1)}`"
         :style="{
@@ -33,27 +33,29 @@
         </div>
       </div>
     </template>
-    <template v-slot:singleLabel="props">
+    <template #singleLabel="props">
       <div
         :class="`sam-color-${props.option.title.slice(1)}`"
         :style="{
           margin: '-0.25rem -0.75rem',
         }"
-        ><div
+      >
+        <div
           class="sam-nation-own-bgcolor"
           :style="{
             padding: '0.30rem 0.75rem',
             borderRadius: '0.25rem',
           }"
-          >{{ props.option.title }}</div
-        ></div
-      >
+        >
+          {{ props.option.title }}
+        </div>
+      </div>
     </template>
   </v-multiselect>
 </template>
 <script lang="ts">
 import { unwrap } from "@/util/unwrap";
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 type SelectedColor = {
   value: number;
@@ -72,15 +74,6 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue"],
-  watch: {
-    modelValue(val: number) {
-      const target = unwrap(this.targets.get(val));
-      this.selectedColor = target;
-    },
-    selectedColor(val: SelectedColor) {
-      this.$emit("update:modelValue", val.value);
-    },
-  },
   data() {
     const forFind = [];
     const targets = new Map<number, SelectedColor>();
@@ -101,5 +94,14 @@ export default defineComponent({
       targets,
     };
   },
+  watch: {
+    modelValue(val: number) {
+      const target = unwrap(this.targets.get(val));
+      this.selectedColor = target;
+    },
+    selectedColor(val: SelectedColor) {
+      this.$emit("update:modelValue", val.value);
+    },
+  },
 });
 </script>

hwe/ts/processing/SelectGeneral.vue

@@ -19,25 +19,23 @@
     :maxHeight="400"
     :searchable="searchable"
   >
-    <template v-slot:option="props">
-      <div v-if="props.option.title" v-html="props.option.title"></div>
+    <template #option="props">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div v-if="props.option.title" v-html="props.option.title" />
       <div
         v-if="props.option.$groupLabel !== undefined"
         class="margin-filler"
         :style="{
-          backgroundColor: groupByNation.get(props.option.$groupLabel).color,
-          color: isBrightColor(
-            groupByNation.get(props.option.$groupLabel).color
-          )
-            ? 'black'
-            : 'white',
+          backgroundColor: groupByNation?.get(props.option.$groupLabel)?.color,
+          color: isBrightColor(groupByNation?.get(props.option.$groupLabel)?.color ?? '#ffffff') ? 'black' : 'white',
         }"
       >
-        {{ groupByNation.get(props.option.$groupLabel).name }}
+        {{ groupByNation?.get(props.option.$groupLabel)?.name }}
       </div>
     </template>
-    <template v-slot:singleLabel="props">
-      {{ props.option.simpleName }} {{groupByNation?`[${groupByNation.get(props.option.obj.nationID).name}]`:undefined}}
+    <template #singleLabel="props">
+      {{ props.option.simpleName }}
+      {{ groupByNation ? `[${groupByNation.get(props.option.obj.nationID)?.name}]` : undefined }}
     </template>
   </v-multiselect>
 </template>
@@ -46,12 +44,9 @@ import { getNpcColor } from "@/common_legacy";
 import { convertSearch초성 } from "@/util/convertSearch초성";
 import { isBrightColor } from "@/util/isBrightColor";
 import { unwrap } from "@/util/unwrap";
-import { defineComponent, PropType } from "vue";
-import {
-  procGeneralItem,
-  procGeneralList,
-  procNationItem,
-} from "./processingRes";
+import { defineComponent, type PropType } from "vue";
+import VueTypes from "vue-types";
+import type { procGeneralItem, procGeneralList, procNationItem } from "./processingRes";
 
 type SelectedGeneral = {
   value: number;
@@ -63,10 +58,7 @@ type SelectedGeneral = {
 
 export default defineComponent({
   props: {
-    modelValue: {
-      type: Number,
-      required: true,
-    },
+    modelValue: VueTypes.number.isRequired,
     generals: {
       type: Array as PropType<procGeneralList>,
       required: true,
@@ -81,22 +73,13 @@ export default defineComponent({
       required: false,
       default: undefined,
     },
-    searchable:{
+    searchable: {
       type: Boolean,
       required: false,
       default: true,
-    }
+    },
   },
   emits: ["update:modelValue"],
-  watch: {
-    modelValue(val: number) {
-      const target = this.targets.get(val);
-      this.selectedGeneral = target;
-    },
-    selectedGeneral(val: SelectedGeneral) {
-      this.$emit("update:modelValue", val.value);
-    },
-  },
   data() {
     const forFind: (
       | SelectedGeneral
@@ -130,17 +113,13 @@ export default defineComponent({
       }
 
       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;
 
       const obj: SelectedGeneral = {
         value: gen.no,
-        title: this.textHelper
-          ? this.textHelper(gen)
-          : `${name} (${gen.leadership}/${gen.strength}/${gen.intel})`,
+        title: this.textHelper ? this.textHelper(gen) : `${name} (${gen.leadership}/${gen.strength}/${gen.intel})`,
         simpleName: gen.name,
-        searchText: convertSearch초성(gen.name).join('|'),
+        searchText: convertSearch초성(gen.name).join("|"),
         obj: gen,
       };
       if (gen.no == this.modelValue) {
@@ -156,6 +135,15 @@ export default defineComponent({
       isBrightColor,
     };
   },
+  watch: {
+    modelValue(val: number) {
+      const target = this.targets.get(val);
+      this.selectedGeneral = target;
+    },
+    selectedGeneral(val: SelectedGeneral) {
+      this.$emit("update:modelValue", val.value);
+    },
+  },
 });
 </script>
 <style lang="scss">
@@ -186,4 +174,4 @@ export default defineComponent({
     padding: calc($vue-multiselect-padding-y + 0.17em) $vue-multiselect-padding-x;
   }
 }
-</style>
+</style>

hwe/ts/processing/SelectNation.vue

@@ -16,7 +16,7 @@
     :maxHeight="400"
     :searchable="searchable"
   >
-    <template v-slot:option="props">
+    <template #option="props">
       <span
         :style="{
           color: props.option.notAvailable ? 'red' : undefined,
@@ -27,7 +27,7 @@
         {{ props.option.notAvailable ? "(불가)" : undefined }}
       </span>
     </template>
-    <template v-slot:singleLabel="props">
+    <template #singleLabel="props">
       <span
         :style="{
           color: props.option.notAvailable ? 'red' : undefined,
@@ -41,8 +41,8 @@
 </template>
 <script lang="ts">
 import { convertSearch초성 } from "@/util/convertSearch초성";
-import { defineComponent, PropType } from "vue";
-import { procNationItem } from "./processingRes";
+import { defineComponent, type PropType } from "vue";
+import type { procNationItem } from "./processingRes";
 
 type SelectedNation = {
   value: number;
@@ -67,18 +67,9 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true,
-    }
+    },
   },
   emits: ["update:modelValue"],
-  watch: {
-    modelValue(val: number) {
-      const target = this.targets.get(val);
-      this.selectedNation = target;
-    },
-    selectedNation(val: SelectedNation) {
-      this.$emit("update:modelValue", val.value);
-    },
-  },
   data() {
     const forFind = [];
     const targets = new Map<number, SelectedNation>();
@@ -90,7 +81,7 @@ export default defineComponent({
         info: nationItem.info,
         simpleName: nationItem.name,
         notAvailable: nationItem.notAvailable,
-        searchText: convertSearch초성(nationItem.name).join('|'),
+        searchText: convertSearch초성(nationItem.name).join("|"),
       };
       if (nationItem.id == this.modelValue) {
         selectedNation = obj;
@@ -104,5 +95,14 @@ export default defineComponent({
       targets,
     };
   },
+  watch: {
+    modelValue(val: number) {
+      const target = this.targets.get(val);
+      this.selectedNation = target;
+    },
+    selectedNation(val: SelectedNation) {
+      this.$emit("update:modelValue", val.value);
+    },
+  },
 });
 </script>