feat, refac: 메인 페이지에서 커맨드 리스트를 동적으로 받아옴

hwe/index.php

@@ -156,7 +156,6 @@ if ($lastVoteID) {
             'serverID' => UniqueConst::$serverID,
             'maxTurn' => GameConst::$maxTurn,
             'maxPushTurn' => 12,
-            'commandList' => getCommandTable($generalObj),
             'serverNow' => TimeUtil::now(false),
             'lastExecuted' => $gameStor->turntime,
             'isLocked' => $plock,

hwe/sammo/API/General/GetCommandTable.php

@@ -0,0 +1,30 @@
+<?php
+namespace sammo\API\General;
+
+use sammo\General;
+use sammo\Session;
+
+use function sammo\getCommandTable;
+
+//getCommandTable 호출을 대신하는 API
+
+class GetCommandTable extends \sammo\BaseAPI{
+    public function validateArgs(): ?string{
+        return null;
+    }
+
+    public function getRequiredSessionMode(): int{
+        return static::REQ_GAME_LOGIN | static::REQ_READ_ONLY;
+    }
+
+    public function launch(Session $session, ?\DateTimeInterface $modifiedSince, ?string $reqEtag){
+        $generalID = $session->generalID;
+        $me = General::createGeneralObjFromDB($generalID);
+        $commandTable = getCommandTable($me);
+
+        return [
+            'result'=>true,
+            'commandTable' => $commandTable,
+        ];
+    }
+}

hwe/ts/PartialReservedCommand.vue

@@ -98,7 +98,7 @@
       </div>
 
       <div class="col-7 d-grid">
-        <BButton variant="info" @click="toggleForm($event)"> 명령 선택 ▾ </BButton>
+        <BButton variant="info" :disabled="!commandList.length" @click="toggleForm($event)"> 명령 선택 ▾ </BButton>
       </div>
     </div>
     <CommandSelectForm
@@ -234,6 +234,7 @@
             :variant="turnIdx % 2 == 0 ? 'secondary' : 'dark'"
             size="sm"
             class="simple_action_btn bi bi-pencil"
+            :disabled="!commandList.length"
             @click="toggleQuickReserveForm(turnIdx)"
           />
         </div>
@@ -267,10 +268,6 @@
 declare const staticValues: {
   maxTurn: number;
   maxPushTurn: number;
-  commandList: {
-    category: string;
-    values: CommandItem[];
-  }[];
   serverNow: string;
   serverNick: string;
   mapName: string;
@@ -280,7 +277,7 @@ declare const staticValues: {
 
 <script lang="ts" setup>
 import addMinutes from "date-fns/esm/addMinutes";
-import { range, trim } from "lodash-es";
+import { isString, range, trim } from "lodash-es";
 import { stringifyUrl } from "query-string";
 import { onMounted, ref, watch } from "vue";
 import { formatTime } from "@util/formatTime";
@@ -290,7 +287,7 @@ import { parseTime } from "@util/parseTime";
 import { parseYearMonth } from "@util/parseYearMonth";
 import DragSelect from "@/components/DragSelect.vue";
 import { SammoAPI } from "./SammoAPI";
-import type { CommandItem } from "@/defs";
+import type { CommandItem, CommandTableResponse } from "@/defs";
 import CommandSelectForm from "@/components/CommandSelectForm.vue";
 import { BButton, BButtonGroup, BDropdownItem, BDropdown, BDropdownText, BDropdownDivider } from "bootstrap-vue-3";
 import { StoredActionsHelper } from "./util/StoredActionsHelper";
@@ -299,25 +296,75 @@ import type { Args } from "./processing/args";
 import { QueryActionHelper } from "./util/QueryActionHelper";
 import SimpleClock from "./components/SimpleClock.vue";
 import type { ReservedCommandResponse } from "./defs/API/Command";
+import { unwrap } from "./util/unwrap";
 
-const { maxTurn, maxPushTurn, commandList } = staticValues;
+defineExpose({
+  updateCommandTable,
+})
 
+const { maxTurn, maxPushTurn } = staticValues;
+
+const commandList = ref<CommandTableResponse['commandTable']>([]);
 const listReqArgCommand = new Set<string>();
-const selectedCommand = ref(staticValues.commandList[0].values[0]);
-const commandSelectForm = ref<InstanceType<typeof CommandSelectForm> | null>(null);
 
-for (const commandCategories of commandList) {
+const nullCommand: CommandItem = {
-  if (!commandCategories.values) {
+  'value': '휴식',
-    continue;
+  'compensation': 0,
+  'simpleName': '휴식',
+  'possible': true,
+  'info': '휴식',
+  'title': '휴식',
+  'reqArg': false,
+}
+
+const selectedCommand = ref<CommandItem>(nullCommand);
+const commandSelectForm = ref<InstanceType<typeof CommandSelectForm> | null>(null);
+const invCommandMap = new Map<string, CommandItem>();
+
+async function updateCommandTable(){
+  try{
+    const response = await SammoAPI.General.GetCommandTable();
+    console.log(response);
+    commandList.value = response.commandTable;
   }
-  for (const commandObj of commandCategories.values) {
+  catch(e){
-    if (!commandObj.reqArg) {
+    console.error(e);
-      continue;
-    }
-    listReqArgCommand.add(commandObj.value);
   }
 }
 
+watch(commandList, (commandList)=>{
+  if(!commandList){
+    return;
+  }
+
+  for (const commandCategories of commandList) {
+    if (!commandCategories.values) {
+      continue;
+    }
+    for (const commandObj of commandCategories.values) {
+      if (!commandObj.reqArg) {
+        continue;
+      }
+      listReqArgCommand.add(commandObj.value);
+    }
+  }
+
+  invCommandMap.clear();
+  for (const category of commandList) {
+    for (const command of category.values) {
+      invCommandMap.set(command.value, command);
+    }
+  }
+
+  if(selectedCommand.value === nullCommand || !invCommandMap.has(selectedCommand.value.value)){
+    selectedCommand.value = commandList[0].values[0];
+  }
+});
+
+onMounted(() => {
+  void updateCommandTable();
+});
+
 function toggleForm($event: Event): void {
   $event.preventDefault();
 
@@ -376,13 +423,6 @@ watch([isEditMode, viewMaxTurn], ([isEditMode, maxTurn]) => {
 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 toggleViewMaxTurn() {
   if (viewMaxTurn.value == flippedMaxTurn) {
     viewMaxTurn.value = maxTurn;
@@ -562,7 +602,7 @@ function chooseCommand(val?: string) {
   if (!val) {
     return;
   }
-  selectedCommand.value = invCommandMap[val];
+  selectedCommand.value = unwrap(invCommandMap.get(val));
   void reserveCommand();
 }
 
@@ -573,7 +613,7 @@ function chooseQuickReserveCommand(val?: string) {
   if (!val) {
     return;
   }
-  selectedCommand.value = invCommandMap[val];
+  selectedCommand.value = unwrap(invCommandMap.get(val));
   selectedTurnList.value.clear();
   selectedTurnList.value.add(currentQuickReserveTarget.value);
   void reserveCommand();

hwe/ts/SammoAPI.ts

@@ -29,7 +29,7 @@ ExecuteResponse,
   GetHistoryResponse,
 GetRecentRecordResponse,
 } from "./defs/API/Global";
-import type { CachedMapResult, GeneralListResponse, ItemTypeKey, MapResult } from "./defs";
+import type { CachedMapResult, CommandTableResponse, GeneralListResponse, ItemTypeKey, MapResult } from "./defs";
 import type { VoteDetailResult, VoteListResult } from "./defs/API/Vote";
 import type { ActiveResourceAuctionList, OpenAuctionResponse, UniqueItemAuctionDetail, UniqueItemAuctionList } from "./defs/API/Auction";
 import type { MabilboxListResponse, MsgResponse, MsgType } from "./defs/API/Message";
@@ -130,6 +130,7 @@ const apiRealPath = {
     }>,
     DieOnPrestart: POST as APICallT<undefined>,
     BuildNationCandidate: POST as APICallT<undefined>,
+    GetCommandTable: GET as APICallT<undefined, CommandTableResponse>,
   },
   Global: {
     GeneralList: GET as APICallT<undefined, GeneralListResponse>,

hwe/ts/components/CommandSelectForm.vue

@@ -59,7 +59,7 @@
 <script setup lang="ts">
 import type { CommandItem } from "@/defs";
 import { BButton } from "bootstrap-vue-3";
-import { ref, type PropType, watch, onMounted } from "vue";
+import { ref, type PropType, watch } from "vue";
 
 interface CategoryDecoration {
   name: string;
@@ -106,7 +106,7 @@ const props = defineProps({
 const chosenCategory = ref<string>("-");
 const chosenSubList = ref<CommandItem[]>([]);
 
-const categories = new Set(props.commandList.map(({ category }) => category));
+const categories = ref();
 
 watch(
   () => props.activatedCategory,
@@ -142,12 +142,24 @@ const commandList = ref(
 
 function updateCommandList(rawCommandList: typeof props.commandList) {
   commandList.value.clear();
+  const newCategories = new Set<string>();
   for (const { category, values } of rawCommandList) {
+    newCategories.add(category);
     commandList.value.set(category, {
       deco: convCategoryDeco(category),
       values,
     });
   }
+  categories.value = newCategories;
+
+  if(categories.value.size === 0) {
+    chosenCategory.value = "";
+  }
+  else if (!categories.value.has(props.activatedCategory)) {
+    chosenCategory.value = rawCommandList[0].category;
+  } else {
+    chosenCategory.value = props.activatedCategory;
+  }
 }
 
 watch(() => props.commandList, updateCommandList);
@@ -165,14 +177,6 @@ watch(chosenCategory, (category) => {
   }
 });
 
-onMounted(() => {
-  if (!categories.has(props.activatedCategory)) {
-    chosenCategory.value = props.commandList[0].category;
-  } else {
-    chosenCategory.value = props.activatedCategory;
-  }
-});
-
 function show(): void {
   showForm.value = true;
 }

hwe/ts/defs/index.ts

@@ -219,6 +219,13 @@ export type CommandItem = {
     searchText?: string;
 };
 
+export type CommandTableResponse = ValidResponse & {
+    commandTable: {
+        category: string;
+        values: CommandItem[];
+    }[];
+}
+
 type diplomacyInfo = {
     name: string,
     color?: string,