Peaceultime/obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rename RedrawableHTML, remove File API rate limite and fix pull job transaction.

Browse Source
This commit is contained in:
Clément Pons
2026-01-27 17:13:40 +01:00
parent e9a892076d
commit a412116b9c
14 changed files with 153 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
shared/character.ts
View File

@@ -3,7 +3,7 @@ import { z } from "zod/v4";
import characterConfig from '#shared/character-config.json';
import proses, { preview } from "#shared/proses";
import { button, checkbox, floater, foldable, input, loading, multiselect, numberpicker, select, tabgroup, Toaster, toggle } from "#shared/components";
import { div, dom, icon, span, text, type RedrawableHTML } from "#shared/dom";
import { div, dom, icon, span, text, type HTMLElement } from "#shared/dom";
import { followermenu, fullblocker, tooltip } from "#shared/floating";
import { clamp } from "#shared/general";
import markdown from "#shared/markdown";
@@ -701,16 +701,16 @@ function setProperty<T>(root: any, path: string, value: T | ((old: T) => T), for
}
export class CharacterBuilder extends CharacterCompiler
{
private _container: RedrawableHTML;
private _content?: RedrawableHTML;
private _stepsHeader: RedrawableHTML[] = [];
private _container: HTMLElement;
private _content?: HTMLElement;
private _stepsHeader: HTMLElement[] = [];
private _steps: Array<BuilderTabConstructor> = [];
private _stepContent: Array<BuilderTab> = [];
private _currentStep: number = 0;
private _helperText!: Text;
private id?: string;
constructor(container: RedrawableHTML, id?: string)
constructor(container: HTMLElement, id?: string)
{
super(Object.assign({}, defaultCharacter));
this.id = id;
@@ -944,7 +944,7 @@ export class CharacterBuilder extends CharacterCompiler
this.add(config.training[stat][level][choice]);
}
}
handleChoice(element: RedrawableHTML, feature: string)
handleChoice(element: HTMLElement, feature: string)
{
const choices = config.features[feature]!.effect.filter(e => e.category === 'choice');
if(choices.length === 0)
@@ -981,8 +981,8 @@ type BuilderTabConstructor = {
class PeoplePicker extends BuilderTab
{
private _nameInput: HTMLInputElement;
private _visibilityInput: RedrawableHTML;
private _options: RedrawableHTML[];
private _visibilityInput: HTMLElement;
private _options: HTMLElement[];
static override header = 'Peuple';
static override description = 'Choisissez un peuple afin de définir la progression de votre personnage au fil des niveaux.';
@@ -1043,7 +1043,7 @@ class LevelPicker extends BuilderTab
private _levelInput: HTMLInputElement;
private _pointsInput: HTMLInputElement;
private _options: RedrawableHTML[][];
private _options: HTMLElement[][];
static override header = 'Niveaux';
static override description = 'Déterminez la progression de votre personnage en choisissant une option par niveau disponible.';
@@ -1112,8 +1112,8 @@ class LevelPicker extends BuilderTab
e[0]?.classList.toggle("opacity-30", ((i + 1) as Level) > this._builder.character.level);
e[1]?.classList.toggle("opacity-30", ((i + 1) as Level) > this._builder.character.level);
e[1]?.childNodes.forEach((option, j) => {
'hover:border-light-70 dark:hover:border-dark-70 cursor-pointer'.split(" ").forEach(_e => (option as RedrawableHTML).classList.toggle(_e, ((i + 1) as Level) <= this._builder.character.level));
'!border-accent-blue bg-accent-blue bg-opacity-20'.split(" ").forEach(_e => (option as RedrawableHTML).classList.toggle(_e, this._builder.character.leveling[((i + 1) as Level)] === j));
'hover:border-light-70 dark:hover:border-dark-70 cursor-pointer'.split(" ").forEach(_e => (option as HTMLElement).classList.toggle(_e, ((i + 1) as Level) <= this._builder.character.level));
'!border-accent-blue bg-accent-blue bg-opacity-20'.split(" ").forEach(_e => (option as HTMLElement).classList.toggle(_e, this._builder.character.leveling[((i + 1) as Level)] === j));
});
});
}
@@ -1125,11 +1125,11 @@ class LevelPicker extends BuilderTab
class TrainingPicker extends BuilderTab
{
private _pointsInput: HTMLInputElement;
private _options: Record<MainStat, RedrawableHTML[][]>;
private _options: Record<MainStat, HTMLElement[][]>;
private _tab: number = 0;
private _statIndicator: RedrawableHTML;
private _statContainer: RedrawableHTML;
private _statIndicator: HTMLElement;
private _statContainer: HTMLElement;
static override header = 'Entrainement';
static override description = 'Spécialisez votre personnage en attribuant vos points d\'entrainement parmi les 7 branches disponibles.\nChaque paliers de 3 points augmentent votre modifieur.';
@@ -1156,7 +1156,7 @@ class TrainingPicker extends BuilderTab
this._pointsInput = dom("input", { class: `w-14 mx-4 text-light-70 dark:text-dark-70 tabular-nums bg-light-10 dark:bg-dark-10 appearance-none outline-none ps-3 pe-1 py-1 focus:shadow-raw transition-[box-shadow] border bg-light-20 bg-dark-20 border-light-20 dark:border-dark-20`, attributes: { type: "number", disabled: true }});
this._options = MAIN_STATS.reduce((p, v) => { p[v] = statRenderBlock(v); return p; }, {} as Record<MainStat, RedrawableHTML[][]>);
this._options = MAIN_STATS.reduce((p, v) => { p[v] = statRenderBlock(v); return p; }, {} as Record<MainStat, HTMLElement[][]>);
this._statIndicator = dom('span', { class: 'rounded-full w-3 h-3 bg-accent-blue absolute transition-[left] after:content-[attr(data-text)] after:absolute after:-translate-x-1/2 after:top-4 after:p-px after:bg-light-0 dark:after:bg-dark-0 after:text-center' });
this._statContainer = div('relative select-none transition-[left] flex flex-1 flex-row max-w-full', Object.values(this._options).map(e => div('flex flex-shrink-0 flex-col gap-4 relative w-full overflow-y-auto px-8', e.flatMap(_e => [..._e]))));
@@ -1207,7 +1207,7 @@ class TrainingPicker extends BuilderTab
e[0]?.classList.toggle("opacity-30", (i as TrainingLevel) > max);
e[1]?.classList.toggle("opacity-30", (i as TrainingLevel) > max);
e[1]?.childNodes.forEach((option, j) => {
'!border-accent-blue bg-accent-blue bg-opacity-20'.split(" ").forEach(_e => (option as RedrawableHTML).classList.toggle(_e, i == 0 || (this._builder.character.training[stat as MainStat][i as TrainingLevel] === j)));
'!border-accent-blue bg-accent-blue bg-opacity-20'.split(" ").forEach(_e => (option as HTMLElement).classList.toggle(_e, i == 0 || (this._builder.character.training[stat as MainStat][i as TrainingLevel] === j)));
})
})
});
@@ -1223,9 +1223,9 @@ class TrainingPicker extends BuilderTab
class AbilityPicker extends BuilderTab
{
private _pointsInput: HTMLInputElement;
private _options: RedrawableHTML[];
private _options: HTMLElement[];
private _maxs: RedrawableHTML[] = [];
private _maxs: HTMLElement[] = [];
static override header = 'Compétences';
static override description = 'Diversifiez vos possibilités en affectant vos points dans les différentes compétences disponibles.';
@@ -1266,7 +1266,7 @@ class AbilityPicker extends BuilderTab
ABILITIES.forEach((e, i) => {
const max = (values[`bonus/abilities/${e}`] ?? 0);
const load = this._options[i]?.lastElementChild as RedrawableHTML | undefined;
const load = this._options[i]?.lastElementChild as HTMLElement | undefined;
const valid = (compiled.abilities[e] ?? 0) <= max;
if(load)
{
@@ -1293,7 +1293,7 @@ class AspectPicker extends BuilderTab
private _filter: boolean = true;
private _options: RedrawableHTML[];
private _options: HTMLElement[];
static override header = 'Aspect';
static override description = 'Déterminez l\'Aspect qui vous corresponds et benéficiez de puissants bonus.';
@@ -1370,7 +1370,7 @@ class AspectPicker extends BuilderTab
this._mentalInput.value = mental.toString();
this._personalityInput.value = personality.toString();
(this._content[1] as RedrawableHTML).replaceChildren(...this._options.filter(e => {
(this._content[1] as HTMLElement).replaceChildren(...this._options.filter(e => {
const id = e.getAttribute('data-aspect')!;
const aspect = config.aspects[id]!;
@@ -1498,8 +1498,8 @@ export class CharacterSheet
{
private user: ComputedRef<User | null>;
private character?: CharacterCompiler;
container: RedrawableHTML = div('flex flex-1 h-full w-full items-start justify-center');
private tabs?: RedrawableHTML;
container: HTMLElement = div('flex flex-1 h-full w-full items-start justify-center');
private tabs?: HTMLElement;
private tab: string = 'actions';
ws?: Socket;
@@ -1582,7 +1582,7 @@ 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: RedrawableHTML }) => {
const validateProperty = (v: string, property: 'health' | 'mana', obj: { edit: HTMLInputElement, readonly: HTMLElement }) => {
character.variables[property] = 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);
obj.edit.value = (character[property] - character.variables[property]).toString();
obj.edit.replaceWith(obj.readonly);
@@ -1624,12 +1624,19 @@ export class CharacterSheet
{ id: 'effects', title: [ text('Afflictions') ], content: () => this.effectsTab(character) },
{ id: 'notes', title: [ text('Notes') ], content: () => [
div('flex flex-col gap-2', [
div('flex flex-col gap-2 border-b border-light-35 dark:border-dark-35 pb-4', [ div('flex flex-row w-full items-center justify-between', [ span('text-lg font-bold', 'Notes publics'), tooltip(button(loadableIcon, saveNotes, 'p-1 items-center justify-center'), 'Enregistrer', 'right') ]), div('border border-light-35 dark:border-dark-35 bg-light20 dark:bg-dark-20 p-1 h-64', [ publicNotes.dom ]) ]),
div('flex flex-col gap-2', [ span('text-lg font-bold', 'Notes privés'), div('border border-light-35 dark:border-dark-35 bg-light20 dark:bg-dark-20 p-1 h-64', [ privateNotes.dom ]) ]),
div('flex flex-col h-full divide-y divide-light-30 dark:divide-dark-30', [
foldable([ div('border border-light-35 dark:border-dark-35 bg-light20 dark:bg-dark-20 p-1 flex-1', [ publicNotes.dom ]) ],
[ div('flex flex-row w-full items-center justify-between', [ span('text-lg font-bold', 'Notes publics'), tooltip(button(loadableIcon, saveNotes, 'p-1 items-center justify-center'), 'Enregistrer', 'right') ]), ], {
class: { container: 'flex flex-col gap-2 data-[active]:flex-1 py-2', content: 'h-full' }, open: true
}),
foldable([ div('border border-light-35 dark:border-dark-35 bg-light20 dark:bg-dark-20 p-1 flex-1', [ privateNotes.dom ]) ],
[ span('text-lg font-bold', 'Notes privés'), ], {
class: { container: 'flex flex-col gap-2 data-[active]:flex-1 py-2', content: 'h-full' }, open: false
}),
//div('flex flex-col gap-2', [ span('text-lg font-bold', 'Notes privés'), div('border border-light-35 dark:border-dark-35 bg-light20 dark:bg-dark-20 p-1 h-64', [ privateNotes.dom ]) ]),
])
] },
], { focused: this.tab, class: { container: 'flex-1 gap-4 px-4 max-w-[960px] h-full', content: 'overflow-auto' }, switch: v => { this.tab = v; } });
], { focused: this.tab, class: { container: 'flex-1 gap-4 px-4 max-w-[960px] h-full', content: 'overflow-auto h-full' }, switch: v => { this.tab = v; } });
this.container.replaceChildren(div('flex flex-col justify-start gap-1 h-full', [
div("flex flex-row gap-4 justify-between", [
@@ -1791,7 +1798,7 @@ export class CharacterSheet
div('flex flex-col gap-2', [
div('flex flex-row flex-wrap gap-2', ["Attaquer", "Désarmer", "Saisir", "Faire chuter", "Déplacer", "Courir", "Pas de coté", "Charger", "Lancer un sort", "S'interposer", "Se transformer", "Utiliser un objet", "Anticiper une action", "Improviser"].map(e => proses('a', preview, [ span('cursor-pointer text-sm decoration-dotted underline', e) ], { href: 'regles/le-combat/actions-en-combat#' + e, label: e, trigger: 'hover', navigate: false, class: 'text-light-60 dark:text-dark-60', lowers: false }))),
div('flex flex-col gap-2', { render: (e, _c) => _c ?? div('flex flex-col gap-1', [
div('flex flex-row justify-between', [dom('span', { class: 'text-lg', text: config.action[e]?.name }), config.action[e]?.cost ? div('flex flex-row gap-1', [dom('span', { class: 'font-bold', text: config.action[e]?.cost?.toString() }), text(`point${config.action[e]?.cost > 1 ? 's' : ''} d'action`)]) : undefined]),
div('flex flex-row justify-between', [dom('span', { class: 'text-lg font-semibold', text: config.action[e]?.name }), config.action[e]?.cost ? div('flex flex-row gap-1', [dom('span', { class: 'font-bold', text: config.action[e]?.cost?.toString() }), text(`point${config.action[e]?.cost > 1 ? 's' : ''} d'action`)]) : undefined]),
markdown(getText(config.action[e]?.description), undefined, { tags: { a: preview } }),
]), list: character.lists.action }),
]),
@@ -1806,7 +1813,7 @@ export class CharacterSheet
div('flex flex-col gap-2', [
div('flex flex-row flex-wrap gap-2 text-light-60 dark:text-dark-60', ["Parer", "Esquiver", "Saisir une opportunité", "Prendre en tenaille", "Intercepter"].map(e => proses('a', preview, [ span('cursor-pointer text-sm decoration-dotted underline', e) ], { href: 'regles/le-combat/actions-en-combat#' + e, label: e, trigger: 'hover', navigate: false, class: 'text-light-60 dark:text-dark-60', lowers: false }))),
div('flex flex-col gap-2', { render: (e, _c) => _c ?? div('flex flex-col gap-1', [
div('flex flex-row justify-between', [dom('span', { class: 'text-lg', text: config.reaction[e]?.name }), config.reaction[e]?.cost ? div('flex flex-row gap-1', [dom('span', { class: 'font-bold', text: config.reaction[e]?.cost?.toString() }), text(`point${config.reaction[e]?.cost > 1 ? 's' : ''} d'action`)]) : undefined]),
div('flex flex-row justify-between', [dom('span', { class: 'text-lg font-semibold', text: config.reaction[e]?.name }), config.reaction[e]?.cost ? div('flex flex-row gap-1', [dom('span', { class: 'font-bold', text: config.reaction[e]?.cost?.toString() }), text(`point${config.reaction[e]?.cost > 1 ? 's' : ''} d'action`)]) : undefined]),
markdown(getText(config.reaction[e]?.description), undefined, { tags: { a: preview } }),
]), list: character.lists.reaction }),
]),
@@ -1820,7 +1827,7 @@ export class CharacterSheet
div('flex flex-col gap-2', [
div('flex flex-row flex-wrap gap-2 text-light-60 dark:text-dark-60', ["Analyser une situation", "Communiquer", "Dégainer", "Attraper un objet"].map(e => proses('a', preview, [ span('cursor-pointer text-sm decoration-dotted underline', e) ], { href: 'regles/le-combat/actions-en-combat#' + e, label: e, trigger: 'hover', navigate: false, class: 'text-light-60 dark:text-dark-60', lowers: false }))),
div('flex flex-col gap-2', { render: (e, _c) => _c ?? div('flex flex-col gap-1', [
div('flex flex-row justify-between', [dom('span', { class: 'text-lg', text: config.freeaction[e]?.name }) ]),
div('flex flex-row justify-between', [dom('span', { class: 'text-lg font-semibold', text: config.freeaction[e]?.name }) ]),
markdown(getText(config.freeaction[e]?.description), undefined, { tags: { a: preview } }),
]), list: character.lists.reaction })
]),
@@ -1832,7 +1839,7 @@ export class CharacterSheet
{
return [
div('flex flex-col gap-2', { render: (e, _c) => _c ?? div('flex flex-col gap-1', [
div('flex flex-row justify-between', [dom('span', { class: 'text-lg', text: config.passive[e]?.name }) ]),
div('flex flex-row justify-between', [dom('span', { class: 'text-lg font-semibold', text: config.passive[e]?.name }) ]),
markdown(getText(config.passive[e]?.description), undefined, { tags: { a: preview } }),
]), list: character.lists.passive }),
];