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.