From 2767bf70d9f449d9e422ce01181e21d9666ad3bb Mon Sep 17 00:00:00 2001
From: hide_d <hided62@gmail.com>
Date: Thu, 16 Dec 2021 02:26:07 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=82=B4=20=EC=A0=95=EB=B3=B4/?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95,=20500px/1000px=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/b_myPage.php         | 247 ++++++++++++++++++++-------------------
 hwe/scss/myPage.scss     |  33 ++++++
 hwe/ts/myPage.ts         |  14 ++-
 hwe/ts/util/auto500px.ts |  34 ++++--
 4 files changed, 195 insertions(+), 133 deletions(-)
 create mode 100644 hwe/scss/myPage.scss
diff --git a/hwe/b_myPage.php b/hwe/b_myPage.php
index 48a1ff09..0eee6220 100644
--- a/hwe/b_myPage.php
+++ b/hwe/b_myPage.php
@@ -48,7 +48,7 @@ $use_auto_nation_turn = $me->getAuxVar('use_auto_nation_turn') ?? 1;
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=1024" />
+    <meta name="viewport" content="width=500" />
     <title><?= UniqueConst::$serverName ?>: 내정보</title>
     <script>
         var availableDieImmediately = <?= $availableDieImmediately ? 'true' : 'false' ?>;
@@ -56,140 +56,151 @@ $use_auto_nation_turn = $me->getAuxVar('use_auto_nation_turn') ?? 1;
     <?= 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::printJS('../d_shared/common_path.js') ?>
-    <?= WebUtil::printDist('ts', ['common', 'myPage']) ?>
+    <?= WebUtil::printDist('ts', ['myPage']) ?>
 </head>
 
 <body>
-    <table align=center width=1000 class='tb_layout bg0'>
-        <tr>
-            <td>내 정 보<br><?= backButton() ?></td>
-        </tr>
-    </table>
-    <table align=center width=1000 class='tb_layout bg0'>
-        <tr>
-            <td width=50%>
-                <?php generalInfo($me); ?>
-                <?php generalInfo2($me); ?>
-            </td>
-            <td width=50% valign=top style="padding-left:4ch;">
-                토너먼트 【
-                <input type=radio class='tnmt' name=tnmt value=0 <?= $me->getVar('tnmt') == 0 ? "checked" : ""; ?>>수동참여
-                <input type=radio class='tnmt' name=tnmt value=1 <?= $me->getVar('tnmt') == 1 ? "checked" : ""; ?>>자동참여
-                】<br>
-                ∞<span style='color:orange'>개막직전 남는자리가 있을경우 랜덤하게 참여합니다.</span><br><br>
+    <div id="container" class="bg0">
+        <div class="row gx-0">
+            <div class="col">내 정 보<br><?= backButton() ?></div>
+        </div>
+        <div class="row gx-0">
+            <div class="col col-12 col-md-6">
+                <div class="row">
+                    <div class="col"><?php generalInfo($me); ?><?php generalInfo2($me); ?></div>
+                </div>
+            </div>
 
-                환약 사용 【<select id='use_treatment' name='use_treatment'>
-                    <option value=10 <?= ($use_treatment == 10) ? "selected" : ""; ?>>경상</option>
-                    <option value=21 <?= ($use_treatment == 21) ? "selected" : ""; ?>>중상</option>
-                    <option value=41 <?= ($use_treatment == 41) ? "selected" : ""; ?>>심각</option>
-                    <option value=61 <?= ($use_treatment == 61) ? "selected" : ""; ?>>위독</option>
-                    <option value=100 <?= ($use_treatment == 100) ? "selected" : ""; ?>>사용안함</option>
-                </select>】<br>
-                ∞<span style='color:orange'>부상을 입었을 때 환약을 사용하는 기준입니다.</span><br><br>
-                <?php if (($gameStor->autorun_user['options']['chief']) ?? false) : ?>
-                    자동 사령턴 허용 【<select id='use_auto_nation_turn' name='use_auto_nation_turn'>
-                        <option value=1 <?= $use_auto_nation_turn ? "selected" : ""; ?>>허용</option>
-                        <option value=0 <?= (!$use_auto_nation_turn) ? "selected" : ""; ?>>허용 안함</option>
-                    </select>】<br>
-                    ∞<span style='color:orange'>수뇌가 되었을 때 휴식 턴이어도 적당한 턴을 알아서 넣는 것을 허용합니다.</span><br><br>
-                <?php endif; ?>
-                수비 【<select id='defence_train' name='defence_train'>
-                    <?php foreach ([90, 80, 60, 40] as $targetDefenceTrain) : ?>
-                        <option value='<?= $targetDefenceTrain ?>' <?= $me->getVar('defence_train') == $targetDefenceTrain ? "selected" : ""; ?>><?= formatDefenceTrain($targetDefenceTrain) ?>(훈사<?= $targetDefenceTrain ?>)</option>
-                    <?php endforeach; ?>
-                    <option value=999 <?= $me->getVar('defence_train') == 999 ? "selected" : ""; ?>><?= formatDefenceTrain(999) ?>[훈련, 사기 -3]</option>
-                </select>
-                】<br><br>
-                <input type=<?= $submit ?> id='set_my_setting' name=btn style=background-color:<?= GameConst::$basecolor2 ?>;color:white;width:160px;height:30px;font-size:14px; value=설정저장><br>
-                ∞<span style='color:orange'>설정저장은 이달중 <?= $myset ?>회 남았습니다.</span><br><br>
-                <?php if (!($gameStor->autorun_user['limit_minutes'] ?? false)) : ?>
-                    휴 가 신 청<br>
-                    <button type="button" id='vacation' style=background-color:<?= GameConst::$basecolor2 ?>;color:white;width:160px;height:30px;font-size:14px;>휴가 신청</button><br><br>
-                <?php endif; ?>
-                <!--빙의 해제용 삭턴 조절<br>
+            <div class="col col-12 col-md-6">
+                <div class="row">
+                    <div class="col" style='padding-left:4ch;'>
+                        토너먼트 【
+                        <input type=radio class='tnmt' name=tnmt value=0 <?= $me->getVar('tnmt') == 0 ? "checked" : ""; ?>>수동참여
+                        <input type=radio class='tnmt' name=tnmt value=1 <?= $me->getVar('tnmt') == 1 ? "checked" : ""; ?>>자동참여
+                        】<br>
+                        ∞<span style='color:orange'>개막직전 남는자리가 있을경우 랜덤하게 참여합니다.</span><br><br>
+
+                        환약 사용 【<select id='use_treatment' name='use_treatment'>
+                            <option value=10 <?= ($use_treatment == 10) ? "selected" : ""; ?>>경상</option>
+                            <option value=21 <?= ($use_treatment == 21) ? "selected" : ""; ?>>중상</option>
+                            <option value=41 <?= ($use_treatment == 41) ? "selected" : ""; ?>>심각</option>
+                            <option value=61 <?= ($use_treatment == 61) ? "selected" : ""; ?>>위독</option>
+                            <option value=100 <?= ($use_treatment == 100) ? "selected" : ""; ?>>사용안함</option>
+                        </select>】<br>
+                        ∞<span style='color:orange'>부상을 입었을 때 환약을 사용하는 기준입니다.</span><br><br>
+                        <?php if (($gameStor->autorun_user['options']['chief']) ?? false) : ?>
+                            자동 사령턴 허용 【<select id='use_auto_nation_turn' name='use_auto_nation_turn'>
+                                <option value=1 <?= $use_auto_nation_turn ? "selected" : ""; ?>>허용</option>
+                                <option value=0 <?= (!$use_auto_nation_turn) ? "selected" : ""; ?>>허용 안함</option>
+                            </select>】<br>
+                            ∞<span style='color:orange'>수뇌가 되었을 때 휴식 턴이어도 적당한 턴을 알아서 넣는 것을 허용합니다.</span><br><br>
+                        <?php endif; ?>
+                        수비 【<select id='defence_train' name='defence_train'>
+                            <?php foreach ([90, 80, 60, 40] as $targetDefenceTrain) : ?>
+                                <option value='<?= $targetDefenceTrain ?>' <?= $me->getVar('defence_train') == $targetDefenceTrain ? "selected" : ""; ?>><?= formatDefenceTrain($targetDefenceTrain) ?>(훈사<?= $targetDefenceTrain ?>)</option>
+                            <?php endforeach; ?>
+                            <option value=999 <?= $me->getVar('defence_train') == 999 ? "selected" : ""; ?>><?= formatDefenceTrain(999) ?>[훈련, 사기 -3]</option>
+                        </select>
+                        】<br><br>
+                        <input type=<?= $submit ?> id='set_my_setting' name=btn style=background-color:<?= GameConst::$basecolor2 ?>;color:white;width:160px;height:30px;font-size:14px; value=설정저장><br>
+                        ∞<span style='color:orange'>설정저장은 이달중 <?= $myset ?>회 남았습니다.</span><br><br>
+                        <?php if (!($gameStor->autorun_user['limit_minutes'] ?? false)) : ?>
+                            휴 가 신 청<br>
+                            <button type="button" id='vacation' style=background-color:<?= GameConst::$basecolor2 ?>;color:white;width:160px;height:30px;font-size:14px;>휴가 신청</button><br><br>
+                        <?php endif; ?>
+                        <!--빙의 해제용 삭턴 조절<br>
             <a href="b_myPage.php?detachNPC=1"><button type="button" style=background-color:<?= GameConst::$basecolor2 ?>;color:white;width:160px;height:30px;font-size:14px;>빙의 해체 요청</button></a>-->
 
-                <?php if ($showDieImmediatelyBtn) : ?>
-                    가오픈 기간 내 장수 삭제 (<?= substr($targetTime, 0, 19) ?> 부터)<br>
-                    <a href="c_die_immediately.php" id='die_immediately'><button type="button" style=background-color:<?= GameConst::$basecolor2 ?>;color:white;width:160px;height:30px;font-size:14px;>장수 삭제</button></a><br><br>
-                <?php endif; ?>
+                        <?php if ($showDieImmediatelyBtn) : ?>
+                            가오픈 기간 내 장수 삭제 (<?= substr($targetTime, 0, 19) ?> 부터)<br>
+                            <a href="c_die_immediately.php" id='die_immediately'><button type="button" style=background-color:<?= GameConst::$basecolor2 ?>;color:white;width:160px;height:30px;font-size:14px;>장수 삭제</button></a><br><br>
+                        <?php endif; ?>
 
-                <?php if ($gameStor->npcmode == 2 && $me->getNPCType() == 0) : ?>
-                    다른 장수 선택 (<?= substr($me->getAuxVar('next_change') ?? TimeUtil::now(), 0, 19) ?> 부터)<br>
-                    <a href="select_general_from_pool.php" id='select_general_from_pool'><button type="button" style=background-color:<?= GameConst::$basecolor2 ?>;color:white;width:160px;height:30px;font-size:14px;>다른 장수 선택</button></a><br><br>
-                <?php endif; ?>
+                        <?php if ($gameStor->npcmode == 2 && $me->getNPCType() == 0) : ?>
+                            다른 장수 선택 (<?= substr($me->getAuxVar('next_change') ?? TimeUtil::now(), 0, 19) ?> 부터)<br>
+                            <a href="select_general_from_pool.php" id='select_general_from_pool'><button type="button" style=background-color:<?= GameConst::$basecolor2 ?>;color:white;width:160px;height:30px;font-size:14px;>다른 장수 선택</button></a><br><br>
+                        <?php endif; ?>
 
-                <div class="row">
-                    <div class="col-4 text-end">500px/1000px 모드<br>(모바일 전용, 즉시 설정)</div>
-                    <div class="col-8">
-                        <div class="btn-group" role="group" aria-label="500px/1000px 모드 설정">
-                            <input type="radio" class="btn-check" name="screenMode" value="auto" id="screenMode_auto" autocomplete="off">
-                            <label class="btn btn-primary" for="screenMode_auto">자동</label>
+                        <div class="row">
+                            <div class="col-4 text-end">500px/1000px 모드<br>(모바일 전용, 즉시 설정)</div>
+                            <div class="col-8">
+                                <div class="btn-group" role="group" aria-label="500px/1000px 모드 설정">
+                                    <input type="radio" class="btn-check" name="screenMode" value="auto" id="screenMode_auto" autocomplete="off">
+                                    <label class="btn btn-primary" for="screenMode_auto">자동</label>
 
-                            <input type="radio" class="btn-check" name="screenMode" value="500px" id="screenMode_500px" autocomplete="off">
-                            <label class="btn btn-primary" for="screenMode_500px">500px</label>
+                                    <input type="radio" class="btn-check" name="screenMode" value="500px" id="screenMode_500px" autocomplete="off">
+                                    <label class="btn btn-primary" for="screenMode_500px">500px</label>
 
-                            <input type="radio" class="btn-check" name="screenMode" value="1000px" id="screenMode_1000px" autocomplete="off">
-                            <label class="btn btn-primary" for="screenMode_1000px">1000px</label>
+                                    <input type="radio" class="btn-check" name="screenMode" value="1000px" id="screenMode_1000px" autocomplete="off">
+                                    <label class="btn btn-primary" for="screenMode_1000px">1000px</label>
+                                </div>
+                            </div>
                         </div>
+                        <br>
+
+                        개인용 CSS<br>
+                        <textarea id='custom_css' style='color:white;background-color:black;width:420px;height:150px;'></textarea>
                     </div>
                 </div>
-                <br>
+            </div>
+            <div class="col col-12 col-md-6">
+                <div class="row gx-0">
+                    <div class="col bg1 text-center">
+                        <h4 style='color:skyblue'>개인 기록</h4>
+                    </div>
+                </div>
+                <div class="row gx-0">
+                    <div id='generalActionPlate'>
+                        <?= formatHistoryToHTML(getGeneralActionLogRecent($generalID, 24), 'generalAction') ?>
+                    </div>
+                    <button type="button" class="load_old_log btn btn-secondary" data-log_type="generalAction">이전 로그 불러오기</button>
+                </div>
+            </div>
+            <div class="col col-12 col-md-6">
+                <div class="row gx-0">
+                    <div class="col bg1 text-center">
+                        <h4 style='color:orange'>전투 기록</h4>
+                    </div>
+                </div>
+                <div class="row gx-0">
+                    <div id='battleDetailPlate'>
+                        <?= formatHistoryToHTML(getBattleDetailLogRecent($generalID, 24), 'battleDetail') ?>
+                    </div>
+                    <button type="button" class="load_old_log btn btn-secondary" data-log_type="battleDetail">이전 로그 불러오기</button>
+                </div>
+            </div>
 
-                개인용 CSS<br>
-                <textarea id='custom_css' style='color:white;background-color:black;width:420px;height:150px;'></textarea>
-            </td>
-        </tr>
-        <tr>
-            <td align=center class='bg1'>
-                <font color=skyblue size=3>개인 기록</font>
-            </td>
-            <td align=center class='bg1'>
-                <font color=orange size=3>전투 기록</font>
-            </td>
-        </tr>
-        <tr>
-            <td valign=top>
-                <div id='generalActionPlate'>
-                    <?= formatHistoryToHTML(getGeneralActionLogRecent($generalID, 24), 'generalAction') ?>
+            <div class="col col-12 col-md-6">
+                <div class="row gx-0">
+                    <div class="col bg1 text-center">
+                        <h4 style='color:skyblue'>장수 열전</h4>
+                    </div>
                 </div>
-                <button type="button" class="load_old_log btn btn-secondary btn-block" data-log_type="generalAction">이전 로그 불러오기</button>
-            </td>
-            <td valign=top>
-                <div id='battleDetailPlate'>
-                    <?= formatHistoryToHTML(getBattleDetailLogRecent($generalID, 24), 'battleDetail') ?>
+                <div class="row gx-0">
+                    <?= formatHistoryToHTML(getGeneralHistoryLogAll($generalID)) ?>
                 </div>
-                <button type="button" class="load_old_log btn btn-secondary btn-block" data-log_type="battleDetail">이전 로그 불러오기</button>
-            </td>
-        </tr>
-        <tr>
-            <td align=center class='bg1'>
-                <font color=skyblue size=3>장수 열전</font>
-            </td>
-            <td align=center class='bg1'>
-                <font color=orange size=3>전투 결과</font>
-            </td>
-        </tr>
-        <tr>
-            <td valign=top>
-                <?= formatHistoryToHTML(getGeneralHistoryLogAll($generalID)) ?>
-            </td>
-            <td valign=top>
-                <div id='battleResultPlate'>
-                    <?= formatHistoryToHTML(getBattleResultRecent($generalID, 24), 'battleResult') ?>
+            </div>
+            <div class="col col-12 col-md-6">
+                <div class="row gx-0">
+                    <div class="col bg1 text-center">
+                        <h4 style='color:orange'>전투 결과</h4>
+                    </div>
                 </div>
-                <button type="button" class="load_old_log btn btn-secondary btn-block" data-log_type="battleResult">이전 로그 불러오기</button>
-            </td>
-        </tr>
-    </table>
-    <table align=center width=1000 class='tb_layout bg0'>
-        <tr>
-            <td><?= backButton() ?></td>
-        </tr>
-        <tr>
-            <td><?= banner() ?></td>
-        </tr>
-    </table>
+                <div class="row gx-0">
+                    <div id='battleResultPlate'>
+                        <?= formatHistoryToHTML(getBattleResultRecent($generalID, 24), 'battleResult') ?>
+                    </div>
+                    <button type="button" class="load_old_log btn btn-secondary" data-log_type="battleResult">이전 로그 불러오기</button>
+                </div>
+            </div>
+        </div>
+        <div class="row  gx-0">
+            <div class="col "><?= backButton() ?></div>
+        </div>
+        <div class="row bg0 gx-0">
+            <div class="col bg0"><?= banner() ?></div>
+        </div>
+    </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/hwe/scss/myPage.scss b/hwe/scss/myPage.scss
new file mode 100644
index 00000000..211f9050
--- /dev/null
+++ b/hwe/scss/myPage.scss
@@ -0,0 +1,33 @@
+
+@import "./common/break_500px.scss";
+@import "./common/bootstrap5.scss";
+@import "./common_legacy.scss";
+
+@include media-breakpoint-up(md) {
+    #container {
+        width: 1000px;
+        margin: 0 auto;
+
+        > .row > .col, .layout-block{
+            border-left: solid 1px gray;
+            border-right: solid 1px gray;
+            border-top: solid 1px gray;
+        }
+
+
+    }
+}
+
+
+
+@include media-breakpoint-down(md) {
+    body {
+        overflow-x: hidden;
+    }
+
+    #container {
+        width: 500px;
+        margin: 0 auto;
+        margin-bottom: 100px;
+    }
+}
\ No newline at end of file
diff --git a/hwe/ts/myPage.ts b/hwe/ts/myPage.ts
index 4facb9e4..92b5e1c7 100644
--- a/hwe/ts/myPage.ts
+++ b/hwe/ts/myPage.ts
@@ -1,11 +1,13 @@
+import "@scss/myPage.scss";
+
 import axios from 'axios';
 import $ from 'jquery';
-import { InvalidResponse, keyScreenMode } from '@/defs';
+import { InvalidResponse, keyScreenMode, ScreenModeType } from '@/defs';
 import { convertFormData } from '@util/convertFormData';
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import { unwrap } from '@util/unwrap';
 import { unwrap_any } from '@util/unwrap_any';
-
+import { auto500px } from './util/auto500px';
 
 
 type LogResponse = {
@@ -109,7 +111,9 @@ $(function ($) {
     const $screenModeRadios = $('input:radio[name=screenMode]');
     $screenModeRadios.prop('checked', false).filter(`[value="${localStorage.getItem(keyScreenMode)??'auto'}"]`).prop('checked', true);
     $screenModeRadios.on('click', function(e){
-        localStorage.setItem(keyScreenMode, (e.target as HTMLInputElement).value);
+        const mode = (e.target as HTMLInputElement).value as ScreenModeType;
+        localStorage.setItem(keyScreenMode, mode);
+        document.dispatchEvent(new CustomEvent('tryChangeScreenMode'));
     });
 
 
@@ -209,4 +213,6 @@ $(function ($) {
         location.reload();
 
     });
-});
\ No newline at end of file
+});
+
+auto500px();
\ No newline at end of file
diff --git a/hwe/ts/util/auto500px.ts b/hwe/ts/util/auto500px.ts
index eef67011..897439fa 100644
--- a/hwe/ts/util/auto500px.ts
+++ b/hwe/ts/util/auto500px.ts
@@ -5,6 +5,7 @@ import { keyScreenMode, ScreenModeType } from "@/defs";
 export function auto500px(targetHeight = 700): void {
     let deviceWidth = -1;
     let viewportMeta!: HTMLMetaElement;
+    let oldMode: ScreenModeType = 'auto';
 
 
     function init() {
@@ -23,24 +24,32 @@ export function auto500px(targetHeight = 700): void {
     }
 
     function adjustViewportWidth() {
+        const screenMode = (localStorage.getItem(keyScreenMode) as ScreenModeType)??'auto';
+        if(screenMode != oldMode){
+            oldMode = screenMode;
+            if(screenMode == '500px'){
+                viewportMeta.content = 'width=500';
+                return;
+            }
+
+            if(screenMode == '1000px'){
+                viewportMeta.content = 'width=1000';
+                return;
+            }
+
+            if(screenMode == 'auto'){
+                deviceWidth = -1;
+            }
+        }
+
         if (deviceWidth == window.screen.availWidth) {
             return;
         }
+
         deviceWidth = window.screen.availWidth;
         const innerHeight = window.innerHeight;
         const selectorHeight = targetHeight;
 
-        const screenMode = (localStorage.getItem(keyScreenMode) as ScreenModeType)??'auto';
-        if(screenMode == '500px'){
-            viewportMeta.content = 'width=500';
-            return;
-        }
-
-        if(screenMode == '1000px'){
-            viewportMeta.content = 'width=1000';
-            return;
-        }
-
         if (deviceWidth < 500) {
             viewportMeta.content = 'width=500';
             return;
@@ -69,5 +78,8 @@ export function auto500px(targetHeight = 700): void {
         adjustViewportWidth();
         window.addEventListener('scroll', adjustViewportWidth, true);
         window.addEventListener('orientationchange', adjustViewportWidth, true);
+        document.addEventListener('tryChangeScreenMode', adjustViewportWidth, false);
+
+
     });
 }
\ No newline at end of file
