Grid Builder.js

function permuteDirections(col, row) {

    let entry = jsonData[col]?.[row]; // Avoid errors if jsonData[col][row] is undefined
    if (!entry || !entry.connections) return [0, [], []];

    let conn = entry.connections;

    let directionCount = 0;
    let directionsDetected = [];
    let directionPairs = [];

    for (let [direction, value] of Object.entries(conn)) {
        if (directions.includes(direction)) {
            directionCount++;
            directionsDetected.push(direction);
        }
    }

    console.log(entry.text, directionCount, directionsDetected);

    if (directionCount >= 2) {
        for (let i = 0; i < directionsDetected.length - 1; i++) {
            for (let j = i + 1; j < directionsDetected.length; j++) {
                directionPairs.push(`${directionsDetected[i]}-${directionsDetected[j]}`);
            }
        }
    }

    return [directionCount, directionsDetected, directionPairs];
}

function createArray(columns, rows, defaultValue = false, pad = true) {
    if (pad === true) {
        rows += 1;
        columns += 1;
    }
    return Array.from({ length: rows }, () => Array(columns).fill(defaultValue));
}

function gridSetup() {
    jsonData = loadJsonSync(
        `http://${window.location.hostname}/jpsys/Shared/scripts/json/menu/${System}.json`
    );

    grid = {};
    mainGrid = document.getElementById("main-grid");

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

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

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

    grid = createArray(totalColumns, maxRows, false);

    console.log(grid);
    console.log(`Menu Span - Columns: ${totalColumns}, Rows: ${maxRows}`);

    for (let col = 1; col <= totalColumns; col++) {
        for (let row = 1; row <= maxRows; row++) {

            if (row >= 1 && row <= columnRowCounts[col] && col >= 1 && col <= totalColumns) {

                if (jsonData[col] && jsonData[col][row] !== undefined) {

                    if (!grid[col]) {
                        grid[col] = {};
                    }
                    grid[col][row] = jsonData[col][row];
                }
            }
            grid[col][row].id = `grid-item-${col}-${row}`;
            console.log(`Processing Column: ${col}, Row: ${row}`);
            console.log(grid[col][row]);
        }
    }

    // Ensure all classes are added first before injecting grid items
    for (let row = 1; row <= maxRows; row++) {
        for (let col = 1; col <= totalColumns; col++) {
            FirstPassLayer1(col, row);
            FirstPassLayer2(col, row);
        }
    }

    for (let row = 1; row <= maxRows; row++) {
        for (let col = 1; col <= totalColumns; col++) {
            InjectClasses(col, row);
        }
    }

    // ✅ Ensure layout fixes are applied **after** grid items are appended
    setTimeout(fixLayout, 100);
}

function FirstPassLayer1(col, row) {

    if (grid === undefined)
    {
        grid = [ ];
    }

    if (grid[col] === undefined)
    {
        grid[col] = [ ];
    }

    if (grid[col][row] === undefined)
    {
        grid[col][row] = {text: false, classes: []};
    }

    if (!jsonData[col] || jsonData[col][row] === undefined)
    {
        grid[col][row] = {text: false, classes: []};

    }else {
        grid[col][row] = jsonData[col][row];
    }

    if (grid[col][row] === false)
    {
        grid[col][row] = {text: false, classes: []};

    }

    if (grid[col][row].classes === undefined) {
        grid[col][row].classes = [];
    }

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

    grid[col][row].id = `grid-item-${col}-${row}`;
}

function FirstPassLayer2(col, row) {

    let entry = jsonData[col][row];
    let conn = entry.connections;

    if (!conn) return;

    let
    [
        directionCount,
        directionsDetected,
        directionBiets
    ] = permuteDirections ( col, row );

    if (directionCount >= 1) {
        directionsDetected.forEach(direction => {
            if (!conn[direction]) return;
            grid[col][row].classes.push("connection");
            grid[col][row].classes.push(`connection-${direction}`);
        });
    }

    if (directionCount >= 2) {
        if (conn.type === "t") {
            directionsDetected.forEach(direction => {
                if (!conn[direction]) return;

                if (['up'].includes(direction)) {
                    let faceSwitch = { '-1': 'left', '0': false, '1': 'right' };
                    let face = faceSwitch[Math.sign(conn[direction] - col).toString()];

                    if (face !== false) {
                        grid[col][row].classes.push("connection");
                        grid[col][row].classes.push(`connection-${conn.type}`);
                        grid[col][row].classes.push(`connection-${conn.type}-${face}`);
                    } else {
                        grid[col][row].classes.push("connection");
                        grid[col][row].classes.push(`connection-${direction}`);
                    }
                }
            });
        }
    }
}

function InjectClasses(col, row) {

    grid[col][row].id = `grid-item-${col}-${row}`;

    let entry = grid[col][row];

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

    // gridItem.classList.add("grid-item");
    gridItem.id = entry.id;

    // ✅ Corrected grid-row and grid-column assignment
    gridItem.style.gridRow = `${row}`;
    gridItem.style.gridColumn = `${col}`;

    if (entry.text !== false)
    {
        gridItem.innerHTML = entry.text;
    }else
    {
        grid[col][row].styles = [
            "border: 2px solid rgba(0,0,0,0.0)",
            "padding: 5px",
            "background-color: rgba(0,0,0,0.0)",
            "text-align: center",
            "font-size: 14px",
            "display: flex",
            "align-items: center",
            "justify-content: center",
            "width: 70px",
            "height: 30px",
            "position: relative",
            "z-index: 6"
        ];

        grid[col][row].styles.forEach(stl => gridItem.style.cssText += stl + "; ");
    }

    grid[col][row].classes.forEach(cls => gridItem.classList.add(cls));

    let mainGrid = document.getElementById("main-grid");
    mainGrid.appendChild(gridItem);
}

function PageSetup() {
    const SystemReferenceUrl = `http://${window.location.hostname}/jpsys/Shared/scripts/php/sysref.php?files`;
    Files = loadJsonSync(SystemReferenceUrl);

    const SystemDefaultsUrl = `http://${window.location.hostname}/jpsys/Shared/scripts/json/Defaults.json`;
    Defaults = loadJsonSync(SystemDefaultsUrl);

    globalName = Defaults['environment'];
    System = urlParams.get('sys') ?? Defaults['sys'];

    if (!Files.includes(System)) {
        System = Defaults['sys'];
    }

    menuName = `${globalName} - ${System}`;
    console.log("Document Title:", menuName);
    document.title = menuName;

    titleElement = document.querySelector(".container .title");
    if (titleElement) {
        titleElement.textContent = menuName.toUpperCase();
    }

    gridSetup();
}

function fixLayout() {
    let grid = document.querySelector(".grid");

    if (!grid) {
        console.error("Grid element not found!");
        return;
    }

    // ✅ Ensure grid has a proper width before applying layout
    grid.style.display = "grid";
    grid.style.width = `calc(${totalColumns} * (70px + 10px * 2))`;
    grid.style.gridTemplateColumns = `repeat(${totalColumns}, calc(70px + 10px * 2))`;
    grid.style.gridTemplateRows = `repeat(${maxRows}, auto)`;

    document.querySelectorAll(".grid-item").forEach((item, index) => {
        let col = (index % totalColumns) + 1;
        let row = Math.floor(index / totalColumns) + 1;

        item.style.gridColumn = col;
        item.style.gridRow = row;
    });
}

PageSetup();