From 70401d95675dcb362e38863f8cd10144c0ad0da2 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Mon, 21 Mar 2022 00:56:41 +0900
Subject: [PATCH] =?UTF-8?q?feat(WIP):=20=ED=84=B4=20=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=EA=B8=B0=EB=A5=BC=20multiselect=EC=97=90=EC=84=9C=20modal=20fo?=
 =?UTF-8?q?rm=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/a_history.php                       |   8 +-
 hwe/b_diplomacy.php                     |   8 +-
 hwe/index.php                           |  19 +-
 hwe/recent_map.php                      |   6 +-
 hwe/ts/PartialReservedCommand.vue       | 764 +++++++++++-------------
 hwe/ts/components/CommandSelectForm.vue | 135 +++++
 hwe/ts/defs.ts                          |   2 +-
 hwe/ts/map.ts                           |   8 +-
 hwe/v_processing.php                    |  11 +-
 9 files changed, 521 insertions(+), 440 deletions(-)
 create mode 100644 hwe/ts/components/CommandSelectForm.vue

diff --git a/hwe/a_history.php b/hwe/a_history.php
index 1d8d9390..94473d95 100644
--- a/hwe/a_history.php
+++ b/hwe/a_history.php
@@ -203,9 +203,13 @@ $nations = $history['nations'];
             <td><?= banner() ?> </td>
         </tr>
     </table>
+    <?= WebUtil::printStaticValues([
+        'staticValues' => [
+            'serverNick' => DB::prefix(),
+            'serverID' => UniqueConst::$serverID,
+        ]
+    ])?>
     <script>
-        window.serverNick = '<?= DB::prefix() ?>';
-        window.serverID = '<?= UniqueConst::$serverID ?>';
         <?php if($isCurrent): ?>
         reloadWorldMap({
             showMe: false,
diff --git a/hwe/b_diplomacy.php b/hwe/b_diplomacy.php
index 7b54f766..3f84337e 100644
--- a/hwe/b_diplomacy.php
+++ b/hwe/b_diplomacy.php
@@ -98,9 +98,13 @@ $neutralStateCharMap = [
     <?= WebUtil::printCSS('css/map.css') ?>
     <?= WebUtil::printCSS('css/history.css') ?>
     <?= WebUtil::printDist('ts', ['common', 'map']) ?>
+    <?= WebUtil::printStaticValues([
+        'staticValues' => [
+            'serverNick' => DB::prefix(),
+            'serverID' => UniqueConst::$serverID
+        ],
+    ]) ?>
     <script>
-        window.serverNick = '<?= DB::prefix() ?>';
-        window.serverID = '<?= UniqueConst::$serverID ?>';
         $(function() {
 
             reloadWorldMap({
diff --git a/hwe/index.php b/hwe/index.php
index 269d28e4..fc6df238 100644
--- a/hwe/index.php
+++ b/hwe/index.php
@@ -126,19 +126,32 @@ if (!$otherTextInfo) {
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
     <?= WebUtil::printCSS('css/map.css') ?>
     <?= WebUtil::printStaticValues([
+        //deprecated, staticValues를 이용할 것
         'serverName' => $serverName,
         'serverCnt' => $serverCnt,
         'serverNick' => DB::prefix(),
         'serverID' => UniqueConst::$serverID,
         'maxTurn' => GameConst::$maxTurn,
         'maxPushTurn' => 12,
-        'commandList' => getCommandTable($generalObj),
         'serverNow' => TimeUtil::now(false),
-        'baseColor2' => GameConst::$basecolor2,
         'lastExecuted' => $gameStor->turntime,
         'isLocked' => $plock,
         'isTournamentActive' => $isTournamentActive,
-        'isBettingActive' => $isBettingActive
+        'isBettingActive' => $isBettingActive,
+        'staticValues' => [
+            'serverName' => $serverName,
+            'serverCnt' => $serverCnt,
+            'serverNick' => DB::prefix(),
+            'serverID' => UniqueConst::$serverID,
+            'maxTurn' => GameConst::$maxTurn,
+            'maxPushTurn' => 12,
+            'commandList' => getCommandTable($generalObj),
+            'serverNow' => TimeUtil::now(false),
+            'lastExecuted' => $gameStor->turntime,
+            'isLocked' => $plock,
+            'isTournamentActive' => $isTournamentActive,
+            'isBettingActive' => $isBettingActive
+        ]
     ]) ?>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
 </head>
diff --git a/hwe/recent_map.php b/hwe/recent_map.php
index c09f537c..8497e026 100644
--- a/hwe/recent_map.php
+++ b/hwe/recent_map.php
@@ -16,8 +16,10 @@ include "func.php";
     <title>최근 지도</title>
     <?= WebUtil::printJS('../d_shared/common_path.js') ?>
     <?= WebUtil::printStaticValues([
-        'serverNick' => DB::prefix(),
-        'serverID' => UniqueConst::$serverID
+        'staticValues' => [
+            'serverNick' => DB::prefix(),
+            'serverID' => UniqueConst::$serverID
+        ],
     ]) ?>
     <?= WebUtil::printJS('d_shared/base_map.js') ?>
 
diff --git a/hwe/ts/PartialReservedCommand.vue b/hwe/ts/PartialReservedCommand.vue
index 3b8358c2..a97aadce 100644
--- a/hwe/ts/PartialReservedCommand.vue
+++ b/hwe/ts/PartialReservedCommand.vue
@@ -6,26 +6,26 @@
 
     <div class="row gx-1">
       <div class="col d-grid">
-        <b-dropdown left text="턴 선택">
-          <b-dropdown-item @click="selectTurn()">해제</b-dropdown-item>
-          <b-dropdown-item @click="selectAll(true)">모든턴</b-dropdown-item>
-          <b-dropdown-item @click="selectStep(0, 2)">홀수턴</b-dropdown-item>
-          <b-dropdown-item @click="selectStep(1, 2)">짝수턴</b-dropdown-item>
-          <b-dropdown-divider></b-dropdown-divider>
+        <BDropdown left text="턴 선택">
+          <BDropdownItem @click="selectTurn()">해제</BDropdownItem>
+          <BDropdownItem @click="selectAll(true)">모든턴</BDropdownItem>
+          <BDropdownItem @click="selectStep(0, 2)">홀수턴</BDropdownItem>
+          <BDropdownItem @click="selectStep(1, 2)">짝수턴</BDropdownItem>
+          <BDropdownDivider></BDropdownDivider>
 
-          <b-dropdown-text v-for="spanIdx in [3, 4, 5, 6, 7]" :key="spanIdx">
-            {{ spanIdx }}턴 간격<br />
-            <b-button-group>
-              <b-button
+          <BDropdownText v-for="spanIdx in [3, 4, 5, 6, 7]" :key="spanIdx">
+            {{ spanIdx }}턴 간격
+            <br />
+            <BButtonGroup>
+              <BButton
                 class="ignoreMe"
                 v-for="beginIdx in spanIdx"
                 :key="beginIdx"
                 @click="selectStep(beginIdx - 1, spanIdx)"
-                >{{ beginIdx }}</b-button
-              >
-            </b-button-group>
-          </b-dropdown-text>
-        </b-dropdown>
+              >{{ beginIdx }}</BButton>
+            </BButtonGroup>
+          </BDropdownText>
+        </BDropdown>
       </div>
       <div
         class="col alert alert-primary m-0 p-0"
@@ -35,18 +35,15 @@
           justify-content: center;
           align-items: center;
         "
-      >
-        {{ serverNow }}
-      </div>
+      >{{ formatTime(serverNow, "HH:mm:ss") }}</div>
       <div class="col d-grid">
-        <b-dropdown right text="반복">
-          <b-dropdown-item
+        <BDropdown right text="반복">
+          <BDropdownItem
             v-for="turnIdx in maxPushTurn"
             :key="turnIdx"
             @click="repeatGeneralCommand(turnIdx)"
-            >{{ turnIdx }}턴
-          </b-dropdown-item>
-        </b-dropdown>
+          >{{ turnIdx }}턴</BDropdownItem>
+        </BDropdown>
       </div>
     </div>
 
@@ -56,8 +53,8 @@
         attribute="turnIdx"
         @dragStart="isDragToggle = true"
         @dragDone="
-          isDragToggle = false;
-          toggleTurn(...$event);
+  isDragToggle = false;
+toggleTurn(...$event);
         "
         v-slot="{ selected }"
       >
@@ -70,18 +67,17 @@
           :key="turnIdx"
           class="idx_pad center d-grid"
         >
-          <b-button
+          <BButton
             size="sm"
             :variant="
-              (isDragToggle && selected.has(`${turnIdx}`))?'light':
-              turnList.has(turnIdx)
-                ? 'info'
-                : turnList.size == 0 && prevTurnList.has(turnIdx)
-                ? 'success'
-                : 'primary'
+              (isDragToggle && selected.has(`${turnIdx}`)) ? 'light' :
+                turnList.has(turnIdx)
+                  ? 'info'
+                  : turnList.size == 0 && prevTurnList.has(turnIdx)
+                    ? 'success'
+                    : 'primary'
             "
-            >{{ turnIdx + 1 }}</b-button
-          >
+          >{{ turnIdx + 1 }}</BButton>
         </div>
       </DragSelect>
       <DragSelect
@@ -89,8 +85,8 @@
         attribute="turnIdx"
         @dragStart="isDragSingle = true"
         @dragDone="
-          isDragSingle = false;
-          selectTurn(...$event);
+  isDragSingle = false;
+selectTurn(...$event);
         "
         v-slot="{ selected }"
       >
@@ -131,9 +127,7 @@
             whiteSpace: 'nowrap',
             overflow: 'hidden',
           }"
-        >
-          {{ turnObj.time }}
-        </div>
+        >{{ turnObj.time }}</div>
       </div>
       <div :style="rowGridStyle">
         <div
@@ -157,130 +151,73 @@
     </div>
     <div class="row gx-1">
       <div class="col d-grid">
-        <b-dropdown right split text="당기기" @click="pullGeneralCommandSingle">
-          <b-dropdown-item
+        <BDropdown right split text="당기기" @click="pullGeneralCommandSingle">
+          <BDropdownItem
             v-for="turnIdx in maxPushTurn"
             :key="turnIdx"
             @click="pushGeneralCommand(-turnIdx)"
-            >{{ turnIdx }}턴
-          </b-dropdown-item>
-        </b-dropdown>
+          >{{ turnIdx }}턴</BDropdownItem>
+        </BDropdown>
       </div>
       <div class="col d-grid">
-        <b-dropdown right split text="미루기" @click="pushGeneralCommandSingle">
-          <b-dropdown-item
+        <BDropdown right split text="미루기" @click="pushGeneralCommandSingle">
+          <BDropdownItem
             v-for="turnIdx in maxPushTurn"
             :key="turnIdx"
             @click="pushGeneralCommand(turnIdx)"
-            >{{ turnIdx }}턴
-          </b-dropdown-item>
-        </b-dropdown>
+          >{{ turnIdx }}턴</BDropdownItem>
+        </BDropdown>
       </div>
       <div class="col d-grid">
-        <b-button @click="toggleViewMaxTurn">{{
-          flippedMaxTurn == viewMaxTurn ? "펼치기" : "접기"
-        }}</b-button>
+        <BButton @click="toggleViewMaxTurn">
+          {{
+            flippedMaxTurn == viewMaxTurn ? "펼치기" : "접기"
+          }}
+        </BButton>
       </div>
     </div>
     <div class="row gx-0">
-      <div class="col-2 d-grid">
-        <b-button
-          :pressed="searchModeOn"
-          @click="toggleSearchCommand()"
-          :variant="searchModeOn ? 'info' : 'primary'"
-          v-b-tooltip.hover
-          title="검색 기능을 활성화합니다."
-          ><i class="bi bi-search"></i
-        ></b-button>
-      </div>
+      <div class="col-2 d-grid"></div>
       <div class="col-7">
-        <v-multiselect
-          v-model="selectedCommand"
-          :allow-empty="false"
-          :options="commandList"
-          :group-select="false"
-          group-values="values"
-          group-label="category"
-          label="searchText"
-          track-by="value"
-          open-direction="top"
-          :show-labels="false"
-          selectLabel="선택(엔터)"
-          selectGroupLabel=""
-          selectedLabel="선택됨"
-          deselectLabel="해제(엔터)"
-          deselectGroupLabel=""
-          placeholder="턴 선택"
-          :maxHeight="400"
-          :searchable="searchModeOn"
-        >
-          <template v-slot:noResult>검색 결과가 없습니다.</template>
-          <template v-slot:option="props"
-            ><!--FIXME: 카테고리-->
-            <template v-if="props.option.title">
-              <span
-                class="compensatePositive"
-                v-if="props.option.compensation > 0"
-                >▲</span
-              >
-              <span
-                class="compensateNegative"
-                v-else-if="props.option.compensation < 0"
-                >▼</span
-              >
-              <span class="compensateNeutral" v-else></span>
-              <span :class="[props.option.possible ? '' : 'commandImpossible']">
-                {{ props.option.title }}
-              </span>
-            </template>
-            <template v-else-if="props.option.category">
-              {{ props.option.category }}
-            </template>
-          </template>
-          <template v-slot:singleLabel="props">
-            {{ props.option.simpleName }}
-          </template>
-        </v-multiselect>
+        <BButton @click="commandSelectForm?.show()">{{ selectedCommand.title }}</BButton>
       </div>
       <div class="col-3 d-grid">
-        <b-button @click="reserveCommand()" variant="primary">실행</b-button>
+        <BButton @click="reserveCommand()" variant="primary">실행</BButton>
       </div>
     </div>
   </div>
+  <CommandSelectForm :commandList="commandList" ref="commandSelectForm" @on-close="chooseCommand($event)" />
 </template>
 
 <script lang="ts">
+declare const staticValues: {
+  maxTurn: number,
+  maxPushTurn: number,
+  commandList: {
+    category: string;
+    values: CommandItem[];
+  }[],
+  serverNow: string,
+}
+</script>
+
+<script lang="ts" setup>
 import addMilliseconds from "date-fns/esm/addMilliseconds";
 import addMinutes from "date-fns/esm/addMinutes";
 import { isString, range } from "lodash";
 import { stringifyUrl } from "query-string";
-import { defineComponent, ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { formatTime } from "@util/formatTime";
 import { joinYearMonth } from "@util/joinYearMonth";
 import { mb_strwidth } from "@util/mb_strwidth";
 import { parseTime } from "@util/parseTime";
 import { parseYearMonth } from "@util/parseYearMonth";
-import { convertSearch초성 } from "./util/convertSearch초성";
 import DragSelect from "@/components/DragSelect.vue";
 import { SammoAPI } from "./SammoAPI";
+import type { CommandItem } from "@/defs";
+import CommandSelectForm from "@/components/CommandSelectForm.vue";
+import { BButton, BButtonGroup, BDropdownItem, BDropdown, BDropdownText, BDropdownDivider } from "bootstrap-vue-3";
 
-type commandItem = {
-  value: string;
-  title: string;
-  compensation: number;
-  simpleName: string;
-  possible: boolean;
-  reqArg: boolean;
-  searchText?: string;
-};
-
-declare const maxTurn: number;
-declare const maxPushTurn: number;
-declare const commandList: {
-  category: string;
-  values: commandItem[];
-}[];
-declare const serverNow: string;
 type TurnObj = {
   action: string;
   brief: string;
@@ -306,7 +243,21 @@ type ReservedCommandResponse = {
   autorun_limit: null | number;
 };
 
+
+const {
+  maxTurn,
+  maxPushTurn,
+  commandList,
+} = staticValues;
+
+
 const listReqArgCommand = new Set<string>();
+const serverNow = ref(parseTime(staticValues.serverNow));
+const clientNow = ref(new Date());
+const timeDiff = ref(serverNow.value.getTime() - clientNow.value.getTime());
+const selectedCommand = ref(staticValues.commandList[0].values[0]);
+const commandSelectForm = ref<InstanceType<typeof CommandSelectForm> | null>(null);
+
 for (const commandCategories of commandList) {
   if (!commandCategories.values) {
     continue;
@@ -336,307 +287,268 @@ function isDropdownChildren(e?: Event): boolean {
   return false;
 }
 
-const searchModeKey = `sammo_searchModeOn`;
 
-export default defineComponent({
-  name: "PartialReservedCommand",
-  components: {
-    DragSelect,
-  },
-  methods: {
-    updateNow() {
-      const serverNow = addMilliseconds(new Date(), this.timeDiff);
-      this.serverNow = formatTime(serverNow, "HH:mm:ss");
-      setTimeout(() => {
-        this.updateNow();
-      }, 1000 - serverNow.getMilliseconds());
-    },
-    toggleTurn(...turnList: number[] | string[]) {
-      for (let turnIdx of turnList) {
-        if (isString(turnIdx)) {
-          turnIdx = parseInt(turnIdx);
-        }
-        if (this.turnList.has(turnIdx)) {
-          this.turnList.delete(turnIdx);
-        } else {
-          this.turnList.add(turnIdx);
-        }
-      }
-    },
-    selectTurn(...turnList: number[] | string[]) {
-      this.turnList.clear();
-      for (const turnIdx of turnList) {
-        if (isString(turnIdx)) {
-          this.turnList.add(parseInt(turnIdx));
-        } else {
-          this.turnList.add(turnIdx);
-        }
-      }
-    },
-    selectAll(e: Event | true) {
-      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-      if (e !== true && isDropdownChildren(e)) {
-        return;
-      }
+setTimeout(() => {
+  updateNow();
+}, 1000 - serverNow.value.getMilliseconds());
 
-      if (this.turnList.size * 3 > this.maxTurn) {
-        this.turnList.clear();
-      } else {
-        for (let i = 0; i < this.maxTurn; i++) {
-          this.turnList.add(i);
-        }
-      }
-    },
-    selectStep(begin: number, step: number) {
-      this.turnList.clear();
-      for (const idx of range(0, maxTurn)) {
-        if ((idx - begin) % step == 0) {
-          this.turnList.add(idx);
-        }
-      }
-    },
-    toggleViewMaxTurn() {
-      if (this.viewMaxTurn == this.flippedMaxTurn) {
-        this.viewMaxTurn = this.maxTurn;
-      } else {
-        this.viewMaxTurn = this.flippedMaxTurn;
-      }
-    },
-    async repeatGeneralCommand(amount: number) {
-      try {
-        await SammoAPI.Command.RepeatCommand({ amount });
-      } catch (e) {
-        console.error(e);
-        alert(`실패했습니다: ${e}`);
-        return;
-      }
-      await this.reloadCommandList();
-    },
-    async pushGeneralCommand(amount: number) {
-      try {
-        await SammoAPI.Command.PushCommand({ amount });
-      } catch (e) {
-        console.error(e);
-        alert(`실패했습니다: ${e}`);
-        return;
-      }
-      await this.reloadCommandList();
-    },
-    pushGeneralCommandSingle(e: Event) {
-      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-      if (isDropdownChildren(e)) {
-        return;
-      }
-      void this.pushGeneralCommand(1);
-    },
-    pullGeneralCommandSingle(e: Event) {
-      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-      if (isDropdownChildren(e)) {
-        return;
-      }
-      void this.pushGeneralCommand(-1);
-    },
-    async reloadCommandList() {
-      let result: ReservedCommandResponse;
-      try {
-        result = await SammoAPI.Command.GetReservedCommand();
-      } catch (e) {
-        console.error(e);
-        alert(`실패했습니다: ${e}`);
-        return;
-      }
 
-      const reservedCommandList: TurnObjWithTime[] = [];
-      let yearMonth = joinYearMonth(result.year, result.month);
-
-      const turnTime = parseTime(result.turnTime);
-      let nextTurnTime = new Date(turnTime);
-
-      const autorunLimitYearMonth = result.autorun_limit ?? yearMonth - 1;
-      const [autorunLimitYear, autorunLimitMonth] = parseYearMonth(
-        autorunLimitYearMonth
-      );
-
-      for (const obj of result.turn) {
-        const [year, month] = parseYearMonth(yearMonth);
-        let tooltip: string[] = [];
-        let style: Record<string, unknown> = {};
-
-        const brief = obj.brief;
-
-        if (yearMonth <= autorunLimitYearMonth) {
-          if (obj.brief == "휴식") {
-            obj.brief = "휴식<small>(자율 행동)</small>";
-          }
-          style.color = "#aaffff";
-
-          tooltip.push(
-            `자율 행동 기간: ${autorunLimitYear}년 ${autorunLimitMonth}월까지`
-          );
-        }
-
-        if (mb_strwidth(brief) > 22) {
-          tooltip.push(brief);
-        }
-
-        reservedCommandList.push({
-          ...obj,
-          year,
-          month,
-          time: formatTime(nextTurnTime, "HH:mm"),
-          tooltip: tooltip.length == 0 ? undefined : tooltip.join("\n"),
-          style,
-        });
-
-        yearMonth += 1;
-        nextTurnTime = addMinutes(nextTurnTime, result.turnTerm);
-      }
-      this.reservedCommandList = reservedCommandList;
-
-      const serverNowObj = parseTime(result.date);
-      const clientNowObj = new Date();
-      const timeDiff = serverNowObj.getTime() - clientNowObj.getTime();
-      this.timeDiff = timeDiff;
-    },
-    async reserveCommand() {
-      let turnList: number[];
-      if (this.turnList.size == 0) {
-        turnList = Array.from(this.prevTurnList.values());
-      } else {
-        turnList = Array.from(this.turnList.values());
-      }
-
-      if (turnList.length == 0) {
-        turnList.push(0);
-      }
-
-      const commandName = this.selectedCommand.value;
-
-      if (listReqArgCommand.has(commandName)) {
-        document.location.href = stringifyUrl({
-          url: "v_processing.php",
-          query: {
-            command: commandName,
-            turnList: turnList.join("_"),
-          },
-        });
-        return;
-      }
-
-      try {
-        await SammoAPI.Command.ReserveCommand({
-          turnList,
-          action: commandName,
-        });
-
-        if (this.turnList.size > 0) {
-          this.prevTurnList.clear();
-          for (const v of this.turnList) {
-            this.prevTurnList.add(v);
-          }
-          this.turnList.clear();
-        }
-      } catch (e) {
-        console.error(e);
-        alert(`실패했습니다: ${e}`);
-        return;
-      }
-      await this.reloadCommandList();
-    },
-    toggleSearchCommand() {
-      const searchModeOn = !this.searchModeOn;
-      this.searchModeOn = searchModeOn;
-      localStorage.setItem(searchModeKey, searchModeOn ? "1" : "0");
-    },
-    chooseCommand(val: string){
-      this.selectedCommand = this.invCommandMap[val];
-    }
-  },
-  data() {
-    const serverNowObj = parseTime(serverNow);
-    const clientNowObj = new Date();
-    const timeDiff = serverNowObj.getTime() - clientNowObj.getTime();
-
-    setTimeout(() => {
-      this.updateNow();
-    }, 1000 - serverNowObj.getMilliseconds());
-
-    const selectedCommand = commandList[0].values[0];
-    for (const subCategory of commandList) {
-      for (const command of subCategory.values) {
-        if (command.searchText) {
-          continue;
-        }
-        command.searchText = convertSearch초성(command.simpleName).join("|");
-      }
-    }
-
-    const searchModeOn = (localStorage.getItem(searchModeKey) ?? "0") != "0";
-
-    const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
-      length: maxTurn,
-    }).fill({
-      arg: null,
-      brief: "",
-      action: "",
-      year: undefined,
-      month: undefined,
-      time: "",
-    });
-
-    const prevTurnList = new Set([0]);
-    const turnList = new Set<number>();
-
-    return {
-      maxTurn,
-
-      maxPushTurn,
-      commandList,
-      serverNow: formatTime(serverNowObj, "HH:mm:ss"),
-      timeDiff,
-      prevTurnList,
-      turnList,
-      selectedCommand,
-      reservedCommandList: emptyTurn,
-      autorun_limit: null as null | number,
-      searchModeOn,
-    };
-  },
-  setup() {
-    const flippedMaxTurn = 15;
-    const viewMaxTurn = ref(flippedMaxTurn);
-    const rowGridStyle = ref({
-      display: "grid",
-      gridTemplateRows: `repeat(${viewMaxTurn.value}, 29.4px)`,
-    });
-
-    watch(viewMaxTurn, (val) => {
-      rowGridStyle.value.gridTemplateRows = `repeat(${val}, 29.4px)`;
-    });
-
-    const isDragSingle = ref(false);
-    const isDragToggle = ref(false);
-
-    const invCommandMap: Record<string, commandItem> = {};
-    for(const category of commandList){
-      for(const command of category.values){
-        invCommandMap[command.value] = command;
-      }
-    }
-
-    return {
-      isDragSingle,
-      isDragToggle,
-      flippedMaxTurn,
-      viewMaxTurn,
-      rowGridStyle,
-      invCommandMap,
-    };
-  },
-  mounted() {
-    void this.reloadCommandList();
-  },
+const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
+  length: staticValues.maxTurn,
+}).fill({
+  arg: null,
+  brief: "",
+  action: "",
+  year: undefined,
+  month: undefined,
+  time: "",
 });
+
+const prevTurnList = ref(new Set([0]));
+const turnList = ref(new Set<number>());
+const reservedCommandList = ref(emptyTurn);
+
+const flippedMaxTurn = 15;
+const viewMaxTurn = ref(flippedMaxTurn);
+const rowGridStyle = ref({
+  display: "grid",
+  gridTemplateRows: `repeat(${viewMaxTurn.value}, 29.4px)`,
+});
+
+watch(viewMaxTurn, (val) => {
+  rowGridStyle.value.gridTemplateRows = `repeat(${val}, 29.4px)`;
+});
+
+const isDragSingle = ref(false);
+const isDragToggle = ref(false);
+
+const invCommandMap: Record<string, CommandItem> = {};
+for (const category of commandList) {
+  for (const command of category.values) {
+    invCommandMap[command.value] = command;
+  }
+}
+
+
+function updateNow() {
+  serverNow.value = addMilliseconds(new Date(), timeDiff.value);
+  setTimeout(() => {
+    updateNow();
+  }, 1000 - serverNow.value.getMilliseconds());
+}
+
+function toggleTurn(...reqTurnList: number[] | string[]) {
+  for (let turnIdx of reqTurnList) {
+    if (isString(turnIdx)) {
+      turnIdx = parseInt(turnIdx);
+    }
+    if (turnList.value.has(turnIdx)) {
+      turnList.value.delete(turnIdx);
+    } else {
+      turnList.value.add(turnIdx);
+    }
+  }
+}
+
+function selectTurn(...reqTurnList: number[] | string[]) {
+  turnList.value.clear();
+  for (const turnIdx of reqTurnList) {
+    if (isString(turnIdx)) {
+      turnList.value.add(parseInt(turnIdx));
+    } else {
+      turnList.value.add(turnIdx);
+    }
+  }
+}
+
+function selectAll(e: Event | true) {
+  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+  if (e !== true && isDropdownChildren(e)) {
+    return;
+  }
+
+  if (turnList.value.size * 3 > maxTurn) {
+    turnList.value.clear();
+  } else {
+    for (let i = 0; i < maxTurn; i++) {
+      turnList.value.add(i);
+    }
+  }
+}
+
+function selectStep(begin: number, step: number) {
+  turnList.value.clear();
+  for (const idx of range(0, maxTurn)) {
+    if ((idx - begin) % step == 0) {
+      turnList.value.add(idx);
+    }
+  }
+}
+
+function toggleViewMaxTurn() {
+  if (viewMaxTurn.value == flippedMaxTurn) {
+    viewMaxTurn.value = maxTurn;
+  } else {
+    viewMaxTurn.value = flippedMaxTurn;
+  }
+}
+
+async function repeatGeneralCommand(amount: number) {
+  try {
+    await SammoAPI.Command.RepeatCommand({ amount });
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다: ${e}`);
+    return;
+  }
+  await reloadCommandList();
+}
+
+async function pushGeneralCommand(amount: number) {
+  try {
+    await SammoAPI.Command.PushCommand({ amount });
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다: ${e}`);
+    return;
+  }
+  await reloadCommandList();
+}
+
+function pushGeneralCommandSingle(e: Event) {
+  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+  if (isDropdownChildren(e)) {
+    return;
+  }
+  void pushGeneralCommand(1);
+}
+
+function pullGeneralCommandSingle(e: Event) {
+  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+  if (isDropdownChildren(e)) {
+    return;
+  }
+  void pushGeneralCommand(-1);
+}
+
+async function reloadCommandList() {
+  let result: ReservedCommandResponse;
+  try {
+    result = await SammoAPI.Command.GetReservedCommand();
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다: ${e}`);
+    return;
+  }
+
+  let yearMonth = joinYearMonth(result.year, result.month);
+
+  const turnTime = parseTime(result.turnTime);
+  let nextTurnTime = new Date(turnTime);
+
+  const autorunLimitYearMonth = result.autorun_limit ?? yearMonth - 1;
+  const [autorunLimitYear, autorunLimitMonth] = parseYearMonth(
+    autorunLimitYearMonth
+  );
+
+  reservedCommandList.value = [];
+  for (const obj of result.turn) {
+    const [year, month] = parseYearMonth(yearMonth);
+    let tooltip: string[] = [];
+    let style: Record<string, unknown> = {};
+
+    const brief = obj.brief;
+
+    if (yearMonth <= autorunLimitYearMonth) {
+      if (obj.brief == "휴식") {
+        obj.brief = "휴식<small>(자율 행동)</small>";
+      }
+      style.color = "#aaffff";
+
+      tooltip.push(
+        `자율 행동 기간: ${autorunLimitYear}년 ${autorunLimitMonth}월까지`
+      );
+    }
+
+    if (mb_strwidth(brief) > 22) {
+      tooltip.push(brief);
+    }
+
+    reservedCommandList.value.push({
+      ...obj,
+      year,
+      month,
+      time: formatTime(nextTurnTime, "HH:mm"),
+      tooltip: tooltip.length == 0 ? undefined : tooltip.join("\n"),
+      style,
+    });
+
+    yearMonth += 1;
+    nextTurnTime = addMinutes(nextTurnTime, result.turnTerm);
+  }
+
+  serverNow.value = parseTime(result.date);
+  clientNow.value = new Date();
+  timeDiff.value = serverNow.value.getTime() - clientNow.value.getTime();
+}
+
+async function reserveCommand() {
+  let reqTurnList: number[];
+  if (turnList.value.size == 0) {
+    reqTurnList = Array.from(prevTurnList.value.values());
+  } else {
+    reqTurnList = Array.from(turnList.value.values());
+  }
+
+  if (reqTurnList.length == 0) {
+    reqTurnList.push(0);
+  }
+
+  const commandName = selectedCommand.value.value;
+
+  if (listReqArgCommand.has(commandName)) {
+    document.location.href = stringifyUrl({
+      url: "v_processing.php",
+      query: {
+        command: commandName,
+        turnList: reqTurnList.join("_"),
+      },
+    });
+    return;
+  }
+
+  try {
+    await SammoAPI.Command.ReserveCommand({
+      turnList,
+      action: commandName,
+    });
+
+    if (turnList.value.size > 0) {
+      prevTurnList.value.clear();
+      for (const v of turnList.value) {
+        prevTurnList.value.add(v);
+      }
+      turnList.value.clear();
+    }
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다: ${e}`);
+    return;
+  }
+  await reloadCommandList();
+}
+
+function chooseCommand(val?: string) {
+  if(!val){
+    return;
+  }
+  selectedCommand.value = invCommandMap[val];
+}
+
+onMounted(() => {
+  void reloadCommandList();
+});
+
 </script>
 <style lang="scss">
 @use "sass:color";
diff --git a/hwe/ts/components/CommandSelectForm.vue b/hwe/ts/components/CommandSelectForm.vue
new file mode 100644
index 00000000..7bd2055a
--- /dev/null
+++ b/hwe/ts/components/CommandSelectForm.vue
@@ -0,0 +1,135 @@
+<template>
+    <teleport to="body">
+        <div v-if="showForm">
+            <div class="commandCategory">
+                <div
+                    class="categoryItem"
+                    v-for="[categoryKey, { deco: categoryDeco }] of commandList"
+                    :key="categoryKey"
+                ><BButton @click="chosenCategory=categoryKey">{{ categoryDeco.altName ?? categoryDeco.name }}</BButton></div>
+            </div>
+            <div class="commandList">
+                <div
+                    class="commandItem"
+                    v-for="commandItem of chosenSubList"
+                    :key="commandItem.value"
+                    @click="close(commandItem.value)"
+                >
+                    {{ commandItem.simpleName }}
+                    <br />
+                    <small>{{ commandItem.title }}</small>
+                </div>
+            </div>
+            <div class="commandBottom">
+                <BButton @click="close()">닫기</BButton>
+            </div>
+        </div>
+    </teleport>
+</template>
+<script setup lang="ts">
+/*
+            <template v-if="props.option.title">
+              <span class="compensatePositive" v-if="props.option.compensation > 0">▲</span>
+              <span class="compensateNegative" v-else-if="props.option.compensation < 0">▼</span>
+              <span class="compensateNeutral" v-else></span>
+              <span
+                :class="[props.option.possible ? '' : 'commandImpossible']"
+              >{{ props.option.title }}</span>
+            </template>
+            <template v-else-if="props.option.category">{{ props.option.category }}</template>
+          </template>
+          <template v-slot:singleLabel="props">{{ props.option.simpleName }}</template>
+ */
+import type { CommandItem } from "@/defs";
+import { BButton } from "bootstrap-vue-3";
+import { ref, defineProps, defineEmits, defineExpose, type PropType, watch } from "vue";
+
+const chosenCategory = ref<string>("");
+const chosenSubList = ref<CommandItem[]>([]);
+
+interface CategoryDecoration {
+    name: string,
+    altName?: string,
+    //icon?: string,
+    //color?: string,
+    //backgroundColor?: string,
+}
+
+const props = defineProps({
+    categoryInfo: {
+        type: Object as PropType<Record<string, Omit<CategoryDecoration, 'name'>>>,
+        required: false,
+    },
+    commandList: {
+        type: Object as PropType<{
+            category: string;
+            values: CommandItem[];
+        }[]>,
+        required: true,
+    }
+})
+
+const showForm = ref(false);
+
+function convCategoryDeco(category: string): CategoryDecoration {
+    const itemInfo = props.categoryInfo?.[category];
+    if (!itemInfo) {
+        return {
+            name: category,
+        }
+    }
+    return {
+        name: category,
+        ...itemInfo
+    };
+}
+
+
+
+const commandList = ref(new Map<string, {
+    deco: CategoryDecoration,
+    values: CommandItem[],
+}>());
+
+function updateCommandList(rawCommandList: typeof props.commandList) {
+    commandList.value.clear();
+    for (const { category, values } of rawCommandList) {
+        commandList.value.set(category, {
+            deco: convCategoryDeco(category),
+            values
+        });
+    }
+}
+
+watch(() => props.commandList, updateCommandList);
+updateCommandList(props.commandList);
+
+watch(chosenCategory, (category) => {
+    console.log('sel', category);
+    const itemInfo = commandList.value?.get(category);
+    if (itemInfo === undefined) {
+        console.error(`category 없음: ${category}`);
+        return;
+    }
+    chosenSubList.value = itemInfo.values;
+});
+
+function show(): void {
+    showForm.value = true;
+}
+
+function close(category?: string): void {
+    showForm.value = false;
+    emits('onClose', category);
+}
+
+const emits = defineEmits<{
+    (event: 'onClose', command?: string): void,
+}>();
+
+defineExpose({
+    show,
+    close
+})
+
+</script>
\ No newline at end of file
diff --git a/hwe/ts/defs.ts b/hwe/ts/defs.ts
index 870a0e9c..0189051e 100644
--- a/hwe/ts/defs.ts
+++ b/hwe/ts/defs.ts
@@ -250,4 +250,4 @@ export type BettingInfo = {
     closeYearMonth: number;
     candidates: SelectItem[];
     winner?: number[];
-}
\ No newline at end of file
+}
diff --git a/hwe/ts/map.ts b/hwe/ts/map.ts
index 614ba5fc..405fd698 100644
--- a/hwe/ts/map.ts
+++ b/hwe/ts/map.ts
@@ -9,8 +9,12 @@ import { exportWindow } from '@util/exportWindow';
 import { htmlReady } from './util/htmlReady';
 import { initTooltip } from './legacy/initTooltip';
 
-declare const serverNick: string;
-declare const serverID: string;
+declare const staticValues: {
+    serverNick: string;
+    serverID: string;
+}
+
+const { serverNick, serverID } = staticValues;
 
 type CityPositionMap = {
     [cityID: number]: [string, number, number];
diff --git a/hwe/v_processing.php b/hwe/v_processing.php
index e577fc53..cfe3db1c 100644
--- a/hwe/v_processing.php
+++ b/hwe/v_processing.php
@@ -76,8 +76,15 @@ if (!$commandObj->hasPermissionToReserve()) {
     <?= WebUtil::printJS('../d_shared/common_path.js') ?>
     <?= WebUtil::printJS('d_shared/base_map.js') ?>
     <?= WebUtil::printStaticValues([
-        'serverNick' => DB::prefix(),
-        'serverID' => UniqueConst::$serverID,
+        'staticValues' => [
+            'serverNick' => DB::prefix(),
+            'serverID' => UniqueConst::$serverID,
+            'commandName' => $commandObj->getName(),
+            'turnList' => $turnList,
+            'currentCity' => $general->getCityID(),
+            'currentNation' => $general->getNationID(),
+            'entryInfo' => [$isChiefTurn?'Nation':'General', $commandType]
+        ],
         'commandName' => $commandObj->getName(),
         'turnList' => $turnList,
         'currentCity' => $general->getCityID(),