diff --git a/hwe/index.php b/hwe/index.php index efc8d46a..e58b756e 100644 --- a/hwe/index.php +++ b/hwe/index.php @@ -142,7 +142,6 @@ $nationColorType = substr($myNationStatic['color'] ?? '#000000', 1); -
npcmode == 1) ?>
@@ -216,7 +215,7 @@ $nationColorType = substr($myNationStatic['color'] ?? '#000000', 1);
운영자 메세지 : msg ?>
-
+
【 국가방침 】
@@ -252,21 +251,21 @@ $nationColorType = substr($myNationStatic['color'] ?? '#000000', 1);
-
-
+
+
-
+
장수 동향
-
+
개인 기록
-
+
중원 정세
@@ -285,33 +284,33 @@ $nationColorType = substr($myNationStatic['color'] ?? '#000000', 1);
npcmode == 1) ?>
-
-
전체 메시지(최고99자)
+
+
전체 메시지(최고99자)
-
+
국가 메시지(최고99자)
-
+
-
-
개인 메시지(최고99자)
+
+
개인 메시지(최고99자)
-
+
-
+
외교 메시지(최고99자)
-
+
@@ -330,6 +329,27 @@ $nationColorType = substr($myNationStatic['color'] ?? '#000000', 1); MessageBox("설문조사에 참여하시면 금{$develcost}과 유니크템을 드립니다! (우측 상단 설문조사 메뉴)"); } ?> +
+
+ 방침 + 지도 + 명령 + 도시 + 국가 + 장수 +
+
+ 동향 + 개인 + 정세 +
+
+ 전체 + 국가 + 개인 + 외교 +
+
\ No newline at end of file diff --git a/hwe/scss/main.scss b/hwe/scss/main.scss index fbf8d991..d581cda3 100644 --- a/hwe/scss/main.scss +++ b/hwe/scss/main.scss @@ -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; + } + } } \ No newline at end of file diff --git a/hwe/ts/main.ts b/hwe/ts/main.ts index 77c733db..d5eb4f1d 100644 --- a/hwe/ts/main.ts +++ b/hwe/ts/main.ts @@ -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('#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); + }); +})();