Fix TrainingViewer render

This commit is contained in:
Clément Pons
2025-06-27 22:04:10 +02:00
parent e78a60f771
commit d5851499cd
9 changed files with 21 additions and 20 deletions

View File

@@ -45,7 +45,7 @@ const { add } = useToast();
const characterConfig = config as CharacterConfig;
const data = ref<Character>({ ...defaultCharacter });
const spellFilter = ref<{
ranks: Array<1 | 2 | 3>,
ranks: Array<1 | 2 | 3 | 4>,
types: Array<SpellType>,
text: string,
elements: Array<SpellElement>,
@@ -220,7 +220,7 @@ useShortcuts({
<Head>
<Title>d[any] - Edition de {{ data.name || 'nouveau personnage' }}</Title>
</Head>
<div class="flex flex-col gap-8 align-center">
<div class="flex flex-1 max-w-full flex-col gap-8 align-center">
<div class="flex flex-row gap-4 align-center justify-between">
<div></div>
<div class="flex flex-row gap-4 align-center justify-center">
@@ -260,7 +260,7 @@ useShortcuts({
<TabsTrigger :disabled="data.people === undefined" value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent">Sorts</TabsTrigger>
<TabsTrigger value="notes" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Notes</TabsTrigger>
</TabsList>
<TabsContent value="people" class="flex-1 outline-none" forceMount>
<TabsContent value="people" class="flex-1 outline-none max-w-full w-full" forceMount>
<div class="m-2 overflow-auto">
<Combobox label="Peuple de votre personnage" v-model="data.people" :options="config.peoples.map((people, index) => [people.name, index])" @update:model-value="(index) => { data.people = index as number | undefined; data.leveling = [[1, 0]]}" />
<template v-if="data.people !== undefined">
@@ -276,7 +276,7 @@ useShortcuts({
</template>
</div>
</TabsContent>
<TabsContent value="training" class="flex-1 outline-none max-w-full" forceMount>
<TabsContent value="training" class="flex-1 outline-none max-w-full w-full" forceMount>
<TrainingViewer :config="characterConfig" progress>
<template #default="{ stat, level, option, index }">
<div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 max-w-[26rem] hover:border-light-50 dark:hover:border-dark-50" @click="switchTrainingOption(stat, parseInt(level as unknown as string, 10) as TrainingLevel, index)" :class="{ 'opacity-30': level > maxTraining[stat] + 1, 'hover:border-light-60 dark:hover:border-dark-60': level <= maxTraining[stat] + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': level == 0 || (data.training[stat]?.some(e => e[0] == level && e[1] === index) ?? false) }">
@@ -290,7 +290,7 @@ useShortcuts({
</template>
</TrainingViewer>
</TabsContent>
<TabsContent value="abilities" class="flex-1 outline-none" forceMount>
<TabsContent value="abilities" class="flex-1 outline-none max-w-full w-full" forceMount>
<div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
<div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex justify-between">
<span class="text-xl -mx-2" :class="{ 'text-light-red dark:text-dark-red': (abilityPoints ?? 0) < abilitySpent }">Points d'entrainement restants: {{ (abilityPoints ?? 0) - abilitySpent }}</span>
@@ -310,7 +310,7 @@ useShortcuts({
</div>
</div>
</TabsContent>
<TabsContent value="spells" class="flex-1 outline-none" forceMount>
<TabsContent value="spells" class="flex-1 outline-none max-w-full w-full" forceMount>
<div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
<div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 items-center">
<span class="text-xl pe-4" :class="{ 'text-light-red dark:text-dark-red': spellsPoints < (data.spells?.length ?? 0) }">Sorts: {{ data.spells?.length ?? 0 }}/{{ spellsPoints }}</span>
@@ -341,7 +341,7 @@ useShortcuts({
</div>
</div>
</TabsContent>
<TabsContent value="notes" class="flex-1 outline-none" forceMount>
<TabsContent value="notes" class="flex-1 outline-none max-w-full w-full" forceMount>
<Editor class="min-h-[400px] border border-light-30 dark:border-dark-30" :v-model="data.notes" />
</TabsContent>
</TabsRoot>