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

<template>
    <div class="equip-dialog" 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' :class="equip.quality.quality">
                {{ 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>{{ t('stren.0') }}：<span :class="{ 'red': useCoins < needCoins }">{{ needCoins }}</span></p>
            <button class="button" @click="strengthen()">{{ t('stren.1') }}+{{ parseInt(equip.strengthenLv) + 1
            }}</button>
        </div>
        <div class="btn-group" v-if='!auto'>
            <p>{{ t('stren.0') }}：<span :class="{ 'red': useCoins < needCoins }">{{ needCoins }}</span></p>
            <button class="button" @click="strengthenTest">{{ t('stren.2') }}</button>
            <span v-if="testFlag">{{ equip.strengthenLv }}<span class="arror">➡</span>{{ testResult }}</span>
        </div>
        <div class="btn-group" v-if='!auto'>
            <p>{{ t('stren.3') }}：</p>
            <p><input type="number" :placeholder="t('stren32')" max="15" min="5" v-model="autoLv"></p>
            <button class="button" @click="startAuto">{{ t('stren.4') }}</button>
        </div>
        <div class="btn-group" v-if='auto'>
            <p>{{ t('stren.5') }}...</p>
            <button class="button" @click="stopAuto">{{ t('stren.6') }}</button>
        </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, strengthenCoins, replace } from "@/tool"
import { strengthen_rates } from "@/config";
import { createt } from "@/config/i18n";

const mt = createt('backpack.');
const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const auto = ref(false);
const autoLv = ref(12);
const testFlag = ref(false);
const testResult = ref(0);

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

const useCoins = computed(() => {
    return state.playerAttribute.coins;
})
const needCoins = computed(() => {
    return strengthenCoins(prop.equip.lv, prop.equip.strengthenLv, prop.equip.quality.quality);
})

const strengthen = (times?) => {
    times = times || 1;
    if (!checkCoins(times)) {
        return;
    }
    testFlag.value = false;
    let lv = prop.equip.strengthenLv;
    let i = 0;
    for (; i < times; i++) {
        if (auto.value && prop.equip.strengthenLv >= autoLv.value) {
            auto.value = false;
            commit("set_sys_info", { msg: t('strengthenFinish'), type: "win", });
            break;
        }
        lv += callResult(lv);
    }
    prop.equip.strengthenLv = lv;
    dispatch('saveGame');
    commit("add_player_coins", -1 * needCoins.value * i);
    auto.value && setTimeout(() => strengthen(times), 200);
};

const strengthenTest = () => {
    if (!checkCoins(1)) {
        return;
    }
    const result = callResult(prop.equip.strengthenLv);
    testResult.value = prop.equip.strengthenLv + result;
    testFlag.value = true;
}

const checkCoins = (times) => {
    if (useCoins.value < needCoins.value * times) {
        auto.value = false;
        commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", });
        return false;
    }
    return true;
}

const callResult = (lv) => {
    const len = strengthen_rates.length;
    const rate = lv < len ? strengthen_rates[lv] : strengthen_rates[len - 1];
    const result = Math.random() < rate ? 1 : -1;
    return result;
}

const startAuto = () => {
    auto.value = true;
    strengthen(state.speed);
};
const stopAuto = () => {
    auto.value = false;
};

defineExpose({ stopAuto })

onMounted(() => { });
</script>
<style lang="scss" scoped>
.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;
    }
}
</style>