feat: 턴 조작기, 보관함 기능

hwe/ts/PartialReservedCommand.vue

@@ -34,7 +34,7 @@
       <div v-if="isEditMode" class="row gx-0">
         <div class="col-4 d-grid">
           <BDropdown left text="보관함">
-            <!-- 즐겨찾기 모드 -->
+            <BDropdownItem v-for="[actionKey, actions] of storedActions" :key="actionKey" @click="useStoredAction(actions)">{{actionKey}} <BButton @click.prevent="deleteStoredActions(actionKey)" size="sm">삭제</BButton></BDropdownItem>
           </BDropdown>
         </div>
         <div class="col-3 d-grid">
@@ -72,7 +72,7 @@
               <i class="bi bi-clipboard-fill"></i>&nbsp;붙여넣기
             </BDropdownItem>
             <BDropdownDivider />
-            <BDropdownItem>
+            <BDropdownItem @click="setStoredActions">
               <i class="bi bi-bookmark-plus-fill"></i>&nbsp;보관하기
             </BDropdownItem>
             <BDropdownItem @click="subRepeatCommand">
@@ -299,7 +299,7 @@ declare const staticValues: {
 <script lang="ts" setup>
 import addMilliseconds from "date-fns/esm/addMilliseconds";
 import addMinutes from "date-fns/esm/addMinutes";
-import { clone, isString, min, range } from "lodash";
+import { clone, isString, min, range, repeat, trim } from "lodash";
 import { stringifyUrl } from "query-string";
 import { onMounted, ref, watch } from "vue";
 import { formatTime } from "@util/formatTime";
@@ -856,7 +856,7 @@ async function clipboardPaste(releaseSelect = true) {
 }
 
 async function subRepeatCommand(releaseSelect = true): Promise<boolean> {
-  const reqTurnList = getSelectedTurnList().sort();
+  const reqTurnList = getSelectedTurnList().sort((a,b)=>(a-b));
   const selectedMinTurnIdx = reqTurnList[0];
   const selectedMaxTurnIdx = reqTurnList[reqTurnList.length - 1];
   const queryLength = selectedMaxTurnIdx - selectedMinTurnIdx + 1;
@@ -873,7 +873,7 @@ async function subRepeatCommand(releaseSelect = true): Promise<boolean> {
 
 
 async function eraseAndPullCommand(releaseSelect = true): Promise<boolean> {
-  const reqTurnList = getSelectedTurnList().sort();
+  const reqTurnList = getSelectedTurnList().sort((a,b)=>(a-b));
   const selectedMinTurnIdx = reqTurnList[0];
   const selectedMaxTurnIdx = reqTurnList[reqTurnList.length - 1];
   const queryLength = selectedMaxTurnIdx - selectedMinTurnIdx + 1;
@@ -916,7 +916,7 @@ async function eraseAndPullCommand(releaseSelect = true): Promise<boolean> {
 }
 
 async function pushEmptyCommand(releaseSelect = true): Promise<boolean> {
-  const reqTurnList = getSelectedTurnList().sort();
+  const reqTurnList = getSelectedTurnList().sort((a,b)=>(a-b));
   const selectedMinTurnIdx = reqTurnList[0];
   const selectedMaxTurnIdx = reqTurnList[reqTurnList.length - 1];
   const queryLength = selectedMaxTurnIdx - selectedMinTurnIdx + 1;
@@ -958,6 +958,35 @@ async function pushEmptyCommand(releaseSelect = true): Promise<boolean> {
   return result;
 }
 
+function setStoredActions(){
+  const actions = refineQueryActions();
+  const turnBrief:string[] = [];
+  for(const [subTurnList, action] of actions){
+    const actionName = action.action.split('_');
+    const actionShortName = actionName.length == 1?actionName[0]:actionName[1];
+    turnBrief.push(repeat(actionShortName[0], subTurnList.length));
+  }
+  const nickName = trim(prompt('선택한 턴들의 별명을 지어주세요', turnBrief.join())??'');
+  if(nickName == ''){
+    return;
+  }
+
+  storedActionsHelper.setStoredActions(nickName, actions);
+  releaseSelectedTurnList();
+}
+
+function deleteStoredActions(actionKey: string){
+  storedActionsHelper.deleteStoredActions(actionKey)
+}
+
+async function useStoredAction(rawActions:  [number[], TurnObj][]){
+  const reqTurnList = getSelectedTurnList().sort((a,b)=>(a-b));
+  const actions = amplifyQueryActions(rawActions, reqTurnList)
+  const result = await reserveCommandDirect(actions);
+  releaseSelectedTurnList();
+  return result;
+}
+
 onMounted(() => {
   void reloadCommandList();
 });

hwe/ts/util/StoredActionsHelper.ts

@@ -1,4 +1,5 @@
 import type { TurnObj } from '@/defs';
+import { clone } from 'lodash';
 import { ref } from 'vue';
 
 
@@ -8,7 +9,7 @@ export class StoredActionsHelper {
     public readonly recentActionsKey: string;
     public readonly storedActionsKey: string;
 
-    constructor(protected serverNick: string, protected type: 'general'|'nation', protected maxRecent = 10) {
+    constructor(protected serverNick: string, protected type: 'general' | 'nation', protected maxRecent = 10) {
         this.recentActionsKey = `${serverNick}_${type}RecentActions`;
         this.storedActionsKey = `${serverNick}_${type}StoredActions`;
         this.loadRecentActions();
@@ -21,7 +22,7 @@ export class StoredActionsHelper {
 
     pushRecentActions(action: TurnObj) {
         this.recentActions.value.unshift(action);
-        if(this.recentActions.value.length > this.maxRecent){
+        if (this.recentActions.value.length > this.maxRecent) {
             this.recentActions.value.pop();
         }
         this.saveRecentActions();
@@ -32,12 +33,15 @@ export class StoredActionsHelper {
     }
 
     loadStoredActions() {
-        const rawValue: [string, [number[], TurnObj][]][] = JSON.parse(localStorage.getItem(this.storedActionsKey) ?? '[]');
+        const rawValue: [string, [number[], TurnObj][]][] = JSON.parse(
+            localStorage.getItem(this.storedActionsKey) ?? '[]'
+        );
         this.storedActions.value = new Map(rawValue);
     }
 
     setStoredActions(actionKey: string, actions: [number[], TurnObj][]) {
         this.storedActions.value.set(actionKey, actions);
+        console.log(this.storedActions.value);
         this.saveStoredActions();
     }
 
@@ -48,7 +52,10 @@ export class StoredActionsHelper {
     }
 
     saveStoredActions() {
-        localStorage.setItem(this.storedActionsKey, JSON.stringify(Object.entries(this.storedActions.value)));
+        localStorage.setItem(
+            this.storedActionsKey,
+            JSON.stringify(Array.from(this.storedActions.value.entries()))
+        );
     }
 
 }