怪物标记功能

src/plugin/mark.ts

@@ -0,0 +1,127 @@
+import { reactive, ref } from 'vue';
+import { message } from 'ant-design-vue';
+
+const markedEnemy = reactive<EnemyIds[]>([]);
+
+interface MarkInfo {
+    nextCritical: number;
+}
+
+const markInfo: Partial<Record<EnemyIds, MarkInfo>> = {};
+const criticalReached: Partial<Record<EnemyIds, Record<number, boolean>>> = {};
+const enemyDamageInfo: Partial<Record<EnemyIds, Record<number, boolean>>> = {};
+
+/**
+ * 标记一个怪物，标记后的怪物会在勇士刚好能打过怪物时、伤害刚好小于勇士生命值的2/3和1/3时、踩到临界时提示
+ * @param id 标记的怪物id
+ */
+export function markEnemy(id: EnemyIds) {
+    if (hasMarkedEnemy(id)) return;
+    markedEnemy.push(id);
+    markInfo[id] = {
+        nextCritical:
+            core.nextCriticals(id, 1)[0]?.[0] ?? 0 + core.status.hero.atk
+    };
+    criticalReached[id] = { 0: true };
+    enemyDamageInfo[id] = { 1: false, 2: false, 3: false };
+    getMarkInfo(id);
+    checkMarkedEnemy();
+}
+
+/**
+ * 是否标记过某个怪物
+ */
+export function hasMarkedEnemy(id: EnemyIds) {
+    return markedEnemy.includes(id);
+}
+
+/**
+ * 取消标记某个怪物
+ */
+export function unmarkEnemy(id: EnemyIds) {
+    const index = markedEnemy.indexOf(id);
+    if (index === -1) return;
+    markedEnemy.splice(index, 1);
+    checkMarkedEnemy();
+}
+
+/**
+ * 获得所有被标记的怪物
+ */
+export function getMarkedEnemy() {
+    return markedEnemy;
+}
+
+/**
+ * 获取怪物的临界信息
+ * @param id 怪物id
+ */
+export function getMarkInfo(id: EnemyIds) {
+    const reached = criticalReached[id]!;
+    const info = markInfo[id]!;
+    if (core.status.hero.atk >= info.nextCritical) {
+        if (!reached[info.nextCritical]) {
+            message.success({
+                content: `踩到了${core.material.enemys[id].name}的临界！`,
+                class: 'antdv-message'
+            });
+        }
+        reached[info.nextCritical] = true;
+        const n = core.nextCriticals(id, 1)[0]?.[0];
+        const next = (n ?? 0) + core.status.hero.atk;
+        info.nextCritical = next;
+    }
+}
+
+/**
+ * 检查被标记怪物的状态
+ */
+export function checkMarkedEnemy() {
+    checkMarkedStatus.value = !checkMarkedStatus.value;
+    const toDelete: EnemyIds[] = [];
+    const hp = core.status.hero.hp;
+    getMarkedEnemy().forEach(v => {
+        getMarkInfo(v);
+        const damage = core.getDamageInfo(v)?.damage ?? -1;
+        if (damage === -1) return;
+        const info = enemyDamageInfo[v]!;
+        const name = core.material.enemys[v].name;
+        if (damage < hp / 3) {
+            if (!info[3]) {
+                message.success({
+                    content: `${name}的伤害已降至勇士生命值的1/3！`,
+                    class: 'antdv-message'
+                });
+            }
+            info[1] = true;
+            info[2] = true;
+            info[3] = true;
+        } else if (damage < (hp / 3) * 2) {
+            if (!info[2]) {
+                message.success({
+                    content: `${name}的伤害已降至勇士生命值的2/3！`,
+                    class: 'antdv-message'
+                });
+            }
+            info[1] = true;
+            info[2] = true;
+            info[3] = false;
+        } else if (damage < hp) {
+            if (!info[1]) {
+                message.success({
+                    content: `${name}的伤害已降至勇士生命值的2/3！`,
+                    class: 'antdv-message'
+                });
+            }
+            info[1] = true;
+            info[2] = false;
+            info[3] = false;
+        }
+    });
+}
+
+export const checkMarkedStatus = ref(false);
+
+export default function init() {
+    return { checkMarkedEnemy, checkStatus: checkMarkedStatus };
+}

src/plugin/settings.ts

@@ -0,0 +1,15 @@
+import { ref, watch } from 'vue';
+
+/**
+ * 打开和关闭ui时是否展示动画
+ */
+export const transition = ref(true);
+
+watch(transition, n => {
+    core.plugin.transition.value = n;
+    core.setLocalStorage('transition', n);
+});
+
+window.addEventListener('load', () => {
+    transition.value = core.getLocalStorage('transition');
+});

src/plugin/uiController.ts

@@ -3,12 +3,15 @@ import { Component, markRaw, ref, Ref, watch } from 'vue';
 import Book from '../ui/book.vue';
 import Toolbox from '../ui/toolbox.vue';
 import Equipbox from '../ui/equipbox.vue';
-import StatusBar from '../ui/statusBar.vue';
+import Settings from '../ui/settings.vue';
+import Desc from '../ui/desc.vue';
 
 export const bookOpened = ref(false);
 export const toolOpened = ref(false);
 export const equipOpened = ref(false);
 export const showStatusBar = ref(false);
+export const settingsOpened = ref(false);
+export const descOpened = ref(false);
 
 export const transition = ref(true);
 export const noClosePanel = ref(false);
@@ -19,7 +22,9 @@ let app: HTMLDivElement;
 const UI_LIST: [Ref<boolean>, Component][] = [
     [bookOpened, Book],
     [toolOpened, Toolbox],
-    [equipOpened, Equipbox]
+    [equipOpened, Equipbox],
+    [settingsOpened, Settings],
+    [descOpened, Desc]
 ];
 
 /** ui栈 */
@@ -48,7 +53,8 @@ export default function init() {
         bookOpened,
         toolOpened,
         equipOpened,
-        showStatusBar
+        showStatusBar,
+        settingsOpened
     };
 }
 
@@ -57,7 +63,7 @@ async function showApp() {
     if (transition.value) {
         app.style.transition = 'all 0.6s linear';
     } else {
-        app.style.transition = '';
+        app.style.transition = 'none';
     }
     app.style.display = 'flex';
     await sleep(50);

src/plugin/use.ts

@@ -100,10 +100,7 @@ export function useDrag(
 export function cancelGlobalDrag(fn: DragFn): void {
     const fns = dragFnMap.get(fn);
     dragFnMap.delete(fn);
-    if (!fns)
-        throw new ReferenceError(
-            'The drag function to be canceled does not exist.'
-        );
+    if (!fns) return;
     document.removeEventListener('mousemove', fns[0]);
     document.removeEventListener('touchmove', fns[1]);
     document.removeEventListener('mouseup', fns[0]);

src/plugin/utils.ts

@@ -99,6 +99,7 @@ export function type(
     if (typeof toShow !== 'string') {
         throw new TypeError('Error str type in typing!');
     }
+    if (toShow.startsWith('!!html')) return ref(toShow);
     if (avr) time *= toShow.length;
     const ani = new Animation();
     const content = ref('');