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

wip: 메인 페이지 메인 정보란 레이아웃

Browse Source
This commit is contained in:
Hide_D
2023-03-09 02:20:17 +09:00
parent f2ce0edb50
commit 9548a391aa
1 changed files with 133 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/ts/PageFront.vue
+133 -45
View File
@@ -14,7 +14,7 @@
</nav>
<!-- eslint-disable-next-line vue/max-attributes-per-line -->
<BContainer v-if="asyncReady" id="container" :position="'position-relative'" :toast="{ root: true }" class="bg0">
<main class="row gx-0">
<main class="gx-0">
<div class="commonToolbar">툴바?</div>
<div class="scenarioName">시나리오</div>
<div v-if="frontInfo" class="gameInfo">
@@ -25,7 +25,8 @@
</div>
<div class="subNPCMode">NPC선택: {{ ["불가능", "가능", "선택 생성"][globalInfo.npcMode] }}</div>
<div class="subTournamentMode">토너먼트: 경기당 {{ calcTournamentTerm(globalInfo.turnterm) }}분</div>
<div class="subOtherSetting">기타 설정:
<div class="subOtherSetting">
기타 설정:
<AutorunInfo :autorunMode="globalInfo.autorunUser" />
</div>
<div class="subYearMonth">
@@ -52,46 +53,76 @@
<div v-else class="subVoteState" style="color: magenta">진행중인 설문 없음</div>
</div>
<div class="onlineNations">접속중인 국가: {{ globalInfo.onlineNations }}</div>
<div class="onlineUsers">접속자</div>
<div class="nationNotice">국가 방침</div>
<div>접속자</div>
<div class="d-grid"><BButton @click="tryRefresh">갱신</BButton></div>
<!-- TODO: 운영자 툴바는 어디에?-->
<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"
:disallowClick="false"
:genHref="genMapCityHref"
@city-click="onCityClick"
/>
<div id="ingameBoard">
<!-- TODO: 운영자 툴바는 어디에?-->
<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"
:disallowClick="false"
:genHref="genMapCityHref"
@city-click="onCityClick"
/>
</div>
<div class="reservedCommandZone">
<PartialReservedCommand id="reservedCommandPanel" ref="reservedCommandPanel" />
</div>
<div id="actionMiniPlate" class="gx-0 row">
<div class="col">
<div class="gx-1 row">
<div class="col-8 d-grid">
<button type="button" class="btn btn-sammo-base2" @click="tryRefresh">갱 신</button>
</div>
<div class="col-4 d-grid">
<button type="button" class="btn btn-sammo-base2" @click="moveLobby">로비로</button>
</div>
</div>
</div>
</div>
<div v-if="frontInfo" class="cityInfo">
<CityBasicCard :city="frontInfo.city" />
</div>
<div v-if="frontInfo" class="nationInfo">
<NationBasicCard :nation="frontInfo.nation" :global="globalInfo" />
</div>
<div v-if="frontInfo && generalInfo && nationStaticInfo" class="generalInfo">
<GeneralBasicCard
:general="generalInfo"
:nation="nationStaticInfo"
:troopInfo="frontInfo.general.troopInfo"
:turnTerm="globalInfo.turnterm"
:lastExecuted="lastExecuted"
/>
</div>
<div class="generalCommandToolbar">국가 툴바</div>
<div id="actionMiniPlateSub" class="gx-0 row">
<div class="col">
<div class="gx-1 row">
<div class="col-3 d-grid">
<button type="button" class="btn btn-dark" @click="scrollHardTo('reservedCommandPanel')">
명령으로
</button>
</div>
<div class="col-5 d-grid">
<button type="button" class="btn btn-sammo-base2 refreshPage">갱 신</button>
</div>
<div class="col-4 d-grid">
<button type="button" class="btn btn-sammo-base2" @click="moveLobby">로비로</button>
</div>
</div>
</div>
</div>
</div>
<div class="reservedCommandZone">
<PartialReservedCommand ref="reservedCommandPanel" />
</div>
<div v-if="frontInfo" class="cityInfo">
<CityBasicCard :city="frontInfo.city" />
</div>
<div v-if="frontInfo" class="nationInfo col-12 col-md-6">
<NationBasicCard :nation="frontInfo.nation" :global="globalInfo" />
</div>
<div v-if="frontInfo && generalInfo && nationStaticInfo" class="generalInfo col-12 col-md-6">
<GeneralBasicCard
:general="generalInfo"
:nation="nationStaticInfo"
:troopInfo="frontInfo.general.troopInfo"
:turnTerm="globalInfo.turnterm"
:lastExecuted="lastExecuted"
/>
</div>
<div class="generalCommandToolbar">국가 툴바</div>
<div class="actionMiniPlate">갱신/로비 버튼</div>
<div class="PublicRecord">
<div class="title">장수 동향</div>
<template v-for="[idx, rawText] of globalRecords.toArray()" :key="idx">
@@ -144,7 +175,6 @@ declare const staticValues: {
declare const getCityPosition: () => CityPositionMap;
declare const formatCityInfo: (city: MapCityParsedRaw) => MapCityParsed;
</script>
<script lang="ts" setup>
import { BContainer, BButton, useToast } from "bootstrap-vue-3";
@@ -169,6 +199,7 @@ import { calcTournamentTerm } from "./utilGame";
import MapViewer, { type CityPositionMap, type MapCityParsed, type MapCityParsedRaw } from "./components/MapViewer.vue";
import PartialReservedCommand from "./PartialReservedCommand.vue";
import AutorunInfo from "./components/AutorunInfo.vue";
import { scrollHardTo } from "./util/scrollHardTo";
const { serverName, serverNick, serverID } = staticValues;
@@ -191,6 +222,10 @@ let responseLock = false;
const msgPanel = ref<InstanceType<typeof MessagePanel>>();
function moveLobby() {
location.replace("../");
}
async function tryRefresh() {
msgPanel.value?.tryRefresh();
@@ -387,7 +422,7 @@ const cityPosition = getCityPosition();
const formatCityInfoText = formatCityInfo;
const imagePath = window.pathConfig.gameImage;
function genMapCityHref(cityID: number){
function genMapCityHref(cityID: number) {
return `b_currentCity.php?citylist=${cityID}`;
}
@@ -417,9 +452,8 @@ watch(refreshCounter, async () => {
}
});
const reservedCommandPanel = ref<InstanceType<typeof PartialReservedCommand> | null>(null);
watch(refreshCounter, async() => {
watch(refreshCounter, async () => {
reservedCommandPanel.value?.reloadCommandList();
});
</script>
@@ -440,6 +474,10 @@ watch(refreshCounter, async() => {
width: 500px;
}
#ingameBoard {
display: grid;
}
@include media-500px {
#outBlock {
position: absolute;
@@ -460,17 +498,67 @@ watch(refreshCounter, async() => {
#container {
width: 500px;
> main > div {
min-height: 100px;
/* 테스트 */
}
}
#ingameBoard {
grid-template-columns: 1fr;
}
#actionMiniPlate{
display: none;
}
}
@include media-1000px {
#container {
width: 1000px;
}
#ingameBoard {
grid-template-columns: 500px 200px 300px;
}
.mapView{
grid-column: 1 / 3;
grid-row: 1;
}
.reservedCommandZone{
grid-column: 3;
grid-row: 1 / 3;
}
.cityInfo {
grid-column: 1 / 3;
grid-row: 2 / 4;
}
#actionMiniPlate{
grid-column: 3;
grid-row: 3;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.generalCommandToolbar{
grid-column: 1 / 4;
}
.nationInfo{
grid-column: 1;
}
.generalInfo{
grid-column: 2 / 4;
}
#actionMiniPlateSub{
display: none;
}
}
</style>