feat(WIP): process 등용 등

- ColorSelect 색을 가득 채움,
- ColorSelect 결과값을 둥글게
- procGeneralList의 column 가변형 정의
- 등용 brief 조사 처리 버그 수정

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

@@ -0,0 +1,78 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <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-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>
+  </div>
+  <BottomBar :title="commandName" />
+</template>
+
+<script lang="ts">
+import AmountSelect from "@/processing/AmountSelect.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";
+declare const commandName: string;
+
+declare const procRes: {
+  minAmount: number;
+  maxAmount: number;
+  amountGuide: number[];
+};
+
+export default defineComponent({
+  components: {
+    AmountSelect,
+    TopBackBar,
+    BottomBar,
+  },
+  setup() {
+    const amount = ref(1000);
+    const buyRice = ref(true);
+
+    async function submit(e: Event) {
+      const event = new CustomEvent<Args>("customSubmit", {
+        detail: {
+          amount: amount.value,
+          buyRice: buyRice.value,
+        },
+      });
+      unwrap(e.target).dispatchEvent(event);
+    }
+
+    return {
+      buyRice,
+      amount,
+      minAmount: ref(procRes.minAmount),
+      maxAmount: ref(procRes.maxAmount),
+      amountGuide: procRes.amountGuide,
+      commandName,
+      submit,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,99 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <div>
+      재야나 타국의 장수를 등용합니다.<br />
+      서신은 개인 메세지로 전달됩니다.<br />
+      등용할 장수를 목록에서 선택하세요.<br />
+    </div>
+    <div class="row">
+      <div class="col-12 col-md-6">
+        장수 :
+        <GeneralSelect
+          :generals="generalList"
+          :groupByNation="nationList"
+          :textHelper="textHelpGeneral"
+          v-model="selectedGeneralID"
+        />
+      </div>
+      <div class="col-4 col-md-2 d-grid">
+        <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
+      </div>
+    </div>
+  </div>
+  <BottomBar :title="commandName" />
+</template>
+
+<script lang="ts">
+import GeneralSelect from "@/processing/GeneralSelect.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 {
+  convertGeneralList,
+  procGeneralItem,
+  procGeneralKey,
+  procGeneralRawItemList,
+  procNationItem,
+  procNationList,
+} from "../processingRes";
+import { getNpcColor } from "@/common_legacy";
+declare const mapTheme: string;
+declare const commandName: string;
+
+declare const procRes: {
+  generals: procGeneralRawItemList;
+  generalsKey: procGeneralKey[];
+  nationList: procNationList,
+};
+
+export default defineComponent({
+  components: {
+    GeneralSelect,
+    TopBackBar,
+    BottomBar,
+  },
+  setup() {
+    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;
+      return name;
+    }
+
+    async function submit(e: Event) {
+      const event = new CustomEvent<Args>("customSubmit", {
+        detail: {
+          destGeneralID: selectedGeneralID.value,
+        },
+      });
+      unwrap(e.target).dispatchEvent(event);
+    }
+
+    const nationList = new Map<number, procNationItem>();
+    for(const nationItem of procRes.nationList){
+      nationList.set(nationItem.id, nationItem);
+    }
+
+    return {
+      mapTheme: ref(mapTheme),
+      selectedGeneralID,
+      generalList,
+      nationList,
+      commandName,
+      textHelpGeneral,
+      submit,
+    };
+  },
+});
+</script>

hwe/ts/processing/General/index.ts

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