capitals_quiz/src/game.js

"use strict";

const ALL_REGIONS = "All Regions";

const answersHTML = document.getElementById("answers");
const answerAHTML = document.getElementById("answer_a");
const answerBHTML = document.getElementById("answer_b");
const answerCHTML = document.getElementById("answer_c");
const answerDHTML = document.getElementById("answer_d");
const bodyHTML = document.getElementsByTagName("body")[0]
const scoreHTML = document.getElementById("score");
const settingsHTML = document.getElementById("settings");
const selectorHTML = document.getElementById("region_selector");
const selectorResultsHTML = document.getElementById("selector_results");
const questionHTML = document.getElementById("question");

const capitals_list = Object.values(countries).map(country => country.capital);
const regionList = [...new Set(Object.values(countries).map(country => country.region))]
    .concat([...new Set(Object.values(countries).map(country => country.subregion))])
    .concat([ALL_REGIONS])
    .sort();
const date = new Date();

var questionList, selectorMatches, state;


// set up game
function init() {
    // generate question list
    var regex;
    if (selectorHTML.value == "" || selectorHTML.value == ALL_REGIONS) regex = new RegExp(".*");
    else regex = new RegExp(selectorHTML.value, "gi");

    questionList = Object.keys(countries)
        .filter(c => countries[c].region.match(regex) || countries[c].subregion.match(regex))
        .sort(() => Math.random()-0.5);

    // set up state variable
    state.endTime = 0;
    state.finishedGame = false;
    state.startedGame = true;
    state.maxScore = questionList.length;
    state.score = 0;
    state.startTime = date.getTime();

    // show and hide appropriate elements
    answersHTML.style.display = "";
    settingsHTML.style.display = "none";
    questionHTML.onclick = deinit;

    // start game
    updateState();
    updateScreen();
}


// stop game, go back to start screen
function deinit() {
    answersHTML.style.display = "none";
    settingsHTML.style.display = "";
    questionHTML.innerHTML = "tap here or press enter to start";
    scoreHTML.innerHTML = "score";
    questionHTML.onclick = init;

    questionList = null;
    selectorMatches = []
    state = {
        "score": 0,
        "maxScore": 0,
        "startTime": 0,
        "endTime": 0,
        "finishedGame": true,
        "startedGame": false,
    };
}


function updateState() {
    // check if game is over
    if (questionList.length == 0) { state.finishedGame = true; return; }

    // set up new question
    var newQuestion = questionList.pop();
    var options = []
    while (options.length < 4) {
        var c = capitals_list[Math.floor(Math.random()*capitals_list.length)];
        if (c !== countries[newQuestion].capital && !options.includes(c)){
            options.push(c);
        }
    }
    options[Math.floor(Math.random()*4)] = countries[newQuestion].capital;

    state.question = newQuestion;
    state.options = options;
    state.answer = countries[newQuestion].capital;
}


// update HTML elements to reflect values of state
function updateScreen(){
    scoreHTML.innerHTML = state.score + "/" + state.maxScore;
    if (state.finishedGame) {
        questionHTML.innerHTML = "woooooooo!! tap here or press enter to restart";
        answers.style.display = "none";
        return;
    }
    answerAHTML.getElementsByClassName("text")[0].innerHTML = state.options[0];
    answerBHTML.getElementsByClassName("text")[0].innerHTML = state.options[1];
    answerCHTML.getElementsByClassName("text")[0].innerHTML = state.options[2];
    answerDHTML.getElementsByClassName("text")[0].innerHTML = state.options[3];
    questionHTML.innerHTML = `what is the capital of <span id="questionCountry">${state.question}</span>?`;
}


function processClick(answer) {
    if (state.finishedGame) return;
    // check if answer to previous question  was correct
    var isAnswerCorrect = state.options[answer] == state.answer
    state.score += isAnswerCorrect ? 1 : 0;

    // change background color based on if answer was correct
    bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect")
    setTimeout(() => bodyHTML.classList = [], 500)

    updateState();
    updateScreen();
}


function setSelectorMatches(value){
    const regex = new RegExp(selectorHTML.value, "gi");
    selectorMatches = regionList
            .filter(region => region.match(regex))
    displaySelectorMatches();
}


function displaySelectorMatches(){
    selectorResultsHTML.innerHTML = selectorMatches
        .map(region => {
            return `<div class="selector_result" onclick="setSelectorValue('${region}'); init()"> ${region} </div>`
        })
        .sort()
        .join("");
}


function setSelectorValue(value) {
    selectorHTML.value = value;
}


answerAHTML.addEventListener("click", () => processClick(0));
answerBHTML.addEventListener("click", () => processClick(1));
answerCHTML.addEventListener("click", () => processClick(2));
answerDHTML.addEventListener("click", () => processClick(3));
document.addEventListener("keyup", e => {
    if (e.code == "Digit1") processClick(0);
    if (e.code == "Digit2") processClick(1);
    if (e.code == "Digit3") processClick(2);
    if (e.code == "Digit4") processClick(3);
    if (e.code == "Enter" && settingsHTML.style.display === "none" && state.finishedGame) {
        deinit();
        return;
    }
    if (e.code == "Enter" && !state.startedGame) init();
});

selectorHTML.addEventListener("change", setSelectorMatches);
selectorHTML.addEventListener("keyup", e => {
    var topResult = document.getElementsByClassName("selector_result")[0]
    if (e.code == "Enter" && selectorHTML.value === "") { init(); return; }
    if (e.code == "Enter" && selectorHTML.value === topResult.innerHTML.trim()) { init(); return; }
    if (e.code == "Enter") selectorHTML.value = topResult.innerHTML.trim();

    setSelectorMatches();
});


deinit();
selectorHTML.focus();
setSelectorMatches();