vue-idle-game/src/views/reborn/reborn.vue

<template>
    <Tooltip :infos="[t('rebornMenu.0'), t('rebornMenu.1')]" width="12rem">
        <img class="menu-img" :src="menu_icons.reborn" @click="showMenu">
    </Tooltip>

    <Dialog :title="t('rebornMenu.0')" v-model="showReborn" top="4rem" left='8%' padding="0.7rem">
        <div class="message">
            <p>{{ t('canGetPoint') + getPoints }}</p>
            <div class="tips">
                <p>- {{ t('rebornDesc.0') }}</p>
                <p>- {{ t('rebornDesc.1') }}</p>
                <p>- {{ t('rebornDesc.2') }}</p>
            </div>
            <div class='btn-div'>
                <button class="button" @click="reborn">{{ t('rebornConfirm') }}</button>
            </div>
        </div>
        <div class="reborn">
            <div class="info">
                <p>{{ t('rebornNum.0') }} ：{{ rebornPoints.count }}次</p>
                <p>{{ t('rebornNum.1') }} ：{{ rebornPoints.points }}</p>
            </div>
            <div class="attributes">
                <div class="attribute" v-for="attr in reborn_arrts" :key="attr">
                    <p>
                        <img :src="attr_icon_urls[attr]">
                        <span>
                            {{ t(attr + '.0') }}：+{{ rebornAttribute[attr].toFixed(2) }}
                            {{ attr_unitys[attr] }}
                        </span>
                    </p>
                    <div class="group">
                        <Tooltip :infos="[t('subtractPoints')]" width="10rem">
                            <button class="button" @mousedown="mousedown(-1, attr, $event)">-</button>
                        </Tooltip>
                        <input type="number" min="0" disabled v-model="rebornPoints[attr]">
                        <Tooltip :infos="[t('addPoints')]" width="10rem">
                            <button class="button" @mousedown="mousedown(1, attr, $event)">+</button>
                        </Tooltip>
                    </div>
                </div>
            </div>
        </div>
    </Dialog>

    <Confirm ref="confirm" width="10rem" :tip="t('rebornComfirm.0').replace('${points}', getPoints + '')"
        :confirm="t('rebornComfirm.1')" :cancel="t('rebornComfirm.2')" @confirm="confirmReborn" />

</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import { Tooltip, Dialog, Confirm } from "@/components"
import { getPointsOfReborn } from "@/tool";
import { menu_icons, reborn_arrts, attr_icon_urls, attr_unitys, backpack_num } from "@/config";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const showReborn = computed(() => {
    return state.curMenu == 'reborn';
});
const getPoints = computed(() => {
    return getPointsOfReborn(state.playerAttribute);
})
const rebornPoints = computed(() => {
    return state.rebornPoints;
})
const rebornAttribute = computed(() => {
    return state.rebornAttribute;
})
const confirm = ref();

const reborn = (e) => {
    if (state.playerAttribute.lv <= 30) {
        commit("set_sys_info", { msg: t('rebornLvTip'), type: 'warning' });
        return
    }
    confirm.value.open(0, e)
}

const confirmReborn = () => {
    const points = getPoints.value;
    rebornPoints.value.count++;
    rebornPoints.value.points += points;
    dispatch('reset_player_equi')
    commit('set_player_coins', 0)
    commit('set_backpack', new Array(backpack_num))
}

let flag = false;
let curAttr = '';
let curNum = 0;

const mousedown = (num, attr, e) => {
    flag = true;
    num *= 4.5 * e.button + 1;
    if (curNum == 0) {
        curNum = num;
        flag = true;
        curAttr = attr;
        changeAttribute();
    }
}
const mouseup = (e) => {
    const num = 4.5 * e.button + 1
    if (curNum == num || curNum == num * -1) {
        curNum = 0;
        flag = false;
    }
}

const changeAttribute = () => {
    if (flag) {
        debugger
        const rp = rebornPoints.value;
        const point = rp.points;
        const oldPoint = rp[curAttr];
        let num = 0;
        if (curNum > 0 && point > 0) {
            num = point - curNum < 0 ? point : curNum;
        } else if (curNum < 0 && oldPoint > 0) {
            num = oldPoint + curNum < 0 ? oldPoint * -1 : curNum;
        }
        if (num != 0) {
            rp[curAttr] = oldPoint + num;
            rp.points = point - num;
            commit('set_reborn_points', rp)
        }
        setTimeout(changeAttribute, 100);
    }
}
const showMenu = () => {
    state.curMenu = showReborn.value ? null : 'reborn';
}
const keydown = (e) => {
    if (e.keyCode == 82 && !e.ctrlKey) {
        showMenu();
    }
}
onMounted(() => {
    document.addEventListener('keydown', keydown)
    document.addEventListener('mouseup', mouseup)
});
onBeforeUnmount(() => {
    document.removeEventListener('keydown', keydown)
    document.removeEventListener('mouseup', mouseup)
})
</script>
<style lang="scss" scoped>
* {
    color: white;
}

.message {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.8rem;

    .tips {
        padding-left: 1.3rem;

        p {
            color: #999;
            font-size: 0.8rem;
            margin: 0rem;
        }
    }

    p {
        margin: 0.7rem;
    }

    .btn-div {
        padding: 0.1rem;
        display: flex;
        justify-content: flex-end;
        padding-right: 2rem;
    }
}

.reborn {
    padding: 0.1rem;
    width: 32rem;

    .info {
        padding: 0.3rem;
        display: flex;
        justify-content: space-between;
    }

}

.attributes {
    padding: 0.05rem 0;

}

.attribute {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem;

    p {
        display: flex;
        align-items: center;

        img {
            width: 1.6rem;
            height: 1.6rem;
        }

        span {
            margin-left: 0.4rem;
        }
    }

    .group {
        display: flex;
        justify-content: space-between;

        input {
            width: 5.5rem;
            color: black;
        }

    }
}
</style>