feat(WIP): processing 건국, 다른 메뉴 UI 통일

- lazy loading은 의미가 없으므로 롤백

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

@@ -0,0 +1,103 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0" v-if="!available건국">더 이상 건국은 불가능합니다.</div>
+  <div class="bg0" v-else>
+    <div>현재 도시에서 나라를 세웁니다. 중, 소도시에서만 가능합니다.</div>
+    <ul>
+      <li v-for="nationType in nationTypes" :key="nationType.type" class="row">
+        <div class="col-2 col-md-1">- {{ nationType.name }}</div>
+        <div class="col-4 col-md-2">
+          : <span style="color: cyan">{{ nationType.pros }}</span
+          >,
+        </div>
+        <div class="col-4 col-md-2">
+          <span style="color: magenta">{{ nationType.cons }}</span>
+        </div>
+      </li>
+    </ul>
+    <div class="row">
+      <div class="col-12 col-md-4">
+        국명 : <b-form-input v-model="destNationName" />
+      </div>
+      <div class="col-6 col-md-2">
+        색상 : <ColorSelect :colors="colors" v-model="selectedColorID" />
+      </div>
+      <div class="col-6 col-md-2">
+        <label>성향 :</label>
+        <b-form-select
+          :options="nationTypesOption"
+          v-model="selectedNationType"
+        />
+      </div>
+      <div class="col-12 col-md-2 d-grid">
+        <b-button @click="submit">{{ commandName }}</b-button>
+      </div>
+    </div>
+  </div>
+  <BottomBar :title="commandName" />
+</template>
+
+<script lang="ts">
+import ColorSelect from "@/processing/ColorSelect.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 { procNationTypeList } from "../processingRes";
+
+declare const commandName: string;
+
+declare const procRes: {
+  available건국: boolean;
+  colors: string[];
+  nationTypes: procNationTypeList;
+};
+
+export default defineComponent({
+  components: {
+    ColorSelect,
+    TopBackBar,
+    BottomBar,
+  },
+  setup() {
+    const destNationName = ref("");
+    const selectedColorID = ref(0);
+
+    console.log(procRes.nationTypes);
+    const selectedNationType = ref(Object.values(procRes.nationTypes)[0].type);
+
+    async function submit(e: Event) {
+      const event = new CustomEvent<Args>("customSubmit", {
+        detail: {
+          colorType: selectedColorID.value,
+          nationName: destNationName.value,
+          nationType: selectedNationType.value,
+        },
+      });
+      unwrap(e.target).dispatchEvent(event);
+    }
+
+    const nationTypesOption: { html: string; value: string }[] = [];
+    for (const nationType of Object.values(procRes.nationTypes)) {
+      nationTypesOption.push({
+        html: nationType.name,
+        value: nationType.type,
+      });
+    }
+    console.log(nationTypesOption);
+
+    return {
+      available건국: procRes.available건국,
+      selectedColorID,
+      selectedNationType,
+      colors: procRes.colors,
+      nationTypes: procRes.nationTypes,
+      nationTypesOption,
+      destNationName,
+      commandName,
+      submit,
+    };
+  },
+});
+</script>

hwe/ts/processing/General/che_이동.vue

@@ -26,10 +26,11 @@
       목록을 선택하거나 도시를 클릭하세요.<br />
     </div>
     <div class="row">
-      <div class="col">
+      <div class="col-4 col-md-2">
+        도시:
         <CitySelect :cities="citiesMap" v-model="selectedCityID" />
       </div>
-      <div class="col">
+      <div class="col-4 col-md-2 d-grid">
         <b-button @click="submit">{{ commandName }}</b-button>
       </div>
     </div>

hwe/ts/processing/General/index.ts

@@ -1,7 +1,9 @@
+import { default as che_건국} from "./che_건국.vue";
 import { default as CityProcess} from "./che_이동.vue";
 
-export const commandMap: Record<string, ()=>typeof CityProcess> = {
-    che_강행: ()=>CityProcess,
-    che_이동: ()=>CityProcess,
-    che_출병: ()=>CityProcess,
+export const commandMap: Record<string, typeof CityProcess> = {
+    che_강행: CityProcess,
+    che_건국,
+    che_이동: CityProcess,
+    che_출병: CityProcess,
 }