From 308c2974f1ed6aee8e97808b2af1a88a39046126 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Pons?= <clement.pons@stms.fr>
Date: Tue, 22 Apr 2025 11:29:23 +0200
Subject: [PATCH] Progress on abilities

---
 db.sqlite                                 | Bin 614400 -> 614400 bytes
 db.sqlite-shm                             | Bin 32768 -> 32768 bytes
 db.sqlite-wal                             | Bin 61832 -> 325512 bytes
 pages/character/[id]/edit.client.vue      |  56 +++++++++++++++++-----
 pages/character/[id]/index.client.vue     |  12 ++---
 server/api/character/[id]/compiled.get.ts |   2 +-
 shared/character-config.json              |  19 ++++++++
 types/character.d.ts                      |  12 +++--
 8 files changed, 79 insertions(+), 22 deletions(-)

diff --git a/db.sqlite b/db.sqlite
index 7c291621a5076ff06f553d523a33abaf38feb71e..bee505bf9b436d890b788b5e86def83f5c6c5fc2 100644
GIT binary patch
delta 201
zcmZoTpxSUibpuO)2nXK;2L4O@OZdz9J@}>g-tg_?o3L3?p@L6Ohl3@Qlf^VSHO<^2
zDOooyEiFaY#K<^JH_0r`Sl2MkJSjQV%rY&}!Zd?Dz<lz)I31>i6F0w!lVD`y;M>T+
zw{bH^!g4+>O`s`^#F)ad`F5V7APdkewWfx)2F7g-OxoOxhV44tOhC*G#4JF}3dC$c
M%)VWxo8!tA0A+GKkpKVy

delta 154
zcmZoTpxSUibpuO)5If&K2L4O@OZdz9J@}>g-tg_)tf;V@k5PB>zBnDGl53ma#7Qu+
zu=Cw!*vyr%oKJ^=L6aqvlQA*Hz}V0r(L^`dz&K6UB-t=U*V5G3ST`}v&@?eQG0n`-
z*hp*h?L0+67PgXWs!a`T4UF3wn6$YW4cc|OnShuXh*^M`6^Pk@n0>oWH^-GL03UNN
AO#lD@

diff --git a/db.sqlite-shm b/db.sqlite-shm
index 132e9099d6c98911ca9d12599fd928d51c202b3e..5ae9413bdbaa0909c5efc38075f96f9ae395237c 100644
GIT binary patch
delta 351
zcmb7=OHRT75Qe|jRI2y@1+7mM@d1h=A|ir<FJ2<L@(8Xq?5zvqx-q(T<IcqN0Gc%M
z04}%yZ~<-rtudxszRYCu&;0opqpG5+ig!vQjKz-G0=O#Xe6jRbGwSq;pVjAw<m1~<
zDIL3R)>8G`ZvAG|FIH~b#@|{*(e8cPyJ9O@dkxs+|4G)rBNt_X9wZ#};bf3u+>GL7
zoC&6w!H1s!ORNxLjddbKi4iA3k`()7IOLd9@)SAaTsJ<Xr`A<(PNts$hHx>0hcOf;
tnP!$b7FcANAghGgV3RGj&1dbhN16k&9C1R90wu~+bmPV^%<IOb)B#$sQosNJ

delta 196
zcmZo@U}|V!s+V}A%K!qrK+MR%Aixi#rvb6O>aLBK!v58U2Xq}$dTKIp>TeOPwpT~(
zNL3Fs3JgHz{zn2(VI~HqiH-7;IT%$oA7L~ISbTwzk(ZHynSqsogMo{Ihk<YNLB{v2
ZlRt#Bv2!wT16|1v6xgW5$PT0eSpgAwIeq{D

diff --git a/db.sqlite-wal b/db.sqlite-wal
index 1880cf4e492cf858107fe806656c5c754d118252..d3e350d754e9941ce9391ec465efebcf07dac831 100644
GIT binary patch
literal 325512
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
TK!5-N0wYBrtQR=v)x-Z6M)kIG

delta 832
zcmeBpFWm8%+0VS5t%*VRkpu&S00Rhw2Xq}$dTKIpdSP(ZgFXR6pb#4nPlJg&pZ~4*
zRNlCh7bwWiw~vAU68{qZGJX$!DZV#+`!-KBSkA|&JDpF7Nr$QA-F6!#CK*Nnm|lCm
zBhJxx|1)h45ctDy#8&c772Wj7GXH1K_gXZG2-ByXK{I__iP4l_vv2N(nm+9ehUvSj
z4<#J9%>A7h)6b%r-hV}N?yA)8IbhSZ*ruHYnXZW(GMQV{R!_ZAQpd}Cg@KvlH3P?M
zZa;pfje&PLwkz{6B{Q+KGPAR9@8V;MW}LoGkV$^Jk|2{EM{-7DQD$*&;&gw0Cb8*q
zLQGtYhSN_9GMP@-7GTQes%2nc%wtgJ>@c6M!^7mpY^q~8y_|>1clsF~rk?4Eyi8V{
zu{uf+L#9^=F&$Hb1@`wJEX*bK>;Dnq*%|$4o>f<tuDSi!^ExyrXY^wPrAt_s$M^XU
znu#%e8k*^5G2N_EM+_rircc8#UGtf$>iioa6NoT<!D=+qm)VuIac2K=gqpr!HHPW$
ljLmK(bAC$2Yx;Iz681tQ-Hp3c?Q8#qT>_iR!nSatDgXdt4kQ2o

diff --git a/pages/character/[id]/edit.client.vue b/pages/character/[id]/edit.client.vue
index f11d0c0..291a4ef 100644
--- a/pages/character/[id]/edit.client.vue
+++ b/pages/character/[id]/edit.client.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import config from '#shared/character-config.json';
 function raceOptionToText(option: RaceOption): string
 {
     const text = [];
@@ -10,13 +11,27 @@ function raceOptionToText(option: RaceOption): string
     if(option.mana) text.push(`+${option.mana} mana max.`);
     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]]);
+}
+
+const mainStatTexts: Record<MainStat, string> = {
+    "strength": "Force",
+    "dexterity": "Dextérité",
+    "constitution": "Constitution",
+    "intelligence": "Intelligence",
+    "curiosity": "Curiosité",
+    "charisma": "Charisme",
+    "psyche": "Psyché",
+}
 </script>
 <script setup lang="ts">
-import config from '#shared/character-config.json';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import PreviewA from '~/components/prose/PreviewA.vue';
 import { clamp } from '~/shared/general.util';
-import type { Character, CharacterConfig, Level, MainStat, RaceOption, TrainingLevel } from '~/types/character';
+import type { Ability, Character, CharacterConfig, DoubleIndex, Level, MainStat, RaceOption, TrainingLevel, TrainingOption } from '~/types/character';
 
 definePageMeta({
     guestsGoesTo: '/user/login',
@@ -42,6 +57,8 @@ const data = ref<Character>({
             index: undefined,
             progress: [[1, 0]],
         },
+        abilities: {},
+        modifiers: {},
     },
 });
 
@@ -52,8 +69,13 @@ const trainingPoints = computed(() => {
         return p + (options[v[0]][v[1]].training ?? 0)
     }, 0) : 0;
 });
-const maxTraining = computed(() => Object.entries(data.value.progress.training).reduce((p, v) => { p[v[0]] = v[1].reduce((_p, _v) => Math.max(_p, _v[0]) , 0); return p; }, {} as Record<string, number>));
+const training = computed(() => Object.entries(characterConfig.training).map(e => [e[0], getFeaturesOf(e[0] as MainStat, data.value.progress.training[e[0] as MainStat])]) as [MainStat, TrainingOption[]][])
+const maxTraining = computed(() => Object.entries(data.value.progress.training).reduce((p, v) => { p[v[0]] = 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));
+const modifiers = computed(() => Object.entries(maxTraining.value).reduce((p, v) => { p[v[0]] = Math.floor(v[1] / 3) + (data.value.progress.modifiers ? data.value.progress.modifiers[v[0]] : 0); return p; }, {} as Record<MainStat, number>))
+const abilityPoints = computed(() => training.value.flatMap(e => e[1].filter(_e => _e.ability !== undefined)).reduce((p, v) => p + v.ability!, 0));
+const abilityMax = computed(() => Object.entries(characterConfig.ability).reduce((p, v) => { p[v[0]] = 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.progress.abilities ?? {}).reduce((p, v) => p + v[1], 0));
 
 if(id !== 'new')
 {
@@ -242,43 +264,43 @@ useShortcuts({
                         </div>
                         <div class="flex gap-4 relative" :style="`left: calc(calc(-100% - 1em) * ${trainingTab}); transition: left .5s ease;`">
                             <div class="flex w-full flex-shrink-0 flex-col gap-2 relative">
-                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Force<span v-if="maxTraining.strength >= 0">: Niveau {{ maxTraining.strength }} (+{{ Math.floor(maxTraining.strength / 3) }})</span></div>
+                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Force<span v-if="maxTraining.strength >= 0">: Niveau {{ maxTraining.strength }} (+{{ modifiers.strength }})</span></div>
                                 <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.training.strength" :class="{ 'opacity-30': index > maxTraining.strength + 1 }">
                                     <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-1/3" v-for="(option, i) of level" @click="switchTrainingOption('strength', index as TrainingLevel, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= maxTraining.strength + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': index == 0 || (data.progress.training.strength?.some(e => e[0] == index && e[1] === i) ?? false) }"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
                                 </div>
                             </div>
                             <div class="flex w-full flex-shrink-0 flex-col gap-2 relative">
-                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Dextérité<span v-if="maxTraining.dexterity >= 0">: Niveau {{ maxTraining.dexterity }} (+{{ Math.floor(maxTraining.dexterity / 3) }})</span></div>
+                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Dextérité<span v-if="maxTraining.dexterity >= 0">: Niveau {{ maxTraining.dexterity }} (+{{ modifiers.dexterity }})</span></div>
                                 <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.training.dexterity" :class="{ 'opacity-30': index > maxTraining.dexterity + 1 }">
                                     <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-1/3" v-for="(option, i) of level" @click="switchTrainingOption('dexterity', index as TrainingLevel, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= maxTraining.dexterity + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': index == 0 || (data.progress.training.dexterity?.some(e => e[0] == index && e[1] === i) ?? false) }"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
                                 </div>
                             </div>
                             <div class="flex w-full flex-shrink-0 flex-col gap-2 relative">
-                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Constitution<span v-if="maxTraining.constitution >= 0">: Niveau {{ maxTraining.constitution }} (+{{ Math.floor(maxTraining.constitution / 3) }})</span></div>
+                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Constitution<span v-if="maxTraining.constitution >= 0">: Niveau {{ maxTraining.constitution }} (+{{ modifiers.constitution }})</span></div>
                                 <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.training.constitution" :class="{ 'opacity-30': index > maxTraining.constitution + 1 }">
                                     <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-1/3" v-for="(option, i) of level" @click="switchTrainingOption('constitution', index as TrainingLevel, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= maxTraining.constitution + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': index == 0 || (data.progress.training.constitution?.some(e => e[0] == index && e[1] === i) ?? false) }"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
                                 </div>
                             </div>
                             <div class="flex w-full flex-shrink-0 flex-col gap-2 relative">
-                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Intelligence<span v-if="maxTraining.intelligence >= 0">: Niveau {{ maxTraining.intelligence }} (+{{ Math.floor(maxTraining.intelligence / 3) }})</span></div>
+                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Intelligence<span v-if="maxTraining.intelligence >= 0">: Niveau {{ maxTraining.intelligence }} (+{{ modifiers.intelligence }})</span></div>
                                 <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.training.intelligence" :class="{ 'opacity-30': index > maxTraining.intelligence + 1 }">
                                     <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-1/3" v-for="(option, i) of level" @click="switchTrainingOption('intelligence', index as TrainingLevel, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= maxTraining.intelligence + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': index == 0 || (data.progress.training.intelligence?.some(e => e[0] == index && e[1] === i) ?? false) }"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
                                 </div>
                             </div>
                             <div class="flex w-full flex-shrink-0 flex-col gap-2 relative">
-                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Curiosité<span v-if="maxTraining.curiosity >= 0">: Niveau {{ maxTraining.curiosity }} (+{{ Math.floor(maxTraining.curiosity / 3) }})</span></div>
+                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Curiosité<span v-if="maxTraining.curiosity >= 0">: Niveau {{ maxTraining.curiosity }} (+{{ modifiers.curiosity }})</span></div>
                                 <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.training.curiosity" :class="{ 'opacity-30': index > maxTraining.curiosity + 1 }">
                                     <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-1/3" v-for="(option, i) of level" @click="switchTrainingOption('curiosity', index as TrainingLevel, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= maxTraining.curiosity + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': index == 0 || (data.progress.training.curiosity?.some(e => e[0] == index && e[1] === i) ?? false) }"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
                                 </div>
                             </div>
                             <div class="flex w-full flex-shrink-0 flex-col gap-2 relative">
-                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Charisme<span v-if="maxTraining.charisma >= 0">: Niveau {{ maxTraining.charisma }} (+{{ Math.floor(maxTraining.charisma / 3) }})</span></div>
+                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Charisme<span v-if="maxTraining.charisma >= 0">: Niveau {{ maxTraining.charisma }} (+{{ modifiers.charisma }})</span></div>
                                 <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.training.charisma" :class="{ 'opacity-30': index > maxTraining.charisma + 1 }">
                                     <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-1/3" v-for="(option, i) of level" @click="switchTrainingOption('charisma', index as TrainingLevel, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= maxTraining.charisma + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': index == 0 || (data.progress.training.charisma?.some(e => e[0] == index && e[1] === i) ?? false) }"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
                                 </div>
                             </div>
                             <div class="flex w-full flex-shrink-0 flex-col gap-2 relative">
-                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Psyché<span v-if="maxTraining.psyche >= 0">: Niveau {{ maxTraining.psyche }} (+{{ Math.floor(maxTraining.psyche / 3) }})</span></div>
+                                <div class="sticky top-1 left-16 py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold self-start border border-light-30 dark:border-dark-30">Psyché<span v-if="maxTraining.psyche >= 0">: Niveau {{ maxTraining.psyche }} (+{{ modifiers.psyche }})</span></div>
                                 <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.training.psyche" :class="{ 'opacity-30': index > maxTraining.psyche + 1 }">
                                     <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-1/3" v-for="(option, i) of level" @click="switchTrainingOption('psyche', index as TrainingLevel, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= maxTraining.psyche + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': index == 0 || (data.progress.training.psyche?.some(e => e[0] == index && e[1] === i) ?? false) }"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
                                 </div>
@@ -292,9 +314,21 @@ useShortcuts({
                     <span class="font-bold text-xl">Compétences</span>
                 </template>
                 <template #default>
-                    
+                    <div class="flex flex-col gap-2 px-4">
+                        <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 v-for="(ability, index) of characterConfig.ability" class="grid grid-cols-10 gap-4 items-center">
+                            <span class="text-lg col-span-2">{{ ability.name }}</span>
+                            <span class="text-sm text-light-70 dark:text-dark-70 col-span-2">({{ mainStatTexts[ability.max[0]] }} + {{ mainStatTexts[ability.max[1]] }})</span>
+                            <NumberFieldRoot :min="0" :max="20" :default-value="data.progress.abilities[index] ? data.progress.abilities[index][0] : 0" @update:model-value="(value) => { data.progress.abilities[index] = [value, data.progress.abilities[index] ? data.progress.abilities[index][1] : 0]; console.log(abilitySpent) }" class="flex justify-center 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-20 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+                            </NumberFieldRoot>
+                            <span class="font-bold col-span-4">(max: {{ abilityMax[index] }})</span>
+                        </div>
+                    </div>
                 </template>
             </Collapsible>
+            <div class="h-[50vh]"></div>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/pages/character/[id]/index.client.vue b/pages/character/[id]/index.client.vue
index 10721af..8b3b474 100644
--- a/pages/character/[id]/index.client.vue
+++ b/pages/character/[id]/index.client.vue
@@ -14,7 +14,7 @@ const { data: character, status, error } = await useAsyncData(() => useRequestFe
             <Title>d[any] - Chargement ...</Title>
         </Head>
     </div>
-    <div v-else-if="status === 'success' && character">
+    <div v-else-if="status === 'success' && character && !error">
         <Head>
             <Title>d[any] - {{ character.name }}</Title>
         </Head>
@@ -97,26 +97,24 @@ const { data: character, status, error } = await useAsyncData(() => useRequestFe
                         <span>Sorts d'instinct: <span class="font-bold">{{ character.spellranks.instinct }}</span></span>
                     </div>
                 </div>
-                <div class="flex flex-col border-l border-light-30 dark:border-dark-30 ps-8 gap-4 py-8 w-[80rem]">
+                <div class="flex flex-1 flex-col border-l border-light-30 dark:border-dark-30 ps-8 gap-4 py-8 max-w-[80rem]">
                     <div class="grid grid-cols-3 gap-2">
                         <div class="flex flex-col">
                             <span class="text-lg font-semibold">Actions</span>
                             <span class="text-sm text-light-70 dark:text-dark-70">Attaquer - Saisir - Faire chuter - Déplacer - Courir - Pas de coté - Lancer un sort - S'interposer - Se transformer - Utiliser un objet - Anticiper une action - Improviser</span>
+                            <MarkdownRenderer :content="character.features.action.join('\n')" />
                         </div>
                         <div class="flex flex-col">
                             <span class="text-lg font-semibold">Réactions</span>
                             <span class="text-sm text-light-70 dark:text-dark-70">Parade - Esquive - Saisir une opportunité - Prendre en tenaille - Intercepter - Désarmer</span>
+                            <MarkdownRenderer :content="character.features.reaction.join('\n')" />
                         </div>
                         <div class="flex flex-col">
                             <span class="text-lg font-semibold">Actions libre</span>
                             <span class="text-sm text-light-70 dark:text-dark-70">Analyser une situation - Communiquer</span>
+                            <MarkdownRenderer :content="character.features.freeaction.join('\n')" />
                         </div>
                     </div>
-                    <div class="grid grid-cols-3 gap-2">
-                        <div><MarkdownRenderer :content="character.features.action.join('\n')" /></div>
-                        <div><MarkdownRenderer :content="character.features.reaction.join('\n')" /></div>
-                        <div><MarkdownRenderer :content="character.features.freeaction.join('\n')" /></div>
-                    </div>
                     <div class="flex flex-col">
                         <span class="text-lg font-semibold">Aptitudes</span>
                         <MarkdownRenderer :content="character.features.misc.map(e => `> ${e}`).join('\n\n')" />
diff --git a/server/api/character/[id]/compiled.get.ts b/server/api/character/[id]/compiled.get.ts
index 2fe4b1c..ffde9e6 100644
--- a/server/api/character/[id]/compiled.get.ts
+++ b/server/api/character/[id]/compiled.get.ts
@@ -257,7 +257,7 @@ function applyFeature(feature: Feature, character: CompiledCharacter)
 {
     
 } */
-function getFeaturesOf(stat: MainStat, progression: DoubleIndex<TrainingLevel>[]): TrainingOption[]
+export function getFeaturesOf(stat: MainStat, progression: DoubleIndex<TrainingLevel>[]): TrainingOption[]
 {
     const config = characterData as CharacterConfig;
     return progression.map(e => config.training[stat][e[0]][e[1]]);
diff --git a/shared/character-config.json b/shared/character-config.json
index 3b668b2..078f88c 100644
--- a/shared/character-config.json
+++ b/shared/character-config.json
@@ -1,4 +1,23 @@
 {
+    "ability": {
+        "athletics": { "max": ["strength", "constitution"], "name": "Athlétisme", "description": "La capacité à effectuer un acte physique intense ou prolongé. Permet de pousser, contraindre, nager, courir." },
+        "acrobatics": { "max": ["strength", "dexterity"], "name": "Acrobatique", "description": "La capacité à se mouvoir avec souplesse sous la contrainte. Permet d'escalader, d'enjamber, de sauter." },
+        "intimidation": { "max": ["strength", "charisma"], "name": "Intimidation", "description": "La capacité à intimider et inspirer la crainte." },
+        "sleightofhand": { "max": ["dexterity", "dexterity"], "name": "Doigté", "description": "La capacité à faire des actions précises avec ses mains. Permet de voler à la tire, de crocheter." },
+        "stealth": { "max": ["dexterity", "dexterity"], "name": "Discrétion", "description": "La capacité à dissimuler sa présence. Permet de se cacher, de se mouvoir sans bruit." },
+        "survival": { "max": ["constitution", "psyche"], "name": "Survie", "description": "La capacité à survivre dans des conditions difficiles. Permet de pister, de collecter de la nourriture, de retrouver son chemin." },
+        "investigation": { "max": ["intelligence", "curiosity"], "name": "Enquête", "description": "La capacité à demander au MJ de l'aide parce que vous puez la merde." },
+        "history": { "max": ["intelligence", "curiosity"], "name": "Histoire", "description": "La capacité à connaitre et à retenir le passé du monde." },
+        "religion": { "max": ["intelligence", "curiosity"], "name": "Religion", "description": "La capacité a connaitre les pratiques et les coutumes religieuses." },
+        "arcana": { "max": ["intelligence", "psyche"], "name": "Arcanes", "description": "La capacité à comprendre et percevoir la magie. Permet de comprendre un sort en cours, de détecter de la magie." },
+        "understanding": { "max": ["intelligence", "charisma"], "name": "Compréhension", "description": "La capacité à déterminer les intentions des interlocuteurs. Permet de déceler des mensonges, de l'influence." },
+        "perception": { "max": ["curiosity", "curiosity"], "name": "Perception", "description": "La capacité à observer le monde à travers ces sens. Permet d'observer, d'entendre, de sentir." },
+        "performance": { "max": ["curiosity", "charisma"], "name": "Représentation", "description": "La capacité à se mettre en scène et à utiliser les arts. Permet de se produire en spectacle, de jouer d'un instrument, de chanter, de danser." },
+        "medecine": { "max": ["curiosity", "psyche"], "name": "Médicine", "description": "La capacité à apporter des soins. Permet de stabiliser un joueur mourant, de soigner durant un repos." },
+        "persuasion": { "max": ["charisma", "psyche"], "name": "Persuasion", "description": "" },
+        "animalhandling": { "max": ["charisma", "psyche"], "name": "Dressage", "description": "" },
+        "deception": { "max": ["charisma", "psyche"], "name": "Mensonge", "description": "" }
+    },
     "peoples": [
         {
             "name": "Humain",
diff --git a/types/character.d.ts b/types/character.d.ts
index 16745f6..28b98a6 100644
--- a/types/character.d.ts
+++ b/types/character.d.ts
@@ -15,7 +15,7 @@ export type Progression = {
         progress?: DoubleIndex<Level>[];
     };
     level: number;
-    abilities?: Partial<Record<Ability, number>>;
+    abilities: Partial<Record<Ability, [number, number]>>; //First is the ability, second is the max increment
     spells?: string[]; //Spell ID
     modifiers?: Partial<Record<MainStat, number>>;
     aspect?: string;
@@ -29,7 +29,13 @@ export type Character = {
 export type CharacterConfig = {
     peoples: Race[],
     training: Record<MainStat, Record<TrainingLevel, TrainingOption[]>>;
+    ability: Record<Ability, AbilityConfig>;
 };
+export type AbilityConfig = {
+    max: [MainStat, MainStat];
+    name: string;
+    description: string;
+}
 export type Race = {
     name: string;
     description: string;
@@ -81,8 +87,8 @@ export type TrainingOption = {
     }>;
     mana?: number;
     health?: number;
-    modifier?: [MainStat, number][];
-    ability?: [Ability, number][];
+    modifier?: number;
+    ability?: number;
     speed?: false | number;
     initiative?: number;
     mastery?: keyof CompiledCharacter["mastery"];