feat(wip): 연감에서 지도를 부르는 작업 준비중

hwe/ts/PageHistory.vue

@@ -1,25 +1,53 @@
 <template>
-  <div>연감</div>
-  <div v-if="history">
-    있음
-    <div v-for="date of generateYearMonthList()" :key="date.yearMonth" @click="queryYearMonth = date.yearMonth">
-      {{ date.year }}년 {{ date.month }}월 {{ date.queried ? `선택` : "" }} {{ date.current ? "현재" : "" }}
+  <BContainer v-if="asyncReady" id="container" :toast="{ root: true }" class="bg0 pageHistory">
+    <TopBackBar title="연감" type="close"></TopBackBar>
+    <div class="center row mx-0 s-border-tb">
+      <div class="col-md-1 col-2 year-selector text-end align-self-center">연월 선택:</div>
+      <BButton class="col-md-1 col-2" @click="queryYearMonth -= 1">◀ 이전달</BButton>
+      <div class="col-md-3 col-5 d-grid">
+        <BFormSelect v-model="queryYearMonth" :options="generateYearMonthList()" />
+      </div>
+      <BButton class="col-md-1 col-2" @click="queryYearMonth += 1">다음달 ▶</BButton>
     </div>
-    <div>
-      <template v-for="(item, idx) in history.global_action" :key="idx">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-html="formatLog(item)"></span>
-        <br />
-      </template>
+    <div v-if="history" class="mx-0">
+      <div class="row g-0">
+        <div class="map_position">
+          <StaticMapTemplate
+            :server-nick="serverNick"
+            :serverID="queryServerID"
+            :map-name="unwrap(gameConstStore?.gameConst.mapName)"
+            :model-value="history.map"
+            :is-detail-map="true"
+            :city-position="cityPosition"
+            :format-city-info="formatCityInfoText"
+            :image-path="imagePath"
+          />
+        </div>
+        <div class="nation_position"><SimpleNationList :nations="history.nations" /></div>
+      </div>
+      <div class="world_history">
+        <div class="bg1 center s-border-tb"><b>중원 정세</b></div>
+        <div class="content">
+          <template v-for="(item, idx) in history.global_history" :key="idx">
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span v-html="formatLog(item)"></span>
+            <br />
+          </template>
+        </div>
+      </div>
+      <div class="general_public_record">
+        <div class="bg1 center s-border-tb"><b>장수 동향</b></div>
+        <div class="content">
+          <template v-for="(item, idx) in history.global_action" :key="idx">
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span v-html="formatLog(item)"></span>
+            <br />
+          </template>
+        </div>
+      </div>
     </div>
-    <div>
-      <template v-for="(item, idx) in history.global_history" :key="idx">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-html="formatLog(item)"></span>
-        <br />
-      </template>
-    </div>
-  </div>
+    <BottomBar type="close"></BottomBar>
+  </BContainer>
 </template>
 
 <script lang="ts">
@@ -34,50 +62,70 @@ declare const query: {
   yearMonth: number | null;
   serverID: string;
 };
+
+declare const getCityPosition: () => CityPositionMap;
+declare const formatCityInfo: (city: MapCityParsedRaw) => MapCityParsed;
 </script>
 <script lang="ts" setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, provide, ref, watch } from "vue";
+import { BContainer, BButton, BFormSelect } from "bootstrap-vue-3";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
 import type { HistoryObj } from "./defs/API/Global";
 import { SammoAPI } from "./SammoAPI";
 import { joinYearMonth } from "./util/joinYearMonth";
 import { parseYearMonth } from "./util/parseYearMonth";
 import { formatLog } from "./utilGame/formatLog";
+import SimpleNationList from "./components/SimpleNationList.vue";
+import StaticMapTemplate, { type CityPositionMap, type MapCityParsedRaw, type MapCityParsed} from "./components/StaticMapTemplate.vue";
+import { getGameConstStore, type GameConstStore } from "./GameConstStore";
+import { unwrap } from "@/util/unwrap";
 
 const queryYearMonth = ref<number>();
 const queryServerID = query.serverID;
+const serverNick = staticValues.serverNick;
 
 const lastYearMonth = ref(staticValues.lastYearMonth);
 const firstYearMonth = ref(staticValues.fisrtYearMonth);
 const currentYearMonth = ref(staticValues.currentYearMonth);
 
+const asyncReady = ref<boolean>(false);
+const gameConstStore = ref<GameConstStore>();
+provide("gameConstStore", gameConstStore);
+const storeP = getGameConstStore().then((store) => {
+  gameConstStore.value = store;
+});
+
+void Promise.all([storeP]).then(() => {
+  asyncReady.value = true;
+});
+
+const cityPosition = getCityPosition();
+const formatCityInfoText = formatCityInfo;
+const imagePath = window.pathConfig.gameImage;
+
 const history = ref<HistoryObj>();
 
-function* generateYearMonthList(): Generator<{
-  year: number;
-  month: number;
-  yearMonth: number;
-  current?: true;
-  queried: boolean;
-}> {
+function generateYearMonthList(): { text: string; value: number }[] {
+  const result: { text: string; value: number }[] = [];
   let yearMonth = firstYearMonth.value;
   while (yearMonth <= lastYearMonth.value) {
     const [year, month] = parseYearMonth(yearMonth);
-    yield {
-      year,
-      month,
-      yearMonth,
-      queried: queryYearMonth.value === yearMonth,
-    };
-    yearMonth++;
+    const info: string[] = [];
+    if (queryYearMonth.value === yearMonth) {
+      info.push("선택");
+    }
+    result.push({ text: `${year}년 ${month}월 ${info.length > 0 ? `(${info.join(", ")})` : ""}`, value: yearMonth });
+    yearMonth += 1;
   }
   const [year, month] = parseYearMonth(yearMonth);
-  yield {
-    year,
-    month,
-    yearMonth,
-    current: true,
-    queried: queryYearMonth.value === yearMonth,
-  };
+  const info: string[] = [];
+  if (queryYearMonth.value === yearMonth) {
+    info.push("선택");
+  }
+  info.push("현재");
+  result.push({ text: `${year}년 ${month}월 ${info.length > 0 ? `(${info.join(", ")})` : ""}`, value: yearMonth });
+  return result;
 }
 
 watch(queryYearMonth, async (yearMonth) => {
@@ -85,6 +133,15 @@ watch(queryYearMonth, async (yearMonth) => {
     return;
   }
 
+  if (yearMonth < firstYearMonth.value) {
+    queryYearMonth.value = firstYearMonth.value;
+    return;
+  }
+  if (yearMonth > lastYearMonth.value + 1) {
+    queryYearMonth.value = lastYearMonth.value + 1;
+    return;
+  }
+
   if (yearMonth > lastYearMonth.value) {
     try {
       const result = await SammoAPI.Global.GetCurrentHistory();

hwe/ts/v_history.ts

@@ -1,7 +1,7 @@
-import "@scss/board.scss";
+import "@scss/history.scss";
 import { createApp } from 'vue'
 import PageHistory from '@/PageHistory.vue';
-import BootstrapVue3 from 'bootstrap-vue-3'
+import { BootstrapVue3, BToastPlugin } from 'bootstrap-vue-3'
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import { auto500px } from "./util/auto500px";
 import { htmlReady } from "./util/htmlReady";
@@ -13,4 +13,4 @@ auto500px();
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PageHistory).use(BootstrapVue3).mount('#app');
+createApp(PageHistory).use(BootstrapVue3).use(BToastPlugin).mount('#app');