Devlog 7

I have now finished the team prescout page for both phones and desktop, this is where scouts can fill in those questions from earlier. I didn’t really run into much issues, but I implemented a special system to make sure that this fill in works with my current question structure.

The original issue

The original issue with this system is that if a question is edited, it keeps its question id, and if a user edits the question type, that means that what was once a multiple choice, can now be a note, which would completely mess it up if a user opens a team to check on the data. The solution? If a user enters a team page with an invalid question, the question will be reset to its default, so a string will be reset to “”, a number input will be reset to 0, etc.

Now this means the prescout page is pretty much completely done, and I now have to start on the match scouting page.

Devlog 6

I have now finished the phone UI for the prescouting page, meaning the last step of this page is officially complete. The next tasks are the individual team pages and the start of the match scouting page.

Devlog 5

I have now finished the following tasks:

• Ability to edit question extra fields (e.g. min/max of a slider question)

• Ability to delete a section

• Ability to add a section

• Ability to edit a section

• Ability to add a question

The tasks I have left related to the question management system are:

• Translation keys

• Create the phone UI

I also hit a small hiccup along the way of adding these features where I discovered due to my localstorage structure, whenever a competition is switched, the questions are all deleted (now fixed by not just using a blank localstorage.clear())

New Code

/**
 * Creates the base skeleton structure for localstorage
 *
 * @param {boolean} force - Force overwrite of existing localstorage or not
 */
export function createSkeleton(force: boolean) {
    const existing = localStorage.getItem("data");

    if (existing && !force) {
        return;
    }

    let setPrescout = {
        structure: {},
        sections: {
            "0": {
                title: "Section 1",
                headersize: 1,
                questions: [],
                index: 0,
            },
        },
    };

    if (existing) {
        const parsed = JSON.parse(existing);

        setPrescout.structure = parsed.prescout.structure;
        setPrescout.sections = parsed.prescout.sections;
    }

    const skeleton: LocalStorageData = {
        compkey: "",
        custom: false,
        prescout: {
            structure: setPrescout.structure,
            sections: setPrescout.sections,
            teams: {},
        },
        match: {},
    };

    localStorage.setItem("data", JSON.stringify(skeleton));
    resetAllStates();
}

Devlog 4

I have spent almost 8 hours working on one feature and one feature alone. That feature is this drag and drop organizer for questions. This lets the user drag around the order of questions to rearrange them, and also drag around the order of sections.

The reason this took so long was because the original library I was using (dnd-kit) for drag and drop made it a complete nightmare to try and do anything, it did not have a way to tell what items were where, as it would literally just change the HTML rather than give any data. Once I switched to hello pangea dnd, it all started fitting together. It actually gave me a way to see what changes occurred, save them, and then that updates the UI.

Now my next tasks are:

• Ability to edit question extra fields (e.g. min/max of a slider question)
• Ability to delete a section
• Ability to add a section
• Ability to edit a section
• Ability to add a question
• Translation keys
• Create the phone UI

Devlog 3

I have learned my mistake, so now I will be aiming for a devlog every 3-4 hours instead.

I have now made it so that the progress bar for teams scouted actually shows the real progress so far of scouting, and the lights actually react to that team’s scouting progress. (I have not made the system to add questions yet, so technically all teams are fully scouted (0/0 questions answered)).

I have also started work on the question organization menu. It will be a drag and drop menu to let users arrange and edit questions how they want, with a button at the bottom to edit questions.

The images attached below show the progress bar and drag and drop menu (ignore the dummy data put for now, I will replace that with actual data later), and the dropdown menu, which will be for selecting question type soon. I have also attached a very rough sketch of what the draggable question and section divs themselves will look like. (the blue and red is just to indicate different colors, it is not the final color)

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" },
    ),
);

Devlog 1

This is my first devlog here, so I will explain a little bit about what this project is. Scoutmaster is a First Tech Challenge scouting tool designed to make scouting at competitions easier for teams. It has prescouting, which is basically scouting teams’ abilities before matches start to see what features they may have that might not be seen in matches, and then match scouting which lets scouts figure out exaclty how many points on average each team scores on their own, to make alliance selection at the end much easier.

The original Scoutmaster did that, but in a very primitive way, the UI was not that good, and there were many bugs. This prompted me to rebuild it from the ground up, and fix those bugs along the way with what I have learned since then.

So far, I have put in about 12 hours into this project. Within this time, I have managed to get a start on:

• Landing Page for both Desktop and Phone
• Dashboard for Desktop and Phone
• Initial API structure

{
    "compkey": "CAONBOQ",
    "custom": false,
    "prescout": {
        "structure": {
            "numOfQuestions": 6,
            // the type of questions
            "questionorder": ["lt", "st", "cb", "r", "auto", "picture"],
        },
        "teams": {
            "1": {
                // for images, the image name will be Scouting team number - picof Scouted team number, so XXXXX-picof-XXXXX
                "data": [
                    "lorem ipsum",
                    "situm dilor",
                    true,
                    213,
                    "IMAGINEANSVGPATHRIGHTHERE",
                    "16423-picof1.png",
                ],
                "matchesIn": [1, 5, 67],
            },
            "2": {},
            "3": {},
        },
    },
    "matchscout": {
        "Q1": {
            "highlighted": [true, true, false, true],
            "teams": [1234, 1222, 1223, 1313],
            "red1": [45, 45, 45, 45],
            "red2": [55, 55, 55, 55],
            "blue1": [555, 555, 555, 555],
            "blue2": [1, 1, 1, 1],
        },
        "Q2": {
            "highlighted": [true, true, false, true],
            "teams": [1234, 1222, 1223, 1313],
            "red1": [45, 45, 45, 45],
            "red2": [55, 55, 55, 55],
            "blue1": [555, 555, 555, 555],
            "blue2": [1, 1, 1, 1],
        },
    },
}

This is the initial API structure of what this tool will be using. This is designed to allow for both official competitions and custom ones, a feature not previously included in the original Scoutmaster. The plan now is to continue making the dashboard, and then afterwards, once the full dashboard works with localstorage, begin working on the backend to actually make it synchronize across devices.