Devlog 5 - I Completed the Game Loop!

I added a losing screen and also added a backend for the API.

For the backend, I used Python with FastAPI because I used it before for a different project. All I needed to make was a proxy API for the API I used to get country data, so it didn’t take that long.

Devlog 4 - Correct Answers

So now, I added 2 of the things I said I was gonna fix in my previous devlog, a popup for when the user guesses the correct country, and filtering out duplicate hints.

Duplicate Hints

Filtering out duplicate hints was pretty easy, all I needed to do was make an array to store hints that were already used, USED_HINTS, and every time the user was given a hint, add the hint type, as defined here:

const HINT_TYPES = {
    "HARD": ["DRIVING-SIDE",         // HARD hints give away the least info
        "LANDLOCKED",
        "CONTINENT",
        "AREA",
        "G20",
        "CURRENCY"],
    "MEDIUM": [
        "BORDERS-3",
        "COUNTRY-FIRST-LETTER",
        "LANGUAGES",
        "POPULATION",
        "GOVERNMENT-TYPE",
        "CAPITAL-FIRST-LETTER"],
    "EASY": [                        // EASY hints give away the most info
        "FLAG-DESC",
        "CAPITAL",
        "ALL-BORDERS"]
}

Then, I added a line to the generate_hints() function to not include any hints in USED_HINTS in the possible hints, here is that updated function:

function generate_hints(country_name) {
    var generated = {}
    Object.entries(HINT_TYPES).forEach((difficulty) => {
        generated[difficulty[0]] = {}
        difficulty[1].forEach((hint_type) => {
            if (!USED_HINTS.includes(hint_type)) {
                generated[difficulty[0]][hint_type] = get_hint_text(country_name, hint_type)
            }
            else {
                // Hint already used so dont add it to possible hints
            }
        })
    })

    return generated;
}

With this, a hint already given cannot be given again, improving the user experience.

The Win Dialog

I also made a dialog appear when the user guessed the correct country, at first I was gonna use a <div> for this, but I found out about an element in HTML called <dialog> which made things much easier, instead of having to center the div on the screen, and then position it so it was above everything else, etc, the dialog already handled all of that for me. Plus, it came with a handy ::backdrop selector for CSS, which allowed me to give the background of it a cool blur effect with:

.win-dialog::backdrop {
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
}

I would’ve had to create a whole separate for the background if I had tried to do this with a div, so I’m glad I didn’t.

As for the design of it, I chose to stay consistent with the website’s design of mostly black with a blue accent color. I also added the country’s flag because I just thought it looked nice. What I ended up with is in the screenshots, and I like how it looks, but it took me an hour to style lol

Stuff I will (probably) add next devlog

1. A losing screen dialog

Obviously, because I have a winning dialog, I should also make a losing dialog for when the player has more than 6 attempts, I will probably just make it look like the win dialog, but maybe with a red accent colour.

2. A backend endpoint for my api!

So I also tried to get my project on GitHub, but then I realised my scripts.js file had a fetch() request which exposed my API key! Maybe after I make a losing screen, I will try to make a Netlify function or something so that I don’t give everyone my API key.

3. A better way to restart

Right now, the Play Again button in the win dialog just reloads the page, which I think is kind of a hacky way of doing it, I will probably make a restart() function which resets all the variables and stuff but it will be very time consuming, so I’ll just put it off till later.

Devlog 3 - FLAG-DESC

So today I fixed the bug from earlier where the flag description wasnt working, basically sometimes in the description it would use the official name of the country, for example instead of just Afghanistan (which is its common name) the description would say Islamic Emirate of Afghanistan (which is its official name) there are also other examples where the name used in the description was neither its official name nor the common name, but it was one of the alternate names given by the API, so I had to include those as well in my filter. In the end, I made this function:

function getSanitizedDescription(countryName) {
    const countryData = JSON.parse(localStorage.getItem("countryData"))[countryName];
    if (!countryData) return null;

    // Combine all names into a single array cuz description name format is inconsistently weird
    const names = [
        ...(countryData.names.alternates || []),
        countryData.names.official,
        countryData.names.common,
    ].filter(Boolean);

    let description = countryData.flag.description;

    for (const name of names) {
        description = description.replaceAll(name, "this country");
    }

    return description;
}

This works by firstly getting an array of all the names associated with the country provided in the API, and then testing the description against every single one of them until the country name is not in the description, and it returns the sanitized description.

Stuff I need to Fix

1. Not allowing duplicate countries/hints

Currently, if the user types the same country twice, the app allows them to, in theory I allow this (its not game breaking its just bad strategy) but I think it would be better if I didn’t let them. Whats more game-breaking, however, is duplicate hints, which are very annoying. I will probably fix this in the next devlog

2. Giving the user a message when they guess the right country

Currently, the app just assumes you didn’t guess the correct country and never tells you if you guessed it right, which is not good game design! I will probably fix Bug #1 first before tackling this, as I’ll need to make and style a whole new popup for when the user wins, and program a restart, etc.

Anyways, see you next devlog!

Devlog 2 - Hints!

So over the last 2 days I added hints to the website, I did it by firstly making an object to store the different types of hints there can be, eg. BORDERS-3 would be 3 countries that this country borders, LANGUAGES are the languages this country speaks, etc. I grouped them by HARD, MEDIUM and EASY so that you get more obvious hints as you go on (easy is most obvious, hard is least obvious) I also made a massive 150 line function: get_hint_text(country_name, hint_type)
which gets the hint text for a hint type and a country using a switch for every hint type (there’s probably a better way of doing this but I cba lol) Using this, I made another function:
add_hint(country_name, hint_number, hint_type)
which i can use to give the user a hint in JS.

Issues Encountered

There was largely no major issues - apart from one hint_type: FLAG-DESC. FLAG-DESC is simply a description of the flag of the country provided by the REST Countries API, however, the descriptions provided by the API have the country name in them, eg.
The flag of Canada is composed of a red vertical band on the …
which makes it pretty obvious what the answer is! To fix this, I initially simply replaced the name of the country to ‘this country’, which worked fine, unless for exceptions like DRC, where if I did that the FLAG-DESC would be:
The flag of the Democratic Republic of the Congo has a sky-blue field with a …
as the name of that country in the API is DRC.

Similar things also happen with Afghanistan and Congo, where the name given in the description is different than that of the API.

Targets for next Devlog:

• Fix the FLAG-DESC bug
• Give the user a hint every guess

Devlog 1 - The Start

I made the UI with HTML and CSS, and made the Guess button add countries to the guessed list, which I’m pretty proud of for my first real web project. Tomorrow, I’ll probably add hints and polish the code a little more because its kinda messy.

Cya tomorrow!