From b31ee022af0f01abf40dfafa994f97981315afb3 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Tue, 12 Jul 2022 00:28:08 +0900
Subject: [PATCH] refac: defineComponent => vue3 setup

---
 hwe/ts/ChiefCenter/BottomItem.vue           |  33 +-
 hwe/ts/PageNationStratFinan.vue             | 493 +++++++++-----------
 hwe/ts/components/DragSelect.vue            | 327 +++++++------
 hwe/ts/processing/CitiesBasedOnDistance.vue |  42 +-
 hwe/ts/processing/CrewTypeItem.vue          |  96 ++--
 hwe/ts/processing/ProcessGeneralAmount.vue  | 181 +++----
 hwe/ts/processing/SelectAmount.vue          |  36 +-
 7 files changed, 565 insertions(+), 643 deletions(-)

diff --git a/hwe/ts/ChiefCenter/BottomItem.vue b/hwe/ts/ChiefCenter/BottomItem.vue
index 96c90ab4..8fbf601c 100644
--- a/hwe/ts/ChiefCenter/BottomItem.vue
+++ b/hwe/ts/ChiefCenter/BottomItem.vue
@@ -1,9 +1,5 @@
 <template>
-  <div
-    :class="[`chiefBox${chiefLevel}`, 'subRows']"
-    :style="style"
-    @click="$emit('click', this)"
-  >
+  <div :class="[`chiefBox${chiefLevel}`, 'subRows']" :style="style" @click="onClick">
     <div
       class="bg1 nameHeader"
       :style="{
@@ -33,15 +29,14 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { getNpcColor } from "@/common_legacy";
 import type { ChiefResponse } from "@/defs/API/NationCommand";
 import { mb_strwidth } from "@/util/mb_strwidth";
-import { defineComponent, type PropType } from "vue";
+import type { PropType } from "vue";
 import VueTypes from "vue-types";
 
-export default defineComponent({
-  props: {
+defineProps({
     chiefLevel: VueTypes.integer.isRequired,
     style: VueTypes.object.isRequired,
     officer: {
@@ -49,11 +44,17 @@ export default defineComponent({
       default: undefined,
     },
     isMe: VueTypes.bool.isRequired,
-  },
-  emits: ["click"],
-  methods: {
-    mb_strwidth,
-    getNpcColor,
-  },
-});
+  });
+
+const emit = defineEmits<{
+  (event: "click", value: HTMLElement): void,
+}>();
+
+function onClick(event: MouseEvent){
+  if(!event.target){
+    return;
+  }
+  const elem = event.target as HTMLElement;
+  emit("click", elem);
+}
 </script>
diff --git a/hwe/ts/PageNationStratFinan.vue b/hwe/ts/PageNationStratFinan.vue
index dfe6c127..09a58ca8 100644
--- a/hwe/ts/PageNationStratFinan.vue
+++ b/hwe/ts/PageNationStratFinan.vue
@@ -234,19 +234,8 @@
     <BottomBar title="내무부" />
   </BContainer>
 </template>
-<script lang="ts">
-import TipTap from "./components/TipTap.vue";
-import TopBackBar from "@/components/TopBackBar.vue";
-import BottomBar from "@/components/BottomBar.vue";
-import { computed, defineComponent, reactive, ref, toRefs } from "vue";
-import { isString } from "lodash";
-import { type diplomacyState, diplomacyStateInfo, type NationStaticItem } from "./defs";
-import { SammoAPI } from "./SammoAPI";
-import { joinYearMonth } from "@/util/joinYearMonth";
-import { parseYearMonth } from "@/util/parseYearMonth";
-import { useToast, BContainer } from "bootstrap-vue-3";
-import { unwrap } from "./util/unwrap";
 
+<script lang="ts">
 type NationItem = NationStaticItem & {
   cityCnt: number;
   diplomacy: {
@@ -292,285 +281,267 @@ declare const staticValues: {
     max: number;
   };
 };
+</script>
+<script setup lang="ts">
+import TipTap from "./components/TipTap.vue";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import { computed, reactive, ref, toRefs } from "vue";
+import { isString } from "lodash";
+import { type diplomacyState, diplomacyStateInfo, type NationStaticItem } from "./defs";
+import { SammoAPI } from "./SammoAPI";
+import { joinYearMonth } from "@/util/joinYearMonth";
+import { parseYearMonth } from "@/util/parseYearMonth";
+import { useToast, BContainer } from "bootstrap-vue-3";
+import { unwrap } from "./util/unwrap";
 
-export default defineComponent({
-  components: {
-    TopBackBar,
-    BottomBar,
-    TipTap,
-    BContainer,
-  },
-  setup() {
-    const toasts = unwrap(useToast());
-    const self = reactive(staticValues);
+const toasts = unwrap(useToast());
+const self = reactive(staticValues);
+const {
+  editable,
+  nationMsg,
+  scoutMsg,
+  nationID,
+  year,
+  month,
+  nationsList,
+  gold,
+  rice,
+  income,
+  policy,
+  warSettingCnt,
+} = toRefs(self);
 
-    let oldNationMsg = staticValues.nationMsg;
-    const inEditNationMsg = ref(false);
+let oldNationMsg = staticValues.nationMsg;
+const inEditNationMsg = ref(false);
 
-    function enableEditNationMsg() {
-      inEditNationMsg.value = true;
+function enableEditNationMsg() {
+  inEditNationMsg.value = true;
+}
+
+function rollbackNationMsg() {
+  inEditNationMsg.value = false;
+  self.nationMsg = oldNationMsg;
+}
+
+async function saveNationMsg() {
+  const msg = self.nationMsg;
+  try {
+    await SammoAPI.Nation.SetNotice({
+      msg,
+    });
+    oldNationMsg = msg;
+    inEditNationMsg.value = false;
+    toasts.info({
+      title: "변경",
+      body: "국가 방침을 변경했습니다.",
+    });
+  } catch (e) {
+    if (isString(e)) {
+      toasts.danger({
+        title: "에러",
+        body: e,
+      });
     }
+    console.error(e);
+  }
+}
 
-    function rollbackNationMsg() {
-      inEditNationMsg.value = false;
-      self.nationMsg = oldNationMsg;
-    }
+let oldScoutMsg = staticValues.scoutMsg;
+const inEditScoutMsg = ref(false);
 
-    async function saveNationMsg() {
-      const msg = self.nationMsg;
-      try {
-        await SammoAPI.Nation.SetNotice({
-          msg,
-        });
-        oldNationMsg = msg;
-        inEditNationMsg.value = false;
-        toasts.info({
-          title: "변경",
-          body: "국가 방침을 변경했습니다.",
-        });
-      } catch (e) {
-        if (isString(e)) {
-          toasts.danger({
-            title: "에러",
-            body: e,
-          });
-        }
-        console.error(e);
-      }
+function enableEditScoutMsg() {
+  inEditScoutMsg.value = true;
+}
+function rollbackScoutMsg() {
+  inEditScoutMsg.value = false;
+  self.scoutMsg = oldScoutMsg;
+}
+async function saveScoutMsg() {
+  const msg = self.scoutMsg;
+  try {
+    await SammoAPI.Nation.SetScoutMsg({
+      msg,
+    });
+    oldScoutMsg = msg;
+    inEditScoutMsg.value = false;
+    toasts.info({
+      title: "변경",
+      body: "임관 권유문을 변경했습니다.",
+    });
+  } catch (e) {
+    if (isString(e)) {
+      toasts.danger({
+        title: "에러",
+        body: e,
+      });
     }
+    console.error(e);
+  }
+}
 
-    let oldScoutMsg = staticValues.scoutMsg;
-    const inEditScoutMsg = ref(false);
-
-    function enableEditScoutMsg() {
-      inEditScoutMsg.value = true;
+const trackTiptapFormHeight = (target: string) => {
+  let form: HTMLElement | null = null;
+  let outerForm: HTMLElement | null = null;
+  function handler() {
+    if (!form) {
+      form = document.querySelector(`${target} .ProseMirror`);
     }
-    function rollbackScoutMsg() {
-      inEditScoutMsg.value = false;
-      self.scoutMsg = oldScoutMsg;
+    if (!outerForm) {
+      outerForm = document.querySelector(`${target} .tiptap-editor`);
     }
-    async function saveScoutMsg() {
-      const msg = self.scoutMsg;
-      try {
-        await SammoAPI.Nation.SetScoutMsg({
-          msg,
-        });
-        oldScoutMsg = msg;
-        inEditScoutMsg.value = false;
-        toasts.info({
-          title: "변경",
-          body: "임관 권유문을 변경했습니다.",
-        });
-      } catch (e) {
-        if (isString(e)) {
-          toasts.danger({
-            title: "에러",
-            body: e,
-          });
-        }
-        console.error(e);
-      }
+    if (!form || !outerForm) {
+      return;
     }
 
-    const trackTiptapFormHeight = (target: string) => {
-      let form: HTMLElement | null = null;
-      let outerForm: HTMLElement | null = null;
-      function handler() {
-        if (!form) {
-          form = document.querySelector(`${target} .ProseMirror`);
-        }
-        if (!outerForm) {
-          outerForm = document.querySelector(`${target} .tiptap-editor`);
-        }
-        if (!form || !outerForm) {
-          return;
-        }
+    const { height: clientHeight } = form.getBoundingClientRect();
+    const { height: parentHeight } = outerForm.getBoundingClientRect();
 
-        const { height: clientHeight } = form.getBoundingClientRect();
-        const { height: parentHeight } = outerForm.getBoundingClientRect();
+    if (parentHeight != clientHeight) {
+      outerForm.style.height = `${clientHeight}px`;
+    }
+  }
+  window.addEventListener("orientationchange", handler, true);
 
-        if (parentHeight != clientHeight) {
-          outerForm.style.height = `${clientHeight}px`;
-        }
-      }
-      window.addEventListener("orientationchange", handler, true);
+  return handler;
+};
+const trackNationMsgHeight = trackTiptapFormHeight("#noticeForm");
+const trackScoutMsgHeight = trackTiptapFormHeight("#scoutMsgForm");
 
-      return handler;
-    };
+const incomeGoldCity = computed(() => {
+  return (self.income.gold.city * self.policy.rate) / 100;
+});
 
-    const incomeGoldCity = computed(() => {
-      return (self.income.gold.city * self.policy.rate) / 100;
-    });
+const incomeGold = computed(() => {
+  return incomeGoldCity.value + self.income.gold.war;
+});
 
-    const incomeGold = computed(() => {
-      return incomeGoldCity.value + self.income.gold.war;
-    });
+const incomeRiceCity = computed(() => {
+  return (self.income.rice.city * self.policy.rate) / 100;
+});
 
-    const incomeRiceCity = computed(() => {
-      return (self.income.rice.city * self.policy.rate) / 100;
-    });
+const incomeRiceWall = computed(() => {
+  return (self.income.rice.wall * self.policy.rate) / 100;
+});
 
-    const incomeRiceWall = computed(() => {
-      return (self.income.rice.wall * self.policy.rate) / 100;
-    });
+const incomeRice = computed(() => {
+  return incomeRiceCity.value + incomeRiceWall.value;
+});
 
-    const incomeRice = computed(() => {
-      return incomeRiceCity.value + incomeRiceWall.value;
-    });
+const outcomeByBill = computed(() => {
+  return (self.outcome * self.policy.bill) / 100;
+});
 
-    const outcomeByBill = computed(() => {
-      return (self.outcome * self.policy.bill) / 100;
+let oldRate = staticValues.policy.rate;
+async function setRate() {
+  const rate = self.policy.rate;
+  try {
+    await SammoAPI.Nation.SetRate({ amount: rate });
+    oldRate = rate;
+    toasts.info({
+      title: "변경",
+      body: "세율을 변경했습니다.",
     });
-
-    let oldRate = staticValues.policy.rate;
-    async function setRate() {
-      const rate = self.policy.rate;
-      try {
-        await SammoAPI.Nation.SetRate({ amount: rate });
-        oldRate = rate;
-        toasts.info({
-          title: "변경",
-          body: "세율을 변경했습니다.",
-        });
-      } catch (e) {
-        if (isString(e)) {
-          toasts.danger({
-            title: "에러",
-            body: e,
-          });
-        }
-        console.error(e);
-      }
-    }
-    function rollbackRate() {
-      self.policy.rate = oldRate;
+  } catch (e) {
+    if (isString(e)) {
+      toasts.danger({
+        title: "에러",
+        body: e,
+      });
     }
+    console.error(e);
+  }
+}
+function rollbackRate() {
+  self.policy.rate = oldRate;
+}
 
-    let oldBill = staticValues.policy.bill;
-    async function setBill() {
-      const bill = self.policy.bill;
-      try {
-        await SammoAPI.Nation.SetBill({ amount: bill });
-        oldBill = bill;
-        toasts.info({
-          title: "변경",
-          body: "지급률을 변경했습니다.",
-        });
-      } catch (e) {
-        if (isString(e)) {
-          toasts.danger({
-            title: "에러",
-            body: e,
-          });
-        }
-        console.error(e);
-      }
-    }
-    function rollbackBill() {
-      self.policy.bill = oldBill;
+let oldBill = staticValues.policy.bill;
+async function setBill() {
+  const bill = self.policy.bill;
+  try {
+    await SammoAPI.Nation.SetBill({ amount: bill });
+    oldBill = bill;
+    toasts.info({
+      title: "변경",
+      body: "지급률을 변경했습니다.",
+    });
+  } catch (e) {
+    if (isString(e)) {
+      toasts.danger({
+        title: "에러",
+        body: e,
+      });
     }
+    console.error(e);
+  }
+}
+function rollbackBill() {
+  self.policy.bill = oldBill;
+}
 
-    let oldSecretLimit = staticValues.policy.secretLimit;
-    async function setSecretLimit() {
-      const secretLimit = self.policy.secretLimit;
-      try {
-        await SammoAPI.Nation.SetSecretLimit({ amount: secretLimit });
-        oldSecretLimit = secretLimit;
-        toasts.info({
-          title: "변경",
-          body: "기밀 권한을 변경했습니다.",
-        });
-      } catch (e) {
-        if (isString(e)) {
-          toasts.danger({
-            title: "에러",
-            body: e,
-          });
-        }
-        self.policy.secretLimit = oldSecretLimit;
-        console.error(e);
-      }
-    }
-    function rollbackSecretLimit() {
-      self.policy.secretLimit = oldSecretLimit;
+let oldSecretLimit = staticValues.policy.secretLimit;
+async function setSecretLimit() {
+  const secretLimit = self.policy.secretLimit;
+  try {
+    await SammoAPI.Nation.SetSecretLimit({ amount: secretLimit });
+    oldSecretLimit = secretLimit;
+    toasts.info({
+      title: "변경",
+      body: "기밀 권한을 변경했습니다.",
+    });
+  } catch (e) {
+    if (isString(e)) {
+      toasts.danger({
+        title: "에러",
+        body: e,
+      });
     }
+    self.policy.secretLimit = oldSecretLimit;
+    console.error(e);
+  }
+}
+function rollbackSecretLimit() {
+  self.policy.secretLimit = oldSecretLimit;
+}
 
-    async function setBlockWar() {
-      try {
-        const result = await SammoAPI.Nation.SetBlockWar({ value: self.policy.blockWar });
-        self.warSettingCnt.remain = result.availableCnt;
-        toasts.info({
-          title: "변경",
-          body: "전쟁 금지 설정을 변경했습니다.",
-        });
-      } catch (e) {
-        if (isString(e)) {
-          toasts.danger({
-            title: "에러",
-            body: e,
-          });
-        }
-        self.policy.blockWar = !self.policy.blockWar;
-        console.error(e);
-      }
+async function setBlockWar() {
+  try {
+    const result = await SammoAPI.Nation.SetBlockWar({ value: self.policy.blockWar });
+    self.warSettingCnt.remain = result.availableCnt;
+    toasts.info({
+      title: "변경",
+      body: "전쟁 금지 설정을 변경했습니다.",
+    });
+  } catch (e) {
+    if (isString(e)) {
+      toasts.danger({
+        title: "에러",
+        body: e,
+      });
     }
+    self.policy.blockWar = !self.policy.blockWar;
+    console.error(e);
+  }
+}
 
-    async function setBlockScout() {
-      try {
-        await SammoAPI.Nation.SetBlockScout({ value: self.policy.blockScout });
-        toasts.info({
-          title: "변경",
-          body: "임관 설정을 변경했습니다.",
-        });
-      } catch (e) {
-        if (isString(e)) {
-          toasts.danger({
-            title: "에러",
-            body: e,
-          });
-        }
-        self.policy.blockScout = !self.policy.blockScout;
-        console.error(e);
-      }
+async function setBlockScout() {
+  try {
+    await SammoAPI.Nation.SetBlockScout({ value: self.policy.blockScout });
+    toasts.info({
+      title: "변경",
+      body: "임관 설정을 변경했습니다.",
+    });
+  } catch (e) {
+    if (isString(e)) {
+      toasts.danger({
+        title: "에러",
+        body: e,
+      });
     }
-
-    return {
-      toasts,
-
-      ...toRefs(self),
-      inEditNationMsg,
-      inEditScoutMsg,
-      enableEditNationMsg,
-      rollbackNationMsg,
-      saveNationMsg,
-      enableEditScoutMsg,
-      rollbackScoutMsg,
-      saveScoutMsg,
-      diplomacyStateInfo,
-      joinYearMonth,
-      parseYearMonth,
+    self.policy.blockScout = !self.policy.blockScout;
+    console.error(e);
+  }
+}
 
-      trackNationMsgHeight: trackTiptapFormHeight("#noticeForm"),
-      trackScoutMsgHeight: trackTiptapFormHeight("#scoutMsgForm"),
-
-      incomeGoldCity,
-      incomeGold,
-      incomeRiceCity,
-      incomeRiceWall,
-      incomeRice,
-      outcomeByBill,
-
-      setRate,
-      rollbackRate,
-      setBill,
-      rollbackBill,
-      setSecretLimit,
-      rollbackSecretLimit,
-
-      setBlockWar,
-      setBlockScout,
-    };
-  },
-  methods: {},
-});
 </script>
diff --git a/hwe/ts/components/DragSelect.vue b/hwe/ts/components/DragSelect.vue
index 0e81976b..4ca433f9 100644
--- a/hwe/ts/components/DragSelect.vue
+++ b/hwe/ts/components/DragSelect.vue
@@ -13,9 +13,9 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 /// https://github.com/andi23rosca/drag-select-vue/blob/master/src/DragSelect.vue
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount, type PropType } from "vue";
+import { ref, watch, onMounted, onBeforeUnmount, type PropType } from "vue";
 import VueTypes from "vue-types";
 
 function getDimensions(p1: coord, p2: coord): rect {
@@ -36,186 +36,183 @@ function collisionCheck(node1: DOMRect, node2: DOMRect): boolean {
 type coord = { x: number; y: number };
 type rect = { width: number; height: number };
 
-export default defineComponent({
-  props: {
-    attribute: VueTypes.string.isRequired,
-    color: VueTypes.string.def("#4299E1"),
-    opacity: VueTypes.number.def(0.7),
-    modelValue: {
-      type: Object as PropType<Set<string>>,
-      required: false,
-      default: () => ref(new Set()),
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
+const props = defineProps({
+  attribute: VueTypes.string.isRequired,
+  color: VueTypes.string.def("#4299E1"),
+  opacity: VueTypes.number.def(0.7),
+  modelValue: {
+    type: Object as PropType<Set<string>>,
+    required: false,
+    default: () => ref(new Set()),
   },
-  emits: ["update:modelValue", "dragDone", "dragStart"],
-  setup(props, { emit }) {
-    const intersected = ref<Set<string>>(props.modelValue);
-    const container = ref<HTMLElement>();
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
 
-    watch(intersected, (val) => {
-      emit("update:modelValue", val);
-    });
-    watch(props.modelValue, (val) => {
-      if (intersected.value === val) {
-        return;
-      }
-      intersected.value = val;
-    });
+const emit = defineEmits<{
+  (event: "update:modelValue", value: Set<string>): void;
+  (event: "dragDone", value: Set<string>): void;
+  (event: "dragStart"): void;
+}>();
 
-    onMounted(() => {
-      if (!container.value) {
-        console.error(`Container is not referenced.`);
-        return;
-      }
-      const uContainer = container.value;
-      let containerRect = uContainer.getBoundingClientRect();
+const intersected = ref<Set<string>>(props.modelValue);
+const container = ref<HTMLElement>();
 
-      function getCoords(e: MouseEvent | Touch): coord {
-        return {
-          x: e.clientX - containerRect.left,
-          y: e.clientY - containerRect.top,
-        };
-      }
-      let children: HTMLCollection;
-      let box = document.createElement("div");
-      box.setAttribute("data-drag-box-component", "");
-      box.style.position = "absolute";
-      box.style.backgroundColor = props.color;
-      box.style.opacity = `${props.opacity}`;
-      let start = { x: 0, y: 0 };
-      let end = { x: 0, y: 0 };
-      function intersection() {
-        const rect = box.getBoundingClientRect();
-        const localIntersected = new Set<string>();
-        for (let i = 0; i < children.length; i++) {
-          if (collisionCheck(rect, children[i].getBoundingClientRect())) {
-            const attr = children[i].getAttribute(props.attribute);
-            if (children[i].hasAttribute(props.attribute)) {
-              localIntersected.add(attr as string);
-            }
-          }
-        }
+watch(intersected, (val) => {
+  emit("update:modelValue", val);
+});
+watch(props.modelValue, (val) => {
+  if (intersected.value === val) {
+    return;
+  }
+  intersected.value = val;
+});
 
-        let dismatch = false;
-        for (const oldVal of intersected.value) {
-          if (!localIntersected.has(oldVal)) {
-            dismatch = true;
-            break;
-          }
-        }
-        if (!dismatch) {
-          for (const newVal of localIntersected) {
-            if (!intersected.value.has(newVal)) {
-              dismatch = true;
-              break;
-            }
-          }
-        }
-        if (dismatch) {
-          intersected.value = localIntersected;
-        }
-      }
-      function touchStart(e: TouchEvent) {
-        e.preventDefault();
-        startDrag(e.touches[0]);
-      }
-      function touchMove(e: TouchEvent) {
-        e.preventDefault();
-        drag(e.touches[0]);
-      }
+onMounted(() => {
+  if (!container.value) {
+    console.error(`Container is not referenced.`);
+    return;
+  }
+  const uContainer = container.value;
+  let containerRect = uContainer.getBoundingClientRect();
 
-      let isMine = false;
-      function startDrag(e: MouseEvent | Touch) {
-        if (props.disabled) {
-          return;
+  function getCoords(e: MouseEvent | Touch): coord {
+    return {
+      x: e.clientX - containerRect.left,
+      y: e.clientY - containerRect.top,
+    };
+  }
+  let children: HTMLCollection;
+  let box = document.createElement("div");
+  box.setAttribute("data-drag-box-component", "");
+  box.style.position = "absolute";
+  box.style.backgroundColor = props.color;
+  box.style.opacity = `${props.opacity}`;
+  let start = { x: 0, y: 0 };
+  let end = { x: 0, y: 0 };
+  function intersection() {
+    const rect = box.getBoundingClientRect();
+    const localIntersected = new Set<string>();
+    for (let i = 0; i < children.length; i++) {
+      if (collisionCheck(rect, children[i].getBoundingClientRect())) {
+        const attr = children[i].getAttribute(props.attribute);
+        if (children[i].hasAttribute(props.attribute)) {
+          localIntersected.add(attr as string);
         }
-        containerRect = uContainer.getBoundingClientRect();
-        children = uContainer.children;
-        start = getCoords(e);
-        end = start;
-        document.addEventListener("mousemove", drag);
-        document.addEventListener("touchmove", touchMove);
-        box.style.top = start.y + "px";
-        box.style.left = start.x + "px";
-        uContainer.append(box);
-        intersection();
-        isMine = true;
-        emit("dragStart");
-      }
-      function drag(e: MouseEvent | Touch) {
-        if (props.disabled) {
-          return;
-        }
-        end = getCoords(e);
-        const dimensions = getDimensions(start, end);
-        if (end.x < start.x) {
-          box.style.left = end.x + "px";
-        }
-        if (end.y < start.y) {
-          box.style.top = end.y + "px";
-        }
-        box.style.width = dimensions.width + "px";
-        box.style.height = dimensions.height + "px";
-        intersection();
-      }
-      function endDrag() {
-        if (props.disabled) {
-          return;
-        }
-        start = { x: 0, y: 0 };
-        end = { x: 0, y: 0 };
-        box.style.width = "0";
-        box.style.height = "0";
-        document.removeEventListener("mousemove", drag);
-        document.removeEventListener("touchmove", touchMove);
-        box.remove();
-        if (isMine) {
-          emit("dragDone", intersected.value);
-        }
-        isMine = false;
       }
+    }
 
-      watch(
-        () => props.disabled,
-        (disabledNext) => {
-          if (disabledNext) {
-            uContainer.removeEventListener("mousedown", startDrag);
-            uContainer.removeEventListener("touchstart", touchStart);
-            document.removeEventListener("mouseup", endDrag);
-            document.removeEventListener("touchend", endDrag);
-          } else {
-            uContainer.addEventListener("mousedown", startDrag);
-            uContainer.addEventListener("touchstart", touchStart);
-            document.addEventListener("mouseup", endDrag);
-            document.addEventListener("touchend", endDrag);
-          }
+    let dismatch = false;
+    for (const oldVal of intersected.value) {
+      if (!localIntersected.has(oldVal)) {
+        dismatch = true;
+        break;
+      }
+    }
+    if (!dismatch) {
+      for (const newVal of localIntersected) {
+        if (!intersected.value.has(newVal)) {
+          dismatch = true;
+          break;
         }
-      );
+      }
+    }
+    if (dismatch) {
+      intersected.value = localIntersected;
+    }
+  }
+  function touchStart(e: TouchEvent) {
+    e.preventDefault();
+    startDrag(e.touches[0]);
+  }
+  function touchMove(e: TouchEvent) {
+    e.preventDefault();
+    drag(e.touches[0]);
+  }
 
-      if (!props.disabled) {
+  let isMine = false;
+  function startDrag(e: MouseEvent | Touch) {
+    if (props.disabled) {
+      return;
+    }
+    containerRect = uContainer.getBoundingClientRect();
+    children = uContainer.children;
+    start = getCoords(e);
+    end = start;
+    document.addEventListener("mousemove", drag);
+    document.addEventListener("touchmove", touchMove);
+    box.style.top = start.y + "px";
+    box.style.left = start.x + "px";
+    uContainer.append(box);
+    intersection();
+    isMine = true;
+    emit("dragStart");
+  }
+  function drag(e: MouseEvent | Touch) {
+    if (props.disabled) {
+      return;
+    }
+    end = getCoords(e);
+    const dimensions = getDimensions(start, end);
+    if (end.x < start.x) {
+      box.style.left = end.x + "px";
+    }
+    if (end.y < start.y) {
+      box.style.top = end.y + "px";
+    }
+    box.style.width = dimensions.width + "px";
+    box.style.height = dimensions.height + "px";
+    intersection();
+  }
+  function endDrag() {
+    if (props.disabled) {
+      return;
+    }
+    start = { x: 0, y: 0 };
+    end = { x: 0, y: 0 };
+    box.style.width = "0";
+    box.style.height = "0";
+    document.removeEventListener("mousemove", drag);
+    document.removeEventListener("touchmove", touchMove);
+    box.remove();
+    if (isMine) {
+      emit("dragDone", intersected.value);
+    }
+    isMine = false;
+  }
+
+  watch(
+    () => props.disabled,
+    (disabledNext) => {
+      if (disabledNext) {
+        uContainer.removeEventListener("mousedown", startDrag);
+        uContainer.removeEventListener("touchstart", touchStart);
+        document.removeEventListener("mouseup", endDrag);
+        document.removeEventListener("touchend", endDrag);
+      } else {
         uContainer.addEventListener("mousedown", startDrag);
         uContainer.addEventListener("touchstart", touchStart);
         document.addEventListener("mouseup", endDrag);
         document.addEventListener("touchend", endDrag);
       }
+    }
+  );
 
-      onBeforeUnmount(() => {
-        uContainer.removeEventListener("mousedown", startDrag);
-        uContainer.removeEventListener("touchstart", touchStart);
-        document.removeEventListener("mouseup", endDrag);
-        document.removeEventListener("touchend", endDrag);
-      });
-    });
+  if (!props.disabled) {
+    uContainer.addEventListener("mousedown", startDrag);
+    uContainer.addEventListener("touchstart", touchStart);
+    document.addEventListener("mouseup", endDrag);
+    document.addEventListener("touchend", endDrag);
+  }
 
-    return {
-      intersected,
-      container,
-    };
-  },
+  onBeforeUnmount(() => {
+    uContainer.removeEventListener("mousedown", startDrag);
+    uContainer.removeEventListener("touchstart", touchStart);
+    document.removeEventListener("mouseup", endDrag);
+    document.removeEventListener("touchend", endDrag);
+  });
 });
 </script>
diff --git a/hwe/ts/processing/CitiesBasedOnDistance.vue b/hwe/ts/processing/CitiesBasedOnDistance.vue
index 841b188a..4fb4eb97 100644
--- a/hwe/ts/processing/CitiesBasedOnDistance.vue
+++ b/hwe/ts/processing/CitiesBasedOnDistance.vue
@@ -5,35 +5,33 @@
       <template v-if="key !== 0"> , </template>
       <a
         :style="{ color: colorMap[distance as keyof typeof colorMap] ?? undefined, textDecoration:'underline' }"
-        @click="$emit('selected', cityID)"
+        @click="emit('selected', cityID)"
         >{{ citiesMap.get(cityID)?.name }}</a
       >
     </template>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
+<script setup lang="ts">
+import type { PropType } from "vue";
 
-export default defineComponent({
-  props: {
-    distanceList: {
-      type: Object as PropType<Record<number, number[]>>,
-      required: true,
-    },
-    citiesMap: {
-      type: Object as PropType<Map<number, { name: string }>>,
-      required: true,
-    },
+defineProps({
+  distanceList: {
+    type: Object as PropType<Record<number, number[]>>,
+    required: true,
   },
-  emits: ["selected"],
-  data() {
-    return {
-      colorMap: {
-        1: "magenta",
-        2: "orange",
-        3: "yellow",
-      },
-    };
+  citiesMap: {
+    type: Object as PropType<Map<number, { name: string }>>,
+    required: true,
   },
 });
+
+const emit = defineEmits<{
+  (event: "selected", value: number): void;
+}>();
+
+const colorMap = {
+  1: "magenta",
+  2: "orange",
+  3: "yellow",
+};
 </script>
diff --git a/hwe/ts/processing/CrewTypeItem.vue b/hwe/ts/processing/CrewTypeItem.vue
index 033c1974..5656c0ff 100644
--- a/hwe/ts/processing/CrewTypeItem.vue
+++ b/hwe/ts/processing/CrewTypeItem.vue
@@ -56,57 +56,53 @@
     <div class="crewTypeInfo text-start" v-html="crewType.info.join('<br>')" />
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref } from "vue";
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
 import VueTypes from "vue-types";
 
-export default defineComponent({
-  props: {
-    crewType: VueTypes.object.isRequired,
-    leadership: VueTypes.number.isRequired,
-    commandName: VueTypes.string.isRequired,
-    currentCrewType: VueTypes.number.def(-1),
-    crew: VueTypes.number.def(0),
-    goldCoeff: VueTypes.number.isRequired,
-  },
-  emits: ["submitOutput", "update:amount"],
-  setup(props, { emit }) {
-    const amount = ref(0);
-
-    function beHalf() {
-      amount.value = Math.ceil(props.leadership * 0.5);
-    }
-
-    function beFilled() {
-      if (props.crewType.id == props.currentCrewType) {
-        amount.value = Math.max(1, props.leadership - Math.floor(props.crew / 100));
-      } else {
-        amount.value = props.leadership;
-      }
-    }
-
-    function beFull() {
-      amount.value = Math.floor(props.leadership * 1.2);
-    }
-
-    function doSubmit(e: Event) {
-      emit("submitOutput", e, amount.value, props.crewType.id);
-    }
-
-    beFilled();
-
-    return {
-      amount,
-      beHalf,
-      beFilled,
-      beFull,
-      doSubmit,
-    };
-  },
-  watch: {
-    amount(val: number) {
-      this.$emit("update:amount", val);
-    },
-  },
+const props = defineProps({
+  crewType: VueTypes.object.isRequired,
+  leadership: VueTypes.number.isRequired,
+  commandName: VueTypes.string.isRequired,
+  currentCrewType: VueTypes.number.def(-1),
+  crew: VueTypes.number.def(0),
+  goldCoeff: VueTypes.number.isRequired,
 });
+
+const emit = defineEmits<{
+  (event: "submitOutput", e: Event, amount: number, crewtypeID: number): void;
+  (event: "update:amount", value: number): void;
+}>();
+
+const amount = ref(0);
+
+function beHalf() {
+  amount.value = Math.ceil(props.leadership * 0.5);
+}
+
+function beFilled() {
+  if (props.crewType.id == props.currentCrewType) {
+    amount.value = Math.max(1, props.leadership - Math.floor(props.crew / 100));
+  } else {
+    amount.value = props.leadership;
+  }
+}
+
+function beFull() {
+  amount.value = Math.floor(props.leadership * 1.2);
+}
+
+function doSubmit(e: Event) {
+  emit("submitOutput", e, amount.value, props.crewType.id);
+}
+
+onMounted(() => {
+  beFilled();
+});
+
+
+watch(amount, (value) => {
+  emit("update:amount", value);
+});
+
 </script>
diff --git a/hwe/ts/processing/ProcessGeneralAmount.vue b/hwe/ts/processing/ProcessGeneralAmount.vue
index 3c9eac9c..51bd0abf 100644
--- a/hwe/ts/processing/ProcessGeneralAmount.vue
+++ b/hwe/ts/processing/ProcessGeneralAmount.vue
@@ -1,20 +1,12 @@
 <template>
-  <TopBackBar
-    v-model:searchable="searchable"
-    :title="commandName"
-    :type="procEntryMode"
-  />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" :type="procEntryMode" />
   <div class="bg0">
     <div v-if="commandName == '몰수'">
-      장수의 자금이나 군량을 몰수합니다.<br>
-      몰수한것은 국가재산으로 귀속됩니다.<br>
-    </div>
-    <div v-else-if="commandName == '포상'">
-      국고로 장수에게 자금이나 군량을 지급합니다.<br>
-    </div>
-    <div v-else-if="commandName == '증여'">
-      자신의 자금이나 군량을 다른 장수에게 증여합니다.<br>
+      장수의 자금이나 군량을 몰수합니다.<br />
+      몰수한것은 국가재산으로 귀속됩니다.<br />
     </div>
+    <div v-else-if="commandName == '포상'">국고로 장수에게 자금이나 군량을 지급합니다.<br /></div>
+    <div v-else-if="commandName == '증여'">자신의 자금이나 군량을 다른 장수에게 증여합니다.<br /></div>
     <div class="row">
       <div class="col-12 col-md-5">
         장수 :
@@ -29,49 +21,44 @@
       <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 :pressed="isGold" @click="isGold = true"> 금 </b-button>
+          <b-button :pressed="!isGold" @click="isGold = false"> 쌀 </b-button>
         </b-button-group>
       </div>
       <div class="col-7 col-md-4">
         금액 :
-        <SelectAmount
-          v-model="amount"
-          :amountGuide="amountGuide"
-          :maxAmount="maxAmount"
-          :minAmount="minAmount"
-        />
+        <SelectAmount v-model="amount" :amountGuide="amountGuide" :maxAmount="maxAmount" :minAmount="minAmount" />
       </div>
       <div class="col-3 col-md-2 d-grid">
-        <b-button
-          variant="primary"
-          @click="submit"
-        >
+        <b-button variant="primary" @click="submit">
           {{ commandName }}
         </b-button>
       </div>
     </div>
   </div>
-  <BottomBar
-    :title="commandName"
-    :type="procEntryMode"
-  />
+  <BottomBar :title="commandName" :type="procEntryMode" />
 </template>
 
 <script lang="ts">
+declare const procRes: {
+  distanceList: Record<number, number[]>;
+  cities: [number, string][];
+  generals: procGeneralRawItemList;
+  generalsKey: procGeneralKey[];
+  minAmount: number;
+  maxAmount: number;
+  amountGuide: number[];
+};
+
+declare const staticValues: {
+  commandName: string;
+  entryInfo: ["General" | "Nation", unknown];
+};
+</script>
+<script setup lang="ts">
 import SelectGeneral from "@/processing/SelectGeneral.vue";
 import SelectAmount from "@/processing/SelectAmount.vue";
-import { defineComponent, ref } from "vue";
+import { ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
@@ -84,84 +71,52 @@ import {
   type procGeneralRawItemList,
 } from "./processingRes";
 import { getNpcColor } from "@/common_legacy";
-declare const commandName: string;
-declare const entryInfo: ['General'|'Nation', unknown];
 
-declare const procRes: {
-  distanceList: Record<number, number[]>;
-  cities: [number, string][];
-  generals: procGeneralRawItemList;
-  generalsKey: procGeneralKey[];
-  minAmount: number;
-  maxAmount: number;
-  amountGuide: number[];
-};
+const citiesMap = ref(new Map<
+  number,
+  {
+    name: string;
+    info?: string;
+  }
+>());
+for (const [id, name] of procRes.cities) {
+  citiesMap.value.set(id, { name });
+}
 
-export default defineComponent({
-  components: {
-    SelectGeneral,
-    SelectAmount,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const citiesMap = new Map<
-      number,
-      {
-        name: string;
-        info?: string;
-      }
-    >();
-    for (const [id, name] of procRes.cities) {
-      citiesMap.set(id, { name });
-    }
+const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
+const amount = ref(1000);
+const isGold = ref(true);
 
-    const generalList = convertGeneralList(
-      procRes.generalsKey,
-      procRes.generals
-    );
-    const amount = ref(1000);
-    const isGold = ref(true);
+const selectedGeneralID = ref(generalList[0].no);
 
-    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} (금${unwrap(gen.gold).toLocaleString()}/쌀${unwrap(gen.rice).toLocaleString()}) (${gen.leadership}/${
+    gen.strength
+  }/${gen.intel})`;
+}
 
-    function textHelpGeneral(gen: procGeneralItem): string {
-      const nameColor = getNpcColor(gen.npc);
-      const name = nameColor
-        ? `<span style="color:${nameColor}">${gen.name}</span>`
-        : gen.name;
-      return `${name} (금${unwrap(gen.gold).toLocaleString()}/쌀${unwrap(gen.rice).toLocaleString()}) (${
-        gen.leadership
-      }/${gen.strength}/${gen.intel})`;
-    }
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      amount: amount.value,
+      isGold: isGold.value,
+      destGeneralID: selectedGeneralID.value,
+    },
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
 
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          amount: amount.value,
-          isGold: isGold.value,
-          destGeneralID: selectedGeneralID.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
+const { commandName,entryInfo } = staticValues;
+const searchable = getProcSearchable();
+
+const procEntryMode: "chief" | "normal" = entryInfo[0] == "Nation" ? "chief" : "normal";
+
+const {
+  minAmount,
+  maxAmount,
+  amountGuide
+} = procRes;
 
-    return {
-      procEntryMode: <'chief'|'normal'>(entryInfo[0] == 'Nation'?'chief':'normal'),
-      searchable: getProcSearchable(),
-      amount,
-      isGold,
-      selectedGeneralID,
-      citiesMap: ref(citiesMap),
-      distanceList: procRes.distanceList,
-      minAmount: ref(procRes.minAmount),
-      maxAmount: ref(procRes.maxAmount),
-      amountGuide: procRes.amountGuide,
-      generalList,
-      commandName,
-      textHelpGeneral,
-      submit,
-    };
-  },
-});
 </script>
diff --git a/hwe/ts/processing/SelectAmount.vue b/hwe/ts/processing/SelectAmount.vue
index f3d6efda..651e470c 100644
--- a/hwe/ts/processing/SelectAmount.vue
+++ b/hwe/ts/processing/SelectAmount.vue
@@ -32,29 +32,33 @@
     </b-button>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { ref, watch } from "vue";
 import VueTypes from "vue-types";
 
-export default defineComponent({
-  props: {
+const props = defineProps({
     modelValue: VueTypes.number.isRequired,
     minAmount: VueTypes.number.isRequired,
     maxAmount: VueTypes.number.isRequired,
     amountGuide: VueTypes.arrayOf(Number).def([1000, 2000, 5000, 10000]),
     step: VueTypes.number.def(1),
-  },
-  emits: ["update:modelValue"],
-  data() {
-    return {
-      amount: this.modelValue,
-    };
-  },
-  watch: {
-    amount(val: number) {
-      this.$emit("update:modelValue", val);
-    },
-  },
+  });
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: number): void;
+}>();
+
+const amount = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    amount.value = value;
+  }
+);
+
+watch(amount, (value) => {
+  emit("update:modelValue", value);
 });
 </script>