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",
    "class": "Seaglet",
    "level": 1,
    "shinies": 0,
    "colony": 1,
    "food": 0,
    "autosave": 35,
    "story_beat": 0,
    "xp": 0,
    "xp_next": 50,
    "enc_human": "pause",
    "enc_seagull": "pause"
};

var bool_log_alt = false
function record_log(text) {
    const div_logrow = document.createElement("div");
    if (bool_log_alt) { div_logrow.className = "log-line"; }
    else { div_logrow.className = "log-line-alt"; }
    bool_log_alt = !bool_log_alt;

    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 record_log_with_choices() {
    const div_logrow = document.createElement("div");
    if (bool_log_alt) { div_logrow.className = "log-line"; }
    else { div_logrow.className = "log-line-alt"; }
    bool_log_alt = !bool_log_alt;

    const div_logtick = document.createElement("div");
    div_logtick.className = "log-tick"
    div_logtick.innerHTML = "Day " + gamestate["tick"];
    div_logrow.append(div_logtick);

    const div_logdata = document.createElement("div");

    const div_logmsg = document.createElement("div");
    div_logmsg.innerHTML = arguments[0];
    div_logmsg.className = "log-msg";
    div_logdata.append(div_logmsg);

    const div_logactions = document.createElement("div");
    div_logactions.className = "log-button-row";
    
    for (var i = 1; i < arguments.length; i += 2) {
        console.log(i)
        var label = arguments[i];
        var callback = arguments[i+1];

        var btn_action = document.createElement("button");
        btn_action.innerHTML = label;
        btn_action.setAttribute("onclick", callback + "; tick_meter_running = true;");
        div_logactions.append(btn_action);
    }
    div_logdata.append(div_logactions);

    div_logrow.append(div_logdata);
    page_elements["div_log"].append(div_logrow);
    tick_meter_running = false;
}

function update_ui() {
    page_elements["lbl_name"].innerHTML = gamestate["name"];
    page_elements["lbl_tick"].innerHTML = gamestate["tick"];
    page_elements["lbl_colony"].innerHTML = gamestate["colony"];
    page_elements["lbl_shinies"].innerHTML = gamestate["shinies"];
    page_elements["lbl_food"].innerHTML = gamestate["food"];
    page_elements["lbl_xp"].innerHTML = gamestate["xp"];
    page_elements["lbl_xp_next"].innerHTML = gamestate["xp_next"];
}

var dev_toolbox_open = false;
function dev_toolbox(open) {
    if (open != dev_toolbox_open) {
        if (open) {
            var div_toolbox = document.createElement("div");
            page_elements["div_toolbox"] = div_toolbox;
            div_toolbox.setAttribute("id", "dev_toolbox");
            fetch("/dev/get-toolbox")
            .then((response) => response.text())
            .then((resp) => {div_toolbox.innerHTML = resp})
            page_elements["div_sidebar"].appendChild(div_toolbox);
        }
        else {
            var div_toolbox = page_elements["div_toolbox"];
            page_elements["div_sidebar"].removeChild(div_toolbox);
            div_toolbox.remove()
            delete page_elements["div_toolbox"];
        }
    }

    dev_toolbox_open = open;
}

async function steal_resource(resource, amount, items) {
    var stealdata = await fetch("/act/steal/" + resource, {method: "POST", body: JSON.stringify({gamestate: gamestate})})
    .then(res => { return res.json(); })
    .catch(e => { throw e; });

    if (stealdata["success"]) {
        gamestate[resource] += amount;
        record_log("Stole " + resource + " from a human: " + items.join(", "));
    }
    else { record_log("Didn't steal " + resource + " from a human"); }
}

async function game_tick() {
    gamestate["tick"] += 1;
    ticks_since_last_save += 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) {
        // pass
    } else if (tickdata["event_type"] == 1) {
        // Flavor event - no gameplay effect, but occasionally says something fun.
        record_log(tickdata["log"]);
    } else if (tickdata["event_type"] == 10) { // ENCHUMAN
        var total_food = 0;
        var food_descs = [];
        var total_shinies = 0;
        var shinies_descs = [];

        switch (page_elements["menu_enc_human"].value) {
            case "pause":
                tickdata.items.food.forEach((item) => {
                    total_food += item["amount"];
                    food_descs.push(item["desc"]);
                })
                tickdata.items.shinies.forEach((item) => {
                    total_shinies += item["amount"];
                    shinies_descs.push(item["desc"]);
                })
                var logstring = "You have encountered a human. It is carrying these resources:\n\n"
                logstring += "<ol>\n"
                if (total_food > 0) {
                    logstring += "<li><b>" + total_food + " food:</b> " + food_descs.join(", ") + "</li>\n";
                }
                if (total_shinies > 0) {
                    logstring += "<li><b>" + total_shinies + " shinies:</b> " + shinies_descs.join(", ") + "</li>\n";
                }
                logstring += "</ol>\nWhat would you like to do?";

                record_log_with_choices(logstring, 
                    "Steal food", `steal_resource('food', ${total_food}, ${JSON.stringify(food_descs)})`,
                    "Steal shinies", `steal_resource('shinies', ${total_shinies}, ${JSON.stringify(shinies_descs)})`
                )

                break;
            case "steal-food":
                tickdata.items.food.forEach((item) => {
                    total_food += item["amount"];
                    food_descs.push(item["desc"]);
                })
                steal_resource("food", total_food, food_descs);
                break;
            case "steal-shinies":
                tickdata.items.shinies.forEach((item) => {
                    total_shinies += item["amount"];
                    shinies_descs.push(item["desc"]);
                })
                steal_resource("shinies", total_shinies, shinies_descs);
                break;
            default:
                console.error("undefined action " + page_elements["menu_enc_human"]);
                break;
        }
    } 

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

    update_ui();
}

var start_event = "";
var target = null;
if (desktop_mode) {
    // pywebview's native JS is nerfed in a few places and needs the additional python API
    // which gets loaded after initial DOM via injections
    start_event = "pywebviewready";
    target = window;
}
else {
    // in web mode, browsers are expected to have working local storage
    start_event = "DOMContentLoaded";
    target = document;
}


target.addEventListener(start_event, function (ev) {
    page_elements["div_log"] = document.querySelector("#main-log");
    page_elements["div_sidebar"] = document.querySelector("#main-sidebar");
    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_class"] = document.querySelector("#lbl-seagull-class");
    page_elements["lbl_colony"] = document.querySelector("#lbl-seagull-colony");
    page_elements["lbl_shinies"] = document.querySelector("#lbl-seagull-shinies");
    page_elements["lbl_food"] = document.querySelector("#lbl-seagull-food");
    page_elements["edt_name"] = document.querySelector("#edt-seagull-name");
    page_elements["lbl_tick"] = document.querySelector("#main-day-counter");
    page_elements["lbl_xp"] = document.querySelector("#lbl-seagull-xp-current");
    page_elements["lbl_xp_next"] = document.querySelector("#lbl-seagull-xp-next");
    page_elements["menu_enc_human"] = document.querySelector("#menu-enc-human");
    page_elements["menu_enc_seagull"] = document.querySelector("#menu-enc-seagull");

    prepare_gamestate().then(update_ui());

    record_log("seagull game ver. " + ver_string);

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