vue-idle-game/src/views/backpack/strengthen.vue

<template>
    <div class="strengthen" v-if="equip">
        <div class="coins">
            {{ t('coins.0') }}:{{ useCoins }}
        </div>
        <Tooltip :infos="[t('stDesc.1'), t('stDesc.2'), t('stDesc.3'), t('stDesc.4'), t('stDesc.5')]" width="8rem">
            <div class="descript">- {{ t('stDesc.0') }} -</div>
        </Tooltip>
        <div class="equip">
            <EquipIcon :equip="equip" />
            <div class='name' :style="{ color: equip.quality.color }">
                {{ t(equip.type + '.' + equip.base.name + '.0') }}
                {{ equip.strengthenLv ? '(+' + equip.strengthenLv + ')' : '' }}
            </div>
        </div>
        <div class="entry">
            <div>
                <div v-for="v in equip.base.entry" :key="v.id">
                    {{ t(v.type + '.0') }} : + {{ strengthenValue(v.value, equip.strengthenLv) }}
                </div>
            </div>
            <div class="arror">➡</div>
            <div>
                <div v-for="v in equip.base.entry" :key="v.id">
                    <span>{{ strengthenValue(v.value, equip.strengthenLv + 1) }}</span>
                    <span class="set">
                        ⬆({{ strengthenValue(v.value, equip.strengthenLv + 1) - strengthenValue(v.value,
                            equip.strengthenLv) }})
                    </span>
                </div>
            </div>
        </div>
        <div class="btn-group" v-if='!auto'>
            <p>需要金币：<span :class="{ 'red': useCoins < needCoins }">{{ needCoins }}</span></p>
            <button class="button" @click="strengthen">强化至+{{ parseInt(equip.strengthenLv) + 1 }}</button>
        </div>
        <div class="btn-group" v-if='!auto'>
            <p>自动强化目标等级：</p>
            <p><input type="number" placeholder="目标等级" max="15" min="5" v-model="autoLv"></p>
            <button class="button" @click="startAuto">自动强化</button>
        </div>
        <div class="btn-group" v-if='auto'>
            <p>自动强化中...</p>
            <button class="button" @click="stopAuto">中断自动强化</button>
        </div>
        <Tooltip :infos="[t('reforgeDesc.1'), t('reforgeDesc.2')]" width="8rem">
            <div class="descript">- {{ t('reforgeDesc.0') }} -</div>
        </Tooltip>

        <div class="extraEntry" @mouseover="reforgeFlag = true" @mouseleave="reforgeFlag = false; reforgeing = false;"
            @click="reforge">
            <div class="extraEntry-item" v-for="(v, k) in equip.extraEntry" :key="v.id"
                v-if="!reforgeFlag || reforgeing">
                <button class="button">
                    <div>
                        {{ t(v.type + '.0') }} : {{ v.showVal }}({{ v.percent }}%)
                    </div>
                </button>
            </div>
            <div :class="['extraEntry-item', useCoins < reforgeNeed ? 'red' : '']" v-if="reforgeFlag && !reforgeing">
                点击花费{{ reforgeNeed }}金币重铸
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref, computed, watch } from "vue";
import { useI18n } from "vue3-i18n";
import { Tooltip, EquipIcon } from "@/components"
import { strengthenValue } from "@/tool"
import { extra_entry_num, weaponExtraEntry, armorExtraEntry, neckExtraEntry, ringExtraEntry } from "@/config";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const auto = ref(false);
const autoLv = ref(12);
const successLv = 5;
const rates = [0.8, 0.65, 0.45, 0.3, 0.2];
const reforgeFlag = ref(false);
const reforgeing = ref(false);
const height = computed(() => {
    if (prop.equip) {
        return prop.equip.extraEntry.length * 2.5 + 'rem';
    }
    return '1rem';
})
const reforgeNeed = computed(() => {
    const equip = prop.equip;
    if (!equip) {
        return 0;
    }
    return Math.round(equip.lv * equip.quality.qualityCoefficient * (200 + 10 * equip.lv) / 6);
})

const prop = defineProps({
    equip: {
        type: Object,
        default: null
    }
});

const useCoins = computed(() => {
    return state.playerAttribute.coins;
})
const needCoins = computed(() => {
    return Math.round((prop.equip.lv + 1) * (1.1 ** (prop.equip.strengthenLv) ** 1.1) * (10 + prop.equip.lv / 5) + 100);
})

const strengthen = () => {
    if (auto.value && prop.equip.strengthenLv >= autoLv.value) {
        auto.value = false;
        commit("set_sys_info", { msg: t('strengthenFinish'), type: "win", });
        return;
    }
    if (useCoins.value < needCoins.value) {
        auto.value = false;
        commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", });
        return
    }
    const lv = prop.equip.strengthenLv;
    let rate = 1;
    if (lv > successLv) {
        let idx = lv - successLv - 1;
        const len = rates.length;
        idx = idx > len ? len : idx;
        rate = rates[idx];
    }
    if (Math.random() < rate) {
        prop.equip.strengthenLv++
    } else if (lv >= 5) {
        prop.equip.strengthenLv--
    }
    commit("add_player_coins", -1 * needCoins.value);
    auto.value && setTimeout(strengthen, 200);
};
const startAuto = () => {
    auto.value = true;
    strengthen();
};
const stopAuto = () => {
    auto.value = false;
};

const reforger = {
    weapon: weaponExtraEntry,
    armor: armorExtraEntry,
    neck: neckExtraEntry,
    ring: ringExtraEntry,
}

const reforge = () => {
    if (useCoins.value < reforgeNeed.value) {
        commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", });
        return
    }
    const equip = prop.equip;
    const quality = equip.quality.quality;
    const extraEntryNum = extra_entry_num[quality];
    const extraEntry = new Array();
    for (let i = 0; i < extraEntryNum; i++) {
        const entry = reforger[equip.type](quality, equip.lv);
        extraEntry.push(entry);
    }
    commit("add_player_coins", -1 * reforgeNeed.value);
    equip.extraEntry = extraEntry;
    reforgeing.value = true;
}

onMounted(() => { });
</script>
<style lang="scss" scoped>
.strengthen {
    color: #f1f1f1;
    width: 25rem;
    height: auto;
    background: rgba(0, 0, 0, 0.2);
    border: #393839;
    border-radius: 0.4rem;
    padding: 0 1rem;
    box-sizing: border-box;
}
.coins{
    display: flex;
    align-items: center !important;
    justify-content: center;
    font-size: 1.1rem;
    color: #2fe20f;
}

.descript {
    font-family: 'MaShanZheng' !important;
    display: flex;
    align-items: center !important;
    justify-content: center;
    font-size: 1.6rem;
    padding: 1.4rem 0.7rem;
    color: #efb96e;
}

.equip {
    display: flex;
    width: 100%;
    justify-content: center;

    .name {
        font-size: 1.6rem;
        height: 3.5rem;
        line-height: 3.5rem;
        margin-left: 1.6rem;
        font-size: 1.2rem;
    }
}

.entry {
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: space-around;
    font-size: 1.2rem;
    align-items: center;

    div {
        text-align: left;

        &>div {
            height: 2rem;
        }

        .set {
            color: #2fe20f;
            margin-left: 0.7rem;
        }
    }
}

.btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: #000;

    .red {
        color: red;
    }
}

.extraEntry {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding-left: 1.2rem;
    padding-bottom: 0.6rem;
    color: #68d5ed;
    height: v-bind('height');
    cursor: pointer;

    div {
        display: flex;
        justify-content: center;

        &>div {
            display: flex;
            justify-content: center;
        }
    }

    .button {
        border: 0;
        width: 80%;
    }

    .reforge-tip {
        height: 100%;
        display: flex;
        justify-content: center;
    }

    .red {
        color: red;
    }
}
</style>