Prototype mini-map

main.css

.minmap-item {
    width: 100%;
    border: 1px solid #67cbe3;
    font-size: 9px;
    transform-origin: top left;
    pointer-events: none;
    position: absolute;
    user-select: none;
    padding: 5px;
}
#minmap-slider {
    height: 100%;
}
#minMap-highlight {
    height: 250px;
    width: 100%;
    position: absolute;
    background: #e7e7e7;
    opacity: 0.5;
}
#minmap-resizer {
    top: 0;
    left: 0;
    height: 100%;
    width: 8px;
    position: absolute;
    cursor: ew-resize;
}

simulator.html

<template id="tmpLoading">
    <span v-show="txtLoading">{{txtLoading}}</span>
</template>

<!-- add -->
<div id="minMap">
    <div id="minmap-slider" :style="{ width: minMapWidth + 'px' }" @mousedown="onMinMapMouseDown">
        <div v-for="data in datas" class="minmap-item" :style="{ top: data[1] + 'px', height: data[2] + 'px' }">
            {{data[0]}}
        </div>
        <div id="minMap-highlight" :style="{ top: highlightPosition + 'px' }"></div>
        <div id="minmap-resizer" @mousedown="onResizeMouseDown"></div>
    </div>
</div>

ui-main.js

// after UI_AUTOBONUS

const UI_MINMAP = Vue.createApp({
    data() {
        return {
            page_height: 0,
            datas: [],
            highlightPosition: 0,
            isDragging: false,
            startY: 0,
            startScrollY: 0,
            minMapWidth: localStorage.minmapWidth ? localStorage.minmapWidth : 180,
            isResizing: false
        };
    },
    computed: {
        
    },
    methods: {
        updateMinMap() {
            console.log('updateMinMap');
            if(!this.isChangeHeight) return;
            
            let main_fleet = document.querySelector("#divPlayer > div:nth-child(3) > div");
            let support_fleet_nomal = document.querySelector("#divPlayer > div:nth-child(4) > div");
            let support_fleet_boss = document.querySelector("#divPlayer > div:nth-child(5) > div");
            let lbas = document.querySelector("#divPlayer > div:nth-child(6) > div");
            let friend_fleet = document.querySelector("#divPlayer > div:nth-child(7) > div:nth-child(1)");
            let nodes = document.getElementsByClassName('battleWrap');
            let setting = document.getElementById('divSettings');
            // let simulation = document.querySelector("#divMain > h2");
            let result = document.getElementById('divResultsOuter');
            
            this.datas = [];
            this.datas.push(['Main Fleet', this.getY(main_fleet), this.getHeight(main_fleet)]);
            this.datas.push(['Support Fleet (Nomal)', this.getY(support_fleet_nomal), this.getHeight(support_fleet_nomal)]);
            this.datas.push(['Support Fleet (Boss)', this.getY(support_fleet_boss), this.getHeight(support_fleet_boss)]);
            this.datas.push(['LBAS', this.getY(lbas), this.getHeight(lbas)]);
            this.datas.push(['Friend Fleet', this.getY(friend_fleet), this.getHeight(friend_fleet)]);
            const node_length = nodes.length;
            for(let i = 0;i < node_length;i++) {
                const node = nodes[i];
                this.datas.push([`Node ${i + 1}`, this.getY(node), this.getHeight(node)]);
            }
            this.datas.push(['Settings', this.getY(setting), this.getHeight(setting)]);
            // this.datas.push(['Simulation', this.getY(simulation), this.getHeight(simulation)]);
            this.datas.push(['Result', this.getY(result), this.getHeight(result)]);
            
            
        },
        getY(elem) {
            return (elem.getBoundingClientRect().top + window.scrollY) * this.getRatio();
        },
        getHeight(elem) {
            return elem.offsetHeight * this.getRatio();
        },
        getRatio() {
            return window.innerHeight / (document.getElementById('divOther').getBoundingClientRect().top + scrollY + 400);
        },
        isChangeHeight() {
            const result = this.page_height !== document.body.scrollHeight;
            this.page_height = document.body.scrollHeight;
            return result;
        },
        updateHighlight() {
            const scrollPosition = window.scrollY;
            this.highlightPosition = scrollPosition * this.getRatio();
        },
        onMinMapMouseDown(event) {
            console.log('onMinMapMouseDown');
            let minMapY = event.clientY;
            if(minMapY > window.innerHeight - 110) {
                minMapY = window.innerHeight - 110;
            }
            console.log(`minMapY: ${minMapY}`);
            const scrollPosition = (minMapY - 125) / this.getRatio();
            console.log(`scrollPosition: ${scrollPosition}`);
            window.scrollTo(0, scrollPosition);
            
            this.isDragging = true;
            this.startY = event.clientY;
            this.startScrollY = window.scrollY;
            document.addEventListener('mousemove', this.onMinMapMouseMove);
            document.addEventListener('mouseup', this.onMinMapMouseUp);
            
            document.body.style.userSelect = 'none';
        },
        onMinMapMouseMove(event) {
            if (!this.isDragging) return;
            const deltaY = event.clientY - this.startY;
            // console.log(`event.clientY: ${event.clientY}`);
            // console.log(`this.startY: ${this.startY}`);
            // console.log(`deltaY: ${deltaY}`);
            const targetY = this.startScrollY + deltaY / this.getRatio();
            if(event.clientY > window.innerHeight - 110) return;
            window.scrollTo(0, targetY);
        },
        onMinMapMouseUp() {
            this.isDragging = false;
            document.removeEventListener('mousemove', this.onMinMapMouseMove);
            document.removeEventListener('mouseup', this.onMinMapMouseUp);
            
            document.body.style.userSelect = '';
        },
        onResizeMouseDown(event) {
            event.stopPropagation();
            
            this.isResizing = true;
            document.addEventListener('mousemove', this.onResizeMouseMove);
            document.addEventListener('mouseup', this.onResizeMouseUp);

            document.body.style.userSelect = 'none';
        },
        onResizeMouseMove(event) {
            if (!this.isResizing) return;
            const deltaX = window.innerWidth - event.clientX;
            this.minMapWidth = deltaX;
        },
        onResizeMouseUp() {
            this.isResizing = false;
            document.removeEventListener('mousemove', this.onResizeMouseMove);
            document.removeEventListener('mouseup', this.onResizeMouseUp);
            
            localStorage.minmapWidth = this.minMapWidth;

            document.body.style.userSelect = '';
        }
    },
    mounted: function() {
        window.addEventListener('load', () => {
            this.updateMinMap();
            
            const observer = new ResizeObserver(() => {
                this.updateMinMap();
                this.updateHighlight();
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true,
                attributes: false
            });
            
            window.addEventListener('scroll', (event) => {
                this.updateHighlight();
            });
        });
    }
}).mount('#minMap');

window.UI_MINMAP = UI_MINMAP;