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",
    "agility": 0,
    "instinct": 0,
    "leadership": 0
};

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.className = "log-action-button";
        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;
}

var modal_dialog_open = false;
var dialog_queue = [];

function modal_no_prop(event) { event.stopPropagation(); }

async function open_modal_dialog(dialog) {
    var modal_background = document.getElementById("modal-background");
    if (!modal_background) {
        modal_background = document.createElement("div");
        modal_background.setAttribute("id", "modal-background");
    }

    var modal_root = document.getElementById("modal");
    if (!modal_root) {
        modal_root = document.createElement("div");
        modal_root.setAttribute("id", "modal");
        modal_root.onclick = modal_no_prop;
        modal_background.appendChild(modal_root);
    }

    if (!modal_dialog_open) {
        tick_meter_running = false;
        modal_dialog_open = true;
        modal_background.style.zIndex = "10 !important";
        modal_background.style.visibility = "visible !important";
    }

    dialog_data = await fetch(`/dialog/${dialog}`)
    .then(res => { return res.text(); });

    modal_root.innerHTML = dialog_data;
}

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"].toFixed(2);
    page_elements["lbl_food"].innerHTML = gamestate["food"].toFixed(2);
    page_elements["lbl_class"].innerHTML = gamestate["class"];
    page_elements["lbl_xp"].innerHTML = gamestate["xp"];
    page_elements["lbl_xp_next"].innerHTML = gamestate["xp_next"];
    page_elements["lbl_level"].innerHTML = gamestate["level"];
    page_elements["menu_enc_human"].value = gamestate["enc_human"];
    page_elements["menu_enc_seagull"].value = gamestate["enc_seagull"];
}

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

function reward_xp(amount) {
    gamestate["xp"] += amount;
    if (gamestate["xp"] >= gamestate["xp_next"]) {
        old_xp_next = gamestate["xp_next"];
        gamestate["xp"] -= old_xp_next;
        gamestate["level"] += 1;
        gamestate["xp_next"] = (old_xp_next * 1.5) + (gamestate["level"] * 5);

        if (gamestate["level"] == 2) {
            gamestate["story_beat"] = 1;
            record_log("The humans have fired off some sort of large rocket from a nearby platform. You watch it as it pierces the sky above you and fades into the heavens.");
        } else if (gamestate["level"] == 3) {
            gamestate["story_beat"] = 2;
            gamestate["class"] = "Seagull";
            record_log("You have grown up from a young, eager seaglet to a full blown Seagull. As your colony participates in the ritual honoring your coming of age, you begin to detect a shift in the winds, though you're not certain exactly how.");
        }
    }
}

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

    if (stealdata["success"] && amount > 0) {
        gamestate[resource] += amount;
        reward_xp(2);
        record_log(`Stole ${resource} from a ${target}: ${items.join(", ")}`);
    }
    else { record_log(`Didn't steal ${resource} from a ${target}`); }
}

async function recruit(amount) {
    if (gamestate["shinies"] < amount) {
        record_log("You do not have enough shinies to recruit this seagull.");
        return;
    }
    var stealdata = await fetch("/act/recruit", {method: "POST", body: JSON.stringify({gamestate: gamestate})})
    .then(res => { return res.json(); })
    .catch(e => { throw e; });

    if (stealdata["success"] && amount > 0) {
        gamestate["shinies"] -= amount;
        reward_xp(5);
        gamestate["colony"] += 1;
        record_log("Successfully recruited a seagull into the colony");
    }
    else { record_log("The other gull wasn't impressed. Recruiting failed."); }
}

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.toFixed(2)} food:</b> ${food_descs.join(", ")}</li>\n`;
                }
                if (total_shinies > 0) {
                    logstring += `<li><b>${total_shinies.toFixed(2)} 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', 'humans', ${total_food}, "${food_descs.toString()}")`,
                    "Steal shinies", `steal_resource('shinies', 'humans', ${total_shinies}, "${shinies_descs.toString()}")`
                )

                break;
            case "steal-food":
                record_log("You have encountered a human. Attempting to steal food.");
                tickdata.items.food.forEach((item) => {
                    total_food += item["amount"];
                    food_descs.push(item["desc"]);
                })
                steal_resource("food", "humans", total_food, food_descs.toString());
                break;
            case "steal-shinies":
                record_log("You have encountered a human. Attempting to steal shinies.");
                tickdata.items.shinies.forEach((item) => {
                    total_shinies += item["amount"];
                    shinies_descs.push(item["desc"]);
                })
                steal_resource("shinies", "humans", total_shinies, shinies_descs.toString());
                break;
            default:
                console.error("undefined action " + page_elements["menu_enc_human"]);
                break;
        }
    } else if (tickdata["event_type"] == 11) { // ENCGULL
        var total_food = 0;
        var food_descs = [];
        var total_shinies = 0;
        var shinies_descs = [];

        switch (page_elements["menu_enc_seagull"].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 seagull. It is carrying these resources:\n\n"
                logstring += "<ol>\n"
                if (total_food > 0) {
                    logstring += `<li><b>${total_food.toFixed(2)} food:</b> ${food_descs.join(", ")}</li>\n`;
                }
                if (total_shinies > 0) {
                    logstring += `<li><b>${total_shinies.toFixed(2)} shinies:</b> ${shinies_descs.join(", ")}</li>\n`;
                }
                logstring += "</ol>\nWhat would you like to do?";

                record_log_with_choices(logstring, 
                    "Recruit", `recruit(${tickdata.recruit_cost})`,
                    "Steal food", `steal_resource('food', 'seagulls', ${total_food}, "${food_descs.toString()}")`,
                    "Steal shinies", `steal_resource('shinies', 'seagulls', ${total_shinies}, "${shinies_descs.toString()}")`
                )

                break;
            case "recruit":
                recruit(tickdata.recruit_cost);
                break
            case "steal-food":
                record_log("You have encountered a seagull. Attempting to steal food.");
                tickdata.items.food.forEach((item) => {
                    total_food += item["amount"];
                    food_descs.push(item["desc"]);
                })
                steal_resource("food", "seagulls", total_food, food_descs.toString());
                break;
            case "steal-shinies":
                record_log("You have encountered a seagull. Attempting to steal shinies.");
                tickdata.items.shinies.forEach((item) => {
                    total_shinies += item["amount"];
                    shinies_descs.push(item["desc"]);
                })
                steal_resource("shinies", "seagulls", total_shinies, shinies_descs.toString());
                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 by this point
    start_event = "DOMContentLoaded";
    target = document;
}

function update_action(enc, value) {
    gamestate[`enc_${enc}`] = value;
}

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["lbl_level"] = document.querySelector("#lbl-seagull-lvl");
    page_elements["menu_enc_human"] = document.querySelector("#menu-enc-human");
    page_elements["menu_enc_seagull"] = document.querySelector("#menu-enc-seagull");
    page_elements["btn_charsheet"] = document.querySelector("#button-charsheet");
    page_elements["btn_settings"] = document.querySelector("#button-settings");
    page_elements["btn_about"] = document.querySelector("#button-about");

    page_elements["menu_enc_human"].addEventListener("change", (ev) => {update_action("human", ev.target.value)});
    page_elements["menu_enc_seagull"].addEventListener("change", (ev) => {update_action("seagull", ev.target.value)});
    page_elements["btn_charsheet"].addEventListener("click", (ev) => {open_modal_dialog("charsheet")});

    prepare_gamestate();

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

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

    update_ui();
});

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