feat(in-progress): 턴 조작기를 vue로 분리

hwe/ts/ReservedCommand.vue

@@ -0,0 +1,239 @@
+<template>
+  <table width="300" class="tb_layout b2">
+    <thead>
+      <tr height="24">
+        <td colspan="4" class="center bg0">
+          <strong>- 명령 목록 - </strong
+          ><input
+            :value="serverNow"
+            type="text"
+            id="clock"
+            size="19"
+            style="background-color: black; color: white; border-style: none"
+          />
+        </td>
+      </tr>
+      <tr>
+        <td colspan="4">
+          <div class="row gx-1">
+            <div class="col d-grid">
+              <b-dropdown right split text="당기기">
+                <b-dropdown-item v-for="turnIdx in maxPushTurn" :key="turnIdx"
+                  >{{ turnIdx }}턴
+                </b-dropdown-item>
+              </b-dropdown>
+            </div>
+            <div class="col d-grid">
+              <b-dropdown right split @click="selectAll" text="전체선택">
+                <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>
+
+                <b-dropdown-text
+                  v-for="spanIdx in [3, 4, 5, 6, 7]"
+                  :key="spanIdx"
+                >
+                  {{ spanIdx }}턴 간격<br />
+                  <b-button-group>
+                    <b-button
+                      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>
+            </div>
+            <div class="col d-grid">
+              <b-dropdown right text="반복">
+                <b-dropdown-item v-for="turnIdx in maxPushTurn" :key="turnIdx"
+                  >{{ turnIdx }}턴
+                </b-dropdown-item>
+              </b-dropdown>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </thead>
+    <tbody class="center" style="font-weight: bold">
+      <tr
+        v-for="turnIdx in Math.min(maxTurn, viewMaxTurn)"
+        :key="turnIdx"
+        height="28"
+        :id="`command_${turnIdx - 1}`"
+        :class="pressed[turnIdx - 1] ? 'pressed' : ''"
+      >
+        <td width="32" class="idx_pad center bg0 d-grid" @click="clickTurn(turnIdx - 1)">
+          <b-button
+            size="sm"
+            :variant="pressed[turnIdx - 1] ? 'info' : 'primary'"
+            >{{ turnIdx }}</b-button
+          >
+        </td>
+        <td @click="clickTurn(turnIdx - 1)"
+          height="24"
+          class="month_pad center bg1"
+          style="min-width: 70px; white-space: nowrap; overflow: hidden"
+        ></td>
+        <td @click="clickTurn(turnIdx - 1)"
+          width="38"
+          class="time_pad center"
+          style="background-color: black; white-space: nowrap; overflow: hidden"
+        ></td>
+        <td width="160" class="turn_pad center bg2">
+          <span class="turn_text"></span>
+        </td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td colspan="4">
+          <div class="row gx-1">
+            <div class="col-4 d-grid">
+              <b-dropdown right split text="미루기">
+                <b-dropdown-item v-for="turnIdx in maxPushTurn" :key="turnIdx"
+                  >{{ turnIdx }}턴
+                </b-dropdown-item>
+              </b-dropdown>
+            </div>
+            <div class="col-8 d-grid"><b-button @click="toggleViewMaxTurn">{{flippedMaxTurn==viewMaxTurn?'펼치기':'접기'}}</b-button></div>
+          </div>
+        </td>
+      </tr>
+    </tfoot>
+  </table>
+  <div class="row gx-0">
+      <div class="col-10 d-grid">
+    <b-form-select v-model="selectedCommand"
+      ><b-form-select-option-group
+        v-for="cgroup in commandList"
+        :key="cgroup['category']"
+        :label="cgroup['category']"
+      ><b-form-select-option v-for="(citem, ckey) in cgroup['values']" :value="ckey" :key="ckey">{{citem.title}}{{citem.possible?'':'(불가)'}}</b-form-select-option>
+      </b-form-select-option-group
+    ></b-form-select></div>
+    <div class="col-2 d-grid">
+    <b-button>실행</b-button></div>
+  </div>
+</template>
+
+<script lang="ts">
+import addMilliseconds from "date-fns/esm/addMilliseconds/index.js";
+import { range } from "lodash";
+import { defineComponent, ref } from "vue";
+import { formatTime } from "./util/formatTime";
+import { parseTime } from "./util/parseTime";
+
+type commandItem = {
+  title: string;
+  compensation: number;
+  possible: boolean;
+};
+
+declare const maxTurn: number;
+declare const maxPushTurn: number;
+declare const commandList: {
+  category: string;
+  values: Record<string, commandItem>[];
+}[];
+declare const serverNow: string;
+
+export default defineComponent({
+  name: "ReservedCommand",
+
+  methods: {
+    updateNow() {
+      const clientNow = addMilliseconds(new Date(), this.timeDiff);
+      this.serverNow = formatTime(clientNow, false);
+      setTimeout(() => {
+        this.updateNow();
+      }, 250);
+    },
+    clickTurn(turnIdx: number) {
+      this.pressed[turnIdx] = !this.pressed[turnIdx];
+    },
+    selectAll(e: Event | true) {
+      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+      if (e !== true) {
+        if (!e.target) {
+          return;
+        }
+        if (
+          (e.target as HTMLElement).classList.contains("dropdown-item") ||
+          (e.target as HTMLElement).classList.contains(
+            "dropdown-toggle-split"
+          ) ||
+          (e.target as HTMLElement).classList.contains("ignoreMe")
+        ) {
+          return;
+        }
+      }
+
+      let pressedCnt = 0;
+      for (const pressed of this.pressed) {
+        if (pressed) {
+          pressedCnt += 1;
+        }
+      }
+
+      if (pressedCnt * 3 > this.maxTurn) {
+        this.pressed.fill(false);
+      } else {
+        this.pressed.fill(true);
+      }
+    },
+    selectStep(begin: number, step: number) {
+      for (const idx of range(0, maxTurn)) {
+        if ((idx - begin) % step == 0) {
+          this.pressed[idx] = true;
+        } else {
+          this.pressed[idx] = false;
+        }
+      }
+    },
+    toggleViewMaxTurn(){
+        if(this.viewMaxTurn == this.flippedMaxTurn){
+            this.viewMaxTurn = this.maxTurn;
+        }
+        else{
+            this.viewMaxTurn = this.flippedMaxTurn;
+        }
+    }
+  },
+  data() {
+    const serverNowObj = parseTime(serverNow);
+    const clientNowObj = new Date();
+    const timeDiff = serverNowObj.getTime() - clientNowObj.getTime();
+
+    setTimeout(() => {
+      this.updateNow();
+    }, 250);
+
+    const pressed = Array.from<boolean>({ length: maxTurn }).fill(false);
+    pressed[0] = true;
+
+    const selectedCommand = ref<string>("휴식");
+
+    return {
+      maxTurn,
+      flippedMaxTurn: 18,
+      viewMaxTurn: 18,
+      maxPushTurn,
+      commandList,
+      serverNow,
+      timeDiff,
+      pressed,
+      selectedCommand,
+    };
+  },
+});
+</script>

hwe/ts/build_exports.json

@@ -13,7 +13,6 @@
         "bossInfo": "bossInfo.ts",
         "myPage": "myPage.ts",
         "extExpandCity": "extExpandCity.ts",
-        "main": "main.ts",
         "dipcenter": "dipcenter.ts",
         "diplomacy": "diplomacy.ts",
         "currentCity": "currentCity.ts",
@@ -21,12 +20,14 @@
         "history": "history.ts",
         "select_general_from_pool": "select_general_from_pool.ts",
         "extKingdoms": "extKingdoms.ts",
-        "common": "common_deprecated.ts"
+        "common": "common_deprecated.ts",
+        "main": "main.ts"
     },
     "ingame_vue": {
         "v_inheritPoint": "v_inheritPoint.ts",
         "v_board": "v_board.ts",
         "v_NPCControl": "v_NPCControl.ts",
-        "v_join": "v_join.ts"
+        "v_join": "v_join.ts",
+        "v_main": "v_main.ts"
     }
 }

hwe/ts/main.ts

@@ -15,6 +15,9 @@ import { exportWindow } from './util/exportWindow';
 import {stringifyUrl} from 'query-string';
 import { joinYearMonth } from './util/joinYearMonth';
 import { parseYearMonth } from './util/parseYearMonth';
+
+
+
 exportWindow($, '$');
 
 import '../scss/main.scss';
@@ -40,9 +43,8 @@ type ReservedTurnResponse = {
     autorun_limit: number|null,
 }
 
-$(function ($) {
-    setAxiosXMLHttpRequest();
 
+$(function ($) {
     $('#refreshPage').click(function () {
         document.location.reload();
         return false;
@@ -218,8 +220,8 @@ $(function ($) {
         window.open(href);
     });
 
-    setInterval(myclock, 500);
-    reloadCommandList();
+    //setInterval(myclock, 500);
+    //reloadCommandList();
     activateFlip();
     initTooltip();
-});
+});

hwe/ts/v_main.ts

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import ReservedCommand from './ReservedCommand.vue';
+import BootstrapVue3 from 'bootstrap-vue-3'
+import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+
+
+setAxiosXMLHttpRequest();
+
+createApp(ReservedCommand).use(BootstrapVue3).mount('#reservedCommandList')