feat: 메인 페이지 지도 표기(wip)

This commit is contained in:
2023-03-09 02:20:16 +09:00
parent 35ae7d95e7
commit 073d1c2236
3 changed files with 79 additions and 21 deletions
+2
View File
@@ -1,3 +1,5 @@
@charset 'utf-8';
.map_title_tooltiptext .tooltip-inner {
max-width: 220px;
width: 220px;
+75 -21
View File
@@ -18,34 +18,55 @@
<div class="commonToolbar">툴바?</div>
<div class="scenarioName">시나리오</div>
<div v-if="frontInfo" class="gameInfo">
<div class="subScenarioName">{{globalInfo.scenarioText}}</div>
<div class="subNPCType">NPC , 상성: {{globalInfo.extendedGeneral?'확장':'표준'}} {{globalInfo.isFiction?'가상':'사실'}}</div>
<div class="subNPCMode">NPC선택: {{['불가능','가능','선택 생성'][globalInfo.npcMode]}}</div>
<div class="subTournamentMode">토너먼트: 경기당 {{calcTournamentTerm(globalInfo.turnterm)}}</div>
<div class="subScenarioName">{{ globalInfo.scenarioText }}</div>
<div class="subNPCType">
NPC , 상성: {{ globalInfo.extendedGeneral ? "확장" : "표준" }}
{{ globalInfo.isFiction ? "가상" : "사실" }}
</div>
<div class="subNPCMode">NPC선택: {{ ["불가능", "가능", "선택 생성"][globalInfo.npcMode] }}</div>
<div class="subTournamentMode">토너먼트: 경기당 {{ calcTournamentTerm(globalInfo.turnterm) }}</div>
<div class="subOtherSetting">기타 설정: (TODO)자율행동[내정, 훈련/사기진작, 사령턴, 24시간 유효]</div>
<div class="subYearMonth">현재: {{globalInfo.year}} {{globalInfo.month}} ({{globalInfo.turnterm}} 서버)</div>
<div class="subOnlineUserCnt">전체 접속자 : {{globalInfo.onlineUserCnt.toLocaleString()}}</div>
<div class="subAPILimit">턴당 갱신횟수: {{globalInfo.apiLimit.toLocaleString()}}</div>
<div class="subYearMonth">
현재: {{ globalInfo.year }} {{ globalInfo.month }} ({{ globalInfo.turnterm }} 서버)
</div>
<div class="subOnlineUserCnt">전체 접속자 : {{ globalInfo.onlineUserCnt.toLocaleString() }}</div>
<div class="subAPILimit">턴당 갱신횟수: {{ globalInfo.apiLimit.toLocaleString() }}</div>
<div class="subGeneralCnt">
등록 장수: 유저
{{globalInfo.genCount.toLocaleString()}} / {{globalInfo.generalCntLimit.toLocaleString()}}
{{ globalInfo.genCount.toLocaleString() }} / {{ globalInfo.generalCntLimit.toLocaleString() }}
+ NPC TODO:NPC Cnt
</div>
<div class="subTournamentState">TODO: tournament Text</div>
<div class="subLastExecuted" :style="{color:serverLocked?'magenta':'cyan'}">동작 시각: {{formatTime(lastExecuted).substring(5)}}</div>
<div v-if="globalInfo.auctionCount" class="subAuctionState" style="color:cyan">{{globalInfo.auctionCount.toLocaleString()}} 거래 진행중</div>
<div v-else class="subAcutionState" style="color:magenta">진행중인 거래 없음</div>
<div v-if="globalInfo.lastVote" class="subVoteState">
<span style="color:cyan">설문 진행 : </span><span>{{globalInfo.lastVote.title}}</span>
<div class="subLastExecuted" :style="{ color: serverLocked ? 'magenta' : 'cyan' }">
동작 시각: {{ formatTime(lastExecuted).substring(5) }}
</div>
<div v-else class="subVoteState" style="color:magenta">진행중인 설문 없음</div>
<div v-if="globalInfo.auctionCount" class="subAuctionState" style="color: cyan">
{{ globalInfo.auctionCount.toLocaleString() }} 거래 진행중
</div>
<div v-else class="subAcutionState" style="color: magenta">진행중인 거래 없음</div>
<div v-if="globalInfo.lastVote" class="subVoteState">
<span style="color: cyan">설문 진행 : </span><span>{{ globalInfo.lastVote.title }}</span>
</div>
<div v-else class="subVoteState" style="color: magenta">진행중인 설문 없음</div>
</div>
<div class="onlineNations">접속중인 국가: {{globalInfo.onlineNations}}</div>
<div class="onlineNations">접속중인 국가: {{ globalInfo.onlineNations }}</div>
<div class="nationNotice">국가 방침</div>
<div>접속자</div>
<div class="d-grid"><BButton @click="tryRefresh">갱신</BButton></div>
<!-- TODO: 운영자 툴바는 어디에?-->
<div class="mapView">지도</div>
<div class="mapView">
<MapViewer
v-if="map"
:serverNick="serverNick"
:serverID="serverID"
:mapName="unwrap(gameConstStore?.gameConst.mapName)"
:isDetailMap="true"
:cityPosition="cityPosition"
:imagePath="imagePath"
:formatCityInfo="formatCityInfoText"
:mapData="map"
/>
</div>
<div class="reservedCommandZone">예턴</div>
<div v-if="frontInfo" class="cityInfo">
<CityBasicCard :city="frontInfo.city" />
@@ -86,7 +107,14 @@
</template>
</div>
<div class="commonToolbar">툴바?</div>
<MessagePanel v-if="generalInfo" :generalID="generalInfo.no" :generalName="generalInfo.name" :nationID="generalInfo.nation" :permissionLevel="generalInfo.permission" ref="msgPanel" />
<MessagePanel
v-if="generalInfo"
:generalID="generalInfo.no"
:generalName="generalInfo.name"
:nationID="generalInfo.nation"
:permissionLevel="generalInfo.permission"
ref="msgPanel"
/>
<div class="commonToolbar">툴바?</div>
</main>
</BContainer>
@@ -106,6 +134,10 @@ declare const staticValues: {
mapName: string;
unitSet: string;
};
declare const getCityPosition: () => CityPositionMap;
declare const formatCityInfo: (city: MapCityParsedRaw) => MapCityParsed;
</script>
<script lang="ts" setup>
import { BContainer, BButton, useToast } from "bootstrap-vue-3";
@@ -124,9 +156,10 @@ import NationBasicCard from "./components/NationBasicCard.vue";
import GeneralBasicCard from "./components/GeneralBasicCard.vue";
import MessagePanel from "./components/MessagePanel.vue";
import type { GeneralListItemP1 } from "./defs/API/Nation";
import type { NationStaticItem } from "./defs";
import type { MapResult, NationStaticItem } from "./defs";
import { formatTime } from "./util/formatTime";
import { calcTournamentTerm } from "./utilGame";
import MapViewer, { type CityPositionMap, type MapCityParsed, type MapCityParsedRaw } from "./components/MapViewer.vue";
const { serverName, serverNick, serverID } = staticValues;
@@ -150,7 +183,6 @@ let responseLock = false;
const msgPanel = ref<InstanceType<typeof MessagePanel>>();
async function tryRefresh() {
msgPanel.value?.tryRefresh();
if (responseLock) {
@@ -225,6 +257,7 @@ watch(refreshCounter, async () => {
}
try {
recordLock = true;
const response = await SammoAPI.Global.GetRecentRecord({
lastGeneralRecordID: lastGeneralRecordID.value,
lastWorldHistoryID: lastWorldHistoryID.value,
@@ -294,8 +327,8 @@ watch(refreshCounter, async () => {
});
const frontInfo = ref<GetFrontInfoResponse>();
const globalInfo = ref<GetFrontInfoResponse['global']>({} as GetFrontInfoResponse['global'])
const generalInfo = ref<GetFrontInfoResponse['general']>();
const globalInfo = ref<GetFrontInfoResponse["global"]>({} as GetFrontInfoResponse["global"]);
const generalInfo = ref<GetFrontInfoResponse["general"]>();
const nationStaticInfo = ref<NationStaticItem>();
let generalInfoLock = false;
@@ -338,6 +371,27 @@ watch(refreshCounter, async () => {
});
}
});
const map = ref<MapResult>();
const cityPosition = getCityPosition();
const formatCityInfoText = formatCityInfo;
const imagePath = window.pathConfig.gameImage;
watch(refreshCounter, async () => {
try {
map.value = await SammoAPI.Global.GetMap({
neutralView: 0,
showMe: 1,
});
} catch (e) {
console.error(e);
toasts.danger({
title: "지도 갱신 실패",
body: `${e}`,
});
}
});
</script>
<style lang="scss" scoped>
@import "@scss/common/break_500px.scss";
+2
View File
@@ -18,6 +18,7 @@ Session::requireGameLogin()->setReadOnly();
//TODO: 국가정보 받아오기
//TODO: 시나리오 정보는 gameConst 받아올때 가져오기
$mapName = GameConst::$mapName;
?>
<!DOCTYPE html>
@@ -38,6 +39,7 @@ Session::requireGameLogin()->setReadOnly();
]
], false) ?>
<?= WebUtil::printJS('../d_shared/common_path.js') ?>
<?= WebUtil::printJS("js/map/theme_{$mapName}.js") ?>
<?= WebUtil::printCSS('../d_shared/common.css') ?>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
<?= WebUtil::printDist('vue', 'v_front', true) ?>