feat: 내 정보/설정 페이지 반응형, 500px/1000px 설정
This commit is contained in:
+129
-118
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
+10
-4
@@ -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();
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
auto500px();
|
||||
+23
-11
@@ -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);
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user