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

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

hwe/ts/processing/AmountSelect.vue

@@ -1,55 +1,53 @@
 <template>
-  <div class="col-10 col-md-4">
-    <div class="input-group">
-      <b-button
-        v-if="maxAmount > 30000"
-        @click="amount = Math.max(amount - 10000, minAmount)"
-        >-1만</b-button
+  <div class="input-group">
+    <b-button
+      v-if="maxAmount > 30000"
+      @click="amount = Math.max(amount - 10000, minAmount)"
+      >-1만</b-button
+    >
+    <b-button
+      v-if="maxAmount > 3000"
+      @click="amount = Math.max(amount - 1000, minAmount)"
+      >-1천</b-button
+    >
+    <b-button
+      v-if="maxAmount > 300"
+      @click="amount = Math.max(amount - 100, minAmount)"
+      >-1백</b-button
+    >
+    <input
+      type="number"
+      class="form-control"
+      :max="maxAmount"
+      :min="minAmount"
+      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">
+          {{ guide.toLocaleString() }}
+        </div></b-dropdown-item
       >
-      <b-button
-        v-if="maxAmount > 3000"
-        @click="amount = Math.max(amount - 1000, minAmount)"
-        >-1천</b-button
-      >
-      <b-button
-        v-if="maxAmount > 300"
-        @click="amount = Math.max(amount - 100, minAmount)"
-        >-1백</b-button
-      >
-      <input
-        type="number"
-        class="form-control"
-        :max="maxAmount"
-        :min="minAmount"
-        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">
-            {{ guide.toLocaleString() }}
-          </div></b-dropdown-item
-        >
-      </b-dropdown>
-      <b-button
-        v-if="maxAmount > 300"
-        @click="amount = Math.min(amount + 100, maxAmount)"
-        >+1백</b-button
-      >
-      <b-button
-        v-if="maxAmount > 3000"
-        @click="amount = Math.min(amount + 1000, maxAmount)"
-        >+1천</b-button
-      >
-      <b-button
-        v-if="maxAmount > 30000"
-        @click="amount = Math.min(amount + 10000, maxAmount)"
-        >+1만</b-button
-      >
-    </div>
+    </b-dropdown>
+    <b-button
+      v-if="maxAmount > 300"
+      @click="amount = Math.min(amount + 100, maxAmount)"
+      >+1백</b-button
+    >
+    <b-button
+      v-if="maxAmount > 3000"
+      @click="amount = Math.min(amount + 1000, maxAmount)"
+      >+1천</b-button
+    >
+    <b-button
+      v-if="maxAmount > 30000"
+      @click="amount = Math.min(amount + 10000, maxAmount)"
+      >+1만</b-button
+    >
   </div>
 </template>
 <script lang="ts">
@@ -81,16 +79,16 @@ export default defineComponent({
     },
   },
   data() {
-      return {
-          amount: this.modelValue,
-      }
+    return {
+      amount: this.modelValue,
+    };
   },
 });
 </script>
 
 
 <style lang="scss">
-.btn-group.amount-dropdown > .btn{
+.btn-group.amount-dropdown > .btn {
   border-radius: 0;
 }
 

hwe/ts/processing/ColorSelect.vue

@@ -88,7 +88,6 @@ export default defineComponent({
         value,
         title,
       };
-      console.log(obj);
       forFind.push(obj);
       targets.set(value, obj);
     }

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,
 }

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

@@ -3,13 +3,13 @@
   <div class="bg0">
     <div>
       국기를 변경합니다. 단 1회 가능합니다.<br>
-      색상 : <br />
     </div>
     <div class="row">
-      <div class="col-12 col-md-6">
+      <div class="col-6 col-md-3">
+        색상 :
         <ColorSelect :colors="colors" v-model="selectedColorID" />
       </div>
-      <div class="col-12 col-md-6">
+      <div class="col-4 col-md-2 d-grid">
         <b-button @click="submit">{{ commandName }}</b-button>
       </div>
     </div>

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

@@ -3,13 +3,13 @@
   <div class="bg0">
     <div>
       나라의 이름을 바꿉니다. 황제가 된 후 1회 가능합니다.<br />
-      국명 : <br />
     </div>
     <div class="row">
-      <div class="col-12 col-md-6">
+      <div class="col-6 col-md-3">
+        국명 :
         <b-form-input v-model="destNationName"/>
       </div>
-      <div class="col-12 col-md-6">
+      <div class="col-4 col-md-2 d-grid">
         <b-button @click="submit">{{ commandName }}</b-button>
       </div>
     </div>

hwe/ts/processing/Nation/che_급습.vue

@@ -18,10 +18,11 @@
       표시됩니다.<br />
     </div>
     <div class="row">
-      <div class="col-12 col-md-6">
+      <div class="col-6 col-md-3">
+        국가 :
         <NationSelect :nations="nations" v-model="selectedNationID" />
       </div>
-      <div class="col-12 col-md-6">
+      <div class="col-4 col-md-2 d-grid">
         <b-button @click="submit">{{ commandName }}</b-button>
       </div>
     </div>

hwe/ts/processing/Nation/che_몰수.vue

@@ -1,15 +1,16 @@
 <template>
   <TopBackBar :title="commandName" type="chief" />
   <div class="bg0">
-    <div v-if="commandName=='몰수'">
+    <div v-if="commandName == '몰수'">
       장수의 자금이나 군량을 몰수합니다.<br />
       몰수한것은 국가재산으로 귀속됩니다.<br />
     </div>
-    <div v-else-if="commandName=='포상'">
+    <div v-else-if="commandName == '포상'">
       국고로 장수에게 자금이나 군량을 지급합니다.<br />
     </div>
     <div class="row">
       <div class="col-12 col-md-5">
+        장수 :
         <GeneralSelect
           :cities="citiesMap"
           :generals="generalList"
@@ -18,13 +19,23 @@
           :textHelper="textHelpGeneral"
         />
       </div>
-      <AmountSelect
-        :amountGuide="amountGuide"
-        v-model="amount"
-        :maxAmount="maxAmount"
-        :minAmount="minAmount"
-      />
-      <div class="col-12 col-md-2 d-grid">
+      <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-group>
+      </div>
+      <div class="col-10 col-md-4">
+        금액 :
+        <AmountSelect
+          :amountGuide="amountGuide"
+          v-model="amount"
+          :maxAmount="maxAmount"
+          :minAmount="minAmount"
+        />
+      </div>
+      <div class="col-4 col-md-2 d-grid">
         <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
       </div>
     </div>

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

@@ -17,6 +17,7 @@
     </div>
     <div class="row">
       <div class="col-12 col-md-6">
+        장수 :
         <GeneralSelect
           :cities="citiesMap"
           :generals="generalList"
@@ -25,11 +26,12 @@
           v-model="selectedGeneralID"
         />
       </div>
-      <div class="col-12 col-md-4">
+      <div class="col-6 col-md-4">
+        도시 :
         <CitySelect :cities="citiesMap" v-model="selectedCityID" />
       </div>
-      <div class="col-12 col-md-2 d-grid">
-        <b-button @click="submit">{{ commandName }}</b-button>
+      <div class="col-4 col-md-2 d-grid">
+        <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
       </div>
     </div>
   </div>

hwe/ts/processing/Nation/index.ts

@@ -4,11 +4,11 @@ import { default as NationProcess } from "./che_급습.vue";
 import { default as GeneralAmountProcess } from "./che_몰수.vue";
 import { default as GeneralCityProcess } from "./che_발령.vue";
 
-export const commandMap: Record<string, ()=>typeof NationProcess> = {
-    che_국기변경: ()=>che_국기변경,
-    che_국호변경: ()=>che_국호변경,
-    che_급습: ()=>NationProcess,
-    che_몰수: ()=>GeneralAmountProcess,
-    che_포상: ()=>GeneralAmountProcess,
-    che_발령: ()=>GeneralCityProcess,
+export const commandMap: Record<string, typeof NationProcess> = {
+    che_국기변경,
+    che_국호변경,
+    che_급습: NationProcess,
+    che_몰수: GeneralAmountProcess,
+    che_포상: GeneralAmountProcess,
+    che_발령: GeneralCityProcess,
 }

hwe/ts/processing/processingRes.ts

@@ -63,4 +63,13 @@ export type procNationItem = {
     notAvailable?: boolean,
 };
 
-export type procNationList = procNationItem[];
+export type procNationList = procNationItem[];
+
+export type procNationTypeItem = {
+    type: string,
+    name: string,
+    pros: string,
+    cons: string,
+}
+
+export type procNationTypeList = Record<string, procNationTypeItem>;