Fishtank point and click UI

fishtank-point-and-click.js

(function() {
    function createPointButton(id, title) {
        var button = document.createElement('button');
        button.style.border = "dashed 1px black";
        button.style.background = "none";
        button.style.position = "absolute";
        button.id = id;
        button.title = title;
        button.style.cursor = 'pointer';
        button.style.opacity = 0.3;
        return button;
    }

    function createFishtankButton(text) {
        var button = document.createElement('button');
        button.classList.add('color-button_color-button__cW61T', 'color-button_md__GaczN');
        
        var img = document.createElement('img');
        img.src = 'https://cdn.fishtank.live/images/slices/console-button-long-gray-4.png';
        button.appendChild(img);
        
        var textContainer = document.createElement('div');
        textContainer.classList.add('color-button_text__3OQAq');
        textContainer.innerText = text;
        button.appendChild(textContainer);
        
        return button;
    }

    function resetPoints(){
        roomIDs.forEach(room => {
            var b = document.getElementById(room.id+'point');
            b.style.visibility = 'hidden';
        });
    }
    
    var roomList = document.createElement('div');
    var roomIDs = [
        { id: 'hallway-downstairs', name: 'Hallway Downstairs', links: [
            { id: 'dog-house', x: 332, y: 139, w: 297, h: 617 },
            { id: 'hallway-upstairs', x: 937, y: 140, w: 198, h: 247 },
            { id: 'living-room', x: 905, y: 663, w: 512, h: 105 }
        ]},
        { id: 'dog-house', name: 'Dog House', links: [
            { id: 'kitchen', x: 879, y: 201, w: 114, h: 283 },
            { id: 'hallway-downstairs', x: 322, y: 235, w: 103, h: 345 },
            { id: 'living-room', x: 476, y: 180, w: 107, h: 258 }
        ]},
        { id: 'kitchen', name: 'Kitchen', links: [
            { id: 'dog-house', x: 1169, y: 136, w: 115, h: 323 },
            { id: 'bar', x: 327, y: 544, w: 664, h: 229 }
        ]},
        { id: 'bar', name: 'Bar', links: [
            { id: 'kitchen', x: 562, y: 164, w: 137, h: 243 },
            { id: 'living-room', x: 765, y: 138, w: 110, h: 229 },
            { id: 'lounge', x: 921, y: 155, w: 165, h: 245 }
        ]},
        { id: 'lounge', name: 'Lounge', links: [
            { id: 'bar', x: 921, y: 106, w: 238, h: 175 },
            { id: 'living-room', x: 691, y: 620, w: 742, h: 141 },
            { id: 'kitchen', x: 1338, y: 374, w: 101, h: 182 }
        ]},
        { id: 'living-room', name: 'Living Room', links: [
            { id: 'lounge', x: 419, y: 136, w: 166, h: 239 },
            { id: 'bar', x: 765, y: 135, w: 94, h: 155 },
            { id: 'hallway-downstairs', x: 1211, y: 351, w: 220, h: 411 }
        ]},
        { id: 'hallway-upstairs', name: 'Hallway Upstairs', links: [
            { id: 'hallway-downstairs', x: 668, y: 135, w: 173, h: 371 },
            { id: 'bedroom-1', x: 346, y: 153, w: 150, h: 156 },
            { id: 'bedroom-2', x: 335, y: 318, w: 94, h: 144 },
            { id: 'bedroom-3', x: 1166, y: 175, w: 271, h: 581 }
        ]},
        { id: 'bedroom-1', name: 'Bedroom 1', links: [
            { id: 'hallway-upstairs', x: 779, y: 152, w: 135, h: 305 }
        ]},
        { id: 'bedroom-2', name: 'Bedroom 2', links: [
            { id: 'the-bunk', x: 1205, y: 339, w: 49, h: 122 },
            { id: 'hallway-upstairs', x: 817, y: 147, w: 95, h: 242 }
        ]},
        { id: 'bedroom-3', name: 'Bedroom 3', links: [
            { id: 'the-bunk', x: 853, y: 133, w: 316, h: 304 },
            { id: 'hallway-upstairs', x: 1216, y: 147, w: 200, h: 334 }
        ]},
        { id: 'the-bunk', name: 'The Bunk', links: [
            { id: 'bedroom-3', x: 333, y: 141, w: 325, h: 620 }
        ]},
        { id: 'attic', name: 'Attic', links: [
        ]}
    ];

    var sidebar = document.getElementsByClassName('secondary-panel_secondary-panel__vUc65')[0];
    var footer = document.getElementsByClassName('footer_footer__Mnt6p')[0];

    roomIDs.forEach((room) => {
        var roomButton = createFishtankButton(room.name);
        roomButton.onclick = () => {
            document.getElementsByClassName('close-button_close-button__BKUKA')[0].click()
            setTimeout(() => {
                document.getElementById(room.id).click();
            }, 200);
            resetPoints();
            room.links.forEach(link => {
                var pb = document.getElementById(link.id+'point');
                pb.style.visibility = 'visible';
                pb.style.left = link.x+'px';
                pb.style.top = link.y+'px';
                pb.style.width = link.w+'px';
                pb.style.height = link.h+'px';
            });
        };

        if (room.id == 'hallway-upstairs') {
            var spacingDiv = document.createElement('div');
            spacingDiv.style.marginTop = '16px';
            roomList.appendChild(spacingDiv);
        }
        roomList.appendChild(roomButton);

        const p = createPointButton(room.id+'point', room.name);
        p.style.visibility = 'hidden';
        p.onclick = () => {
            document.getElementsByClassName('close-button_close-button__BKUKA')[0].click()
            setTimeout(() => {
                document.getElementById(room.id).click();
            }, 200);
            resetPoints();
            room.links.forEach(link => {
                var pb = document.getElementById(link.id+'point');
                pb.style.visibility = 'visible';
                pb.style.left = link.x+'px';
                pb.style.top = link.y+'px';
                pb.style.width = link.w+'px';
                pb.style.height = link.h+'px';
            });
        };
        
        document.body.appendChild(p);
    })

    sidebar.insertBefore(roomList, footer);
})();