HumanBreak/src/ui/book.vue

<!-- 怪物手册ui -->
<template>
    <div id="book">
        <div id="tools">
            <span id="back" class="button-text tools" @click="exit"
                ><left-outlined />返回游戏</span
            >
        </div>
        <div v-if="enemy.length === 0" id="none">
            <div>本层无怪物</div>
        </div>
        <Scroll
            v-else
            style="width: 100%; height: 94%; font-family: normal"
            v-model:now="scroll"
            v-model:drag="drag"
        >
            <div v-for="(e, i) of toShow" class="enemy">
                <EnemyOne
                    :selected="i === selected"
                    :enemy="e"
                    :key="i"
                    @select="select(e, i)"
                    @hover="selected = i"
                ></EnemyOne>
                <a-divider
                    dashed
                    style="width: 100%; border-color: #ddd4"
                ></a-divider>
            </div>
        </Scroll>
    </div>
    <BookDetail
        v-if="detail"
        :from-book="true"
        @close="closeDetail()"
    ></BookDetail>
</template>

<script setup lang="tsx">
import { sleep } from 'mutate-animate';
import { onMounted, onUnmounted, ref } from 'vue';
import EnemyOne from '../components/enemyOne.vue';
import Scroll from '../components/scroll.vue';
import { getDamageColor, has, keycode } from '../plugin/utils';
import BookDetail from './bookDetail.vue';
import { LeftOutlined } from '@ant-design/icons-vue';
import { KeyCode } from '../plugin/keyCodes';
import { noClosePanel } from '../plugin/uiController';
import { ToShowEnemy, detailInfo } from '../plugin/ui/book';

const floorId =
    // @ts-ignore
    core.floorIds[core.status.event?.ui?.index] ?? core.status.floorId;

const specials = Object.fromEntries(
    core.getSpecials().map(v => {
        return [v[0], v.slice(1)];
    })
) as Record<
    string,
    EnemySpecialDeclaration extends [number, ...infer F] ? F : never
>;

const enemy = core.getCurrentEnemys(floorId);
const toShow: ToShowEnemy[] = enemy.map(v => {
    const e = v.enemy;
    const dam = e.calDamage().damage;
    const cri = e.calCritical(1);
    const critical = core.formatBigNumber(cri[0]?.atkDelta);
    const criticalDam = core.formatBigNumber(-cri[0]?.delta);
    const ratio = core.status.maps[floorId].ratio;
    const defDam = core.formatBigNumber(-e.calDefDamage(ratio).delta);
    const damage = core.formatBigNumber(dam);

    const fromFunc = (
        func: string | ((enemy: Enemy) => string),
        enemy: Enemy
    ) => {
        return typeof func === 'string' ? func : func(enemy);
    };
    const special: [string, string, string][] = v.enemy.enemy.special.map(
        vv => {
            const s = specials[vv];
            return [
                fromFunc(s[0], v.enemy.enemy),
                fromFunc(s[1], v.enemy.enemy),
                s[2] as string
            ];
        }
    );
    const showSpecial =
        special.length > 2
            ? special.slice(0, 2).concat(['...', '', '#fff'])
            : special.slice();

    const damageColor = getDamageColor(dam) as string;

    return {
        critical,
        criticalDam,
        defDam,
        special,
        damageColor,
        showSpecial,
        damage,
        ...v
    };
});

const scroll = ref(0);
const drag = ref(false);
const detail = ref(false);
const selected = ref(0);

/**
 * 选择怪物，展示详细信息
 * @param enemy 选择的怪物
 * @param index 选择的怪物索引
 */
function select(enemy: ToShowEnemy, index: number) {
    if (drag.value) return;
    const h = window.innerHeight;
    const y = index * h * 0.2 - scroll.value;
    detailInfo.enemy = enemy;
    detailInfo.pos = y;
    detail.value = true;
    hide();
}

/**
 * 隐藏怪物手册
 */
async function hide() {
    const div = document.getElementById('book') as HTMLDivElement;
    div.style.opacity = '0';
    await sleep(600);
    div.style.display = 'none';
}

/**
 * 关闭详细信息
 */
async function closeDetail() {
    show();
    await sleep(600);
    detail.value = false;
}

/**
 * 显示怪物手册
 */
async function show() {
    const div = document.getElementById('book') as HTMLDivElement;
    div.style.display = 'flex';
    await sleep(50);
    div.style.opacity = '1';
}

/**
 * 退出怪物手册
 */
async function exit() {
    noClosePanel.value = true;
    ancTe.plugin.ui.bookOpened.value = false;
    if (ancTe.plugin.ui.transition.value) await sleep(650);
    else await sleep(100);
    if (core.events.recoverEvents(core.status.event.interval)) {
        return;
    } else if (has(core.status.event.ui)) {
        core.status.boxAnimateObjs = [];
        // @ts-ignore
        core.ui._drawViewMaps(core.status.event.ui);
    } else core.ui.closePanel();
}

function checkScroll() {
    const h = window.innerHeight;
    const y = selected.value * h * 0.2 - scroll.value;
    if (y < 0) {
        scroll.value += y - 20;
    }
    if (y > h * 0.655) {
        scroll.value += y - h * 0.655 + 20;
    }
}

/**
 * 键盘松开时
 */
function keyup(e: KeyboardEvent) {
    const c = keycode(e.keyCode);
    if (c === KeyCode.KeyX || c === KeyCode.Escape) {
        exit();
    }
    if (
        (c === KeyCode.Enter || c === KeyCode.KeyC || c === KeyCode.Space) &&
        !detail.value
    ) {
        select(toShow[selected.value], selected.value);
    }
}

/**
 * 键盘按下时
 */
function keydown(e: KeyboardEvent) {
    const c = keycode(e.keyCode);
    if (!detail.value) {
        if (c === KeyCode.DownArrow) {
            if (selected.value < enemy.length - 1) {
                selected.value++;
            }
            checkScroll();
        }
        if (c === KeyCode.UpArrow) {
            if (selected.value > 0) {
                selected.value--;
            }
            checkScroll();
        }
        // 一次移动5个怪物
        if (c === KeyCode.LeftArrow || c === KeyCode.PageUp) {
            if (selected.value <= 4) {
                selected.value = 0;
            } else {
                selected.value -= 5;
            }
            checkScroll();
        }
        if (c === KeyCode.RightArrow || c === KeyCode.PageDown) {
            if (selected.value >= enemy.length - 5) {
                selected.value = enemy.length - 1;
            } else {
                selected.value += 5;
            }
            checkScroll();
        }
    }
}

onMounted(async () => {
    if (ancTe.plugin.ui.transition.value) await sleep(600);
    else await sleep(50);
    document.addEventListener('keyup', keyup);
    document.addEventListener('keydown', keydown);
});

onUnmounted(async () => {
    document.removeEventListener('keyup', keyup);
    document.removeEventListener('keydown', keydown);
});
</script>

<style lang="less" scoped>
#book {
    user-select: none;
    width: 80%;
    height: 100%;
    font-family: 'normal';
    overflow: hidden;
    transition: opacity 0.6s linear;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#tools {
    height: 6%;
    font-size: 3.2vh;
}

#none {
    width: 100%;
    height: 100%;
    font-size: 6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'normal';
}

.enemy {
    display: flex;
    flex-direction: column;
    height: 20vh;
    width: 100%;
    padding: 0 1% 0 1%;
}

@media screen and (max-width: 600px) {
    #book {
        width: 100%;
        padding: 5%;
    }
}
</style>