Character Printer improvement, Campaign main block overflow

This commit is contained in:
Clément Pons 2025-11-19 17:40:19 +01:00
parent c9f60d92ca
commit 00e7d647d3
3 changed files with 19 additions and 9 deletions

BIN
db.sqlite

Binary file not shown.

View File

@ -30,10 +30,15 @@ class CharacterPrinter
{ {
this.compiler = new CharacterCompiler(character); this.compiler = new CharacterCompiler(character);
const compiled = this.compiler.compiled; const compiled = this.compiler.compiled;
const armor = this.compiler.armor;
this.container.replaceChildren(div('flex flex-row justify-between items-center', [ this.container.replaceChildren(div('flex flex-row justify-between items-center', [
span('text-bold text-xl', compiled.name), span('text-bold text-xl', compiled.name),
div('flex flex-row gap-2 items-baseline', [ span('text-sm font-bold', 'PV'), span('text-lg', `${(compiled.health ?? 0) - (compiled.variables.health ?? 0)}/${compiled.health ?? 0}`) ]) div('flex flex-row gap-2 items-baseline', [ span('text-sm font-bold', 'PV'), span('text-lg', `${(compiled.health ?? 0) - (compiled.variables.health ?? 0)}/${compiled.health ?? 0}`) ]),
]), div('flex flex-row justify-between items-center', [
div('flex flex-col gap-px items-center justify-center', [ span('text-sm font-bold', 'Armure'), span('text-lg', armor === undefined ? `-` : `${armor.current}/${armor.max}`) ]),
div('flex flex-col gap-px items-center justify-center', [ span('text-sm font-bold', 'Mana'), span('text-lg', `${(compiled.mana ?? 0) - (compiled.variables.mana ?? 0)}/${compiled.mana ?? 0}`) ]),
div('flex flex-col gap-px items-center justify-center', [ span('text-sm font-bold', 'Fatigue'), span('text-lg', `${compiled.variables.exhaustion ?? 0}`) ]),
])); ]));
} }
else throw new Error(); else throw new Error();
@ -137,7 +142,7 @@ export class CampaignSheet
} }
private logText(log: CampaignLog) private logText(log: CampaignLog)
{ {
return `${log.target === 0 ? 'Le groupe' : this.players.find(e => e.user.id === log.target)?.user.username ?? 'Le groupe'}${logType[log.type]}${log.details}`; return `${log.target === 0 ? 'Le groupe' : this.players.find(e => e.user.id === log.target)?.user.username ?? 'Un personange'}${logType[log.type]}${log.details}`;
} }
private render() private render()
{ {
@ -163,7 +168,7 @@ export class CampaignSheet
]), ]),
]), ]),
]), ]),
div('flex flex-row gap-4 flex-1', [ div('flex flex-row gap-4 flex-1 h-0', [
div('flex flex-col gap-2', [ div('flex flex-col gap-2', [
div('flex flex-row items-center gap-4 w-[320px]', [ span('font-bold text-lg', 'Etat'), div('border-t border-light-40 dark:border-dark-40 border-dashed flex-1') ]), div('flex flex-row items-center gap-4 w-[320px]', [ span('font-bold text-lg', 'Etat'), div('border-t border-light-40 dark:border-dark-40 border-dashed flex-1') ]),
...this.characters.map(e => e.container), ...this.characters.map(e => e.container),
@ -172,7 +177,7 @@ export class CampaignSheet
div('flex flex-col', [ div('flex flex-col', [
tabgroup([ tabgroup([
{ id: 'campaign', title: [ text('Campagne') ], content: () => [ { id: 'campaign', title: [ text('Campagne') ], content: () => [
markdown(campaign.public_notes, '', { tags: { a: preview } }), markdown(campaign.public_notes, '', { tags: { a: preview }, class: 'px-2' }),
] }, ] },
{ id: 'inventory', title: [ text('Inventaire') ], content: () => [ { id: 'inventory', title: [ text('Inventaire') ], content: () => [
@ -188,15 +193,15 @@ export class CampaignSheet
div('w-3 h-3 border-2 rounded-full bg-light-40 dark:bg-dark-40 border-light-0 dark:border-dark-0'), div('w-3 h-3 border-2 rounded-full bg-light-40 dark:bg-dark-40 border-light-0 dark:border-dark-0'),
div('flex flex-row gap-2 items-center flex-1', [ div('flex flex-row gap-2 items-center flex-1', [
div('flex-1 border-t border-light-40 dark:border-dark-40 border-dashed'), div('flex-1 border-t border-light-40 dark:border-dark-40 border-dashed'),
span('text-light-70 dark:text-dark-70 text-sm italic', format(date, 'dd MMMM yyyy')), span('text-light-70 dark:text-dark-70 text-sm italic tracking-tight', format(date, 'dd MMMM yyyy')),
div('flex-1 border-t border-light-40 dark:border-dark-40 border-dashed'), div('flex-1 border-t border-light-40 dark:border-dark-40 border-dashed'),
]) ])
])) ]))
} }
arr.push(div('flex flex-row gap-2 items-center relative -left-2 mx-px', [ arr.push(div('flex flex-row gap-2 items-center relative -left-2 mx-px group', [
div('w-3 h-3 border-2 rounded-full bg-light-40 dark:bg-dark-40 border-light-0 dark:border-dark-0'), div('w-3 h-3 border-2 rounded-full bg-light-40 dark:bg-dark-40 border-light-0 dark:border-dark-0'),
div('flex flex-row items-center', [ svg('svg', { class: 'fill-light-40 dark:fill-dark-40', attributes: { width: "6", height: "9", viewBox: "0 0 6 9" } }, [svg('path', { attributes: { d: "M0 4.5L6 -4.15L6 9L0 4.5Z" } })]), span('px-4 py-2 bg-light-25 dark:bg-dark-25 border border-light-40 dark:border-dark-40', this.logText(e)) ]), div('flex flex-row items-center', [ svg('svg', { class: 'fill-light-40 dark:fill-dark-40', attributes: { width: "8", height: "12", viewBox: "0 0 6 9" } }, [svg('path', { attributes: { d: "M0 4.5L6 0L6 9L0 4.5Z" } })]), span('px-4 py-2 bg-light-25 dark:bg-dark-25 border border-light-40 dark:border-dark-40', this.logText(e)) ]),
span('italic text-xs tracking-tight text-light-70 dark:text-dark-70', format(new Date(e.timestamp), 'HH:mm:ss')), span('italic text-xs tracking-tight text-light-70 dark:text-dark-70 font-mono invisible group-hover:visible', format(new Date(e.timestamp), 'HH:mm:ss')),
])); ]));
return arr; return arr;
}); });
@ -213,7 +218,7 @@ export class CampaignSheet
{ id: 'ressources', title: [ text('Ressources') ], content: () => [ { id: 'ressources', title: [ text('Ressources') ], content: () => [
] } ] }
], { focused: 'campaign', class: { container: 'max-w-[900px] w-[900px]' } }), ], { focused: 'campaign', class: { container: 'max-w-[900px] w-[900px] h-full', content: 'overflow-auto', tabbar: 'gap-4' } }),
]) ])
])) ]))
} }

View File

@ -340,6 +340,11 @@ export class CharacterCompiler
return p; return p;
}, {} as Record<string, number>); }, {} as Record<string, number>);
} }
get armor()
{
const armors = this._character.variables.items.filter(e => e.equipped && config.items[e.id]?.category === 'armor');
return armors.length > 0 ? armors.map(e => ({ max: (config.items[e.id] as ArmorConfig).health, current: (config.items[e.id] as ArmorConfig).health - e.state.health })).reduce((p, v) => { p.max += v.max; p.current += v.current; return p; }, { max: 0, current: 0 }) : undefined;
}
parse(text: string): string parse(text: string): string
{ {