Kepzettsegek almost working

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>