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

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

    <Dialog :title="t('menu')" v-model="showReborn" top="4rem" :left="state.mobile ? '4%' : '8%'" padding="0.7rem"
        @close="state.curMenu = null">
        <div class="message">
            <div class="tips">
                <p>- {{ t('desc.0') }}</p>
                <p>- {{ t('desc.1') }}</p>
                <p>- {{ t('desc.2') }}</p>
            </div>
        </div>
        <div class="points">
            <div class="info">
                <p>{{ t('total') }} ：{{ points.total }}</p>
                <p>{{ t('has') }} ：{{ points.has }}</p>
            </div>
            <div class="attributes">
                <div class="attribute" v-for="attr in piont_arrts" :key="attr">
                    <p>
                        <img :src="attr_icon_urls[attr]">
                        <span>
                            {{ t1(attr + '.0') }}：+{{ baseAttribute[attr] }}
                            {{ attr_unitys[attr] }}
                        </span>
                    </p>
                    <div class="group">
                        <Tooltip :infos="[t('subtractPoints')]" width="10rem">
                            <button class="button" @mousedown="mousedown(-1, attr, $event)"
                                @touchstart="touchstart(-1, attr)" @touchend="touchend(-1)">-</button>
                        </Tooltip>
                        <input type="number" min="0" disabled v-model="points[attr]">
                        <Tooltip :infos="[t('addPoints')]" width="10rem">
                            <button class="button" @mousedown="mousedown(1, attr, $event)"
                                @touchstart="touchstart(1, attr)" @touchend="touchend(1)">+</button>
                        </Tooltip>
                    </div>
                </div>
            </div>
        </div>
    </Dialog>
</template>

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

const t = createt('point.');
const t1 = useI18n().t;
const { state, commit, dispatch } = useStore();
const showReborn = computed(() => {
    return state.curMenu == 'point';
});
const points = computed(() => {
    return state.points;
})
const baseAttribute = computed(() => {
    return state.baseAttribute;
})
const arrts = ['hp', 'atk', 'crit', 'critDmg', 'def', 'bloc', 'moveSpeed', 'battleSpeed'];

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

const touchstart = (num, attr) => {
    if (!state.mobile) return;
    flag = true;
    if (curNum == 0) {
        curNum = num;
        flag = true;
        curAttr = attr;
        changeAttribute();
    }
}
const touchend = (num) => {
    if (!state.mobile) return;
    if (curNum == num || curNum == num * -1) {
        curNum = 0;
        flag = false;
    }
}

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

const changeAttribute = () => {
    if (flag) {
        const rp = points.value;
        const point = rp.has;
        const oldPoint = rp[curAttr];
        let num = 0;
        let tmp = curNum * state.speed;
        if (tmp > 0 && point > 0) {
            num = point - tmp < 0 ? point : tmp;
        } else if (tmp < 0 && oldPoint > 0) {
            num = oldPoint + tmp < 0 ? oldPoint * -1 : tmp;
        }
        if (num != 0) {
            rp[curAttr] = oldPoint + num;
            rp.has = point - num;
            commit('set_points', rp)
        }
        setTimeout(changeAttribute, 200);
    }
}

const showMenu = () => {
    state.curMenu = showReborn.value ? null : 'point';
}
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>
.message {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.8rem;

    p {
        margin: 0.7rem;
    }

    .tips {
        padding-left: 1.3rem;
        text-align: left;

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

.points {
    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.3rem 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;
        }

    }
}

@media only screen and (max-width: 768px) {

    .message {
        padding-bottom: 0.5rem;

        p {
            margin: 0.5rem;
        }

        .tips {
            padding-left: 0.8rem;
        }

        .btn-div {
            padding: 0rem;
            padding-right: 1rem;
        }
    }

    .points {
        padding: 0.1rem;
        width: 23.5rem;

        .info {
            padding: 0.2rem;
        }

    }

    .attributes {
        padding: 0.05rem 0;
    }

    .attribute {
        padding: 0.2rem 0rem;

        p {

            span {
                margin-left: 0.2rem;
            }
        }

        .group {

            input {
                width: 4rem;
                color: black;
                height: 1.8rem;
                font-size: 0.8rem;
            }

        }
    }

}
</style>