mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-02-28 09:27:07 +08:00
修改字体大小
This commit is contained in:
parent
70672349fe
commit
993ff3c669
42
idea.md
42
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: 利用点光源，照到的位置与没照到的位置内容不同，玩家可以选择是否装备手电筒
|
||||
- 苍蓝之殿 2:
|
||||
[] 苍蓝之殿 1: 利用点光源，照到的位置与没照到的位置内容不同，玩家可以选择是否装备手电筒
|
||||
[] 苍蓝之殿 2:
|
||||
|
||||
### 第三章 战争
|
||||
|
||||
[] 装备合成、装备（孔）强化（第三章）
|
||||
|
||||
## 成就
|
||||
|
||||
- 虚惊一场：打完山洞门口的怪只剩 1 滴血
|
||||
- 学坏了：学习敌人的电摇嘲讽技能
|
||||
- 真能刷：勇气之路的刷血怪刷到 15w 以上的血
|
||||
- 满腹经纶：把所有能学的怪物技能都学一遍
|
||||
- 冰与火之舞：通过第二章特殊战的困难难度
|
||||
- 你是怎么做到的?!：山路地图与勇气之路地图中与若干个神秘的木牌对话
|
||||
[] 虚惊一场：打完山洞门口的怪只剩 1 滴血
|
||||
[] 学坏了：学习敌人的电摇嘲讽技能
|
||||
[] 真能刷：勇气之路的刷血怪刷到 15w 以上的血
|
||||
[] 满腹经纶：把所有能学的怪物技能都学一遍
|
||||
[] 冰与火之舞：通过第二章特殊战的困难难度
|
||||
[] 你是怎么做到的?!：山路地图与勇气之路地图中与若干个神秘的木牌对话
|
||||
|
||||
### 伤害对应
|
||||
|
||||
@ -55,7 +59,6 @@ dam4.png ---- 存档 59
|
||||
|
||||
[] 实时天气（待定）
|
||||
[x] 成就系统
|
||||
[] 装备合成、装备（孔）强化
|
||||
[] 宝石目标设定
|
||||
[] 自动宝物规划，选中两个或更多宝物后自动在本地图中规划出最优拾取路线，原则是尽量减少其余宝物的捡拾，自动切换主动技能，怪物造成的伤害最低的路线
|
||||
[] 临界显示方式，宝石数还是数值
|
||||
@ -73,9 +76,10 @@ dam4.png ---- 存档 59
|
||||
[] 视角控制系统
|
||||
[x] 重构设置界面
|
||||
[] 优化开头动画
|
||||
[] 玩家可以设置字体大小
|
||||
[x] 玩家可以设置字体大小
|
||||
[] 完全删除 functions.js
|
||||
[x] 优化插件加载系统
|
||||
[] 优化 Scroll 组件
|
||||
[] 重写技能控制系统
|
||||
[] 自定义快捷键
|
||||
[] 优化 ui 控制系统
|
||||
|
||||
26
index.html
26
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'>
|
||||
|
||||
@ -40,5 +40,7 @@ import CompleteAchievement from './ui/completeAchievement.vue';
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
width: 100%;
|
||||
font-size: 140%;
|
||||
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>
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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": [
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
font-size: 3.8vw;
|
||||
#enemy-desc {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
#mark-target {
|
||||
font-size: 4vw;
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
};
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
opacity: 0;
|
||||
background-color: #000d;
|
||||
font-size: 16px;
|
||||
backdrop-filter: blur(2px) grayscale(50%);
|
||||
}
|
||||
|
||||
#root2 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 toShow: ToShowEnemy[] = enemy.map(v =>
|
||||
getDetailedEnemy(v.enemy, floorId)
|
||||
);
|
||||
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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -139,11 +139,7 @@
|
||||
style="border-color: #ddd4; margin: 1vh 0 1vh 0"
|
||||
></a-divider>
|
||||
<div id="equip-add">
|
||||
<span
|
||||
:style="{ 'font-size': isMobile ? '3.8vw' : '3vh' }"
|
||||
id="title"
|
||||
>增减属性</span
|
||||
>
|
||||
<span 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
|
||||
:style="{ 'font-size': isMobile ? '3.8vw' : '3vh' }"
|
||||
id="title"
|
||||
>装备介绍</span
|
||||
>
|
||||
<span 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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
if (!isMobile) {
|
||||
startdiv.style.width = `${width}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 {
|
||||
|
||||
@ -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;
|
||||
font-size: 18px;
|
||||
max-width: 40vw;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
#status-floor {
|
||||
max-width: 150px;
|
||||
font-size: 18px;
|
||||
max-width: 40vw;
|
||||
font-size: 120%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#status-lv {
|
||||
max-width: 150px;
|
||||
font-size: 18px;
|
||||
max-width: 40vw;
|
||||
font-size: 120%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-extra {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user