feat(WIP): processing 숙련전환, 불가침제의

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

@@ -0,0 +1,132 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <MapLegacyTemplate
+      :isDetailMap="false"
+      :clickableAll="true"
+      :neutralView="true"
+      :useCachedMap="true"
+      :mapTheme="mapTheme"
+      v-model="selectedCityObj"
+    />
+
+    <div>
+      타국에게 불가침을 제의합니다.<br />
+      제의할 국가를 목록에서 선택하세요.<br />
+      불가침 기한 다음 달부터 선포 가능합니다.<br />
+      현재 제의가 불가능한 국가는
+      <span style="color: red">붉은색</span>으로 표시됩니다.<br />
+    </div>
+    <div class="row">
+      <div class="col-6 col-md-3">
+        국가 :
+        <SelectNation :nations="nationList" v-model="selectedNationID" />
+      </div>
+      <div class="col-6 col-md-3">
+        기간 :
+        <div class="input-group"></div>
+        <div class="input-group">
+          <b-form-select 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>
+          <span class="input-group-text">년</span>
+          <b-form-select v-model="selectedMonth"
+            ><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">월</span>
+        </div>
+      </div>
+      <div class="col-4 col-md-2 d-grid">
+        <b-button @click="submit">{{ commandName }}</b-button>
+      </div>
+    </div>
+  </div>
+  <BottomBar :title="commandName" />
+</template>
+
+<script lang="ts">
+import MapLegacyTemplate, {
+  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 TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import { procNationItem, procNationList } from "../processingRes";
+declare const mapTheme: string;
+declare const commandName: string;
+
+declare const procRes: {
+  nationList: procNationList;
+  startYear: number;
+  minYear: number;
+  maxYear: number;
+  month: number;
+};
+
+export default defineComponent({
+  components: {
+    MapLegacyTemplate,
+    SelectNation,
+    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) {
+      nationList.set(nationItem.id, nationItem);
+    }
+
+    const selectedNationID = ref(procRes.nationList[0].id);
+    const selectedCityObj = ref(); //mapping용
+
+    const selectedYear = ref(procRes.minYear);
+    const selectedMonth = ref(procRes.month);
+
+    function selectedNation(nationID: number) {
+      selectedNationID.value = nationID;
+    }
+
+    async function submit(e: Event) {
+      const event = new CustomEvent<Args>("customSubmit", {
+        detail: {
+          destNationID: selectedNationID.value,
+          year: selectedYear.value,
+          month: selectedMonth.value,
+        },
+      });
+      unwrap(e.target).dispatchEvent(event);
+    }
+
+    return {
+      ...procRes,
+      selectedYear,
+      selectedMonth,
+      mapTheme: ref(mapTheme),
+      nationList: ref(nationList),
+      selectedCityObj,
+      selectedNationID,
+      commandName,
+      selectedNation,
+      submit,
+    };
+  },
+});
+</script>

hwe/ts/processing/Nation/index.ts

@@ -1,6 +1,7 @@
 import { default as che_국기변경 } from "./che_국기변경.vue";
 import { default as che_국호변경 } from "./che_국호변경.vue";
 import { default as che_물자원조 } from "./che_물자원조.vue";
+import { default as che_불가침제의 } from "./che_불가침제의.vue";
 import { default as che_피장파장 } from "./che_피장파장.vue";
 
 import { default as ProcessNation } from "../ProcessNation.vue";
@@ -16,6 +17,7 @@ export const commandMap: Record<string, typeof ProcessNation> = {
     che_물자원조,
     che_발령: ProcessGeneralCity,
     che_백성동원: ProcessCity,
+    che_불가침제의,
     che_불가침파기제의: ProcessNation,
     che_선전포고: ProcessNation,
     che_수몰: ProcessCity,