修改字体大小

idea.md

@@ -2,11 +2,11 @@
 
 ### 第二章 智慧
 
--   同化
+[] 同化
--   同化+阻击
+[] 同化+阻击
--   电摇嘲讽：到同行或同列直接怼过去，门和墙撞碎，不消耗钥匙，攻击怪物，捡道具，改变 bgm，可吃补给用
+[x] 电摇嘲讽：到同行或同列直接怼过去，门和墙撞碎，不消耗钥匙，攻击怪物，捡道具，改变 bgm，可吃补给用
--   乾坤挪移：平移光环位置
+[] 乾坤挪移：平移光环位置
--   加光环的光环
+[] 加光环的光环
 
 #### Boss
 
@@ -16,9 +16,9 @@
 
 ## 主角
 
--   学习：学习选定怪物的选定技能（不能学光环），消耗智慧点，初始 400，但每次消耗点数+100，持续 3 场战斗
+[] 学习：学习选定怪物的选定技能（不能学光环），消耗智慧点，初始 400，但每次消耗点数+100，持续 3 场战斗
--   铸剑为盾：主动技能，减少攻击，增加防御
+[x] 铸剑为盾：主动技能，减少攻击，增加防御
--   血之代偿：消耗一定血量，战前对怪物造成同等数值的伤害
+[] 血之代偿：消耗一定血量，战前对怪物造成同等数值的伤害
 
 ### 第三章 战争
 
@@ -26,23 +26,27 @@
 
 分成多条线，可以单独点一条线，也可以混搭
 
-闪避：每 M 回合闪避一次，减少 N% 的伤害
+[] 闪避：每 M 回合闪避一次，减少 N% 的伤害
 
 ## 机制
 
 ### 第二章 智慧
 
--   苍蓝之殿 1: 利用点光源，照到的位置与没照到的位置内容不同，玩家可以选择是否装备手电筒
+[] 苍蓝之殿 1: 利用点光源，照到的位置与没照到的位置内容不同，玩家可以选择是否装备手电筒
--   苍蓝之殿 2:
+[] 苍蓝之殿 2:
+
+### 第三章 战争
+
+[] 装备合成、装备（孔）强化（第三章）
 
 ## 成就
 
--   虚惊一场：打完山洞门口的怪只剩 1 滴血
+[] 虚惊一场：打完山洞门口的怪只剩 1 滴血
--   学坏了：学习敌人的电摇嘲讽技能
+[] 学坏了：学习敌人的电摇嘲讽技能
--   真能刷：勇气之路的刷血怪刷到 15w 以上的血
+[] 真能刷：勇气之路的刷血怪刷到 15w 以上的血
--   满腹经纶：把所有能学的怪物技能都学一遍
+[] 满腹经纶：把所有能学的怪物技能都学一遍
--   冰与火之舞：通过第二章特殊战的困难难度
+[] 冰与火之舞：通过第二章特殊战的困难难度
--   你是怎么做到的?!：山路地图与勇气之路地图中与若干个神秘的木牌对话
+[] 你是怎么做到的?!：山路地图与勇气之路地图中与若干个神秘的木牌对话
 
 ### 伤害对应
 
@@ -55,7 +59,6 @@ dam4.png ---- 存档 59
 
 [] 实时天气（待定）
 [x] 成就系统
-[] 装备合成、装备（孔）强化
 [] 宝石目标设定
 [] 自动宝物规划，选中两个或更多宝物后自动在本地图中规划出最优拾取路线，原则是尽量减少其余宝物的捡拾，自动切换主动技能，怪物造成的伤害最低的路线
 [] 临界显示方式，宝石数还是数值
@@ -73,9 +76,10 @@ dam4.png ---- 存档 59
 [] 视角控制系统
 [x] 重构设置界面
 [] 优化开头动画
-[] 玩家可以设置字体大小
+[x] 玩家可以设置字体大小
 [] 完全删除 functions.js
 [x] 优化插件加载系统
 [] 优化 Scroll 组件
 [] 重写技能控制系统
 [] 自定义快捷键
+[] 优化 ui 控制系统

index.html

@@ -23,32 +23,6 @@
         <div id='startImageDiv'></div>
         <img id='startImageLogo' />
     </div>
-    <script>
-        // (function () {
-        //     var startImageBackgroundDiv = document.getElementById('startImageBackgroundDiv');
-        //     var startImageLogo = document.getElementById('startImageLogo');
-        //     var startImageDiv = document.getElementById('startImageDiv');
-        //     startImageLogo.onload = function () {
-        //         startImageBackgroundDiv.style.display = 'block';
-        //         var onAnimationEnd = function () {
-        //             if (window.core && core.plugin && ancTe.plugin.ui.startAnimationEnded) {
-        //                 ancTe.plugin.ui.startAnimationEnded.value = true;
-        //                 startImageBackgroundDiv.style.display = 'none';
-        //                 startImageLogo.classList.remove("startImageAnimation");
-        //                 startImageDiv.classList.remove("startImageDivAnimation");
-        //             }
-        //         }
-        //         startImageDiv.addEventListener("webkitAnimationEnd", onAnimationEnd);
-        //         startImageDiv.addEventListener("animationend", onAnimationEnd);
-        //         startImageLogo.classList.add("startImageAnimation");
-        //         startImageDiv.classList.add("startImageDivAnimation");
-        //         // 注释下面这句话以禁止单击立刻跳过开场动画
-        //         startImageBackgroundDiv.onclick = onAnimationEnd;
-        //     }
-        //     startImageLogo.onerror = function () { }
-        //     startImageLogo.src = "logo.png";
-        // })();
-    </script>
     <div id="game">
         <!-- injection -->
         <div id='gameGroup'>

src/App2.vue

@@ -40,5 +40,7 @@ import CompleteAchievement from './ui/completeAchievement.vue';
     width: 0;
     height: 0;
     overflow: visible;
+    left: 0;
+    top: 0;
 }
 </style>

src/components/colomn.vue

@@ -86,21 +86,9 @@ onUnmounted(() => {
     justify-content: center;
     align-items: center;
     font-family: 'normal';
-    font-size: 2.7vh;
+    font-size: 150%;
     user-select: none;
 }
-
-.column {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: 'normal';
-    font-size: 2.7vh;
-    user-select: none;
-}
-
 .column-main {
     width: 70%;
     height: 70%;
@@ -151,7 +139,7 @@ onUnmounted(() => {
         flex-direction: column;
         width: 90%;
         height: 75%;
-        font-size: 3.8vw;
+        font-size: 80%;
     }
 
     .divider {

src/components/enemyOne.vue

@@ -143,7 +143,7 @@ function enter() {
 <style lang="less" scoped>
 .enemy-container {
     border: 1.5px solid transparent;
-    border-radius: 1.1vw;
+    border-radius: 15px;
     transition: all 0.2s linear;
     height: 100%;
 
@@ -168,7 +168,7 @@ function enter() {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    font-size: 2vh;
+    font-size: 120%;
     padding-left: 1%;
 }
 
@@ -192,8 +192,8 @@ function enter() {
 }
 
 .rightbar {
-    font-size: 2.5vh;
+    font-size: 140%;
-    width: 100%;
+    width: 85%;
     height: 100%;
     padding: 1.5vh 0 1.5vh 0;
 
@@ -215,15 +215,17 @@ function enter() {
 
 @media screen and (max-width: 600px) {
     .rightbar {
-        font-size: 3.2vw;
+        width: 80%;
+        font-size: 85%;
     }
 
     .leftbar {
-        font-size: 2vw;
+        width: 20%;
+        font-size: 80%;
     }
 
     .enemy-container {
-        border-radius: 1.6vh;
+        border-radius: 20px;
     }
 }
 </style>

src/core/main/setting.ts

@@ -3,6 +3,7 @@ import { EmitableEvent, EventEmitter } from '../common/eventEmitter';
 import { transition } from '../../plugin/uiController';
 import { loading } from '../loader/load';
 import { hook } from './game';
+import { isMobile } from '../../plugin/use';
 
 type MotaSettingType = boolean | number | MotaSetting;
 

src/data/settings.json

@@ -1,8 +1,8 @@
 {
     "screen": {
         "fullscreen": [
-            "是否全屏进行游戏，全屏后按ESC退出全屏，不能开启系统设置菜单，请按下方的按钮打开。",
+            "是否全屏进行游戏，全屏后按ESC退出全屏，开启后将不能通过按ESC开启系统设置菜单，",
-            "进入或退出全屏后请存读档一下，以解决一部分绘制问题。"
+            "请按下方的按钮打开。进入或退出全屏后请存读档一下，以解决一部分绘制问题。"
         ],
         "halo": ["开启后，会在地图上显示范围光环。"],
         "frag": ["开启后，在打败怪物后会触发怪物碎裂特效。"],
@@ -24,7 +24,9 @@
             "<br>",
             "2. 如果缩放后游戏画面高度高于页面高度的95%，那么缩小一个缩放比例，否则保持最大比例"
         ],
-        "fontSize": ["在各种 ui 界面中显示的文字大小，范围为 8 - 28"]
+        "fontSize": [
+            "在各种 ui 界面中显示的文字大小，范围为 8 - 28。注意，字体过大可能会引起 ui 布局发生错误"
+        ]
     },
     "action": {
         "autoSkill": [

src/panel/enemyCritical.vue

@@ -245,7 +245,7 @@ onMounted(() => {
 .des {
     width: 100%;
     text-align: center;
-    font-size: 2.5vh;
+    font-size: 140%;
 }
 
 .slider-div {
@@ -254,7 +254,7 @@ onMounted(() => {
     align-items: center;
 
     span {
-        font-size: 1.1vw;
+        font-size: 120%;
         line-height: 1;
     }
 }
@@ -267,12 +267,12 @@ onMounted(() => {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
-    font-size: 3vh;
+    font-size: 160%;
 }
 
 @media screen and (max-width: 600px) {
     #now-damage {
-        font-size: 3vw;
+        font-size: 100%;
 
         div {
             display: flex;
@@ -292,7 +292,7 @@ onMounted(() => {
     }
 
     .slider-div span {
-        font-size: 1.5vh;
+        font-size: 70%;
     }
 }
 </style>

src/panel/enemySpecial.vue

@@ -48,7 +48,7 @@ const format = core.formatBigNumber;
 #special-main {
     width: 100%;
     user-select: none;
-    font-size: 2em;
+    font-size: 160%;
     position: absolute;
     top: 20vh;
 }
@@ -61,7 +61,7 @@ const format = core.formatBigNumber;
 
 #critical-des,
 .critical {
-    font-size: 1.6vw;
+    font-size: 110%;
     display: flex;
     flex-direction: column;
 }
@@ -80,17 +80,13 @@ const format = core.formatBigNumber;
 }
 
 @media screen and (max-width: 600px) {
-    #detail-main {
-        font-size: 3.8vw;
-    }
-
     #critical-des,
     .critical {
-        font-size: 3.6vw;
+        font-size: 70%;
     }
 
     #special {
-        font-size: 3.8vw;
+        font-size: 70%;
     }
 
     #special-main {

src/panel/enemyTarget.vue

@@ -45,7 +45,7 @@ function mark() {
 <style lang="less" scoped>
 #enemy-target {
     width: 100%;
-    font-size: 2.8vh;
+    font-size: 160%;
 }
 
 #enemy-desc {
@@ -75,12 +75,12 @@ function mark() {
 }
 
 @media screen and (max-width: 600px) {
-    #enemy-target {
+    #enemy-desc {
-        font-size: 3.8vw;
+        font-size: 70%;
     }
 
     #mark-target {
-        font-size: 4vw;
+        font-size: 100%;
     }
 }
 </style>

src/plugin/ui/fixed.ts

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { getDamageColor } from '../utils';
 import { ToShowEnemy, detailInfo } from './book';
 import { DamageEnemy } from '../game/enemy/damage';
+import { isMobile } from '../use';
 
 export const showFixed = ref(false);
 
@@ -87,9 +88,10 @@ export function getDetailedEnemy(
             s[2] as string
         ];
     });
+    const l = isMobile ? 1 : 2;
     const showSpecial =
-        special.length > 2
+        special.length > l
-            ? special.slice(0, 2).concat(['...', '', '#fff'])
+            ? special.slice(0, l).concat([['...', '', '#fff']])
             : special.slice();
 
     const damageColor = getDamageColor(dam) as string;

src/plugin/use.ts

@@ -1,3 +1,5 @@
+import { debounce } from 'lodash-es';
+
 export default function init() {
     return { useDrag, useWheel, useUp, isMobile };
 }
@@ -18,6 +20,7 @@ const dragFnMap = new Map<DragFn, DragMap>();
  */
 export let isMobile = matchMedia('(max-width: 600px)').matches;
 
+let alerted = false;
 window.addEventListener('resize', () => {
     requestAnimationFrame(() => {
         isMobile = matchMedia('(max-width: 600px)').matches;
@@ -27,8 +30,9 @@ window.addEventListener('resize', () => {
 checkMobile();
 
 function checkMobile() {
-    if (isMobile) {
+    if (isMobile && !alerted) {
         alert('手机端建议使用自带的浏览器进行游玩，并在进入游戏后开启全屏游玩');
+        alerted = true;
     }
 }
 
@@ -47,13 +51,13 @@ export function useDrag(
     global: boolean = false
 ) {
     const touchFn = (e: TouchEvent) => {
-        const ele = global ? document : e.target;
-        if (ele) {
-            (ele as HTMLElement).removeEventListener('touchmove', touchFn);
-        }
         fn(e.touches[0].clientX, e.touches[0].clientY, e);
     };
 
+    const mouseFn = (e: MouseEvent) => {
+        fn(e.clientX, e.clientY, e);
+    };
+
     const mouseUp = (e: MouseEvent) => {
         const ele = global ? document : e.target;
         if (ele) {
@@ -89,10 +93,6 @@ export function useDrag(
 
     const target = global ? document : ele;
 
-    const mouseFn = (e: MouseEvent) => {
-        fn(e.clientX, e.clientY, e);
-    };
-
     const touchUp = (e: TouchEvent) => {
         onup && onup(e);
     };

src/styles.less

@@ -13,6 +13,7 @@
     opacity: 0;
     background-color: #000d;
     font-size: 16px;
+    backdrop-filter: blur(2px) grayscale(50%);
 }
 
 #root2 {

src/ui/achievement.vue

@@ -187,14 +187,14 @@ function exit() {
     width: 90vh;
     height: 90vh;
     font-family: 'normal';
-    font-size: 2.8vh;
+    font-size: 150%;
     display: flex;
     flex-direction: column;
     user-select: none;
 }
 
 #divider {
-    margin: 1vh 0 1vh 0;
+    margin: 1% 0;
     border-color: #ddd4;
 }
 
@@ -207,8 +207,8 @@ function exit() {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
-    margin-top: 3vh;
+    margin-top: 3%;
-    font-size: 3.5vh;
+    font-size: 130%;
 }
 
 .list-scroll {
@@ -219,7 +219,7 @@ function exit() {
 #list {
     overflow: hidden;
     width: 100%;
-    height: 69vh;
+    height: max-content;
 }
 
 #achievement-list {
@@ -251,8 +251,8 @@ function exit() {
         flex-direction: column;
         align-items: center;
         border: 2px double rgba(132, 132, 132, 0.17);
-        border-radius: 1vh;
+        border-radius: 10px;
-        margin: 2vh 0 2.5vh 0;
+        margin: 2% 0 2.5% 0;
         background-color: rgba(59, 59, 59, 0.281);
     }
 
@@ -265,7 +265,7 @@ function exit() {
     }
 
     .list-text {
-        font-size: 2.5vh;
+        font-size: 100%;
         padding: 0 20px;
     }
 
@@ -274,14 +274,13 @@ function exit() {
         height: 95%;
         display: flex;
         flex-direction: column-reverse;
-        font-size: 2.3vh;
+        font-size: 90%;
 
         .end-info {
             display: flex;
             flex-direction: row;
             justify-content: space-between;
             align-items: end;
-            font-size: 2.3vh;
         }
 
         .complete {
@@ -300,8 +299,6 @@ function exit() {
 
         .progress {
             width: 100%;
-            height: 2.6vh;
-            font-size: 1vh;
         }
     }
 }
@@ -317,8 +314,8 @@ function exit() {
     }
 
     #point-number {
-        font-size: 2vh;
+        font-size: 70%;
-        margin-left: 2vh;
+        margin-left: 2%;
         white-space: nowrap;
     }
 }
@@ -327,11 +324,6 @@ function exit() {
     #achievement {
         width: 90vw;
         height: 90vh;
-        font-size: 4.2vw;
-    }
-
-    #column {
-        font-size: 4.3vw;
     }
 
     .list-one {
@@ -341,15 +333,8 @@ function exit() {
             height: 15vh;
         }
 
-        .list-text {
-            font-size: 3.2vw;
-        }
-
         .list-end {
             margin-bottom: 0.8vh;
-            .end-info {
-                font-size: 3.2vw;
-            }
         }
     }
 }

src/ui/book.vue

@@ -48,6 +48,8 @@ import { LeftOutlined } from '@ant-design/icons-vue';
 import { KeyCode } from '../plugin/keyCodes';
 import { noClosePanel } from '../plugin/uiController';
 import { ToShowEnemy, detailInfo } from '../plugin/ui/book';
+import { isMobile } from '../plugin/use';
+import { getDetailedEnemy } from '../plugin/ui/fixed';
 
 const floorId =
     // @ts-ignore
@@ -63,50 +65,9 @@ const specials = Object.fromEntries(
 >;
 
 const enemy = core.getCurrentEnemys(floorId);
-const toShow: ToShowEnemy[] = enemy.map(v => {
+const toShow: ToShowEnemy[] = enemy.map(v =>
-    const e = v.enemy;
+    getDetailedEnemy(v.enemy, floorId)
-    const dam = e.calDamage().damage;
+);
-    const cri = e.calCritical(1);
-    const critical = core.formatBigNumber(cri[0]?.atkDelta);
-    const criticalDam = core.formatBigNumber(-cri[0]?.delta);
-    const ratio = core.status.maps[floorId].ratio;
-    const defDam = core.formatBigNumber(-e.calDefDamage(ratio).delta);
-    const damage = core.formatBigNumber(dam);
-
-    const fromFunc = (
-        func: string | ((enemy: Enemy) => string),
-        enemy: Enemy
-    ) => {
-        return typeof func === 'string' ? func : func(enemy);
-    };
-    const special: [string, string, string][] = v.enemy.enemy.special.map(
-        vv => {
-            const s = specials[vv];
-            return [
-                fromFunc(s[0], v.enemy.enemy),
-                fromFunc(s[1], v.enemy.enemy),
-                s[2] as string
-            ];
-        }
-    );
-    const showSpecial =
-        special.length > 2
-            ? special.slice(0, 2).concat(['...', '', '#fff'])
-            : special.slice();
-
-    const damageColor = getDamageColor(dam) as string;
-
-    return {
-        critical,
-        criticalDam,
-        defDam,
-        special,
-        damageColor,
-        showSpecial,
-        damage,
-        ...v
-    };
-});
 
 const scroll = ref(0);
 const drag = ref(false);
@@ -293,5 +254,9 @@ onUnmounted(async () => {
         width: 100%;
         padding: 5%;
     }
+
+    .enemy {
+        height: 15vh;
+    }
 }
 </style>

src/ui/bookDetail.vue

@@ -142,7 +142,7 @@ onMounted(async () => {
             if (y > (parseFloat(style.height) * 4) / 5) moved = true;
         },
         () => {
-            if (moved === false && panel.value !== 'critical') {
+            if (moved === false && panel.value === 'special') {
                 close();
             }
             moved = false;

src/ui/equipbox.vue

@@ -139,11 +139,7 @@
                     style="border-color: #ddd4; margin: 1vh 0 1vh 0"
                 ></a-divider>
                 <div id="equip-add">
-                    <span
+                    <span id="title">增减属性</span>
-                        :style="{ 'font-size': isMobile ? '3.8vw' : '3vh' }"
-                        id="title"
-                        >增减属性</span
-                    >
                     <Scroll style="width: 100%; height: 100%">
                         <component :is="addStatus"></component>
                     </Scroll>
@@ -153,11 +149,7 @@
                     style="border-color: #ddd4; margin: 1vh 0 1vh 0"
                 ></a-divider>
                 <div id="equip-desc-text">
-                    <span
+                    <span id="title">装备介绍</span>
-                        :style="{ 'font-size': isMobile ? '3.8vw' : '3vh' }"
-                        id="title"
-                        >装备介绍</span
-                    >
                     <Scroll id="desc-text" style="height: 100%; width: 100%">
                         <div v-if="!descText.value!.startsWith('!!html')">
                             {{ descText.value }}
@@ -493,7 +485,7 @@ onUnmounted(() => {
     display: flex;
     flex-direction: row;
     font-family: 'normal';
-    font-size: 2.5vh;
+    font-size: 150%;
 }
 
 .divider {
@@ -515,11 +507,11 @@ onUnmounted(() => {
         .select {
             width: 100%;
             font-family: 'normal';
-            font-size: 1.9vh;
+            font-size: 75%;
         }
 
         #sort-type {
-            font-size: 1.9vh;
+            font-size: 75%;
             white-space: nowrap;
         }
     }
@@ -649,7 +641,7 @@ onUnmounted(() => {
         flex-basis: 50%;
         width: 100%;
         text-align: right;
-        font-size: 2.9vh;
+        font-size: 110%;
         white-space: nowrap;
 
         .hero-status-label {
@@ -670,7 +662,7 @@ onUnmounted(() => {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding: 0.5vh 0.5vw 0.5vh 0.5vw;
+    padding: 0.5vh 0.5vw;
     border: #0000 0.5px solid;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -704,7 +696,7 @@ onUnmounted(() => {
     #equipbox-main {
         height: 90vh;
         flex-direction: column-reverse;
-        font-size: 3.8vw;
+        font-size: 100%;
     }
 
     #equip-now-div {

src/ui/fly.vue

@@ -628,7 +628,7 @@ onUnmounted(() => {
 #fly {
     width: 100%;
     height: 100%;
-    font-size: 2.7vh;
+    font-size: 150%;
     font-family: 'normal';
     display: flex;
     align-items: center;
@@ -739,7 +739,7 @@ onUnmounted(() => {
 @media screen and (max-width: 600px) {
     #fly {
         padding: 5%;
-        font-size: 3.8vw;
+        font-size: 100%;
     }
 
     #fly-main {

src/ui/markedEnemy.vue

@@ -138,7 +138,7 @@ function getDefDamage(id: EnemyIds) {
 }
 
 .marked-main {
-    padding: 1vh 0 1vh 0;
+    padding: 1vh 0;
     background-color: #0009;
     display: flex;
     flex-direction: column;

src/ui/settings.vue

@@ -37,7 +37,7 @@
                         </Scroll>
                         <a-divider
                             class="display-divider"
-                            type="vertical"
+                            :type="isMobile ? 'horizontal' : 'vertical'"
                             dashed
                         ></a-divider>
                     </div>
@@ -106,6 +106,7 @@ import { RightOutlined, LeftOutlined } from '@ant-design/icons-vue';
 import { splitText } from '../plugin/utils';
 import Scroll from '../components/scroll.vue';
 import { settingsOpened } from '../plugin/uiController';
+import { isMobile } from '../plugin/use';
 
 const props = defineProps<{
     info?: MotaSetting;
@@ -262,12 +263,12 @@ function exit() {
 }
 
 .setting-scroll {
-    width: 300px;
+    width: 20vw;
     height: 100%;
 }
 
 .setting-info {
-    width: 400px;
+    width: 25vw;
 
     .info-divider {
         border-color: #fff4;
@@ -304,4 +305,52 @@ function exit() {
         }
     }
 }
+
+@media screen and (max-width: 600px) {
+    #tools {
+        top: 2vh;
+    }
+
+    .setting-main {
+        font-size: 120%;
+
+        .setting-container {
+            flex-direction: column;
+            height: auto;
+        }
+
+        .setting-select {
+            flex-direction: column;
+            width: 90vw;
+        }
+    }
+
+    .list-enter-from,
+    .list-leave-to {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+
+    .setting-scroll {
+        width: 90vw;
+        height: 20vh;
+    }
+
+    .setting-display {
+        width: 90vw;
+        flex-direction: column;
+        height: 22vh;
+
+        .display-divider {
+            width: 100%;
+            height: auto;
+            margin: 1vh 0;
+        }
+    }
+
+    .setting-info {
+        width: 90vw;
+        height: 30vh;
+    }
+}
 </style>

src/ui/shop.vue

@@ -325,7 +325,7 @@ onUnmounted(() => {
     width: 90vh;
     height: 90vh;
     font-family: 'normal';
-    font-size: 2.8vh;
+    font-size: 150%;
     display: flex;
     flex-direction: column;
     user-select: none;
@@ -339,7 +339,7 @@ onUnmounted(() => {
 #item-name {
     width: 100%;
     text-align: center;
-    font-size: 4vh;
+    font-size: 140%;
     height: 5vh;
     line-height: 1;
 }
@@ -425,7 +425,7 @@ onUnmounted(() => {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    margin: 1vh 0 1vh 0;
+    margin: 1vh 0;
     transition: color 0.2s linear;
 }
 
@@ -461,7 +461,7 @@ onUnmounted(() => {
     #shop {
         width: 90vw;
         padding-top: 5vh;
-        font-size: 3.8vw;
+        font-size: 100%;
     }
 
     #item-list {

src/ui/skillTree.vue

@@ -302,7 +302,7 @@ function selectChapter(delta: number) {
     width: 90vh;
     height: 90vh;
     font-family: 'normal';
-    font-size: 2.8vh;
+    font-size: 150%;
     display: flex;
     flex-direction: column;
     user-select: none;
@@ -311,7 +311,7 @@ function selectChapter(delta: number) {
 #skill-title {
     width: 100%;
     text-align: center;
-    font-size: 4vh;
+    font-size: 130%;
     height: 5vh;
     line-height: 1;
 }
@@ -330,7 +330,7 @@ function selectChapter(delta: number) {
 
 #divider {
     width: 100%;
-    margin: 1vh 0 1vh 0;
+    margin: 1vh 0;
 }
 
 #divider-split {
@@ -374,7 +374,7 @@ function selectChapter(delta: number) {
 }
 
 .upgrade-divider {
-    margin: 1vh 0 1vh 0;
+    margin: 1vh 0;
     border-color: #ddd4;
 }
 
@@ -393,13 +393,13 @@ function selectChapter(delta: number) {
     #skill-tree {
         width: 100%;
         height: 100%;
-        font-size: 3.3vw;
+        font-size: 100%;
         padding: 5%;
     }
 
     #skill-title {
         width: 100%;
-        font-size: 4vw;
+        font-size: 130%;
         height: 5vw;
     }
 
@@ -421,21 +421,5 @@ function selectChapter(delta: number) {
     #front-scroll {
         height: 18vh;
     }
-
-    #skill-consume {
-        font-size: 2.2vh;
-    }
-
-    #front-scroll {
-        font-size: 2.2vh;
-    }
-
-    #skill-chapter {
-        font-size: 2.2vh;
-    }
-
-    #skill-level {
-        font-size: 2.2vh;
-    }
 }
 </style>

src/ui/start.vue

@@ -70,6 +70,7 @@ import { KeyCode } from '../plugin/keyCodes';
 import { achievementOpened } from '../plugin/uiController';
 import { triggerFullscreen } from '../core/main/setting';
 import { loading } from '../core/loader/load';
+import { isMobile } from '../plugin/use';
 
 let startdiv: HTMLDivElement;
 let start: HTMLDivElement;
@@ -102,9 +103,15 @@ function resize() {
     const h = core._PY_;
     const height = h * scale;
     const width = height * 1.5;
-    startdiv.style.width = `${width}px`;
+    if (!isMobile) {
-    startdiv.style.height = `${height}px`;
+        startdiv.style.width = `${width}px`;
-    main.style.fontSize = `${scale * 16}px`;
+        startdiv.style.height = `${height}px`;
+        main.style.fontSize = `${scale * 16}px`;
+    } else {
+        startdiv.style.width = `${window.innerWidth}px`;
+        startdiv.style.height = `${(window.innerHeight * 2) / 3}px`;
+        main.style.fontSize = `${scale * 8}px`;
+    }
 }
 
 function showCursor() {
@@ -137,7 +144,7 @@ async function clickStartButton(id: string) {
     }
     if (id === 'load-game') {
         core.dom.gameGroup.style.display = 'block';
-        start.style.top = '100vh';
+        start.style.top = '200vh';
         core.load();
     }
     if (id === 'replay') core.chooseReplayFile();
@@ -336,11 +343,15 @@ onUnmounted(() => {
     opacity: 0;
     transition: opacity 0.6s ease-out;
     background-color: black;
+    object-fit: contain;
 }
 
 #start-div {
     position: relative;
     overflow: hidden;
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
 }
 
 #background {

src/ui/statusBar.vue

@@ -236,13 +236,13 @@ onMounted(() => {
     background-color: #0009;
     width: 100%;
     height: 100%;
-    padding: 1vh 0 1vh 0;
+    padding: 1vh 0;
 }
 
 .status-item {
     position: relative;
     max-width: 17.5vw;
-    font-size: 1.9vw;
+    font-size: 200%;
     width: 100%;
     margin-bottom: 1vh;
     text-shadow: 3px 2px 3px #000, 0px 0px 3px #111;
@@ -278,7 +278,7 @@ onMounted(() => {
 
 #status-floor {
     max-width: 17.5vw;
-    font-size: 1.9vw;
+    font-size: 200%;
     width: 100%;
     text-align: center;
     text-shadow: 3px 2px 3px #000, 0px 0px 3px #111;
@@ -286,7 +286,7 @@ onMounted(() => {
 
 #status-lv {
     max-width: 17.5vw;
-    font-size: 1.9vw;
+    font-size: 200%;
     width: 100%;
     text-align: center;
     text-shadow: 3px 2px 3px #000, 0px 0px 3px #111;
@@ -296,7 +296,7 @@ onMounted(() => {
     position: absolute;
     right: 10%;
     bottom: 0;
-    font-size: 1.6vw;
+    font-size: 75%;
 }
 
 #status-mana {
@@ -313,13 +313,13 @@ onMounted(() => {
     line-height: 0;
     color: rgb(167, 255, 167);
     top: 0;
-    font-size: 1.4vw;
+    font-size: 75%;
 }
 
 #status-jump {
     line-height: 0;
     top: 0;
-    font-size: 1.3vw;
+    font-size: 75%;
 }
 
 #status-key {
@@ -336,26 +336,22 @@ onMounted(() => {
 
 @media screen and (max-width: 600px) {
     .status-item {
-        max-width: 150px;
+        max-width: 40vw;
-        font-size: 18px;
+        font-size: 120%;
     }
 
     #status-floor {
-        max-width: 150px;
+        max-width: 40vw;
-        font-size: 18px;
+        font-size: 120%;
         width: 100%;
     }
 
     #status-lv {
-        max-width: 150px;
+        max-width: 40vw;
-        font-size: 18px;
+        font-size: 120%;
         width: 100%;
     }
 
-    .status-extra {
-        font-size: 14px;
-    }
-
     .status-icon {
         width: 28px;
         height: 28px;

src/ui/toolbox.vue

@@ -266,7 +266,7 @@ onUnmounted(() => {
     flex-direction: row;
     justify-content: space-between;
     font-family: 'normal';
-    font-size: 2.5vh;
+    font-size: 150%;
     user-select: none;
 }
 
@@ -327,7 +327,7 @@ onUnmounted(() => {
     justify-content: space-between;
     align-items: center;
     margin: 1vh 0 0 0;
-    padding: 0.5vh 0.5vw 0.5vh 0.5vw;
+    padding: 0.5vh 0.5vw;
     border: #0000 0.5px solid;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -402,7 +402,7 @@ onUnmounted(() => {
     #toolbox-main {
         flex-direction: column-reverse;
         height: 100%;
-        font-size: 3.8vw;
+        font-size: 100%;
     }
 
     .item-list {