Merge branch 'dev' of https://git.peaceultime.com/Peaceultime/obsidian-visualiser into dev

shared/character.util.ts

@@ -1335,6 +1335,38 @@ export class CharacterSheet
         publicNotes.content = this.character!.character.notes!.public!;
         privateNotes.content = this.character!.character.notes!.private!;
 
+        const validateProperty = (v: string, property: 'health' | 'mana', obj: { edit: HTMLInputElement, readonly: HTMLElement }) => {
+            const value = v.startsWith('-') ? character.variables[property] + parseInt(v.substring(1), 10) : v.startsWith('+') ? character.variables[property] - parseInt(v.substring(1), 10) : character[property] - parseInt(v, 10);
+            this.character?.variable(property, clamp(isNaN(value) ? character.variables[property] : value, 0, Infinity));
+            this.character?.saveVariables();
+            
+            obj.edit.value = (character[property] - this.character!.character.variables[property]).toString();
+            obj.readonly.textContent = (character[property] - character.variables[property]).toString();
+            obj.edit.replaceWith(obj.readonly);
+        };
+
+        const health = {
+            readonly: dom("span", { 
+                class: "font-bold px-2 border-transparent border cursor-pointer hover:border-light-35 dark:hover:border-dark-35",
+                text: `${character.health - character.variables.health}`,
+                listeners: { click: () => health.readonly.replaceWith(health.edit) },
+            }),
+            edit: input('text', { defaultValue: (character.health - character.variables.health).toString(), input: (v) => {
+                return v.startsWith('-') || v.startsWith('+') ? v.length === 1 || !isNaN(parseInt(v.substring(1), 10)) : v.length === 0 || !isNaN(parseInt(v, 10));
+            }, change: (v) => validateProperty(v, 'health', health), blur: () => validateProperty(health.edit.value, 'health', health), class: 'font-bold px-2 w-20 text-center' }),
+        };
+
+        const mana = {
+            readonly: dom("span", { 
+                class: "font-bold px-2 border-transparent border cursor-pointer hover:border-light-35 dark:hover:border-dark-35",
+                text: `${character.mana - character.variables.mana}`,
+                listeners: { click: () => mana.readonly.replaceWith(mana.edit) },
+            }),
+            edit: input('text', { defaultValue: (character.mana - character.variables.mana).toString(), input: (v) => {
+                return v.startsWith('-') || v.startsWith('+') ? v.length === 1 || !isNaN(parseInt(v.substring(1), 10)) : v.length === 0 || !isNaN(parseInt(v, 10));
+            }, change: (v) => validateProperty(v, 'mana', mana), blur: () => validateProperty(mana.edit.value, 'mana', mana), class: 'font-bold px-2 w-20 text-center' }),
+        };
+
         this.tabs = tabgroup([
             { id: 'actions', title: [ text('Actions') ], content: () => this.actionsTab(character) },
 
@@ -1377,18 +1409,12 @@ export class CharacterSheet
                     div("flex flex-row lg:border-l border-light-35 dark:border-dark-35 py-4 ps-4 gap-8", [
                         dom("span", { class: "flex flex-row items-center gap-2 text-3xl font-light" }, [
                             text("PV: "),
-                            dom("span", { 
+                            health.readonly,
-                                class: "font-bold px-2 border-transparent border cursor-pointer hover:border-light-35 dark:hover:border-dark-35",
-                                text: `${character.health - character.variables.health}`
-                            }),
                             text(`/ ${character.health}`)
                         ]),
                         dom("span", { class: "flex flex-row items-center gap-2 text-3xl font-light" }, [
                             text("Mana: "),
-                            dom("span", { 
+                            mana.readonly,
-                                class: "font-bold px-2 border-transparent border cursor-pointer hover:border-light-35 dark:hover:border-dark-35",
-                                text: `${character.mana - character.variables.mana}`
-                            }),
                             text(`/ ${character.mana}`)
                         ])
                     ])

shared/components.util.ts

@@ -368,17 +368,18 @@ export function combobox<T extends NonNullable<any>>(options: Option<T>[], setti
     })
     return container;
 }
-export function input(type: 'text' | 'number' | 'email' | 'password' | 'tel', settings?: { defaultValue?: string, change?: (value: string) => void, input?: (value: string) => void, focus?: () => void, blur?: () => void, class?: Class, disabled?: boolean, placeholder?: string }): HTMLInputElement
+export function input(type: 'text' | 'number' | 'email' | 'password' | 'tel', settings?: { defaultValue?: string, change?: (value: string) => void, input?: (value: string) => void | boolean, focus?: () => void, blur?: () => void, class?: Class, disabled?: boolean, placeholder?: string }): HTMLInputElement
 {
     const input = dom("input", { attributes: { disabled: settings?.disabled, placeholder: settings?.placeholder }, class: [`mx-4 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50
     bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
     border border-light-35 dark:border-dark-35 hover:border-light-50 dark:hover:border-dark-50 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20`, settings?.class], listeners: {
-        input: () => settings?.input && settings.input(input.value),
+        input: (e) => { if(settings?.input && settings.input(input.value) === false) input.value = value; else value = input.value; },
         change: () => settings?.change && settings.change(input.value),
-        focus: () => settings?.focus,
+        focus: settings?.focus,
-        blur: () => settings?.blur,
+        blur: settings?.blur,
     }})
     if(settings?.defaultValue !== undefined) input.value = settings.defaultValue;
+    let value = input.value;
 
     return input;
 }