2021-01-10 20:30:25 +00:00
|
|
|
import { CharacterIdentifier, UpdateBasicInfoRequest, UpdateSkillValueRequest, UpdateAttributeRequest } from "../../_proto/cofd_api_pb";
|
2021-01-04 22:36:21 +00:00
|
|
|
import * as api from "../api";
|
|
|
|
|
2021-01-09 12:59:11 +00:00
|
|
|
// This is the scripting for the edit character page, which submits
|
|
|
|
// changes to the server as the user makes them.
|
|
|
|
|
2021-01-04 22:36:21 +00:00
|
|
|
(async () => {
|
2021-01-09 13:32:08 +00:00
|
|
|
// Useful for making sure elements actually exist in event handler.
|
2021-01-05 19:32:03 +00:00
|
|
|
type Option<T> = T | null | undefined;
|
2021-01-04 22:36:21 +00:00
|
|
|
|
|
|
|
const [, , USERNAME, CHARACTER_ID] = window.location.pathname.split('/');
|
|
|
|
|
2021-01-10 20:30:25 +00:00
|
|
|
function characterId(): CharacterIdentifier {
|
|
|
|
const id = new CharacterIdentifier();
|
2021-01-12 20:44:26 +00:00
|
|
|
id.setId(parseInt(CHARACTER_ID));
|
2021-01-10 20:30:25 +00:00
|
|
|
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")
|
|
|
|
|
2021-01-04 22:36:21 +00:00
|
|
|
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();
|
2021-01-12 22:01:17 +00:00
|
|
|
params.setCharacter(characterId());
|
2021-01-05 19:32:03 +00:00
|
|
|
params.setAttributeName(attribute);
|
|
|
|
params.setAttributeValue(newValue);
|
2021-01-05 21:19:47 +00:00
|
|
|
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);
|
|
|
|
});
|
2021-01-04 22:36:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
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");
|
2021-01-04 22:36:21 +00:00
|
|
|
const attribute = input.id;
|
|
|
|
const newValue = parseInt(input.value);
|
|
|
|
|
|
|
|
const params = new UpdateSkillValueRequest();
|
2021-01-12 22:01:17 +00:00
|
|
|
params.setCharacter(characterId());
|
2021-01-04 22:36:21 +00:00
|
|
|
params.setSkillName(attribute);
|
|
|
|
params.setSkillValue(newValue);
|
|
|
|
|
2021-01-05 21:19:47 +00:00
|
|
|
let resp = await api.updateSkillValue(params);
|
|
|
|
console.log("got a response back", resp);
|
2021-01-04 22:36:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
Array.from(skillInputs).forEach(input => {
|
|
|
|
input.addEventListener('change', skillValueHandler);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-01-10 20:30:25 +00:00
|
|
|
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"));
|
2021-01-10 20:30:25 +00:00
|
|
|
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-01-04 22:36:21 +00:00
|
|
|
setupAttributes();
|
|
|
|
setupSkills();
|
2021-01-10 20:30:25 +00:00
|
|
|
setupBasicInfo();
|
2021-01-04 22:36:21 +00:00
|
|
|
})().catch(e => {
|
|
|
|
alert(e);
|
|
|
|
});
|