You've already forked obsidian-visualiser
Rollback CharacterEditor to the previous version
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
import type { Ability, Alignment, ArmorConfig, ArmorState, Character, CharacterConfig, CompiledCharacter, DamageType, ImprovementConfig, FeatureEquipment, FeatureID, FeatureItem, FeatureList, FeatureState, FeatureValue, ItemConfig, ItemState, Level, MainStat, MundaneState, Resistance, SpellConfig, SpellElement, SpellType, TrainingLevel, TreeStructure, WeaponConfig, WeaponState, WeaponType, WondrousState, CraftingType } from "~/types/character";
|
||||
import type { Ability, Alignment, ArmorConfig, ArmorState, Character, CharacterConfig, CompiledCharacter, DamageType, ImprovementConfig, FeatureEquipment, FeatureID, FeatureItem, FeatureList, FeatureState, FeatureValue, ItemConfig, ItemState, Level, MainStat, MundaneState, Resistance, SpellConfig, SpellElement, SpellType, TrainingLevel, TreeStructure, WeaponConfig, WeaponState, WeaponType, WondrousState, CraftingType, CharacterVariables } from "~/types/character";
|
||||
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 } from "#shared/dom";
|
||||
import { followermenu, fullblocker, tooltip } from "#shared/floating";
|
||||
import { clamp } from "#shared/general";
|
||||
import { clamp, deepEquals } from "#shared/general";
|
||||
import markdown from "#shared/markdown";
|
||||
import { getText } from "#shared/i18n";
|
||||
import type { User } from "~/types/auth";
|
||||
@@ -48,7 +48,7 @@ export const defaultCharacter: Character = {
|
||||
exhaustion: 0,
|
||||
sickness: [],
|
||||
poisons: [],
|
||||
money: 0,
|
||||
components: { money: 0, natural: 0, mineral: 0, processed: 0, magical: 0 },
|
||||
transformed: false,
|
||||
},
|
||||
|
||||
@@ -268,7 +268,7 @@ export const CharacterVariablesValidation = z.object({
|
||||
spells: z.array(z.string()),
|
||||
items: z.array(ItemStateValidation),
|
||||
|
||||
money: z.number(),
|
||||
components: z.object({ natural: z.number(), mineral: z.number(), processed: z.number(), magical: z.number(), money: z.number() }),
|
||||
transformed: z.boolean(),
|
||||
});
|
||||
export const CharacterValidation = z.object({
|
||||
@@ -286,7 +286,7 @@ export const CharacterValidation = z.object({
|
||||
owner: z.number(),
|
||||
username: z.string().optional(),
|
||||
visibility: z.enum(["public", "private"]),
|
||||
thumbnail: z.any(),
|
||||
thumbnail: z.any().optional(),
|
||||
});
|
||||
|
||||
type Property = { value: number | string | false, id: string, operation: "set" | "add" | "min" };
|
||||
@@ -720,7 +720,7 @@ function setProperty<T>(root: any, path: string, value: T | ((old: T) => T), for
|
||||
if(force || object.hasOwnProperty(arr.slice(-1)[0]!))
|
||||
object[arr.slice(-1)[0]!] = typeof value === 'function' ? (value as (old: T) => T)(object[arr.slice(-1)[0]!]) : value;
|
||||
}
|
||||
/* export class CharacterBuilder extends CharacterCompiler
|
||||
export class CharacterBuilder extends CharacterCompiler
|
||||
{
|
||||
private _container: HTMLElement;
|
||||
private _content?: HTMLElement;
|
||||
@@ -1074,10 +1074,7 @@ class LevelPicker extends BuilderTab
|
||||
{
|
||||
super(builder);
|
||||
|
||||
this._levelInput = numberpicker({ defaultValue: this._builder.character.level, min: 1, max: 20, input: (value) => {
|
||||
this._builder.character.level = value;
|
||||
this.updateLevel();
|
||||
} });
|
||||
this._levelInput = 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._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 = Object.entries(config.peoples[this._builder.character.people!]!.options).map(
|
||||
@@ -1417,7 +1414,7 @@ class AspectPicker extends BuilderTab
|
||||
|
||||
return true;
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
export const masteryTexts: Record<CompiledCharacter['mastery'][number], { text: string, href: string }> = {
|
||||
"armor/light": { text: "Armure légère", href: "regles/annexes/equipement#Les armures légères" },
|
||||
@@ -1523,99 +1520,74 @@ export const stateFactory = (item: ItemConfig) => {
|
||||
}
|
||||
return state;
|
||||
}
|
||||
export class CharacterSheet extends CharacterCompiler
|
||||
export class CharacterSheet
|
||||
{
|
||||
private user: ComputedRef<User | null>;
|
||||
container: HTMLElement = div('flex flex-1 h-full w-full items-start justify-between');
|
||||
private editingDOM: HTMLElement = div();
|
||||
private readingDOM: HTMLElement = div();
|
||||
private state: { exists: boolean, edit: boolean };
|
||||
private character: CharacterCompiler = reactive(new CharacterCompiler(defaultCharacter));
|
||||
container: HTMLElement = div('flex flex-1 h-full w-full items-start justify-center');
|
||||
private tabs?: HTMLElement;
|
||||
private tab: string = localStorage.getItem('character-tab') ?? 'actions';
|
||||
|
||||
private _variableDebounce: NodeJS.Timeout = setTimeout(() => {});
|
||||
|
||||
ws?: Socket;
|
||||
constructor(id: string, user: ComputedRef<User | null>, editing: boolean = false)
|
||||
constructor(id: string, user: ComputedRef<User | null>)
|
||||
{
|
||||
super(defaultCharacter);
|
||||
|
||||
this.user = user;
|
||||
|
||||
const load = div("flex justify-center items-center w-full h-full", [ loading('large') ]);
|
||||
this.container.replaceChildren(load);
|
||||
this.state = reactive({ exists: id !== 'new', edit: id === 'new' || editing });
|
||||
|
||||
this.render();
|
||||
this.edit();
|
||||
useRequestFetch()(`/api/character/${id}`).then(character => {
|
||||
if(character)
|
||||
{
|
||||
this.character.character = reactive(character);
|
||||
|
||||
if(this.state.exists)
|
||||
{
|
||||
useRequestFetch()(`/api/character/${id}`).then(character => {
|
||||
if(character)
|
||||
if(character.campaign)
|
||||
{
|
||||
this.character = reactive(character);
|
||||
this.ws = new Socket(`/ws/campaign/${character.campaign}`, true);
|
||||
|
||||
if(character.campaign)
|
||||
{
|
||||
//this.ws = new Socket(`/ws/campaign/${character.campaign}`, true);
|
||||
|
||||
/* this.ws.handleMessage('SYNC', () => {
|
||||
useRequestFetch()(`/api/character/${id}`).then(character => {
|
||||
if(character)
|
||||
{
|
||||
this.character!.character = reactive(character);
|
||||
this.character!.values;
|
||||
'update' in this.container! && this.container!.update!(true);
|
||||
}
|
||||
});
|
||||
})
|
||||
this.ws.handleMessage<{ action: 'set' | 'add' | 'remove', key: keyof CharacterVariables, value: any }>('VARIABLE', (variable) => {
|
||||
const prop = this.character!.character.variables[variable.key];
|
||||
if(variable.action === 'set')
|
||||
this.character!.character.variables[variable.key] = variable.value;
|
||||
else if(Array.isArray(prop))
|
||||
this.ws.handleMessage('SYNC', () => {
|
||||
useRequestFetch()(`/api/character/${id}`).then(character => {
|
||||
if(character) this.character!.character = reactive(character);
|
||||
});
|
||||
})
|
||||
this.ws.handleMessage<{ action: 'set' | 'add' | 'remove', key: keyof CharacterVariables, value: any }>('VARIABLE', (variable) => {
|
||||
const prop = this.character!.character.variables[variable.key];
|
||||
if(variable.action === 'set')
|
||||
this.character!.character.variables[variable.key] = variable.value;
|
||||
else if(Array.isArray(prop))
|
||||
{
|
||||
if(variable.action === 'add')
|
||||
prop.push(variable.value);
|
||||
else if(variable.action === 'remove')
|
||||
{
|
||||
if(variable.action === 'add')
|
||||
prop.push(variable.value);
|
||||
else if(variable.action === 'remove')
|
||||
{
|
||||
const idx = prop.findIndex(e => deepEquals(e, variable.value));
|
||||
if(idx !== -1) prop.splice(idx, 1);
|
||||
}
|
||||
const idx = prop.findIndex(e => deepEquals(e, variable.value));
|
||||
if(idx !== -1) prop.splice(idx, 1);
|
||||
}
|
||||
}) */
|
||||
}
|
||||
|
||||
document.title = `d[any] - ${character.name}`;
|
||||
load.remove();
|
||||
|
||||
this.container.replaceChildren(this.readingDOM);
|
||||
}
|
||||
})
|
||||
}
|
||||
else
|
||||
throw new Error('Cannot find the requested character from its ID');
|
||||
}).catch((e) => {
|
||||
console.error(e);
|
||||
this.container.replaceChildren(div('flex flex-col items-center justify-center flex-1 h-full gap-4', [
|
||||
span('text-2xl font-bold tracking-wider', 'Personnage introuvable'),
|
||||
span(undefined, 'Ce personnage n\'existe pas ou est privé.'),
|
||||
div('flex flex-row gap-4 justify-center items-center', [
|
||||
button(text('Personnages publics'), () => useRouter().push({ name: 'character-list' }), 'px-2 py-1'),
|
||||
button(text('Créer un personange'), () => useRouter().push({ name: 'character-id-edit', params: { id: 'new' } }), 'px-2 py-1')
|
||||
]),
|
||||
span('text-sm italic text-light-70 dark:text-dark-70', e.toString())
|
||||
]))
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
this.state.edit = true;
|
||||
|
||||
this.container.replaceChildren(this.editingDOM, this.readingDOM);
|
||||
}
|
||||
document.title = `d[any] - ${character.name}`;
|
||||
load.remove();
|
||||
|
||||
reactivity(this.state, (state) => {
|
||||
state.edit ? this.container.replaceChildren(this.editingDOM, this.readingDOM) : this.container.replaceChildren(this.readingDOM);
|
||||
})
|
||||
this.render();
|
||||
}
|
||||
else
|
||||
throw new Error('Cannot find the requested character from its ID');
|
||||
}).catch((e) => {
|
||||
console.error(e);
|
||||
this.container.replaceChildren(div('flex flex-col items-center justify-center flex-1 h-full gap-4', [
|
||||
span('text-2xl font-bold tracking-wider', 'Personnage introuvable'),
|
||||
span(undefined, 'Ce personnage n\'existe pas ou est privé.'),
|
||||
div('flex flex-row gap-4 justify-center items-center', [
|
||||
button(text('Personnages publics'), () => useRouter().push({ name: 'character-list' }), 'px-2 py-1'),
|
||||
button(text('Créer un personange'), () => useRouter().push({ name: 'character-id-edit', params: { id: 'new' } }), 'px-2 py-1')
|
||||
]),
|
||||
span('text-sm italic text-light-70 dark:text-dark-70', e.toString())
|
||||
]))
|
||||
});
|
||||
}
|
||||
render()
|
||||
{
|
||||
@@ -1637,7 +1609,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
|
||||
{ id: 'inventory', title: [ text('Inventaire') ], content: () => this.itemsTab() },
|
||||
|
||||
{ id: 'aspect', title: [ span(() => ({ 'relative before:absolute before:top-0 before:-right-2 before:w-2 before:h-2 before:rounded-full before:bg-accent-blue': this.compiled?.variables?.transformed ?? false }), 'Aspect') ], content: () => this.aspectTab() },
|
||||
{ id: 'aspect', title: [ span(() => ({ 'relative before:absolute before:top-0 before:-right-2 before:w-2 before:h-2 before:rounded-full before:bg-accent-blue': this.character.compiled?.variables?.transformed ?? false }), 'Aspect') ], content: () => this.aspectTab() },
|
||||
|
||||
{ id: 'effects', title: [ text('Afflictions') ], content: () => this.effectsTab() },
|
||||
|
||||
@@ -1653,90 +1625,80 @@ export class CharacterSheet extends CharacterCompiler
|
||||
}),
|
||||
])
|
||||
] },
|
||||
], { 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; localStorage.setItem('this.compiled-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; localStorage.setItem('this.character.compiled-tab', v); } });
|
||||
|
||||
this.readingDOM = div('flex flex-col justify-start gap-1 h-full w-full min-w-half', [
|
||||
div("flex flex-row gap-4 justify-between", [
|
||||
div(),
|
||||
|
||||
div("flex lg:flex-row flex-col gap-6 items-center justify-center", [
|
||||
div("flex gap-6 items-center", [
|
||||
div('inline-flex select-none items-center justify-center overflow-hidden align-middle h-16', [
|
||||
div('text-light-100 dark:text-dark-100 leading-1 flex p-4 items-center justify-center bg-light-25 dark:bg-dark-25 font-medium', [
|
||||
icon("radix-icons:person", { width: 16, height: 16 }),
|
||||
])
|
||||
]),
|
||||
|
||||
div("flex flex-col", [
|
||||
span("text-xl font-bold", () => this.compiled.name === '' ? "Inconnu" : this.compiled.name),
|
||||
span("text-sm", () => this.compiled.username ? `De ${this.compiled.username}` : `De ${this.user.value?.username}`)
|
||||
]),
|
||||
|
||||
div("flex flex-col", [
|
||||
span("font-bold", () =>`Niveau ${this.compiled?.level ?? 0}`),
|
||||
span('', () => this.compiled && this.compiled.race ? config.peoples[this.compiled.race]?.name ?? 'Peuple inconnu' : '')
|
||||
this.container.replaceChildren(div('flex flex-col justify-start gap-1 h-full w-full min-w-half', [
|
||||
div("flex lg:flex-row flex-col gap-6 items-center justify-center", [
|
||||
div("flex gap-6 items-center", [
|
||||
div('inline-flex select-none items-center justify-center overflow-hidden align-middle h-16', [
|
||||
div('text-light-100 dark:text-dark-100 leading-1 flex p-4 items-center justify-center bg-light-25 dark:bg-dark-25 font-medium', [
|
||||
icon("radix-icons:person", { width: 16, height: 16 }),
|
||||
])
|
||||
]),
|
||||
|
||||
div("flex flex-row lg:border-l border-light-35 dark:border-dark-35 py-4 ps-4 gap-8", [
|
||||
div("flex flex-row items-center gap-2 text-3xl font-light", [
|
||||
text("PV: "),
|
||||
() => this.compiled ? dom("span", {
|
||||
class: "font-bold px-2 border-transparent border cursor-pointer hover:border-light-35 dark:hover:border-dark-35",
|
||||
text: () => `${this.compiled.health - this.compiled.variables.health}`,
|
||||
listeners: { click: healthPanel.show },
|
||||
}) : undefined,
|
||||
() => this.compiled ? text('/') : text('-'),
|
||||
() => this.compiled ? text(() => this.compiled.health) : undefined,
|
||||
]),
|
||||
div("flex flex-row items-center gap-2 text-3xl font-light", [
|
||||
text("Mana: "),
|
||||
() => this.compiled ? dom("span", {
|
||||
class: "font-bold px-2 border-transparent border cursor-pointer hover:border-light-35 dark:hover:border-dark-35",
|
||||
text: () => `${this.compiled.mana - this.compiled.variables.mana}`,
|
||||
listeners: { click: healthPanel.show },
|
||||
}) : undefined,
|
||||
() => this.compiled ? text('/') : text('-'),
|
||||
() => this.compiled ? text(() => this.compiled.mana) : undefined,
|
||||
]),
|
||||
div("flex flex-col", [
|
||||
span("text-xl font-bold", () => this.character.compiled.name === '' ? "Inconnu" : this.character.compiled.name),
|
||||
span("text-sm", () => this.character.compiled.username ? `De ${this.character.compiled.username}` : `De ${this.user.value?.username}`)
|
||||
]),
|
||||
|
||||
div("flex flex-col", [
|
||||
span("font-bold", () =>`Niveau ${this.character.compiled?.level ?? 0}`),
|
||||
span('', () => this.character.compiled && this.character.compiled.race ? config.peoples[this.character.compiled.race]?.name ?? 'Peuple inconnu' : '')
|
||||
])
|
||||
]),
|
||||
|
||||
div("self-center", [
|
||||
() => this.user.value && this.compiled && this.user.value.id === this.compiled.owner ?
|
||||
this.state.edit ? button(icon("ph:floppy-disk"), () => this.saveEdits(), "p-1") : button(icon("radix-icons:pencil-2"), () => this.state.edit = true, "p-1")
|
||||
: div(),
|
||||
div("flex flex-row lg:border-l border-light-35 dark:border-dark-35 py-4 ps-4 gap-8", [
|
||||
div("flex flex-row items-center gap-2 text-3xl font-light", [
|
||||
text("PV: "),
|
||||
() => this.character.compiled ? dom("span", {
|
||||
class: "font-bold px-2 border-transparent border cursor-pointer hover:border-light-35 dark:hover:border-dark-35",
|
||||
text: () => `${this.character.compiled.health - this.character.compiled.variables.health}`,
|
||||
listeners: { click: healthPanel.show },
|
||||
}) : undefined,
|
||||
() => this.character.compiled ? text('/') : text('-'),
|
||||
() => this.character.compiled ? text(() => this.character.compiled.health) : undefined,
|
||||
]),
|
||||
div("flex flex-row items-center gap-2 text-3xl font-light", [
|
||||
text("Mana: "),
|
||||
() => this.character.compiled ? dom("span", {
|
||||
class: "font-bold px-2 border-transparent border cursor-pointer hover:border-light-35 dark:hover:border-dark-35",
|
||||
text: () => `${this.character.compiled.mana - this.character.compiled.variables.mana}`,
|
||||
listeners: { click: healthPanel.show },
|
||||
}) : undefined,
|
||||
() => this.character.compiled ? text('/') : text('-'),
|
||||
() => this.character.compiled ? text(() => this.character.compiled.mana) : undefined,
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
|
||||
div("flex flex-row justify-center gap-2 p-4 border-b border-light-35 dark:border-dark-35", [
|
||||
div("flex gap-2 flex-row items-center justify-between", [
|
||||
div("flex flex-col items-center px-2", [
|
||||
() => !this.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.compiled.variables.transformed && config.aspects[this.compiled.aspect.id]?.stat === 'strength' }], () => `+${this.compiled.modifier.strength}`),
|
||||
() => !this.character.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.character.compiled.variables.transformed && config.aspects[this.character.compiled.aspect.id]?.stat === 'strength' }], () => `+${this.character.compiled.modifier.strength}`),
|
||||
span("text-sm ", "Force")
|
||||
]),
|
||||
div("flex flex-col items-center px-2", [
|
||||
() => !this.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.compiled.variables.transformed && config.aspects[this.compiled.aspect.id]?.stat === 'dexterity' }], () => `+${this.compiled.modifier.dexterity}`),
|
||||
() => !this.character.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.character.compiled.variables.transformed && config.aspects[this.character.compiled.aspect.id]?.stat === 'dexterity' }], () => `+${this.character.compiled.modifier.dexterity}`),
|
||||
span("text-sm ", "Dextérité")
|
||||
]),
|
||||
div("flex flex-col items-center px-2", [
|
||||
() => !this.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.compiled.variables.transformed && config.aspects[this.compiled.aspect.id]?.stat === 'constitution' }], () => `+${this.compiled.modifier.constitution}`),
|
||||
() => !this.character.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.character.compiled.variables.transformed && config.aspects[this.character.compiled.aspect.id]?.stat === 'constitution' }], () => `+${this.character.compiled.modifier.constitution}`),
|
||||
span("text-sm ", "Constitution")
|
||||
]),
|
||||
div("flex flex-col items-center px-2", [
|
||||
() => !this.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.compiled.variables.transformed && config.aspects[this.compiled.aspect.id]?.stat === 'intelligence' }], () => `+${this.compiled.modifier.intelligence}`),
|
||||
() => !this.character.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.character.compiled.variables.transformed && config.aspects[this.character.compiled.aspect.id]?.stat === 'intelligence' }], () => `+${this.character.compiled.modifier.intelligence}`),
|
||||
span("text-sm ", "Intelligence")
|
||||
]),
|
||||
div("flex flex-col items-center px-2", [
|
||||
() => !this.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.compiled.variables.transformed && config.aspects[this.compiled.aspect.id]?.stat === 'curiosity' }], () => `+${this.compiled.modifier.curiosity}`),
|
||||
() => !this.character.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.character.compiled.variables.transformed && config.aspects[this.character.compiled.aspect.id]?.stat === 'curiosity' }], () => `+${this.character.compiled.modifier.curiosity}`),
|
||||
span("text-sm ", "Curiosité")
|
||||
]),
|
||||
div("flex flex-col items-center px-2", [
|
||||
() => !this.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.compiled.variables.transformed && config.aspects[this.compiled.aspect.id]?.stat === 'charisma' }], () => `+${this.compiled.modifier.charisma}`),
|
||||
() => !this.character.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.character.compiled.variables.transformed && config.aspects[this.character.compiled.aspect.id]?.stat === 'charisma' }], () => `+${this.character.compiled.modifier.charisma}`),
|
||||
span("text-sm ", "Charisme")
|
||||
]),
|
||||
div("flex flex-col items-center px-2", [
|
||||
() => !this.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.compiled.variables.transformed && config.aspects[this.compiled.aspect.id]?.stat === 'psyche' }], () => `+${this.compiled.modifier.psyche}`),
|
||||
() => !this.character.compiled ? span('text-xl font-bold', '-') : span(() => ["text-xl font-bold", { 'text-accent-blue': this.character.compiled.variables.transformed && config.aspects[this.character.compiled.aspect.id]?.stat === 'psyche' }], () => `+${this.character.compiled.modifier.psyche}`),
|
||||
span("text-sm ", "Psyché")
|
||||
])
|
||||
]),
|
||||
@@ -1745,11 +1707,11 @@ export class CharacterSheet extends CharacterCompiler
|
||||
|
||||
div("flex gap-2 flex-row items-center justify-between", [
|
||||
div("flex flex-col px-2 items-center", [
|
||||
span("text-xl font-bold", () => !this.compiled ? '-' : `+${this.compiled.initiative}`),
|
||||
span("text-xl font-bold", () => !this.character.compiled ? '-' : `+${this.character.compiled.initiative}`),
|
||||
span("text-sm ", "Initiative")
|
||||
]),
|
||||
div("flex flex-col px-2 items-center", [
|
||||
span("text-xl font-bold", () => !this.compiled ? '-' : this.compiled.speed === false ? "N/A" : `${this.compiled.speed}`),
|
||||
span("text-xl font-bold", () => !this.character.compiled ? '-' : this.character.compiled.speed === false ? "N/A" : `${this.character.compiled.speed}`),
|
||||
span("text-sm ", "Course")
|
||||
])
|
||||
]),
|
||||
@@ -1759,15 +1721,15 @@ export class CharacterSheet extends CharacterCompiler
|
||||
div("flex gap-2 flex-row items-center justify-between", [
|
||||
icon("game-icons:checked-shield", { width: 32, height: 32 }),
|
||||
div("flex flex-col px-2 items-center", [
|
||||
span(" text-xl font-bold", () => !this.compiled ? '-' : clamp(this.compiled.defense.static + this.compiled.defense.passiveparry + this.compiled.defense.passivedodge, 0, this.compiled.defense.hardcap)),
|
||||
span(" text-xl font-bold", () => !this.character.compiled ? '-' : clamp(this.character.compiled.defense.static + this.character.compiled.defense.passiveparry + this.character.compiled.defense.passivedodge, 0, this.character.compiled.defense.hardcap)),
|
||||
span("text-sm ", "Passive")
|
||||
]),
|
||||
div("flex flex-col px-2 items-center", [
|
||||
span(" text-xl font-bold", () => !this.compiled ? '-' : clamp(this.compiled.defense.static + this.compiled.defense.activeparry + this.compiled.defense.passivedodge, 0, this.compiled.defense.hardcap)),
|
||||
span(" text-xl font-bold", () => !this.character.compiled ? '-' : clamp(this.character.compiled.defense.static + this.character.compiled.defense.activeparry + this.character.compiled.defense.passivedodge, 0, this.character.compiled.defense.hardcap)),
|
||||
span("text-sm ", "Blocage")
|
||||
]),
|
||||
div("flex flex-col px-2 items-center", [
|
||||
span(" text-xl font-bold", () => !this.compiled ? '-' : clamp(this.compiled.defense.static + this.compiled.defense.passiveparry + this.compiled.defense.activedodge, 0, this.compiled.defense.hardcap)),
|
||||
span(" text-xl font-bold", () => !this.character.compiled ? '-' : clamp(this.character.compiled.defense.static + this.character.compiled.defense.passiveparry + this.character.compiled.defense.activedodge, 0, this.character.compiled.defense.hardcap)),
|
||||
span("text-sm ", "Esquive")
|
||||
])
|
||||
]),
|
||||
@@ -1785,7 +1747,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
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.compiled ? '-' : `+${this.compiled.abilities[ability as Ability] ?? 0}`),
|
||||
span("font-bold text-base text-light-100 dark:text-dark-100", () => !this.character.compiled ? '-' : `+${this.character.compiled.abilities[ability as Ability] ?? 0}`),
|
||||
])
|
||||
)
|
||||
),
|
||||
@@ -1795,11 +1757,11 @@ export class CharacterSheet extends CharacterCompiler
|
||||
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.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", { 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.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.compiled?.spellranks?.precision ?? 0) ]) : undefined,
|
||||
() => (this.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.compiled?.spellranks?.knowledge ?? 0) ]) : undefined,
|
||||
() => (this.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.compiled?.spellranks?.instinct ?? 0) ]) : undefined,
|
||||
() => (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,
|
||||
])
|
||||
])
|
||||
]),
|
||||
@@ -1808,64 +1770,17 @@ export class CharacterSheet extends CharacterCompiler
|
||||
|
||||
this.tabs,
|
||||
])
|
||||
]);
|
||||
|
||||
reactivity(this.character, (c) => {
|
||||
if(c)
|
||||
{
|
||||
c.notes ??= { public: '', private: '' };
|
||||
|
||||
publicNotes.onChange = (v) => c.notes!.public = v;
|
||||
privateNotes.onChange = (v) => c.notes!.private = v;
|
||||
|
||||
publicNotes.content = c.notes!.public!;
|
||||
privateNotes.content = c.notes!.private!;
|
||||
}
|
||||
});
|
||||
}
|
||||
edit()
|
||||
{
|
||||
const editingData: Record<number, string[]> = reactive({
|
||||
1: ["Peuple", "Entrainement", "Compétences", "Aspect", "Spécialisations"],
|
||||
2: ["Entrainement"],
|
||||
3: ["Entrainement"],
|
||||
4: ["Entrainement"],
|
||||
5: ["Entrainement"],
|
||||
6: ["Entrainement"],
|
||||
7: ["Entrainement"],
|
||||
8: ["Entrainement"],
|
||||
9: ["Entrainement"],
|
||||
10: ["Entrainement"],
|
||||
11: ["Entrainement"],
|
||||
12: ["Entrainement"],
|
||||
13: ["Entrainement"],
|
||||
14: ["Entrainement"],
|
||||
15: ["Entrainement"],
|
||||
16: ["Entrainement"],
|
||||
17: ["Entrainement"],
|
||||
18: ["Entrainement"],
|
||||
19: ["Entrainement"],
|
||||
20: ["Entrainement"],
|
||||
})
|
||||
this.editingDOM = div('flex flex-1 max-w-full flex-col align-center relative', [
|
||||
div('h-full w-0 border-l-2 border-light-35 dark:border-dark-35 absolute z-0 left-[89px]'),
|
||||
...Array(20).fill(0).map((_, i) => div(() => ['flex flex-row gap-4', { 'opacity-30': (this.character?.level ?? 0) < (i + 1) }], [
|
||||
div('flex flex-row gap-2 justify-end items-start w-24 py-4', [
|
||||
div('flex flex-row items-center gap-2', [ span('italic text-xs tracking-tight text-end', `Niveau ${i + 1}`), span('w-3 h-3 rounded-full items-center justify-center bg-light-50 dark:bg-dark-50 z-10') ]),
|
||||
]),
|
||||
div('flex flex-col px-2 items-center justify-center divide-y divide-light-35 dark:divide-dark-35', { list: editingData[i + 1], render: (e, _c) => _c ?? span('flex px-2 w-full py-2 items-center justify-center cursor-pointer hover:bg-light-20 dark:hover:bg-dark-20', e) }),
|
||||
]))
|
||||
]);
|
||||
]));
|
||||
}
|
||||
saveVariables()
|
||||
{
|
||||
if(!this._character) return;
|
||||
if(!this.character.character) return;
|
||||
clearTimeout(this._variableDebounce);
|
||||
this._variableDebounce = setTimeout(() => {
|
||||
if(!this._character) return;
|
||||
useRequestFetch()(`/api/character/${this._character.id}/variables`, {
|
||||
if(!this.character.character) return;
|
||||
useRequestFetch()(`/api/character/${this.character.character.id}/variables`, {
|
||||
method: 'POST',
|
||||
body: raw(this._character.variables),
|
||||
body: raw(this.character.character.variables),
|
||||
}).then(() => {}).catch(() => {
|
||||
Toaster.add({ type: 'error', content: 'Impossible de mettre à jour les données', duration: 5000, timer: true });
|
||||
})
|
||||
@@ -1873,49 +1788,14 @@ export class CharacterSheet extends CharacterCompiler
|
||||
}
|
||||
saveNotes()
|
||||
{
|
||||
if(!this._character) return Promise.resolve();
|
||||
return useRequestFetch()(`/api/character/${this._character.id}/notes`, {
|
||||
if(!this.character.character) return Promise.resolve();
|
||||
return useRequestFetch()(`/api/character/${this.character.character.id}/notes`, {
|
||||
method: 'POST',
|
||||
body: this._character.notes,
|
||||
body: this.character.character.notes,
|
||||
}).then(() => {}).catch(() => {
|
||||
Toaster.add({ type: 'error', content: 'Impossible de mettre à jour les données', duration: 5000, timer: true });
|
||||
});
|
||||
}
|
||||
async saveEdits()
|
||||
{
|
||||
if(!this.character)
|
||||
return;
|
||||
|
||||
if(!this.state.exists)
|
||||
{
|
||||
const result = await useRequestFetch()(`/api/character`, {
|
||||
method: 'post',
|
||||
body: this.character,
|
||||
onResponseError: (e) => {
|
||||
Toaster.add({ title: 'Erreur d\'enregistrement', content: e.response.status === 401 ? "Vous n'êtes pas autorisé à effectué cette opération" : e.response.statusText, type: 'error', closeable: true, duration: 25000, timer: true });
|
||||
this.character!.id = -1;
|
||||
}
|
||||
});
|
||||
|
||||
if(result !== undefined) this.character.id = this.compiled.id = result as number;
|
||||
|
||||
Toaster.add({ content: 'Personnage créé', type: 'success', duration: 25000, timer: true });
|
||||
useRouter().push({ name: 'character-id', params: { id: this.compiled.id } });
|
||||
this.state.edit = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
await useRequestFetch()(`/api/character/${this.character.id}`, {
|
||||
method: 'post',
|
||||
body: this.character,
|
||||
onResponseError: (e) => {
|
||||
Toaster.add({ title: 'Erreur d\'enregistrement', content: e.response.status === 401 ? "Vous n'êtes pas autorisé à effectué cette opération" : e.response.statusText, type: 'error', closeable: true, duration: 25000, timer: true });
|
||||
}
|
||||
});
|
||||
Toaster.add({ content: 'Personnage enregistré', type: 'success', duration: 25000, timer: true });
|
||||
this.state.edit = false;
|
||||
}
|
||||
}
|
||||
healthPanel()
|
||||
{
|
||||
const inputs = reactive({
|
||||
@@ -1934,7 +1814,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
});
|
||||
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]", [
|
||||
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.compiled ? span('text-xl font-bold', '-') : div('flex flex-row items-center gap-1', [ span('text-xl font-bold', () => (this.compiled.health - this.compiled.variables.health)), text('/'), text(() => this.compiled.health) ]) ]),
|
||||
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 }), () => {
|
||||
setTimeout(blocker.close, 150);
|
||||
container.setAttribute('data-state', 'inactive');
|
||||
@@ -1942,25 +1822,25 @@ export class CharacterSheet extends CharacterCompiler
|
||||
]),
|
||||
foldable([
|
||||
div('flex flex-col w-full gap-2 ms-2 ps-4 border-l border-light-35 dark:border-dark-35', DAMAGE_TYPES.map((e) => div('flex flex-row justify-between items-center', [
|
||||
span('text-lg', damageTypeTexts[e]), div('flex flew-row gap-4 items-center justify-end', [ () => this.compiled.bonus.damage[e] ? tooltip(span('w-8 font-bold', protectionTexts[this.compiled.bonus.damage[e] as 'resistance' | 'immunity' | 'vulnerability'].summary), protectionTexts[this.compiled.bonus.damage[e] as 'resistance' | 'immunity' | 'vulnerability'].detail, 'left') : div('w-8'), numberpicker({ defaultValue: () => inputs.health[e], input: v => { inputs.health[e] = v; inputs.health.sum = DAMAGE_TYPES.reduce((p, v) => p + inputs.health[v], 0) }, min: 0, class: 'h-8 !m-0' }), div('w-8') ]),
|
||||
span('text-lg', damageTypeTexts[e]), div('flex flew-row gap-4 items-center justify-end', [ () => this.character.compiled.bonus.damage[e] ? tooltip(span('w-8 font-bold', protectionTexts[this.character.compiled.bonus.damage[e] as 'resistance' | 'immunity' | 'vulnerability'].summary), protectionTexts[this.character.compiled.bonus.damage[e] as 'resistance' | 'immunity' | 'vulnerability'].detail, 'left') : div('w-8'), numberpicker({ defaultValue: () => inputs.health[e], input: v => { inputs.health[e] = v; inputs.health.sum = DAMAGE_TYPES.reduce((p, v) => p + inputs.health[v], 0) }, min: 0, class: 'h-8 !m-0' }), div('w-8') ]),
|
||||
])))
|
||||
], [
|
||||
div('flex flex-row justify-between items-center', [
|
||||
() => !this.compiled ? undefined : span('text-lg', 'Total'), div('flex flew-row gap-4 justify-end', [
|
||||
() => this.armor.state ? tooltip(button(div('flex flex-row gap-2 items-center text-sm', [ icon('game-icons:shoulder-armor', { width: 16, height: 16, class: 'text-light-70 dark:text-dark-70' }), span('italic', () => `${this.armor.current}/${this.armor.max} (${[this.armor.flat > 0 ? '-' + this.armor.flat : undefined, this.armor.percent > 0 ? this.armor.percent + '%' : undefined].filter(e => !!e).join('/')})`) ]), () => {
|
||||
const value = clamp(this.armor.percent > 0 ? Math.floor(inputs.health.sum * clamp(this.armor.percent / 100, 0, 1)) : clamp(inputs.health.sum, 0, this.armor.flat), 0, this.armor.current);
|
||||
(this.armor.state!.state as ArmorState).loss += value;
|
||||
() => !this.character.compiled ? undefined : span('text-lg', 'Total'), div('flex flew-row gap-4 justify-end', [
|
||||
() => this.character.armor.state ? tooltip(button(div('flex flex-row gap-2 items-center text-sm', [ icon('game-icons:shoulder-armor', { width: 16, height: 16, class: 'text-light-70 dark:text-dark-70' }), span('italic', () => `${this.character.armor.current}/${this.character.armor.max} (${[this.character.armor.flat > 0 ? '-' + this.character.armor.flat : undefined, this.character.armor.percent > 0 ? this.character.armor.percent + '%' : undefined].filter(e => !!e).join('/')})`) ]), () => {
|
||||
const value = clamp(this.character.armor.percent > 0 ? Math.floor(inputs.health.sum * clamp(this.character.armor.percent / 100, 0, 1)) : clamp(inputs.health.sum, 0, this.character.armor.flat), 0, this.character.armor.current);
|
||||
(this.character.armor.state!.state as ArmorState).loss += value;
|
||||
inputs.health.sum -= value;
|
||||
}, 'px-2 h-8 border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red focus:border-light-red dark:focus:border-dark-red focus:shadow-light-red dark:focus:shadow-dark-red', () => this.armor.current === 0), 'Dégats', 'left') : undefined,
|
||||
}, 'px-2 h-8 border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red focus:border-light-red dark:focus:border-dark-red focus:shadow-light-red dark:focus:shadow-dark-red', () => this.character.armor.current === 0), 'Dégats', 'left') : undefined,
|
||||
tooltip(button(icon('radix-icons:minus', { width: 16, height: 16 }), () => {
|
||||
this.compiled.variables.health += inputs.health.sum;
|
||||
this.character.compiled.variables.health += inputs.health.sum;
|
||||
inputs.health.sum = 0;
|
||||
DAMAGE_TYPES.forEach(e => inputs.health[e] = 0);
|
||||
this.saveVariables();
|
||||
}, 'w-8 h-8 border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red focus:border-light-red dark:focus:border-dark-red focus:shadow-light-red dark:focus:shadow-dark-red'), 'Dégats', 'left'),
|
||||
numberpicker({ defaultValue: () => inputs.health.sum, input: v => { inputs.health.sum = v }, min: 0, disabled: () => inputs.health.open, class: 'h-8 !m-0' }),
|
||||
tooltip(button(icon('radix-icons:plus', { width: 16, height: 16 }), () => {
|
||||
this.compiled.variables.health = Math.max(this.compiled.variables.health - inputs.health.sum, 0);
|
||||
this.character.compiled.variables.health = Math.max(this.character.compiled.variables.health - inputs.health.sum, 0);
|
||||
inputs.health.sum = 0;
|
||||
DAMAGE_TYPES.forEach(e => inputs.health[e] = 0);
|
||||
this.saveVariables();
|
||||
@@ -1969,16 +1849,16 @@ export class CharacterSheet extends CharacterCompiler
|
||||
])
|
||||
], { class: { container: 'gap-2', title: 'ps-2' }, open: false, onFold: v => { inputs.health.open = v; if(v) { inputs.health.sum = 0; }} }),
|
||||
() => div('flex flex-row justify-between items-center', [
|
||||
div('flex flex-row gap-8 items-center', [ span('text-xl font-bold', 'Mana'), div('flex flex-row items-center gap-1', [ span('text-xl font-bold', () => (this.compiled.mana - this.compiled.variables.mana)), text('/'), text(() => this.compiled.mana) ]) ]),
|
||||
div('flex flex-row gap-8 items-center', [ span('text-xl font-bold', 'Mana'), div('flex flex-row items-center gap-1', [ span('text-xl font-bold', () => (this.character.compiled.mana - this.character.compiled.variables.mana)), text('/'), text(() => this.character.compiled.mana) ]) ]),
|
||||
div('flex flex-row gap-4 justify-end', [
|
||||
tooltip(button(icon('radix-icons:minus', { width: 16, height: 16 }), () => {
|
||||
this.compiled.variables.mana += inputs.mana;
|
||||
this.character.compiled.variables.mana += inputs.mana;
|
||||
inputs.mana = 0;
|
||||
this.saveVariables();
|
||||
}, 'w-8 h-8 border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red focus:border-light-red dark:focus:border-dark-red focus:shadow-light-red dark:focus:shadow-dark-red'), 'Dégats', 'left'),
|
||||
numberpicker({ defaultValue: () => inputs.mana, input: v => { inputs.mana = v }, min: 0, class: 'h-8 !m-0' }),
|
||||
tooltip(button(icon('radix-icons:plus', { width: 16, height: 16 }), () => {
|
||||
this.compiled.variables.mana = Math.max(this.compiled.variables.mana - inputs.mana, 0);
|
||||
this.character.compiled.variables.mana = Math.max(this.character.compiled.variables.mana - inputs.mana, 0);
|
||||
inputs.mana = 0;
|
||||
this.saveVariables();
|
||||
}, 'w-8 h-8 border-light-green dark:border-dark-green hover:border-light-green dark:hover:border-dark-green focus:border-light-green dark:focus:border-dark-green focus:shadow-light-green dark:focus:shadow-dark-green'), 'Soin', 'left'),
|
||||
@@ -2011,7 +1891,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
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]),
|
||||
markdown(getText(config.action[e]?.description), undefined, { tags: { a: preview } }),
|
||||
]), list: () => this.compiled ? this.compiled.lists.action ?? [] : [] }),
|
||||
]), list: () => this.character.compiled ? this.character.compiled.lists.action ?? [] : [] }),
|
||||
]),
|
||||
]),
|
||||
div('flex flex-col gap-2', [
|
||||
@@ -2026,7 +1906,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
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]),
|
||||
markdown(getText(config.reaction[e]?.description), undefined, { tags: { a: preview } }),
|
||||
]), list: () => this.compiled ? this.compiled.lists.reaction ?? [] : [] }),
|
||||
]), list: () => this.character.compiled ? this.character.compiled.lists.reaction ?? [] : [] }),
|
||||
]),
|
||||
]),
|
||||
div('flex flex-col gap-2', [
|
||||
@@ -2040,7 +1920,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
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 }) ]),
|
||||
markdown(getText(config.freeaction[e]?.description), undefined, { tags: { a: preview } }),
|
||||
]), list: () => this.compiled ? this.compiled.lists.freeaction ?? [] : [] })
|
||||
]), list: () => this.character.compiled ? this.character.compiled.lists.freeaction ?? [] : [] })
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
@@ -2052,7 +1932,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
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 }) ]),
|
||||
markdown(getText(config.passive[e]?.description), undefined, { tags: { a: preview } }),
|
||||
]), list: this.compiled.lists.passive })], [
|
||||
]), 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-1 border-t border-dashed border-light-50 dark:border-dark-50"),
|
||||
@@ -2061,7 +1941,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
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 }) ]),
|
||||
markdown(getText(config.features[e]?.description), undefined, { tags: { a: preview } }),
|
||||
]), list: this.compiled.lists.dedication })], [
|
||||
]), 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-1 border-t border-dashed border-light-50 dark:border-dark-50"),
|
||||
@@ -2072,11 +1952,11 @@ export class CharacterSheet extends CharacterCompiler
|
||||
spellTab()
|
||||
{
|
||||
const preference = reactive({
|
||||
sort: localStorage.getItem('this.compiled-sort') ?? 'rank-asc',
|
||||
sort: localStorage.getItem('this.character.compiled-sort') ?? 'rank-asc',
|
||||
} as { sort: `${'rank'|'type'|'element'|'cost'|'range'|'speed'}-${'asc'|'desc'}` | '' });
|
||||
|
||||
const sort = (spells: string[]) => {
|
||||
localStorage.setItem('this.compiled-sort', preference.sort);
|
||||
localStorage.setItem('this.character.compiled-sort', preference.sort);
|
||||
const _spells = Object.keys(config.spells);
|
||||
|
||||
spells.sort((a, b) => _spells.indexOf(a) - _spells.indexOf(b));
|
||||
@@ -2087,14 +1967,14 @@ export class CharacterSheet extends CharacterCompiler
|
||||
case 'element-asc': return spells.sort((a, b) => SPELL_ELEMENTS.indexOf(config.spells[a]?.elements[0]!) - SPELL_ELEMENTS.indexOf(config.spells[b]?.elements[0]!));
|
||||
case 'cost-asc': return spells.sort((a, b) => (config.spells[a]?.cost ?? 0) - (config.spells[b]?.cost ?? 0));
|
||||
case 'range-asc': return spells.sort((a, b) => (config.spells[a]?.range === 'personnal' ? -1 : config.spells[a]?.range ?? 0) - (config.spells[b]?.range === 'personnal' ? -1 : config.spells[b]?.range ?? 0));
|
||||
case 'speed-asc': return spells.sort((a, b) => (config.spells[a]?.speed === 'action' ? -2 : config.spells[a]?.speed === 'reaction' ? -1 : config.spells[a]?.speed ?? 0) - (config.spells[a]?.speed === 'action' ? -2 : config.spells[a]?.speed === 'reaction' ? -1 : config.spells[a]?.speed ?? 0));
|
||||
case 'speed-asc': return spells.sort((a, b) => (config.spells[a]?.speed === 'action' ? -3 : config.spells[a]?.speed === 'reaction' ? -2 : config.spells[a]?.speed === 'channeling' ? -1 : config.spells[a]?.speed ?? 0) - (config.spells[b]?.speed === 'action' ? -3 : config.spells[b]?.speed === 'reaction' ? -2 : config.spells[b]?.speed === 'channeling' ? -1 : config.spells[b]?.speed ?? 0));
|
||||
|
||||
case 'rank-desc': return spells.sort((b, a) => (config.spells[a]?.rank ?? 0) - (config.spells[b]?.rank ?? 0));
|
||||
case 'type-desc': return spells.sort((b, a) => config.spells[a]?.type.localeCompare(config.spells[b]?.type ?? '') ?? 0);
|
||||
case 'element-desc': return spells.sort((b, a) => SPELL_ELEMENTS.indexOf(config.spells[a]?.elements[0]!) - SPELL_ELEMENTS.indexOf(config.spells[b]?.elements[0]!));
|
||||
case 'cost-desc': return spells.sort((b, a) => (config.spells[a]?.cost ?? 0) - (config.spells[b]?.cost ?? 0));
|
||||
case 'range-desc': return spells.sort((b, a) => (config.spells[a]?.range === 'personnal' ? -1 : config.spells[a]?.range ?? 0) - (config.spells[b]?.range === 'personnal' ? -1 : config.spells[b]?.range ?? 0));
|
||||
case 'speed-desc': return spells.sort((b, a) => (config.spells[a]?.speed === 'action' ? -2 : config.spells[a]?.speed === 'reaction' ? -1 : config.spells[a]?.speed ?? 0) - (config.spells[a]?.speed === 'action' ? -2 : config.spells[a]?.speed === 'reaction' ? -1 : config.spells[a]?.speed ?? 0));
|
||||
case 'speed-desc': return spells.sort((b, a) => (config.spells[a]?.speed === 'action' ? -3 : config.spells[a]?.speed === 'reaction' ? -2 : config.spells[a]?.speed === 'channeling' ? -1 : config.spells[a]?.speed ?? 0) - (config.spells[b]?.speed === 'action' ? -3 : config.spells[b]?.speed === 'reaction' ? -2 : config.spells[b]?.speed === 'channeling' ? -1 : config.spells[b]?.speed ?? 0));
|
||||
|
||||
default: return spells;
|
||||
}
|
||||
@@ -2115,8 +1995,8 @@ export class CharacterSheet extends CharacterCompiler
|
||||
div('flex flex-col gap-2 h-full', [
|
||||
div('flex flex-row justify-end items-center', [
|
||||
div('flex flex-row gap-2 items-center', [
|
||||
dom('span', { class: () => ['italic text-sm', { 'text-light-red dark:text-dark-red': this.compiled.variables.spells.length !== this.compiled.spellslots }], text: () => `${this.compiled.variables.spells.length}/${this.compiled.spellslots} sort(s) maitrisé(s)`.replaceAll('(s)', this.compiled.variables.spells.length > 1 ? 's' : '') }),
|
||||
button(text('Modifier'), () => panel.show(), 'py-1 px-4', () => this.state.edit),
|
||||
dom('span', { class: () => ['italic text-sm', { 'text-light-red dark:text-dark-red': this.character.compiled.variables.spells.length !== this.character.compiled.spellslots }], text: () => `${this.character.compiled.variables.spells.length}/${this.character.compiled.spellslots} sort(s) maitrisé(s)`.replaceAll('(s)', this.character.compiled.variables.spells.length > 1 ? 's' : '') }),
|
||||
button(text('Modifier'), () => panel.show(), 'py-1 px-4'),
|
||||
tooltip(button(icon('ph:arrows-down-up', { width: 16, height: 16 }), sorter, 'p-1'), 'Trier par', 'right')
|
||||
])
|
||||
]),
|
||||
@@ -2134,13 +2014,13 @@ export class CharacterSheet extends CharacterCompiler
|
||||
]),
|
||||
div('flex flex-row ps-4 p-1 border-l-4 border-light-35 dark:border-dark-35', [ markdown(spell.description) ]),
|
||||
])
|
||||
}, list: () => sort([...(this.compiled.lists.spells ?? []), ...this.compiled.variables.spells]) }),
|
||||
}, list: () => sort([...(this.character.compiled.lists.spells ?? []), ...this.character.compiled.variables.spells]) }),
|
||||
])
|
||||
]
|
||||
}
|
||||
spellPanel()
|
||||
{
|
||||
const spells = this.compiled.variables.spells;
|
||||
const spells = this.character.compiled.variables.spells;
|
||||
const filters = reactive<{ tag: Array<string>, rank: Array<SpellConfig['rank']>, type: Array<SpellConfig['type']>, element: Array<SpellConfig['elements'][number]>, cost: { min: number, max: number }, range: Array<SpellConfig['range']>, speed: Array<SpellConfig['speed']> }>({
|
||||
tag: [],
|
||||
type: [],
|
||||
@@ -2154,7 +2034,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
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]", [
|
||||
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.compiled.spellslots} sort(s) maitrisé(s)`.replaceAll('(s)', spells.length > 1 ? 's' : '')) ]), tooltip(button(icon("radix-icons:cross-1", { width: 20, height: 20 }), () => {
|
||||
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 }), () => {
|
||||
setTimeout(blocker.close, 150);
|
||||
container.setAttribute('data-state', 'inactive');
|
||||
}, "p-1"), "Fermer", "left") ])
|
||||
@@ -2165,12 +2045,12 @@ export class CharacterSheet extends CharacterCompiler
|
||||
div('flex flex-col gap-1 items-center', [ text('Rangs'), multiselect<typeof filters.rank[number]>([{ text: 'Rang 1', value: 1 }, { text: 'Rang 2', value: 2 }, { text: 'Rang 3', value: 3 }], { defaultValue: filters.rank, change: v => filters.rank = v, class: { container: 'w-24 !mx-0 text-xs', option: 'text-sm p-1' } }) ]),
|
||||
div('flex flex-col gap-1 items-center', [ text('Elements'), multiselect<typeof filters.element[number]>(SPELL_ELEMENTS.map(f => ({ text: elementTexts[f].text, value: f })), { defaultValue: filters.element, change: v => filters.element = v, class: { container: 'w-28 !mx-0 text-xs', option: 'text-sm p-1' } }) ]),
|
||||
div('flex flex-col gap-1 items-center', [ text('Portée'), multiselect<typeof filters.range[number]>([{ text: 'Toucher', value: 0 }, { text: 'Personnel', value: 'personnal' }, { text: '3 cases', value: 3 }, { text: '6 cases', value: 6 }, { text: '9 cases', value: 9 }, { text: '12 cases', value: 12 }, { text: '18 cases', value: 18 }], { defaultValue: filters.range, change: v => filters.range = v, class: { container: 'w-28 !mx-0 text-xs', option: 'text-sm p-1' } }) ]),
|
||||
div('flex flex-col gap-1 items-center', [ text('Incantation'), multiselect<typeof filters.speed[number]>([{ text: 'Action', value: 'action' }, { text: 'Reaction', value: 'reaction' }, { text: '1 minute', value: 1 }, { text: '10 minutes', value: 10 }], { defaultValue: filters.speed, change: v => filters.speed = v, class: { container: 'w-32 !mx-0 text-xs', option: 'text-sm p-1' } }) ]),
|
||||
div('flex flex-col gap-1 items-center', [ text('Incantation'), multiselect<typeof filters.speed[number]>([{ text: 'Action', value: 'action' }, { text: 'Reaction', value: 'reaction' }, { text: 'Canalisaton', value: 'channeling' }, { text: '1 minute', value: 1 }, { text: '10 minutes', value: 10 }], { defaultValue: filters.speed, change: v => filters.speed = v, class: { container: 'w-32 !mx-0 text-xs', option: 'text-sm p-1' } }) ]),
|
||||
]),
|
||||
div('flex flex-col divide-y *:py-2 -my-2 overflow-y-auto', { list: () => Object.values(config.spells).filter(spell => {
|
||||
//if(spells.includes(spell.id)) return true;
|
||||
|
||||
if(this.compiled.spellranks[spell.type] < spell.rank) return false;
|
||||
if(this.character.compiled.spellranks[spell.type] < spell.rank) return false;
|
||||
if(filters.cost.min > spell.cost || spell.cost > filters.cost.max) return false;
|
||||
if(filters.element.length > 0 && !filters.element.some(e => spell.elements.includes(e))) return false;
|
||||
if(filters.range.length > 0 && !filters.range.includes(spell.range)) return false;
|
||||
@@ -2204,7 +2084,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
text("/"),
|
||||
dom("span", { text: typeof spell.speed === "string" ? spell.speed : `${spell.speed} minutes` })
|
||||
]),
|
||||
button(text(() => spells.includes(spell.id) ? 'Supprimer' : this.compiled.lists.spells?.includes(spell.id) ? 'Inné' : 'Ajouter'), () => {
|
||||
button(text(() => spells.includes(spell.id) ? 'Supprimer' : this.character.compiled.lists.spells?.includes(spell.id) ? 'Inné' : 'Ajouter'), () => {
|
||||
const idx = spells.findIndex(e => e === spell.id);
|
||||
if(idx !== -1) spells.splice(idx, 1);
|
||||
else spells.push(spell.id);
|
||||
@@ -2227,7 +2107,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
}
|
||||
itemsTab()
|
||||
{
|
||||
const items = this.compiled.variables.items;
|
||||
const items = this.character.compiled.variables.items;
|
||||
const panel = this.itemsPanel();
|
||||
const improve = this.improvePanel();
|
||||
|
||||
@@ -2238,12 +2118,12 @@ export class CharacterSheet extends CharacterCompiler
|
||||
div('flex flex-row gap-1 items-center', [ span('italic text-sm', 'Argent'), text("TODO") ]),
|
||||
]),
|
||||
div('flex flex-row justify-end items-center gap-8', [
|
||||
dom('span', { class: () => ['italic text-sm', { 'text-light-red dark:text-dark-red': this.power > this.compiled.itempower }], text: () => `Puissance magique: ${this.power}/${this.compiled.itempower}` }),
|
||||
dom('span', { class: () => ['italic text-sm', { 'text-light-red dark:text-dark-red': this.weight > (this.compiled.capacity === false ? 0 : this.compiled.capacity) }], text: () => `Poids total: ${this.weight}/${this.compiled.capacity}` }),
|
||||
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}` }),
|
||||
dom('span', { class: () => ['italic text-sm', { 'text-light-red dark:text-dark-red': this.character.weight > (this.character.compiled.capacity === false ? 0 : this.character.compiled.capacity) }], text: () => `Poids total: ${this.character.weight}/${this.character.compiled.capacity}` }),
|
||||
button(text('Modifier'), () => panel.show(), 'py-1 px-4'),
|
||||
]),
|
||||
]),
|
||||
div('flex flex-col flex-1 divide-y divide-light-35 dark:divide-dark-35', { list: this.compiled.variables.items, render: (e, _c) => {
|
||||
div('flex flex-col flex-1 divide-y divide-light-35 dark:divide-dark-35', { list: this.character.compiled.variables.items, render: (e, _c) => {
|
||||
if(_c) return _c;
|
||||
|
||||
const item = config.items[e.id];
|
||||
@@ -2256,9 +2136,9 @@ export class CharacterSheet extends CharacterCompiler
|
||||
const weight = div(() => ['flex flex-row min-w-16 gap-2 justify-between items-center px-2', { 'cursor-help': e.amount > 1 && !!item.weight }], [ icon('mdi:weight', { width: 16, height: 16, class: 'text-light-70 dark:text-dark-70' }), span(() => ({ 'underline decoration-1 decoration-dotted underline-offset-2': e.amount > 1 && !!item.weight }), () => item.weight ? `${item.weight * e.amount}` : '-') ]);
|
||||
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 !bg-opacity-20', { 'border-accent-blue bg-accent-blue': !e.cursed, 'border-light-purple bg-light-purple dark:border-dark-purple dark:bg-dark-purple': 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: "right" }) }),
|
||||
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 !bg-opacity-20', { 'border-accent-blue bg-accent-blue': !e.cursed, 'border-light-purple bg-light-purple dark:border-dark-purple dark:bg-dark-purple': 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 justify-center gap-1', [
|
||||
this.character.campaign ? button(text('Partager'), () => {
|
||||
this.character.character.campaign ? button(text('Partager'), () => {
|
||||
|
||||
}, 'px-2 text-sm h-5 box-content') : undefined,
|
||||
button(icon(() => e.amount === 1 ? 'radix-icons:trash' : 'radix-icons:minus', { width: 12, height: 12 }), () => {
|
||||
@@ -2287,15 +2167,15 @@ export class CharacterSheet extends CharacterCompiler
|
||||
], [ div('flex flex-row justify-between', [
|
||||
div('flex flex-row items-center gap-y-1 gap-x-4 flex-wrap', [
|
||||
item.equippable ? checkbox({ defaultValue: e.equipped, change: v => {
|
||||
if(v && config.items[e.id]?.category === 'armor' && this.compiled.variables.items.find(e => config.items[e.id]?.category === 'armor' && e.equipped))
|
||||
if(v && config.items[e.id]?.category === 'armor' && this.character.compiled.variables.items.find(e => config.items[e.id]?.category === 'armor' && e.equipped))
|
||||
return Toaster.add({ content: "Vous ne pouvez equipper qu'une seule armure à la fois.", duration: 5000, timer: true, type: 'info' }), false;
|
||||
|
||||
e.equipped = v;
|
||||
this.improve(e);
|
||||
this.character.improve(e);
|
||||
}, class: { container: '!w-5 !h-5' } }) : undefined,
|
||||
div('flex flex-row items-center gap-4', [ span([colorByRarity[item.rarity], 'text-lg'], item.name), div('flex flex-row gap-2 text-light-60 dark:text-dark-60 text-sm italic', subnameFactory(item).map(e => span('', e))) ]),
|
||||
item.category === 'armor' ? div('flex flex-row gap-2 items-center text-sm', [ icon('game-icons:shoulder-armor', { width: 16, height: 16, class: 'text-light-70 dark:text-dark-70' }), span('italic', () => `${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('/')})`) ]) :
|
||||
item.category === 'weapon' ? div('flex flex-row gap-2 items-center text-sm', [ icon('game-icons:broadsword', { width: 16, height: 16, class: 'text-light-70 dark:text-dark-70' }), span('italic', () => stringifyRoll(parseDice(`${item.damage.value}${(e.state as WeaponState)?.attack ? '+' + (e.state as WeaponState).attack : ''}`), this.compiled.modifier, true)), proses('a', preview, [ text(damageTypeTexts[item.damage.type].toLowerCase()) ], { href: `regles/le-combat/les-types-de-degats#${damageTypeTexts[item.damage.type]}`, label: damageTypeTexts[item.damage.type], navigate: false }) ]) :
|
||||
item.category === 'weapon' ? div('flex flex-row gap-2 items-center text-sm', [ icon('game-icons:broadsword', { width: 16, height: 16, class: 'text-light-70 dark:text-dark-70' }), span('italic', () => stringifyRoll(parseDice(`${item.damage.value}${(e.state as WeaponState)?.attack ? '+' + (e.state as WeaponState).attack : ''}`), this.character.compiled.modifier, true)), proses('a', preview, [ text(damageTypeTexts[item.damage.type].toLowerCase()) ], { href: `regles/le-combat/les-types-de-degats#${damageTypeTexts[item.damage.type]}`, label: damageTypeTexts[item.damage.type], navigate: false }) ]) :
|
||||
undefined
|
||||
]),
|
||||
div('flex flex-row items-center divide-x divide-light-50 dark:divide-dark-50 divide-dashed px-2', [
|
||||
@@ -2323,7 +2203,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
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', [
|
||||
dom('span', { class: () => ['italic text-sm', { 'text-light-red dark:text-dark-red': this.weight > (this.compiled.capacity === false ? 0 : this.compiled.capacity) }], text: () => `Poids total: ${this.weight}/${this.compiled.capacity}` }),
|
||||
dom('span', { class: () => ['italic text-sm', { 'text-light-red dark:text-dark-red': this.character.weight > (this.character.compiled.capacity === false ? 0 : this.character.compiled.capacity) }], text: () => `Poids total: ${this.character.weight}/${this.character.compiled.capacity}` }),
|
||||
tooltip(button(icon("radix-icons:cross-1", { width: 20, height: 20 }), () => {
|
||||
setTimeout(blocker.close, 150);
|
||||
container.setAttribute('data-state', 'inactive');
|
||||
@@ -2356,7 +2236,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
div('flex flex-row w-16 gap-2 justify-between items-center px-2', [ icon('game-icons:battery-pack', { width: 16, height: 16, class: 'text-light-70 dark:text-dark-70' }), span('', item.charge ? `${item.charge}` : '-') ]),
|
||||
div('flex flex-row w-16 gap-2 justify-between items-center px-2', [ icon('ph:coin', { width: 16, height: 16, class: 'text-light-70 dark:text-dark-70' }), span('', item.price ? `${item.price}` : '-') ]),
|
||||
button(icon('radix-icons:plus', { width: 16, height: 16 }), () => {
|
||||
const list = this.compiled.variables.items;
|
||||
const list = this.character.compiled.variables.items;
|
||||
if(item.equippable) list.push(stateFactory(item));
|
||||
else if(list.find(e => e.id === item.id)) list.find(e => e.id === item.id)!.amount++;
|
||||
else list.push(stateFactory(item));
|
||||
@@ -2407,7 +2287,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
dom("h2", { class: "text-xl font-bold", text: "Améliorations" }),
|
||||
div('flex flex-row gap-8 items-center justify-end', [
|
||||
dom('span', { class: () => ['italic text-sm', { 'text-light-red dark:text-dark-red': current.item && config.items[current.item.id] !== undefined ? itempower() > (config.items[current.item.id]!.capacity ?? 0) : false }], text: () => `Puissance de l'objet: ${current.item && config.items[current.item.id] !== undefined ? itempower() : false}/${current.item ? (config.items[current.item.id]!.capacity ?? 0) : 0}` }),
|
||||
dom('span', { class: () => ['italic text-sm', { 'text-light-red dark:text-dark-red': this.power > this.compiled!.itempower }], text: () => `Puissance du personnage: ${this.power}/${this.compiled.itempower}` }),
|
||||
dom('span', { class: () => ['italic text-sm', { 'text-light-red dark:text-dark-red': this.character.power > this.character.compiled!.itempower }], text: () => `Puissance du personnage: ${this.character.power}/${this.character.compiled.itempower}` }),
|
||||
tooltip(button(icon("radix-icons:cross-1", { width: 20, height: 20 }), () => {
|
||||
setTimeout(blocker.close, 150);
|
||||
container.setAttribute('data-state', 'inactive');
|
||||
@@ -2427,7 +2307,7 @@ export class CharacterSheet extends CharacterCompiler
|
||||
else
|
||||
current.item!.improvements?.splice(idx, 1);
|
||||
|
||||
this.improve(current.item!);
|
||||
this.character.improve(current.item!);
|
||||
}, 'p-1 !border-solid !border-r'),
|
||||
]),
|
||||
])], { open: false, class: { icon: 'px-2', container: 'border border-light-35 dark:border-dark-35 p-1 gap-2', content: 'px-2 pb-1' } })
|
||||
@@ -2450,13 +2330,13 @@ export class CharacterSheet extends CharacterCompiler
|
||||
div('flex flex-col gap-2', [
|
||||
div('flex flex-row justify-between items-center', [
|
||||
div('flex flex-row gap-12 items-center', [
|
||||
span('text-lg font-semibold', config.aspects[this.compiled.aspect.id]?.name), div('flex flex-row items-center gap-2', [ text('Transformé'), checkbox({ defaultValue: this.compiled.variables.transformed, change: v => this.compiled.variables.transformed = v, }) ]),
|
||||
span('text-lg font-semibold', config.aspects[this.character.compiled.aspect.id]?.name), div('flex flex-row items-center gap-2', [ text('Transformé'), checkbox({ defaultValue: this.character.compiled.variables.transformed, change: v => this.character.compiled.variables.transformed = v, }) ]),
|
||||
]),
|
||||
div('flex flex-row gap-8 items-center', [
|
||||
text('Difficulté: '), span('text-lg font-semibold', config.aspects[this.compiled.aspect.id]?.difficulty),
|
||||
text('Difficulté: '), span('text-lg font-semibold', config.aspects[this.character.compiled.aspect.id]?.difficulty),
|
||||
]),
|
||||
]),
|
||||
div(() => ({ 'opacity-20': !this.compiled.variables.transformed }), [ markdown(getText(config.aspects[this.compiled.aspect.id]?.description), undefined, { tags: { a: preview } }), ]),
|
||||
div(() => ({ 'opacity-20': !this.character.compiled.variables.transformed }), [ markdown(getText(config.aspects[this.character.compiled.aspect.id]?.description), undefined, { tags: { a: preview } }), ]),
|
||||
])
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user