improve KarakterKepzettsegek a bit

TODO: tolvaj kepzettsegek, testing?

src/components/KarakterKepzettsegek.tsx

@@ -2,7 +2,7 @@ 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 {Kepzettsegek, KepzettsegId, KepzettsegLista} from "../domain-models/kepzettsegek";
 import {Modifier} from "../domain-models/tulajdonsag";
 import {Faj} from "../domain-models/faj";
 
@@ -13,27 +13,48 @@ function KarakterKepzettsegek (props: {
     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)
+    const avaialableKepzettsegList = KepzettsegLista.filter(k => k.Osztalyok == null || k.Osztalyok.includes(osztaly))
 
-    let klist = []
-    for (let i = 0; i < numberOfKepzettseg; i++) {
-        klist.push(i)
+    let numberOfKepzettseg = (osztaly === Osztaly.Tolvaj ? 7 : 4) + Modifier(t_int) + (faj === Faj.Ember ? 1 : 0)
+    console.log('Raw Number of Kepzetsegek = ', numberOfKepzettseg)
+
+    if (numberOfKepzettseg < 1) {
+        numberOfKepzettseg = 1
+    }
+    if (numberOfKepzettseg > avaialableKepzettsegList.length){
+        numberOfKepzettseg = avaialableKepzettsegList.length
+    }
+    console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg)
+    const klist = Array.from(new Array(numberOfKepzettseg).keys())
+
+    const getKepzettsegN = (n: number) => Kepzettsegek[watch('kep_'+n, avaialableKepzettsegList[n].Id) as KepzettsegId]
+
+    const getKepzettsegListaN = (n: number) => {
+        let response = avaialableKepzettsegList;
+        for (let i = 0; i < n; i++) {
+            response = response.filter(x => x.Id !== getKepzettsegN(i).Id)
+        }
+        return response
     }
-    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]}
-            />)
-        }
+        <div className='row'>
+            <div className='col-lg-2 col-md-12'>
+                <label className='col-form-label text-body-emphasis'> Képzettségek </label>
+            </div>
+            <div className='col'>
+                {klist.map((idx) =>
+                    <KepzettsegSelector
+                        key={idx}
+                        kepzettsegek={getKepzettsegListaN(idx)}
+                        fieldRegistration={register('kep_'+idx)}
+                        selected={getKepzettsegN(idx)}
+                    />)
+                }
+            </div>
+        </div>
     </>
 }