mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-06-28 05:07:59 +08:00
feat:存档界面添加按键监听功能
This commit is contained in:
ShakeFlower
parent
1b18ce4268
commit
a8656770be
@ -7,10 +7,12 @@ import {
|
||||
SetupComponentOptions,
|
||||
UIComponentProps
|
||||
} from '@motajs/system-ui';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
import { Background, Page, PageExpose } from '../components';
|
||||
import { useKey } from '../use';
|
||||
import { MAP_WIDTH, MAP_HEIGHT } from '../shared';
|
||||
import { gameKey } from '@motajs/system-action';
|
||||
import { KeyCode } from '@motajs/client-base';
|
||||
|
||||
export interface SaveProps extends UIComponentProps, DefaultProps {
|
||||
loc: ElementLocator;
|
||||
@ -19,6 +21,7 @@ export interface SaveProps extends UIComponentProps, DefaultProps {
|
||||
export interface SaveBtnProps extends DefaultProps {
|
||||
loc: ElementLocator;
|
||||
index: number;
|
||||
isSelected: boolean;
|
||||
isDelete: boolean;
|
||||
}
|
||||
|
||||
@ -37,26 +40,74 @@ const saveProps = {
|
||||
} satisfies SetupComponentOptions<SaveProps, SaveEmits, keyof SaveEmits>;
|
||||
|
||||
const saveBtnProps = {
|
||||
props: ['loc', 'index', 'isDelete']
|
||||
props: ['loc', 'index', 'isSelected', 'isDelete']
|
||||
} satisfies SetupComponentOptions<SaveBtnProps>;
|
||||
|
||||
gameKey
|
||||
.group('@ui_save', 'save')
|
||||
.register({
|
||||
id: '@ui_save_exit',
|
||||
name: '退出存档界面',
|
||||
defaults: KeyCode.KeyS
|
||||
})
|
||||
.register({
|
||||
id: '@ui_save_pageUp',
|
||||
name: '存档向后翻页',
|
||||
defaults: KeyCode.PageUp
|
||||
})
|
||||
.register({
|
||||
id: '@ui_save_pageDown',
|
||||
name: '存档向前翻页',
|
||||
defaults: KeyCode.PageDown
|
||||
})
|
||||
.register({
|
||||
id: '@ui_save_up',
|
||||
name: '存档选择框向上',
|
||||
defaults: KeyCode.UpArrow
|
||||
})
|
||||
.register({
|
||||
id: '@ui_save_down',
|
||||
name: '存档选择框向下',
|
||||
defaults: KeyCode.DownArrow
|
||||
})
|
||||
.register({
|
||||
id: '@ui_save_left',
|
||||
name: '存档选择框向左',
|
||||
defaults: KeyCode.LeftArrow
|
||||
})
|
||||
.register({
|
||||
id: '@ui_save_right',
|
||||
name: '存档选择框向右',
|
||||
defaults: KeyCode.RightArrow
|
||||
});
|
||||
|
||||
export const SaveBtn = defineComponent<SaveBtnProps>(props => {
|
||||
const w = props.loc[2] ?? 200;
|
||||
const text = props.index === -1 ? '自动存档' : `存档${props.index + 1}`;
|
||||
const font = new Font('normal', 18);
|
||||
const text = computed(() =>
|
||||
props.index === -1 ? '自动存档' : `存档${props.index + 1}`
|
||||
);
|
||||
const lineWidth = computed(() => (props.isSelected ? 2 : 1));
|
||||
return () => (
|
||||
<container loc={props.loc}>
|
||||
<text
|
||||
text={text}
|
||||
text={text.value}
|
||||
font={font}
|
||||
loc={[w / 2, 0, void 0, void 0, 0.5, 0]}
|
||||
/>
|
||||
<g-rect
|
||||
loc={[0, 20, w, w]}
|
||||
loc={[lineWidth.value, 20, w - 2 * lineWidth.value, w]}
|
||||
fill
|
||||
stroke
|
||||
fillStyle="gray"
|
||||
strokeStyle={props.isDelete ? 'red' : 'white'}
|
||||
strokeStyle={
|
||||
props.isSelected
|
||||
? props.isDelete
|
||||
? 'red'
|
||||
: 'gold'
|
||||
: 'white'
|
||||
}
|
||||
lineWidth={lineWidth.value}
|
||||
/>
|
||||
<text
|
||||
text="placeholder"
|
||||
@ -76,22 +127,20 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
|
||||
// onEmit 事件在点击存档或按键确认时触发
|
||||
// 存读档执行函数在 ../../utils/saves.ts
|
||||
|
||||
const [row, column] = [2, 3];
|
||||
/** 除自动存档外，每一页容纳的存档数量 */
|
||||
const pageCap = 5;
|
||||
const pageCap = row * column - 1;
|
||||
const font = new Font('normal', 18);
|
||||
|
||||
const isDelete = ref(false);
|
||||
const pageRef = ref<PageExpose>();
|
||||
|
||||
// 参考 ../../action/hotkey.ts 中的按键定义
|
||||
const [key] = useKey();
|
||||
key.realize('confirm', () => {});
|
||||
key.realize('exit', () => {});
|
||||
// 其他按键自定义，需要新开一个 save 的 group
|
||||
/** 当前页上被选中的存档的序号 只会是0到5 */
|
||||
const pickIndex = ref(1);
|
||||
|
||||
const emitSave = (index: number) => {
|
||||
if (isDelete.value) emit('delete', index);
|
||||
else emit('emit', index);
|
||||
pickIndex.value = (index % 5) + 1;
|
||||
};
|
||||
|
||||
const wheel = (ev: IWheelEvent) => {
|
||||
@ -112,6 +161,35 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
|
||||
props.controller.close(props.instance);
|
||||
};
|
||||
|
||||
// 参考 ../../action/hotkey.ts 中的按键定义
|
||||
const [key] = useKey();
|
||||
key.realize('confirm', () => {
|
||||
const currPage = pageRef.value?.now();
|
||||
if (currPage == null) return;
|
||||
emitSave(pageCap * currPage + pickIndex.value);
|
||||
})
|
||||
.realize('exit', exit)
|
||||
.realize('@ui_save_exit', exit)
|
||||
.realize('@ui_save_pageUp', () => {
|
||||
pageRef.value?.movePage(1);
|
||||
})
|
||||
.realize('@ui_save_pageDown', () => {
|
||||
pageRef.value?.movePage(-1);
|
||||
})
|
||||
.realize('@ui_save_up', () => {
|
||||
if (pickIndex.value >= row) pickIndex.value -= column;
|
||||
})
|
||||
.realize('@ui_save_down', () => {
|
||||
if (pickIndex.value <= pageCap - row) pickIndex.value += column;
|
||||
})
|
||||
.realize('@ui_save_left', () => {
|
||||
if (pickIndex.value > 0) pickIndex.value--;
|
||||
})
|
||||
.realize('@ui_save_right', () => {
|
||||
if (pickIndex.value < pageCap) pickIndex.value++;
|
||||
});
|
||||
// 其他按键自定义，需要新开一个 save 的 group
|
||||
|
||||
return () => (
|
||||
<container loc={props.loc}>
|
||||
<Background loc={[0, 0, MAP_WIDTH, MAP_HEIGHT]} color="black" />
|
||||
@ -126,6 +204,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
|
||||
<SaveBtn
|
||||
loc={[30, 50, 120, 170]}
|
||||
index={-1}
|
||||
isSelected={pickIndex.value === 0}
|
||||
isDelete={isDelete.value}
|
||||
onClick={() => emitSave(-1)}
|
||||
cursor="pointer"
|
||||
@ -133,6 +212,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
|
||||
<SaveBtn
|
||||
loc={[180, 50, 120, 170]}
|
||||
index={page * pageCap}
|
||||
isSelected={pickIndex.value === 1}
|
||||
isDelete={isDelete.value}
|
||||
onClick={() => emitSave(page * pageCap)}
|
||||
cursor="pointer"
|
||||
@ -140,6 +220,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
|
||||
<SaveBtn
|
||||
loc={[330, 50, 120, 170]}
|
||||
index={page * pageCap + 1}
|
||||
isSelected={pickIndex.value === 2}
|
||||
isDelete={isDelete.value}
|
||||
onClick={() => emitSave(page * pageCap + 1)}
|
||||
cursor="pointer"
|
||||
@ -147,6 +228,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
|
||||
<SaveBtn
|
||||
loc={[30, 230, 120, 170]}
|
||||
index={page * pageCap + 2}
|
||||
isSelected={pickIndex.value === 3}
|
||||
isDelete={isDelete.value}
|
||||
onClick={() => emitSave(page * pageCap + 2)}
|
||||
cursor="pointer"
|
||||
@ -154,6 +236,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
|
||||
<SaveBtn
|
||||
loc={[180, 230, 120, 170]}
|
||||
index={page * pageCap + 3}
|
||||
isSelected={pickIndex.value === 4}
|
||||
isDelete={isDelete.value}
|
||||
onClick={() => emitSave(page * pageCap + 3)}
|
||||
cursor="pointer"
|
||||
@ -161,6 +244,7 @@ export const Save = defineComponent<SaveProps, SaveEmits, keyof SaveEmits>(
|
||||
<SaveBtn
|
||||
loc={[330, 230, 120, 170]}
|
||||
index={page * pageCap + 4}
|
||||
isSelected={pickIndex.value === 5}
|
||||
isDelete={isDelete.value}
|
||||
onClick={() => emitSave(page * pageCap + 4)}
|
||||
cursor="pointer"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user