seagull-game/static/js/seagull.js

const ver_numeric = 0;
const ver_string = "pre alpha";

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

var page_elements = {};

var gamestate = {};
var ticks_since_last_save = 0;

const gamestate_default = {
    "statever": "1",
    "tick": 1,
    "name": "Nameless",
    "level": 1,
    "autosave": 35
};

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

    if (gamestate_loaded == null) {
        record_log("Welcome to Seagull Game! We haven't found a save in your browser storage, so we're starting a new game!");
        gamestate = structuredClone(gamestate_default);
    }
    else {
        gamestate = JSON.parse(gamestate_loaded);
        record_log("Welcome back! Game 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;
    ticks_since_last_save += 1;
    // temp
    page_elements["lbl_colony"].innerHTML = ticks_since_last_save;
    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();
    }

    // sanity check
    if (!("autosave" in gamestate)) {
        gamestate["autosave"] = 35;
    }
    if (ticks_since_last_save % gamestate["autosave"] == 0 && ticks_since_last_save != 0) {
        save_game();
        ticks_since_last_save = 0;
    }
}

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["lbl_colony"] = document.querySelector("#lbl-seagull-colony");
    page_elements["edt_name"] = document.querySelector("#edt-seagull-name");
    page_elements["lbl_tick"] = document.querySelector("#main-day-counter");

    prepare_gamestate();

    record_log("seagull game ver. " + ver_string);
    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";
}