道具栏

src/plugin/animateController.ts

@@ -27,6 +27,6 @@ export function addAnimate(fn: (time: number) => void) {
  */
 export function removeAnimate(fn: (time: number) => void) {
     const index = animation.findIndex(v => v === fn);
-    if (index === -1)
-        throw new ReferenceError('No such function in animation.');
+    if (index === -1) return;
+    animation.splice(index, 1);
 }

src/plugin/ui/book.tsx

@@ -1,4 +1,4 @@
-import { has } from './utils';
+import { has } from '../utils';
 
 /**
  * 获取怪物的特殊技能描述
@@ -64,10 +64,10 @@ export function getDefDamage(
             atk: core.status.hero.atk + addAtk
         });
 
-        if (i === 0) {
+        if (res.length === 0) {
             origin = dam?.damage;
             if (has(origin)) {
-                res.push([addDef, origin]);
+                res.push([addDef + i * ratio, origin]);
                 last = origin;
             }
             continue;

src/plugin/ui/toolbox.tsx

@@ -0,0 +1,45 @@
+import { has } from '../utils';
+
+interface ClsMap {
+    tools: '消耗道具';
+    constants: '永久道具';
+    all: '全部道具';
+}
+
+interface AllItem {
+    tools: [string, number][];
+    constants: [string, number][];
+}
+
+const clsMap: ClsMap = {
+    tools: '消耗道具',
+    constants: '永久道具',
+    all: '全部道具'
+};
+
+/**
+ * 根据道具的cls获取中文类型
+ * @param cls 道具的cls
+ */
+export function getClsName<T extends keyof ClsMap | 'all'>(cls: T): ClsMap[T] {
+    return clsMap[cls];
+}
+
+/**
+ * 获取某个类型的所有道具
+ * @param cls 道具类型
+ */
+export function getItems(cls: 'all'): AllItem;
+export function getItems(cls: keyof ClsMap): [string, number][];
+export function getItems(cls: keyof ClsMap | 'all') {
+    const i = core.status.hero.items;
+    if (cls === 'all') {
+        return {
+            tools: Object.entries(i.tools),
+            constants: Object.entries(i.constants)
+        };
+    }
+    const items = i[cls];
+    const data = Object.entries(items);
+    return data;
+}

src/plugin/uiController.ts

@@ -1,13 +1,20 @@
 import { sleep } from 'mutate-animate';
 import { Component, markRaw, ref, Ref, watch } from 'vue';
 import Book from '../ui/book.vue';
+import Toolbox from '../ui/toolbox.vue';
 
 export const bookOpened = ref(false);
+export const toolOpened = ref(false);
+
+export const transition = ref(true);
 
 let app: HTMLDivElement;
 
 /** ui声明列表 */
-const UI_LIST: [Ref<boolean>, Component][] = [[bookOpened, Book]];
+const UI_LIST: [Ref<boolean>, Component][] = [
+    [bookOpened, Book],
+    [toolOpened, Toolbox]
+];
 
 /** ui栈 */
 export const uiStack = ref<Component[]>([]);
@@ -23,24 +30,40 @@ export default function init() {
                 const index = uiStack.value.findIndex(v => v === com);
                 if (uiStack.value.length === 1) {
                     hideApp(index);
+                } else {
+                    uiStack.value.splice(index, 1);
                 }
             }
         });
     });
-    return { uiStack, bookOpened };
+    return { uiStack, bookOpened, toolOpened, transition };
 }
 
 async function showApp() {
+    core.lockControl();
+    if (transition.value) {
+        app.style.transition = 'all 0.6s linear';
+    } else {
+        app.style.transition = '';
+    }
     app.style.display = 'flex';
     await sleep(50);
     app.style.opacity = '1';
-    core.lockControl();
 }
 
 async function hideApp(index: number) {
-    app.style.opacity = '0';
-    await sleep(600);
-    uiStack.value.splice(index, 1);
-    app.style.display = 'none';
-    core.unlockControl();
+    if (transition.value) {
+        app.style.transition = 'all 0.6s linear';
+        app.style.opacity = '0';
+        await sleep(600);
+        uiStack.value.splice(index, 1);
+        app.style.display = 'none';
+        core.closePanel();
+    } else {
+        app.style.transition = '';
+        app.style.opacity = '0';
+        uiStack.value.splice(index, 1);
+        app.style.display = 'none';
+        core.closePanel();
+    }
 }

src/plugin/utils.ts

@@ -1,8 +1,18 @@
 import { isNil } from 'lodash';
+import { Animation, TimingFn } from 'mutate-animate';
+import { ComputedRef, ref } from 'vue';
 import { EVENT_KEY_CODE_MAP } from './keyCodes';
 
+type CanParseCss = keyof {
+    [P in keyof CSSStyleDeclaration as CSSStyleDeclaration[P] extends string
+        ? P extends string
+            ? P
+            : never
+        : never]: CSSStyleDeclaration[P];
+};
+
 export default function init() {
-    return { has, getDamageColor };
+    return { has, getDamageColor, parseCss };
 }
 
 /**
@@ -51,3 +61,55 @@ export function setCanvasSize(
 export function keycode(key: number) {
     return EVENT_KEY_CODE_MAP[key];
 }
+
+/**
+ * 解析css字符串为CSSStyleDeclaration对象
+ * @param css 要解析的css字符串
+ */
+export function parseCss(css: string): Partial<Record<CanParseCss, string>> {
+    const str = css.replace(/[\n\s\t]*/g, '').replace(/[;,]*/g, ';');
+    const styles = str.split(';');
+    const res: Partial<Record<CanParseCss, string>> = {};
+
+    for (const one of styles) {
+        const [key, data] = one.split(':');
+        const cssKey = key.replace(/\-([a-z])/g, $1 =>
+            $1.toUpperCase()
+        ) as CanParseCss;
+        res[cssKey] = data;
+    }
+    return res;
+}
+
+/**
+ * 使用打字机效果显示一段文字
+ * @param str 要打出的字符串
+ * @param time 打出总用时，默认1秒
+ * @param timing 打出时的速率曲线，默认为线性变化
+ * @returns 文字的响应式变量
+ */
+export function type(
+    str: string,
+    time: number = 1000,
+    timing: TimingFn = n => n
+): Ref<string> {
+    const toShow = eval('`' + str + '`') as string;
+    const ani = new Animation();
+    const content = ref('');
+    const all = toShow.length;
+
+    const fn = (time: number) => {
+        if (!has(time)) return;
+        const now = ani.x;
+        content.value = toShow.slice(0, Math.floor(now));
+        if (Math.floor(now) === all) {
+            ani.ticker.destroy();
+        }
+    };
+
+    ani.ticker.add(fn);
+
+    ani.mode(timing).time(time).move(all, 0);
+
+    return content;
+}