feat(WIP): processing 선양, 장수대상임관

2021-12-22 00:10:02 +09:00
parent 6dac344a35
commit 50e11f22a1
9 changed files with 295 additions and 100 deletions
@@ -40,13 +40,12 @@ import {
  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,
+  nationList: procNationList;
 };

 export default defineComponent({
@@ -81,12 +80,11 @@ export default defineComponent({
    }

    const nationList = new Map<number, procNationItem>();
-    for(const nationItem of procRes.nationList){
+    for (const nationItem of procRes.nationList) {
      nationList.set(nationItem.id, nationItem);
    }

    return {
-      mapTheme: ref(mapTheme),
      selectedGeneralID,
      generalList,
      nationList,
@@ -0,0 +1,91 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <div v-if="commandName == '등용'">
+      재야나 타국의 장수를 등용합니다.<br />
+      서신은 개인 메세지로 전달됩니다.<br />
+      등용할 장수를 목록에서 선택하세요.<br />
+    </div>
+    <div v-if="commandName == '선양'">
+      군주의 자리를 다른 장수에게 물려줍니다.<br />
+      장수를 선택하세요.<br />
+    </div>
+    <div class="row">
+      <div class="col-12 col-md-6">
+        장수 :
+        <GeneralSelect
+          :generals="generalList"
+          :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,
+} from "../processingRes";
+import { getNpcColor } from "@/common_legacy";
+declare const commandName: string;
+
+declare const procRes: {
+  generals: procGeneralRawItemList;
+  generalsKey: procGeneralKey[];
+};
+
+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} (${gen.leadership}/${gen.strength}/${gen.leadership})`;
+    }
+
+    async function submit(e: Event) {
+      const event = new CustomEvent<Args>("customSubmit", {
+        detail: {
+          destGeneralID: selectedGeneralID.value,
+        },
+      });
+      unwrap(e.target).dispatchEvent(event);
+    }
+
+    return {
+      selectedGeneralID,
+      generalList,
+      commandName,
+      textHelpGeneral,
+      submit,
+    };
+  },
+});
+</script>
@@ -55,12 +55,10 @@ import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import { procNationItem, procNationList } from "../processingRes";
 import { isBrightColor } from "@/util/isBrightColor";
-declare const mapTheme: string;
 declare const commandName: string;

 declare const procRes: {
-  nations: procNationList;
-  startYear: number;
+  nationList: procNationList;
 };

 export default defineComponent({
@@ -71,12 +69,11 @@ export default defineComponent({
  },
  setup() {
    const nations = new Map<number, procNationItem>();
-    for (const nationItem of procRes.nations) {
+    for (const nationItem of procRes.nationList) {
      nations.set(nationItem.id, nationItem);
    }

-    const selectedNationID = ref(procRes.nations[0].id);
-    const selectedCityObj = ref(); //mapping용
+    const selectedNationID = ref(procRes.nationList[0].id);

    function selectedNation(nationID: number) {
      selectedNationID.value = nationID;
@@ -92,10 +89,7 @@ export default defineComponent({
    }

    return {
-      startYear: procRes.startYear,
-      mapTheme: ref(mapTheme),
      nations: ref(nations),
-      selectedCityObj,
      selectedNationID,
      commandName,
      isBrightColor,
@@ -0,0 +1,161 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <div>
+      장수를 따라 임관합니다.<br />
+      이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<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 class="nation-list">
+      <div class="nation-header nation-row bg1 center">
+        <div>국가명</div>
+        <div>임관권유문</div>
+      </div>
+      <div
+        v-for="[, nation] in nationList"
+        :key="nation.id"
+        class="nation-row s-border-b"
+      >
+        <div
+          :style="{
+            backgroundColor: nation.color,
+            color: isBrightColor(nation.color) ? 'black' : 'white',
+            fontSize: '1.3em',
+          }"
+          class="d-grid"
+        >
+          <div class="align-self-center center">{{ nation.name }}</div>
+        </div>
+        <div class="nation-scout-plate align-self-center">
+          <div class="nation-scout-msg" v-html="nation.scoutMsg" />
+        </div>
+      </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";
+import { isBrightColor } from "@/util/isBrightColor";
+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;
+    }
+
+    const nations = new Map<number, procNationItem>();
+    for (const nationItem of procRes.nationList) {
+      nations.set(nationItem.id, nationItem);
+    }
+
+    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 {
+      nations: ref(nations),
+      selectedGeneralID,
+      generalList,
+      nationList,
+      commandName,
+      isBrightColor,
+      textHelpGeneral,
+      submit,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@scss/common/break_500px.scss";
+
+@include media-1000px {
+  .nation-list .nation-row {
+    display: grid;
+    grid-template-columns: 130px 870px;
+  }
+}
+
+@include media-500px {
+  .nation-list .nation-row {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr minmax(1fr, calc(200px * 500 / 870));
+  }
+
+  .nation-scout-plate {
+    max-height: calc(200px * 500 / 870);
+    overflow: hidden;
+  }
+
+  .nation-scout-msg {
+    width: 870px;
+    transform-origin: 0px 0px;
+    transform: scale(calc(500 / 870));
+  }
+}
+</style>
@@ -1,8 +1,11 @@
 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 CityProcess } from "./che_이동.vue";
 import { default as che_임관 } from "./che_임관.vue";
+import { default as che_장수대상임관 } from "./che_장수대상임관.vue";
 import { default as che_징병 } from "./che_징병.vue";

 //TODO: 자주 쓰는 녀석들은 Slot으로 변경
@@ -12,18 +15,18 @@ export const commandMap: Record<string, typeof CityProcess> = {
    che_군량매매,
    che_건국,
    che_등용,
+    che_선양,
    che_이동: CityProcess,
    che_임관,
    che_출병: CityProcess,
+    che_장수대상임관,
    che_징병,
    che_모병: che_징병,
 }

 /*
 - 항목들
-장수 - 선양,
 장수+ - 장수대상임관
-국가+ - 임관
 장수/금쌀/분량 - 증여(포상 이식)
 금쌀/분량 - 헌납(군량매매 또는 포상 수정)
 도시 - 첩보, 계략(화계 등)
@@ -37,7 +37,7 @@
      </div>
    </template>
    <template v-slot:singleLabel="props">
-      {{ props.option.simpleName }}
+      {{ props.option.simpleName }} {{groupByNation?`[${groupByNation.get(props.option.obj.nationID).name}]`:undefined}}
    </template>
  </v-multiselect>
 </template>