static/game/dev/index.html

<!DOCTYPE html>
<html>

<head>
    <title>Get Me Out! - Development Grid View</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #1a1a1a;
        }
        
        .dev-grid {
            position: relative;
            margin: 40px;
        }
        
        .numbers {
            position: absolute;
            display: flex;
            font-family: monospace;
            color: white;
            background: rgba(0,0,0,0.5);
        }

        .top-numbers, .bottom-numbers {
            left: 0;
            right: 0;
            height: 30px;
            flex-direction: row;
        }

        .left-numbers, .right-numbers {
            top: 0;
            bottom: 0;
            width: 30px;
            flex-direction: column;
        }

        .top-numbers { top: -30px; }
        .bottom-numbers { bottom: -30px; }
        .left-numbers { left: -30px; }
        .right-numbers { right: -30px; }
        
        .number {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .grid-cell {
            position: absolute;
            width: 30px;
            height: 30px;
            border: 1px solid rgba(255,255,255,0.2);
            pointer-events: none;
        }

        #mapWrapper {
            border: 1px solid rgba(255,255,255,0.3);
            position: relative;
            width: 960px;
            height: 600px;
        }

        #mapBackground {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('/assets/img/appartment/finalmap.png') no-repeat center center;
            background-size: 100% 100%;
            pointer-events: none;
            z-index: -1;
        }
    </style>
</head>

<body>
    <div id="mapWrapper" class="dev-grid">
        <div id="mapBackground"></div>

        <div id="topNumbers" class="numbers top-numbers"></div>
        <div id="bottomNumbers" class="numbers bottom-numbers"></div>
        <div id="leftNumbers" class="numbers left-numbers"></div>
        <div id="rightNumbers" class="numbers right-numbers"></div>
        <div id="gridOverlay"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Add numbers on all sides
            const addNumbers = (elementId, count) => {
                const container = document.getElementById(elementId);
                for (let i = 0; i < count; i++) {
                    const number = document.createElement('div');
                    number.className = 'number';
                    number.textContent = i;
                    container.appendChild(number);
                }
            };

            // Add numbers to all sides
            addNumbers('topNumbers', 32);
            addNumbers('bottomNumbers', 32);
            addNumbers('leftNumbers', 20);
            addNumbers('rightNumbers', 20);

            // Add grid overlay
            const gridOverlay = document.getElementById('gridOverlay');
            for (let y = 0; y < 20; y++) {
                for (let x = 0; x < 32; x++) {
                    const cell = document.createElement('div');
                    cell.className = 'grid-cell';
                    cell.style.left = (x * 30) + 'px';
                    cell.style.top = (y * 30) + 'px';
                    gridOverlay.appendChild(cell);
                }
            }
        });
    </script>
</body>

</html>