devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
Hide_D
2022-05-16 23:41:32 +09:00
parent 19f936b6c0
commit cbafa4af61
1 changed files with 41 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/ts/PageHistory.vue
+41 -22
View File
@@ -1,6 +1,13 @@
<template> <template>
<BContainer v-if="asyncReady" id="container" :toast="{ root: true }" class="bg0 pageHistory"> <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="center row mx-0 s-border-tb">
<div class="col-md-1 col-2 year-selector text-end align-self-center">연월 선택:</div> <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> <BButton class="col-md-1 col-2" @click="queryYearMonth = unwrap(queryYearMonth) - 1">◀ 이전달</BButton>
@@ -9,24 +16,22 @@
</div> </div>
<BButton class="col-md-1 col-2" @click="queryYearMonth = unwrap(queryYearMonth) + 1">다음달 ▶</BButton> <BButton class="col-md-1 col-2" @click="queryYearMonth = unwrap(queryYearMonth) + 1">다음달 ▶</BButton>
</div> </div>
<div v-if="history" class="mx-0"> <div v-if="history" id="map_holder" :class="['row', 'gx-0', isNationRankingBottom ? 'isNationRankingBottom' : '']">
<div class="row g-0"> <div class="map_position">
<div class="map_position"> <MapViewer
<MapViewer :server-nick="serverNick"
:server-nick="serverNick" :serverID="queryServerID"
:serverID="queryServerID" :map-name="mapName"
:map-name="mapName" :map-data="history.map"
:map-data="history.map" :is-detail-map="true"
:is-detail-map="true" :city-position="cityPosition"
:city-position="cityPosition" :format-city-info="formatCityInfoText"
:format-city-info="formatCityInfoText" :image-path="imagePath"
:image-path="imagePath" :disallow-click="true"
:disallow-click="true" />
/>
</div>
<div class="nation_position"><SimpleNationList :nations="history.nations" /></div>
</div> </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="bg1 center s-border-tb"><b>중원 정세</b></div>
<div class="content"> <div class="content">
<template v-for="(item, idx) in history.global_history" :key="idx"> <template v-for="(item, idx) in history.global_history" :key="idx">
@@ -35,7 +40,7 @@
</template> </template>
</div> </div>
</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="bg1 center s-border-tb"><b>장수 동향</b></div>
<div class="content"> <div class="content">
<template v-for="(item, idx) in history.global_action" :key="idx"> <template v-for="(item, idx) in history.global_action" :key="idx">
@@ -68,7 +73,7 @@ declare const formatCityInfo: (city: MapCityParsedRaw) => MapCityParsed;
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, provide, ref, watch } from "vue"; 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 TopBackBar from "@/components/TopBackBar.vue";
import BottomBar from "@/components/BottomBar.vue"; import BottomBar from "@/components/BottomBar.vue";
import type { HistoryObj } from "./defs/API/Global"; 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 MapViewer, { type CityPositionMap, type MapCityParsedRaw, type MapCityParsed } from "./components/MapViewer.vue";
import { getGameConstStore, type GameConstStore } from "./GameConstStore"; import { getGameConstStore, type GameConstStore } from "./GameConstStore";
import { unwrap } from "@/util/unwrap"; import { unwrap } from "@/util/unwrap";
import { useLocalStorage } from "@vueuse/core";
const queryYearMonth = ref<number>(); const queryYearMonth = ref<number>();
const queryServerID = query.serverID; const queryServerID = query.serverID;
@@ -100,6 +106,8 @@ void Promise.all([storeP]).then(() => {
asyncReady.value = true; asyncReady.value = true;
}); });
const isNationRankingBottom = useLocalStorage(`${serverNick}_isNationRankingBottom`, false);
const mapName = staticValues.mapName; const mapName = staticValues.mapName;
const cityPosition = getCityPosition(); const cityPosition = getCityPosition();
const formatCityInfoText = formatCityInfo; const formatCityInfoText = formatCityInfo;
@@ -147,8 +155,7 @@ watch(queryYearMonth, async (yearMonth) => {
queryYearMonth.value = lastYearMonth.value + 1; queryYearMonth.value = lastYearMonth.value + 1;
return; return;
} }
} } else {
else{
if (yearMonth > lastYearMonth.value) { if (yearMonth > lastYearMonth.value) {
queryYearMonth.value = lastYearMonth.value; queryYearMonth.value = lastYearMonth.value;
return; return;
@@ -198,3 +205,15 @@ onMounted(() => {
})(); })();
}); });
</script> </script>
<style lang="scss" scoped>
.optionMenu::v-deep .dropdown-toggle {
height: 32px;
}
.isNationRankingBottom{
.nation_position{
order: 4;
}
}
</style>