feat(WIP): 커맨드 윈도우 UI 구성

hwe/ts/PartialReservedCommand.vue

@@ -3,7 +3,17 @@
     <div class="col alert alert-dark m-0 p-1 center">
       <h4 class="m-0">명령 목록</h4>
     </div>
-
+    <div class="row gx-0 commandSelectFormAnchor">
+      <div class="col-3 d-grid">
+        <BButton variant="primary">편집</BButton>
+      </div>
+      <div class="col-6 d-grid">
+        <BButton variant="light" @click="toggleForm($event)" :style="{color: 'black'}">{{ selectedCommand.simpleName }} ▾</BButton>
+      </div>
+      <div class="col-3 d-grid">
+        <BButton @click="reserveCommand()" variant="primary">실행</BButton>
+      </div>
+    </div>
     <div class="row gx-1">
       <div class="col d-grid">
         <BDropdown left text="턴 선택">
@@ -176,17 +186,13 @@ selectTurn(...$event);
         </BButton>
       </div>
     </div>
-    <div class="row gx-0">
-      <div class="col-2 d-grid"></div>
-      <div class="col-7">
-        <BButton @click="commandSelectForm?.show()">{{ selectedCommand.title }}</BButton>
-      </div>
-      <div class="col-3 d-grid">
-        <BButton @click="reserveCommand()" variant="primary">실행</BButton>
-      </div>
-    </div>
   </div>
-  <CommandSelectForm :commandList="commandList" ref="commandSelectForm" @on-close="chooseCommand($event)" />
+  <CommandSelectForm
+    :commandList="commandList"
+    anchor=".commandSelectFormAnchor"
+    ref="commandSelectForm"
+    @on-close="chooseCommand($event)"
+  />
 </template>
 
 <script lang="ts">
@@ -270,6 +276,16 @@ for (const commandCategories of commandList) {
   }
 }
 
+function toggleForm($event: Event): void{
+  $event.preventDefault();
+
+  const form = commandSelectForm.value;
+  if(!form){
+    return;
+  }
+  form.toggle();
+}
+
 function isDropdownChildren(e?: Event): boolean {
   if (!e) {
     return false;
@@ -539,7 +555,7 @@ async function reserveCommand() {
 }
 
 function chooseCommand(val?: string) {
-  if(!val){
+  if (!val) {
     return;
   }
   selectedCommand.value = invCommandMap[val];

hwe/ts/components/CommandSelectForm.vue

@@ -1,28 +1,43 @@
 <template>
-    <teleport to="body">
+    <teleport :to="anchor">
-        <div v-if="showForm">
+        <div v-if="showForm" class="my-1">
-            <div class="commandCategory">
+            <div class="commandCategory row gx-0 gy-1">
                 <div
-                    class="categoryItem"
+                    class="categoryItem col-4 d-grid"
                     v-for="[categoryKey, { deco: categoryDeco }] of commandList"
                     :key="categoryKey"
-                ><BButton @click="chosenCategory=categoryKey">{{ categoryDeco.altName ?? categoryDeco.name }}</BButton></div>
+                >
+                    <BButton
+                        variant="success"
+                        @click="chosenCategory = categoryKey"
+                        :active="chosenCategory == categoryKey"
+                    >{{ categoryDeco.altName ?? categoryDeco.name }}</BButton>
+                </div>
             </div>
-            <div class="commandList">
+            <div class="commandList row gx-1 gy-1 my-1">
                 <div
-                    class="commandItem"
+                    class="col-6 d-grid"
                     v-for="commandItem of chosenSubList"
                     :key="commandItem.value"
                     @click="close(commandItem.value)"
                 >
-                    {{ commandItem.simpleName }}
+                    <div class="commandItem">
-                    <br />
+                        <p class="center my-0">{{ commandItem.simpleName }}</p>
-                    <small>{{ commandItem.title }}</small>
+                        <small class="center" :style="{ display: 'block' }">
+                            {{
+                                commandItem.title.startsWith(commandItem.simpleName)
+                                    ? commandItem.title.substring(commandItem.simpleName.length)
+                                    : commandItem.title
+                            }}
+                        </small>
+                    </div>
                 </div>
             </div>
-            <div class="commandBottom">
+            <!--<div class="commandBottom row mt-1 mb-1">
-                <BButton @click="close()">닫기</BButton>
+                <div class="offset-8 col-4 d-grid">
-            </div>
+                    <BButton @click="close()">닫기</BButton>
+                </div>
+            </div>-->
         </div>
     </teleport>
 </template>
@@ -42,9 +57,9 @@
  */
 import type { CommandItem } from "@/defs";
 import { BButton } from "bootstrap-vue-3";
-import { ref, defineProps, defineEmits, defineExpose, type PropType, watch } from "vue";
+import { ref, defineProps, defineEmits, defineExpose, type PropType, watch, onMounted } from "vue";
 
-const chosenCategory = ref<string>("");
+const chosenCategory = ref<string>("-");
 const chosenSubList = ref<CommandItem[]>([]);
 
 interface CategoryDecoration {
@@ -66,6 +81,11 @@ const props = defineProps({
             values: CommandItem[];
         }[]>,
         required: true,
+    },
+    anchor: {
+        type: String,
+        required: false,
+        default: '.commandSelectFormAnchor',
     }
 })
 
@@ -114,10 +134,21 @@ watch(chosenCategory, (category) => {
     chosenSubList.value = itemInfo.values;
 });
 
+onMounted(() => {
+    chosenCategory.value = props.commandList[0].category;
+});
+
 function show(): void {
     showForm.value = true;
 }
 
+function toggle(): void {
+    showForm.value = !showForm.value;
+    if (showForm.value === false) {
+        emits('onClose');
+    }
+}
+
 function close(category?: string): void {
     showForm.value = false;
     emits('onClose', category);
@@ -129,7 +160,19 @@ const emits = defineEmits<{
 
 defineExpose({
     show,
-    close
+    close,
+    toggle
 })
 
-</script>
+</script>
+
+<style scoped>
+.commandItem {
+    border: gray 1px solid;
+    border-radius: 0.5em;
+    overflow: hidden;
+    cursor: pointer;
+    padding: 0.1em;
+    margin: 0;
+}
+</style>

hwe/ts/defs.ts

@@ -183,6 +183,7 @@ export type TurnObj = {
 export type CommandItem = {
     value: string;
     title: string;
+    info: string,
     compensation: number;
     simpleName: string;
     possible: boolean;