From 996b9711e423149594a7495bf47e10884827cff9 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Wed, 9 Jul 2025 23:58:24 +0200
Subject: [PATCH] Progress on visual rework of the character editor

---
 ...ingEditor.vue => TrainingConfigEditor.vue} |   2 +-
 components/TrainingViewer.vue                 |  82 +++---
 components/base/Tooltip.vue                   |   5 +-
 components/character/editor/AbilityEditor.vue |  38 +++
 .../character/editor/AspectSelector.vue       |  38 +++
 components/character/editor/LevelEditor.vue   | 113 ++++++++
 .../{PeopleEditor.vue => PeopleSelector.vue}  |   3 +-
 .../character/editor/TrainingEditor.vue       |  69 +++++
 db.sqlite-shm                                 | Bin 32768 -> 32768 bytes
 db.sqlite-wal                                 | Bin 230752 -> 1120672 bytes
 pages/character/[id]/edit.client.vue          | 272 ++++--------------
 pages/character/manage.client.vue             |  24 +-
 types/character.ts                            |   2 +-
 13 files changed, 360 insertions(+), 288 deletions(-)
 rename components/{TrainingEditor.vue => TrainingConfigEditor.vue} (84%)
 create mode 100644 components/character/editor/AbilityEditor.vue
 create mode 100644 components/character/editor/AspectSelector.vue
 create mode 100644 components/character/editor/LevelEditor.vue
 rename components/character/editor/{PeopleEditor.vue => PeopleSelector.vue} (93%)
 create mode 100644 components/character/editor/TrainingEditor.vue

diff --git a/components/TrainingEditor.vue b/components/TrainingConfigEditor.vue
similarity index 84%
rename from components/TrainingEditor.vue
rename to components/TrainingConfigEditor.vue
index 80354ba..7b8b04f 100644
--- a/components/TrainingEditor.vue
+++ b/components/TrainingConfigEditor.vue
@@ -31,7 +31,7 @@ function focusTraining(stat: MainStat, level: TrainingLevel, option: number)
 <template>
     <TrainingViewer :config="config" progress>
         <template #default="{ stat, level, option }">
-            <div @click.capture="console.log" class="border border-light-40 dark:border-dark-40 hover:border-light-70 dark:hover:border-dark-70 cursor-pointer px-2 py-1 w-96" :class="{ '!border-accent-blue': selection !== undefined && selection?.stat == stat && selection?.level == level && selection?.option == option }">
+            <div @click.capture="console.log" class="border border-light-40 dark:border-dark-40 hover:border-light-70 dark:hover:border-dark-70 cursor-pointer px-2 py-1 w-[400px]" :class="{ '!border-accent-blue': selection !== undefined && selection?.stat == stat && selection?.level == level && selection?.option == option }">
                 <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="config.training[stat][level][option].description.map(e => e.text).join('\n')" />
             </div>
         </template>
diff --git a/components/TrainingViewer.vue b/components/TrainingViewer.vue
index 82d8b61..ca7238b 100644
--- a/components/TrainingViewer.vue
+++ b/components/TrainingViewer.vue
@@ -1,68 +1,50 @@
 <script setup lang="ts">
-import { clamp } from '#shared/general.util';
 import { MAIN_STATS, mainStatTexts, type CharacterConfig } from '~/types/character';
 
-const { config, progress = false } = defineProps<{
-    config: CharacterConfig,
-    progress?: boolean,
+const { config } = defineProps<{
+    config: CharacterConfig
 }>();
 
-//const dragger = useTemplateRef('dragger');
 const position = ref(0);
-//const dragging = ref(false), offset = ref(0);
-
-/* const dragend = () => {
-    window.removeEventListener('mousemove', dragmove);
-    window.removeEventListener('mouseup', dragend);
-
-    dragging.value = false;
-};
-const dragmove = (e: MouseEvent) => {
-    offset.value = clamp(offset.value - e.movementY, 0, 100);
-    if(dragger.value) dragger.value.scrollTop = offset.value;
-};
-const dragstart = () => {
-    window.addEventListener('mousemove', dragmove);
-    window.addEventListener('mouseup', dragend);
-
-    dragging.value = true;
-};
-onMounted(() => {
-    dragger.value?.addEventListener('mousedown', dragstart);
-});
-onUnmounted(() => {
-    dragger.value?.removeEventListener('mousedown', dragstart);
-}); */
 </script>
 
 <template>
-    <div class="flex flex-col relative max-w-full">
-        <div class="sticky top-0 w-full bg-light-0 dark:bg-dark-0 z-20 flex pt-2 pb-6">
-            <div class="flex flex-row gap-3 items-center relative left-6 w-48">
-                <span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent 
-                hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="position = i"></span>
-                <span :style="{ 'left': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[left]
-                after:content-[attr(data-text)] after:absolute after:-translate-x-1/2 after:top-4 after:p-px after:bg-light-0 dark:after:bg-dark-0 after:text-center"></span>
-            </div>
-            <div class="relative left-6">
-                <slot name="addin" :stat="MAIN_STATS[position]"></slot>
-            </div>
+    <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10 min-h-20">
+        <div class="flex flex-shrink gap-3 items-center relative w-48 ms-12">
+            <span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent 
+            hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="position = i"></span>
+            <span :style="{ 'left': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[left]
+            after:content-[attr(data-text)] after:absolute after:-translate-x-1/2 after:top-4 after:p-px after:bg-light-0 dark:after:bg-dark-0 after:text-center"></span>
         </div>
-        <div class="flex flex-1 px-8 overflow-hidden max-w-full">
-            <div class="relative cursor-grab active:cursor-grabbing select-none transition-[left] flex flex-1 flex-row max-w-full" :style="{ 'left': `-${position * 100}%` }">
-                <div class="flex flex-shrink-0 flex-col gap-4 relative w-full overflow-y-auto px-20" v-for="(stat, name) in config.training" >
-                    <div class="flex flex-row gap-2 justify-center relative" v-for="(options, level) in stat">
-                        <template v-if="progress">
-                            <div class="absolute left-0 right-0 -top-2 h-px border-t border-light-30 dark:border-dark-30 border-dashed">
-                                <span class="absolute right-0 p-1 text-end">{{ level }}</span>
-                            </div>
-                        </template>
+        <div class="flex-1 flex">
+            <slot name="addin" :stat="MAIN_STATS[position]"></slot>
+        </div>
+        <span></span>
+    </div>
+    <div class="flex flex-1 px-8 overflow-hidden max-w-full">
+        <div class="relative cursor-grab active:cursor-grabbing select-none transition-[left] flex flex-1 flex-row max-w-full" :style="{ 'left': `-${position * 100}%` }">
+            <div class="flex flex-shrink-0 flex-col gap-4 relative w-full overflow-y-auto px-20" v-for="(stat, name) in config.training">
+                <template v-for="(options, level) of stat">
+                    <div class="w-full flex h-px"><div class="border-t border-dashed border-light-50 dark:border-dark-50 w-full"></div><span class="relative left-4">{{ level }}</span></div>
+                    <div class="flex flex-row gap-4 justify-center">
                         <template v-for="(option, i) in options">
                             <slot :stat="name" :level="level" :option="i"></slot>
                         </template>
                     </div>
-                </div>
+                </template>
             </div>
+            <!-- <div class="flex flex-shrink-0 flex-col gap-4 relative w-full overflow-y-auto px-20" v-for="(stat, name) in config.training" >
+                <div class="flex flex-row gap-2 justify-center relative" v-for="(options, level) in stat">
+                    <template v-if="progress">
+                        <div class="absolute left-0 right-0 -top-2 h-px border-t border-light-30 dark:border-dark-30 border-dashed">
+                            <span class="absolute right-0 p-1 text-end">{{ level }}</span>
+                        </div>
+                    </template>
+                    <template v-for="(option, i) in options">
+                        <slot :stat="name" :level="level" :option="i"></slot>
+                    </template>
+                </div>
+            </div> -->
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/components/base/Tooltip.vue b/components/base/Tooltip.vue
index 7f68921..c06b246 100644
--- a/components/base/Tooltip.vue
+++ b/components/base/Tooltip.vue
@@ -4,7 +4,7 @@
             <span tabindex="0"><slot></slot></span>
         </TooltipTrigger>
         <TooltipPortal>
-            <TooltipContent class="TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50" :side="side" :side-offset="['left', 'right'].includes(side ?? '') ? 8 : 0">
+            <TooltipContent class="TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50" :class="$attrs.class" :side="side" :align="align" :align-offset="-16" :side-offset="['left', 'right'].includes(side ?? '') ? 8 : 0">
                 {{ message }}
                 <TooltipArrow class="fill-light-30 dark:fill-dark-30"></TooltipArrow>
             </TooltipContent>
@@ -15,9 +15,10 @@
 <script setup lang="ts">
 const { message, delay = 300, side } = defineProps<{
     message: string
-    delay?: number,
+    delay?: number
     disabled?: boolean
     side?: 'left' | 'right' | 'top' | 'bottom'
+    align: 'start' | 'center' | 'end'
 }>();
 </script>
 
diff --git a/components/character/editor/AbilityEditor.vue b/components/character/editor/AbilityEditor.vue
new file mode 100644
index 0000000..d76352f
--- /dev/null
+++ b/components/character/editor/AbilityEditor.vue
@@ -0,0 +1,38 @@
+<template>
+    <template v-if="model && model.people !== undefined">
+        <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10">
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Points restants</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-20 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+                </NumberFieldRoot>
+            </Label>
+            <Button @click="emit('next')">Suivant</Button>
+        </div>
+        <div class="flex flex-row flex-wrap justify-center items-center flex-1 gap-12 mx-8 my-4 px-48">
+            <template v-for="ability of config.abilities">
+                <div class="flex flex-col border border-light-50 dark:border-dark-50 p-4 gap-2 w-[200px] relative">
+                    <div class="flex justify-between">
+                        <NumberFieldRoot :min="0" class="flex w-20 justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
+                            <NumberFieldInput class="tabular-nums w-20 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+                        </NumberFieldRoot>
+                        <Tooltip side="bottom" :message="`${mainStatTexts[ability.max[0]]} (0) + ${mainStatTexts[ability.max[1]]} (0) + 0`"><span class="text-lg text-end cursor-pointer">/ {{ 0 }}</span></Tooltip>
+                    </div>
+                    <span class="text-xl text-center font-bold">{{ ability.name }}</span>
+                    <span class="absolute -bottom-px -left-px h-[3px] bg-accent-blue" :style="{ width: `200px` }"></span>
+                </div>
+            </template>
+        </div>
+    </template>
+</template>
+
+<script setup lang="ts">
+import { mainStatTexts, type Character, type CharacterConfig } from '~/types/character';
+
+const { config } = defineProps<{
+    config: CharacterConfig,
+}>();
+const model = defineModel<Character>({ required: true });
+
+const emit = defineEmits(['next']);
+</script>
\ No newline at end of file
diff --git a/components/character/editor/AspectSelector.vue b/components/character/editor/AspectSelector.vue
new file mode 100644
index 0000000..e4139d4
--- /dev/null
+++ b/components/character/editor/AspectSelector.vue
@@ -0,0 +1,38 @@
+<template>
+    <template v-if="model && model.people !== undefined">
+        <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10">
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Physique</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                </NumberFieldRoot>
+            </Label>
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Mental</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                </NumberFieldRoot>
+            </Label>
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Caractère</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                </NumberFieldRoot>
+            </Label>
+            <Button @click="emit('next')" :disabled="model.aspect === undefined">Enregistrer</Button>
+        </div>
+        <div class="flex flex-col flex-1 gap-4 mx-8 my-4">
+        </div>
+    </template>
+</template>
+
+<script setup lang="ts">
+import type { Character, CharacterConfig } from '~/types/character';
+
+const { config } = defineProps<{
+    config: CharacterConfig,
+}>();
+const model = defineModel<Character>({ required: true });
+
+const emit = defineEmits(['next']);
+</script>
\ No newline at end of file
diff --git a/components/character/editor/LevelEditor.vue b/components/character/editor/LevelEditor.vue
new file mode 100644
index 0000000..3961207
--- /dev/null
+++ b/components/character/editor/LevelEditor.vue
@@ -0,0 +1,113 @@
+<template>
+    <template v-if="model && model.people !== undefined">
+        <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10">
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Niveau</span>
+                <NumberFieldRoot :min="1" :max="20" v-model="model.level" @update:model-value="updateLevel" class="flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
+                    <NumberFieldInput class="tabular-nums w-20 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+                </NumberFieldRoot>
+            </Label>
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Attributions restantes</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                </NumberFieldRoot>
+            </Label>
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Vie</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                </NumberFieldRoot>
+            </Label>
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Mana</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                </NumberFieldRoot>
+            </Label>
+            <Button @click="emit('next')">Suivant</Button>
+        </div>
+        <div class="flex flex-col flex-1 gap-4 mx-8 my-4">
+            <template v-for="(level, index) of config.peoples[model.people].options">
+                <div class="w-full flex h-px"><div class="border-t border-dashed border-light-50 dark:border-dark-50 w-full" :class="{ 'opacity-30': index > model.level }"></div><span class="sticky top-0">{{ index }}</span></div>
+                <div class="flex flex-row gap-4 justify-center" :class="{ 'opacity-30': index > model.level }">
+                    <template v-for="(option, i) of level">
+                        <div class="flex border border-light-50 dark:border-dark-50 px-4 py-2 w-[400px]" @click="chooseOption(parseInt(index as unknown as string, 10) as Level, i)" 
+                        :class="{ 'hover:border-light-70 dark:hover:border-dark-70 cursor-pointer': index <= model.level, '!border-accent-blue bg-accent-blue bg-opacity-20': model.leveling?.some(e => e[0] == index && e[1] === i) ?? false }">
+                            <span class="text-wrap whitespace-pre">{{ raceOptionToText(option) }}</span>
+                        </div>
+                    </template>
+                </div>
+            </template>
+        </div>
+    </template>
+</template>
+
+<script setup lang="ts">
+import type { Character, CharacterConfig, Level, RaceOption } from '~/types/character';
+
+const { config } = defineProps<{
+    config: CharacterConfig,
+}>();
+const model = defineModel<Character>({ required: true });
+
+const emit = defineEmits(['next']);
+
+function raceOptionToText(option: RaceOption): string
+{
+    const text = [];
+    if(option.training) text.push(`+${option.training} point${option.training > 1 ? 's' : ''} de statistique${option.training > 1 ? 's' : ''}.`);
+    if(option.shaping) text.push(`+${option.shaping} transformation${option.shaping > 1 ? 's' : ''} par jour.`);
+    if(option.modifier) text.push(`+${option.modifier} au modifieur de votre choix.`);
+    if(option.abilities) text.push(`+${option.abilities} point${option.abilities > 1 ? 's' : ''} de compétence${option.abilities > 1 ? 's' : ''}.`);
+    if(option.health) text.push(`+${option.health} PV max.`);
+    if(option.mana) text.push(`+${option.mana} mana max.`);
+    if(option.spellslots) text.push(`+${option.spellslots} sort${option.spellslots > 1 ? 's' : ''} maitrisé${option.spellslots > 1 ? 's' : ''}.`);
+    return text.join('\n');
+}
+function chooseOption(level: Level, choice: number)
+{
+    const character = model.value;
+    if(level > character.level)
+        return;
+
+    if(character.leveling === undefined)
+        character.leveling = [[1, 0]];
+
+    if(level == 1)
+        return;
+
+    for(let i = 1; i < level; i++) //Check previous levels as a requirement
+    {
+        if(!character.leveling.some(e => e[0] == i))
+            return;
+    }
+
+    if(character.leveling.some(e => e[0] == level))
+    {
+        character.leveling.splice(character.leveling.findIndex(e => e[0] == level), 1, [level, choice]);
+    }
+    else
+    {
+        character.leveling.push([level, choice]);
+    }
+
+    model.value = character;
+}
+function updateLevel()
+{
+    const character = model.value;
+
+    if(character.leveling) //Invalidate higher levels
+    {
+        for(let level = 20; level > character.level; level--)
+        {
+            const index = character.leveling.findIndex(e => e[0] == level);
+            if(index !== -1)
+                character.leveling.splice(index, 1);
+        }
+    }
+
+    model.value = character;
+}
+</script>
\ No newline at end of file
diff --git a/components/character/editor/PeopleEditor.vue b/components/character/editor/PeopleSelector.vue
similarity index 93%
rename from components/character/editor/PeopleEditor.vue
rename to components/character/editor/PeopleSelector.vue
index 0539ef9..2c1d92f 100644
--- a/components/character/editor/PeopleEditor.vue
+++ b/components/character/editor/PeopleSelector.vue
@@ -8,8 +8,9 @@
         <div class="flex flex-1 gap-4 p-2 overflow-x-auto justify-center">
             <div v-for="(people, i) of config.peoples" @click="model.people = i" class="flex flex-col flex-nowrap gap-2 p-2 border border-light-35 dark:border-dark-35 
             cursor-pointer hover:border-light-70 dark:hover:border-dark-70 w-[320px]" :class="{ '!border-accent-blue outline-2 outline outline-accent-blue': model.people === i }">
-                <span class="text-xl font-bold text-center">{{ people.name }}</span>
                 <Avatar :src="people.name" :text="`Image placeholder`" class="h-[320px]" />
+                <span class="text-xl font-bold text-center">{{ people.name }}</span>
+                <span class="w-full border-b border-light-50 dark:border-dark-50"></span>
                 <span class="text-wrap word-break">{{ people.description }}</span>
             </div>
         </div>
diff --git a/components/character/editor/TrainingEditor.vue b/components/character/editor/TrainingEditor.vue
new file mode 100644
index 0000000..d478e37
--- /dev/null
+++ b/components/character/editor/TrainingEditor.vue
@@ -0,0 +1,69 @@
+<template>
+    <TrainingViewer :config="config">
+        <template #addin="{ stat }">
+            <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10">
+                <Label class="flex items-center justify-between gap-2">
+                    <span class="pb-1 mx-2 md:p-0">Points restants</span>
+                    <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                        <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                    </NumberFieldRoot>
+                </Label>
+                <Button @click="emit('next')">Suivant</Button>
+            </div>
+        </template>
+        <template #default="{ stat, level, option }">
+            <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-[400px] hover:border-light-50 dark:hover:border-dark-50" @click="toggleOption(stat, parseInt(level as unknown as string, 10) as TrainingLevel, option)" :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 || (model.training[stat]?.some(e => e[0] == level && e[1] === option) ?? false) }">
+                <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="config.training[stat][level][option].description.map(e => e.text).join('\n')" />
+            </div>
+        </template>
+    </TrainingViewer>
+</template>
+
+<script setup lang="ts">
+import PreviewA from '~/components/prose/PreviewA.vue';
+import { MAIN_STATS, type Character, type CharacterConfig, type MainStat, type TrainingLevel } from '~/types/character';
+
+const { config } = defineProps<{
+    config: CharacterConfig,
+}>();
+const model = defineModel<Character>({ required: true, });
+
+const maxTraining = Object.fromEntries(MAIN_STATS.map(e => [e, 0]));
+
+const emit = defineEmits(['next']);
+
+function toggleOption(stat: MainStat, level: TrainingLevel, choice: number)
+{
+    const character = model.value;
+
+    if(level == 0)
+        return;
+
+    for(let i = 1; i < level; i++) //Check previous levels as a requirement
+    {
+        if(!character.training[stat].some(e => e[0] == i))
+            return;
+    }
+
+    if(character.training[stat].some(e => e[0] == level))
+    {
+        if(character.training[stat].some(e => e[0] == level && e[1] === choice))
+        {
+            for(let i = 15; i >= level; i --) //Invalidate higher levels
+            {
+                const index = character.training[stat].findIndex(e => e[0] == i);
+                if(index !== -1)
+                    character.training[stat].splice(index, 1);
+            }
+        }
+        else
+            character.training[stat].splice(character.training[stat].findIndex(e => e[0] == level), 1, [level, choice]);
+    }
+    else //if(trainingPoints.value && trainingPoints.value > 0)
+    {
+        character.training[stat].push([level, choice]);
+    }
+
+    model.value = character;
+}
+</script>
\ No newline at end of file
diff --git a/db.sqlite-shm b/db.sqlite-shm
index c7b8549fc3e243b1ebef009a7e7e108c1d40c620..52008c164f8aab4f4cf04313e9ae696d0cf5b29f 100644
GIT binary patch
delta 690
zcmb7?SyatY6vlt&6qOA3!CEY9^<*t?9=v5t2$}y#<}oD{*Kkeg{==2b*EM8_kSVj9
zc}hYkQ!)>UD|6wRBj@C$S9_iBd}p0=*0=Y!*EUUQn$q5|q$xT&DG0Dw)OJFhql)74
zJ;mW=$u^HIvoO}{sNdLOH1kjS-~U=$ht{pE7XNOM<T#T`o#}bimL(`my>?X4MU7IJ
zrZ8V&jY6tBLIj1#K;gEE3Mp%A&hV2pG$%+|OSr5eQP!*?m)8ikH>V}72_cmBgel2z
zy3(DV81x~6NCq&7Aq-=LN;R4oVi`vq6R<LwsVemhW-%K(NzBDTGAS%#3CnQeVwEas
zE$c~R6Pww}Hg>R!-RxyQ2XS+lqXx%0$!X4Vj`LjL5|_D30oS=nAw}HfJ`Z`!Q=ai0
z52d{3E$=DgBcJ)gH-7Mo-&7)mkEkQ+X`?nF{i+Q6xXL4g?Ja0U8`{#24ytdR=|VSp
z(2L&mr62tn$Y6#toRLHk%^1cqo_HoQi7D8a&P)<W#AFWhRG$~Hki{%zIV)JnYEoIp
z1~!t;7Bbk*PBPiUJ`Qk*ERJx@P!n^CGh~xPE*Ht;3i({)2DiA)9q#dfM?9gJ5?=6<
pSG?gJA1LP&UcU03pH%Qi4WJahqOP!LYmEYBfaWH?(qD6KgTFi|&F}yK

delta 168
zcmZo@U}|V!s+V}A%K!p0K+MR%AYcKccLDLLtM2TsESr_u%bu34x}5oi%g8}*PF}_W
yQq=>E0t1k_|B(Pxn2AAVV&n78Cs?@bH$Px$5}f=c&|>o?mLsf_KZJuAH`D>SOE>cX

diff --git a/db.sqlite-wal b/db.sqlite-wal
index 74e03e7c0e28067d69618d722e6fb263d6942455..fae41e392279eac4e10c3da4afde3fb4d589d33a 100644
GIT binary patch
delta 14067
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
Hvd8}diy!Ls

delta 15
WcmZ3m+2uhOUqcIH3)2?ngjN7Ijs`aX

diff --git a/pages/character/[id]/edit.client.vue b/pages/character/[id]/edit.client.vue
index 0592b27..5811e91 100644
--- a/pages/character/[id]/edit.client.vue
+++ b/pages/character/[id]/edit.client.vue
@@ -1,41 +1,26 @@
-<script lang="ts">
-import config from '#shared/character-config.json';
-
-function raceOptionToText(option: RaceOption): string
-{
-    const text = [];
-    if(option.training) text.push(`+${option.training} point${option.training > 1 ? 's' : ''} de statistique${option.training > 1 ? 's' : ''}.`);
-    if(option.shaping) text.push(`+${option.shaping} transformation${option.shaping > 1 ? 's' : ''} par jour.`);
-    if(option.modifier) text.push(`+${option.modifier} au modifieur de votre choix.`);
-    if(option.abilities) text.push(`+${option.abilities} point${option.abilities > 1 ? 's' : ''} de compétence${option.abilities > 1 ? 's' : ''}.`);
-    if(option.health) text.push(`+${option.health} PV max.`);
-    if(option.mana) text.push(`+${option.mana} mana max.`);
-    if(option.spellslots) text.push(`+${option.spellslots} sort${option.spellslots > 1 ? 's' : ''} maitrisé${option.spellslots > 1 ? 's' : ''}.`);
-    return text.join('\n');
-}
-function getFeaturesOf(stat: MainStat, progression: DoubleIndex<TrainingLevel>[]): TrainingOption[]
-{
-    const characterData = config as CharacterConfig;
-    return progression.map(e => characterData.training[stat][e[0]][e[1]]);
-}
-
-
-
-function abilitySpecialFeatures(type: "points" | "max", curiosity: DoubleIndex<TrainingLevel>[], value: number): number
-{
-    if(type === 'points')
-    {
-        if(curiosity.find(e => e[0] == 6 && e[1] === 0))
-            return Math.max(6, value);
-        if(curiosity.find(e => e[0] == 6 && e[1] === 2))
-            return value + 1;
-    }
-    return value;
-}
-</script>
 <script setup lang="ts">
-import PreviewA from '~/components/prose/PreviewA.vue';
-import { defaultCharacter, elementTexts, mainStatTexts, spellTypeTexts, type Ability, type Character, type CharacterConfig, type DoubleIndex, type Level, type MainStat, type RaceOption, type SpellConfig, type SpellElement, type SpellType, type TrainingLevel, type TrainingOption } from '~/types/character';
+import config from '#shared/character-config.json';
+import { ABILITIES, defaultCharacter, MAIN_STATS, type Ability, type Character, type CharacterConfig, type MainStat } from '~/types/character';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+
+export interface EditorValues
+{
+    health: number,
+    mana: number,
+    training: number,
+    trainingSpent: number,
+    abilities: Record<Ability, number>,
+    abilitiesMax: Record<Ability, number>,
+    modifiers: Record<MainStat, number>,
+}
+
+const stepTexts = {
+    0: 'Choisissez un peuple afin de définir la progression de votre personnage au fil des niveaux.',
+    1: 'Déterminez la progression de votre personnage en choisissant une option par niveau disponible.',
+    2: 'Spécialisez votre personnage en attribuant vos points d\'entrainement parmi les 7 branches disponibles.\nChaque paliers de 3 points augmentent votre modifieur.',
+    3: 'Diversifiez vos possibilités en affectant vos points dans les différentes compétences disponibles.',
+    4: 'Déterminez l\'Aspect qui vous corresponds et benéficiez de puissants bonus.'
+};
 
 definePageMeta({
     guestsGoesTo: '/user/login',
@@ -44,36 +29,18 @@ let id = useRouter().currentRoute.value.params.id;
 const { add } = useToast();
 const characterConfig = config as CharacterConfig;
 const data = ref<Character>({ ...defaultCharacter });
-const spellFilter = ref<{
-    ranks: Array<1 | 2 | 3 | 4>,
-    types: Array<SpellType>,
-    text: string,
-    elements: Array<SpellElement>,
-    tags: string[],
-}>({
-    ranks: [],
-    types: [],
-    text: "",
-    elements: [],
-    tags: [],
-});
 
 const step = ref(0);
 
-const raceOptions = computed(() => data.value.people !== undefined ? characterConfig.peoples[data.value.people!].options : undefined);
-const selectedRaceOptions = computed(() => raceOptions.value ? data.value.leveling!.map(e => raceOptions.value![e[0]][e[1]]) : undefined);
-const trainingPoints = computed(() => raceOptions.value ? data.value.leveling?.reduce((p, v) => p + (raceOptions.value![v[0]][v[1]].training ?? 0), 0) : 0);
-const training = computed(() => Object.entries(characterConfig.training).map(e => [e[0], getFeaturesOf(e[0] as MainStat, data.value.training[e[0] as MainStat])]) as [MainStat, TrainingOption[]][]);
-const maxTraining = computed(() => Object.entries(data.value.training).reduce((p, v) => { p[v[0] as MainStat] = v[1].reduce((_p, _v) => Math.max(_p, _v[0]) , 0); return p; }, {} as Record<MainStat, number>));
-const trainingSpent = computed(() => Object.values(maxTraining.value).reduce((p, v) => p + v, 0));
-const modifiers = computed(() => Object.entries(maxTraining.value).reduce((p, v) => { p[v[0] as MainStat] = Math.floor(v[1] / 3) + (data.value.modifiers ? (data.value.modifiers[v[0] as MainStat] ?? 0) : 0); return p; }, {} as Record<MainStat, number>))
-const modifierPoints = computed(() => (selectedRaceOptions.value ? selectedRaceOptions.value.reduce((p, v) => p + (v?.modifier ?? 0), 0) : 0) + training.value.reduce((p, v) => p + v[1].reduce((_p, _v) => _p + (_v?.modifier ?? 0), 0), 0));
-const modifierSpent = computed(() => Object.values(data.value.modifiers ?? {}).reduce((p, v) => p + v, 0));
-const abilityPoints = computed(() => (selectedRaceOptions.value ? selectedRaceOptions.value.reduce((p, v) => p + (v?.abilities ?? 0), 0) : 0) + training.value.flatMap(e => e[1].filter(_e => _e.ability !== undefined)).reduce((p, v) => p + v.ability!, 0));
-const abilityMax = computed(() => Object.entries(characterConfig.abilities).reduce((p, v) => { p[v[0] as Ability] = abilitySpecialFeatures("max", data.value.training.curiosity, Math.floor(maxTraining.value[v[1].max[0]] / 3) + Math.floor(maxTraining.value[v[1].max[1]] / 3)); return p; }, {} as Record<Ability, number>));
-const abilitySpent = computed(() => Object.values(data.value.abilities ?? {}).reduce((p, v) => p + v[0], 0));
-const spellranks = computed(() => training.value.flatMap(e => e[1].filter(_e => _e.spellrank !== undefined)).reduce((p, v) => { p[v.spellrank!]++; return p; }, { instinct: 0, precision: 0, knowledge: 0 } as Record<SpellType, 0 | 1 | 2 | 3>));
-const spellsPoints = computed(() => training.value.flatMap(e => e[1].filter(_e => _e.spellslot !== undefined)).reduce((p, v) => p + (modifiers.value.hasOwnProperty(v.spellslot as MainStat) ? modifiers.value[v.spellslot as MainStat] : v.spellslot as number), 0));
+const values: EditorValues = reactive({
+    health: 0,
+    mana: 0,
+    training: 0,
+    trainingSpent: 0,
+    abilities: Object.fromEntries(ABILITIES.map(e => [e, 0])) as Record<Ability, number>,
+    abilitiesMax: Object.fromEntries(ABILITIES.map(e => [e, 0])) as Record<Ability, number>,
+    modifiers: Object.fromEntries(MAIN_STATS.map(e => [e, 0])) as Record<MainStat, number>,
+});
 
 if(id !== 'new')
 {
@@ -87,98 +54,6 @@ if(id !== 'new')
     data.value = Object.assign(defaultCharacter, data.value, character);
 }
 
-function selectRaceOption(level: Level, choice: number)
-{
-    const character = data.value;
-    if(level > character.level)
-        return;
-
-    if(character.leveling === undefined)
-        character.leveling = [[1, 0]];
-
-    if(level == 1)
-        return;
-
-    for(let i = 1; i < level; i++) //Check previous levels as a requirement
-    {
-        if(!character.leveling.some(e => e[0] == i))
-            return;
-    }
-
-    if(character.leveling.some(e => e[0] == level))
-    {
-        character.leveling.splice(character.leveling.findIndex(e => e[0] == level), 1, [level, choice]);
-    }
-    else
-    {
-        character.leveling.push([level, choice]);
-    }
-
-    data.value = character;
-}
-function switchTrainingOption(stat: MainStat, level: TrainingLevel, choice: number)
-{
-    const character = data.value;
-
-    if(level == 0)
-        return;
-
-    for(let i = 1; i < level; i++) //Check previous levels as a requirement
-    {
-        if(!character.training[stat].some(e => e[0] == i))
-            return;
-    }
-
-    if(character.training[stat].some(e => e[0] == level))
-    {
-        if(character.training[stat].some(e => e[0] == level && e[1] === choice))
-        {
-            for(let i = 15; i >= level; i --) //Invalidate higher levels
-            {
-                const index = character.training[stat].findIndex(e => e[0] == i);
-                if(index !== -1)
-                    character.training[stat].splice(index, 1);
-            }
-        }
-        else
-            character.training[stat].splice(character.training[stat].findIndex(e => e[0] == level), 1, [level, choice]);
-    }
-    else if(trainingPoints.value && trainingPoints.value > 0)
-    {
-        character.training[stat].push([level, choice]);
-    }
-
-    data.value = character;
-}
-function updateLevel()
-{
-    const character = data.value;
-
-    if(character.leveling) //Invalidate higher levels
-    {
-        for(let level = 20; level > character.level; level--)
-        {
-            const index = character.leveling.findIndex(e => e[0] == level);
-            if(index !== -1)
-                character.leveling.splice(index, 1);
-        }
-    }
-
-    data.value = character;
-}
-function filterSpells(spells: SpellConfig[])
-{
-    const filter = spellFilter.value
-    let list = [...spells];
-    list = list.filter(e => spellranks.value[e.type] >= e.rank);
-    if(filter.text.length > 0) list = list.filter(e => e.name.toLowerCase().includes(filter.text.toLowerCase()));
-    if(filter.types.length > 0) list = list.filter(e => filter.types.includes(e.type));
-    if(filter.ranks.length > 0) list = list.filter(e => filter.ranks.includes(e.rank));
-    if(filter.elements.length > 0) list = list.filter(e => filter.elements.some(f => e.elements.includes(f)));
-    if(filter.tags.length > 0) list = list.filter(e => !e.tags || filter.tags.some(f => e.tags!.includes(f)));
-
-    return list;
-}
 async function save(leave: boolean)
 {
     if(data.value.name === '' || data.value.people === undefined || data.value.people === -1)
@@ -188,6 +63,7 @@ async function save(leave: boolean)
     }
     if(id === 'new')
     {
+        //@ts-ignore
         id = await useRequestFetch()(`/api/character`, {
             method: 'post',
             body: data.value,
@@ -201,6 +77,7 @@ async function save(leave: boolean)
     }
     else
     {
+        //@ts-ignore
         await useRequestFetch()(`/api/character/${id}`, {
             method: 'post',
             body: data.value,
@@ -224,82 +101,33 @@ useShortcuts({
     </Head>
     <div class="flex flex-1 max-w-full flex-col align-center">
         <StepperRoot class="flex flex-1 flex-col justify-start items-center px-8 w-full h-full overflow-y-hidden" v-model="step">
-            <div class="flex w-full flex-row gap-4 self-center items-center justify-center relative px-4 bg-light-0 dark:bg-dark-0 z-20">
-                <StepperItem :step="0"><StepperTrigger class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</StepperTrigger></StepperItem>
-                <StepperItem :disabled="data.people === undefined" :step="1" class="group flex"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent" /><StepperTrigger 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">Niveaux</StepperTrigger></StepperItem>
-                <StepperItem :disabled="data.people === undefined" :step="2" class="group flex"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent" /><StepperTrigger 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">Entrainement</StepperTrigger></StepperItem>
-                <StepperItem :disabled="data.people === undefined" :step="3" class="group flex"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent" /><StepperTrigger 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">Compétences</StepperTrigger></StepperItem>
-                <StepperItem :disabled="data.people === undefined" :step="4" class="group flex"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent" /><StepperTrigger 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">Aspect</StepperTrigger></StepperItem>
+            <div class="flex w-full flex-row gap-4 items-center justify-between px-4 bg-light-0 dark:bg-dark-0 z-20">
+                <div></div>
+                <div class="flex w-full flex-row gap-4 items-center justify-center relative">
+                    <StepperItem :step="0" class="group"><StepperTrigger class="px-2 py-1 border-b border-transparent hover:border-accent-blue group-data-[state=active]:text-accent-blue">Peuples</StepperTrigger></StepperItem>
+                    <StepperItem :disabled="data.people === undefined" :step="1" class="group flex items-center"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" /><StepperTrigger 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 group-data-[state=active]:text-accent-blue">Niveaux</StepperTrigger></StepperItem>
+                    <StepperItem :disabled="data.people === undefined" :step="2" class="group flex items-center"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" /><StepperTrigger 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 group-data-[state=active]:text-accent-blue">Entrainement</StepperTrigger></StepperItem>
+                    <StepperItem :disabled="data.people === undefined" :step="3" class="group flex items-center"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" /><StepperTrigger 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 group-data-[state=active]:text-accent-blue">Compétences</StepperTrigger></StepperItem>
+                    <StepperItem :disabled="data.people === undefined" :step="4" class="group flex items-center"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" /><StepperTrigger 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 group-data-[state=active]:text-accent-blue">Aspect</StepperTrigger></StepperItem>
+                </div>
+                <div>
+                    <Tooltip class="max-w-96" side="bottom" align="end" :message="stepTexts[step]"><Icon icon="radix-icons:question-mark-circled" class="w-5 h-5" /></Tooltip>
+                </div>
             </div>
             <div class="flex-1 outline-none max-w-full w-full overflow-y-auto" v-show="step === 0">
-                <PeopleEditor v-model="data" :config="characterConfig" @next="step = 1" />
+                <PeopleSelector v-model="data" :config="characterConfig" @next="step = 1" />
             </div>
             <div class="flex-1 outline-none max-w-full w-full overflow-y-auto" v-show="step === 1">
+                <LevelEditor v-model="data" :config="characterConfig" @next="step = 2" />
             </div>
             <div class="flex-1 outline-none max-w-full w-full h-full max-h-full overflow-y-auto" v-show="step === 2">
-                <TrainingViewer :config="characterConfig" progress>
-                    <template #default="{ stat, level, option }">
-                        <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) }">
-                            <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="config.training[stat][level][option].description.map(e => e.text).join('\n')" />
-                        </div>
-                    </template>
-                    <template #addin="{ stat }">
-                        <div class="bg-light-0 dark:bg-dark-0 z-10">
-                            <span class="text-xl" :class="{ 'text-light-red dark:text-dark-red': (trainingPoints ?? 0) < trainingSpent }">Points d'entrainement restants: {{ (trainingPoints ?? 0) - trainingSpent }}</span>
-                        </div>
-                    </template>
-                </TrainingViewer>
+                <TrainingEditor v-model="data" :config="characterConfig" @next="step = 3" />
             </div>
             <div class="flex-1 outline-none max-w-full w-fulloverflow-y-auto" v-show="step === 3">
-                <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>
-                    </div>
-                    <div class="grid gap-4 grid-cols-6">
-                        <div v-for="(ability, index) of characterConfig.abilities" class="flex flex-col items-center border border-light-30 dark:border-dark-30 p-2">
-                            <div class="flex items-center justify-center gap-4">
-                                <NumberFieldRoot :min="0" :default-value="data.abilities[index] ? data.abilities[index][0] : 0" @update:model-value="(value) => { data.abilities[index] = [value, data.abilities[index] ? data.abilities[index][1] : 0]; }" class="border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
-                            data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
-                                    <NumberFieldInput class="tabular-nums w-8 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
-                                </NumberFieldRoot>
-                                <span class="font-bold col-span-4">/{{ abilityMax[index] }}</span>
-                            </div>
-                            <span class="text-xl font-bold flex-2">{{ ability.name }}</span>
-                            <span class="text-sm text-light-70 dark:text-dark-70 flex-1">({{ mainStatTexts[ability.max[0]] }} + {{ mainStatTexts[ability.max[1]] }})</span>
-                        </div>
-                    </div>
-                </div>
+                <AbilityEditor v-model="data" :config="characterConfig" @next="step = 4" />
             </div>
             <div class="flex-1 outline-none max-w-full w-full overflow-y-auto" v-show="step === 4">
-                <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>
-                        <TextInput label="Nom" v-model="spellFilter.text" />
-                        <Combobox label="Rang" v-model="spellFilter.ranks" multiple :options="[['Rang 1', 1], ['Rang 2', 2], ['Rang 3', 3]]" />
-                        <Combobox label="Type" v-model="spellFilter.types" multiple :options="[['Précision', 'precision'], ['Savoir', 'knowledge'], ['Instinct', 'instinct']]" />
-                        <Combobox label="Element" v-model="spellFilter.elements" multiple :options="[['Feu', 'fire'], ['Glace', 'ice'], ['Foudre', 'thunder'], ['Terre', 'earth'], ['Arcane', 'arcana'], ['Air', 'air'], ['Nature', 'nature'], ['Lumière', 'light'], ['Psy', 'psyche']]" />
-                    </div>
-                    <div class="grid gap-4 grid-cols-2">
-                        <div class="py-1 px-2 border border-light-30 dark:border-dark-30 flex flex-col hover:border-light-50 dark:hover:border-dark-50 cursor-pointer" v-for="spell of filterSpells(characterConfig.spells)" :class="{ '!border-accent-blue bg-accent-blue bg-opacity-20': data.spells?.find(e => e === spell.id) }"
-                            @click="() => data.spells?.includes(spell.id) ? data.spells.splice(data.spells.findIndex((e: string) => e === spell.id), 1) : data.spells!.push(spell.id)">
-                            <div class="flex flex-row justify-between">
-                                <span class="text-lg font-bold">{{ spell.name }}</span>
-                                <div class="flex flex-row items-center gap-6">
-                                    <div class="flex flex-row text-sm gap-2">
-                                        <span v-for="element of spell.elements" :class="elementTexts[element].class" class="border !border-opacity-50 rounded-full !bg-opacity-20 px-2 py-px">{{ elementTexts[element].text }}</span>
-                                    </div>
-                                    <div class="flex flex-row text-sm gap-1">
-                                        <span class="">Rang {{ spell.rank }}</span><span>/</span>
-                                        <span class="">{{ spellTypeTexts[spell.type] }}</span><span>/</span>
-                                        <span class="">{{ spell.cost }} mana</span><span>/</span>
-                                        <span class="">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <MarkdownRenderer :content="spell.effect" />
-                        </div>
-                    </div>
-                </div>
+                <AspectSelector v-model="data" :config="characterConfig" @next="save(true)" />
             </div>
         </StepperRoot>
     </div>
diff --git a/pages/character/manage.client.vue b/pages/character/manage.client.vue
index 4e4d5b5..fd7d07c 100644
--- a/pages/character/manage.client.vue
+++ b/pages/character/manage.client.vue
@@ -25,16 +25,18 @@ function copy()
             <TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts</TabsTrigger>
             <Tooltip message="Copier le JSON" side="right"><Button icon @click="copy" class="p-2"><Icon icon="radix-icons:clipboard-copy" /></Button></Tooltip>
         </TabsList>
-        <TabsContent value="peoples" class="flex-1 outline-none max-w-full w-full">
-        </TabsContent>
-        <TabsContent value="training" class="flex-1 outline-none max-w-full w-full">
-            <TrainingEditor :config="config" />
-        </TabsContent>
-        <TabsContent value="abilities" class="flex-1 outline-none max-w-full w-full">
-            
-        </TabsContent>
-        <TabsContent value="spells" class="flex-1 outline-none max-w-full w-full">
-            
-        </TabsContent>
+        <div class="flex-1 outline-none max-w-full w-full">
+            <TabsContent value="peoples">
+            </TabsContent>
+            <TabsContent value="training">
+                <TrainingConfigEditor :config="config" />
+            </TabsContent>
+            <TabsContent value="abilities">
+                
+            </TabsContent>
+            <TabsContent value="spells">
+                
+            </TabsContent>
+        </div>
     </TabsRoot>
 </template>
\ No newline at end of file
diff --git a/types/character.ts b/types/character.ts
index caf812b..207fe1b 100644
--- a/types/character.ts
+++ b/types/character.ts
@@ -84,7 +84,7 @@ export type Character = {
     name: string;
     people?: number;
     level: number;
-    aspect?: number | null;
+    aspect?: number;
     notes?: string | null;
     health: number;
     mana: number;