jyp9/core
1
0
Fork 0
forked from devsam/core
Code Pull Requests Activity

feat: 500xp 모드에서 오른쪽 고속 이동 툴바

Browse Source
This commit is contained in:
Hide_D
2021-12-03 00:14:22 +09:00
parent 97b71347a6
commit 2d5e99a0d6
3 changed files with 156 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/index.php
+36 -16
View File
@@ -142,7 +142,6 @@ $nationColorType = substr($myNationStatic['color'] ?? '#000000', 1);
</head>
<body class="img_back sam-color-<?= $nationColorType ?>">
<div id="container" class="bg0">
<div class="row toolbars gx-0"><?= allButton($gameStor->npcmode == 1) ?></div>
<div class="tb_layout row gx-0">
@@ -216,7 +215,7 @@ $nationColorType = substr($myNationStatic['color'] ?? '#000000', 1);
<div class="col">운영자 메세지 : <span style='color:yellow;'><?= $gameStor->msg ?></span></div>
</div>
<div class="row">
<div class="col">
<div class="col" id="nation-msg-position">
<div>【 국가방침 】</div>
<div><?= nationMsg($generalObj) ?></div>
</div>
@@ -252,21 +251,21 @@ $nationColorType = substr($myNationStatic['color'] ?? '#000000', 1);
<div id="routeButtons" class="view-item row justify-content-center"><button type='button' class='btn btn-sammo-base2 col-2' id='refreshPage'>갱 신</button><button type='button' class='btn btn-sammo-base2 col-3' onclick="location.replace('../')">로비로</button></div>
</div>
<div class="row gx-0">
<div class="col-md-6"><?php myNationInfo($generalObj); ?></div>
<div class="col-md-6"><?php generalInfo($generalObj); ?></div>
<div class="col-md-6" id="nation-position"><?php myNationInfo($generalObj); ?></div>
<div class="col-md-6" id="general-position"><?php generalInfo($generalObj); ?></div>
</div>
<div class="row gx-0"><?= commandButton() ?></div>
<div class="row gx-0">
<div class="col-md-6">
<div class="col-md-6" id="general_public_record-position">
<div><b>장수 동향</b></div>
<div id="general_public_record" style="text-align:left;"><?= formatHistoryToHTML(getGlobalActionLogRecent(15)) ?></div>
</div>
<div class="col-md-6">
<div class="col-md-6" id="general_log-position">
<div><b>개인 기록</b></div>
<div id="general_log" style="text-align:left;"><?= formatHistoryToHTML(getGeneralActionLogRecent($me['no'], 15)) ?></div>
</div>
<div class="col-12">
<div class="col-12" id="world_history-position">
<div><b>중원 정세</b></div>
<div id="world_history" colspan=2 style="text-align:left;"><?= formatHistoryToHTML(getGlobalHistoryLogRecent(15)) ?></div>
</div>
@@ -285,33 +284,33 @@ $nationColorType = substr($myNationStatic['color'] ?? '#000000', 1);
</div>
<div class="row toolbars gx-0"><?= allButton($gameStor->npcmode == 1) ?></div>
<div id="message_board" class="row gx-0">
<div class="col-md-6 board_side bg0">
<div class="board_header bg0" id='public_talk_position'>전체 메시지(최고99자)</div>
<div class="col-md-6 board_side bg0" id='public_talk_position'>
<div class="board_header bg0">전체 메시지(최고99자)</div>
<section class="public_message">
<div class="d-grid"><button type="button" class="load_old_message btn btn-secondary" data-msg_type="public">이전 메시지 불러오기</button></div>
</section>
</div>
<div class="col-md-6 board_side bg0">
<div class="col-md-6 board_side bg0" id='national_talk_position'>
<div class="board_header bg0">국가 메시지(최고99자)</div>
<section class="national_message">
<div class="d-grid"><button type="button" class="load_old_message btn btn-secondary" data-msg_type="national">이전 메시지 불러오기</button></div>
<div class="d-grid"><button type="button" class="load_old_message btn btn-secondary" data-msg_type="national">이전 메시지 불러오기</button></div>
</section>
</div>
<div class="col-md-6 board_side bg0">
<div class="board_header bg0" id='secret_talk_position'>개인 메시지(최고99자)</div>
<div class="col-md-6 board_side bg0" id='private_talk_position'>
<div class="board_header bg0">개인 메시지(최고99자)</div>
<section class="private_message">
<div class="d-grid"><button type="button" class="load_old_message btn btn-secondary" data-msg_type="private">이전 메시지 불러오기</button></div>
<div class="d-grid"><button type="button" class="load_old_message btn btn-secondary" data-msg_type="private">이전 메시지 불러오기</button></div>
</section>
</div>
<div class="col-md-6 board_side bg0">
<div class="col-md-6 board_side bg0" id='diplomacy_talk_position'>
<div class="board_header bg0">외교 메시지(최고99자)</div>
<section class="diplomacy_message">
<div class="d-grid"><button type="button" class="load_old_message btn btn-secondary" data-msg_type="diplomacy">이전 메시지 불러오기</button></div>
<div class="d-grid"><button type="button" class="load_old_message btn btn-secondary" data-msg_type="diplomacy">이전 메시지 불러오기</button></div>
</section>
</div>
</div>
@@ -330,6 +329,27 @@ $nationColorType = substr($myNationStatic['color'] ?? '#000000', 1);
MessageBox("설문조사에 참여하시면 금{$develcost}과 유니크템을 드립니다! (우측 상단 설문조사 메뉴)");
}
?>
<div id="float-tabs">
<div class="btn-group-vertical">
<a href="#nation-msg-position" class="btn btn-sammo-nation">방침</a>
<a href="#mapZone" class="btn btn-sammo-nation">지도</a>
<a href="#reservedCommandList" class="btn btn-sammo-nation">명령</a>
<a href="#cityInfo" class="btn btn-sammo-nation">도시</a>
<a href="#nation-position" class="btn btn-sammo-nation">국가</a>
<a href="#general-position" class="btn btn-sammo-nation">장수</a>
</div>
<div class="btn-group-vertical">
<a href="#general_public_record-position" class="btn btn-secondary">동향</a>
<a href="#general_log-position" class="btn btn-secondary">개인</a>
<a href="#world_history-position" class="btn btn-secondary">정세</a>
</div>
<div class="btn-group-vertical">
<a href="#public_talk_position" class="btn btn-light active">전체</a>
<a href="#national_talk_position" class="btn btn-light">국가</a>
<a href="#private_talk_position" class="btn btn-light">개인</a>
<a href="#diplomacy_talk_position" class="btn btn-light">외교</a>
</div>
</div>
</body>
</html>
hwe/scss/main.scss
+43
View File
@@ -322,6 +322,7 @@ body {
}
@include media-breakpoint-down(md) {
.public_message,
.diplomacy_message,
.national_message,
@@ -473,4 +474,46 @@ body {
#mailbox_list option {
color: white;
background-color: black;
}
@include media-breakpoint-up(md) {
#float-tabs {
display: none;
}
}
@include media-breakpoint-down(md) {
#float-tabs {
position: fixed;
right: -1rem;
top: 10%;
width: 3rem;
.btn-group-vertical {
margin-bottom: 0.5em;
}
.btn {
padding-left: 0.5em;
padding-right: 1.5rem;
line-height: 1em;
}
}
}
@media (max-width: 560px) {
#float-tabs {
.btn {
opacity: 0.7;
}
.btn.active{
opacity: 1.0;
}
.btn:active{
opacity: 0.7;
}
}
}
hwe/ts/main.ts
+77 -3
View File
@@ -18,12 +18,12 @@ $(function ($) {
return false;
});
$('.open-window').on('click', function(e){
$('.open-window').on('click', function (e) {
e.preventDefault();
let target = $(e.target as HTMLAnchorElement);
while(target.attr('href') === undefined){
while (target.attr('href') === undefined) {
target = target.parent('a');
if(target.length == 0){
if (target.length == 0) {
return;
}
}
@@ -34,3 +34,77 @@ $(function ($) {
activateFlip();
initTooltip();
});
(() => {
let finInit = false;
const objects: {
target: HTMLElement,
button: HTMLAnchorElement,
}[] = [];
function init() {
const buttons = document.querySelectorAll<HTMLAnchorElement>('#float-tabs a.btn');
if (!buttons) {
return false;
}
finInit = true;
for (const button of buttons) {
const targetQuery = button.href.split('#');
if (!targetQuery || targetQuery.length < 2) {
continue;
}
const target = document.getElementById(targetQuery[1]);
if (!target) {
continue;
}
objects.push({ target, button });
}
}
function onScroll() {
if (!finInit && !init()) return;
for (const { button } of objects) {
button.classList.remove('active');
}
const screenHeight = window.innerHeight
for (const { target, button } of objects) {
const { top, bottom, height } = target.getBoundingClientRect();
if (top >= 0 && bottom <= screenHeight) {
//valid
}
else if (top <= 0 && bottom >= screenHeight) {
//valid
}
else if (top < 0) {
if (bottom / height < 0.8) {
continue;
}
}
else if (bottom > screenHeight) {
if ((screenHeight - top) / height < 0.8) {
continue;
}
}
button.classList.add('active');
}
}
function ready(fn: () => unknown) {
if (document.readyState != 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(() => {
init();
onScroll();
window.addEventListener('scroll', onScroll, true);
});
})();