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

Fix UI for mobile render

Browse Source
This commit is contained in:
Peaceultime
2026-07-01 09:37:37 +02:00
parent 8cbc25a601
commit 8e551159fc
13 changed files with 229 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
shared/character.ts
View File

@@ -1478,7 +1478,14 @@ export const craftingText: Record<CraftingType, string> = {
'armorer': 'Armurerie',
'enchanter': 'Enchantement',
'brewerer': 'Alchimie',
}
};
export const materialText: Record<keyof CharacterVariables['components'], string> = {
'money': 'Argent',
'natural': 'Naturel',
'mineral': 'Minéral',
'processed': 'Transformé',
'magical': 'Magique',
};
export const subnameFactory = (item: ItemConfig, state?: ItemState): string[] => {
let result = [];
switch(item.category)
@@ -1600,7 +1607,7 @@ export class CharacterSheet
const saveNotes = () => { loadableIcon.replaceWith(saveLoading); this.saveNotes().finally(() => { saveLoading.replaceWith(loadableIcon) }); }
this.tabs = tabgroup([
() => (breakpoint.current === 'sm' || breakpoint.current === 'md') ? { id: 'stats', title: [ text('Stats') ], content: () => this.sidebarTab() } : undefined,
() => (breakpoint.viewport === 'sm' || breakpoint.viewport === 'md') ? { id: 'stats', title: [ text('Stats') ], content: () => this.sidebarTab() } : undefined,
{ id: 'actions', title: [ text('Actions') ], content: () => this.actionsTab() },
@@ -1626,7 +1633,7 @@ export class CharacterSheet
}),
])
] },
], { focused: this.tab, class: { container: 'flex-1 gap-4 px-4 lg:max-w-[960px] h-full', content: 'overflow-auto h-full' }, switch: v => { this.tab = v; localStorage.setItem('this.character.compiled-tab', v); } });
], { focused: this.tab, class: { container: 'flex-1 gap-4 lg:px-4 px-2 lg:max-w-[960px] max-w-full h-full', content: 'overflow-auto h-full', title: 'text-sm md:text-base sm: px-1 md:px-2', tabbar: 'overflow-x-auto overflow-y-hidden' }, switch: v => { this.tab = v; localStorage.setItem('this.character.compiled-tab', v); } });
this.container.replaceChildren(div('flex flex-col justify-start gap-1 h-full w-full min-w-half', [
div("flex lg:flex-row gap-4 lg:gap-6 items-center justify-center", [
@@ -1737,38 +1744,42 @@ export class CharacterSheet
]),
div("flex flex-1 flex-row items-stretch justify-center py-2 gap-4 h-0", [
div("hidden lg:flex flex-col gap-4 py-1 w-60", [
div("flex flex-col py-1 gap-4", [
div("hidden lg:flex flex-col gap-4 py-1 w-48", [
foldable([
div("flex flex-1 flex-col gap-1",
MAIN_STATS.map((stat) =>
div("flex flex-row px-1 justify-between items-center", [
span("text-base text-light-100 dark:text-dark-100 font-semibold", mainStatTexts[stat as MainStat] || stat),
span("font-bold text-lg text-light-100 dark:text-dark-100", () => !this.character.compiled ? '-' : `+${(this.character.compiled.modifier[stat as MainStat] ?? 0) + ((this.character.compiled.bonus?.defense !== undefined ? this.character.compiled.bonus?.defense[stat as MainStat] : 0) ?? 0)}`),
])
)
),
], [
div("flex flex-row items-center justify-center gap-4", [
dom("div", { class: 'text-xl font-semibold', text: "Résistances" }),
div("flex flex-1 border-t border-dashed border-light-50 dark:border-dark-50")
]),
], { class: { container: 'flex flex-col px-1 gap-2', title: 'ps-2' }, open: true, }),
foldable([
div("flex flex-1 flex-col gap-1",
ABILITIES.map((ability) =>
div("flex flex-row px-1 justify-between items-center", [
proses('a', preview, [ span("text-sm text-light-70 dark:text-dark-70 cursor-help decoration-dotted underline", abilityTexts[ability as Ability] || ability) ], { href: `regles/l'entrainement/competences#${abilityTexts[ability as Ability]}`, label: abilityTexts[ability as Ability], navigate: false }),
span("font-bold text-lg text-light-100 dark:text-dark-100", () => !this.character.compiled ? '-' : `+${this.character.compiled.abilities[ability as Ability] ?? 0}`),
])
)
),
], [
div("flex flex-row items-center justify-center gap-4", [
dom("div", { class: 'text-xl font-semibold', text: "Compétences" }),
div("flex flex-1 border-t border-dashed border-light-50 dark:border-dark-50")
]),
div("grid grid-cols-2 gap-2",
ABILITIES.map((ability) =>
div("flex flex-row px-1 justify-between items-center", [
proses('a', preview, [ span("text-sm text-light-70 dark:text-dark-70 max-w-20 truncate cursor-help decoration-dotted underline", abilityTexts[ability as Ability] || ability) ], { href: `regles/l'entrainement/competences#${abilityTexts[ability as Ability]}`, label: abilityTexts[ability as Ability], navigate: false }),
span("font-bold text-base text-light-100 dark:text-dark-100", () => !this.character.compiled ? '-' : `+${this.character.compiled.abilities[ability as Ability] ?? 0}`),
])
)
),
div("flex flex-row items-center justify-center gap-4", [
dom("div", { class: 'text-xl font-semibold', text: "Maitrises" }),
div("flex flex-1 border-t border-dashed border-light-50 dark:border-dark-50")
]),
div("grid grid-cols-2 gap-x-3 gap-y-1 text-sm", { list: () => this.character.compiled?.mastery ?? [], render: (e, _c) => proses('a', preview, [ text(masteryTexts[e].text) ], { href: masteryTexts[e].href, label: masteryTexts[e].text, class: 'text-sm text-light-70 dark:text-dark-70 cursor-help decoration-dotted underline', }) }),
div("grid grid-cols-2 gap-x-3 gap-y-1 text-sm", [
() => (this.character.compiled?.spellranks?.precision ?? 0) > 0 ? div('flex flex-row items-center gap-2', [ proses('a', preview, [ text('Précision') ], { href: 'regles/la-magie/magie#Les sorts de précision', label: 'Précision', class: 'text-sm text-light-70 dark:text-dark-70 cursor-help decoration-dotted underline' }), span('font-bold', () => this.character.compiled?.spellranks?.precision ?? 0) ]) : undefined,
() => (this.character.compiled?.spellranks?.knowledge ?? 0) > 0 ? div('flex flex-row items-center gap-2', [ proses('a', preview, [ text('Savoir') ], { href: 'regles/la-magie/magie#Les sorts de savoir', label: 'Savoir', class: 'text-sm text-light-70 dark:text-dark-70 cursor-help decoration-dotted underline' }), span('font-bold', () => this.character.compiled?.spellranks?.knowledge ?? 0) ]) : undefined,
() => (this.character.compiled?.spellranks?.instinct ?? 0) > 0 ? div('flex flex-row items-center gap-2', [ proses('a', preview, [ text('Instinct') ], { href: 'regles/la-magie/magie#Les sorts instinctif', label: 'Instinct', class: 'text-sm text-light-70 dark:text-dark-70 cursor-help decoration-dotted underline' }), span('font-bold', () => this.character.compiled?.spellranks?.instinct ?? 0) ]) : undefined,
])
])
], { class: { container: 'flex flex-col px-1 gap-2', title: 'ps-2' }, open: true, })
]),
div('hidden lg:block border-l border-light-35 dark:border-dark-35'),
this.tabs,
])
]));
@@ -1813,7 +1824,7 @@ export class CharacterSheet
},
mana: 0,
});
const container = div("border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 border-l absolute top-0 bottom-0 right-0 w-[10%] data-[state=active]:w-[480px] flex flex-col gap-4 text-light-100 dark:text-dark-100 p-8 transition-[width] transition-delay-[150ms]", [
const container = div("border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 border-l absolute top-0 bottom-0 right-0 w-[10%] data-[state=active]:w-[480px] max-lg:data-[state=active]:w-full flex flex-col gap-4 text-light-100 dark:text-dark-100 p-8 transition-[width] transition-delay-[150ms]", [
div('flex flex-row justify-between items-center', [
div('flex flex-row gap-8 items-center', [ span('text-xl font-bold', 'Edititon de vie'), () => !this.character.compiled ? span('text-xl font-bold', '-') : div('flex flex-row items-center gap-1', [ span('text-xl font-bold', () => (this.character.compiled.health - this.character.compiled.variables.health)), text('/'), text(() => this.character.compiled.health) ]) ]),
tooltip(button(icon("radix-icons:cross-1", { width: 24, height: 24 }), () => {
@@ -1880,7 +1891,7 @@ export class CharacterSheet
{
return [
div('flex flex-col gap-8', [
div('flex flex-col gap-2', [
div('flex flex-col', [
div("flex flex-row items-center justify-center gap-4", [
div("flex flex-row items-center justify-center gap-2", [ dom("div", { class: 'text-lg font-semibold', text: "Actions" }) ]),
div("flex flex-1 border-t border-dashed border-light-50 dark:border-dark-50"),
@@ -1889,13 +1900,13 @@ 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 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]),
div('flex flex-col gap-4', { render: (e, _c) => _c ?? div('flex flex-col', [
div('flex flex-row justify-between', [dom('span', { class: 'text-base font-bold tracking-tight', 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: () => this.character.compiled ? this.character.compiled.lists.action ?? [] : [] }),
]),
]),
div('flex flex-col gap-2', [
div('flex flex-col', [
div("flex flex-row items-center justify-center gap-4", [
div("flex flex-row items-center justify-center gap-2", [ dom("div", { class: 'text-lg font-semibold', text: "Réactions" }) ]),
div("flex flex-1 border-t border-dashed border-light-50 dark:border-dark-50"),
@@ -1904,22 +1915,22 @@ 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 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]),
div('flex flex-col gap-2', { render: (e, _c) => _c ?? div('flex flex-col', [
div('flex flex-row justify-between', [dom('span', { class: 'text-base font-bold tracking-tight', 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: () => this.character.compiled ? this.character.compiled.lists.reaction ?? [] : [] }),
]),
]),
div('flex flex-col gap-2', [
div('flex flex-col', [
div("flex flex-row items-center justify-center gap-4", [
div("flex flex-row items-center justify-center gap-2", [ dom("div", { class: 'text-lg font-semibold', text: "Actions libres" }) ]),
div("flex flex-1 border-t border-dashed border-light-50 dark:border-dark-50"),
]),
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 font-semibold', text: config.freeaction[e]?.name }) ]),
div('flex flex-row flex-wrap gap-2 text-light-60 dark:text-dark-60', ["Analyser", "Communiquer", "Dégainer", "Attraper"].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', [
div('flex flex-row justify-between', [dom('span', { class: 'text-base font-bold tracking-tight', text: config.freeaction[e]?.name }) ]),
markdown(getText(config.freeaction[e]?.description), undefined, { tags: { a: preview } }),
]), list: () => this.character.compiled ? this.character.compiled.lists.freeaction ?? [] : [] })
]),
@@ -1930,24 +1941,37 @@ export class CharacterSheet
abilitiesTab()
{
return [ div('flex flex-col gap-4', [
foldable(() => [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 font-semibold', text: config.passive[e]?.name }) ]),
foldable(() => [div('flex flex-col gap-4 pt-2', { render: (e, _c) => _c ?? div('flex flex-col', [
div('flex flex-row justify-between', [dom('span', { class: 'text-base font-bold tracking-tight', text: config.passive[e]?.name }) ]),
markdown(getText(config.passive[e]?.description), undefined, { tags: { a: preview } }),
]), list: this.character.compiled.lists.passive })], [
div("flex flex-row items-center justify-center gap-4", [
div("flex flex-row items-center justify-center gap-2", [ dom("div", { class: 'text-xl font-bold', text: "Aptitudes" }) ]),
div("flex flex-row items-center justify-center gap-4 ps-2", [
div("flex flex-row items-center justify-center gap-2", [ dom("div", { class: 'text-lg font-semibold', text: "Aptitudes" }) ]),
div("flex flex-1 border-t border-dashed border-light-50 dark:border-dark-50"),
]),
], { open: true }),
foldable(() => [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 font-semibold', text: config.dedication[e]?.name }) ]),
foldable(() => [div('flex flex-col gap-4 pt-2', { render: (e, _c) => _c ?? div('flex flex-col', [
div('flex flex-row justify-between', [dom('span', { class: 'text-base font-bold tracking-tight', text: config.dedication[e]?.name }) ]),
markdown(getText(config.features[e]?.description), undefined, { tags: { a: preview } }),
]), list: this.character.compiled.lists.dedication })], [
div("flex flex-row items-center justify-center gap-4", [
div("flex flex-row items-center justify-center gap-2", [ dom("div", { class: 'text-xl font-bold', text: "Spécialisations" }) ]),
div("flex flex-row items-center justify-center gap-4 ps-2", [
div("flex flex-row items-center justify-center gap-2", [ dom("div", { class: 'text-lg font-semibold', text: "Spécialisations" }) ]),
div("flex flex-1 border-t border-dashed border-light-50 dark:border-dark-50"),
]),
], { open: false }),
foldable(() => [
div("flex flex-row gap-x-4 gap-y-1 flex-wrap text-sm", { list: () => this.character.compiled.mastery ?? [], render: (e, _c) => proses('a', preview, [ text(masteryTexts[e].text) ], { href: masteryTexts[e].href, label: masteryTexts[e].text, class: 'text-sm text-light-70 dark:text-dark-70 cursor-help decoration-dotted underline', }) }),
div("flex flex-row gap-x-4 gap-y-1 flex-wrap text-sm", [
() => (this.character.compiled.spellranks.precision ?? 0) > 0 ? div('flex flex-row items-center gap-2', [ proses('a', preview, [ text('Précision') ], { href: 'regles/la-magie/magie#Les sorts de précision', label: 'Précision', class: 'text-sm text-light-70 dark:text-dark-70 cursor-help decoration-dotted underline' }), span('font-bold', () => this.character.compiled?.spellranks?.precision ?? 0) ]) : undefined,
() => (this.character.compiled.spellranks.knowledge ?? 0) > 0 ? div('flex flex-row items-center gap-2', [ proses('a', preview, [ text('Savoir') ], { href: 'regles/la-magie/magie#Les sorts de savoir', label: 'Savoir', class: 'text-sm text-light-70 dark:text-dark-70 cursor-help decoration-dotted underline' }), span('font-bold', () => this.character.compiled?.spellranks?.knowledge ?? 0) ]) : undefined,
() => (this.character.compiled.spellranks.instinct ?? 0) > 0 ? div('flex flex-row items-center gap-2', [ proses('a', preview, [ text('Instinct') ], { href: 'regles/la-magie/magie#Les sorts instinctif', label: 'Instinct', class: 'text-sm text-light-70 dark:text-dark-70 cursor-help decoration-dotted underline' }), span('font-bold', () => this.character.compiled?.spellranks?.instinct ?? 0) ]) : undefined,
])
], [
div("flex flex-row items-center justify-center gap-4 ps-2", [
div("flex flex-row items-center justify-center gap-2", [ dom("div", { class: 'text-lg font-semibold', text: "Maitrises" }) ]),
div("flex flex-1 border-t border-dashed border-light-50 dark:border-dark-50"),
]),
], { open: false, class: { content: 'flex flex-col gap-2 py-2' } }),
]) ];
}
spellTab()
@@ -2010,15 +2034,21 @@ export class CharacterSheet
return foldable(() => [
div('flex flex-row ps-4 p-1 border-l-4 border-light-35 dark:border-dark-35', [ markdown(spell.description) ]),
], [
div('flex flex-row items-center gap-4', [ dom('span', { class: 'font-semibold text-lg', text: spell.name ?? 'Inconnu' }), div('flex-1 border-b border-dashed border-light-50 dark:border-dark-50'), dom('span', { class: 'text-light-70 dark:text-dark-70', text: `${spell.cost ?? 0} mana` }) ]),
div('flex flex-row items-center gap-4', [
div('flex flex-row gap-8 items-baseline', [
dom('span', { class: 'font-semibold text-lg', text: spell.name ?? 'Inconnu' }),
span('text-light-100 dark:text-dark-100 text-sm italic', spell.speed === 'action' ? 'Action' : spell.speed === 'reaction' ? 'Réaction' : spell.speed === 'channeling' ? 'Canalisation' : `${spell.speed} minutes`),
]),
div('flex-1 border-b border-dashed border-light-50 dark:border-dark-50'),
dom('span', { class: 'text-light-70 dark:text-dark-70', text: `${spell.cost ?? 0} mana` })
]),
div('flex flex-row flex-wrap items-center gap-x-3 gap-y-1 text-light-70 dark:text-dark-70', [
span('flex flex-row', `Sort ${spell.type === 'instinct' ? 'd\'instinct' : spell.type === 'knowledge' ? 'de savoir' : 'de précision'} ${spell.rank === 4 ? 'unique' :`de rang ${spell.rank}`}`),
div('flex flex-row flex-wrap gap-1', (spell.elements ?? []).map(elementDom)),
spell.concentration ? proses('a', preview, [span('italic text-sm', 'concentration')], { href: '' }) : undefined,
span(undefined, typeof spell.range === 'number' && spell.range > 0 ? `${spell.range} case${spell.range > 1 ? 's' : ''}` : spell.range === 0 ? 'toucher' : 'personnel'),
span(undefined, typeof spell.speed === 'number' ? `${spell.speed} minute${spell.speed > 1 ? 's' : ''}` : spell.speed)
span(undefined, typeof spell.range === 'number' && spell.range > 0 ? `${spell.range} case${spell.range > 1 ? 's' : ''}` : spell.range === 0 ? 'Toucher' : 'Personnel'),
]),
], { open: false, class: { container: 'flex flex-col gap-1', icon: 'px-2' } })
], { open: false, class: { container: 'flex flex-col gap-1', title: 'ps-2' } })
}, list: () => sort([...(this.character.compiled.lists.spells ?? []), ...this.character.compiled.variables.spells]) }),
])
]
@@ -2036,7 +2066,7 @@ export class CharacterSheet
speed: [],
});
const container = div("border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 border-l absolute top-0 bottom-0 right-0 w-[10%] data-[state=active]:w-1/2 flex flex-col gap-4 text-light-100 dark:text-dark-100 p-8 transition-[width] transition-delay-[150ms]", [
const container = div("border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 border-l absolute top-0 bottom-0 right-0 w-[10%] data-[state=active]:w-1/2 max-lg:data-[state=active]:w-full flex flex-col gap-4 text-light-100 dark:text-dark-100 p-8 transition-[width] transition-delay-[150ms]", [
div("flex flex-row justify-between items-center", [
dom("h2", { class: "text-xl font-bold", text: "Ajouter un sort" }),
div('flex flex-row gap-4 items-center', [ dom('span', { class: 'italic text-light-70 dark:text-dark-70 text-sm' }, [ text(() => `${spells.length}/${this.character.compiled.spellslots} sort(s) maitrisé(s)`.replaceAll('(s)', spells.length > 1 ? 's' : '')) ]), tooltip(button(icon("radix-icons:cross-1", { width: 20, height: 20 }), () => {
@@ -2119,8 +2149,8 @@ export class CharacterSheet
return [
div('flex flex-col gap-2', [
div('flex flex-row justify-between items-center', [
div('flex flex-row justify-end items-center gap-8', [
div('flex flex-row gap-1 items-center', [ span('italic text-sm', 'Argent'), text("TODO") ]),
div('flex flex-row items-center gap-4', [
//TODO: money and components as special foldable with the content replacing the title on fold open.
]),
div('flex flex-row justify-end items-center gap-8', [
dom('span', { class: () => ['italic text-sm', { 'text-light-red dark:text-dark-red': this.character.power > this.character.compiled.itempower }], text: () => `Puissance magique: ${this.character.power}/${this.character.compiled.itempower}` }),
@@ -2134,9 +2164,9 @@ export class CharacterSheet
div('flex-1 min-w-0', [text('Nom')]),
div('w-32 shrink-0', [text('Stats')]),
div('w-10 shrink-0 text-center', [text('Qté')]),
div('w-16 shrink-0 text-center hidden lg:block', [text('Puis.')]),
div('w-12 shrink-0 text-center hidden lg:block', [text('Poids')]),
div('w-12 shrink-0 text-center hidden lg:block', [text('Charg.')]),
div('w-16 shrink-0 text-center hidden md:block', [text('Puis.')]),
div('w-12 shrink-0 text-center hidden md:block', [text('Poids')]),
div('w-12 shrink-0 text-center hidden md:block', [text('Charg.')]),
]),
div('flex flex-col', { list: this.character.compiled.variables.items, render: (e, _c) => {
if(_c) return _c;
@@ -2150,7 +2180,7 @@ export class CharacterSheet
return foldable(() => [
markdown(getText(item.description)),
div('flex flex-row gap-1', { list: () => e.improvements!.map(e => config.improvements[e]).filter(e => !!e), render: (e, _c) => _c ?? floater(div(() => ['flex flex-row gap-2 border px-2 rounded-full py-px', { 'border-accent-blue bg-accent-blue/20': !e.cursed, 'border-light-purple bg-light-purple/20 dark:border-dark-purple dark:bg-dark-purple/20': e.cursed }], [ span('text-sm font-semibold tracking-tight', e.name), div('flex flex-row gap-1 items-center', [icon('game-icons:bolt-drop', { width: 12, height: 12 }), span('text-sm font-light', e.power)]) ]), () => [markdown(getText(e.description), undefined, { tags: { a: preview } })], { class: 'max-w-96 max-h-48 p-2', position: "bottom-start" }) }),
div('flex flex-row flex-wrap gap-x-3 gap-y-1 text-xs text-light-70 dark:text-dark-70 lg:hidden', [
div('flex flex-row flex-wrap gap-x-3 gap-y-1 text-xs text-light-70 dark:text-dark-70 md:hidden', [
item.category === 'armor' ? span('', () => `Armure: ${item.health + ((e.state as ArmorState)?.health ?? 0) - ((e.state as ArmorState)?.loss ?? 0)}/${item.health + ((e.state as ArmorState)?.health ?? 0)} (${[item.absorb.static + ((e.state as ArmorState).absorb?.flat ?? 0) > 0 ? '-' + (item.absorb.static + ((e.state as ArmorState).absorb?.flat ?? 0)) : undefined, item.absorb.percent + ((e.state as ArmorState).absorb?.percent ?? 0) > 0 ? '-' + (item.absorb.percent + ((e.state as ArmorState).absorb?.percent ?? 0)) + '%' : undefined].filter(e => !!e).join('/')})`) : undefined,
item.category === 'weapon' ? span('', () => `${stringifyRoll(parseDice(`${item.damage.value}${(e.state as WeaponState)?.attack ? '+' + (e.state as WeaponState).attack : ''}`), this.character.compiled.modifier, true)} ${damageTypeTexts[item.damage.type].toLowerCase()}`) : undefined,
item.capacity ? span('', () => `Puissance: ${itempower()}/${item.capacity}`) : undefined,
@@ -2203,13 +2233,13 @@ export class CharacterSheet
undefined
]),
div('w-10 shrink-0 text-center text-sm', [text(() => e.amount.toString())]),
div('w-16 shrink-0 text-center text-xs hidden lg:block', [
div('w-16 shrink-0 text-center text-xs hidden md:block', [
span(() => ({ 'text-light-red dark:text-dark-red': !!item.capacity && itempower() > item.capacity }), () => item.capacity ? `${itempower()}/${item.capacity}` : '-')
]),
div('w-12 shrink-0 text-center text-xs hidden lg:block', [
div('w-12 shrink-0 text-center text-xs hidden md:block', [
e.amount > 1 && !!item.weight ? tooltip(span(() => ({ 'cursor-help underline decoration-1 decoration-dotted underline-offset-2': e.amount > 1 && !!item.weight }), () => item.weight ? `${item.weight * e.amount}` : '-'), `Poids unitaire: ${item.weight}`, 'bottom') : span('', () => item.weight ? `${item.weight * e.amount}` : '-')
]),
div('w-12 shrink-0 text-center text-xs hidden lg:block', [span('', () => item.charge ? `${item.charge}` : '-')]),
div('w-12 shrink-0 text-center text-xs hidden md:block', [span('', () => item.charge ? `${item.charge}` : '-')]),
])
], { open: false, class: { container: 'border-b border-dashed border-light-35 dark:border-dark-35 py-1', icon: 'px-1', content: 'px-4 pb-2 flex flex-col gap-1' } })
}})
@@ -2226,7 +2256,7 @@ export class CharacterSheet
power: { min: 0, max: Infinity },
});
const container = div("border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 border-l absolute top-0 bottom-0 right-0 w-[10%] data-[state=active]:w-1/2 flex flex-col gap-4 text-light-100 dark:text-dark-100 p-8 transition-[width] transition-delay-[150ms]", [
const container = div("border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 border-l absolute top-0 bottom-0 right-0 w-[10%] data-[state=active]:w-1/2 max-lg:data-[state=active]:w-full flex flex-col gap-4 text-light-100 dark:text-dark-100 p-8 transition-[width] transition-delay-[150ms]", [
div("flex flex-row justify-between items-center mb-4", [
dom("h2", { class: "text-xl font-bold", text: "Gestion de l'inventaire" }),
div('flex flex-row gap-8 items-center justify-end', [
@@ -2309,7 +2339,7 @@ export class CharacterSheet
const itempower = () => current.item && config.items[current.item.id] !== undefined ? ((config.items[current.item.id]!.powercost ?? 0) + (current.item.improvements?.reduce((_p, _v) => (config.improvements[_v]?.power ?? 0) + _p, 0) ?? 0)) : 0;
const container = div("border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 border-l absolute top-0 bottom-0 right-0 w-[10%] data-[state=active]:w-1/2 flex flex-col gap-4 text-light-100 dark:text-dark-100 p-8 transition-[width] transition-delay-[150ms]", [
const container = div("border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 border-l absolute top-0 bottom-0 right-0 w-[10%] data-[state=active]:w-1/2 max-lg:data-[state=active]:w-full flex flex-col gap-4 text-light-100 dark:text-dark-100 p-8 transition-[width] transition-delay-[150ms]", [
div("flex flex-row justify-between items-center mb-4", [
dom("h2", { class: "text-xl font-bold", text: "Améliorations" }),
div('flex flex-row gap-8 items-center justify-end', [
@@ -2402,7 +2432,7 @@ export class CharacterSheet
() => this.character.compiled.defense.static + this.character.compiled.defense.passiveparry + this.character.compiled.defense.activedodge,
];
return div('flex flex-col items-center', [
span('text-lg font-bold', () => !this.character.compiled ? '-' : clamp(defs[i](), 0, this.character.compiled.defense.hardcap)),
span('text-lg font-bold', () => !this.character.compiled ? '-' : clamp(defs[i]!(), 0, this.character.compiled.defense.hardcap)),
span('text-xs text-light-70 dark:text-dark-70', label),
]);
})