Devlog 2

So far I have now completed the main job of the competition tab, which is
to handle adding custom matches and teams. One of the major issues I came along
was that the UI was ugly, the modals were bland, and I wanted to add more depth, so I added that highlight in the middle which lifts the interactable content up. I had issues with the height of the modal being either too tall or too short depending on the device screen. I solved this one by making a simple new function that helps decide if the modal needs to be bumped up in height or not

/**
 * Returns whether the current screen height is "akward", <= 700px for phones/tablets, and <= 899px for desktop
 *
 * @returns true | false
 */
export function useIsAkwardHeight(): true | false {
    if (useScreenType() != "desktop") {
        const isAkwardHeight = useMediaQuery({ query: "(max-height: 700px)" });
        return isAkwardHeight;
    } else {
        const isAkwardHeight = useMediaQuery({ query: "(max-height: 899px)" });
        return isAkwardHeight;
    }
}

An example of it being used:

<div
    className="desktop-warningpopup"
    id="avoidwarningpopupheight"
    style={
        specifyCustomCountry
            ? { height: useIsAkwardHeight() ? "55vh" : "40vh" }
            : { height: useIsAkwardHeight() ? "40vh" : "25vh" }
    }
>

One big thing I have done in the past bit of time (I did not know that anything after 10 hours is voided, meaning I just wasted like 5 hours 😭) is the organization of a lot of the code.

I also organized a lot of the CSS into barrel files so that the CSS files are not thousands of lines long anymore.

I have also started work on the prescouting tab (finally) and with that I have got the UI for the progress bar of teams scouted, and also the table of teams.

One big thing I have now put in this project is persisting settings, and one big settings function.

export const useSettings = create(
    persist<{
        isLightMode: boolean;
        flipTheme: () => void;

        isCustomCountry: boolean;
        flipCustomCountry: () => void;
    }>(
        (set) => ({
            isLightMode: true,

            flipTheme: () => {
                set((state) => ({
                    isLightMode: !state.isLightMode,
                }));
            },

            isCustomCountry: false,

            flipCustomCountry: () => {
                set((state) => ({
                    isCustomCountry: !state.isCustomCountry,
                }));
            },
        }),
        { name: "settings" },
    ),
);