GridSetup.js

function GridSetup()
{
    grid = {}; // ✅ Declare grid before use
    mainGrid = document.getElementById("main-grid");

    totalColumns = Object.keys(jsonData).length;
    columnRowCounts = {};

    for (col = 1; col <= totalColumns; col++) {
        columnRowCounts[col] = Object.keys(jsonData[col]).length;
    }

    maxRows = Math.max(...Object.values(columnRowCounts));

    for (col = 1; col <= totalColumns; col++)
    {
        grid[col] = {};

        for (row = 1; row <= maxRows; row++)
        {
            if (row > columnRowCounts[col])
            {
                grid[col][row] = false;
            }
            else
            {
                grid[col][row] = jsonData[col][row];
            }
        }
    }

    for (row = 1; row <= maxRows; row++)
    {
        for (col = 1; col <= totalColumns; col++)
        {
            FirstPassLayer1(col, row);
            FirstPassLayer2(col, row);
        }
    }

    for (col = 1; col <= totalColumns; col++)
    {
        for (row = 1; row <= maxRows; row++)
        {
            let gridItem = document.getElementById(`grid-item-${col}-${row}`);
            if (gridItem) {
                InjectClasses(col, row, gridItem);
            }
        }
    }
}

function FirstPassLayer1(col, row)
{
    if (!grid[col]) { grid[col] = {}; }
    if (!grid[col][row]) { grid[col][row] = {}; }

    grid[col][row].classes = []; // ✅ Fixed: Initialize as an array
    grid[col][row].textContent = "";

    if (!jsonData[col] || !jsonData[col][row])
    {
        grid[col][row].classes.push("hidden-item");
        return;
    }

    let entry = jsonData[col][row];

    if (!entry || entry === false || entry.text === false) {
        grid[col][row].classes.push("hidden-item");
    } else {
        grid[col][row].classes.push("grid-item");
        grid[col][row].textContent = entry.text;
    }
}

function FirstPassLayer2(col, row)
{
    if (!jsonData[col] || !jsonData[col][row]) return;

    let entry = jsonData[col][row];
    let conn = entry.connections;
    if (!conn) return;

    grid[col][row].classes = []; // ✅ Fixed: Initialize as an array

    const flip = { 'left': 'right', 'right': 'left', 'up': 'down', 'down': 'up' };
    const axis = { 'left': 'column', 'right': 'column', 'up': 'row', 'down': 'row' }; // ✅ Corrected axis mapping

    // Handle "T" connections first
    if (conn.type === "t") {

        grid[col][row].classes.push("connection-t");

        if (conn.left && conn.right) {
            grid[col][row].classes.push("connection-t-horizontal");
        } else if (conn.up && conn.down) {
            grid[col][row].classes.push("connection-t-vertical");
        } else if (conn.up && conn.left) {
            grid[col][row].classes.push("connection-t-up-left");
        } else if (conn.up && conn.right) {
            grid[col][row].classes.push("connection-t-up-right");
        } else if (conn.down && conn.left) {
            grid[col][row].classes.push("connection-t-down-left");
        } else if (conn.down && conn.right) {
            grid[col][row].classes.push("connection-t-down-right");
        }
    }

    // Process standard connections
    ['up', 'down', 'left', 'right'].forEach(direction => {
        if (!conn[direction]) return;

        grid[col][row].classes.push("connection");
        grid[col][row].classes.push(`connection-${direction}`);
        grid[col][row].classes.push("connection-extend");
    });
}

function InjectClasses(col, row, gridItem) {
    if (!grid[col] || !grid[col][row]) return;

    let newConnection = document.createElement("div");

    // ✅ Fixed: Use classList.add instead of classes.add
    grid[col][row].classes.forEach(classpart => {
        newConnection.classList.add(classpart);
    });

    gridItem.appendChild(newConnection);
}