2021-01-24 14:26:07 +00:00
|
|
|
import { CharacterIdentifier, UpdateBasicInfoRequest, UpdateSkillValueRequest, UpdateAttributeRequest, UpdateMeritsRequest, UpdateItemsRequest } from "../../_proto/cofd_api_pb";
|
2021-01-17 13:09:17 +00:00
|
|
|
import { CofdSheet } from "../../_proto/cofd_pb";
|
2021-01-04 22:36:21 +00:00
|
|
|
import * as api from "../api";
|
2021-01-24 14:26:07 +00:00
|
|
|
import * as ui from "./edit-ui";
|
2021-01-04 22:36:21 +00:00
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2021-01-23 14:52:02 +00:00
|
|
|
const inputs = document.querySelectorAll("#basics input");
|
2021-01-10 20:30:25 +00:00
|
|
|
|
|
|
|
inputs.forEach(input => {
|
|
|
|
console.log('got an input', input);
|
|
|
|
input.addEventListener('blur', updateInfo);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-01-17 13:09:17 +00:00
|
|
|
function setupMerits() {
|
|
|
|
async function updateMerits() {
|
2021-01-19 22:03:07 +00:00
|
|
|
let meritElements = document.querySelectorAll<HTMLInputElement>('#merits input[class="merit-name"]');
|
2021-01-17 13:09:17 +00:00
|
|
|
let merits: CofdSheet.Merit[] =
|
2021-01-19 22:03:07 +00:00
|
|
|
Array.from(meritElements).map(input => {
|
2021-01-17 13:09:17 +00:00
|
|
|
const dotsInput = input.parentElement?.querySelector<HTMLInputElement>('input[class="merit-dots"]');
|
|
|
|
|
2021-01-19 22:03:07 +00:00
|
|
|
let dotsAmount = dotsInput?.value ?? "0";
|
|
|
|
if (dotsAmount.length == 0) { dotsAmount = "0"; }
|
|
|
|
|
2021-01-17 13:09:17 +00:00
|
|
|
const merit = new CofdSheet.Merit();
|
|
|
|
merit.setName(input.value);
|
2021-01-19 22:03:07 +00:00
|
|
|
merit.setDots(parseInt(dotsAmount));
|
2021-01-17 13:09:17 +00:00
|
|
|
|
|
|
|
return merit;
|
|
|
|
});
|
|
|
|
|
|
|
|
const params = new UpdateMeritsRequest();
|
|
|
|
params.setCharacter(characterId());
|
|
|
|
params.setMeritsList(merits);
|
|
|
|
|
|
|
|
let resp = await api.updateMerits(params);
|
|
|
|
console.log("got a response back", resp);
|
|
|
|
}
|
|
|
|
|
2021-01-19 22:03:07 +00:00
|
|
|
async function removeMerit(event: Event) {
|
|
|
|
const button = event.target as Option<Element>;
|
|
|
|
const meritLine = button?.parentElement;
|
|
|
|
if (meritLine) {
|
|
|
|
document.querySelector("#merit-list")?.removeChild(meritLine);
|
|
|
|
await updateMerits();
|
|
|
|
}
|
|
|
|
}
|
2021-01-17 13:09:17 +00:00
|
|
|
|
2021-01-24 14:26:07 +00:00
|
|
|
async function processEvent(event: Event) {
|
2021-01-19 22:03:07 +00:00
|
|
|
console.log('processing merit control event');
|
|
|
|
const element = event.target as Element;
|
|
|
|
const eventType = element.getAttribute('data-event-type') ?? '';
|
|
|
|
|
|
|
|
if (eventType == 'remove-merit') {
|
|
|
|
await removeMerit(event);
|
|
|
|
} else if (eventType == 'add-merit') {
|
2021-01-24 14:26:07 +00:00
|
|
|
const meritList = document.querySelector<HTMLDivElement>("#merit-list")!;
|
|
|
|
ui.addMeritLine(meritList);
|
2021-01-19 22:03:07 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const meritControls = document.querySelector<HTMLDivElement>("#merit-controls");
|
2021-01-24 14:26:07 +00:00
|
|
|
meritControls?.addEventListener('click', processEvent);
|
2021-01-19 22:03:07 +00:00
|
|
|
|
|
|
|
const meritList = document.querySelector<HTMLDivElement>("#merit-list");
|
2021-01-24 14:26:07 +00:00
|
|
|
meritList?.addEventListener('click', processEvent);
|
2021-01-19 22:03:07 +00:00
|
|
|
meritList?.addEventListener('blur', updateMerits);
|
|
|
|
meritList?.addEventListener('change', updateMerits);
|
2021-01-17 13:09:17 +00:00
|
|
|
}
|
|
|
|
|
2021-01-24 14:26:07 +00:00
|
|
|
function setupItems() {
|
|
|
|
async function updateItems() {
|
|
|
|
let meritElements = document.querySelectorAll<HTMLInputElement>('#items input[class="item-name"]');
|
|
|
|
let items: CofdSheet.Item[] =
|
|
|
|
Array.from(meritElements).map(input => {
|
|
|
|
const item = new CofdSheet.Item();
|
|
|
|
item.setName(input.value);
|
|
|
|
item.setDescription(""); //TODO add description
|
|
|
|
item.setRules(""); //TODO add rules
|
|
|
|
|
|
|
|
return item;
|
|
|
|
});
|
|
|
|
|
|
|
|
console.log("items are", items);
|
|
|
|
const params = new UpdateItemsRequest();
|
|
|
|
params.setCharacter(characterId());
|
|
|
|
params.setItemsList(items);
|
|
|
|
|
|
|
|
let resp = await api.updateItems(params);
|
|
|
|
console.log("got a response back", resp);
|
|
|
|
}
|
|
|
|
|
|
|
|
async function removeItem(event: Event) {
|
|
|
|
const button = event.target as Option<Element>;
|
|
|
|
const itemLine = button?.parentElement;
|
|
|
|
if (itemLine) {
|
|
|
|
document.querySelector("#item-list")?.removeChild(itemLine);
|
|
|
|
await updateItems();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async function processEvent(event: Event) {
|
|
|
|
console.log('processing item control event');
|
|
|
|
const element = event.target as Element;
|
|
|
|
const eventType = element.getAttribute('data-event-type') ?? '';
|
|
|
|
|
|
|
|
if (eventType == 'remove-item') {
|
|
|
|
await removeItem(event);
|
|
|
|
} else if (eventType == 'add-item') {
|
|
|
|
const itemList = document.querySelector<HTMLDivElement>("#item-list")!;
|
|
|
|
ui.addItemLine(itemList);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const meritControls = document.querySelector<HTMLDivElement>("#item-controls");
|
|
|
|
meritControls?.addEventListener('click', processEvent);
|
|
|
|
|
|
|
|
const meritList = document.querySelector<HTMLDivElement>("#item-list");
|
|
|
|
meritList?.addEventListener('click', processEvent);
|
|
|
|
meritList?.addEventListener('blur', updateItems);
|
|
|
|
meritList?.addEventListener('change', updateItems);
|
|
|
|
}
|
|
|
|
|
2021-01-04 22:36:21 +00:00
|
|
|
setupAttributes();
|
|
|
|
setupSkills();
|
2021-01-10 20:30:25 +00:00
|
|
|
setupBasicInfo();
|
2021-01-17 13:09:17 +00:00
|
|
|
setupMerits();
|
2021-01-24 14:26:07 +00:00
|
|
|
setupItems();
|
2021-01-04 22:36:21 +00:00
|
|
|
})().catch(e => {
|
|
|
|
alert(e);
|
|
|
|
});
|