feat: 임시 500px/1000px 모드 추가

hwe/b_myPage.php

@@ -119,6 +119,23 @@ $use_auto_nation_turn = $me->getAuxVar('use_auto_nation_turn') ?? 1;
                     <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>
+
+                            <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>
+                        </div>
+                    </div>
+                </div>
+                <br>
+
                 개인용 CSS<br>
                 <textarea id='custom_css' style='color:white;background-color:black;width:420px;height:150px;'></textarea>
             </td>

hwe/ts/defs.ts

@@ -144,4 +144,7 @@ export type ToastType = {
     content?: string,
     type?: Colors,
     delay?: number,
-}
+}
+
+export const keyScreenMode = 'sam.screenMode';
+export type ScreenModeType = 'auto'|'500px'|'1000px';

hwe/ts/myPage.ts

@@ -1,12 +1,13 @@
 import axios from 'axios';
 import $ from 'jquery';
-import { InvalidResponse } from '@/defs';
+import { InvalidResponse, keyScreenMode } from '@/defs';
 import { convertFormData } from '@util/convertFormData';
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import { unwrap } from '@util/unwrap';
 import { unwrap_any } from '@util/unwrap_any';
 
 
+
 type LogResponse = {
     result: true;
     log: Record<string, string>;
@@ -105,6 +106,13 @@ $(function ($) {
     initCustomCSSForm();
 
 
+    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);
+    });
+
+
     $('#die_immediately').on('click', async function (e) {
         e.preventDefault();
 

hwe/ts/util/auto500px.ts

@@ -1,5 +1,6 @@
 import { htmlReady } from "@util/htmlReady";
 import { unwrap } from "@util/unwrap";
+import { keyScreenMode, ScreenModeType } from "@/defs";
 
 export function auto500px(targetHeight = 700): void {
     let deviceWidth = -1;
@@ -29,6 +30,17 @@ export function auto500px(targetHeight = 700): void {
         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;