feat: 사령부 턴 입력기에도 일반, 고급 모드 적용

hwe/ts/PageChiefCenter.vue

@@ -36,102 +36,26 @@
             :maxTurn="maxChiefTurn"
             :turnTerm="turnTerm"
           />
-          <div class="commandBox" v-else>
-            <div class="only1000px bg1 center row gx-0" style="height: 24px; font-size: 1.2em">
-              <div class="col-5 align-self-center text-end">{{ officer.officerLevelText }} :</div>
-              <div
-                class="col-7 align-self-center"
-                :style="{
-                  color: getNpcColor(officer.npcType ?? 0),
-                }"
-              >{{ officer.name }}</div>
-            </div>
-            <div
-              :class="[
-                'row',
-                'controlPad',
-                chiefLevel == officerLevel ? 'targetIsMe' : 'targetIsNotMe',
-              ]"
-            >
-              <div class="col-3 col-md-12 order-md-last">
-                <div class="d-grid mb-1 py-1 only500px bg1 center">
-                  <div
-                    :style="{
-                      color: getNpcColor(officer.npcType ?? 0),
-                      fontSize: '1.2em',
-                    }"
-                  >{{ officer.name }}</div>
-                  <div>{{ officer.officerLevelText }}</div>
-                </div>
-                <div class="row gx-1 gy-1 py-1">
-                  <div class="col-md-4 mx-0 mb-0 mt-1 d-grid">
-                    <div
-                      class="alert alert-primary mb-0 center"
-                      style="padding: 0.5rem 0"
-                    >{{ serverNow }}</div>
-                  </div>
-
-                  <b-dropdown class="col-md-4" left text="턴 선택">
-                    <b-dropdown-item @click="selectNone()">해제</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>
-
-                    <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>
-                  <b-dropdown class="col-md-4" text="반복">
-                    <b-dropdown-item
-                      v-for="turnIdx in maxPushTurn"
-                      :key="turnIdx"
-                      @click="repeatNationCommand(turnIdx)"
-                    >{{ turnIdx }}턴</b-dropdown-item>
-                  </b-dropdown>
-                  <b-dropdown class="col-md-6" split text="당기기" @click="pullNationCommandSingle">
-                    <b-dropdown-item
-                      v-for="turnIdx in maxPushTurn"
-                      :key="turnIdx"
-                      @click="pushNationCommand(-turnIdx)"
-                    >{{ turnIdx }}턴</b-dropdown-item>
-                  </b-dropdown>
-                  <b-dropdown class="col-md-6" split text="미루기" @click="pushNationCommandSingle">
-                    <b-dropdown-item
-                      v-for="turnIdx in maxPushTurn"
-                      :key="turnIdx"
-                      @click="pushNationCommand(turnIdx)"
-                    >{{ turnIdx }}턴</b-dropdown-item>
-                  </b-dropdown>
-                </div>
-              </div>
-              <div class="col">
-                <ChiefReservedCommand
-                  :key="idx"
-                  :year="year"
-                  :month="month"
-                  :turn="officer.turn"
-                  :turnTerm="turnTerm"
-                  :commandList="unwrap(commandList)"
-                  :turnTime="officer.turnTime"
-                  :maxTurn="maxChiefTurn"
-                  :maxPushTurn="Math.floor(maxChiefTurn / 2)"
-                  :date="date"
-                  v-model:selectedTurn="turnList"
-                  @raiseReload="reloadTable()"
-                />
-              </div>
-            </div>
-          </div>
+          <ChiefReservedCommand
+            v-else
+            :serverNick="serverNick"
+            :mapName="mapName"
+            :unitSet="unitSet"
+            :key="idx"
+            :targetIsMe="targetIsMe"
+            :year="year"
+            :month="month"
+            :turn="officer.turn"
+            :turnTerm="turnTerm"
+            :commandList="unwrap(commandList)"
+            :turnTime="officer.turnTime"
+            :maxTurn="maxChiefTurn"
+            :maxPushTurn="Math.floor(maxChiefTurn / 2)"
+            :date="date"
+            @raiseReload="reloadTable()"
+            :officer="officer"
+            :timeDiff="timeDiff"
+          />
         </div>
         <div
           v-if="vidx % 4 == 3"
@@ -177,6 +101,13 @@
     <BottomBar />
   </div>
 </template>
+<script lang="ts">
+declare const staticValues: {
+  serverNick: string,
+  mapName: string,
+  unitSet: string,
+}
+</script>
 <script lang="ts" setup>
 import "@scss/common/bootstrap5.scss";
 import "@scss/game_bg.scss";
@@ -187,41 +118,25 @@ import ChiefReservedCommand from "@/components/ChiefReservedCommand.vue";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import VueTypes from "vue-types";
-import { isString, range } from "lodash";
+import { isString } from "lodash";
 import { entriesWithType } from "./util/entriesWithType";
-import { addMilliseconds } from "date-fns";
-import { formatTime } from "./util/formatTime";
 import { parseTime } from "./util/parseTime";
-import { getNpcColor } from "./common_legacy";
 import TopItem from "@/ChiefCenter/TopItem.vue";
 import BottomItem from "@/ChiefCenter/BottomItem.vue";
 import type { ChiefResponse, OptionalFull } from "./defs";
 import { SammoAPI } from "./SammoAPI";
 import { unwrap } from "@/util/unwrap";
 
-function isDropdownChildren(e?: Event): boolean {
-  if (!e) {
-    return false;
-  }
-  if (!e.target) {
-    return false;
-  }
-  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 true;
-  }
-  return false;
-}
+const {
+  serverNick,
+  mapName,
+  unitSet,
+} = staticValues;
 
 const props = defineProps({
   maxChiefTurn: VueTypes.number.isRequired,
 })
 
-const maxPushTurn = props.maxChiefTurn / 2;
-
 const tableObj = reactive<Omit<OptionalFull<ChiefResponse>, "result">>({
   lastExecute: undefined,
   year: undefined,
@@ -249,8 +164,6 @@ const {
 
 const viewTarget = ref<number | undefined>();
 
-const turnList = ref(new Set<number>());
-
 const targetIsMe = ref<boolean>(false);
 watch(viewTarget, (val) => {
   console.log("targetChange!", val, targetIsMe);
@@ -265,84 +178,7 @@ watch(viewTarget, (val) => {
   console.log("result", targetIsMe.value);
 });
 
-function toggleTurn(turnIdx: number) {
-  if (turnList.value.has(turnIdx)) {
-    turnList.value.delete(turnIdx);
-  } else {
-    turnList.value.add(turnIdx);
-  }
-}
-
-function selectTurn(turnIdx: number) {
-  turnList.value.clear();
-  turnList.value.add(turnIdx);
-}
-
-function selectNone() {
-  turnList.value.clear();
-}
-
-function selectAll(e: Event | true) {
-  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-  if (e !== true && isDropdownChildren(e)) {
-    return;
-  }
-
-  if (turnList.value.size * 3 > props.maxChiefTurn) {
-    turnList.value.clear();
-  } else {
-    for (let i = 0; i < props.maxChiefTurn; i++) {
-      turnList.value.add(i);
-    }
-  }
-}
-function selectStep(begin: number, step: number) {
-  turnList.value.clear();
-  for (const idx of range(0, props.maxChiefTurn)) {
-    if ((idx - begin) % step == 0) {
-      turnList.value.add(idx);
-    }
-  }
-}
-
-async function repeatNationCommand(amount: number) {
-  try {
-    await SammoAPI.NationCommand.RepeatCommand({ amount });
-  } catch (e) {
-    console.error(e);
-    alert(`실패했습니다: ${e}`);
-    return;
-  }
-  await reloadTable();
-}
-
-async function pushNationCommand(amount: number) {
-  try {
-    await SammoAPI.NationCommand.PushCommand({ amount });
-  } catch (e) {
-    console.error(e);
-    alert(`실패했습니다: ${e}`);
-    return;
-  }
-  await reloadTable();
-}
-
-function pushNationCommandSingle(e: Event) {
-  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-  if (isDropdownChildren(e)) {
-    return;
-  }
-  void pushNationCommand(1);
-}
-
-function pullNationCommandSingle(e: Event) {
-  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-  if (isDropdownChildren(e)) {
-    return;
-  }
-  void pushNationCommand(-1);
-}
-
+const timeDiff = ref(0);
 async function reloadTable(): Promise<void> {
   try {
     const response =
@@ -400,20 +236,6 @@ const subTableGridRows = computed(() => {
 
 void reloadTable();
 
-const serverNow = ref(formatTime(new Date(), "HH:mm:ss"));
-const timeDiff = ref(0);
-
-function updateNow() {
-  const serverNowObj = addMilliseconds(new Date(), timeDiff.value);
-  serverNow.value = formatTime(serverNowObj, "HH:mm:ss");
-  setTimeout(() => {
-    updateNow();
-  }, 1000 - serverNowObj.getMilliseconds());
-}
-
-setTimeout(() => {
-  updateNow();
-}, 500);
 
 </script>
 <style lang="scss">