refac: 메인 페이지 바 표시 형식 변경
- 상 하단 분리 대신 하단의 position:fixed bar로 변경 - iPhone에서 좌우 스크롤이 유도되는 것은 완전 해결되지 않음 - 모든 컨텐츠가 viewport 밖을 넘어서지 않도록 않도록 해야 할 것으로 - 예: 500px viewport, 498px content
This commit is contained in:
+51
-52
@@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<div id="outBlock" :class="`sam-color-${nationStaticInfo?.color.substring(1, 7) ?? '000000'}`">
|
||||
<div id="outBlock2">
|
||||
<!-- eslint-disable-next-line vue/max-attributes-per-line -->
|
||||
<BContainer v-if="asyncReady" id="container" :position="'position-relative'" :toast="{ root: true }" class="bg0">
|
||||
<BContainer
|
||||
v-if="asyncReady"
|
||||
id="container"
|
||||
:position="'position-relative'"
|
||||
:toast="{ root: true }"
|
||||
:class="['bg0', nationColorClass]"
|
||||
>
|
||||
<main class="gx-0">
|
||||
<div class="commonToolbar">
|
||||
<GlobalMenu
|
||||
@@ -157,21 +161,20 @@
|
||||
</main>
|
||||
</BContainer>
|
||||
<div v-else>서버 갱신 중입니다.</div>
|
||||
</div>
|
||||
<GameBottomBar
|
||||
v-if="frontInfo && globalMenu"
|
||||
id="mobileBottomBar"
|
||||
:class="nationColorClass"
|
||||
:frontInfo="frontInfo"
|
||||
:globalMenu="globalMenu"
|
||||
@refresh="tryRefresh"
|
||||
/>
|
||||
<BModal v-model="showVersionInfo" title="게임 정보">
|
||||
{{ gameConstStore?.gameConst.title }}<br>
|
||||
{{ gameConstStore?.version }}<br>
|
||||
{{ gameConstStore?.gameConst.title }}<br />
|
||||
{{ gameConstStore?.version }}<br />
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<span v-html="gameConstStore?.gameConst.banner"></span>
|
||||
</BModal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
declare const staticValues: {
|
||||
@@ -229,15 +232,15 @@ const storeP = getGameConstStore().then((store) => {
|
||||
gameConstStore.value = store;
|
||||
});
|
||||
|
||||
const menuCallList: Record<string, ()=>unknown> = {
|
||||
showVersion:()=>{
|
||||
console.log('version');
|
||||
const menuCallList: Record<string, () => unknown> = {
|
||||
showVersion: () => {
|
||||
console.log("version");
|
||||
showVersionInfo.value = !showVersionInfo.value;
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function reqMenuCall(key:string){
|
||||
if(!(key in menuCallList)){
|
||||
function reqMenuCall(key: string) {
|
||||
if (!(key in menuCallList)) {
|
||||
console.error(`메뉴 호출 실패: ${key}`);
|
||||
return;
|
||||
}
|
||||
@@ -318,7 +321,7 @@ async function tryRefresh() {
|
||||
}
|
||||
toasts.danger({
|
||||
title: "갱신 실패",
|
||||
body: response.reason,
|
||||
body: response.reason
|
||||
});
|
||||
return;
|
||||
}
|
||||
@@ -328,10 +331,10 @@ async function tryRefresh() {
|
||||
//TODO: 서버와 클라이언트 버전이 다르다면 갱신 필요
|
||||
} catch (e) {
|
||||
responseLock = false;
|
||||
if(isString(e)){
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
body: e
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
@@ -352,7 +355,7 @@ onMounted(async () => {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "메뉴 갱신 실패",
|
||||
body: `${e}`,
|
||||
body: `${e}`
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
@@ -372,6 +375,15 @@ const generalRecords = ref(new Denque<[number, string]>());
|
||||
const globalRecords = ref(new Denque<[number, string]>());
|
||||
const worldHistory = ref(new Denque<[number, string]>());
|
||||
|
||||
const nationColorClass = ref('sam-color-000000');
|
||||
watch(nationStaticInfo, (newNation)=>{
|
||||
if(!newNation){
|
||||
nationColorClass.value = 'sam-color-000000';
|
||||
return;
|
||||
}
|
||||
nationColorClass.value = `sam-color-${newNation.color.substring(1, 7)}`;
|
||||
});
|
||||
|
||||
let generalInfoLock = false;
|
||||
|
||||
watch(refreshCounter, async () => {
|
||||
@@ -382,7 +394,7 @@ watch(refreshCounter, async () => {
|
||||
generalInfoLock = true;
|
||||
const response = await SammoAPI.General.GetFrontInfo({
|
||||
lastGeneralRecordID: lastGeneralRecordID.value,
|
||||
lastWorldHistoryID: lastWorldHistoryID.value,
|
||||
lastWorldHistoryID: lastWorldHistoryID.value
|
||||
});
|
||||
generalInfoLock = false;
|
||||
|
||||
@@ -405,14 +417,14 @@ watch(refreshCounter, async () => {
|
||||
level: rawNation.level,
|
||||
capital: rawNation.capital,
|
||||
gennum: rawNation.gennum,
|
||||
power: rawNation.power,
|
||||
power: rawNation.power
|
||||
};
|
||||
|
||||
const recentRecord = response.recentRecord;
|
||||
const recordIter = [
|
||||
["flushGeneral", generalRecords, "general", lastGeneralRecordID],
|
||||
["flushGlobal", globalRecords, "global", lastGeneralRecordID],
|
||||
["flushHistory", worldHistory, "history", lastWorldHistoryID],
|
||||
["flushHistory", worldHistory, "history", lastWorldHistoryID]
|
||||
] as const;
|
||||
|
||||
let haveNewRecord = false;
|
||||
@@ -438,21 +450,20 @@ watch(refreshCounter, async () => {
|
||||
recordRef.value.unshift([id, formatLog(record)]);
|
||||
}
|
||||
}
|
||||
if (refreshCounter.value <= 1){
|
||||
console.log('초기화 완료');
|
||||
}
|
||||
else if (haveNewRecord) {
|
||||
if (refreshCounter.value <= 1) {
|
||||
console.log("초기화 완료");
|
||||
} else if (haveNewRecord) {
|
||||
toasts.info(
|
||||
{
|
||||
title: "갱신 완료",
|
||||
body: `동향 변경이 있습니다.`,
|
||||
body: `동향 변경이 있습니다.`
|
||||
},
|
||||
{ delay: 100 * 15 }
|
||||
);
|
||||
} else {
|
||||
toasts.success(
|
||||
{
|
||||
title: "갱신 완료",
|
||||
title: "갱신 완료"
|
||||
},
|
||||
{ delay: 100 * 5 }
|
||||
);
|
||||
@@ -464,10 +475,10 @@ watch(refreshCounter, async () => {
|
||||
toasts.warning(
|
||||
{
|
||||
title: "설문조사 안내",
|
||||
body: `새로운 설문조사가 있습니다.`,
|
||||
body: `새로운 설문조사가 있습니다.`
|
||||
},
|
||||
{
|
||||
delay: 1000 * 60,
|
||||
delay: 1000 * 60
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -476,7 +487,7 @@ watch(refreshCounter, async () => {
|
||||
console.error(e);
|
||||
toasts.danger({
|
||||
title: "최근 정보 갱신 실패",
|
||||
body: `${e}`,
|
||||
body: `${e}`
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -506,13 +517,13 @@ watch(refreshCounter, async () => {
|
||||
try {
|
||||
map.value = await SammoAPI.Global.GetMap({
|
||||
neutralView: 0,
|
||||
showMe: 1,
|
||||
showMe: 1
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
toasts.danger({
|
||||
title: "지도 갱신 실패",
|
||||
body: `${e}`,
|
||||
body: `${e}`
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -525,6 +536,7 @@ watch(refreshCounter, async () => {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@scss/common/break_500px.scss";
|
||||
|
||||
:deep() {
|
||||
@import "@scss/gameEvent.scss";
|
||||
@import "@scss/battleLog.scss";
|
||||
@@ -534,12 +546,6 @@ watch(refreshCounter, async () => {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#outBlock {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.generalInfo {
|
||||
width: 500px;
|
||||
}
|
||||
@@ -556,30 +562,23 @@ watch(refreshCounter, async () => {
|
||||
}
|
||||
}
|
||||
|
||||
.generalCommandToolbar{
|
||||
.generalCommandToolbar {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@include media-500px {
|
||||
#outBlock {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
#mobileBottomBar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#outBlock2 {
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 500px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
#ingameBoard {
|
||||
|
||||
Reference in New Issue
Block a user