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 | 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(selector)?.value ?? ""; const getIntValue = (selector: string) => parseInt(document.querySelector(selector)?.value ?? "0") function setupAttributes() { const attributeInputs = document.querySelectorAll('#attributes input[type="number"]'); async function attributeHandler(event: Event) { const input = event.target as Option; if (!input) return; console.log("updating attr"); const attribute = input.id; const newValue = parseInt(input.value); const params = new UpdateAttributeRequest(); params.setCharacter(characterId()); 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; if (!input) return; console.log("updating skill"); const attribute = input.id; const newValue = parseInt(input.value); const params = new UpdateSkillValueRequest(); params.setCharacter(characterId()); 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); });