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'>
-            <input className='form-control' defaultValue={10} type='number' {...register()} />
+        <div className='col-lg-1 col-sm-2 m-2'>
+            <input className='form-control' maxLength={2} defaultValue={10} type='number' {...register()} />
         </div>
         <span className='col-sm-2 m-2'>
                             {fajiModositoText(currentFaj(), fajiModosito)}