vue-idle-game/src/views/dungeon/dungeonMap.vue

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

    <teleport to="#main" v-if="showMap">
        <div id="map" class="map" :style="mapStyle">
            <span v-if="!state.battle.battleShow">
                <DungeonView v-for="item in dungeons" :dungeon="item" :key="item.lv" @battle="startBattle(item)" />
                <img :src="lock_refresh" class="refresh" @click="refreshDungeons"></img>
            </span>
            <BattleView :dungeon="curDungeon" v-if="state.battle.battleShow" ref="battle" />
        </div>
    </teleport>


</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { onBeforeUnmount, onMounted, computed, ref, nextTick } from "vue";
import { useI18n } from "vue3-i18n";
import { Tooltip, Dialog } from "@/components"
import { menu_icons, Dungeon, lock_refresh } from "@/config";
import { randomDungeonDifficulty } from "@/tool";
import DungeonView from "./dungeon.vue"
import BattleView from "./battle.vue"

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const showMap = ref(false);
const dungeons = ref<Dungeon[]>()
const mapStyle = ref<any>({
    height: 'calc(100 % - 0.5rem)',
    width: 'calc(100 % - 53.5rem)',
    left: '53rem',
});
const battle = ref();
const curDungeon = ref();

const showMenu = () => {
    showMap.value = !showMap.value;
}

const startBattle = (dungeon) => {
    state.battle.battleShow = true;
    curDungeon.value = dungeon;
    if (battle.value) {
        battle.value?.startDungeon();
    } else {
        setTimeout(() => {
            startBattle(dungeon);
        }, 50);
    }
}

const refreshDungeons = () => {
    const tmp = new Array();
    const lv = state.playerAttribute.lv;
    for (let i = lv < 6 ? 1 : lv - 5; i < lv + 6; i++) {
        const df = randomDungeonDifficulty();
        tmp.push(new Dungeon(i, df));
    }
    dungeons.value = tmp;
}

const setStype = () => {
    if (showMap.value) {
        showMap.value = false;
        setTimeout(() => {
            showMap.value = true;
        }, 100);
    }
    if (window.innerWidth > 1360) {
        mapStyle.value = {
            height: 'calc(100 % - 0.5rem)',
            width: 'calc(100 % - 53.5rem)',
            left: '53rem',
        }
    } else {
        mapStyle.value = {
            height: '60rem',
            width: '48.5rem',
            left: '2rem',
            top: '2rem',
        }
    }

}

const keydown = (e) => {
    if (e.keyCode == 84 && !e.ctrlKey) {
        showMenu();
    }
    if (e.keyCode == 27) {
        showMap.value = false;
    }
}

onMounted(() => {
    document.addEventListener('keydown', keydown)
    refreshDungeons();
    setStype();
    window.onresize = setStype;
});
onBeforeUnmount(() => {
    document.removeEventListener('keydown', keydown)
})

</script>
<style lang="scss" scoped>
.map {
    height: calc(100% - 0.5rem);
    width: calc(100% - 53.5rem);
    left: 53rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    background-image: url(@/assets/icons/map.jpg);

    * {
        color: white;
    }

    .refresh {
        cursor: pointer;
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        display: block;
        width: 2rem;
        height: 2rem;
        background-size: cover;
    }
}
</style>