AncTe/HumanBreak
1
0
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-01-31 23:29:27 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 新的ui系统

Browse Source
This commit is contained in:
unanmed 2023-10-29 22:13:37 +08:00
parent 57498ea72e
commit 669ad11c82
10 changed files with 182 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/libs/control.js
View File

@ -2317,7 +2317,7 @@ control.prototype._doSL_load = function (id, callback) {
1
)[0];
if (!main.replayChecking) {
mota.plugin.ui.startOpened.value = false;
mota.ui.fixed.open('start');
}
if (core.isPlaying() && !core.status.gameOver) {
core.control.autosave(0);
@ -2334,7 +2334,7 @@ control.prototype._doSL_load = function (id, callback) {
null,
function (data) {
if (!main.replayChecking && data) {
mota.plugin.ui.startOpened.value = false;
mota.ui.fixed.closeByName('start');
}
if (id == 'autoSave' && data != null) {
core.saves.autosave.data = data;

2
public/libs/events.js
View File

@ -26,7 +26,7 @@ events.prototype.startGame = function (hard, seed, route, callback) {
hard = hard || '';
core.dom.gameGroup.style.display = 'block';
if (!main.replayChecking) {
mota.plugin.ui.startOpened.value = false;
mota.ui.fixed.closeByName('start');
}
if (main.mode != 'play') return;

89
src/App.vue
View File

@ -1,14 +1,43 @@
<template>
<div id="ui">
<!-- <div id="ui">
<template v-for="com of uiStack">
<component :is="com"></component>
</template>
</div> -->
<div id="ui-new">
<div id="ui-main">
<div id="ui-list">
<div class="ui-one" v-for="ui of mainUi.stack">
<template>
<component
:is="ui.ui.component"
v-on="ui.vOn ?? {}"
v-bind="ui.vBind ?? {}"
></component>
</template>
</div>
</div>
</div>
<div id="ui-fixed">
<template v-for="ui of fixedUi.stack">
<component
:is="ui.ui.component"
v-on="ui.vOn ?? {}"
v-bind="ui.vBind ?? {}"
></component>
</template>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { uiStack } from './plugin/uiController';
import { onMounted } from 'vue';
import { mainUi, fixedUi } from './core/main/init/ui';
import { hook } from '@/core/main/game';
onMounted(() => {
hook.emit('mounted');
});
</script>
<style lang="less" scoped>
@ -20,10 +49,64 @@ import { uiStack } from './plugin/uiController';
overflow: hidden;
}
#ui-new {
width: 0;
height: 0;
left: 0;
top: 0;
position: fixed;
overflow: visible;
display: block;
}
#ui-main {
width: 100vw;
height: 100vh;
display: none;
justify-content: center;
left: 0;
top: 0;
position: fixed;
}
#ui-list {
width: 90%;
height: 90%;
overflow: hidden;
position: relative;
left: 0;
top: 0;
}
.ui-one {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
}
#ui-fixed {
position: fixed;
width: 0;
height: 0;
overflow: visible;
left: 0;
top: 0;
display: none;
}
@media screen and (max-width: 600px) {
#ui {
width: 100%;
height: 100%;
}
#ui-list {
width: 100%;
height: 100%;
}
}
</style>

8
src/App2.vue
View File

@ -1,18 +1,18 @@
<template>
<div id="non-ui">
<!-- <div id="non-ui">
<Start v-if="startOpened"></Start>
<StatusBar v-if="showStatusBar"></StatusBar>
<MarkedEnemy v-if="showMarkedEnemy && showStatusBar"></MarkedEnemy>
<!-- <Studied
<Studied
v-if="showStudiedSkill && showStatusBar && showStudied"
></Studied> -->
></Studied>
<Fixed v-if="showStatusBar && useFixed"></Fixed>
<Chapter v-if="chapterShowed" :chapter="chapterContent"></Chapter>
<CompleteAchievement
v-if="showComplete"
:complete="completeAchi"
></CompleteAchievement>
</div>
</div> -->
</template>
<script lang="ts" setup>

17
src/core/main/custom/ui.ts
View File

@ -217,6 +217,23 @@ export class UiController extends Focus<IndexedGameUi> {
this.spliceIndex(ui);
}
/**
* 根据id关闭所有同id的ui，注意非平等模式下，会将第一个ui后的所有ui都关闭掉
* @param id 要关闭的ui的id
*/
closeByName(id: string) {
console.log(id);
if (!this.equal) {
const ui = this.stack.findIndex(v => v.ui.id === id);
this.spliceIndex(ui);
} else {
let ui;
while ((ui = this.stack.findIndex(v => v.ui.id === id)) !== -1) {
this.spliceIndex(ui);
}
}
}
/**
* 打开一个新的ui
* @param id 要打开的ui的id

3
src/core/main/game.ts
View File

@ -1,7 +1,10 @@
import { EmitableEvent, EventEmitter } from '../common/eventEmitter';
export interface GameEvent extends EmitableEvent {
/** Emitted in events.prototype.resetGame. */
reset: () => void;
/** Emitted in src/App.vue setup. */
mounted: () => void;
}
export const hook = new EventEmitter<GameEvent>();

38
src/core/main/init/ui.ts
View File

@ -19,6 +19,7 @@ import Start from '@ui/start.vue';
import { GameUi, UiController } from '../custom/ui';
import { Hotkey } from '../custom/hotkey';
import { KeyCode } from '@/plugin/keyCodes';
import { hook } from '../game';
export const exitKey = new Hotkey('exitKey');
exitKey
@ -48,8 +49,7 @@ mainUi.register(
new GameUi('fixedDetail', FixedDetail, exitKey),
new GameUi('shop', Shop, exitKey),
new GameUi('achievement', Achievement, exitKey),
new GameUi('bgm', Bgm, exitKey),
new GameUi('start', Start)
new GameUi('bgm', Bgm, exitKey)
// todo: 把游戏主 div 加入到 mainUi 里面
);
@ -59,7 +59,37 @@ fixedUi.register(
new GameUi('markedEnemy', Mark),
new GameUi('fixed', Fixed),
new GameUi('chapter', Chapter),
new GameUi('completeAchi', CompleteAchi)
new GameUi('completeAchi', CompleteAchi),
new GameUi('start', Start)
);
mainUi.focusByNum(mainUi.open('start'));
hook.once('mounted', () => {
mainUi.on('start', () => {
const ui = document.getElementById('ui-main');
if (ui) {
ui.style.display = 'flex';
}
});
mainUi.on('end', () => {
const ui = document.getElementById('ui-main');
if (ui) {
ui.style.display = 'none';
}
});
fixedUi.on('start', () => {
console.log(1);
const ui = document.getElementById('ui-fixed');
if (ui) {
ui.style.display = 'block';
}
});
fixedUi.on('end', () => {
console.log(1);
const ui = document.getElementById('ui-fixed');
if (ui) {
ui.style.display = 'none';
}
});
mainUi.focusByNum(fixedUi.open('start'));
});

2
src/main.ts
View File

@ -6,7 +6,7 @@ import 'ant-design-vue/dist/antd.dark.css';
import './core/index';
createApp(App).mount('#root');
createApp(App2).mount('#root2');
// createApp(App2).mount('#root2');
main.init('play');
main.listen();

58
src/plugin/uiController.ts
View File

@ -40,41 +40,41 @@ let app: HTMLDivElement;
/** ui声明列表 */
const UI_LIST: [Ref<boolean>, Component][] = [
[bookOpened, Book],
[toolOpened, Toolbox],
[equipOpened, Equipbox],
[settingsOpened, Settings],
[descOpened, Desc],
[skillOpened, Skill],
[skillTreeOpened, SkillTree],
[flyOpened, Fly],
[fixedDetailOpened, FixedDetail],
[shopOpened, Shop],
[achievementOpened, Achievement],
[bgmOpened, Bgm]
// [bookOpened, Book],
// [toolOpened, Toolbox],
// [equipOpened, Equipbox],
// [settingsOpened, Settings],
// [descOpened, Desc],
// [skillOpened, Skill],
// [skillTreeOpened, SkillTree],
// [flyOpened, Fly],
// [fixedDetailOpened, FixedDetail],
// [shopOpened, Shop],
// [achievementOpened, Achievement],
// [bgmOpened, Bgm]
];
/** ui栈 */
export const uiStack = shallowReactive<Component[]>([]);
export default function init() {
app = document.getElementById('root') as HTMLDivElement;
UI_LIST.forEach(([ref, com]) => {
watch(ref, n => {
if (n === true) {
uiStack.push(markRaw(com));
showApp();
} else {
const index = uiStack.findIndex(v => v === com);
if (index === -1) return;
if (uiStack.length === 1) {
hideApp(index);
} else {
uiStack.splice(index, 1);
}
}
});
});
// app = document.getElementById('root') as HTMLDivElement;
// UI_LIST.forEach(([ref, com]) => {
// watch(ref, n => {
// if (n === true) {
// uiStack.push(markRaw(com));
// showApp();
// } else {
// const index = uiStack.findIndex(v => v === com);
// if (index === -1) return;
// if (uiStack.length === 1) {
// hideApp(index);
// } else {
// uiStack.splice(index, 1);
// }
// }
// });
// });
return {
uiStack,
transition,

20
src/styles.less
View File

@ -1,22 +1,12 @@
// 部分全局css特效
#root {
position: absolute;
display: none;
width: 100%;
height: 100%;
position: fixed;
display: block;
width: 0;
height: 0;
z-index: 1000;
justify-content: center;
align-items: center;
overflow: hidden;
transition: all 0.6s linear;
opacity: 0;
background-color: #000d;
font-size: 16px;
backdrop-filter: blur(2px) grayscale(50%);
}
#root2 {
overflow: visible;
font-size: 16px;
}