seagull-game/static/js/seagull.js

const sleep = ms => new Promise(r => setTimeout(r, ms)); // sleep(int ms)

var page_elements = {};

var gamestate = {};

const gamestate_default = {
    "tick": 1,
    "name": "Nameless"
};

function prepare_gamestate() {
    var gamestate_loaded = window.localStorage.getItem("gamestate");

    if (gamestate_loaded == null) { gamestate = structuredClone(gamestate_default); }
    else { gamestate = JSON.parse(gamestate_loaded); }
}

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 " + gamestate["tick"];
    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);
}

function save_game() {
    window.localStorage.setItem("gamestate", JSON.stringify(gamestate));
    record_log("Game saved.");
}

var tick_meter_running = true;

async function game_tick() {
    gamestate["tick"] += 1;
    page_elements["lbl_tick"].innerHTML = gamestate["tick"];
    var tickdata = await fetch("/tick")
    .then(res => {
        json = res.json()
        console.log(json)
        return json
    })
    .catch(e => { throw e; });
    console.log(JSON.stringify(tickdata));

    if (tickdata["code"] != 200) {
        console.error("Non-200 tick code: " + tickdata["code"]);
        return;
    }

    if (tickdata["event_type"] == 0) {
        //sleep(12000);
        //game_tick();
    } else if (tickdata["event_type"] == 1) {
        // Flavor event - no gameplay effect, but occasionally says something fun.
        record_log(tickdata["log"]);
        //await sleep(12000);
        //game_tick();
    }
}

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");
    page_elements["lbl_tick"] = document.querySelector("#main-day-counter");

    prepare_gamestate();

    record_log("It works!");
    page_elements["lbl_name"].innerHTML = gamestate["name"];
    page_elements["lbl_tick"].innerHTML = gamestate["tick"];

    const interval = setInterval(() => {
        if (tick_meter_running) { game_tick(); }
    }, 1200);
});

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;
    gamestate["name"] = new_name;
    save_game();

    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";
}