feat: 연감에서 국가랭킹 위치 조절 기능 추가

hwe/ts/PageHistory.vue

@@ -1,6 +1,13 @@
 <template>
   <BContainer v-if="asyncReady" id="container" :toast="{ root: true }" class="bg0 pageHistory">
-    <TopBackBar title="연감" type="close"></TopBackBar>
+    <TopBackBar title="연감" type="close">
+      <div>&nbsp;</div>
+      <!-- HACK: variant에 정상적인 값을 넣어야 해서...-->
+      <BDropdown class="optionMenu" right :variant="('sammo-base2' as 'primary')">
+        <template #button-content><i class="bi bi-gear-fill"></i>&nbsp;설정</template>
+        <BDropdownItem @click="isNationRankingBottom=!isNationRankingBottom">국가 순서 위치 변경(모바일 전용)</BDropdownItem>
+      </BDropdown>
+    </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 = unwrap(queryYearMonth) - 1">◀ 이전달</BButton>
@@ -9,24 +16,22 @@
       </div>
       <BButton class="col-md-1 col-2" @click="queryYearMonth = unwrap(queryYearMonth) + 1">다음달 ▶</BButton>
     </div>
-    <div v-if="history" class="mx-0">
-      <div class="row g-0">
-        <div class="map_position">
-          <MapViewer
-            :server-nick="serverNick"
-            :serverID="queryServerID"
-            :map-name="mapName"
-            :map-data="history.map"
-            :is-detail-map="true"
-            :city-position="cityPosition"
-            :format-city-info="formatCityInfoText"
-            :image-path="imagePath"
-            :disallow-click="true"
-          />
-        </div>
-        <div class="nation_position"><SimpleNationList :nations="history.nations" /></div>
+    <div v-if="history" id="map_holder" :class="['row', 'gx-0', isNationRankingBottom ? 'isNationRankingBottom' : '']">
+      <div class="map_position">
+        <MapViewer
+          :server-nick="serverNick"
+          :serverID="queryServerID"
+          :map-name="mapName"
+          :map-data="history.map"
+          :is-detail-map="true"
+          :city-position="cityPosition"
+          :format-city-info="formatCityInfoText"
+          :image-path="imagePath"
+          :disallow-click="true"
+        />
       </div>
-      <div class="world_history">
+      <div class="nation_position"><SimpleNationList :nations="history.nations" /></div>
+      <div class="world_history col-12">
         <div class="bg1 center s-border-tb"><b>중원 정세</b></div>
         <div class="content">
           <template v-for="(item, idx) in history.global_history" :key="idx">
@@ -35,7 +40,7 @@
           </template>
         </div>
       </div>
-      <div class="general_public_record">
+      <div class="general_public_record col-12">
         <div class="bg1 center s-border-tb"><b>장수 동향</b></div>
         <div class="content">
           <template v-for="(item, idx) in history.global_action" :key="idx">
@@ -68,7 +73,7 @@ declare const formatCityInfo: (city: MapCityParsedRaw) => MapCityParsed;
 </script>
 <script lang="ts" setup>
 import { onMounted, provide, ref, watch } from "vue";
-import { BContainer, BButton, BFormSelect } from "bootstrap-vue-3";
+import { BContainer, BButton, BFormSelect, BDropdown, BDropdownItem } from "bootstrap-vue-3";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import type { HistoryObj } from "./defs/API/Global";
@@ -80,6 +85,7 @@ import SimpleNationList from "./components/SimpleNationList.vue";
 import MapViewer, { type CityPositionMap, type MapCityParsedRaw, type MapCityParsed } from "./components/MapViewer.vue";
 import { getGameConstStore, type GameConstStore } from "./GameConstStore";
 import { unwrap } from "@/util/unwrap";
+import { useLocalStorage } from "@vueuse/core";
 
 const queryYearMonth = ref<number>();
 const queryServerID = query.serverID;
@@ -100,6 +106,8 @@ void Promise.all([storeP]).then(() => {
   asyncReady.value = true;
 });
 
+const isNationRankingBottom = useLocalStorage(`${serverNick}_isNationRankingBottom`, false);
+
 const mapName = staticValues.mapName;
 const cityPosition = getCityPosition();
 const formatCityInfoText = formatCityInfo;
@@ -147,8 +155,7 @@ watch(queryYearMonth, async (yearMonth) => {
       queryYearMonth.value = lastYearMonth.value + 1;
       return;
     }
-  }
-  else{
+  } else {
     if (yearMonth > lastYearMonth.value) {
       queryYearMonth.value = lastYearMonth.value;
       return;
@@ -198,3 +205,15 @@ onMounted(() => {
   })();
 });
 </script>
+
+<style lang="scss" scoped>
+
+.optionMenu::v-deep .dropdown-toggle {
+  height: 32px;
+}
+.isNationRankingBottom{
+  .nation_position{
+    order: 4;
+  }
+}
+</style>