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

src/frontend/scripts/api.ts

@@ -29,7 +29,7 @@ export async function updateBasicInfo(params: UpdateBasicInfoRequest): Promise<A
     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);
     return ApiResult.deserializeBinary(data);
 }

src/frontend/scripts/characters/edit.ts

@@ -97,13 +97,17 @@ import * as api from "../api";
 
     function setupMerits() {
         async function updateMerits() {
+            let meritElements = document.querySelectorAll<HTMLInputElement>('#merits input[class="merit-name"]');
             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"]');
 
+                    let dotsAmount = dotsInput?.value ?? "0";
+                    if (dotsAmount.length == 0) { dotsAmount = "0"; }
+
                     const merit = new CofdSheet.Merit();
                     merit.setName(input.value);
-                    merit.setDots(parseInt(dotsInput?.value ?? "0"));
+                    merit.setDots(parseInt(dotsAmount));
 
                     return merit;
                 });
@@ -116,18 +120,63 @@ import * as api from "../api";
             console.log("got a response back", resp);
         }
 
-        const meritNames = document.querySelectorAll('#merits input[class="merit"]');
-        const meritDots = document.querySelectorAll('#merits input[class="merit-dots"]');
+        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();
+            }
+        }
 
-        meritNames.forEach(input => {
-            console.log('got an input', input);
-            input.addEventListener('blur', updateMerits);
-        });
+        function addMeritLine() {
+            const meritName = document.createElement('input');
+            meritName.type = 'text';
+            meritName.value = '';
+            meritName.classList.add('merit-name');
 
-        meritDots.forEach(input => {
-            console.log('got an input', input);
-            input.addEventListener('change', updateMerits);
-        });
+            const meritDots = document.createElement('input');
+            meritDots.type = 'number';
+            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();

src/frontend/templates/characters/edit_character.html.tera

@@ -156,5 +156,18 @@
                 {% endfor %}
             </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>
 {% endblock content %}

src/frontend/templates/characters/edit_character_macros.html.tera

@@ -1,13 +1,21 @@
 {% macro attribute(name, value) %}
-    <div class="attribute">
-        <label for="{{name}}">{{name}}:</label>
-        <input id="{{name}}" name="{{name}}" type="number" min="0" value="{{value}}" />
-    </div>
+<div class="attribute">
+    <label for="{{name}}">{{name}}:</label>
+    <input id="{{name}}" name="{{name}}" type="number" min="0" value="{{value}}" />
+</div>
 {% endmacro attribute %}
 
 {% macro skill(name, value) %}
-    <div class="skill">
-        <label for="{{name}}">{{name}}:</label>
-        <input id="{{name}}" name="{{name}}" type="number" min="0" value="{{value}}" />
-    </div>
+<div class="skill">
+    <label for="{{name}}">{{name}}:</label>
+    <input id="{{name}}" name="{{name}}" type="number" min="0" value="{{value}}" />
+</div>
 {% 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 %}

src/routes/api/cofd.rs

@@ -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>(
     req: Proto<UpdateMeritsRequest>,
     conn: TenebrousDbConn<'_>,