gui.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matrix Editor</title>
    <style>
        .grid {
            display: grid;
            grid-template-columns: repeat(32, 20px);
            gap: 2px;
        }
        .cell {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid #000;
        }
        .block { background-color: gray; }
        .lava { background-color: red; }
        .spawn { background-color: blue; }
        .goal { background-color: green; }
        .matrix-output {
            width: 100%;
            height: 150px;
            margin-top: 10px;
            font-family: monospace;
            white-space: pre;
        }
    </style>
</head>
<body>
    <div class="grid" id="grid"></div>
    <button onclick="printMatrix()">Print Matrix</button>
    <textarea id="matrixOutput" class="matrix-output" readonly></textarea>
    <script>
        let level = new Array(576).fill(0);
        for (let i = 0; i < 32; i++) level[i] = 1;
        for (let i = 544; i < 576; i++) level[i] = 1;
        for (let i = 0; i < 18; i++) level[i * 32] = 1, level[i * 32 + 31] = 1;

        const grid = document.getElementById("grid");
        function updateGrid() {
            grid.innerHTML = "";
            level.forEach((value, index) => {
                const cell = document.createElement("div");
                cell.classList.add("cell");
                if (value === 1) cell.classList.add("block");
                if (value === 2) cell.classList.add("lava");
                if (value === 3) cell.classList.add("spawn");
                if (value === 4) cell.classList.add("goal");
                cell.onclick = () => {
                    level[index] = (level[index] + 1) % 5;
                    updateGrid();
                };
                grid.appendChild(cell);
            });
        }
        function printMatrix() {
            let output = "";
            for (let i = 0; i < 18; i++) {
                output += level.slice(i * 32, (i + 1) * 32).join(",") + "\n";
            }
            document.getElementById("matrixOutput").value = output;
        }
        updateGrid();
    </script>
</body>
</html>