diff --git a/src/App2.vue b/src/App2.vue
index 70e4c37..9a8133b 100644
--- a/src/App2.vue
+++ b/src/App2.vue
@@ -40,5 +40,7 @@ import CompleteAchievement from './ui/completeAchievement.vue';
width: 0;
height: 0;
overflow: visible;
+ left: 0;
+ top: 0;
}
diff --git a/src/components/colomn.vue b/src/components/colomn.vue
index 3718aef..1d72ffc 100644
--- a/src/components/colomn.vue
+++ b/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 {
diff --git a/src/components/enemyOne.vue b/src/components/enemyOne.vue
index 8aaa654..6ab8316 100644
--- a/src/components/enemyOne.vue
+++ b/src/components/enemyOne.vue
@@ -143,7 +143,7 @@ function enter() {
diff --git a/src/core/main/setting.ts b/src/core/main/setting.ts
index 70951a0..0a13ac4 100644
--- a/src/core/main/setting.ts
+++ b/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;
diff --git a/src/data/settings.json b/src/data/settings.json
index 5963dd8..791a5f4 100644
--- a/src/data/settings.json
+++ b/src/data/settings.json
@@ -1,8 +1,8 @@
{
"screen": {
"fullscreen": [
- "是否全屏进行游戏，全屏后按ESC退出全屏，不能开启系统设置菜单，请按下方的按钮打开。",
- "进入或退出全屏后请存读档一下，以解决一部分绘制问题。"
+ "是否全屏进行游戏，全屏后按ESC退出全屏，开启后将不能通过按ESC开启系统设置菜单，",
+ "请按下方的按钮打开。进入或退出全屏后请存读档一下，以解决一部分绘制问题。"
],
"halo": ["开启后，会在地图上显示范围光环。"],
"frag": ["开启后，在打败怪物后会触发怪物碎裂特效。"],
@@ -24,7 +24,9 @@
"
",
"2. 如果缩放后游戏画面高度高于页面高度的95%，那么缩小一个缩放比例，否则保持最大比例"
],
- "fontSize": ["在各种 ui 界面中显示的文字大小，范围为 8 - 28"]
+ "fontSize": [
+ "在各种 ui 界面中显示的文字大小，范围为 8 - 28。注意，字体过大可能会引起 ui 布局发生错误"
+ ]
},
"action": {
"autoSkill": [
diff --git a/src/panel/enemyCritical.vue b/src/panel/enemyCritical.vue
index 963775d..8a03d91 100644
--- a/src/panel/enemyCritical.vue
+++ b/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%;
}
}
diff --git a/src/panel/enemySpecial.vue b/src/panel/enemySpecial.vue
index aac5b60..9212f3e 100644
--- a/src/panel/enemySpecial.vue
+++ b/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 {
diff --git a/src/panel/enemyTarget.vue b/src/panel/enemyTarget.vue
index 7240bc5..ba8d2b1 100644
--- a/src/panel/enemyTarget.vue
+++ b/src/panel/enemyTarget.vue
@@ -45,7 +45,7 @@ function mark() {
diff --git a/src/plugin/ui/fixed.ts b/src/plugin/ui/fixed.ts
index ac5a3d4..874730c 100644
--- a/src/plugin/ui/fixed.ts
+++ b/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.slice(0, 2).concat(['...', '', '#fff'])
+ special.length > l
+ ? special.slice(0, l).concat([['...', '', '#fff']])
: special.slice();
const damageColor = getDamageColor(dam) as string;
diff --git a/src/plugin/use.ts b/src/plugin/use.ts
index 63b1925..99367ac 100644
--- a/src/plugin/use.ts
+++ b/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
();
*/
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);
};
diff --git a/src/styles.less b/src/styles.less
index a66430d..2eb8437 100644
--- a/src/styles.less
+++ b/src/styles.less
@@ -13,6 +13,7 @@
opacity: 0;
background-color: #000d;
font-size: 16px;
+ backdrop-filter: blur(2px) grayscale(50%);
}
#root2 {
diff --git a/src/ui/achievement.vue b/src/ui/achievement.vue
index 0755119..f6526a4 100644
--- a/src/ui/achievement.vue
+++ b/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;
- font-size: 3.5vh;
+ margin-top: 3%;
+ 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;
- margin: 2vh 0 2.5vh 0;
+ border-radius: 10px;
+ 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;
- margin-left: 2vh;
+ font-size: 70%;
+ 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;
- }
}
}
}
diff --git a/src/ui/book.vue b/src/ui/book.vue
index 3559358..f9a61c0 100644
--- a/src/ui/book.vue
+++ b/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 e = v.enemy;
- 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 toShow: ToShowEnemy[] = enemy.map(v =>
+ getDetailedEnemy(v.enemy, floorId)
+);
const scroll = ref(0);
const drag = ref(false);
@@ -293,5 +254,9 @@ onUnmounted(async () => {
width: 100%;
padding: 5%;
}
+
+ .enemy {
+ height: 15vh;
+ }
}
diff --git a/src/ui/bookDetail.vue b/src/ui/bookDetail.vue
index f0dae14..ad7f1b9 100644
--- a/src/ui/bookDetail.vue
+++ b/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;
diff --git a/src/ui/equipbox.vue b/src/ui/equipbox.vue
index be232c8..1030676 100644
--- a/src/ui/equipbox.vue
+++ b/src/ui/equipbox.vue
@@ -139,11 +139,7 @@
style="border-color: #ddd4; margin: 1vh 0 1vh 0"
>
-
增减属性
+
增减属性
@@ -153,11 +149,7 @@
style="border-color: #ddd4; margin: 1vh 0 1vh 0"
>
-
装备介绍
+
装备介绍
{{ 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 {
diff --git a/src/ui/fly.vue b/src/ui/fly.vue
index 4756038..9446b1e 100644
--- a/src/ui/fly.vue
+++ b/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 {
diff --git a/src/ui/markedEnemy.vue b/src/ui/markedEnemy.vue
index 087d327..d7afbb1 100644
--- a/src/ui/markedEnemy.vue
+++ b/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;
diff --git a/src/ui/settings.vue b/src/ui/settings.vue
index 9256eec..5959453 100644
--- a/src/ui/settings.vue
+++ b/src/ui/settings.vue
@@ -37,7 +37,7 @@