wip

hwe/ts/PageBattleCenter.vue

@@ -0,0 +1,115 @@
+<template>
+  <BContainer v-if="asyncReady" id="container" :toast="{ root: true }">
+    <TopBackBar title="감찰부" :reloadable="true" @reload="reload" />
+
+    <div class="row gx-0">
+      <BFormSelect v-model="targetGeneralID">
+        <BFormSelectOption v-for="general of orderedGeneralList" :key="general.no" :value="general.no">
+          <span
+            :style="{
+              color: getNpcColor(general.npc),
+            }"
+            >{{ general.name }}</span
+          >
+        </BFormSelectOption>
+      </BFormSelect>
+    </div>
+    <!--<GeneralBasicCard v-if="targetGeneral" :general="targetGeneral" :nation="" />-->
+    <BottomBar></BottomBar>
+  </BContainer>
+</template>
+
+<script lang="ts">
+declare const staticValues: {
+  serverNick: string;
+  mapName: string;
+  unitSet: string;
+};
+declare const queryValues: {
+  generalID: number | null;
+};
+</script>
+<script lang="ts" setup>
+import { BContainer, useToast, BFormSelect, BFormSelectOption } from "bootstrap-vue-3";
+import { onMounted, provide, ref, watch } from "vue";
+import { getGameConstStore, type GameConstStore } from "./GameConstStore";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import type { GeneralListItemP1 } from "./defs/API/Nation";
+import { SammoAPI } from "./SammoAPI";
+import { unwrap } from "@/util/unwrap";
+import { merge2DArrToObjectArr } from "@/util/merge2DArrToObjectArr";
+import { getNpcColor } from "@/common_legacy";
+import GeneralBasicCard from "./components/GeneralBasicCard.vue";
+
+const toasts = unwrap(useToast());
+
+const generalList = ref(new Map<number, GeneralListItemP1>());
+const textMap = {
+  recent_war: ["최근 전투", (gen: GeneralListItemP1) => gen.recent_war, false],
+  warnum: ["전투 횟수", (gen: GeneralListItemP1) => gen.warnum, false],
+  turntime: ["최근 턴", (gen: GeneralListItemP1) => gen.turntime, false],
+  name: ["이름", (gen: GeneralListItemP1) => `${gen.npc} ${gen.name}`, false],
+} as const;
+
+const orderedGeneralList = ref<GeneralListItemP1[]>([]);
+const orderBy = ref<keyof typeof textMap>("turntime");
+const targetGeneral = ref<GeneralListItemP1>();
+const targetGeneralID = ref(queryValues.generalID ?? undefined);
+
+watch([generalList, targetGeneralID], ([generalList, targetGeneralID]) => {
+  if (targetGeneralID === undefined) return;
+  targetGeneral.value = generalList.get(targetGeneralID);
+});
+
+watch([generalList, orderBy], ([generalList, orderBy]) => {
+  const list = Array.from(generalList.values());
+  list.sort((a, b) => {
+    const [, getter, isAsc] = textMap[orderBy];
+    const aVal = getter(a);
+    const bVal = getter(b);
+    if (aVal === bVal) return 0;
+    return isAsc ? (aVal > bVal ? 1 : -1) : aVal < bVal ? 1 : -1;
+  });
+  orderedGeneralList.value = list;
+  targetGeneralID.value = list[0].no;
+});
+
+const asyncReady = ref(false);
+const gameConstStore = ref<GameConstStore>();
+provide("gameConstStore", gameConstStore);
+const storeP = getGameConstStore().then((store) => {
+  gameConstStore.value = store;
+});
+
+void Promise.all([storeP]).then(() => {
+  asyncReady.value = true;
+});
+
+async function reload(): Promise<void> {
+  console.log("갱신 시도");
+
+  try {
+    const { column, list, permission, troops, env } = await SammoAPI.Nation.GeneralList();
+    if (permission === 0) {
+      throw "권한이 부족합니다.";
+    }
+
+    const rawGeneralList = merge2DArrToObjectArr(column, list);
+    const newList = new Map<number, GeneralListItemP1>();
+    for (const general of rawGeneralList) {
+      newList.set(general.no, general);
+    }
+  } catch (e) {
+    toasts.danger({
+      title: "오류",
+      body: `${e}`,
+    });
+    console.error(e);
+  }
+}
+
+onMounted(async () => {
+  await reload();
+});
+</script>

hwe/ts/components/GeneralSupplementCard.vue

@@ -38,7 +38,7 @@
       <div>피살</div>
       <div>{{ general.deathcrew.toLocaleString() }}</div>
     </div>
-    <div class="col-7 general-card-dex">
+    <div :class="[props.showCommandList ? 'col-7' : 'col', 'general-card-dex']">
       <div class="part-title">숙련도</div>
       <template v-for="[dexType, dex, dexInfo] of dexList" :key="dexType">
         <div>{{ dexType }}</div>
@@ -49,14 +49,11 @@
         </div>
       </template>
     </div>
-    <div class="col-5 general-card-turn">
+    <div v-if="props.showCommandList && general.reservedCommand?.length > 0" class="col-5 general-card-turn">
       <div class="part-title">예약턴</div>
-      <template v-if="general.reservedCommand">
-        <div v-for="(turn, idx) in general.reservedCommand.slice(0, 5)" :key="idx">
-          {{ turn.brief }}
-        </div>
-      </template>
-      <div v-else style="grid-row: 2 / 7">NPC</div>
+      <div v-for="(turn, idx) in general.reservedCommand.slice(0, 5)" :key="idx">
+        {{ turn.brief }}
+      </div>
     </div>
   </div>
 </template>
@@ -69,6 +66,7 @@ import { formatDexLevel, type DexInfo } from "@/utilGame/formatDexLevel";
 import { formatHonor } from "@/utilGame/formatHonor";
 const props = defineProps<{
   general: GeneralListItemP1;
+  showCommandList?: boolean;
 }>();
 
 const dexList = computed((): [string, number, DexInfo][] => {

hwe/ts/v_battleCenter.ts

@@ -0,0 +1,20 @@
+import "@scss/nationGeneral.scss";
+import "ag-grid-community/dist/styles/ag-grid.css";
+import "ag-grid-community/dist/styles/ag-theme-balham-dark.css";
+
+import { createApp } from 'vue'
+import PageBattleCenter from '@/PageBattleCenter.vue';
+import { BootstrapVue3, BToastPlugin } from 'bootstrap-vue-3';
+import { auto500px } from './util/auto500px';
+import { htmlReady } from "./util/htmlReady";
+import { insertCustomCSS } from "./util/customCSS";
+
+
+
+
+auto500px();
+
+htmlReady(() => {
+  insertCustomCSS();
+});
+createApp(PageBattleCenter).use(BootstrapVue3).use(BToastPlugin).mount('#app');