tolvaj kepzettsegek

TODO: masodlagos ertekek

src/components/KarakterKepzettsegek.tsx

@@ -2,10 +2,37 @@ import React from "react";
 import KepzettsegSelector from "./KepzettsegSelector";
 import {Osztaly} from "../domain-models/osztaly";
 import {UseFormRegisterReturn} from "react-hook-form";
-import {Kepzettsegek, KepzettsegId, KepzettsegLista} from "../domain-models/kepzettsegek";
+import {Kepzettseg, Kepzettsegek, KepzettsegId, KepzettsegLista} 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[], register: (n: number) => UseFormRegisterReturn, availableKepzettsegList: Kepzettseg[], getKepzettsegN: (n: number) => Kepzettseg}) {
+    const {title, numberOfKepzettseg, getKepzettsegListaN, register, availableKepzettsegList, getKepzettsegN} = props
+
+    const klist = Array.from(new Array(numberOfKepzettseg).keys())
+
+    return <>
+        <div className='row'>
+            <div className='col-lg-2 col-md-12'>
+                <label className='col-form-label text-body-emphasis'>{title}</label>
+            </div>
+            <div className='col'>
+                {klist.map((idx) =>
+                    <KepzettsegSelector
+                        key={idx}
+                        kepzettsegek={getKepzettsegListaN(idx)}
+                        fieldRegistration={register(idx)}
+                        defaultValue={availableKepzettsegList[idx]}
+                        selected={getKepzettsegN(idx)}
+                    />)
+                }
+            </div>
+        </div>
+    </>
+
+}
+
 function KarakterKepzettsegek (props: {
     faj: Faj
     osztaly: Osztaly,
@@ -15,46 +42,72 @@ function KarakterKepzettsegek (props: {
 }) {
     const { faj, osztaly, t_int, register, watch } = props
 
-    const avaialableKepzettsegList = KepzettsegLista.filter(k => k.Osztalyok == null || k.Osztalyok.includes(osztaly))
+    const availableKepzettsegList = KepzettsegLista.filter(k => k.Osztalyok == null || k.Osztalyok.includes(osztaly))
 
-    let numberOfKepzettseg = (osztaly === Osztaly.Tolvaj ? 7 : 4) + Modifier(t_int) + (faj === Faj.Ember ? 1 : 0)
+    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 > avaialableKepzettsegList.length){
+    if (numberOfKepzettseg > availableKepzettsegList.length){
-        numberOfKepzettseg = avaialableKepzettsegList.length
+        numberOfKepzettseg = availableKepzettsegList.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 getKepzettsegN = (n: number) => Kepzettsegek[watch('kep_'+n, availableKepzettsegList[n].Id) as KepzettsegId]
 
     const getKepzettsegListaN = (n: number) => {
-        let response = avaialableKepzettsegList;
+        let response = availableKepzettsegList;
-        for (let i = 0; i < n; i++) {
+        for (let i = 0; i < numberOfKepzettseg; i++) {
+            if (i === n) {
+                continue;
+            }
             response = response.filter(x => x.Id !== getKepzettsegN(i).Id)
         }
+        if (osztaly === Osztaly.Tolvaj) {
+            for (let i = 0; i < 4; i++) {
+                response = response.filter(x => x.Id !== getTolvajKepzettsegN(i).Id)
+            }
+        }
+        return response
+    }
+
+    const tolvajKepzettsegek =  KepzettsegLista.filter(k => k.Osztalyok != null && k.Osztalyok.includes(Osztaly.Tolvaj))
+    const getTolvajKepzettsegN = (n: number) => Kepzettsegek[watch('tolvaj_kep_'+n, tolvajKepzettsegek[n].Id) as KepzettsegId]
+
+    const getTolvajKepzettsegListaN = (n: number) => {
+        let response = tolvajKepzettsegek;
+        // filter out selected kepzettsegek
+        for (let i = 0; i < numberOfKepzettseg; i++) {
+            response = response.filter(x => x.Id !== getKepzettsegN(i).Id)
+        }
+        // filter out selected tolvaj kepzettsegek
+        for (let i = 0; i < 4; i++) {
+            if (i === n) {
+                continue;
+            }
+            response = response.filter(x => x.Id !== getTolvajKepzettsegN(i).Id)
+        }
         return response
     }
 
     return <>
-        <div className='row'>
+        <InternalKepzettsegekSelector
-            <div className='col-lg-2 col-md-12'>
+            title="Képzettségek"
-                <label className='col-form-label text-body-emphasis'> Képzettségek </label>
+            numberOfKepzettseg={numberOfKepzettseg}
-            </div>
+            availableKepzettsegList={availableKepzettsegList}
-            <div className='col'>
+            getKepzettsegListaN={getKepzettsegListaN}
-                {klist.map((idx) =>
+            register={(n: number) => register('kep_' + n)}
-                    <KepzettsegSelector
+            getKepzettsegN={getKepzettsegN} />
-                        key={idx}
+        {osztaly === Osztaly.Tolvaj &&
-                        kepzettsegek={getKepzettsegListaN(idx)}
+            <InternalKepzettsegekSelector
-                        fieldRegistration={register('kep_'+idx)}
+                title="Tolvaj Képzettségek"
-                        selected={getKepzettsegN(idx)}
+                numberOfKepzettseg={4}
-                    />)
+                availableKepzettsegList={tolvajKepzettsegek}
-                }
+                getKepzettsegListaN={getTolvajKepzettsegListaN}
-            </div>
+                register={(n: number) => register('tolvaj_kep_' + n)}
-        </div>
+                getKepzettsegN={getTolvajKepzettsegN} />}
     </>
 }
 

src/components/KepzettsegSelector.tsx

@@ -2,26 +2,35 @@ import React from "react";
 import {Kepzettseg} from "../domain-models/kepzettsegek";
 import {TulajdonsagLabel} from "../domain-models/tulajdonsag";
 import {UseFormRegisterReturn} from "react-hook-form";
+import {OsztalyLabel} from "../domain-models/osztaly";
 
 function kepzettsegOptionText(k: Kepzettseg) {
-    return k.Name + ' (' + k.Tulajdonsag.reduce((acc, k) => (acc === '' ? acc : acc + ' / ') + TulajdonsagLabel(k), '') + ')';
+    const osztalyok = k.Osztalyok?.reduce((acc, o) => acc + ' / ' + OsztalyLabel(o), '')?.substring(3)
+    return k.Name + ' (' + k.Tulajdonsag.reduce((acc, k) => (acc === '' ? acc : acc + ' / ') + TulajdonsagLabel(k), '') + ')' + (osztalyok == null ? '' : (' - ' + osztalyok));
 }
 
-function KepzettsegSelector (props: {kepzettsegek: Kepzettseg[], fieldRegistration: UseFormRegisterReturn, selected : Kepzettseg}) {
+// this is required for render optimization, which happens because selected is not a prop of this component so selecting an item doesn't trigger a rendering of this select field.
+function KepzettsegSelect(props: {kepzettsegek: Kepzettseg[], fieldRegistration: UseFormRegisterReturn, defaultValue: Kepzettseg}) {
+    const { kepzettsegek, fieldRegistration, defaultValue} = props
+    return <div className='row'>
+        <select className='form-control'
+                defaultValue={defaultValue.Id} {...fieldRegistration}>
+            {kepzettsegek.map(k =>(
+                <option key={k.Id} value={k.Id}>
+                    {kepzettsegOptionText(k)}
+                </option>
+            ))}
+        </select>
+    </div>
 
-    const { kepzettsegek, fieldRegistration, selected } = props
+}
+
+function KepzettsegSelector (props: {kepzettsegek: Kepzettseg[], fieldRegistration: UseFormRegisterReturn, defaultValue: Kepzettseg, selected : Kepzettseg}) {
+
+    const { kepzettsegek, fieldRegistration, defaultValue, selected } = props
 
     return <>
-        <div className='row'>
+        <KepzettsegSelect kepzettsegek={kepzettsegek} fieldRegistration={fieldRegistration} defaultValue={defaultValue} />
-            <select className='form-control'
-                    defaultValue={selected.Id} {...fieldRegistration}>
-                {kepzettsegek.map(k =>(
-                    <option key={k.Id} value={k.Id}>
-                        {kepzettsegOptionText(k)}
-                    </option>
-                ))}
-            </select>
-        </div>
         <div className='row pt-2'>
             <p className='col'>{selected.Description}</p>
         </div>