AncTe/HumanBreak
1
0
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-01-19 12:49:25 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: 设置的修改部分

Browse Source
This commit is contained in:
unanmed 2023-11-16 22:50:13 +08:00
parent 9271e25dd9
commit d8c98ad7d5
7 changed files with 186 additions and 1555 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

@ -2,8 +2,9 @@
<div id="ui-new">
<div id="ui-main">
<div id="ui-list">
<div class="ui-one" v-for="ui of mainUi.stack">
<div class="ui-one" v-for="(ui, index) of mainUi.stack">
<component
v-if="show(index)"
:is="ui.ui.component"
v-on="ui.vOn ?? {}"
v-bind="ui.vBind ?? {}"
@ -31,6 +32,11 @@ import { hook } from '@/core/main/game';
onMounted(() => {
hook.emit('mounted');
});
function show(index: number) {
if (mainUi.show === 'all') return true;
if (mainUi.show === 'end') return index === mainUi.stack.length - 1;
}
</script>
<style lang="less" scoped>

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

@ -168,6 +168,7 @@ export class UiController extends Focus<IndexedGameUi> {
static list: UiController[] = [];
list: Record<string, GameUi> = {};
num: number = 0;
show: 'end' | 'all' = 'all';
private hold: boolean = false;
@ -191,6 +192,20 @@ export class UiController extends Focus<IndexedGameUi> {
});
}
/**
* 设置为仅显示最后一个ui
*/
showEnd() {
this.show = 'end';
}
/**
* 设置为显示所有ui
*/
showAll() {
this.show = 'all';
}
/**
* 执行按键操作
* @param key 按键的KeyCode

110
src/core/main/init/settings.tsx Normal file
View File

@ -0,0 +1,110 @@
import type { SettingComponent, SettingComponentProps } from '../setting';
import { Button, InputNumber } from 'ant-design-vue';
import { mainUi } from './ui';
interface Components {
DefaultSetting: SettingComponent;
BooleanSetting: SettingComponent;
NumberSetting: SettingComponent;
HotkeySetting: SettingComponent;
ToolbarSetting: SettingComponent;
}
export function createSettingComponents() {
const com: Components = {
DefaultSetting,
BooleanSetting,
NumberSetting,
HotkeySetting,
ToolbarSetting
};
return com;
}
function DefaultSetting(props: SettingComponentProps) {
return (
<div>
<span> 未知的设置类型 </span>
</div>
);
}
function BooleanSetting(props: SettingComponentProps) {
const { setting, displayer, item } = props;
const changeValue = () => {
setting.setValue(displayer.selectStack.join('.'), !item.value);
displayer.update();
};
return (
<div>
<span>当前 {item.value ? '开启' : '关闭'}</span>
<Button type="primary" size="large" onClick={changeValue}>
{item.value ? '开启' : '关闭'}设置
</Button>
</div>
);
}
function NumberSetting(props: SettingComponentProps) {
const { setting, displayer, item } = props;
const changeValue = () => {
setting.setValue(displayer.selectStack.join('.'), !item.value);
displayer.update();
};
return (
<div>
<span> 修改设置： </span>
<InputNumber
class="number-input"
size="large"
keyboard={true}
min={item.step?.[0] ?? 0}
max={item.step?.[1] ?? 100}
step={item.step?.[2] ?? 1}
value={item.value as number}
onChange={changeValue}
></InputNumber>
</div>
);
}
function showSpecialSetting(id: string) {
const ui = mainUi.get(id);
mainUi.showEnd();
ui.once('close', () => {
mainUi.showAll();
});
mainUi.open(id);
}
function HotkeySetting(props: SettingComponentProps) {
// todo: hotkey.vue
return (
<div>
<Button
type="primary"
size="large"
onClick={() => showSpecialSetting('hotkey')}
>
快捷键设置
</Button>
</div>
);
}
function ToolbarSetting(props: SettingComponentProps) {
// todo: toolSetting.vue
return (
<div>
<Button
type="primary"
size="large"
onClick={() => showSpecialSetting('toolSetting')}
>
自定义工具栏
</Button>
</div>
);
}

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

@ -35,6 +35,7 @@ mainUi.register(
new GameUi('bgm', UI.BgmList, exitKey)
// todo: 把游戏主 div 加入到 mainUi 里面
);
mainUi.showAll();
export const fixedUi = new UiController(true);
fixedUi.register(
@ -45,6 +46,7 @@ fixedUi.register(
new GameUi('completeAchi', UI.CompleteAchi),
new GameUi('start', UI.Start)
);
fixedUi.showAll();
hook.once('mounted', () => {
const ui = document.getElementById('ui-main')!;

79
src/core/main/setting.ts
View File

@ -1,21 +1,28 @@
import { Component, reactive } from 'vue';
import { FunctionalComponent, reactive } from 'vue';
import { EmitableEvent, EventEmitter } from '../common/eventEmitter';
import { loading } from '../loader/load';
import { hook } from './game';
import { GameStorage } from './storage';
import { triggerFullscreen } from '@/plugin/utils';
import { createSettingComponents } from './init/settings';
export interface SettingComponentProps {
item: MotaSettingItem;
setting: MotaSetting;
displayer: SettingDisplayer;
}
export type SettingComponent = FunctionalComponent<SettingComponentProps>;
type MotaSettingType = boolean | number | MotaSetting;
export interface MotaSettingItem<T extends MotaSettingType = MotaSettingType> {
name: string;
key: string;
value: T;
controller: SettingComponent;
defaults?: boolean | number;
step?: [number, number, number];
display?: (value: T) => string;
controller?: Component;
special?: string;
}
interface SettingEvent extends EmitableEvent {
@ -36,6 +43,8 @@ export interface SettingDisplayInfo {
text: string[];
}
const COM = createSettingComponents();
export class MotaSetting extends EventEmitter<SettingEvent> {
readonly list: Record<string, MotaSettingItem> = {};
@ -49,15 +58,6 @@ export class MotaSetting extends EventEmitter<SettingEvent> {
}
}
/**
* 标记为特殊的设置项
*/
markSpecial(key: string, sp: string) {
const setting = this.getSettingBy(key.split('.'));
setting.special = sp;
return this;
}
/**
* 注册一个数字型设置
* @param key 设置的键名
@ -67,6 +67,7 @@ export class MotaSetting extends EventEmitter<SettingEvent> {
key: string,
name: string,
value: number,
com?: SettingComponent,
step?: [number, number, number]
): this;
/**
@ -74,17 +75,24 @@ export class MotaSetting extends EventEmitter<SettingEvent> {
* @param key 设置的键名
* @param value 设置的值
*/
register(key: string, name: string, value: boolean | MotaSetting): this;
register(
key: string,
name: string,
value: boolean | MotaSetting,
com?: SettingComponent
): this;
register(
key: string,
name: string,
value: MotaSettingType,
com: SettingComponent = COM.DefaultSetting,
step: [number, number, number] = [0, 100, 1]
) {
const setting: MotaSettingItem = {
name,
value,
key
key,
controller: com
};
if (!(value instanceof MotaSetting)) setting.defaults = value;
if (typeof value === 'number') setting.step = step;
@ -148,7 +156,12 @@ export class MotaSetting extends EventEmitter<SettingEvent> {
return this;
}
setValueController(key: string, com: Component) {
/**
* 设置一个设置的修改部分组件
* @param key 要设置的设置的键
* @param com 设置修改部分的组件
*/
setValueController(key: string, com: SettingComponent) {
const setting = this.getSettingBy(key.split('.'));
setting.controller = com;
return this;
@ -359,43 +372,41 @@ mainSetting
'screen',
'显示设置',
new MotaSetting()
.register('fullscreen', '全屏游戏', false)
.register('halo', '光环显示', true)
.register('itemDetail', '宝石血瓶显伤', true)
.register('heroDetail', '勇士显伤', false)
.register('transition', '界面动画', false)
.register('antiAlias', '抗锯齿', false)
.register('fontSize', '字体大小', 16, [8, 28, 1])
.register('smoothView', '平滑镜头', true)
.register('criticalGem', '临界显示方式', false)
.register('fullscreen', '全屏游戏', false, COM.BooleanSetting)
.register('halo', '光环显示', true, COM.BooleanSetting)
.register('itemDetail', '宝石血瓶显伤', true, COM.BooleanSetting)
.register('heroDetail', '勇士显伤', false, COM.BooleanSetting)
.register('transition', '界面动画', false, COM.BooleanSetting)
.register('antiAlias', '抗锯齿', false, COM.BooleanSetting)
.register('fontSize', '字体大小', 16, COM.NumberSetting, [8, 28, 1])
.register('smoothView', '平滑镜头', true, COM.BooleanSetting)
.register('criticalGem', '临界显示方式', false, COM.BooleanSetting)
.setDisplayFunc('criticalGem', value => (value ? '宝石数' : '攻击'))
)
.register(
'action',
'操作设置',
new MotaSetting()
.register('autoSkill', '自动切换技能', true)
.register('fixed', '定点查看', true)
.register('hotkey', '快捷键', false)
.markSpecial('hotkey', 'hotkey')
.register('autoSkill', '自动切换技能', true, COM.BooleanSetting)
.register('fixed', '定点查看', true, COM.BooleanSetting)
.register('hotkey', '快捷键', false, COM.BooleanSetting)
.setDisplayFunc('hotkey', () => '')
.register('toolbar', '自定义工具栏', false)
.markSpecial('toolbar', 'toolbar')
.register('toolbar', '自定义工具栏', false, COM.BooleanSetting)
.setDisplayFunc('toolbar', () => '')
)
.register(
'utils',
'系统设置',
new MotaSetting()
.register('betterLoad', '优化加载', true)
.register('autoScale', '自动放缩', true)
.register('betterLoad', '优化加载', true, COM.BooleanSetting)
.register('autoScale', '自动放缩', true, COM.BooleanSetting)
)
.register(
'fx',
'特效设置',
new MotaSetting()
.register('paraLight', '野外阴影', true)
.register('frag', '打怪特效', true)
.register('paraLight', '野外阴影', true, COM.BooleanSetting)
.register('frag', '打怪特效', true, COM.BooleanSetting)
);
interface SettingStorage {

44
src/ui/settings.vue
View File

@ -52,43 +52,13 @@
></div>
<a-divider class="info-divider" dashed></a-divider>
<div class="info-editor" v-if="!!selectedItem">
<div class="editor-custom" v-if="!!selectedItem.controller">
<component :is="selectedItem.controller"></component>
</div>
<div v-else-if="!!selectedItem.special"></div>
<div
class="editor-number"
v-else-if="typeof selectedItem.value === 'number'"
>
<span>修改设置：</span>
<a-input-number
class="number-input"
size="large"
:min="selectedItem.step?.[0] ?? 0"
:max="selectedItem.step?.[1] ?? 100"
:step="selectedItem.step?.[2] ?? 1"
:keyboard="true"
:value="selectedItem.value"
@change="changeValue"
></a-input-number>
</div>
<div
class="editor-boolean"
v-else-if="typeof selectedItem.value === 'boolean'"
>
<span
>当前{{
selectedItem.value ? '开启' : '关闭'
}}</span
>
<a-button
class="boolean-button"
type="primary"
size="large"
@click="changeValue(!selectedItem.value)"
>
{{ selectedItem.value ? '关闭' : '开启' }}设置
</a-button>
<div class="editor-custom">
<component
:is="selectedItem.controller"
:item="selectedItem"
:displayer="displayer"
:setting="setting"
></component>
</div>
</div>
</div>

1483
回合制.js
View File

File diff suppressed because it is too large Load Diff