refactor to use redux WIP

just pushing to save data

frontend/src/second-edition/components/FajSelector2E.tsx

@@ -1,8 +1,13 @@
 import React from "react";
 import {Faj2E, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj2E";
+import {useDispatch, useSelector} from "react-redux";
+import {AppDispatch, RootState} from "../../store";
+import {characterSelector, setFaj} from "../domain-models/characterSlice";
 
-function FajSelector2E(props: { faj: Faj2E, changeFaj: (val: Faj2E) => void }) {
-    const {faj, changeFaj} = props
+function FajSelector2E(props: { faj?: Faj2E, changeFaj?: (val: Faj2E) => void }) {
+    const dispatch = useDispatch.withTypes<AppDispatch>()()
+    const faj = props.faj ?? useSelector.withTypes<RootState>()(characterSelector).faj
+    const changeFaj = props.changeFaj ?? (faj => dispatch(setFaj(faj)));
     return <>
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 col-form-label'>Faj</label>

frontend/src/second-edition/components/FegyverSelector.tsx

@@ -1,93 +0,0 @@
-import React from "react";
-import {Fegyver} from "../domain-models/felszereles";
-
-export function FegyverFlags(fegyver: Fegyver): string {
-    const flags = [] as string[]
-    if (fegyver.Megterheltseg) {
-        flags.push("M")
-    }
-    if (fegyver.Harcos) {
-        flags.push("H")
-    }
-    if (fegyver.Masfelkezes) {
-        flags.push("1½K")
-    }
-    if (fegyver.Ketkezes) {
-        if (fegyver.Type === "kozelharci") {
-            flags.push("2K")
-        } else {
-            if (fegyver.KetkezesBonusz) {
-                flags.push("2KB")
-            } else {
-                flags.push("2KN")
-            }
-        }
-    }
-    if (fegyver.HarciManover) {
-        flags.push("+2 HM")
-    }
-    if (fegyver.Alakzat){
-        flags.push("AL")
-    }
-    if (fegyver.Hosszu) {
-        flags.push("HO")
-    }
-    if (fegyver.Kabito) {
-        flags.push("KO")
-    }
-    if (fegyver.LovasRoham) {
-        flags.push("LR")
-    }
-    if (fegyver.PancelToro) {
-        flags.push("PT")
-    }
-    if (fegyver.PajzsZuzo) {
-        flags.push("PZ")
-    }
-    if (fegyver.Rohamtoro) {
-        flags.push("RT")
-    }
-    return flags.join(' ');
-}
-
-export function FegyverLabel(fegyver: Fegyver): string {
-    const serializedFlags = FegyverFlags(fegyver) + (fegyver.Megjegyzes != null ? " " + fegyver.Megjegyzes : "");
-    const sizeLabel = fegyver.Size < 1 && fegyver.Size > 0 ? ` [1/${Math.round(1 / fegyver.Size)}]` : (fegyver.Size > 1 ? ` [${fegyver.Size}]` : '');
-    return `${fegyver.Name}${sizeLabel} | ${serializedFlags.length > 0 ? serializedFlags + " |" : ''}${
-        fegyver.DamageMultiplier > 1 ? `${fegyver.DamageMultiplier}*` : ''}${
-        fegyver.NumberOfDamageDice}d${fegyver.DamageDice}${fegyver.DamageBonus > 0 ? ` +${fegyver.DamageBonus}` : ''} ${
-        fegyver.CritRangeStart < 20 ? `${fegyver.CritRangeStart}-20` : ''}x${fegyver.CritMultiplier}${
-        fegyver.Price > 0 ? ` | ár: ${fegyver.Price} at ` : ''}${
-        fegyver.Range > 10 ? ` | táv: ${fegyver.Range}` : ''}`
-}
-
-function FegyverSelector(props: {
-    fegyverek: Fegyver[],
-    selectedId: string,
-    onChange: (id: string) => void,
-    dataTestId?: string,
-}) {
-    const { fegyverek, selectedId, onChange, dataTestId } = props
-    return <>
-        <select className='col form-select'
-                value={selectedId}
-                onChange={e => onChange(e.target.value)}
-                data-testid={dataTestId}
-        >
-            <optgroup label="Közelharci">
-                {fegyverek.filter(f => f.Type === 'kozelharci').map(f => <option
-                    key={f.Id} value={f.Id}>{FegyverLabel(f)}</option>)}
-            </optgroup>
-            <optgroup label="Közelharci, dobható">
-                {fegyverek.filter(f => f.Type === 'dobhato').map(f => <option
-                    key={f.Id} value={f.Id}>{FegyverLabel(f)}</option>)}
-            </optgroup>
-            <optgroup label="Távolsági">
-                {fegyverek.filter(f => f.Type === 'lofegyver').map(f => <option
-                    key={f.Id} value={f.Id}>{FegyverLabel(f)}</option>)}
-            </optgroup>
-        </select>
-    </>
-}
-
-export default FegyverSelector

frontend/src/second-edition/components/Felszereles.tsx

@@ -5,7 +5,7 @@ import {AllowedPajzsTypes, AllowedPancelTypes} from '../domain-models/allowed-pa
 import fegyverek from '../domain-models/fegyver.json'
 import {arraySetN} from "../../util";
 import {AllowedFegyver} from "../domain-models/allowed-fegyver";
-import FegyverSelector from "./FegyverSelector";
+import FegyverSelector from "../display-components/FegyverSelector";
 
 function Felszereles(props: {felszereles: KarakterFelszereles, changeFelszereles: (felszereles: KarakterFelszereles) => void, osztaly: Osztaly2E}) {
     const { felszereles, changeFelszereles, osztaly } = props;

frontend/src/second-edition/components/HarcosFegyverSpec.tsx

@@ -1,25 +1,30 @@
 import React from "react";
 import {GetFegyver} from "../domain-models/felszereles";
-import FegyverSelector from "./FegyverSelector";
+import FegyverSelector from "../display-components/FegyverSelector";
 import {AllowedFegyver} from "../domain-models/allowed-fegyver";
 import {Osztaly2E} from "../domain-models/osztaly2E";
+import {useDispatch, useSelector} from "react-redux";
+import {AppDispatch, RootState} from "../../store";
+import {characterSelector, setHarcosSpecialization} from "../domain-models/characterSlice";
 
 function HarcosFegyverSpecializacio(props: {
-    specialization: string,
-    existingSpecializations: (string | undefined)[],
-    changeSpecialization: (specialization: string) => void
     szint: number
 }) {
     const {
-        specialization,
-        existingSpecializations,
-        changeSpecialization,
         szint
     } = props
+
+    const dispatch = useDispatch.withTypes<AppDispatch>()()
+    const character = useSelector.withTypes<RootState>()(characterSelector)
+    const specialization = character.szintlepesek[szint-1].harcosFegyver || 'kard_hosszu'
+    const existingSpecializations = character.szintlepesek.filter(x => x.harcosFegyver != null).map(x => x.harcosFegyver! as string)
+    const changeSpecialization = (specialization: string) => dispatch(setHarcosSpecialization({szint, fegyver: specialization}))
+
     const fegyver = GetFegyver(specialization)
     const availableFegyverek = AllowedFegyver(Osztaly2E.Harcos)
     const pickableFegyverek = availableFegyverek.filter(f => f.Id === specialization || existingSpecializations.filter(x => x === f.Id).length < (szint < 9 ? 1 : 2))
 
+
     return <>
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 col-form-label' >Fegyver specializáció</label>

frontend/src/second-edition/components/HarcosFegyverSpecializacio.tsx

@@ -1,38 +0,0 @@
-// import React from "react";
-// import fegyverek from "../domain-models/fegyver.json"
-// import {defaultFegyverID, GetFegyver} from "../domain-models/felszereles";
-//
-// function HarcosFegyverSpecializacio(props: {
-//     specialization: string,
-//     existingSpecializations: string[],
-//     changeSpecialization: (specialization: string) => void
-//     szint: number
-// }) {
-//     const {
-//         specialization,
-//         existingSpecializations,
-//         changeSpecialization,
-//         szint
-//     } = props
-//     const fegyver = GetFegyver(specialization)
-//     const pickableFegyverek = fegyverek.data.filter(f => f.Id === specialization || existingSpecializations.filter(x => x === f.Id).length < (szint < 9 ? 1 : 2))
-//     const kozelharciPickable = pickableFegyverek.filter(f => f.Type === 'kozelharci')
-//     const tavolsagiPickable = pickableFegyverek.filter(f => f.Type === 'lofegyver')
-//
-//     return <>
-//         <div className='row m-2'>
-//             <label className='col-md-2 col-sm-3 col-form-label' >Fegyver specializáció</label>
-//             <select className='col form-select' value={fegyver?.Id || defaultFegyverID} onChange={e => changeSpecialization(e.target.value)}>
-//                 <optgroup label="Közelharci">
-//                     {kozelharciPickable.map(f => <option key={`spec-${szint}-${f.Id}`} value={f.Id}>{f.Name}</option>)}
-//                 </optgroup>
-//                 <optgroup label="Távolsági">
-//                     {tavolsagiPickable.map(f => <option key={`spec-${szint}-${f.Id}`} value={f.Id}>{f.Name}</option>)}
-//                 </optgroup>
-//             </select>
-//             {fegyver == null && <span className='form-field-error'>Ismeretlen fegyver: {specialization}</span>}
-//         </div>
-//     </>
-// }
-//
-// export default HarcosFegyverSpecializacio

frontend/src/second-edition/components/JellemSelector.tsx

@@ -1,8 +1,14 @@
 import React from "react";
 import {AllJellemIDs, GetJellem, JellemID} from "../domain-models/jellem";
+import {useDispatch, useSelector} from "react-redux";
+import {AppDispatch, RootState} from "../../store";
+import {characterSelector, setJellem} from "../domain-models/characterSlice";
 
-function JellemSelector(props: {selected: JellemID, changeJellem: (val: JellemID) => void}) {
-    const { selected, changeJellem } = props
+function JellemSelector(props: {selected?: JellemID, changeJellem?: (val: JellemID) => void}) {
+    const character = useSelector.withTypes<RootState>()(characterSelector)
+    const selected = props.selected ?? character.jellem
+    const dispatch = useDispatch.withTypes<AppDispatch>()()
+    const changeJellem = props.changeJellem ?? (val => dispatch(setJellem(val)))
     const jellem = GetJellem(selected)
     return <>
         <div className='row m-2'>

frontend/src/second-edition/components/KalozKritikus.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import {Osztaly2E} from "../domain-models/osztaly2E";
 import {AllowedFegyver} from "../domain-models/allowed-fegyver";
-import FegyverSelector from "./FegyverSelector";
+import FegyverSelector from "../display-components/FegyverSelector";
 
 function KalozKritikus(props: {
     kritFegyverId: string,

frontend/src/second-edition/components/KarakterKepzettsegek2E.tsx

@@ -1,12 +1,18 @@
 import React from "react";
-import KepzettsegSelector from "./KepzettsegSelector2E";
+import KepzettsegSelector from "../display-components/KepzettsegSelector2E";
 import {
+    GetKepzettsegListaN,
+    GetNumberOfKepzettsegek,
     Kepzettseg,
     Kepzettsegek,
     KepzettsegId,
     TolvajKepzettsegList,
 } from "../domain-models/kepzettsegek2E";
 import {arraySetN} from "../../util";
+import {useDispatch, useSelector} from "react-redux";
+import {AppDispatch, RootState} from "../../store";
+import {characterSelector, setKepzettsegek, setTolvajKepzettsegek} from "../domain-models/characterSlice";
+import {TulajdonsagokFajjal} from "../domain-models/faj2E";
 
 function InternalKepzettsegekSelector(props: {
     title: string,
@@ -59,15 +65,19 @@ function InternalKepzettsegekSelector(props: {
 
 }
 
-function KarakterKepzettsegek (props: {
-    numberOfKepzettsegek: number
-    kepzettsegek: KepzettsegId[],
-    changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
-    tolvajKepzettsegek: KepzettsegId[],
-    changeTolvajKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
-    getKepzettsegListaN: (n: number) => Kepzettseg[]
-}) {
-    const { kepzettsegek, numberOfKepzettsegek, getKepzettsegListaN, changeKepzettsegek, tolvajKepzettsegek, changeTolvajKepzettsegek} = props
+function KarakterKepzettsegek () {
+    const karakter = useSelector.withTypes<RootState>()(characterSelector);
+    const dispatch = useDispatch.withTypes<AppDispatch>()();
+
+    const tulajdonsagokFajjal = TulajdonsagokFajjal(karakter.tulajdonsagok, karakter.faj)
+    const numberOfKepzettsegek = GetNumberOfKepzettsegek(tulajdonsagokFajjal.t_int, karakter.faj)
+    const kepzettsegek = karakter.kepzettsegek
+    const fajError = karakter.kepzettsegFajError
+    const osztalyError = karakter.kepzettsegOsztalyError
+    const tolvajKepzettsegek = karakter.tolvajKepzettsegek || []
+    const getKepzettsegListaN = GetKepzettsegListaN(karakter)
+    const changeKepzettsegek = (k: KepzettsegId[]) => dispatch(setKepzettsegek(k))
+    const changeTolvajKepzettsegek = (k: KepzettsegId[]) => dispatch(setTolvajKepzettsegek(k))
 
     // TODO: Birodalmi tolvajnal az Alikmia, vagy Meregkeveres kezelese
 
@@ -85,7 +95,10 @@ function KarakterKepzettsegek (props: {
             kepzettsegek={kepzettsegek}
             dataTestId={"kepzettseg"}
         />
-
+        {fajError && (
+            <span className='form-field-error'>{fajError}</span>)}
+        {osztalyError && (
+            <span className='form-field-error'>{osztalyError}</span>)}
         {tolvajKepzettsegek.length > 0 && <InternalKepzettsegekSelector
             title="Tolvaj képzettségek"
             numberOfKepzettseg={4}

frontend/src/second-edition/components/KarakterSzarmazas.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import {characterSelector, setIsten, setNev} from "../domain-models/characterSlice";
+import JellemSelector from "./JellemSelector";
+import FajSelector2E from "./FajSelector2E";
+import {useDispatch, useSelector} from "react-redux";
+import {AppDispatch, RootState} from "../../store";
+
+function KarakterSzarmazas(props: {
+
+}) {
+    const karakter = useSelector.withTypes<RootState>()(characterSelector)
+    const dispatch = useDispatch.withTypes<AppDispatch>()()
+    return <>
+        <div className='row m-2'>
+            <label className='col-md-2 col-sm-3 col-form-label'>Név</label>
+            <input className='col form-control'
+                   value={karakter.nev}
+                   data-testid="nev"
+                   onChange={(e) => dispatch(setNev(e.target.value))}/>
+            {!karakter.nev &&
+                <span className='form-field-error'>A karaktered nem mászkálhat névtelenül a világban!</span>}
+        </div>
+        <JellemSelector/>
+        <div className='row m-2'>
+            <label className='col-md-2 col-sm-3 col-form-label'>Választott istenség</label>
+            <input className='col form-control'
+                   value={karakter.isten}
+                   data-testid="isten"
+                   onChange={(e) => dispatch(setIsten(e.target.value))}/>
+        </div>
+        <FajSelector2E/>
+    </>
+}
+
+export default KarakterSzarmazas;

frontend/src/second-edition/components/KepzettsegSelector2E.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import {Kepzettseg, KepzettsegId} from "../domain-models/kepzettsegek2E";
-import {TulajdonsagLabel} from "../domain-models/tulajdonsag2E";
-import {OsztalyLabel} from "../domain-models/osztaly2E";
-
-function kepzettsegOptionText(k: Kepzettseg) {
-    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[],
-    changeKepzettseg: (newKepzettseg: KepzettsegId) => void,
-    selected : Kepzettseg,
-    dataTestId?: string,
-}) {
-    const { kepzettsegek, changeKepzettseg, selected, dataTestId } = props
-    return <>
-        <div className='row'>
-            <select
-                className='form-control'
-                value={selected.Id}
-                onChange={e => changeKepzettseg(e.target.value as KepzettsegId)}
-                data-testid={dataTestId}
-            >
-                {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>
-    </>
-}
-
-export default KepzettsegSelector

frontend/src/second-edition/components/LevelUps.tsx

@@ -17,7 +17,6 @@ function LevelUp(props: {
     karakter: Karakter2E,
     changeTulajdonsagNoveles: (t: Tulajdonsag2E) => void,
     changeRolledHP: (rolledHP: number) => void,
-    changeHarcosSpec: (spec: string) => void,
     changeKalozKritikus: (krit: string) => void,
     changeOsztaly: (osztaly: Osztaly2E) => void
 }) {
@@ -27,7 +26,6 @@ function LevelUp(props: {
         karakter,
         changeTulajdonsagNoveles,
         changeRolledHP,
-        changeHarcosSpec,
         changeKalozKritikus,
         changeOsztaly
     } = props
@@ -36,7 +34,6 @@ function LevelUp(props: {
     
     const harcosSzint = classLevels[Osztaly2E.Harcos]
     const kalozSzint = classLevels[Osztaly2E.Tengeresz]
-    const specialization = karakter.szintlepesek[szint-1].harcosFegyver
     const krit = karakter.szintlepesek[szint-1].kalozKritikus
     
     return <div>
@@ -66,9 +63,6 @@ function LevelUp(props: {
         />
         {osztaly === Osztaly2E.Harcos && harcosSzint % 2 === 1 &&
             <HarcosFegyverSpecializacio
-                specialization={specialization!}
-                existingSpecializations={karakter.szintlepesek.map(x => x.harcosFegyver)}
-                changeSpecialization={changeHarcosSpec}
                 szint={harcosSzint}
             />
         }
@@ -103,18 +97,6 @@ export function LevelUps(props: {karakter: Karakter2E, changeKarakter: (inputs:
         };
     }
 
-    const changeHarcosSpecializacioAtSzint = (szint: number) => {
-        return (spec: string) => {
-            changeKarakter({
-                ...karakter,
-                szintlepesek: arraySetN(karakter.szintlepesek, szint-1, {
-                    ...karakter.szintlepesek[szint-1],
-                    harcosFegyver: spec
-                })
-            })
-        };
-    }
-
     const changeKalozKritikusAtSzint = (szint: number) => {
         return (krit: string) => {
             changeKarakter({
@@ -138,7 +120,6 @@ export function LevelUps(props: {karakter: Karakter2E, changeKarakter: (inputs:
                 karakter={{...karakter, szintlepesek: karakter.szintlepesek.slice(0, szint) ,tulajdonsagok: tulajdonsagokAtSzint(szint)}}
                 changeTulajdonsagNoveles={changeTulajdonsagNovelesAtSzint(szint)}
                 changeRolledHP={changeRolledHPAtSzint(szint)}
-                changeHarcosSpec={changeHarcosSpecializacioAtSzint(szint)}
                 changeKalozKritikus={changeKalozKritikusAtSzint(szint)}
                 changeOsztaly={(o) => changeKarakter(ChangeOsztalyAtSzint(karakter, o, szint))}
             />

frontend/src/second-edition/components/MasodlagosErtekek.tsx

@@ -1,10 +1,32 @@
 import React from "react";
 import {OverlayTrigger, Tooltip} from "react-bootstrap";
 import {SignedNumberToText} from "../../shared/components/Helpers";
-import {MasodlagosErtekekView} from "../domain-models/masodlagos_ertekek";
+import {CalculateMasodlagosErtekek, MasodlagosErtekekView} from "../domain-models/masodlagos_ertekek";
+import {useSelector} from "react-redux";
+import {RootState} from "../../store";
+import {characterSelector} from "../domain-models/characterSlice";
+import {TulajdonsagokTotal} from "../domain-models/tulajdonsag2E";
 
-function MasodlagosErtekek(props: MasodlagosErtekekView) {
+export function MasodlagosErtekek(props: {szint?: number}) {
+    let karakter = useSelector.withTypes<RootState>()(characterSelector);
+    if (props.szint !== karakter.szint && props.szint !== undefined) {
+        const szintlepesek = karakter.szintlepesek.slice(0, props.szint)
+        karakter = {
+            ...karakter,
+            tulajdonsagok: TulajdonsagokTotal({
+                tulajdonsagok: karakter.tulajdonsagok,
+                faj: karakter.faj,
+                szintlepesek,
+            }),
+            szint: props.szint,
+            szintlepesek,
+        }
+    }
+    const masodlagosErtekek = CalculateMasodlagosErtekek(karakter)
+    return <MasodlagosErtekekPresenter {...masodlagosErtekek}/>
+}
 
+export function MasodlagosErtekekPresenter(props: MasodlagosErtekekView) {
     const { HP, VO, CelzoTB, Mentok, KozelharciTB } = props
 
     const tooltip = (

frontend/src/second-edition/components/OsztalySelector2E.tsx

@@ -7,8 +7,24 @@ import {
     OsztalySpecialSkills
 } from "../domain-models/osztaly2E";
 import {Faj2E, SzintKorlatokFajokra} from "../domain-models/faj2E";
+import {useDispatch, useSelector} from "react-redux";
+import {AppDispatch, RootState} from "../../store";
+import {characterSelector, setLevel1Osztaly} from "../domain-models/characterSlice";
 
-function OsztalySelector2E(props: {
+export function OsztalySelector2E() {
+    const karakter = useSelector.withTypes<RootState>()(characterSelector)
+    const dispatch = useDispatch.withTypes<AppDispatch>()()
+    const currentFaj = karakter.faj
+    const currentOsztaly = karakter.szintlepesek[0].osztaly
+    const changeOsztaly = (o: Osztaly2E) => dispatch(setLevel1Osztaly(o))
+    return <OsztalySelector2EPresenter
+        currentOsztaly={currentOsztaly}
+        changeOsztaly={changeOsztaly}
+        currentFaj={currentFaj}
+    />
+}
+
+export function OsztalySelector2EPresenter(props: {
     currentFaj: Faj2E,
     currentOsztaly: Osztaly2E,
     changeOsztaly: (newOsztaly: Osztaly2E) => void

frontend/src/second-edition/components/TulajdonsagInput2E.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-
-import {Faj2E, FajLabel} from "../domain-models/faj2E";
-import {Modifier} from "../domain-models/tulajdonsag2E";
-import {SignedNumberToText} from "../../shared/components/Helpers";
-
-
-function fajiModositoText(faj: Faj2E, szamolas: (f: Faj2E) => number) : string {
-    const mod = szamolas(faj)
-    return (mod !== 0) ? SignedNumberToText(mod) + ' (' + FajLabel(faj) + ')' : ''
-}
-
-function TulajdonsagInput(props: {
-    tulajdonsag: string,
-    currentFaj : Faj2E,
-    fajiModosito: (faj: Faj2E) => number,
-    changeValue: (val: number) => void
-    currentValue: number
-    tooLowError: string,
-    tooHighError: string
-    dataTestId?: string
-}) {
-    const {
-        tulajdonsag,
-        changeValue,
-        currentFaj,
-        currentValue,
-        fajiModosito,
-        tooLowError,
-        tooHighError,
-        dataTestId
-    } = props;
-    return (<div className='row m-2'>
-        <label className='col-lg-1 col-sm-2 col-form-label'>{tulajdonsag}</label>
-        <div className='col-lg-1 col-sm-2 m-2'>
-            <input
-                className='form-control'
-                maxLength={2}
-                type='number'
-                value={currentValue}
-                onChange={e => changeValue(Number(e.target.value))}
-                data-testid={dataTestId}
-            />
-        </div>
-        <span className='col-sm-2 m-2'>
-                            {fajiModositoText(currentFaj, fajiModosito)}
-                        </span>
-        <span className='col-sm-2 m-2'>
-                            Összesen: { (currentValue + (fajiModosito(currentFaj))).toString() }
-                        </span>
-        <span className='col-sm-2 m-2'>
-                            Módosító: { SignedNumberToText(Modifier(currentValue + fajiModosito(currentFaj))) }
-                        </span>
-        {currentValue < 3 && (
-            <span className='form-field-error'>{tooLowError}</span>)}
-        {currentValue > 18 && (
-            <span className='form-field-error'>{tooHighError}</span>)}
-    </div>)
-}
-
-export default TulajdonsagInput;

frontend/src/second-edition/components/Tulajdonsagok2E.test.tsx

@@ -5,7 +5,7 @@ import {Faj2E} from "../domain-models/faj2E";
 import {TulajdonsagDefaults} from "../domain-models/tulajdonsag2E";
 import {
     setEro,
-} from "../domain-models/tulajdonsagSlice";
+} from "../domain-models/characterSlice";
 import '@testing-library/jest-dom'
 import {Provider} from "react-redux";
 import store from "../../store";

frontend/src/second-edition/components/Tulajdonsagok2E.tsx

@@ -3,7 +3,7 @@ import {
     KarakterTulajdonsagok,
     Tulajdonsag2E,
 } from "../domain-models/tulajdonsag2E";
-import TulajdonsagInput from "./TulajdonsagInput2E";
+import TulajdonsagInput from "../display-components/TulajdonsagInput2E";
 import {Faj2E, TulajdonsagModositokFajokra} from "../domain-models/faj2E";
 import {useDispatch, useSelector} from "react-redux";
 import {AppDispatch, RootState} from "../../store";
@@ -12,19 +12,21 @@ import {
     setBolcsesseg,
     setEgeszseg,
     setEro,
-    setIntelligencia, setKarizma,
+    setIntelligencia,
+    setKarizma,
     setUgyesseg,
-    tulajdonsagSelector
-} from "../domain-models/tulajdonsagSlice";
+} from "../domain-models/characterSlice";
+import {characterSelector} from "../domain-models/characterSlice";
 
 function Tulajdonsagok(props: {
-    currentFaj: Faj2E,
+    currentFaj?: Faj2E,
     tulajdonsagok?: KarakterTulajdonsagok
     dispatch?: (action: any) => any
 }) {
-    const {currentFaj} = props
+    const karakter = useSelector.withTypes<RootState>()(characterSelector)
     const dispatch = props.dispatch ?? useDispatch.withTypes<AppDispatch>()()
-    const tulajdonsagok = props.tulajdonsagok ?? useSelector.withTypes<RootState>()(tulajdonsagSelector)
+    const currentFaj = props.currentFaj ?? karakter.faj
+    const tulajdonsagok = props.tulajdonsagok ?? karakter.tulajdonsagok
     return <>
         <div className='row'>
             <h5 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h5>