feat,refac: 중원 정보 페이지
This commit is contained in:
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<BContainer v-if="asyncReady" id="container" :toast="{ root: true }" class="pageGlobalDiplomacy">
|
||||
<TopBackBar title="중원 정보"></TopBackBar>
|
||||
<div class="diplomacy bg0">
|
||||
<div class="s-border-tb center tb-title" style="background-color: blue">외교 현황</div>
|
||||
<div class="diplomacy_area">
|
||||
<table v-if="diplomacy" class="center" style="margin: auto; min-width: 400px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th
|
||||
class="thead-nation"
|
||||
v-for="nation of diplomacy.nations"
|
||||
:key="nation.nation"
|
||||
:style="{
|
||||
color: isBrightColor(nation.color) ? '#000' : '#fff',
|
||||
backgroundColor: nation.color,
|
||||
}"
|
||||
>
|
||||
{{ nation.name }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="me of diplomacy.nations" :key="me.nation">
|
||||
<th
|
||||
class="tbody-nation"
|
||||
:style="{
|
||||
color: isBrightColor(me.color) ? '#000' : '#fff',
|
||||
backgroundColor: me.color,
|
||||
}"
|
||||
>
|
||||
{{ me.name }}
|
||||
</th>
|
||||
<template v-for="you of diplomacy.nations" :key="you.nation">
|
||||
<td class="tbody-cell" v-if="me.nation == you.nation">＼</td>
|
||||
<td
|
||||
class="tbody-cell"
|
||||
style="background-color: #660000"
|
||||
v-else-if="me.nation == diplomacy.myNationID || you.nation == diplomacy.myNationID"
|
||||
v-html="infomativeStateCharMap[diplomacy.diplomacyList[me.nation][you.nation]]"
|
||||
/>
|
||||
<td
|
||||
class="tbody-cell"
|
||||
v-else
|
||||
v-html="neutralStateCharMap[diplomacy.diplomacyList[me.nation][you.nation]]"
|
||||
/>
|
||||
</template>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td :colspan="Object.keys(diplomacy.nations).length + 1" class="center">
|
||||
불가침 :
|
||||
<span style="color: limegreen">@</span>, 통상 : ㆍ, 선포 : <span style="color: magenta">▲</span>, 교전 :
|
||||
<span style="color: red">★</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="map_area mx-0 bg0">
|
||||
<div class="s-border-tb center tb-title" style="background-color: green">중원 지도</div>
|
||||
<div class="row g-0">
|
||||
<div class="map_position">
|
||||
<MapViewer
|
||||
v-if="map"
|
||||
:server-nick="serverNick"
|
||||
:serverID="serverID"
|
||||
:map-name="unwrap(gameConstStore?.gameConst.mapName)"
|
||||
:model-value="map"
|
||||
:is-detail-map="true"
|
||||
:city-position="cityPosition"
|
||||
:format-city-info="formatCityInfoText"
|
||||
:image-path="imagePath"
|
||||
:disallow-click="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="nation_position"><SimpleNationList v-if="diplomacy" :nations="diplomacy.nations" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<BottomBar></BottomBar>
|
||||
</BContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
declare const staticValues: {
|
||||
serverNick: string;
|
||||
serverID: string;
|
||||
};
|
||||
|
||||
declare const getCityPosition: () => CityPositionMap;
|
||||
declare const formatCityInfo: (city: MapCityParsedRaw) => MapCityParsed;
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, provide, ref } from "vue";
|
||||
import { BContainer, useToast } from "bootstrap-vue-3";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
import BottomBar from "@/components/BottomBar.vue";
|
||||
import { SammoAPI } from "./SammoAPI";
|
||||
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 type { diplomacyState, MapResult } from "./defs";
|
||||
import type { GetDiplomacyResponse } from "./defs/API/Global";
|
||||
import { isString } from "lodash";
|
||||
import { isBrightColor } from "@/util/isBrightColor";
|
||||
|
||||
const serverID = staticValues.serverID;
|
||||
const serverNick = staticValues.serverNick;
|
||||
|
||||
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 infomativeStateCharMap: Record<diplomacyState, string> = {
|
||||
0: '<span style="color:red;">★</span>',
|
||||
1: '<span style="color:magenta;">▲</span>',
|
||||
2: "ㆍ",
|
||||
7: '<span style="color:green;">@</span>',
|
||||
};
|
||||
|
||||
const neutralStateCharMap: Record<diplomacyState, string> = {
|
||||
0: '<span style="color:red;">★</span>',
|
||||
1: '<span style="color:magenta;">▲</span>',
|
||||
2: "",
|
||||
7: "에러",
|
||||
};
|
||||
|
||||
const cityPosition = getCityPosition();
|
||||
const formatCityInfoText = formatCityInfo;
|
||||
const imagePath = window.pathConfig.gameImage;
|
||||
|
||||
const map = ref<MapResult>();
|
||||
const diplomacy = ref<GetDiplomacyResponse>();
|
||||
|
||||
const toasts = unwrap(useToast());
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
map.value = await SammoAPI.Global.GetMap({
|
||||
neutralView: 0,
|
||||
showMe: 1,
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
diplomacy.value = await SammoAPI.Global.GetDiplomacy();
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.diplomacy_area {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.thead-nation {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
text-align: end;
|
||||
padding-bottom: 1ch;
|
||||
padding-top: 1ch;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
min-width: 1ch;
|
||||
max-width: 3ch;
|
||||
font-weight: normal;
|
||||
}
|
||||
.tbody-nation {
|
||||
text-align: end;
|
||||
padding-right: 1ch;
|
||||
padding-left: 1ch;
|
||||
min-width: 10ch;
|
||||
font-weight: normal;
|
||||
}
|
||||
.diplomacy {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.map_area {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.tb-title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.tbody-cell {
|
||||
border-left: solid 1px gray;
|
||||
border-top: solid 1px gray;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
+4
-1
@@ -58,7 +58,10 @@ const apiRealPath = {
|
||||
NumVar('month', GET as APICallT<undefined, GetHistoryResponse>
|
||||
))),
|
||||
GetCurrentHistory: GET as APICallT<undefined, GetCurrentHistoryResponse>,
|
||||
GetMap: GET as APICallT<undefined, MapResult>,
|
||||
GetMap: GET as APICallT<{
|
||||
neutralView?: 0 | 1,
|
||||
showMe?: 0 | 1,
|
||||
}, MapResult>,
|
||||
GetCachedMap: GET as APICallT<undefined, CachedMapResult>,
|
||||
GetDiplomacy: GET as APICallT<undefined, GetDiplomacyResponse>,
|
||||
},
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
"v_nationStratFinan": "v_nationStratFinan.ts",
|
||||
"v_processing": "v_processing.ts",
|
||||
"v_nationBetting": "v_nationBetting.ts",
|
||||
"v_nationGeneral": "v_nationGeneral.ts"
|
||||
"v_nationGeneral": "v_nationGeneral.ts",
|
||||
"v_globalDiplomacy": "v_globalDiplomacy"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import "@scss/history.scss";
|
||||
import { createApp } from 'vue'
|
||||
import PageGlobalDiplomacy from '@/PageGlobalDiplomacy.vue';
|
||||
import { BootstrapVue3, BToastPlugin } from 'bootstrap-vue-3'
|
||||
import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
|
||||
import { auto500px } from "./util/auto500px";
|
||||
import { htmlReady } from "./util/htmlReady";
|
||||
import { insertCustomCSS } from "./util/customCSS";
|
||||
|
||||
setAxiosXMLHttpRequest();
|
||||
auto500px();
|
||||
|
||||
htmlReady(() => {
|
||||
insertCustomCSS();
|
||||
});
|
||||
createApp(PageGlobalDiplomacy).use(BootstrapVue3).use(BToastPlugin).mount('#app');
|
||||
Reference in New Issue
Block a user