From 583df29f3899728c4085cff6fea6b15a1740a85b Mon Sep 17 00:00:00 2001 From: unanmed <1319491857@qq.com> Date: Fri, 20 Jun 2025 18:52:41 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20UI=20=E6=94=B9=E6=88=90=E5=85=A8?= =?UTF-8?q?=E8=A6=86=E7=9B=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../client-modules/src/render/index.tsx | 2 + .../src/render/ui/controller.ts | 3 - .../src/render/ui/controller.tsx | 33 ++++++++ .../client-modules/src/render/ui/index.ts | 6 ++ .../client-modules/src/render/ui/save.tsx | 50 ++++++----- .../client-modules/src/render/ui/toolbar.tsx | 18 +--- .../client-modules/src/utils/saves.ts | 83 ++++++++++--------- 7 files changed, 114 insertions(+), 81 deletions(-) delete mode 100644 packages-user/client-modules/src/render/ui/controller.ts create mode 100644 packages-user/client-modules/src/render/ui/controller.tsx diff --git a/packages-user/client-modules/src/render/index.tsx b/packages-user/client-modules/src/render/index.tsx index 9030b59..ec3aa01 100644 --- a/packages-user/client-modules/src/render/index.tsx +++ b/packages-user/client-modules/src/render/index.tsx @@ -9,6 +9,7 @@ import { createLoopMap } from './loopMap'; import { createGameCanvas } from './legacy/gameCanvas'; import { createElements } from './elements'; import { mainRenderer } from './renderer'; +import { createUI } from './ui'; export function createGameRenderer() { const App = defineComponent(_props => { @@ -37,6 +38,7 @@ export function createGameRenderer() { } export function createRender() { + createUI(); createGameCanvas(); createItemDetail(); createLoopMap(); diff --git a/packages-user/client-modules/src/render/ui/controller.ts b/packages-user/client-modules/src/render/ui/controller.ts deleted file mode 100644 index b658833..0000000 --- a/packages-user/client-modules/src/render/ui/controller.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { UIController } from '@motajs/system-ui'; - -export const mainUIController = new UIController('main-ui'); diff --git a/packages-user/client-modules/src/render/ui/controller.tsx b/packages-user/client-modules/src/render/ui/controller.tsx new file mode 100644 index 0000000..7563745 --- /dev/null +++ b/packages-user/client-modules/src/render/ui/controller.tsx @@ -0,0 +1,33 @@ +import { DefaultProps } from '@motajs/render-vue'; +import { + GameUI, + SetupComponentOptions, + UIComponentProps, + UIController +} from '@motajs/system-ui'; +import { defineComponent } from 'vue'; +import { MAIN_HEIGHT, MAIN_WIDTH } from '../shared'; + +export const mainUIController = new UIController('main-ui'); + +export interface MainBackgroundProps extends DefaultProps, UIComponentProps {} + +const mainBackgroundProps = { + props: ['controller', 'instance'] +} satisfies SetupComponentOptions; + +export const MainBackground = defineComponent(() => { + return () => ( + + ); +}, mainBackgroundProps); + +export const MainBackgroundUI = new GameUI('main-background', MainBackground); + +export function createMainController() { + mainUIController.setBackground(MainBackgroundUI, {}); +} diff --git a/packages-user/client-modules/src/render/ui/index.ts b/packages-user/client-modules/src/render/ui/index.ts index 3cbbde1..ee04a2d 100644 --- a/packages-user/client-modules/src/render/ui/index.ts +++ b/packages-user/client-modules/src/render/ui/index.ts @@ -1,3 +1,9 @@ +import { createMainController } from './controller'; + +export function createUI() { + createMainController(); +} + export * from './controller'; export * from './main'; export * from './save'; diff --git a/packages-user/client-modules/src/render/ui/save.tsx b/packages-user/client-modules/src/render/ui/save.tsx index eab71e0..3c34600 100644 --- a/packages-user/client-modules/src/render/ui/save.tsx +++ b/packages-user/client-modules/src/render/ui/save.tsx @@ -8,7 +8,7 @@ import { UIComponentProps } from '@motajs/system-ui'; import { defineComponent, ref, computed } from 'vue'; -import { Background, Page, PageExpose } from '../components'; +import { Page, PageExpose } from '../components'; import { useKey } from '../use'; import { MAP_WIDTH, MAP_HEIGHT } from '../shared'; @@ -44,6 +44,7 @@ const saveBtnProps = { export const SaveBtn = defineComponent(props => { const w = props.loc[2] ?? 200; const font = new Font('normal', 18); + const statusFont = new Font('normal', 14); const text = computed(() => props.index === -1 ? '自动存档' : `存档${props.index + 1}` ); @@ -57,10 +58,10 @@ export const SaveBtn = defineComponent(props => { (props => { ); @@ -80,12 +81,6 @@ export const SaveBtn = defineComponent(props => { export const Save = defineComponent( (props, { emit }) => { - // 这些注释写完之后删了 - // 这里是 UI 部分，不负责任何存读档操作，这些在特定场景下传入 onEmit 来实现 - // 缩略图暂用 container 元素替代，点击时触发 onEmit - // onEmit 事件在点击存档或按键确认时触发 - // 存读档执行函数在 ../../utils/saves.ts - const row = 2; const column = 3; /** 除自动存档外，每一页容纳的存档数量 */ @@ -122,7 +117,6 @@ export const Save = defineComponent( props.controller.close(props.instance); }; - // 参考 ../../action/hotkey.ts 中的按键定义 const [key] = useKey(); key.realize('confirm', () => { const currPage = pageRef.value?.now(); @@ -148,10 +142,17 @@ export const Save = defineComponent( .realize( '@save_up', () => { - if (pickIndex.value >= row) pickIndex.value -= column; - else { - pickIndex.value += pageCap + 1 - column; - pageRef.value?.movePage(-1); + if (!pageRef.value) return; + const now = pageRef.value.now(); + if (pickIndex.value >= row) { + pickIndex.value -= column; + } else { + if (now === 0) { + pickIndex.value = 0; + } else { + pickIndex.value += pageCap + 1 - column; + pageRef.value?.movePage(-1); + } } }, { type: 'down-repeat' } @@ -171,10 +172,15 @@ export const Save = defineComponent( .realize( '@save_left', () => { - if (pickIndex.value > 0) pickIndex.value--; - else { - pickIndex.value = pageCap; - pageRef.value?.movePage(-1); + if (!pageRef.value) return; + const now = pageRef.value.now(); + if (pickIndex.value > 0) { + pickIndex.value--; + } else { + if (now > 0) { + pickIndex.value = pageCap; + pageRef.value?.movePage(-1); + } } }, { type: 'down-repeat' } @@ -190,11 +196,9 @@ export const Save = defineComponent( }, { type: 'down-repeat' } ); - // 其他按键自定义，需要新开一个 save 的 group return () => ( - - + core.openToolbox(true); const fly = () => core.useFly(true); const save = async () => { - const index = await selectSave(mainUIController, [ - STATUS_BAR_WIDTH, - 0, - MAP_WIDTH, - MAP_HEIGHT - ]); - if (index === -2) { - // 如果用户未选择存档，而是关闭了存档。 - console.log('用户关闭了存档界面。'); - } else { - // 用户选择了一个存档。 - console.log('用户选择在存档位' + index + '保存。'); - } + mainUIController.open(SaveUI, { loc: [0, 0, MAIN_WIDTH, MAIN_HEIGHT] }); }; const load = () => core.load(true); const equip = () => core.openEquipbox(true); diff --git a/packages-user/client-modules/src/utils/saves.ts b/packages-user/client-modules/src/utils/saves.ts index ffae073..0a81de3 100644 --- a/packages-user/client-modules/src/utils/saves.ts +++ b/packages-user/client-modules/src/utils/saves.ts @@ -3,28 +3,23 @@ import { getConfirm, waitbox } from '../render'; import { IUIMountable } from '@motajs/system-ui'; import { SyncSaveFromServerResponse } from '@motajs/client-base'; -export function getAllSavesData() { - return new Promise(res => { - core.getAllSaves(saves => { - if (!saves) { - res(''); - return; - } - const content = { - name: core.firstData.name, - version: core.firstData.version, - data: saves - }; - res(compressToBase64(JSON.stringify(content))); - }); - }); +export interface SaveData { + name: string; + version: string; + data: Save; } -export function getSaveData(index: number) { - return new Promise(res => { +export interface SaveDataArray { + name: string; + version: string; + data: Save[]; +} + +export function getSave(index: number) { + return new Promise(res => { core.getSave(index, data => { if (!data) { - res(''); + res(null); return; } const content = { @@ -32,11 +27,40 @@ export function getSaveData(index: number) { version: core.firstData.version, data: data }; - res(compressToBase64(JSON.stringify(content))); + res(content); }); }); } +export function getAllSaves() { + return new Promise(res => { + core.getAllSaves(saves => { + if (!saves) { + res(null); + return; + } + const content = { + name: core.firstData.name, + version: core.firstData.version, + data: saves + }; + res(content); + }); + }); +} + +export async function getSaveData(index: number) { + const data = await getSave(index); + if (!data) return ''; + return compressToBase64(JSON.stringify(data)); +} + +export async function getAllSavesData() { + const data = await getAllSaves(); + if (!data) return ''; + return compressToBase64(JSON.stringify(data)); +} + //#region 服务器加载 const enum FromServerResponse { @@ -169,24 +193,3 @@ export async function syncFromServer( ); } } - -//#region 存读档操作 - -export const enum LoadMode { - Load, - ReplayFrom, - ContinueReplayFrom, - ContinueReplayTo -} - -/** - * 对当前状态存档并存档至目标索引 - * @param index 存档至的索引 - */ -export function saveTo(index: number) {} - -/** - * 从指定索引读档 - * @param index 从哪个索引读档 - */ -export function loadFrom(index: number, mode: LoadMode) {}