@@ -66,9 +66,9 @@
{{
- core.status.thisMap.ratio
+ core.formatBigNumber(core.status.thisMap.ratio)
}}防 {{
- core.formatBigNumber(enemy.money)
+ core.formatBigNumber(enemy.defDamage)
}}
@@ -120,7 +120,18 @@ const props = defineProps<{
enemy: Enemy & DetailedEnemy;
}>();
+const emits = defineEmits<{
+ (e: 'select'): void;
+}>();
+
const core = window.core;
+
+/**
+ * 选择这个怪物时
+ */
+function select(e: MouseEvent) {
+ emits('select');
+}
diff --git a/src/components/scroll.vue b/src/components/scroll.vue
index 6dcd3f1..14ec0e1 100644
--- a/src/components/scroll.vue
+++ b/src/components/scroll.vue
@@ -11,10 +11,17 @@
diff --git a/src/panel/enemySpecial.vue b/src/panel/enemySpecial.vue
new file mode 100644
index 0000000..1f4dfd0
--- /dev/null
+++ b/src/panel/enemySpecial.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+ 临界表
+
+
+
+ 加攻
+ 减伤
+
+
+ {{ format(atk) }}
+ {{
+ dam < 0 ? `-> ${format(-dam)}` : format(dam)
+ }}
+
+
+
+
+
+
+
+
diff --git a/src/plugin/book.tsx b/src/plugin/book.tsx
new file mode 100644
index 0000000..a308353
--- /dev/null
+++ b/src/plugin/book.tsx
@@ -0,0 +1,121 @@
+import { has } from './utils';
+
+/**
+ * 获取怪物的特殊技能描述
+ * @param enemy 怪物实例
+ */
+export function getSpecialHint(enemy: Enemy & DetailedEnemy) {
+ const all = core
+ .getSpecials()
+ .filter(v => enemy.special.includes(v[0]))
+ .sort((a, b) => a[0] - b[0]);
+
+ const des = all.map(v => {
+ const des = v[2];
+ if (des instanceof Function) {
+ return des(enemy);
+ }
+ return des;
+ });
+ const name = all.map(v => {
+ const name = v[1];
+ if (name instanceof Function) {
+ return name(enemy);
+ }
+ return name;
+ });
+
+ return (
+
+ {all.map((v, i) => {
+ return (
+
+
+ {name[i]}：
+
+
+
+ );
+ })}
+
+ );
+}
+
+/**
+ * 获得怪物的最近100个加防减伤
+ * @param enemy 怪物实例
+ */
+export function getDefDamage(
+ enemy: Enemy & DetailedEnemy,
+ addDef: number = 0,
+ addAtk: number = 0
+) {
+ const ratio = core.status.thisMap.ratio;
+ const res: [number, number][] = [];
+
+ let origin: number | undefined;
+ let last = 0;
+
+ for (let i = 0; i <= 100; i++) {
+ const dam = core.getDamageInfo(enemy, {
+ def: core.status.hero.def + ratio * i + addDef,
+ atk: core.status.hero.atk + addAtk
+ });
+
+ if (i === 0) {
+ origin = dam?.damage;
+ if (has(origin)) {
+ res.push([addDef, origin]);
+ last = origin;
+ }
+ continue;
+ }
+ if (!has(dam)) continue;
+ if (dam.damage === origin) continue;
+ if (dam.damage === res.at(-1)?.[1]) continue;
+ if (last <= 0) break;
+ last = dam.damage;
+ res.push([ratio * i + addDef, dam.damage]);
+ }
+ return res;
+}
+
+/**
+ * 获取怪物的临界信息
+ * @param enemy 怪物实例
+ */
+export function getCriticalDamage(
+ enemy: Enemy & DetailedEnemy,
+ addAtk: number = 0,
+ addDef: number = 0
+): [number, number][] {
+ const ratio = core.status.thisMap.ratio;
+ const res: [number, number][] = [];
+
+ let origin: number | undefined;
+ let last = 0;
+
+ for (let i = 0; i <= 100; i++) {
+ const dam = core.getDamageInfo(enemy, {
+ atk: core.status.hero.atk + ratio * i + addAtk,
+ def: core.status.hero.def + addDef
+ });
+
+ if (i === 0) {
+ origin = dam?.damage;
+ if (has(origin)) {
+ res.push([addAtk, origin]);
+ last = origin;
+ }
+ continue;
+ }
+ if (!has(dam)) continue;
+ if (dam.damage === origin) continue;
+ if (dam.damage === res.at(-1)?.[1]) continue;
+ if (dam.damage <= 0) break;
+ last = dam.damage;
+ res.push([ratio * i + addAtk, dam.damage]);
+ }
+
+ return res;
+}
diff --git a/src/plugin/uiController.ts b/src/plugin/uiController.ts
index c53f1c3..2494e0a 100644
--- a/src/plugin/uiController.ts
+++ b/src/plugin/uiController.ts
@@ -1,17 +1,13 @@
+import { sleep } from 'mutate-animate';
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]
-];
+const UI_LIST: [Ref, Component][] = [[bookOpened, Book]];
/** ui栈 */
export const uiStack = ref([]);
@@ -32,15 +28,19 @@ export default function init() {
}
});
});
- return { uiStack, bookDetail, bookOpened };
+ return { uiStack, bookOpened };
}
-function showApp() {
+async function showApp() {
app.style.display = 'flex';
+ await sleep(50);
+ app.style.opacity = '1';
core.lockControl();
}
-function hideApp() {
+async function hideApp() {
+ app.style.opacity = '0';
+ await sleep(600);
app.style.display = 'none';
core.unlockControl();
}
diff --git a/src/plugin/use.ts b/src/plugin/use.ts
index 9f4946b..ed6b936 100644
--- a/src/plugin/use.ts
+++ b/src/plugin/use.ts
@@ -1,7 +1,23 @@
export default function init() {
- return { useDrag, useWheel, isMobile };
+ return { useDrag, useWheel, useUp, isMobile };
}
+type DragFn = (x: number, y: number, e: MouseEvent | TouchEvent) => void;
+
+type DragMap = [
+ (e: MouseEvent) => void,
+ (e: TouchEvent) => void,
+ ((e: MouseEvent) => void)?,
+ ((e: TouchEvent) => void)?
+];
+
+const dragFnMap = new Map();
+
+/**
+ * 是否是移动设备
+ */
+export const isMobile = matchMedia('(max-width: 600px)').matches;
+
/**
* 向一个元素添加拖拽事件
* @param ele 目标元素
@@ -11,8 +27,9 @@ export default function init() {
*/
export function useDrag(
ele: HTMLElement,
- fn: (x: number, y: number, e: MouseEvent | TouchEvent) => void,
- ondown?: (x: number, y: number, e: MouseEvent | TouchEvent) => void,
+ fn: DragFn,
+ ondown?: DragFn,
+ onUp?: (e: MouseEvent | TouchEvent) => void,
global: boolean = false
) {
let down = false;
@@ -25,21 +42,66 @@ export function useDrag(
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 => {
+ const mouseFn = (e: MouseEvent) => {
if (!down) return;
- const ee = e as MouseEvent;
- fn(ee.clientX, ee.clientY, ee);
- });
- target.addEventListener('touchmove', e => {
+ fn(e.clientX, e.clientY, e);
+ };
+
+ const touchFn = (e: TouchEvent) => {
if (!down) return;
- const ee = e as TouchEvent;
- fn(ee.touches[0].clientX, ee.touches[0].clientY, ee);
- });
+ fn(e.touches[0].clientX, e.touches[0].clientY, e);
+ };
+
+ const mouseUp = (e: MouseEvent) => {
+ if (!down) return;
+ onUp && onUp(e);
+ down = false;
+ };
+
+ const touchUp = (e: TouchEvent) => {
+ if (!down) return;
+ onUp && onUp(e);
+ down = false;
+ };
+
+ target.addEventListener(
+ 'mouseup',
+ mouseUp as EventListenerOrEventListenerObject
+ );
+ target.addEventListener(
+ 'touchend',
+ touchUp as EventListenerOrEventListenerObject
+ );
+
+ dragFnMap.set(fn, [mouseFn, touchFn, mouseUp, touchUp]);
+
+ target.addEventListener(
+ 'mousemove',
+ mouseFn as EventListenerOrEventListenerObject
+ );
+ target.addEventListener(
+ 'touchmove',
+ touchFn as EventListenerOrEventListenerObject
+ );
+}
+
+/**
+ * 去除一个全局拖拽函数
+ * @param fn 要去除的函数
+ */
+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.'
+ );
+ document.removeEventListener('mousemove', fns[0]);
+ document.removeEventListener('touchmove', fns[1]);
+ document.removeEventListener('mouseup', fns[0]);
+ document.removeEventListener('touchend', fns[1]);
}
/**
@@ -57,6 +119,15 @@ export function useWheel(
}
/**
- * 是否是移动设备
+ * 当鼠标或手指松开时执行函数
+ * @param ele 目标元素
+ * @param fn 当鼠标或手指松开时执行的函数
*/
-export const isMobile = matchMedia('(max-width: 600px)').matches;
+export function useUp(ele: HTMLElement, fn: DragFn): void {
+ ele.addEventListener('mouseup', e => {
+ fn(e.clientX, e.clientY, e);
+ });
+ ele.addEventListener('touchend', e => {
+ fn(e.touches[0].clientX, e.touches[0].clientY, e);
+ });
+}
diff --git a/src/plugin/utils.ts b/src/plugin/utils.ts
index d278e13..eec7ef4 100644
--- a/src/plugin/utils.ts
+++ b/src/plugin/utils.ts
@@ -25,3 +25,20 @@ export function getDamageColor(damage: number): string {
if (damage < core.status.hero.hp) return '#f22';
return '#f00';
}
+
+/**
+ * 设置画布的长宽
+ * @param canvas 画布
+ * @param w 宽度
+ * @param h 高度
+ */
+export function setCanvasSize(
+ canvas: HTMLCanvasElement,
+ w: number,
+ h: number
+): void {
+ canvas.width = w;
+ canvas.height = h;
+ canvas.style.width = `${w}px`;
+ canvas.style.height = `${h}px`;
+}
diff --git a/src/styles.less b/src/styles.less
index 8293b1a..8cd9e28 100644
--- a/src/styles.less
+++ b/src/styles.less
@@ -7,4 +7,7 @@
justify-content: center;
align-items: center;
overflow: hidden;
+ transition: all 0.6s linear;
+ opacity: 0;
+ background-color: #000d;
}
diff --git a/src/types/enemy.d.ts b/src/types/enemy.d.ts
index 36b46dd..4185c2d 100644
--- a/src/types/enemy.d.ts
+++ b/src/types/enemy.d.ts
@@ -105,7 +105,7 @@ declare class enemys {
x?: number,
y?: number,
floorId?: string
- ): number[][];
+ ): [atk: number, dam: number][];
/**
* 计算再加若干点防御能使某只敌人对主角的总伤害降低多少
@@ -198,5 +198,5 @@ declare class enemys {
turn: number;
damage: number;
[x: string]: any;
- };
+ } | null;
}
diff --git a/src/types/plugin.d.ts b/src/types/plugin.d.ts
index 73a683e..f7b8afe 100644
--- a/src/types/plugin.d.ts
+++ b/src/types/plugin.d.ts
@@ -4,6 +4,8 @@ type Ref = {
value: T;
};
+type DragFn = (x: number, y: number, e: MouseEvent | TouchEvent) => void;
+
interface PluginDeclaration extends PluginUtils {
/**
* 添加函数 例：添加弹出文字，像这个就可以使用core.addPop或core.plugin.addPop调用
@@ -16,12 +18,15 @@ interface PluginDeclaration extends PluginUtils {
/** 添加变量 例：所有的正在弹出的文字，像这个就可以使用core.plugin.pop获取 */
pop: any[];
+ /** 怪物手册的怪物详细信息的初始位置 */
+ bookDetailPos: number;
+
+ /** 怪物手册详细信息展示的怪物 */
+ bookDetailEnemy: Enemy & DetailedEnemy;
+
/** 手册是否打开 */
readonly bookOpened: Ref;
- /** 手册详细信息 */
- readonly bookDetail: Ref;
-
/** ui栈 */
readonly uiStack: Ref;
@@ -37,11 +42,18 @@ interface PluginDeclaration extends PluginUtils {
*/
useDrag(
ele: HTMLElement,
- fn: (x: number, y: number, e: MouseEvent | TouchEvent) => void,
- ondown?: (x: number, y: number, e: MouseEvent | TouchEvent) => void,
+ fn: DragFn,
+ ondown?: DragFn,
+ onUp?: (e: MouseEvent | TouchEvent) => void,
global: boolean = false
): void;
+ /**
+ * 去除一个全局拖拽函数
+ * @param fn 要去除的函数
+ */
+ cancelGlobalDrag(fn: DragFn): void;
+
/**
* 当触发滚轮时执行函数
* @param ele 目标元素
@@ -52,6 +64,13 @@ interface PluginDeclaration extends PluginUtils {
fn: (x: number, y: number, z: number, e: WheelEvent) => void
): void;
+ /**
+ * 当鼠标或手指松开时执行函数
+ * @param ele 目标元素
+ * @param fn 当鼠标或手指松开时执行的函数
+ */
+ useUp(ele: HTMLElement, fn: DragFn): void;
+
/**
* 添加一个动画
* @param fn 要添加的函数
diff --git a/src/types/util.d.ts b/src/types/util.d.ts
index d12eb72..9a2a1fe 100644
--- a/src/types/util.d.ts
+++ b/src/types/util.d.ts
@@ -100,7 +100,11 @@ declare class utils {
* @param onMap 可选，true表示用于地图显伤，结果总字符数最多为5，否则最多为6
* @returns 格式化结果
*/
- formatBigNumber(x: number, onMap?: boolean, onCritical?: boolean): string;
+ formatBigNumber(
+ x: number | string,
+ onMap?: boolean,
+ onCritical?: boolean
+ ): string;
/** 变速移动 */
applyEasing(mode?: string): (number) => number;
@@ -119,7 +123,7 @@ declare class utils {
* @param color 一行三列或一行四列的数组，前三个元素必须为不大于255的自然数。第四个元素（如果有）必须为0或不大于1的数字，第四个元素不填视为1
* @returns 该颜色的字符串表示
*/
- arrayToRGBA(color: [number, number, number, number]): string;
+ arrayToRGBA(color: [number, number, number, number?] | string): string;
/**
* 录像一压，其结果会被再次base64压缩
diff --git a/src/ui/book.vue b/src/ui/book.vue
index 8e822c4..c759feb 100644
--- a/src/ui/book.vue
+++ b/src/ui/book.vue
@@ -4,9 +4,14 @@
-
-
-
+
+
+
+const emits = defineEmits<{
+ (e: 'close'): void;
+}>();
+
+function changePanel(e: MouseEvent, to: string) {
+ e.stopPropagation();
+ panel.value = to;
+}
+
+onMounted(() => {
+ top.value = 0;
+ const div = document.getElementById('detail') as HTMLDivElement;
+ div.style.opacity = '1';
+
+ const style = getComputedStyle(div);
+
+ let moved = false;
+ useDrag(
+ div,
+ () => {
+ moved = true;
+ },
+ (x, y) => {
+ if (y > (parseFloat(style.height) * 4) / 5) moved = true;
+ },
+ () => {
+ if (moved === false) {
+ top.value = core.plugin.bookDetailPos;
+ div.style.opacity = '0';
+ emits('close');
+ }
+ moved = false;
+ }
+ );
+});
+
+
+
diff --git a/vite.config.ts b/vite.config.ts
index 24ed2c2..f3e362b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -26,7 +26,7 @@ export default defineConfig({
output: {
manualChunks: {
antdv: ['ant-design-vue', '@ant-design/icons-vue'],
- common: ['lodash', 'axios', 'lz-string', 'vue']
+ common: ['lodash', 'axios', 'lz-string']
}
}
}