tenebrous-sheets/src/frontend/scripts/characters/edit.ts

import { UpdateSkillValueRequest, UpdateAttributeRequest } from "../../_proto/cofd_api_pb";
import * as api from "../api";

// This is the scripting for the edit character page, which submits
// changes to the server as the user makes them.

(async () => {
    // Useful for making sure elements actually exist in event handler.
    type Option<T> = T | null | undefined;

    const [, , USERNAME, CHARACTER_ID] = window.location.pathname.split('/');

    function setupAttributes() {
        const attributeInputs = document.querySelectorAll('#attributes input[type="number"]');

        async function attributeHandler(event: Event) {
            const input = event.target as Option<HTMLInputElement>;
            if (!input) return;

            console.log("updating attr");
            const attribute = input.id;
            const newValue = parseInt(input.value);
            const params = new UpdateAttributeRequest();
            params.setCharacterUsername(USERNAME);
            params.setCharacterId(parseInt(CHARACTER_ID));
            params.setAttributeName(attribute);
            params.setAttributeValue(newValue);
            let resp = await api.updateAttributeValue(params);
            console.log("got a response back", resp);
        }

        Array.from(attributeInputs).forEach(input => {
            input.addEventListener('change', attributeHandler);
        });
    }

    function setupSkills() {
        const skillInputs = document.querySelectorAll('#skills input[type="number"]');

        async function skillValueHandler(event: Event) {
            const input = event.target as Option<HTMLInputElement>;
            if (!input) return;

            console.log("updating skill");
            const attribute = input.id;
            const newValue = parseInt(input.value);

            const params = new UpdateSkillValueRequest();
            params.setCharacterUsername(USERNAME);
            params.setCharacterId(parseInt(CHARACTER_ID));
            params.setSkillName(attribute);
            params.setSkillValue(newValue);

            let resp = await api.updateSkillValue(params);

            console.log("got a response back", resp);
        }

        Array.from(skillInputs).forEach(input => {
            input.addEventListener('change', skillValueHandler);
        });
    }

    setupAttributes();
    setupSkills();
})().catch(e => {
    alert(e);
});