var page_elements = {};

function record_log(text) {
    const div_logrow = document.createElement("div");
    div_logrow.className = "log-line";

    const div_logtick = document.createElement("div");
    div_logtick.className = "log-tick"
    div_logtick.innerHTML = "Day 69";
    div_logrow.append(div_logtick);

    const div_logmsg = document.createElement("div");
    div_logmsg.innerHTML = text;
    div_logmsg.className = "log-msg";
    div_logrow.append(div_logmsg);

    page_elements["div_log"].append(div_logrow);
}

document.addEventListener("DOMContentLoaded", function (ev) {
    page_elements["div_log"] = document.querySelector("#main-log");
    page_elements["div_name"] = document.querySelector("#side-seagull-name");
    page_elements["div_name_editor"] = document.querySelector("#side-seagull-name-editor");
    page_elements["lbl_name"] = document.querySelector("#lbl-seagull-name");
    page_elements["edt_name"] = document.querySelector("#edt-seagull-name");

    record_log("It works!");
});

function change_seagull_name() {
    page_elements["div_name"].style.display = "none";
    page_elements["div_name_editor"].style.display = "block";
}

function confirm_seagull_name() {
    const new_name = page_elements["edt_name"].value;
    page_elements["lbl_name"].innerHTML = new_name;

    page_elements["div_name"].style.display = "block";
    page_elements["div_name_editor"].style.display = "none";
}

function cancel_seagull_name() {
    page_elements["edt_name"].value = "";

    page_elements["div_name"].style.display = "block";
    page_elements["div_name_editor"].style.display = "none";
}