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

import { CharacterIdentifier, UpdateBasicInfoRequest, 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 characterId(): CharacterIdentifier {
        const id = new CharacterIdentifier();
        id.setId(parseInt(CHARACTER_ID));
        id.setOwner(USERNAME);
        return id;
    }

    const getTextValue = (selector: string) =>
        document.querySelector<HTMLInputElement>(selector)?.value ?? "";

    const getIntValue = (selector: string) =>
        parseInt(document.querySelector<HTMLInputElement>(selector)?.value ?? "0")

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

    function setupBasicInfo() {
        async function updateInfo() {
            const params = new UpdateBasicInfoRequest();

            params.setCharacter(characterId());
            params.setName(getTextValue("#characterName"));
            params.setAge(getIntValue("#age"));
            params.setConcept(getTextValue("#concept"));
            params.setChronicle(getTextValue("#chronicle"));
            params.setGender(getTextValue("#gender"));

            let resp = await api.updateBasicInfo(params);
            console.log("got a response back", resp);
        }

        const inputs = document.querySelectorAll("#basicInfo input");

        inputs.forEach(input => {
            console.log('got an input', input);
            input.addEventListener('blur', updateInfo);
        });
    }

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