feat: 감찰부에서 '이전', '다음' 버튼

hwe/ts/PageBattleCenter.vue

@@ -3,7 +3,10 @@
     <TopBackBar title="감찰부" :reloadable="true" type="close" @reload="reload" />
 
     <div class="row gx-0">
-      <div class="col-4">
+      <div class="col-2 col-md-1 d-grid">
+        <BButton @click="changeTargetByOffset(-1)">◀ 이전</BButton>
+      </div>
+      <div class="col-3 col-md-4">
         <BFormSelect v-model="orderBy">
           <BFormSelectOption
             v-for="[orderKey, [orderName]] of Object.entries(textMap)"
@@ -14,7 +17,7 @@
           </BFormSelectOption>
         </BFormSelect>
       </div>
-      <div class="col-8">
+      <div class="col-5 col-md-6">
         <BFormSelect v-model="targetGeneralID">
           <BFormSelectOption v-for="general of orderedGeneralList" :key="general.no" :value="general.no">
             <span
@@ -28,6 +31,9 @@
           </BFormSelectOption>
         </BFormSelect>
       </div>
+      <div class="col-2 col-md-1 d-grid">
+        <BButton @click="changeTargetByOffset(1)">다음 ▶</BButton>
+      </div>
     </div>
     <div v-if="targetGeneral && nationInfo && targetGeneralLogs" class="row gx-0 bg0">
       <div class="col-12 col-md-6">
@@ -67,7 +73,7 @@ declare const queryValues: {
 };
 </script>
 <script lang="ts" setup>
-import { BContainer, useToast, BFormSelect, BFormSelectOption } from "bootstrap-vue-3";
+import { BContainer, useToast, BFormSelect, BFormSelectOption, BButton } from "bootstrap-vue-3";
 import { onMounted, provide, ref, watch } from "vue";
 import { getGameConstStore, type GameConstStore } from "./GameConstStore";
 import TopBackBar from "@/components/TopBackBar.vue";
@@ -100,6 +106,8 @@ const textMap = {
 } as const;
 
 const orderedGeneralList = ref<GeneralListItemP1[]>([]);
+const orderedInvGeneralKeyIndex = ref(new Map<number, number>());
+
 const orderBy = ref<keyof typeof textMap>("turntime");
 const targetGeneral = ref<GeneralListItemP1>();
 const targetGeneralID = ref(queryValues.generalID ?? undefined);
@@ -172,7 +180,15 @@ watch([generalList, orderBy], ([generalList, orderBy], [, oldOrderBy]) => {
     if (aVal === bVal) return 0;
     return isAsc ? (aVal > bVal ? 1 : -1) : aVal < bVal ? 1 : -1;
   });
+
+  const invIndex = new Map<number, number>();
+  for (const [idx, gen] of list.entries()) {
+    invIndex.set(gen.no, idx);
+  }
+
   orderedGeneralList.value = list;
+  orderedInvGeneralKeyIndex.value = invIndex;
+
   const oldTargetGeneralID = targetGeneralID.value;
   if (!oldTargetGeneralID) {
     targetGeneralID.value = list[0].no;
@@ -181,6 +197,27 @@ watch([generalList, orderBy], ([generalList, orderBy], [, oldOrderBy]) => {
   }
 });
 
+function changeTargetByOffset(idx: number) {
+  const targetID = targetGeneralID.value;
+  if (targetID === undefined) {
+    return;
+  }
+
+  const currIdx = orderedInvGeneralKeyIndex.value.get(targetID);
+  if (currIdx === undefined) {
+    return;
+  }
+
+  let newIdx = currIdx + idx;
+  const listLen = orderedGeneralList.value.length;
+  while (newIdx < 0) {
+    newIdx += listLen;
+  }
+  newIdx = newIdx % listLen;
+
+  targetGeneralID.value = orderedGeneralList.value[newIdx].no;
+}
+
 const asyncReady = ref(false);
 const gameConstStore = ref<GameConstStore>();
 provide("gameConstStore", gameConstStore);