diff --git a/src/components/KarakterKepzettsegek.tsx b/src/components/KarakterKepzettsegek.tsx
index 2436c81..ccca418 100644
--- a/src/components/KarakterKepzettsegek.tsx
+++ b/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 <>
+
+
+
+
+
+ {klist.map((idx) =>
+ )
+ }
+
+
+ >
+
+}
+
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){
- numberOfKepzettseg = avaialableKepzettsegList.length
+ if (numberOfKepzettseg > availableKepzettsegList.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;
- for (let i = 0; i < n; i++) {
+ let response = availableKepzettsegList;
+ 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 <>
-
-
-
-
-
- {klist.map((idx) =>
- )
- }
-
-
+ register('kep_' + n)}
+ getKepzettsegN={getKepzettsegN} />
+ {osztaly === Osztaly.Tolvaj &&
+ register('tolvaj_kep_' + n)}
+ getKepzettsegN={getTolvajKepzettsegN} />}
>
}
diff --git a/src/components/KepzettsegSelector.tsx b/src/components/KepzettsegSelector.tsx
index c5e3ea2..fc035f1 100644
--- a/src/components/KepzettsegSelector.tsx
+++ b/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
+
+
- const { kepzettsegek, fieldRegistration, selected } = props
+}
+
+function KepzettsegSelector (props: {kepzettsegek: Kepzettseg[], fieldRegistration: UseFormRegisterReturn, defaultValue: Kepzettseg, selected : Kepzettseg}) {
+
+ const { kepzettsegek, fieldRegistration, defaultValue, selected } = props
return <>
-
-
-
+