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

105 lines
3.6 KiB
TypeScript
Raw Normal View History

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.
2021-01-05 19:32:03 +00:00
type Option<T> = T | null | undefined;
const [, , USERNAME, CHARACTER_ID] = window.location.pathname.split('/');
function characterId(): CharacterIdentifier {
const id = new CharacterIdentifier();
2021-01-12 20:44:26 +00:00
id.setId(parseInt(CHARACTER_ID));
id.setOwner(USERNAME);
return id;
}
2021-01-10 20:44:02 +00:00
const getTextValue = (selector: string) =>
document.querySelector<HTMLInputElement>(selector)?.value ?? "";
const getIntValue = (selector: string) =>
parseInt(document.querySelector<HTMLInputElement>(selector)?.value ?? "0")
function setupAttributes() {
2021-01-05 19:32:03 +00:00
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);
2021-01-05 19:32:03 +00:00
}
Array.from(attributeInputs).forEach(input => {
input.addEventListener('change', attributeHandler);
});
}
function setupSkills() {
const skillInputs = document.querySelectorAll('#skills input[type="number"]');
async function skillValueHandler(event: Event) {
2021-01-05 19:32:03 +00:00
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();
2021-01-12 20:44:26 +00:00
params.setCharacter(characterId());
2021-01-10 20:44:02 +00:00
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);
});