function list_available_games() {
    let game_list_panel = document.getElementById("game_list_panel");

    let req = {
        action: "get_available_games"
    }
    request(req).then(resp => {
        let games_by_groups = JSON.parse(resp);
        games_by_groups.forEach((game_collection) => {
            let group_box = document.createElement("section");
            group_box.classList.add("group-box");
            let group_box_caption_container = document.createElement("span");
            group_box_caption_container.classList.add("group-box-caption-container");
            let group_box_caption = document.createElement("span");
            group_box_caption.classList.add("group-box-caption");
            group_box_caption.innerHTML = game_collection["groupname"];
            group_box_caption_container.append(group_box_caption);
            let group_box_inner = document.createElement("section");
            group_box_inner.classList.add("group-box-inner");
            group_box.append(group_box_caption_container, group_box_inner);

            game_collection["games"].forEach((game) => {
                let game_box = document.createElement("section");
                game_box.classList.add("game-box");
                game_box.addEventListener("click", () => {
                    start_or_continue_test(game["_id"]);
                });

                let game_box_caption = document.createElement("section");
                game_box_caption.classList.add("game-box-caption");
                game_box_caption.innerHTML = game["name"];

                let list_results_btn = document.createElement("section");
                list_results_btn.classList.add("list-results-btn", "material", "btn");
                list_results_btn.addEventListener("click", (event) => {
                    event.stopPropagation();
                    list_corresponding_results(game["_id"]);
                });
                list_results_btn.innerHTML = "&#xef3e";

                game_box.append(game_box_caption, list_results_btn);

                group_box_inner.append(game_box);
            });

            game_list_panel.appendChild(group_box);
        });
    });
}

function start_or_continue_test(gameid) {
    let req = {
        action: "start_or_continue_test",
        gameid: gameid
    }
    request(req).then(resp => {
        if (resp.length > 0) // response is non-zero
        {
            open_test(resp);
        }
    });
}

function open_test(testid) {
    window.open("testground.php?testid=" + testid, "_new");
}

function list_corresponding_results(gameid) {
    let results_overview_display = document.getElementById("results_overview_display");
    results_overview_display.innerHTML = "";

    let req = {
        action: "get_results_overview",
        gameid: gameid
    };
    request(req).then(resp => {
        let results = JSON.parse(resp);
        let n = results.length;
        if (n === 0) { // don't continue with processing an empty array
            return;
        }
        results.sort((a,b) => {return Number(b["testid"]) - Number(a["testid"])}); // sort records by ID
        results.forEach((record) => {
           let test_summary_record = document.createElement("section");
           test_summary_record.classList.add("test-summary-record");
           test_summary_record.addEventListener("click", () => {
              open_test(record["testid"]);
           });

           let sequence_number_sec = document.createElement("section");
           sequence_number_sec.classList.add("summary-sequence-number");
           sequence_number_sec.innerText = "#" + n;
           let duration_sec = document.createElement("section");
           duration_sec.classList.add("summary-duration");
           let start_time = unix_time_to_human_readable(record["start_time"]);
           let end_time = unix_time_to_human_readable(record["end_time"]);
           duration_sec.innerHTML = `${start_time}-<br>${end_time}<br>${record["correct_answer_n"]}/${record["challenge_n"]}`;

           let percentage = document.createElement("section");
           percentage.classList.add("summary-percentage");
           let r = Math.floor((record["correct_answer_n"] / record["challenge_n"]) * 100);
           percentage.innerHTML = `${r}%`;

           test_summary_record.append(sequence_number_sec, duration_sec, percentage);
           results_overview_display.appendChild(test_summary_record);

           n--;
        });
        show("results_window")
    });
}