level 3 maybe?

src/components/BasicNewLevel.tsx

@@ -27,18 +27,26 @@ function UjMento(props : {tipus: MentoTipus, ujMentok: Mentok, regiMentok: Mento
     </div>;
 }
 
-function Level2(props: {
+function BasicNewLevel(props: {
     karakter: KarakterInputs
-    rolledHP: number
+    szint: number
     changeRolledHP: (hp: number) => void,
 }) {
-    const {karakter, changeRolledHP} = props
+    const {karakter, szint, changeRolledHP} = props
-    const regiMentok = MentokTotal({...karakter, szint: karakter.szint - 1})
+    const regiMentok = MentokTotal({...karakter, szint: szint - 1})
-    const ujMentok = MentokTotal(karakter)
+    const ujMentok = MentokTotal({...karakter, szint: szint})
+
+    const regiTB = TamadasBonusz(karakter.osztaly, szint-1)
+    const ujTB = TamadasBonusz(karakter.osztaly, szint)
+    if (regiTB.length < ujTB.length) {
+        regiTB.push(0)
+    }
+    const TBdiff = ujTB.map((x, i) => x - regiTB[i])
+    const isTBincreased = TBdiff.some(x => x > 0)
 
     return <>
         <div className='row'>
-            <h5 className='col align-self-center'>2. Szint</h5>
+            <h5 className='col align-self-center'>{szint}. Szint</h5>
         </div>
         <div className='row'>
             <div className='col-lg-6'>
@@ -49,16 +57,16 @@ function Level2(props: {
                             className='form-control'
                             maxLength={2}
                             type='number'
-                            value={karakter.HProlls[0]}
+                            value={karakter.HProlls[szint-2] || 1}
                             min={1}
                             max={12}
                             onChange={e => changeRolledHP(Number(e.target.value))} />
                     </div>
                 </div>
-                <div className='row m-2'>
+                { 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'>+1</span>
+                    <span className='col col-form-label'>{TBdiff.map(SignedNumberToText).join(" / ")}</span>
-                </div>
+                </div>}
                 <MentoNovekedes tipus={'kitartas'} ujMentok={ujMentok} regiMentok={regiMentok} />
                 <MentoNovekedes tipus={'reflex'} ujMentok={ujMentok} regiMentok={regiMentok} />
                 <MentoNovekedes tipus={'akaratero'} ujMentok={ujMentok} regiMentok={regiMentok} />
@@ -66,12 +74,12 @@ function Level2(props: {
             <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)}</span>
+                    <span className='col col-form-label'>{HP({...karakter, HProlls: karakter.HProlls.slice(0, szint-1)})}</span>
                 </div>
-                <div className='row m-2'>
+                {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'>{TamadasBonusz(karakter.osztaly, karakter.szint).map(SignedNumberToText).join("/")}</span>
+                    <span className='col col-form-label'>{ujTB.map(SignedNumberToText).join(" / ")}</span>
-                </div>
+                </div>}
                 <UjMento tipus={'kitartas'} ujMentok={ujMentok} regiMentok={regiMentok} />
                 <UjMento tipus={'reflex'} ujMentok={ujMentok} regiMentok={regiMentok} />
                 <UjMento tipus={'akaratero'} ujMentok={ujMentok} regiMentok={regiMentok} />
@@ -80,4 +88,4 @@ function Level2(props: {
     </>
 }
 
-export default Level2
+export default BasicNewLevel

src/components/KarakterKepzettsegek.tsx

@@ -6,13 +6,8 @@ import {
     KepzettsegId,
     TolvajKepzettsegList,
 } from "../domain-models/kepzettsegek";
+import {arraySetN} from "../util";
 
-function arraySetN<T>(array: T[], n: number, elem: T): T[] {
-    if (array.length < n || n < 0) {
-        return array
-    }
-    return [...array.slice(0, n), elem, ...array.slice(n+1)]
-}
 
 function InternalKepzettsegekSelector(props: {
     title: string,
@@ -39,8 +34,6 @@ function InternalKepzettsegekSelector(props: {
         })
     }
 
-    console.log(preCalculated)
-
     return <>
         <div className='row'>
             <div className='col-lg-2 col-md-12'>
@@ -61,7 +54,6 @@ function InternalKepzettsegekSelector(props: {
 
 }
 
-
 function KarakterKepzettsegek (props: {
     availableKepzettsegList: Kepzettseg[],
     numberOfKepzettsegek: number

src/components/MasodlagosErtekek.tsx

@@ -12,7 +12,8 @@ function MasodlagosErtekek(props: MasodlagosErtekekView) {
             <strong>Hentelési Potenciál</strong>
         </Tooltip>
     );
-    //const mentok = karakter.MentokTulajdonsaggal(1)
+
+    console.log(Mentok)
 
     return <>
         <div className='row'>

src/components/OsztalySelector.tsx

@@ -44,7 +44,7 @@ function OsztalySelector(props: {currentFaj: Faj, currentOsztaly: Osztaly, chang
                 </ul>
                 <div className='col'>
                     {OsztalySpecialSkills(currentOsztaly).map(skill =>
-                        <p key={skill.Id} >
+                        <div key={skill.Id} >
                             <strong className='d-inline'>
                                 {skill.Name}
                             </strong>
@@ -56,7 +56,7 @@ function OsztalySelector(props: {currentFaj: Faj, currentOsztaly: Osztaly, chang
                                         (<li key={skill.Id + '-' + i}>{ext}</li>))}
                                 </ul>
                             )}
-                        </p>
+                        </div>
                     )}
                 </div>
             </div>

src/domain-models/kepzettsegek.ts

@@ -216,15 +216,15 @@ export function AvailableKezpettsegList(osztaly: Osztaly): Kepzettseg[] {
 
 export 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
+        console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg)
     }
     if (numberOfKepzettseg > max) {
         numberOfKepzettseg = max
+        console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg)
     }
-    console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg)
     return numberOfKepzettseg;
 }
 

src/domain-models/mentok.ts

@@ -54,6 +54,7 @@ export function ElsodlegesMentok(osztaly: Osztaly) : MentoTipus[] {
 
 export function MentokAlap(osztaly: Osztaly, szint: number = 1) {
     const elsodlegesek = ElsodlegesMentok(osztaly)
+    console.log(elsodlegesek)
     return {
         kitartas: elsodlegesek.includes('kitartas') ? ElsodlegesMento(szint) : MasodlagosMento(szint),
         reflex: elsodlegesek.includes('reflex') ? ElsodlegesMento(szint) : MasodlagosMento(szint),
@@ -74,7 +75,7 @@ export function MentokTotal(karakter: Pick<KarakterInputs, 'osztaly' | 'szint' |
     const modositok = MentoModositok(TulajdonsagModosito(karakter.tulajdonsagok))
     return {
         kitartas: alap.kitartas + modositok.kitartas,
-        reflex: alap.kitartas + modositok.kitartas,
+        reflex: alap.reflex + modositok.reflex,
         akaratero: alap.akaratero + modositok.akaratero,
     }
 }

src/pages/CreateCharacter.tsx

@@ -15,10 +15,11 @@ import {
 } from "../domain-models/kepzettsegek";
 import {CreatePDF} from "../pdf/character.pdf";
 import {KarakterDefaults} from "../domain-models/karakter";
-import Level2 from "../components/Level2";
+import BasicNewLevel from "../components/BasicNewLevel";
 import {dAny} from "../domain-models/kockak";
 import {BaseHP, CalculateMasodlagosErtekek} from "../domain-models/masodlagos_ertekek";
 import {KarakterInputToPdfView} from "../pdf/karakter_pdf_view";
+import {arraySetN} from "../util";
 
 function CreateCharacterPage() {
 
@@ -44,13 +45,11 @@ function CreateCharacterPage() {
         changeKarakter({...karakter, szint: karakter.szint - 1, HProlls: karakter.HProlls.slice(0, -1)})
     }
 
-    function chageLevel2HProll(newHProll: number) {
+    const changeHProllAtSzint = (szint: number) => (newHProll: number) => {
-        changeKarakter({...karakter, HProlls: [newHProll, ...karakter.HProlls.slice(1)]})
+        changeKarakter({...karakter, HProlls: arraySetN(karakter.HProlls, szint-2, newHProll)})
         console.log(karakter)
     }
 
-    const masodlagosErtekek = CalculateMasodlagosErtekek({...karakter, szint: 1, HProlls: []})
-
     return (
         <div>
             <div className='container-fluid p-5 bg-black text-white text-center'>
@@ -116,12 +115,14 @@ function CreateCharacterPage() {
                     />
 
                     <hr />
-                    <MasodlagosErtekek {...masodlagosErtekek} />
+                    <MasodlagosErtekek {...CalculateMasodlagosErtekek({...karakter, szint: 1, HProlls: []})} />
 
-                    {karakter.szint > 1 && <Level2 karakter={{...karakter}} rolledHP={karakter.HProlls[0]} changeRolledHP={chageLevel2HProll} /> }
+                    {karakter.szint > 1 && <BasicNewLevel karakter={{...karakter}} szint={2} key='level-2' changeRolledHP={changeHProllAtSzint(2)} /> }
+
+                    {karakter.szint > 2 && <BasicNewLevel karakter={{...karakter}} szint={3} key='level-3' changeRolledHP={changeHProllAtSzint(3)} /> }
 
                     <div className='d-grid gap-2 m-5'>
-                        {karakter.szint < 2 && <button className='btn btn-dark btn-lg' type='button' onClick={levelUp}>Szintlépés! ⇧</button> }
+                        {karakter.szint < 3 && <button className='btn btn-dark btn-lg' type='button' onClick={levelUp}>Szintlépés! ⇧</button> }
                         {karakter.szint > 1 && <button className='btn btn-dark btn-lg' type='button' onClick={levelDown}>Visszalépés! ⇩</button> }
                     </div>
 

src/util.ts

@@ -0,0 +1,6 @@
+export function arraySetN<T>(array: T[], n: number, elem: T): T[] {
+    if (array.length < n || n < 0) {
+        return array
+    }
+    return [...array.slice(0, n), elem, ...array.slice(n+1)]
+}