Kepzettsegek almost working

src/components/FajSelector.tsx

@@ -6,7 +6,7 @@ function FajSelector(props: { register: () => UseFormRegisterReturn, currentFaj:
     const {register, currentFaj} = props
     return <>
         <div className='row m-2'>
-            <label className='col-lg-1 col-sm-2 col-form-label'>Faj</label>
+            <label className='col-md-2 col-sm-3 col-form-label'>Faj</label>
             <select className='col form-select' defaultValue={Faj.Ember} {...register()}>
                 <option key={Faj.Ember} value={Faj.Ember}>{FajLabel(Faj.Ember)}</option>
                 <optgroup label='más emberi népek'>
@@ -28,7 +28,7 @@ function FajSelector(props: { register: () => UseFormRegisterReturn, currentFaj:
             </select>
         </div>
         <div className='row m-2'>
-            <label className='col-lg-1 col-sm-2 form-label'></label>
+            <label className='col-md-2 col-sm-3 form-label'></label>
             <div className='col'>
                 <p className='row pt-2'>
                     {FajDescription(currentFaj())}

src/components/KarakterKepzettsegek.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import KepzettsegSelector from "./KepzettsegSelector";
+import {Osztaly} from "../domain-models/osztaly";
+import {UseFormRegisterReturn} from "react-hook-form";
+import {Kepzettsegek, KepzettsegId} from "../domain-models/kepzettsegek";
+import {Modifier} from "../domain-models/tulajdonsag";
+import {Faj} from "../domain-models/faj";
+
+function KarakterKepzettsegek (props: {
+    faj: Faj
+    osztaly: Osztaly,
+    t_int: number,
+    register: (fieldName: string) => UseFormRegisterReturn,
+    watch: (fieldName: string, defaultValue: KepzettsegId) => string
+}) {
+
+    const { faj, osztaly, t_int, register, watch } = props
+
+    const numberOfKepzettseg = 3 + Modifier(t_int) + (faj === Faj.Ember ? 1 : 0)
+    console.log('Number of Kepzetsegek = ', numberOfKepzettseg)
+
+    let klist = []
+    for (let i = 0; i < numberOfKepzettseg; i++) {
+        klist.push(i)
+    }
+    console.log(klist)
+
+    return <>
+        {klist.map((idx) =>
+            <KepzettsegSelector
+                key={idx}
+                osztaly={osztaly}
+                fieldRegistration={register('tul_'+idx)}
+                selected={Kepzettsegek[watch('tul_'+idx, 'k_ugras') as KepzettsegId]}
+            />)
+        }
+    </>
+}
+
+export default KarakterKepzettsegek

src/components/KepzettsegSelector.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {Kepzettseg, KepzettsegLista} from "../domain-models/kepzettsegek";
+import {TulajdonsagLabel} from "../domain-models/tulajdonsag";
+import {Osztaly} from "../domain-models/osztaly";
+import {UseFormRegisterReturn} from "react-hook-form";
+
+function kepzettsegOptionText(k: Kepzettseg) {
+    return k.Name + ' (' + k.Tulajdonsag.reduce((acc, k) => (acc === '' ? acc : acc + ' / ') + TulajdonsagLabel(k), '') + ')';
+}
+
+function KepzettsegSelector (props: {osztaly: Osztaly, fieldRegistration: UseFormRegisterReturn, selected : Kepzettseg}) {
+
+    const { osztaly, fieldRegistration, selected } = props
+
+    return <>
+        <div className='row m-2'>
+            <label className='col-md-2 col-sm-3 col-form-label' >Képzettségek</label>
+            <div className='col'>
+            <select className='form-control'
+                    defaultValue={selected.Id} {...fieldRegistration}>
+                {KepzettsegLista.filter(k => k.Osztalyok == null || k.Osztalyok.includes(osztaly)).map(k =>(
+                    <option key={k.Id} value={k.Id} className='text-body-emphasis'>
+                        {kepzettsegOptionText(k)}
+                    </option>
+                ))}
+            </select>
+            </div>
+        </div>
+        <div className='row m-2 pt-2'>
+            <label className='col-md-2 col-sm-3 col-form-label' />
+            <p className='col'>{selected.Description}</p>
+        </div>
+    </>
+}
+
+export default KepzettsegSelector

src/components/OsztalySelector.tsx

@@ -14,7 +14,7 @@ function OsztalySelector(props: {currentFaj: () => Faj, currentOsztaly: () => Os
 
     return <>
         <div className='row m-2'>
-            <label className='col-lg-1 col-sm-2 col-form-label'>Osztály</label>
+            <label className='col-md-2 col-sm-3 col-form-label'>Osztály</label>
             <select className="col form-select" defaultValue={Osztaly.Harcos} {...register()}>
                 <optgroup label='Harcos'>
                     <option value={Osztaly.Harcos}>{OsztalyLabel(Osztaly.Harcos)}</option>
@@ -35,7 +35,7 @@ function OsztalySelector(props: {currentFaj: () => Faj, currentOsztaly: () => Os
             </select>
         </div>
         <div className='row m-2'>
-            <label className='col-lg-1 col-sm-2 form-label'></label>
+            <label className='col-md-2 col-sm-3 form-label'></label>
             <div className='col' >
                 <p className='row pt-2'>
                     {OsztalyDescription(currentOsztaly())}

src/components/TulajdonsagInput.tsx

@@ -32,8 +32,8 @@ function TulajdonsagInput(props: {
     } = props;
     return (<div className='row m-2'>
         <label className='col-lg-1 col-sm-2 col-form-label'>{tulajdonsag}</label>
-        <div className='col-md-1 col-sm-2 m-2'>
+        <div className='col-lg-1 col-sm-2 m-2'>
-            <input className='form-control' defaultValue={10} type='number' {...register()} />
+            <input className='form-control' maxLength={2} defaultValue={10} type='number' {...register()} />
         </div>
         <span className='col-sm-2 m-2'>
                             {fajiModositoText(currentFaj(), fajiModosito)}

src/domain-models/kepzettsegek.ts

@@ -1,7 +1,7 @@
 import {Tulajdonsag} from "./tulajdonsag";
 import {Osztaly} from "./osztaly";
 
-type KepzettsegId = 'k_alkimia' | 'k_alcazas' | 'k_allatidomitas' | 'k_csapdak' | 'k_csillagjoslas' | 'k_egyensulyozas' | 'k_eloadas' | 'k_ertekbecsles' | 'k_gyogyitas' | 'k_hajozas' | 'k_hallgatozas' | 'k_hamisitas' | 'k_jelek_olvasasa' | 'k_koncentracio' | 'k_lovaglas' | 'k_maszas' | 'k_megfigyeles' | 'k_meregkeveres' | 'k_mesterseg' | 'k_nyomkereses' | 'k_osonas' | 'k_rejtozes' | 'k_szabadulomuveszet' | 'k_tudas' | 'k_ugras' | 'k_uszas' | 'k_varazslatismeret' | 'k_zarnyitas' | 'k_zsebmetszes'
+export type KepzettsegId = 'k_alkimia' | 'k_alcazas' | 'k_allatidomitas' | 'k_csapdak' | 'k_csillagjoslas' | 'k_egyensulyozas' | 'k_eloadas' | 'k_ertekbecsles' | 'k_gyogyitas' | 'k_hajozas' | 'k_hallgatozas' | 'k_hamisitas' | 'k_jelek_olvasasa' | 'k_koncentracio' | 'k_lovaglas' | 'k_maszas' | 'k_megfigyeles' | 'k_meregkeveres' | 'k_mesterseg' | 'k_nyomkereses' | 'k_osonas' | 'k_rejtozes' | 'k_szabadulomuveszet' | 'k_tudas' | 'k_ugras' | 'k_uszas' | 'k_varazslatismeret' | 'k_zarnyitas' | 'k_zsebmetszes'
 
 export interface Kepzettseg {
     Id: KepzettsegId,
@@ -11,198 +11,197 @@ export interface Kepzettseg {
     Osztalyok?: Osztaly[],
 }
 
-const kepzettsegLista: Kepzettseg[] = [
+export const KepzettsegLista: Kepzettseg[] = [
     {
         Id: 'k_alkimia',
         Name: 'Alkímia',
-        Description: 'különféle különleges anyagok, pl. savak, görögtűz, stb. kikeverésére szolgál. Használatához gyakran jól felszerelt laboratórium szükséges. Az Alkímia képzettséggel a karakter képes beazonosítani a különféle vegyi anyagokat és mérgeket, bizonyos esetekben varázsitalokat is.',
+        Description: 'Különféle különleges anyagok, pl. savak, görögtűz, stb. kikeverésére szolgál. Használatához gyakran jól felszerelt laboratórium szükséges. Az Alkímia képzettséggel a karakter képes beazonosítani a különféle vegyi anyagokat és mérgeket, bizonyos esetekben varázsitalokat is.',
         Tulajdonsag: [Tulajdonsag.Intelligencia],
         Osztalyok: [Osztaly.Varazslo, Osztaly.Illuzionista],
     },
     {
         Id: 'k_alcazas',
         Name: 'Álcázás',
-        Description: 'álöltözetek készítése és effektív használata. Próbadobást akkor kell dobni, ha az álca hitelességét valaki kétségbe vonhatja (általában titkos dobás; az eredményt csak a mesélő ismeri).',
+        Description: 'Álöltözetek készítése és effektív használata. Próbadobást akkor kell dobni, ha az álca hitelességét valaki kétségbe vonhatja (általában titkos dobás; az eredményt csak a mesélő ismeri).',
         Tulajdonsag: [Tulajdonsag.Karizma],
         Osztalyok: [Osztaly.Tolvaj],
     },
     {
         Id: 'k_allatidomitas',
-        Name: 'Álcázás',
+        Name: 'Állatidomítás',
-        Description: 'álöltözetek készítése és effektív használata. Próbadobást akkor kell dobni, ha az álca hitelességét valaki kétségbe vonhatja (általában titkos dobás; az eredményt csak a mesélő ismeri).',
+        Description: 'Állatok megszelídítésére, betanítására szolgál. A járatos karakter próbát tehet arra is, hogy a különféle vadállatok ne tekintsék ellenségüknek vagy prédájuknak',
         Tulajdonsag: [Tulajdonsag.Karizma],
-        Osztalyok: [Osztaly.Tolvaj],
     },
     {
         Id: 'k_csapdak',
         Name: 'Csapdák állítása/eltávolítása',
-        Description: 'a karakter a rendelkezésre álló idő és alapanyagok függvényében készíthet szimpla vagy komplex csapdákat. Ha egy csapda eltávolítására tett próba sikertelen, az bizonyos eséllyel kisülhet és veszélybe sodorhatja az óvatlan próbálkozót.',
+        Description: 'A karakter a rendelkezésre álló idő és alapanyagok függvényében készíthet szimpla vagy komplex csapdákat. Ha egy csapda eltávolítására tett próba sikertelen, az bizonyos eséllyel kisülhet és veszélybe sodorhatja az óvatlan próbálkozót.',
         Tulajdonsag: [Tulajdonsag.Ugyesseg],
         Osztalyok: [Osztaly.Tolvaj],
     },
     {
         Id: 'k_csillagjoslas',
         Name: 'Csillagjóslás',
-        Description: 'a karakter a képzettséggel egyrészt képes meghatározni a karakterek hozzávetőleges pozícióját a térképen, másrészt egyszerűbb jóslatokat készíthet.',
+        Description: 'A karakter a képzettséggel egyrészt képes meghatározni a karakterek hozzávetőleges pozícióját a térképen, másrészt egyszerűbb jóslatokat készíthet.',
         Tulajdonsag: [Tulajdonsag.Bolcsesseg],
         Osztalyok: [Osztaly.Varazslo, Osztaly.Illuzionista],
     },
     {
         Id: 'k_egyensulyozas',
         Name: 'Egyensúlyozás',
-        Description: 'omlatag talajon vagy keskeny járófelületen való átjutáshoz szükséges képzettség. Ha a próba sikertelen, a karakter lezuhan.',
+        Description: 'Omlatag talajon vagy keskeny járófelületen való átjutáshoz szükséges képzettség. Ha a próba sikertelen, a karakter lezuhan.',
         Tulajdonsag: [Tulajdonsag.Ugyesseg],
         Osztalyok: [Osztaly.Tolvaj],
     },
     {
         Id: 'k_eloadas',
         Name: 'Előadás',
-        Description: 'a képzettséggel rendelkező karakter járatos a hangszerek használatában, éneklésben, eposzmondásban, stb.',
+        Description: 'A képzettséggel rendelkező karakter járatos a hangszerek használatában, éneklésben, eposzmondásban, stb.',
         Tulajdonsag: [Tulajdonsag.Karizma],
     },
     {
         Id: 'k_ertekbecsles',
         Name: 'Értékbecslés',
-        Description: 'sikeres próba esetén a karakter hozzávetőlegesen felméri egy tárgy pénzbeli értékét és kiszúrja a hamisítványokat.',
+        Description: 'Sikeres próba esetén a karakter hozzávetőlegesen felméri egy tárgy pénzbeli értékét és kiszúrja a hamisítványokat.',
         Tulajdonsag: [Tulajdonsag.Intelligencia],
     },
     {
         Id: 'k_gyogyitas',
         Name: 'Gyógyítás',
-        Description: 'a sebek ellátásának, mérgek és betegségek semlegesítésének vagy enyhítésének tudománya. Ha a képzettséget sikeresen alkalmazzák közvetlenül harc után, a bekötözött karakter visszanyer 1d4 elvesztett Hp-t.',
+        Description: 'A sebek ellátásának, mérgek és betegségek semlegesítésének vagy enyhítésének tudománya. Ha a képzettséget sikeresen alkalmazzák közvetlenül harc után, a bekötözött karakter visszanyer 1d4 elvesztett Hp-t.',
         Tulajdonsag: [Tulajdonsag.Bolcsesseg],
     },
     {
         Id: 'k_hajozas',
         Name: 'Hajózás',
-        Description: 'a karakter ismeri a hajózás trükkjeit, tehát elkormányoz kisebb vitorlásokat vagy gályákat, tudja hogyan kell elkerülni a zátonyokat, képes javításokat végezni, stb.',
+        Description: 'A karakter ismeri a hajózás trükkjeit, tehát elkormányoz kisebb vitorlásokat vagy gályákat, tudja hogyan kell elkerülni a zátonyokat, képes javításokat végezni, stb.',
         Tulajdonsag: [Tulajdonsag.Ugyesseg],
     },
     {
         Id: 'k_hallgatozas',
         Name: 'Hallgatózás',
-        Description: 'alig hallható zajok, beszéd meghallása.',
+        Description: 'Alig hallható zajok, beszéd meghallása.',
         Tulajdonsag: [Tulajdonsag.Bolcsesseg],
     },
     {
         Id: 'k_hamisitas',
         Name: 'Hamisítás',
-        Description: 'a képzettséggel hamis pénz, iratok, pecsétek és értéktárgyak készíthetők. Próbadobást akkor kell dobni, ha a hamisítvány hitelességét valaki kétségbe vonhatja.',
+        Description: 'A képzettséggel hamis pénz, iratok, pecsétek és értéktárgyak készíthetők. Próbadobást akkor kell dobni, ha a hamisítvány hitelességét valaki kétségbe vonhatja.',
         Tulajdonsag: [Tulajdonsag.Intelligencia],
         Osztalyok: [Osztaly.Tolvaj],
     },
     {
         Id: 'k_jelek_olvasasa',
         Name: 'Jelek Olvasása',
-        Description: 'a képzettséggel a karakter el tud olvasni más nyelven írt írásokat és feliratokat.',
+        Description: 'A képzettséggel a karakter el tud olvasni más nyelven írt írásokat és feliratokat.',
         Tulajdonsag: [Tulajdonsag.Intelligencia],
         Osztalyok: [Osztaly.Tolvaj, Osztaly.Varazslo, Osztaly.Illuzionista],
     },
     {
         Id: 'k_koncentracio',
         Name: 'Koncentráció',
-        Description: 'ez a képesség arra teszi alkalmassá a varázshasználót, hogy nehéz körülmények között – sebesülten, vágtató lovon, hánykolódó hajón, stb. – is alkalmazhassa varázslatait.',
+        Description: 'Ez a képesség arra teszi alkalmassá a varázshasználót, hogy nehéz körülmények között – sebesülten, vágtató lovon, hánykolódó hajón, stb. – is alkalmazhassa varázslatait.',
         Tulajdonsag: [Tulajdonsag.Bolcsesseg],
         Osztalyok: [Osztaly.Varazslo, Osztaly.Illuzionista],
     },
     {
         Id: 'k_lovaglas',
         Name: 'Lovaglás',
-        Description: 'a karakter kiemelkedően jól ért a lovagláshoz; harcban és nehéz helyzetekben is csodákra képes sarkallni hátasát.',
+        Description: 'A karakter kiemelkedően jól ért a lovagláshoz; harcban és nehéz helyzetekben is csodákra képes sarkallni hátasát.',
         Tulajdonsag: [Tulajdonsag.Ugyesseg],
     },
     {
         Id: 'k_maszas',
         Name: 'Mászás',
-        Description: 'a képzettség olyan falakra való felmászásra alkalmas, ami egy átlagembernek komol gondot jelentene. Sikertelen próba esetén a karakter lezuhan, vagy a feladat meghaladja a képességeit.',
+        Description: 'A képzettség olyan falakra való felmászásra alkalmas, ami egy átlagembernek komol gondot jelentene. Sikertelen próba esetén a karakter lezuhan, vagy a feladat meghaladja a képességeit.',
         Tulajdonsag: [Tulajdonsag.Ero],
     },
     {
         Id: 'k_megfigyeles',
         Name: 'Megfigyelés',
-        Description: 'ez a képzettség olyan érzékelési képességet jelent, ami meghaladja az átlagemberét. Így olyan részletek vehetők észre, amelye szabad szemmel láthatóak, de csak az avatott megfigyelő számára.',
+        Description: 'Ez a képzettség olyan érzékelési képességet jelent, ami meghaladja az átlagemberét. Így olyan részletek vehetők észre, amelye szabad szemmel láthatóak, de csak az avatott megfigyelő számára.',
         Tulajdonsag: [Tulajdonsag.Bolcsesseg],
     },
     {
         Id: 'k_meregkeveres',
         Name: 'Méregkeverés',
-        Description: 'a megfelelő eszközök és alapanyagok birtokában különféle mérgek készíthetők. Sikertelen próbadobás esetén a keverék hatástalan, vagy a méregkeverő veszélybe sodorja önmagát.',
+        Description: 'A megfelelő eszközök és alapanyagok birtokában különféle mérgek készíthetők. Sikertelen próbadobás esetén a keverék hatástalan, vagy a méregkeverő veszélybe sodorja önmagát.',
         Tulajdonsag: [Tulajdonsag.Intelligencia],
         Osztalyok: [Osztaly.Tolvaj],
     },
     {
         Id: 'k_mesterseg',
         Name: 'Mesterség',
-        Description: 'a karakter járatos egy kiválasztott mesterségben – pl. kovácsolás, gyertyaöntés, adószedés, ötvösség. A kézügyességet igénylő mesterségekhez Ügyesség, a szellemi foglalkozásokhoz Intelligencia szükséges.',
+        Description: 'A karakter járatos egy kiválasztott mesterségben – pl. kovácsolás, gyertyaöntés, adószedés, ötvösség. A kézügyességet igénylő mesterségekhez Ügyesség, a szellemi foglalkozásokhoz Intelligencia szükséges.',
         Tulajdonsag: [Tulajdonsag.Intelligencia, Tulajdonsag.Ugyesseg],
     },
     {
         Id: 'k_nyomkereses',
         Name: 'Nyomkeresés',
-        Description: 'a karakter képes a nyomok követésére és hozzávetőleges azonosítására, vagyis megtudhatja, milyen régiek, miféle szerzet hagyta őket, milyen gyorsan haladt a nyomokat hagyó, stb.',
+        Description: 'A karakter képes a nyomok követésére és hozzávetőleges azonosítására, vagyis megtudhatja, milyen régiek, miféle szerzet hagyta őket, milyen gyorsan haladt a nyomokat hagyó, stb.',
         Tulajdonsag: [Tulajdonsag.Bolcsesseg],
     },
     {
         Id: 'k_osonas',
         Name: 'Osonás',
-        Description: 'csöndes és általában viszonylag gyors mozgás.',
+        Description: 'Csöndes és általában viszonylag gyors mozgás.',
         Tulajdonsag: [Tulajdonsag.Ugyesseg],
     },
     {
         Id: 'k_rejtozes',
         Name: 'Rejtőzés',
-        Description: 'a képzettséget ismerő karakter olyan helyeken is elrejtőzhet, ahol más nem volna képes – például sötétebb sarkokban, árnyékokban.',
+        Description: 'A képzettséget ismerő karakter olyan helyeken is elrejtőzhet, ahol más nem volna képes – például sötétebb sarkokban, árnyékokban.',
         Tulajdonsag: [Tulajdonsag.Ugyesseg],
     },
     {
         Id: 'k_szabadulomuveszet',
         Name: 'Szabadulóművészet',
-        Description: 'a karakter képes kiszabadulni kötelékeiből és láncaiból.',
+        Description: 'A karakter képes kiszabadulni kötelékeiből és láncaiból.',
         Tulajdonsag: [Tulajdonsag.Ugyesseg],
         Osztalyok: [Osztaly.Tolvaj],
     },
     {
         Id: 'k_tudas',
         Name: 'Tudás',
-        Description: 'a karakter járatos egy bizonyos tudományterületen. Számos példa lehetséges, a leggyakoribbak a Történelemismeret, Országismeret, Mágiaismeret (csak varázshasználók sajátíthatják el), Teológia, Vadonismeret és a Növényismeret.',
+        Description: 'A karakter járatos egy bizonyos tudományterületen. Számos példa lehetséges, a leggyakoribbak a Történelemismeret, Országismeret, Mágiaismeret (csak varázshasználók sajátíthatják el), Teológia, Vadonismeret és a Növényismeret.',
         Tulajdonsag: [Tulajdonsag.Intelligencia],
     },
     {
         Id: 'k_ugras',
         Name: 'Ugrás',
-        Description: 'a karakter képes átugrani szélesebb vagy magasabb akadályokat is, és tompíthatja az esésből származó sebesüléseket. Ha a próba sikertelen, a karakter leesik.',
+        Description: 'A karakter képes átugrani szélesebb vagy magasabb akadályokat is, és tompíthatja az esésből származó sebesüléseket. Ha a próba sikertelen, a karakter leesik.',
         Tulajdonsag: [Tulajdonsag.Ero],
     },
     {
         Id: 'k_uszas',
         Name: 'Úszás',
-        Description: 'a karakter jól tud úszni, akár nehéz körülmények között (zajló vízben, megterhelten, stb.) is képes a felszínen maradni.',
+        Description: 'A karakter jól tud úszni, akár nehéz körülmények között (zajló vízben, megterhelten, stb.) is képes a felszínen maradni.',
         Tulajdonsag: [Tulajdonsag.Ero],
     },
     {
         Id: 'k_varazslatismeret',
         Name: 'Varázslatismeret',
-        Description: 'a Mágiaismerettel ellentétben ez a képzettség nem a mágia elméletében, hanem a konkrét varázslatokban való ismereteket méri. Sikeres próbával a karakter azonosíthatja az elmondás alatt álló varázslatokat (NF= a mentődobás nehézsége), bizonyos mágikus effektusokat, csapdákat, stb.',
+        Description: 'A Mágiaismerettel ellentétben ez a képzettség nem a mágia elméletében, hanem a konkrét varázslatokban való ismereteket méri. Sikeres próbával a karakter azonosíthatja az elmondás alatt álló varázslatokat (NF= a mentődobás nehézsége), bizonyos mágikus effektusokat, csapdákat, stb.',
         Tulajdonsag: [Tulajdonsag.Intelligencia],
         Osztalyok: [Osztaly.Illuzionista, Osztaly.Varazslo],
     },
     {
         Id: 'k_zarnyitas',
         Name: 'Zárnyitás',
-        Description: 'tolvajszerszámok segítségével a karakter felnyithatja a különféle mechanikus zárakat. Sikertelen próba esetén nem képes az adott zár felnyitására – egészen addig, amíg új tapasztalatokat nem szerez (vagyis a következő szintlépéséig).',
+        Description: 'Tolvajszerszámok segítségével a karakter felnyithatja a különféle mechanikus zárakat. Sikertelen próba esetén nem képes az adott zár felnyitására – egészen addig, amíg új tapasztalatokat nem szerez (vagyis a következő szintlépéséig).',
         Tulajdonsag: [Tulajdonsag.Ugyesseg],
         Osztalyok: [Osztaly.Tolvaj],
     },
     {
         Id: 'k_zsebmetszes',
         Name: 'Zsebmetszés',
-        Description: 'őrizetlenül hagyott vagy övön, zsebben található kisebb tárgyak észrevétlen eltulajdonítása. Ha a próba sikertelen, a karaktert észreveszik vagy legalábbis gyanút kelt.',
+        Description: 'Őrizetlenül hagyott vagy övön, zsebben található kisebb tárgyak észrevétlen eltulajdonítása. Ha a próba sikertelen, a karaktert észreveszik vagy legalábbis gyanút kelt.',
         Tulajdonsag: [Tulajdonsag.Ugyesseg],
         Osztalyok: [Osztaly.Tolvaj],
     },
 ]
 
 export const Kepzettsegek: Record<KepzettsegId, Kepzettseg> =
-    kepzettsegLista.reduce(
+    KepzettsegLista.reduce(
         (acc: Record<KepzettsegId, Kepzettseg>, k) => { acc[k.Id] = k; return acc; },
         {} as Record<KepzettsegId, Kepzettseg>);

src/domain-models/tulajdonsag.ts

@@ -10,6 +10,16 @@ export enum Tulajdonsag {
     Karizma = 't_kar',
 }
 
+export function TulajdonsagLabel(tul: Tulajdonsag) : string {
+    switch (tul) {
+        case Tulajdonsag.Bolcsesseg: return 'Bölcsesség';
+        case Tulajdonsag.Ero: return 'Erő';
+        case Tulajdonsag.Ugyesseg: return 'Ügyesség';
+        case Tulajdonsag.Egeszseg: return 'Egészség';
+        case Tulajdonsag.Intelligencia: return 'Intelligencia';
+        case Tulajdonsag.Karizma: return 'Karizma';
+    }
+}
 
 function rollAbility() {
     let min = 6;

src/pages/CreateCharacter.tsx

@@ -6,6 +6,8 @@ import {Osztaly} from "../domain-models/osztaly"
 import FajSelector from "../components/FajSelector";
 import Tulajdonsagok from "../components/Tulajdonsagok";
 import OsztalySelector from "../components/OsztalySelector";
+import KarakterKepzettsegek from "../components/KarakterKepzettsegek";
+import {Tulajdonsag} from "../domain-models/tulajdonsag";
 
 const FAJ_FIELD_NAME = 'faj'
 const OSZTALY_FIELD_NAME = 'osztaly'
@@ -25,17 +27,17 @@ function CreateCharacterPage() {
     const currentOsztaly = () => watch(OSZTALY_FIELD_NAME, Osztaly.Harcos)
 
     return (
-        <div className='row'>
+        <div>
             <div className='container-fluid p-5 bg-black text-white text-center'>
                 <h1>Karakter létrehozása</h1>
             </div>
             <div className='p-3'>
-                <form onSubmit={handleSubmit(sendForm)} className='col-12'>
+                <form onSubmit={handleSubmit(sendForm)}>
                     <div className='row'>
-                        <h5 className='col-lg-2 col-sm-4 align-self-center'>Származás</h5>
+                        <h5 className='col align-self-center'>Származás</h5>
                     </div>
                     <div className='row m-2'>
-                        <label className='col-lg-1 col-sm-2 col-form-label' >Név</label>
+                        <label className='col-md-2 col-sm-3 col-form-label' >Név</label>
                         <input className='col form-control'
                                defaultValue='Névtelen Kalandozó' {...register('nev', {required: true})} />
                         {errors.nev && <span className='form-field-error'>A karaktered nem mászkálhat névtelenül a világban!</span>}
@@ -53,15 +55,22 @@ function CreateCharacterPage() {
                     />
                     <hr />
                     <div className='row'>
-                        <h5 className='col-lg-2 col-sm-4 align-self-center'>Tanult</h5>
+                        <h5 className='col align-self-center'>Tanult</h5>
                     </div>
                     <OsztalySelector
                         currentFaj={currentFaj}
                         currentOsztaly={currentOsztaly}
                         register={() => register(OSZTALY_FIELD_NAME, {required: true})}
                     />
+                    <KarakterKepzettsegek
+                        faj={currentFaj()}
+                        osztaly={currentOsztaly()}
+                        t_int={watch(Tulajdonsag.Intelligencia, 10)}
+                        register={(fieldName: string) => register(fieldName, {required: true})}
+                        watch={watch}
+                    />
 
-                    <div className='d-grid gap-2'>
+                    <div className='d-grid gap-2 m-5'>
                         <button className='btn btn-danger btn-lg' type='submit'>Létrehozás</button>
                     </div>
                 </form>