feat:存档界面添加按键监听功能

packages-user/client-modules/src/render/ui/save.tsx

@@ -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>();
-
+        /** 当前页上被选中的存档的序号 只会是0到5 */
-        // 参考 ../../action/hotkey.ts 中的按键定义
+        const pickIndex = ref(1);
-        const [key] = useKey();
-        key.realize('confirm', () => {});
-        key.realize('exit', () => {});
-        // 其他按键自定义，需要新开一个 save 的 group
 
         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"