Character Printer improvement, Campaign main block overflow
This commit is contained in:
parent
c9f60d92ca
commit
00e7d647d3
|
|
@ -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' } }),
|
||||||
])
|
])
|
||||||
]))
|
]))
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue