refactor done?

need to start testing

src/components/KarakterKepzettsegek.tsx

@@ -1,15 +1,11 @@
 import React from "react";
 import KepzettsegSelector from "./KepzettsegSelector";
-import {Osztaly} from "../domain-models/osztaly";
 import {
-    AvailableKezpettsegList,
     Kepzettseg,
     Kepzettsegek,
     KepzettsegId,
+    TolvajKepzettsegList,
 } from "../domain-models/kepzettsegek";
-import {Modifier} from "../domain-models/tulajdonsag";
-import {Faj} from "../domain-models/faj";
-
 
 function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg: number, getKepzettsegListaN: (n: number) => Kepzettseg[], kepzettsegek: KepzettsegId[], changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void}) {
     const {title, numberOfKepzettseg, getKepzettsegListaN, kepzettsegek, changeKepzettsegek} = props
@@ -38,7 +34,7 @@ function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg:
                 <label className='col-form-label text-body-emphasis'>{title}</label>
             </div>
             <div className='col'>
-                {klist.map((idx) =>
+                {klist.filter(i => i < preCalculated.length && preCalculated[i].selected != null).map((idx) =>
                     <KepzettsegSelector
                         key={title+idx}
                         kepzettsegek={preCalculated[idx].kepzettsegek}
@@ -52,43 +48,56 @@ function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg:
 
 }
 
+
 function KarakterKepzettsegek (props: {
-    faj: Faj
-    osztaly: Osztaly,
-    t_int: number,
+    availableKepzettsegList: Kepzettseg[],
+    numberOfKepzettsegek: number
     kepzettsegek: KepzettsegId[],
     changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
+    tolvajKepzettsegek: KepzettsegId[],
+    changeTolvajKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
 }) {
-    const { faj, osztaly, t_int, kepzettsegek, changeKepzettsegek} = props
-
-    const availableKepzettsegList = AvailableKezpettsegList(osztaly)
-
-    let numberOfKepzettseg = 3 + Modifier(t_int) + (faj === Faj.Ember ? 1 : 0)
-    console.log('Raw Number of Kepzetsegek = ', numberOfKepzettseg)
-
-    if (numberOfKepzettseg < 1) {
-        numberOfKepzettseg = 1
-    }
-    if (numberOfKepzettseg > availableKepzettsegList.length){
-        numberOfKepzettseg = availableKepzettsegList.length
-    }
-    console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg)
+    const { numberOfKepzettsegek, availableKepzettsegList, changeKepzettsegek, tolvajKepzettsegek, changeTolvajKepzettsegek} = props
+    let kepzettsegek = props.kepzettsegek
 
     const getKepzettsegListaN = (n: number) => {
-        let response = availableKepzettsegList;
-        for (let i = 0; i < numberOfKepzettseg; i++) {
-            response = response.filter(x => i === n || x.Id !== kepzettsegek[i])
+        const kepzettsegekWithoutN = [...kepzettsegek.slice(0, n), ...kepzettsegek.slice(n+1)]
+        return availableKepzettsegList.filter(x => !kepzettsegekWithoutN.includes(x.Id) && !tolvajKepzettsegek.includes(x.Id))
+    }
+
+    if (kepzettsegek.length < numberOfKepzettsegek) {
+        for (let i = kepzettsegek.length; i < numberOfKepzettsegek; i++) {
+            const kepzettsegLista = getKepzettsegListaN(i)
+            if (kepzettsegLista.length > 0) {
+                kepzettsegek.push(kepzettsegLista[0].Id)
+            }
         }
-        return response
+        changeKepzettsegek(kepzettsegek)
+    }
+    if (kepzettsegek.length > numberOfKepzettsegek){
+        kepzettsegek = kepzettsegek.slice(0, numberOfKepzettsegek)
+        changeKepzettsegek(kepzettsegek)
+    }
+
+    const getTolvajKepzettsegListaN = (n: number) : Kepzettseg[] => {
+        const tolvajKepzettsegekWithoutN = [...tolvajKepzettsegek.slice(0, n), ...tolvajKepzettsegek.slice(n+1)]
+        return TolvajKepzettsegList.filter(x => !kepzettsegek.includes(x.Id) && !tolvajKepzettsegekWithoutN.includes(x.Id))
     }
 
     return <>
         <InternalKepzettsegekSelector
             title="Képzettségek"
-            numberOfKepzettseg={numberOfKepzettseg}
+            numberOfKepzettseg={numberOfKepzettsegek}
             getKepzettsegListaN={getKepzettsegListaN}
             changeKepzettsegek={changeKepzettsegek}
             kepzettsegek={kepzettsegek} />
+
+        {tolvajKepzettsegek.length > 0 && <InternalKepzettsegekSelector
+            title="Tolvaj képzettségek"
+            numberOfKepzettseg={4}
+            getKepzettsegListaN={getTolvajKepzettsegListaN}
+            changeKepzettsegek={changeTolvajKepzettsegek}
+            kepzettsegek={tolvajKepzettsegek} />}
     </>
 }
 

src/domain-models/kepzettsegek.ts

@@ -201,6 +201,8 @@ export const KepzettsegLista: Kepzettseg[] = [
     },
 ]
 
+export const TolvajKepzettsegList = KepzettsegLista.filter(x => x.Osztalyok?.includes(Osztaly.Tolvaj))
+
 export const Kepzettsegek: Record<KepzettsegId, Kepzettseg> =
     KepzettsegLista.reduce(
         (acc: Record<KepzettsegId, Kepzettseg>, k) => { acc[k.Id] = k; return acc; },

src/pages/CreateCharacter.tsx

@@ -6,9 +6,9 @@ import FajSelector from "../components/FajSelector";
 import Tulajdonsagok from "../components/Tulajdonsagok";
 import OsztalySelector from "../components/OsztalySelector";
 import KarakterKepzettsegek from "../components/KarakterKepzettsegek";
-import {KarakterTulajdonsagok} from "../domain-models/tulajdonsag";
+import {KarakterTulajdonsagok, Modifier} from "../domain-models/tulajdonsag";
 import MasodlagosErtekek from "../components/MasodlagosErtekek";
-import {KepzettsegId} from "../domain-models/kepzettsegek";
+import {AvailableKezpettsegList, KepzettsegId, TolvajKepzettsegList} from "../domain-models/kepzettsegek";
 
 const tulajdonsagDefaults: KarakterTulajdonsagok = {
     t_ero: 10,
@@ -19,6 +19,20 @@ const tulajdonsagDefaults: KarakterTulajdonsagok = {
     t_kar: 10,
 }
 
+function getNumberOfKepzettsegek(t_int: number, faj: Faj, max: number) {
+    let numberOfKepzettseg = 3 + Modifier(t_int) + (faj === Faj.Ember ? 1 : 0)
+    console.log('Raw Number of Kepzetsegek = ', numberOfKepzettseg)
+
+    if (numberOfKepzettseg < 1) {
+        numberOfKepzettseg = 1
+    }
+    if (numberOfKepzettseg > max) {
+        numberOfKepzettseg = max
+    }
+    console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg)
+    return numberOfKepzettseg;
+}
+
 function CreateCharacterPage() {
 
     let [name, changeName] = useState<string>("Névtelen kanadozó")
@@ -26,6 +40,18 @@ function CreateCharacterPage() {
     let [tulajdonsagok, changeTulajdonsagok] = useState(tulajdonsagDefaults)
     let [currentOsztaly, changeOsztaly] = useState<Osztaly>(Osztaly.Harcos)
     let [kepzettsegek, changeKepzettsegek] = useState<KepzettsegId[]>([])
+    let [tolvajKepzettsegek, changeTolvajKepzettsegek] = useState<KepzettsegId[]>([])
+
+    const availableKepzettsegList = AvailableKezpettsegList(currentOsztaly)
+
+    if (currentOsztaly !== Osztaly.Tolvaj && tolvajKepzettsegek.length > 0) {
+        tolvajKepzettsegek = []
+        changeTolvajKepzettsegek([])
+    }
+    if (currentOsztaly === Osztaly.Tolvaj && tolvajKepzettsegek.length === 0) {
+        tolvajKepzettsegek = TolvajKepzettsegList.slice(0, 4).map(x => x.Id)
+        changeTolvajKepzettsegek(tolvajKepzettsegek)
+    }
 
     return (
         <div>
@@ -33,7 +59,7 @@ function CreateCharacterPage() {
                 <h1>Karakter létrehozása</h1>
             </div>
             <div className='p-3'>
-                <form>
+                <form onSubmit={() => console.log("Character created!")}>
                     <div className='row'>
                         <h5 className='col align-self-center'>Származás</h5>
                     </div>
@@ -64,11 +90,12 @@ function CreateCharacterPage() {
                         changeOsztaly={changeOsztaly}
                     />
                     <KarakterKepzettsegek
-                        faj={faj}
-                        osztaly={currentOsztaly}
-                        t_int={tulajdonsagok.t_int}
+                        availableKepzettsegList={availableKepzettsegList}
+                        numberOfKepzettsegek={getNumberOfKepzettsegek(tulajdonsagok.t_int, faj, availableKepzettsegList.length)}
                         kepzettsegek={kepzettsegek}
                         changeKepzettsegek={changeKepzettsegek}
+                        tolvajKepzettsegek={tolvajKepzettsegek}
+                        changeTolvajKepzettsegek={changeTolvajKepzettsegek}
                     />
 
                     <hr />