-
点我自增 {{ cnt }}
+
+
+
+
diff --git a/src/components/bookOne.vue b/src/components/bookOne.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/boxAnimate.vue b/src/components/boxAnimate.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/scroll.vue b/src/components/scroll.vue
new file mode 100644
index 0000000..eafcdd0
--- /dev/null
+++ b/src/components/scroll.vue
@@ -0,0 +1,154 @@
+
+
+
+
+
+
+
diff --git a/src/initPlugin.ts b/src/initPlugin.ts
index ba26bf6..b570cd1 100644
--- a/src/initPlugin.ts
+++ b/src/initPlugin.ts
@@ -1,9 +1,10 @@
// 需要引入所有的插件
-import pop from './plugin/template';
+import pop from './plugin/pop';
+import ui from './plugin/uiController';
window.addEventListener('load', () => {
// 每个引入的插件都要在这里执行，否则不会被转发
- const toForward = [pop()];
+ const toForward: any[] = [pop(), ui()];
// 初始化所有插件，并转发到core上
(async function () {
diff --git a/src/main.ts b/src/main.ts
index 84c0113..3b6df23 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,5 @@
import { createApp } from 'vue';
import App from './App.vue';
+import './styles.less';
createApp(App).mount('#root');
diff --git a/src/plugin/template.ts b/src/plugin/pop.ts
similarity index 100%
rename from src/plugin/template.ts
rename to src/plugin/pop.ts
diff --git a/src/plugin/uiController.ts b/src/plugin/uiController.ts
new file mode 100644
index 0000000..c53f1c3
--- /dev/null
+++ b/src/plugin/uiController.ts
@@ -0,0 +1,46 @@
+import { Component, markRaw, ref, Ref, watch } from 'vue';
+import Book from '../ui/book.vue';
+import BookDetail from '../ui/bookDetail.vue';
+
+export const bookOpened = ref(false);
+export const bookDetail = ref(false);
+
+let app: HTMLDivElement;
+
+/** ui声明列表 */
+const UI_LIST: [Ref
, Component][] = [
+ [bookOpened, Book],
+ [bookDetail, BookDetail]
+];
+
+/** ui栈 */
+export const uiStack = ref([]);
+
+export default function init() {
+ app = document.getElementById('root') as HTMLDivElement;
+ UI_LIST.forEach(([ref, com]) => {
+ watch(ref, n => {
+ if (n === true) {
+ uiStack.value.push(markRaw(com));
+ showApp();
+ } else {
+ const index = uiStack.value.findIndex(v => v === com);
+ uiStack.value.splice(index);
+ if (uiStack.value.length === 0) {
+ hideApp();
+ }
+ }
+ });
+ });
+ return { uiStack, bookDetail, bookOpened };
+}
+
+function showApp() {
+ app.style.display = 'flex';
+ core.lockControl();
+}
+
+function hideApp() {
+ app.style.display = 'none';
+ core.unlockControl();
+}
diff --git a/src/plugin/use.ts b/src/plugin/use.ts
new file mode 100644
index 0000000..c071fc1
--- /dev/null
+++ b/src/plugin/use.ts
@@ -0,0 +1,57 @@
+export default function init() {
+ return { useDrag, useWheel };
+}
+
+/**
+ * 向一个元素添加拖拽事件
+ * @param ele 目标元素
+ * @param fn 推拽时触发的函数，传入x y和鼠标事件或点击事件
+ * @param ondown 鼠标按下时执行的函数
+ * @param global 是否全局拖拽，即拖拽后鼠标或手指离开元素后是否依然视为正在拖拽
+ */
+export function useDrag(
+ ele: HTMLElement,
+ fn: (x: number, y: number, e: MouseEvent | TouchEvent) => void,
+ ondown?: (x: number, y: number, e: MouseEvent | TouchEvent) => void,
+ global: boolean = false
+) {
+ let down = false;
+ ele.addEventListener('mousedown', e => {
+ down = true;
+ if (ondown) ondown(e.clientX, e.clientY, e);
+ });
+ ele.addEventListener('touchstart', e => {
+ down = true;
+ if (ondown) ondown(e.touches[0].clientX, e.touches[0].clientY, e);
+ });
+
+ document.addEventListener('mouseup', () => (down = false));
+ document.addEventListener('touchend', () => (down = false));
+
+ const target = global ? document : ele;
+
+ target.addEventListener('mousemove', e => {
+ if (!down) return;
+ const ee = e as MouseEvent;
+ fn(ee.clientX, ee.clientY, ee);
+ });
+ target.addEventListener('touchmove', e => {
+ if (!down) return;
+ const ee = e as TouchEvent;
+ fn(ee.touches[0].clientX, ee.touches[0].clientY, ee);
+ });
+}
+
+/**
+ * 当触发滚轮时执行函数
+ * @param ele 目标元素
+ * @param fn 当滚轮触发时执行的函数
+ */
+export function useWheel(
+ ele: HTMLElement,
+ fn: (x: number, y: number, z: number, e: WheelEvent) => void
+): void {
+ ele.addEventListener('wheel', e => {
+ fn(e.deltaX, e.deltaY, e.deltaZ, e);
+ });
+}
diff --git a/src/styles.less b/src/styles.less
new file mode 100644
index 0000000..8293b1a
--- /dev/null
+++ b/src/styles.less
@@ -0,0 +1,10 @@
+#root {
+ position: absolute;
+ display: none;
+ width: 100%;
+ height: 100%;
+ z-index: 9999;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+}
diff --git a/src/types/core.d.ts b/src/types/core.d.ts
index 2b9d1e8..0339b17 100644
--- a/src/types/core.d.ts
+++ b/src/types/core.d.ts
@@ -1,4 +1,4 @@
-type core = {
+type Core = {
/** 地图的格子宽度 */
readonly _WIDTH_: number;
/** 地图的格子高度 */
@@ -186,10 +186,10 @@ type core = {
actions &
Forward;
-type main = {
+type Main = {
/** 是否在录像验证中 */
readonly replayChecking: boolean;
- readonly core: core;
+ readonly core: Core;
readonly dom: { [key: string]: HTMLElement };
/** 游戏版本，发布后会被随机，请勿使用该属性 */
readonly version: string;
@@ -313,7 +313,7 @@ declare class Sprite {
removeEventListenr: HTMLCanvasElement['addEventListener'];
}
-declare let main: main;
-declare let core: core;
-declare let flags: { [x: string]: any };
-declare let hero: HeroStatus;
+declare const main: main;
+declare const core: Core;
+declare const flags: { [x: string]: any };
+declare const hero: HeroStatus;
diff --git a/src/types/plugin.d.ts b/src/types/plugin.d.ts
index e393480..760f4fb 100644
--- a/src/types/plugin.d.ts
+++ b/src/types/plugin.d.ts
@@ -1,5 +1,9 @@
// 这里包含所有插件导出的函数及变量声明，声明的函数会在类型标注中标注到core上
+type Ref = {
+ value: T;
+};
+
interface PluginDeclaration {
/**
* 添加函数 例：添加弹出文字，像这个就可以使用core.addPop或core.plugin.addPop调用
@@ -11,6 +15,39 @@ interface PluginDeclaration {
/** 添加变量 例：所有的正在弹出的文字，像这个就可以使用core.plugin.pop获取 */
pop: any[];
+
+ /** 手册是否打开 */
+ readonly bookOpened: Ref;
+
+ /** 手册详细信息 */
+ readonly bookDetail: Ref;
+
+ /** ui栈 */
+ readonly uiStack: Ref;
+
+ /**
+ * 向一个元素添加拖拽事件
+ * @param ele 目标元素
+ * @param fn 推拽时触发的函数，传入x y和鼠标事件或点击事件
+ * @param ondown 鼠标按下时执行的函数
+ * @param global 是否全局拖拽，即拖拽后鼠标或手指离开元素后是否依然视为正在拖拽
+ */
+ useDrag(
+ ele: HTMLElement,
+ fn: (x: number, y: number, e: MouseEvent | TouchEvent) => void,
+ ondown?: (x: number, y: number, e: MouseEvent | TouchEvent) => void,
+ global: boolean = false
+ ): void;
+
+ /**
+ * 当触发滚轮时执行函数
+ * @param ele 目标元素
+ * @param fn 当滚轮触发时执行的函数
+ */
+ useWheel(
+ ele: HTMLElement,
+ fn: (x: number, y: number, z: number, e: WheelEvent) => void
+ ): void;
}
type Forward = {
diff --git a/src/ui/book.vue b/src/ui/book.vue
new file mode 100644
index 0000000..51bc1f6
--- /dev/null
+++ b/src/ui/book.vue
@@ -0,0 +1,20 @@
+
+
+
+
+ test{{ i }}
+
+
+
+
+
+
diff --git a/src/ui/bookDetail.vue b/src/ui/bookDetail.vue
new file mode 100644
index 0000000..c1888bd
--- /dev/null
+++ b/src/ui/bookDetail.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+