Working, albeit very ugly, inefficient, and sometimes wonky merits.

This commit is contained in:
projectmoon 2021-01-19 22:03:07 +00:00
parent 95ad1c6e28
commit 59f35d0366
5 changed files with 92 additions and 22 deletions

View File

@ -29,7 +29,7 @@ export async function updateBasicInfo(params: UpdateBasicInfoRequest): Promise<A
return ApiResult.deserializeBinary(data); return ApiResult.deserializeBinary(data);
} }
export async function updateMerits(params: UpdateMeritsRequest): Promise<ApiReslut> { export async function updateMerits(params: UpdateMeritsRequest): Promise<ApiResult> {
let data = await makeRequest('/api/rpc/cofd/update_merits', params); let data = await makeRequest('/api/rpc/cofd/update_merits', params);
return ApiResult.deserializeBinary(data); return ApiResult.deserializeBinary(data);
} }

View File

@ -97,13 +97,17 @@ import * as api from "../api";
function setupMerits() { function setupMerits() {
async function updateMerits() { async function updateMerits() {
let meritElements = document.querySelectorAll<HTMLInputElement>('#merits input[class="merit-name"]');
let merits: CofdSheet.Merit[] = let merits: CofdSheet.Merit[] =
Array.from(document.querySelectorAll<HTMLInputElement>('#merits input[class="merit"]')).map(input => { Array.from(meritElements).map(input => {
const dotsInput = input.parentElement?.querySelector<HTMLInputElement>('input[class="merit-dots"]'); const dotsInput = input.parentElement?.querySelector<HTMLInputElement>('input[class="merit-dots"]');
let dotsAmount = dotsInput?.value ?? "0";
if (dotsAmount.length == 0) { dotsAmount = "0"; }
const merit = new CofdSheet.Merit(); const merit = new CofdSheet.Merit();
merit.setName(input.value); merit.setName(input.value);
merit.setDots(parseInt(dotsInput?.value ?? "0")); merit.setDots(parseInt(dotsAmount));
return merit; return merit;
}); });
@ -116,18 +120,63 @@ import * as api from "../api";
console.log("got a response back", resp); console.log("got a response back", resp);
} }
const meritNames = document.querySelectorAll('#merits input[class="merit"]'); async function removeMerit(event: Event) {
const meritDots = document.querySelectorAll('#merits input[class="merit-dots"]'); const button = event.target as Option<Element>;
const meritLine = button?.parentElement;
if (meritLine) {
document.querySelector("#merit-list")?.removeChild(meritLine);
await updateMerits();
}
}
meritNames.forEach(input => { function addMeritLine() {
console.log('got an input', input); const meritName = document.createElement('input');
input.addEventListener('blur', updateMerits); meritName.type = 'text';
}); meritName.value = '';
meritName.classList.add('merit-name');
meritDots.forEach(input => { const meritDots = document.createElement('input');
console.log('got an input', input); meritDots.type = 'number';
input.addEventListener('change', updateMerits); meritDots.min = '0';
}); meritDots.value = '0';
meritDots.classList.add('merit-dots');
const removeButton = document.createElement('button');
removeButton.innerText = "X";
removeButton.setAttribute('data-event-type', 'remove-merit');
const dots = document.createElement('span');
dots.innerText = 'Dots';
const merit = document.createElement('div');
merit.classList.add('merit');
merit.appendChild(meritName);
merit.appendChild(meritDots);
merit.appendChild(dots);
merit.appendChild(removeButton);
document.querySelector<HTMLDivElement>("#merit-list")?.appendChild(merit);
}
async function processControlEvent(event: Event) {
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') {
addMeritLine();
}
}
const meritControls = document.querySelector<HTMLDivElement>("#merit-controls");
meritControls?.addEventListener('click', processControlEvent);
const meritList = document.querySelector<HTMLDivElement>("#merit-list");
meritList?.addEventListener('click', processControlEvent);
meritList?.addEventListener('blur', updateMerits);
meritList?.addEventListener('change', updateMerits);
} }
setupAttributes(); setupAttributes();

View File

@ -156,5 +156,18 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<div id="merits">
<h2>Merits</h2>
<div id="merit-list">
{% for merit in sheet.merits %}
{{ macros::merit(name=merit.name, value=merit.dots) }}
{% endfor %}
</div>
<div id="merit-controls">
<button data-event-type="add-merit">Add Merit</button>
</div>
</div>
</div> </div>
{% endblock content %} {% endblock content %}

View File

@ -11,3 +11,11 @@
<input id="{{name}}" name="{{name}}" type="number" min="0" value="{{value}}" /> <input id="{{name}}" name="{{name}}" type="number" min="0" value="{{value}}" />
</div> </div>
{% endmacro skill %} {% endmacro skill %}
{% macro merit(name, value) %}
<div class="merit">
<input type="text" class="merit-name" value="{{name}}" />
<input type="number" class="merit-dots" min="0" value="{{value}}" /> <span>Dots</span>
<button data-event-type="remove-merit">X</button>
</div>
{% endmacro merit %}

View File

@ -163,7 +163,7 @@ pub(super) async fn update_skill_value<'a>(
})) }))
} }
#[post("/rpc/cofd/update_skill_value", data = "<req>")] #[post("/rpc/cofd/update_merits", data = "<req>")]
pub(super) async fn update_merits<'a>( pub(super) async fn update_merits<'a>(
req: Proto<UpdateMeritsRequest>, req: Proto<UpdateMeritsRequest>,
conn: TenebrousDbConn<'_>, conn: TenebrousDbConn<'_>,