Improves LFM layout

lfm.js

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2025-05-17
// @description  try to take over the world!
// @author       You
// @match        https://lowfuelmotorsport.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=lowfuelmotorsport.com
// @grant        none
// ==/UserScript==

(function () {
    "use strict";

    const IDLE_PAGE = 'lowfuelmotorsport.com/assets/idle';

    const css = `
        #adwraptopbanner,
        .dashboard-upper-wrapper {
            display: none !important;
        }

        .toolbar-container {
            flex-direction: column-reverse !important;
        }

        elastic-seasonsv2 .wrapper {
            display: grid !important;
            grid-template-areas: "a a" "b c" "d d" "e e";

            & > div:nth-child(1) {
                grid-area: a;
                margin-bottom: 0 !important;
            }

            & > div:nth-child(3) {
                grid-area: b;
                height: 40px !important;
                margin-right: 30px !important;
                width: 400px !important;

                h4 {
                    padding: 0 !important;
                    margin: 0 !important;
                }
            }

            & > div:nth-child(2) {
                grid-area: c;
                margin-left: 30px !important;

                & > div {
                    height: 40px !important;
                    border-radius: 10px !important;
                    overflow: hidden !important;

                    .game img {
                        height: 20px !important;
                    }
                }
            }

            & > div:nth-child(4) {
                grid-area: d;
            }

            & > div:nth-child(5) {
                grid-area: e;

                div.dlc {
                    display: block !important;

                    div:first-child {
                        margin-bottom: 10px !important;
                    }
                }

                mat-nav-list[role="navigation"] {
                    margin: 40px 0;

                    & ~ a {
                        margin-bottom: 20px;
                    }
                }
            }

            h1, h2 {
                width: 100% !important;
                background: rgb(30, 30, 30) !important;
                border-radius: 10px !important;
                padding: 10px;
                box-sizing: border-box;
            }

            div.series-chooser {
                order: 2;
                display: grid !important;
                row-gap: 20px !important;
                column-gap: 20px !important;
                grid-template-columns: repeat(auto-fill, 295px) !important;
                margin-bottom: 80px !important;
            }
        }

        div.background-wrapper {
            background: rgb(20, 20, 20) !important;

            div {
                display: none !important;
            }
        }

        .info-wrapper-h4-h5 {
            h4 {
                font-size: 18px;
            }

            h5 {
                padding: 0;
                margin: 0;
                color: rgb(90, 90, 90);
            }
        }
    `;

    const preventHistoryMethod = (method) => {
        const original = history[method];
        history[method] = function () {
            if (arguments[2] && arguments[2].includes(IDLE_PAGE)) {
                return;
            }

            return original.apply(this, arguments);
        };
    }

    const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

    const waitForElement = async (selector) => {
        while (document.querySelector(selector) === null) {
            await sleep(100);
        }
        return document.querySelector(selector);
    };

    let called = false;

    window.addEventListener("load", () => {
        if (called) return;

        called = true;
        document.body.appendChild(document.createElement("style")).innerHTML = css;

        waitForElement("elastic-livestreams").then((element) => {
            console.log("Found livestreams element");
            element.remove();
        });

        waitForElement("elastic-seasonsv2 .wrapper").then((element) => {
            console.log("Found seasons element");

            element.querySelectorAll("h1, h2").forEach((el) => {
                el.parentElement.style.width = "100%";
                el.parentElement.style.maxWidth = "100%";
            });

            const info = element.querySelector(
                "div.game-chooser-row > div:last-child"
            );
            if (info) {
                info.style.textAlign = "auto";
                info.classList.add("info-wrapper-h4-h5");

                const h4 = info.querySelector("h4");
                if (h4) {
                    const parts = h4.innerText.trim().split(" // ");
                    h4.innerText = parts[0];
                    info.appendChild(document.createElement("h5")).innerText = parts[1];
                } else {
                    console.log("No h4 found in info");
                }
            } else {
                console.log("No info found");
            }
        });

        /** Prevent redirect to idle page */
        preventHistoryMethod('pushState');
        preventHistoryMethod('replaceState');
        window.addEventListener('beforeunload', function (event) {
            if (window.location.href.includes(IDLE_PAGE)) {
                event.preventDefault();
                event.returnValue = '';
                return '';
            }
        });
    });
})();