ci: split repo: make this repo frontend only again

2026-07-18 03:13:46 +00:00 · 2024-03-09 00:08:09 +01:00
parent 5f56f34b4e
commit b132a5801b
308 changed files with 9 additions and 43867 deletions
@@ -0,0 +1,90 @@
+import React from "react";
+import {Karakter2E} from "../domain-models/karakter2E";
+import {SignedNumberToText} from "../../shared/components/Helpers";
+import {Mentok, MentoTipus, MentoTipusLabel, MentokTotal} from "../domain-models/mentok";
+import {BaseHP, HP} from "../domain-models/masodlagos_ertekek";
+import {MultiClassTamadasBonusz} from "../domain-models/tamadas_bonusz";
+import {Osztaly2E} from "../domain-models/osztaly2E";
+
+function MentoNovekedes(props : {tipus: MentoTipus, ujMentok: Mentok, regiMentok: Mentok}) {
+    const {tipus, ujMentok, regiMentok} = props
+    if (ujMentok[tipus] === regiMentok[tipus]) {
+        return null
+    }
+    return <div className='row m-2'>
+        <label className='col-sm-6 col-8 col-form-label'>{MentoTipusLabel(tipus)} mentő növekedés{' '}</label>
+        <span className='col col-form-label'>{SignedNumberToText(ujMentok[tipus] - regiMentok[tipus])}</span>
+    </div>;
+}
+
+function UjMento(props : {tipus: MentoTipus, ujMentok: Mentok, regiMentok: Mentok}) {
+    const {tipus, ujMentok, regiMentok} = props
+    if (ujMentok[tipus] === regiMentok[tipus]) {
+        return null
+    }
+    return <div className='row m-2'>
+        <label className='col-sm-6 col-8 col-form-label'>{MentoTipusLabel(tipus)} mentő új értéke{' '}</label>
+        <span className='col col-form-label'>{SignedNumberToText(ujMentok[tipus])}</span>
+    </div>;
+}
+
+function BasicNewLevel(props: {
+    karakter: Pick<Karakter2E, 'tulajdonsagok' | 'szintlepesek'>
+    szint: number
+    osztaly: Osztaly2E
+    changeRolledHP: (hp: number) => void,
+}) {
+    const {karakter, szint, osztaly, changeRolledHP} = props
+    const regiMentok = MentokTotal({...karakter, szintlepesek: karakter.szintlepesek.slice(0, szint - 1)})
+    const ujMentok = MentokTotal({...karakter, szintlepesek: karakter.szintlepesek.slice(0, szint)})
+
+    const regiTB = MultiClassTamadasBonusz(karakter.szintlepesek.slice(0, szint-1))
+    const ujTB = MultiClassTamadasBonusz(karakter.szintlepesek.slice(0, szint))
+    if (regiTB.length < ujTB.length) {
+        regiTB.push(0)
+    }
+    const TBdiff = ujTB.map((x, i) => x - regiTB[i])
+    const isTBincreased = TBdiff.length > 0 && TBdiff.some(x => x > 0)
+
+    return <>
+        <div className='row'>
+            <div className='col-lg-6'>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label'>Plusz dobott HP (d{BaseHP(osztaly)}){' '}</label>
+                    <div className='col-sm-2 col'>
+                        <input
+                            className='form-control'
+                            maxLength={2}
+                            type='number'
+                            value={karakter.szintlepesek[szint-1].HProll || 1}
+                            min={1}
+                            max={12}
+                            onChange={e => changeRolledHP(Number(e.target.value))} />
+                    </div>
+                </div>
+                { isTBincreased && <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label'>Támadás bónusz növekedés{' '}</label>
+                    <span className='col col-form-label'>{TBdiff.map(SignedNumberToText).join(" / ")}</span>
+                </div>}
+                <MentoNovekedes tipus={'kitartas'} ujMentok={ujMentok} regiMentok={regiMentok} />
+                <MentoNovekedes tipus={'reflex'} ujMentok={ujMentok} regiMentok={regiMentok} />
+                <MentoNovekedes tipus={'akaratero'} ujMentok={ujMentok} regiMentok={regiMentok} />
+            </div>
+            <div className='col-lg-6'>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label'>Új HP{' '}</label>
+                    <span className='col col-form-label'>{HP({...karakter, szintlepesek: karakter.szintlepesek.slice(0, szint)})}</span>
+                </div>
+                {isTBincreased && <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label'>Új Támadás bónusz{' '}</label>
+                    <span className='col col-form-label'>{ujTB.map(SignedNumberToText).join(" / ")}</span>
+                </div>}
+                <UjMento tipus={'kitartas'} ujMentok={ujMentok} regiMentok={regiMentok} />
+                <UjMento tipus={'reflex'} ujMentok={ujMentok} regiMentok={regiMentok} />
+                <UjMento tipus={'akaratero'} ujMentok={ujMentok} regiMentok={regiMentok} />
+            </div>
+        </div>
+    </>
+}
+
+export default BasicNewLevel
@@ -0,0 +1,43 @@
+import React from "react";
+import {Faj2E, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj2E";
+
+function FajSelector2E(props: { faj: Faj2E, changeFaj: (val: Faj2E) => void }) {
+    const {faj, changeFaj} = props
+    return <>
+        <div className='row m-2'>
+            <label className='col-md-2 col-sm-3 col-form-label'>Faj</label>
+            <select className='col form-select' value={faj} onChange={e => changeFaj(e.target.value as Faj2E)}>
+                <option key={Faj2E.Ember} value={Faj2E.Ember}>{FajLabel(Faj2E.Ember)}</option>
+                <optgroup label='más emberi népek'>
+                    <option key={Faj2E.Amazon} value={Faj2E.Amazon}>{FajLabel(Faj2E.Amazon)}</option>
+                    <option key={Faj2E.Birodalmi} value={Faj2E.Birodalmi}>{FajLabel(Faj2E.Birodalmi)}</option>
+                    <option key={Faj2E.Eszaki} value={Faj2E.Eszaki}>{FajLabel(Faj2E.Eszaki)}</option>
+                    <option key={Faj2E.Nomad} value={Faj2E.Nomad}>{FajLabel(Faj2E.Nomad)}</option>
+                    <option key={Faj2E.Osember} value={Faj2E.Osember}>{FajLabel(Faj2E.Osember)}</option>
+                </optgroup>
+                <optgroup label='nem emberi fajok'>
+                    <option key={Faj2E.Elf} value={Faj2E.Elf}>{FajLabel(Faj2E.Elf)}</option>
+                    <option key={Faj2E.Felelf} value={Faj2E.Felelf}>{FajLabel(Faj2E.Felelf)}</option>
+                    <option key={Faj2E.Felork} value={Faj2E.Felork}>{FajLabel(Faj2E.Felork)}</option>
+                    <option key={Faj2E.Felszerzet}
+                            value={Faj2E.Felszerzet}>{FajLabel(Faj2E.Felszerzet)}</option>
+                    <option key={Faj2E.Gnom} value={Faj2E.Gnom}>{FajLabel(Faj2E.Gnom)}</option>
+                    <option key={Faj2E.Torpe} value={Faj2E.Torpe}>{FajLabel(Faj2E.Torpe)}</option>
+                </optgroup>
+            </select>
+        </div>
+        <div className='row m-2'>
+            <label className='col-md-2 col-sm-3 form-label'></label>
+            <div className='col'>
+                <p className='row pt-2'>
+                    {FajDescription(faj)}
+                </p>
+                <ul>
+                    {FajSpecials(faj).map(((special, i) => (<li key={faj + i}>{special}</li>)))}
+                </ul>
+            </div>
+        </div>
+    </>
+}
+
+export default FajSelector2E
@@ -0,0 +1,87 @@
+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}) {
+    
+    const { fegyverek, selectedId, onChange } = props
+    
+    return <>
+        <select className='col form-select' value={selectedId}
+                onChange={e => onChange(e.target.value)}>
+            <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
@@ -0,0 +1,73 @@
+import React from "react";
+import {Fegyver, KarakterFelszereles, PancelTypeLabel} from "../domain-models/felszereles";
+import {Osztaly2E} from '../domain-models/osztaly2E'
+import {AllowedPajzsTypes, AllowedPancelTypes} from '../domain-models/allowed-pancel-types'
+import fegyverek from '../domain-models/fegyver.json'
+import {arraySetN} from "../../util";
+import {AllowedFegyver} from "../domain-models/allowed-fegyver";
+import FegyverSelector from "./FegyverSelector";
+
+function Felszereles(props: {felszereles: KarakterFelszereles, changeFelszereles: (felszereles: KarakterFelszereles) => void, osztaly: Osztaly2E}) {
+    const { felszereles, changeFelszereles, osztaly } = props;
+    const allowedPancel = AllowedPancelTypes([osztaly])
+    const allowedPajzs = AllowedPajzsTypes([osztaly])
+    const valasztottFegyverek = felszereles.fegyverIDk
+        .map((id, idx) => ({idx, fegyver: fegyverek.data.find(f => f.Id === id)})).filter((x) => x.fegyver != null).map(({idx, fegyver}) => ({idx, fegyver: fegyver as Fegyver}))
+
+    const osztalyAllowedFegyverek = AllowedFegyver(osztaly)
+    const allowedFegyverek = [...osztalyAllowedFegyverek, ...valasztottFegyverek.filter(({idx, fegyver}) => !osztalyAllowedFegyverek.map(f => f.Id).includes(fegyver.Id)).map(({fegyver}) => fegyver)]
+    const changeFegyver = (idx: number, newID: string) => {
+        const found = fegyverek.data.find(x => x.Id === newID)
+        if (!found) {
+            console.log('Nem létező fegyver ID: ', newID)
+            return
+        }
+        changeFelszereles({...felszereles, fegyverIDk: arraySetN(felszereles.fegyverIDk, idx, newID)})
+    }
+
+    return <>
+        <div className='row'>
+            <h5 className='col align-self-center'>Felszerelés</h5>
+        </div>
+        <div className='row m-2'>
+            <label className='col-md-2 col-sm-3 col-form-label'>Viselt páncél</label>
+            <select className='col form-select' value={felszereles.pancelID} onChange={e => changeFelszereles({...felszereles, pancelID: e.target.value === 'nincs' ? undefined : e.target.value})}>
+                <option key={'nincs'} value={'nincs'}>Nincs</option>
+                {
+                    <optgroup label={PancelTypeLabel("konnyu")}>
+                        {allowedPancel.filter(p => p.Type === "konnyu").map(p => 
+                            <option key={p.Id} value={p.Id}>{`${p.Name}${p.Size > 1 ? ` [${p.Size}]` : ''} (+${p.VO} VO) - ${p.Price} at`}</option>)}
+                    </optgroup>
+                }
+                {
+                    allowedPancel.some(p => p.Type === "nehez") &&
+                    <optgroup label={PancelTypeLabel("nehez")}>
+                        {allowedPancel.filter(p => p.Type === "nehez").map(p => 
+                            <option key={p.Id} value={p.Id}>{`${p.Name} (+${p.VO} VO) - ${p.Price} at`}</option>)}
+                    </optgroup>
+                }
+            </select>
+        </div>
+        <div className='row m-2'>
+            <label className='col-md-2 col-sm-3 col-form-label'>Hordott pajzs</label>
+            <select className='col form-select' value={felszereles.pajzsID}
+                    onChange={e => changeFelszereles({...felszereles, pajzsID: e.target.value === 'nincs' ? undefined : e.target.value})}>
+                <option key={'nincs'} value={'nincs'}>Nincs</option>
+                {allowedPajzs.map(p => <option key={p.Id} value={p.Id}>{`${p.Name} (+${p.VO} VO) - ${p.Price} at`}</option>)}
+            </select>
+        </div>
+        {valasztottFegyverek.map(({idx, fegyver}) => (
+            <div key={`fegyver-${idx}`} className='row m-2'>
+                <label className='col-md-2 col-sm-3 col-form-label'>Fegyver</label>
+                <FegyverSelector fegyverek={allowedFegyverek} selectedId={fegyver.Id} onChange={(fegyverId) => changeFegyver(idx, fegyverId)} />
+                <button className='col-md-2 col-sm-3 btn btn-outline-dark btn-lg ms-2' type='button'
+                        onClick={() => changeFelszereles({
+                            ...felszereles,
+                            fegyverIDk: [...felszereles.fegyverIDk.slice(0, idx), ...felszereles.fegyverIDk.slice(idx+1)]})}>Elvesz</button>
+            </div>
+        ))}
+        <button className='btn btn-outline-dark btn btn-lg ms-2' type='button' onClick={() => changeFelszereles({...felszereles, fegyverIDk: [...felszereles.fegyverIDk, 'bot']})}>Fegyver hozzáadása</button>
+    </>
+}
+
+export default Felszereles
@@ -0,0 +1,32 @@
+import React from "react";
+import {GetFegyver} from "../domain-models/felszereles";
+import FegyverSelector from "./FegyverSelector";
+import {AllowedFegyver} from "../domain-models/allowed-fegyver";
+import {Osztaly2E} from "../domain-models/osztaly2E";
+
+function HarcosFegyverSpecializacio(props: {
+    specialization: string,
+    existingSpecializations: (string | undefined)[],
+    changeSpecialization: (specialization: string) => void
+    szint: number
+}) {
+    const {
+        specialization,
+        existingSpecializations,
+        changeSpecialization,
+        szint
+    } = props
+    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>
+            <FegyverSelector fegyverek={pickableFegyverek} selectedId={specialization} onChange={changeSpecialization} />
+            {fegyver == null && <span className='form-field-error'>Ismeretlen fegyver: {specialization}</span>}
+        </div>
+    </>
+}
+
+export default HarcosFegyverSpecializacio
@@ -0,0 +1,38 @@
+// 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
@@ -0,0 +1,27 @@
+import React from "react";
+import {AllJellemIDs, GetJellem, JellemID} from "../domain-models/jellem";
+
+function JellemSelector(props: {selected: JellemID, changeJellem: (val: JellemID) => void}) {
+    const { selected, changeJellem } = props
+    const jellem = GetJellem(selected)
+    return <>
+        <div className='row m-2'>
+            <label className='col-md-2 col-sm-3 col-form-label'>Jellem</label>
+            <select className='col form-select' value={selected} onChange={e => changeJellem(e.target.value as JellemID)}>
+                {AllJellemIDs.map((id) => (
+                    <option key={id} value={id}>{GetJellem(id).Label}</option>
+                ))}
+            </select>
+        </div>
+        <div className='row m-2'>
+            <label className='col-md-2 col-sm-3 form-label'></label>
+            <div className='col'>
+                <p className='row pt-2'>
+                    {jellem.Description}
+                </p>
+            </div>
+        </div>
+    </>
+}
+
+export default JellemSelector
@@ -0,0 +1,28 @@
+import React from "react";
+import {Osztaly2E} from "../domain-models/osztaly2E";
+import {AllowedFegyver} from "../domain-models/allowed-fegyver";
+import FegyverSelector from "./FegyverSelector";
+
+function KalozKritikus(props: {
+    kritFegyverId: string,
+    existingKrits: (string | undefined)[],
+    changeKrit: (krit: string) => void,
+    szint: number
+}) {
+    const {
+        kritFegyverId,
+        existingKrits,
+        changeKrit,
+        szint
+    } = props
+    const fegyverek = AllowedFegyver(Osztaly2E.Tengeresz).filter(f => f.Id === kritFegyverId || existingKrits.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'>Kritikus</label>
+            <FegyverSelector fegyverek={fegyverek} selectedId={kritFegyverId} onChange={changeKrit} />
+        </div>
+    </>
+}
+
+export default KalozKritikus
@@ -0,0 +1,89 @@
+import React from "react";
+import KepzettsegSelector from "./KepzettsegSelector2E";
+import {
+    Kepzettseg,
+    Kepzettsegek,
+    KepzettsegId,
+    TolvajKepzettsegList,
+} from "../domain-models/kepzettsegek2E";
+import {arraySetN} from "../../util";
+
+
+function InternalKepzettsegekSelector(props: {
+    title: string,
+    numberOfKepzettseg: number,
+    getKepzettsegListaN: (n: number) => Kepzettseg[],
+    kepzettsegek: KepzettsegId[],
+    changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
+}) {
+    const {title, numberOfKepzettseg, getKepzettsegListaN, kepzettsegek, changeKepzettsegek} = props
+
+    const klist = Array.from(new Array(numberOfKepzettseg).keys())
+
+    const preCalculated: {
+        kepzettsegek: Kepzettseg[],
+        changeKepzettseg: (newKepzettseg: KepzettsegId) => void,
+        selected: Kepzettseg,
+    }[] = [];
+
+    for (let i = 0; i < numberOfKepzettseg; i++) {
+        preCalculated.push({
+            kepzettsegek: getKepzettsegListaN(i),
+            selected: Kepzettsegek[kepzettsegek[i]],
+            changeKepzettseg: (newKepzettseg: KepzettsegId) => changeKepzettsegek(arraySetN(kepzettsegek, i, newKepzettseg))
+        })
+    }
+
+    return <>
+        <div className='row m-2'>
+            <label className='col-lg-2 col-md-12 col-form-label'>{title}</label>
+            <div className='col'>
+                {klist.map((idx) =>
+                    <KepzettsegSelector
+                        key={title+idx}
+                        kepzettsegek={preCalculated[idx].kepzettsegek}
+                        selected={preCalculated[idx].selected}
+                        changeKepzettseg={preCalculated[idx].changeKepzettseg}
+                    />)
+                }
+            </div>
+        </div>
+    </>
+
+}
+
+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
+
+    // TODO: Birodalmi tolvajnal az Alikmia, vagy Meregkeveres kezelese
+
+    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={numberOfKepzettsegek}
+            getKepzettsegListaN={getKepzettsegListaN}
+            changeKepzettsegek={changeKepzettsegek}
+            kepzettsegek={kepzettsegek} />
+
+        {tolvajKepzettsegek.length > 0 && <InternalKepzettsegekSelector
+            title="Tolvaj képzettségek"
+            numberOfKepzettseg={4}
+            getKepzettsegListaN={getTolvajKepzettsegListaN}
+            changeKepzettsegek={changeTolvajKepzettsegek}
+            kepzettsegek={tolvajKepzettsegek} />}
+    </>
+}
+
+export default KarakterKepzettsegek
@@ -0,0 +1,32 @@
+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}) {
+
+    const { kepzettsegek, changeKepzettseg, selected } = props
+
+    return <>
+        <div className='row'>
+            <select className='form-control'
+                    value={selected.Id} onChange={e => changeKepzettseg(e.target.value as KepzettsegId)}>
+                {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
@@ -0,0 +1,147 @@
+import React from "react";
+import {ChangeOsztalyAtSzint, Karakter2E} from "../domain-models/karakter2E";
+import BasicNewLevel from "./BasicNewLevel";
+import TulajdonsagNoveles from "./TulajdonsagNoveles";
+import {Tulajdonsag2E, TulajdonsagokTotal} from "../domain-models/tulajdonsag2E";
+import {arraySetN} from "../../util";
+import {Osztaly2E} from "../domain-models/osztaly2E";
+import KalozKritikus from "./KalozKritikus";
+import HarcosFegyverSpecializacio from "./HarcosFegyverSpec";
+
+import MultiClassOsztalySelector2E from "./MultiClassOsztalySelector2E";
+import {getClassLevels} from "../domain-models/szintlepes";
+
+function LevelUp(props: {
+    szint: number,
+    osztaly: Osztaly2E,
+    karakter: Karakter2E,
+    changeTulajdonsagNoveles: (t: Tulajdonsag2E) => void,
+    changeRolledHP: (rolledHP: number) => void,
+    changeHarcosSpec: (spec: string) => void,
+    changeKalozKritikus: (krit: string) => void,
+    changeOsztaly: (osztaly: Osztaly2E) => void
+}) {
+    const {
+        szint,
+        osztaly,
+        karakter,
+        changeTulajdonsagNoveles,
+        changeRolledHP,
+        changeHarcosSpec,
+        changeKalozKritikus,
+        changeOsztaly
+    } = props
+
+    const classLevels = getClassLevels(karakter.szintlepesek)
+    
+    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>
+        <div className='row mt-3'>
+            <h5 className='col align-self-center'>{szint}. Szint</h5>
+        </div>
+        {osztaly !== Osztaly2E.Druida && 
+            <MultiClassOsztalySelector2E 
+                faj={karakter.faj} 
+                osztaly={osztaly}
+                changeOsztaly={changeOsztaly}
+                osztalySzint={classLevels[osztaly]}
+            /> }
+        {szint % 4 === 0 && 
+            <TulajdonsagNoveles
+                tulajdonsagok={karakter.tulajdonsagok}
+                tulajdonsagNoveles={karakter.szintlepesek[szint-1].tulajdonsagNoveles!}
+                changeTulajdonsagNoveles={changeTulajdonsagNoveles}
+            /> }
+        <BasicNewLevel
+            szint={szint}
+            karakter={karakter}
+            osztaly={osztaly}
+            changeRolledHP={changeRolledHP}
+        />
+        {osztaly === Osztaly2E.Harcos && harcosSzint % 2 === 1 &&
+            <HarcosFegyverSpecializacio
+                specialization={specialization!}
+                existingSpecializations={karakter.szintlepesek.map(x => x.harcosFegyver)}
+                changeSpecialization={changeHarcosSpec}
+                szint={harcosSzint}
+            />
+        }
+        {osztaly === Osztaly2E.Tengeresz && kalozSzint % 3 === 0 &&
+            <KalozKritikus
+                kritFegyverId={krit!}
+                existingKrits={karakter.szintlepesek.map(x => x.kalozKritikus)}
+                changeKrit={changeKalozKritikus}
+                szint={kalozSzint}
+            />
+        }
+    </div>
+}
+
+export function LevelUps(props: {karakter: Karakter2E, changeKarakter: (inputs: Karakter2E) => void}){
+    const {karakter, changeKarakter} = props;
+
+    const tulajdonsagokAtSzint = (szint: number) => TulajdonsagokTotal({...karakter, szintlepesek: karakter.szintlepesek.slice(0, szint)})
+
+    const changeRolledHPAtSzint = (szint: number) => (newHProll: number) => {
+        changeKarakter({...karakter, szintlepesek: arraySetN(karakter.szintlepesek, szint-1, {...karakter.szintlepesek[szint-1], HProll: newHProll})})
+        console.log(karakter)
+    }
+    const changeTulajdonsagNovelesAtSzint = (szint: number) => {
+        return (t: Tulajdonsag2E) => {
+            changeKarakter({...karakter,
+                szintlepesek: arraySetN(karakter.szintlepesek, szint-1, {
+                    ...karakter.szintlepesek[szint-1],
+                    tulajdonsagNoveles: t
+                })
+            })
+        };
+    }
+
+    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({
+                ...karakter, 
+                szintlepesek: arraySetN(karakter.szintlepesek, szint-1, {
+                    ...karakter.szintlepesek[szint-1],
+                        kalozKritikus: krit
+                })
+            })
+        };
+    }
+
+    const levels = karakter.szintlepesek.map((_, i) => i+1);
+
+    return <>
+        {levels.slice(1).map(szint =>
+            <LevelUp
+                key={`level-up-${szint}`}
+                szint={szint}
+                osztaly={karakter.szintlepesek[szint-1].osztaly}
+                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))}
+            />
+        )}
+    </>
+}
+
+export default LevelUps
@@ -0,0 +1,61 @@
+import React from "react";
+import {OverlayTrigger, Tooltip} from "react-bootstrap";
+import {SignedNumberToText} from "../../shared/components/Helpers";
+import {MasodlagosErtekekView} from "../domain-models/masodlagos_ertekek";
+
+function MasodlagosErtekek(props: MasodlagosErtekekView) {
+
+    const { HP, VO, CelzoTB, Mentok, KozelharciTB } = props
+
+    const tooltip = (
+        <Tooltip id="tooltip">
+            <strong>Hentelési Potenciál</strong>
+        </Tooltip>
+    );
+
+    return <>
+        <div className='row'>
+            <h5 className='col align-self-center'>Másodlagos értékek</h5>
+        </div>
+        <div className='row'>
+            <div className='col-lg-6'>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label'>Életerő{' '}
+                        <OverlayTrigger placement='top' overlay={tooltip} delay={0} defaultShow={false} flip={false}>
+                            <span>(HP)</span>
+                        </OverlayTrigger>
+                    </label>
+                    <p className='col col-form-label'>{HP}</p>
+                </div>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label' >Védekezési Osztály (VO)</label>
+                    <p className='col col-form-label'>{VO}</p>
+                </div>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label' >Közelharci támadás</label>
+                    <p className='col col-form-label'>{KozelharciTB.map(SignedNumberToText).join(" / ")}</p>
+                </div>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label' >Célzó támadás</label>
+                    <p className='col col-form-label'>{CelzoTB.map(SignedNumberToText).join(" / ")}</p>
+                </div>
+            </div>
+            <div className='col-lg-6'>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label' >Kitartás mentő</label>
+                    <p className='col col-form-label'>{SignedNumberToText(Mentok.kitartas)}</p>
+                </div>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label' >Reflex mentő</label>
+                    <p className='col col-form-label'>{SignedNumberToText(Mentok.reflex)}</p>
+                </div>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label' >Akaraterő mentő </label>
+                    <p className='col col-form-label'>{SignedNumberToText(Mentok.akaratero)}</p>
+                </div>
+            </div>
+        </div>
+    </>
+}
+
+export default MasodlagosErtekek
@@ -0,0 +1,54 @@
+import {Faj2E, SzintKorlatokFajokra} from "../domain-models/faj2E";
+import {Osztaly2E, OsztalyLabel} from "../domain-models/osztaly2E";
+import React from "react";
+
+function MultiClassOsztalySelector2E(props: {
+    faj: Faj2E,
+    osztaly: Osztaly2E,
+    changeOsztaly: (o: Osztaly2E) => void
+    osztalySzint: number
+}) {
+    const {faj, osztaly, changeOsztaly, osztalySzint} = props
+    
+    return <>
+        <div className='row'>
+            <div className="col-lg-6">
+                <div className="row m-md-2">
+                    <label className='col-8 col-sm-6 col-form-label'>Osztály</label>
+                    <div className="col">
+                        <select className="col form-select" value={osztaly}
+                                onChange={(e) => changeOsztaly(e.target.value as Osztaly2E)}>
+                            <optgroup label='Harcos'>
+                                <option value={Osztaly2E.Harcos}>{OsztalyLabel(Osztaly2E.Harcos)}</option>
+                                {SzintKorlatokFajokra(faj)[Osztaly2E.Amazon] > 0 && (
+                                    <option value={Osztaly2E.Amazon}>{OsztalyLabel(Osztaly2E.Amazon)}</option>)}
+                                <option value={Osztaly2E.Barbar}>{OsztalyLabel(Osztaly2E.Barbar)}</option>
+                                <option value={Osztaly2E.Ijasz}>{OsztalyLabel(Osztaly2E.Ijasz)}</option>
+                                <option value={Osztaly2E.Tengeresz}>{OsztalyLabel(Osztaly2E.Tengeresz)}</option>
+                            </optgroup>
+                            <option value={Osztaly2E.Pap}>{OsztalyLabel(Osztaly2E.Pap)}</option>
+                            <option value={Osztaly2E.Tolvaj}>{OsztalyLabel(Osztaly2E.Tolvaj)}</option>
+                            <optgroup label='Varázsló'>
+                                <option value={Osztaly2E.Varazslo}>{OsztalyLabel(Osztaly2E.Varazslo)}</option>
+                                <option value={Osztaly2E.Illuzionista}>{OsztalyLabel(Osztaly2E.Illuzionista)}</option>
+                            </optgroup>
+                            <optgroup label='Opcionális'>
+                                <option value={Osztaly2E.Dalnok}>{OsztalyLabel(Osztaly2E.Dalnok)}</option>
+                                {/* Druida nem lehet tobb osztalyu karakter! */}
+                                <option value={Osztaly2E.Vandor}>{OsztalyLabel(Osztaly2E.Vandor)}</option>
+                            </optgroup>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div className="col-lg-6">
+                <div className="row m-2">
+                    <label className='col-sm-6 col-8 col-form-label'>Új {OsztalyLabel(osztaly)} szint{' '}</label>
+                    <span className='col col-form-label'>{osztalySzint}</span>
+                </div>
+            </div>
+        </div>
+    </>
+}
+
+export default MultiClassOsztalySelector2E
@@ -0,0 +1,75 @@
+import React from "react";
+import {
+    Osztaly2E,
+    OsztalyDescription,
+    OsztalyLabel,
+    OsztalyProperties,
+    OsztalySpecialSkills
+} from "../domain-models/osztaly2E";
+import {Faj2E, SzintKorlatokFajokra} from "../domain-models/faj2E";
+
+function OsztalySelector2E(props: {
+    currentFaj: Faj2E,
+    currentOsztaly: Osztaly2E,
+    changeOsztaly: (newOsztaly: Osztaly2E) => void
+}) {
+    const {currentFaj, currentOsztaly, changeOsztaly} = props;
+
+    return <>
+        <div className='row m-2'>
+            <label className='col-md-2 col-sm-3 col-form-label'>Osztály</label>
+            <select className="col form-select" value={currentOsztaly}
+                    onChange={(e) => changeOsztaly(e.target.value as Osztaly2E)}>
+                <optgroup label='Harcos'>
+                    <option value={Osztaly2E.Harcos}>{OsztalyLabel(Osztaly2E.Harcos)}</option>
+                    {SzintKorlatokFajokra(currentFaj)[Osztaly2E.Amazon] > 0 && (
+                        <option value={Osztaly2E.Amazon}>{OsztalyLabel(Osztaly2E.Amazon)}</option>)}
+                    <option value={Osztaly2E.Barbar}>{OsztalyLabel(Osztaly2E.Barbar)}</option>
+                    <option value={Osztaly2E.Ijasz}>{OsztalyLabel(Osztaly2E.Ijasz)}</option>
+                    <option value={Osztaly2E.Tengeresz}>{OsztalyLabel(Osztaly2E.Tengeresz)}</option>
+                </optgroup>
+                <option value={Osztaly2E.Pap}>{OsztalyLabel(Osztaly2E.Pap)}</option>
+                <option value={Osztaly2E.Tolvaj}>{OsztalyLabel(Osztaly2E.Tolvaj)}</option>
+                <optgroup label='Varázsló'>
+                    <option value={Osztaly2E.Varazslo}>{OsztalyLabel(Osztaly2E.Varazslo)}</option>
+                    <option value={Osztaly2E.Illuzionista}>{OsztalyLabel(Osztaly2E.Illuzionista)}</option>
+                </optgroup>
+                <optgroup label='Opcionális'>
+                    <option value={Osztaly2E.Dalnok}>{OsztalyLabel(Osztaly2E.Dalnok)}</option>
+                    <option value={Osztaly2E.Druida}>{OsztalyLabel(Osztaly2E.Druida)}</option>
+                    <option value={Osztaly2E.Vandor}>{OsztalyLabel(Osztaly2E.Vandor)}</option>
+                </optgroup>
+            </select>
+        </div>
+        <div className='row m-2'>
+        <label className='col-md-2 col-sm-3 form-label'></label>
+            <div className='col'>
+                <p className='row pt-2'>
+                    {OsztalyDescription(currentOsztaly)}
+                </p>
+                <ul>
+                    {OsztalyProperties(currentOsztaly).map(((special, i) => (<li key={currentOsztaly + i}>{special}</li>)))}
+                </ul>
+                <div className='col'>
+                    {OsztalySpecialSkills(currentOsztaly).map(skill =>
+                        <div key={skill.Id} >
+                            <strong className='d-inline'>
+                                {skill.Name}
+                            </strong>
+                            {' '}
+                            {skill.Description}
+                            {skill.ExtendedDescription && (
+                                <ol>
+                                    {skill.ExtendedDescription.map((ext, i) =>
+                                        (<li key={skill.Id + '-' + i}>{ext}</li>))}
+                                </ol>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    </>
+}
+
+export default OsztalySelector2E;
@@ -0,0 +1,52 @@
+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
+}) {
+    const {
+        tulajdonsag,
+        changeValue,
+        currentFaj,
+        currentValue,
+        fajiModosito,
+        tooLowError,
+        tooHighError,
+    } = 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))} />
+        </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;
@@ -0,0 +1,37 @@
+import React from "react";
+import {
+    KarakterTulajdonsagok,
+    Modifier,
+    Tulajdonsag2E,
+    TulajdonsagIDs,
+    TulajdonsagLabel
+} from "../domain-models/tulajdonsag2E";
+import {SignedNumberToText} from "../../shared/components/Helpers";
+
+function TulajdonsagNoveles(props: {tulajdonsagok: KarakterTulajdonsagok, tulajdonsagNoveles: Tulajdonsag2E, changeTulajdonsagNoveles: (tulajdonsag: Tulajdonsag2E) => void}) {
+    const {tulajdonsagok, tulajdonsagNoveles, changeTulajdonsagNoveles} = props
+    return <>
+        <div className='row'>
+            <div className='col-lg-6'>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label'>Tulajdonság növelés{' '}</label>
+                    <div className='col'>
+                        <select className='form-select' value={tulajdonsagNoveles} onChange={(e) => changeTulajdonsagNoveles(e.target.value as Tulajdonsag2E)}>
+                            {TulajdonsagIDs.filter(t => t === tulajdonsagNoveles || tulajdonsagok[t] < 18).map(t => (
+                                <option value={t} key={t}>{TulajdonsagLabel(t)}</option>
+                            ))}
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div className='col-lg-6'>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label'>Új {TulajdonsagLabel(tulajdonsagNoveles)}{' '}</label>
+                    <span className='col col-form-label'>{tulajdonsagok[tulajdonsagNoveles]} ({SignedNumberToText(Modifier(tulajdonsagok[tulajdonsagNoveles]))})</span>
+                </div>
+            </div>
+        </div>
+    </>
+}
+
+export default TulajdonsagNoveles
@@ -0,0 +1,83 @@
+import React from "react";
+import {
+    KarakterTulajdonsagok,
+    RollAllAbilities,
+    Tulajdonsag2E,
+} from "../domain-models/tulajdonsag2E";
+import TulajdonsagInput from "./TulajdonsagInput2E";
+import {Faj2E, TulajdonsagModositokFajokra} from "../domain-models/faj2E";
+
+function Tulajdonsagok(props: {
+    currentFaj: Faj2E,
+    tulajdonsagok: KarakterTulajdonsagok
+    changeTulajdonsagok: (tulajdonsagok: KarakterTulajdonsagok) => void
+}) {
+    const {currentFaj, tulajdonsagok, changeTulajdonsagok} = props
+    return <>
+        <div className='row'>
+            <h5 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h5>
+            <div className='col-sm-2 m-2'>
+                <button className='btn btn-dark' type='button'
+                        onClick={() => changeTulajdonsagok(RollAllAbilities())}>Dobás
+                </button>
+            </div>
+        </div>
+        <TulajdonsagInput
+            tulajdonsag='Erő'
+            currentValue={tulajdonsagok.t_ero}
+            currentFaj={currentFaj}
+            fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag2E.Ero)}
+            changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_ero: val})}
+            tooLowError='Túl gyenge vagy, nem bírtad felemelni a kezed a jelentkezéshez!'
+            tooHighError='Szét szakadtak az izmaid!'
+        />
+        <TulajdonsagInput
+            tulajdonsag='Ügyesség'
+            currentValue={tulajdonsagok.t_ugy}
+            currentFaj={currentFaj}
+            fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag2E.Ugyesseg)}
+            changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_ugy: val})}
+            tooLowError='Orrabuktál jelentkezés helyett!'
+            tooHighError='Emberfeletti zsonglörködésedre záptojással válaszoltak a helyiek!'
+        />
+        <TulajdonsagInput
+            tulajdonsag='Egészség'
+            currentValue={tulajdonsagok.t_egs}
+            currentFaj={currentFaj}
+            fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag2E.Egeszseg)}
+            changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_egs: val})}
+            tooLowError='Túl beteg vagy ahhoz, hogy kalandozni menj!'
+            tooHighError='Kicsattanó egészségedet csak a diambroid állíthatja meg, minő véletlen, hogy pont az arcodba robbant...'
+        />
+        <TulajdonsagInput
+            tulajdonsag='Intelligencia'
+            currentValue={tulajdonsagok.t_int}
+            currentFaj={currentFaj}
+            fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag2E.Intelligencia)}
+            changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_int: val})}
+            tooLowError='Elfelejtetted, hogy mikor is kéne kalandozni indulni!'
+            tooHighError='Ilyen tudás és logika birtokában mi szükséged van új információkra? Mindent le tudsz vezetni a már meglévő ismereteidből, és ezt azonnal beláttad.'
+        />
+        <TulajdonsagInput
+            tulajdonsag='Bölcsesség'
+            currentValue={tulajdonsagok.t_bol}
+            currentFaj={currentFaj}
+            fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag2E.Bolcsesseg)}
+            changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_bol: val})}
+            tooLowError='Nem bírtál ellenállni a kíváncsiságodnak, hogy közelebbről is megvizsgáld a tőr hegyét. Nagyon közelről.'
+            tooHighError='Hatalmas bölcsességedben beláttad a kalandozás veszélyeit és inkább más tevékenységbe fogtál.'
+        />
+        <TulajdonsagInput
+            tulajdonsag='Karizma'
+            currentValue={tulajdonsagok.t_kar}
+            currentFaj={currentFaj}
+            fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag2E.Karizma)}
+            changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_kar: val})}
+            tooLowError='Mintha taszítanád az embereket, sose sikerült kalandozó csapatot találnod.'
+            tooHighError='Az ellenkező nem tagjai nem engedték, hogy útnak indulj.'
+        />
+
+    </>
+}
+
+export default Tulajdonsagok