HumanBreak/src/ui/statusBar.vue

392 lines
11 KiB
Vue
Raw Normal View History

2022-12-28 12:13:52 +08:00
<template>
2022-12-28 20:34:23 +08:00
<div id="status-bar">
2023-01-06 16:21:17 +08:00
<Box
:resizable="true"
:dragable="true"
v-model:width="width"
v-model:height="height"
>
2022-12-28 20:34:23 +08:00
<Scroll
id="status-main"
v-model:update="updateStatus"
:no-scroll="true"
>
<div id="status-div">
2022-12-30 16:54:50 +08:00
<span
id="status-floor"
2023-01-06 16:21:17 +08:00
@click.stop="viewMap"
2022-12-30 16:54:50 +08:00
class="button-text"
>{{ floor }}</span
>
2022-12-28 20:34:23 +08:00
<span id="status-lv">{{ lvName }}</span>
<div id="status-skill" class="status-item">
<img
src="/project/images/skill.png"
class="status-icon"
/>
<span>{{ skill }}</span>
2023-04-22 17:01:35 +08:00
<span
v-if="has(spring)"
id="status-spring"
class="status-extra"
>剩余{{ spring }}</span
>
2022-12-28 20:34:23 +08:00
</div>
<div id="status-hp" class="status-item">
<img src="/project/images/hp.png" class="status-icon" />
2022-12-29 14:05:16 +08:00
<span class="status-item-bold">{{
format(hero.hp!)
}}</span>
<span
id="status-hpmax"
class="status-extra status-item-bold"
2022-12-28 20:34:23 +08:00
>+{{ format(hero.hpmax!) }}/t</span
>
<span
2023-04-22 17:01:35 +08:00
v-if="has(jumpCnt)"
id="status-jump"
2022-12-28 20:34:23 +08:00
class="status-extra"
2023-04-22 17:01:35 +08:00
>跳跃剩余{{ jumpCnt }}</span
2022-12-28 20:34:23 +08:00
>
</div>
<div id="status-atk" class="status-item">
<img
src="/project/images/atk.png"
class="status-icon"
/>
2022-12-29 14:05:16 +08:00
<span class="status-item-bold">{{
format(hero.atk!)
}}</span>
<span
id="status-mana"
class="status-extra status-item-bold"
2022-12-28 20:34:23 +08:00
>+{{ format(hero.mana!) }}</span
>
</div>
2022-12-29 14:05:16 +08:00
<div id="status-def" class="status-item status-item-bold">
2022-12-28 20:34:23 +08:00
<img
src="/project/images/def.png"
class="status-icon"
/>
<span>{{ format(hero.def!) }}</span>
</div>
2022-12-29 14:05:16 +08:00
<div id="status-mdef" class="status-item status-item-bold">
2022-12-28 20:34:23 +08:00
<img src="/project/images/IQ.png" class="status-icon" />
<span>{{ format(hero.mdef!) }}</span>
</div>
2022-12-29 14:05:16 +08:00
<div id="status-money" class="status-item status-item-bold">
2022-12-28 20:34:23 +08:00
<img
src="/project/images/money.png"
class="status-icon"
/>
<span>{{ format(hero.money!) }}</span>
</div>
2022-12-29 14:05:16 +08:00
<div id="status-exp" class="status-item status-item-bold">
2022-12-28 20:34:23 +08:00
<img
src="/project/images/exp.png"
class="status-icon"
/>
<span>{{ format(up) }}</span>
</div>
2022-12-29 14:05:16 +08:00
<div id="status-key" class="status-item status-item-bold">
2022-12-28 20:34:23 +08:00
<span style="color: #fca; padding-left: 10%">{{
keys[0]?.toString().padStart(2, '0')
}}</span>
<span style="color: #aad">{{
keys[1]?.toString().padStart(2, '0')
}}</span>
<span style="color: #f88; padding-right: 10%">{{
keys[2]?.toString().padStart(2, '0')
}}</span>
</div>
2022-12-29 13:39:40 +08:00
<div v-if="skillOpened" class="status-item">
2022-12-30 14:14:28 +08:00
<span
id="skill-tree"
class="button-text"
2023-01-05 22:21:40 +08:00
@click.stop="openSkillTree"
2022-12-30 14:14:28 +08:00
>技能树</span
>
2022-12-28 20:34:23 +08:00
</div>
2022-12-29 13:39:40 +08:00
<div v-if="skillOpened" class="status-item">
2022-12-30 14:14:28 +08:00
<span
id="status-skill"
class="button-text"
2023-01-05 22:21:40 +08:00
@click.stop="openSkill"
>查看技能</span
>
</div>
<div v-if="studyOpened" class="status-item">
<span
2023-01-15 20:09:02 +08:00
id="status-study"
2023-01-05 22:21:40 +08:00
class="button-text"
@click.stop="openStudy"
2023-01-15 20:09:02 +08:00
>学习</span
2022-12-28 20:34:23 +08:00
>
</div>
</div>
</Scroll>
</Box>
</div>
2022-12-28 12:13:52 +08:00
</template>
<script lang="ts" setup>
2024-04-20 12:27:38 +08:00
import { onMounted, onUnmounted, ref, shallowReactive, watch } from 'vue';
2022-12-28 20:34:23 +08:00
import Box from '../components/box.vue';
import Scroll from '../components/scroll.vue';
2022-12-28 12:13:52 +08:00
import { status } from '../plugin/ui/statusBar';
2022-12-28 20:34:23 +08:00
import { isMobile } from '../plugin/use';
2024-04-20 12:27:38 +08:00
import { fontSize } from '../plugin/ui/statusBar';
import { has } from '@/plugin/utils';
2022-12-28 20:34:23 +08:00
2024-04-20 12:27:38 +08:00
let main: HTMLDivElement;
const items = core.flags.statusBarItems;
const icons = core.statusBar.icons;
2024-02-01 19:31:49 +08:00
const skillTree = Mota.Plugin.require('skillTree_g');
2022-12-29 14:05:16 +08:00
const width = ref(
2023-04-21 22:48:47 +08:00
isMobile ? window.innerWidth - 60 : window.innerWidth * 0.175
2022-12-29 14:05:16 +08:00
);
2022-12-28 20:34:23 +08:00
const height = ref(isMobile ? 250 : window.innerHeight - 100);
const updateStatus = ref(false);
const format = core.formatBigNumber;
watch(width, n => (updateStatus.value = !updateStatus.value));
watch(height, n => (updateStatus.value = !updateStatus.value));
2024-04-20 12:27:38 +08:00
watch(fontSize, n => (main.style.fontSize = `${isMobile ? n * 1.5 : n}%`));
2022-12-28 12:13:52 +08:00
const hero = shallowReactive<Partial<HeroStatus>>({});
2022-12-28 20:34:23 +08:00
const keys = shallowReactive<number[]>([]);
2022-12-28 12:13:52 +08:00
const floor = ref<string>();
2022-12-28 20:34:23 +08:00
const lvName = ref<string>();
2023-04-22 10:14:19 +08:00
const skill = ref<string>(flags.autoSkill ? '自动切换' : '无');
2022-12-28 20:34:23 +08:00
const up = ref(0);
const spring = ref<number>();
2022-12-29 13:39:40 +08:00
const skillOpened = ref(core.getFlag('chapter', 0) > 0);
2024-02-01 19:31:49 +08:00
const studyOpened = ref(skillTree.getSkillLevel(11) > 0);
2023-04-22 17:01:35 +08:00
const jumpCnt = ref<number>();
2022-12-28 12:13:52 +08:00
/**
* 要展示的勇士属性
*/
const toShow: (keyof NumbericHeroStatus)[] = [
'hp', // 生命
'atk', // 攻击
'def', // 防御
'mdef', // 智力
'hpmax', // 生命回复
'mana', // 额外攻击
'money', // 金币
2022-12-28 20:34:23 +08:00
'exp', // 经验
'lv' // 等级
2022-12-28 12:13:52 +08:00
];
watch(status, update);
/**
* 更新显示内容
*/
function update() {
toShow.forEach(v => {
2024-02-03 18:01:15 +08:00
hero[v] = Mota.requireAll('fn').getHeroStatusOn(v);
2022-12-28 12:13:52 +08:00
});
2022-12-28 20:34:23 +08:00
keys[0] = core.itemCount('yellowKey');
keys[1] = core.itemCount('blueKey');
keys[2] = core.itemCount('redKey');
2022-12-28 12:13:52 +08:00
floor.value = core.status.thisMap?.title;
2022-12-28 20:34:23 +08:00
lvName.value = core.getLvName(hero.lv);
2023-04-22 10:14:19 +08:00
if (flags.autoSkill) {
skill.value = '自动切换';
2023-01-04 10:29:01 +08:00
} else {
2023-04-22 10:14:19 +08:00
if (flags.blade && flags.bladeOn) {
skill.value = '断灭之刃';
} else if (flags.shield && flags.shieldOn) {
skill.value = '铸剑为盾';
} else {
skill.value = '无';
}
2022-12-28 20:34:23 +08:00
}
up.value = core.getNextLvUpNeed() ?? 0;
if (core.hasFlag('spring')) {
2023-04-27 17:25:09 +08:00
spring.value = 50 - (flags.springCount ?? 0);
2023-04-22 16:09:41 +08:00
} else {
spring.value = void 0;
2022-12-28 20:34:23 +08:00
}
2022-12-29 13:39:40 +08:00
skillOpened.value = core.getFlag('chapter', 0) > 0;
2024-02-01 19:31:49 +08:00
studyOpened.value = skillTree.getSkillLevel(11) > 0;
2023-04-22 17:01:35 +08:00
jumpCnt.value =
flags.skill2 &&
2024-02-01 19:31:49 +08:00
!Mota.Plugin.require('skill_g').jumpIgnoreFloor.includes(
core.status.floorId
)
2023-04-22 17:03:48 +08:00
? 3 - (flags[`jump_${core.status.floorId}`] ?? 0)
2023-04-22 17:01:35 +08:00
: void 0;
2022-12-28 12:13:52 +08:00
}
2022-12-30 14:14:28 +08:00
2023-01-05 22:21:40 +08:00
function openSkillTree() {
2022-12-30 14:14:28 +08:00
core.useItem('skill1');
}
2023-01-05 22:21:40 +08:00
function openSkill() {
2022-12-30 14:14:28 +08:00
core.useItem('cross');
}
2022-12-30 16:54:50 +08:00
2023-01-05 22:21:40 +08:00
function viewMap() {
2022-12-30 16:54:50 +08:00
core.ui._drawViewMaps();
}
2023-01-05 22:21:40 +08:00
function openStudy() {}
2023-04-22 17:01:35 +08:00
2024-04-20 12:27:38 +08:00
function resize() {
requestAnimationFrame(() => {
main.style.fontSize = `${
isMobile ? fontSize.value * 1.5 : fontSize.value
}%`;
});
}
2023-04-22 17:01:35 +08:00
onMounted(() => {
update();
2024-04-20 12:27:38 +08:00
main = document.getElementById('status-main') as HTMLDivElement;
window.addEventListener('resize', resize);
resize();
});
onUnmounted(() => {
window.removeEventListener('resize', resize);
2023-04-22 17:01:35 +08:00
});
2022-12-28 12:13:52 +08:00
</script>
<style lang="less" scoped>
2022-12-28 20:34:23 +08:00
#status-main {
background-color: #0009;
width: 100%;
height: 100%;
2023-08-06 17:46:29 +08:00
padding: 1vh 0;
2024-04-20 12:27:38 +08:00
font-size: v-bind(fontSize);
2022-12-28 20:34:23 +08:00
}
.status-item {
2024-04-20 19:42:54 +08:00
position: relative;
2022-12-29 14:05:16 +08:00
max-width: 17.5vw;
2023-08-06 17:46:29 +08:00
font-size: 200%;
2022-12-28 20:34:23 +08:00
width: 100%;
2024-04-20 12:27:38 +08:00
margin-bottom: 14px;
2022-12-28 20:34:23 +08:00
text-shadow: 3px 2px 3px #000, 0px 0px 3px #111;
display: flex;
flex-direction: row;
align-items: center;
}
2022-12-29 14:05:16 +08:00
.status-item-bold {
font-weight: bold;
}
2022-12-28 20:34:23 +08:00
.status-icon {
2022-12-29 14:05:16 +08:00
width: 2.8vw;
height: 2.8vw;
2022-12-28 20:34:23 +08:00
margin-right: 10%;
margin-left: 10%;
}
2024-04-20 12:27:38 +08:00
.status-value {
transform: translateY(2px);
}
2022-12-28 20:34:23 +08:00
#status-header {
2022-12-28 12:13:52 +08:00
width: 100%;
2022-12-28 20:34:23 +08:00
display: flex;
flex-direction: column;
align-items: center;
}
#status-div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
2022-12-28 12:13:52 +08:00
height: 100%;
2022-12-28 20:34:23 +08:00
}
#status-floor {
2022-12-29 14:05:16 +08:00
max-width: 17.5vw;
2023-08-06 17:46:29 +08:00
font-size: 200%;
2022-12-28 20:34:23 +08:00
width: 100%;
text-align: center;
2022-12-30 14:14:28 +08:00
text-shadow: 3px 2px 3px #000, 0px 0px 3px #111;
2022-12-28 20:34:23 +08:00
}
#status-lv {
2022-12-29 14:05:16 +08:00
max-width: 17.5vw;
2023-08-06 17:46:29 +08:00
font-size: 200%;
2022-12-28 20:34:23 +08:00
width: 100%;
text-align: center;
2022-12-30 14:14:28 +08:00
text-shadow: 3px 2px 3px #000, 0px 0px 3px #111;
2022-12-28 20:34:23 +08:00
}
.status-extra {
position: absolute;
2023-01-06 16:21:17 +08:00
right: 10%;
2022-12-28 20:34:23 +08:00
bottom: 0;
2023-08-06 17:46:29 +08:00
font-size: 75%;
2022-12-28 20:34:23 +08:00
}
#status-mana {
2023-01-15 20:09:02 +08:00
line-height: 0;
2022-12-29 14:05:16 +08:00
color: rgb(255, 211, 211);
2022-12-28 20:34:23 +08:00
}
#status-hpmax {
2023-01-15 20:09:02 +08:00
line-height: 0;
2022-12-29 14:05:16 +08:00
color: rgb(167, 255, 167);
2022-12-28 20:34:23 +08:00
}
#status-spring {
line-height: 0;
2022-12-29 14:05:16 +08:00
color: rgb(167, 255, 167);
2023-04-21 11:34:08 +08:00
top: 0;
2023-08-06 17:46:29 +08:00
font-size: 75%;
2022-12-28 20:34:23 +08:00
}
2023-04-22 17:01:35 +08:00
#status-jump {
line-height: 0;
top: 0;
2023-08-06 17:46:29 +08:00
font-size: 75%;
2023-04-22 17:01:35 +08:00
}
2022-12-28 20:34:23 +08:00
#status-key {
display: flex;
flex-direction: row;
justify-content: space-around;
}
#skill-tree,
#status-skill {
text-align: center;
width: 100%;
}
@media screen and (max-width: 600px) {
.status-item {
2023-08-06 17:46:29 +08:00
max-width: 40vw;
font-size: 120%;
2022-12-28 20:34:23 +08:00
}
#status-floor {
2023-08-06 17:46:29 +08:00
max-width: 40vw;
font-size: 120%;
2022-12-28 20:34:23 +08:00
width: 100%;
}
#status-lv {
2023-08-06 17:46:29 +08:00
max-width: 40vw;
font-size: 120%;
2022-12-28 20:34:23 +08:00
width: 100%;
}
.status-icon {
width: 28px;
height: 28px;
}
2022-12-28 12:13:52 +08:00
}
</style>