WIP basic level up

src/components/Level2.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import {Osztaly} from "../domain-models/osztaly";
+import {SignedNumberToText} from "./Helpers";
+import {Modifier} from "../domain-models/tulajdonsag";
+
+function Level2(props: {
+    osztaly: Osztaly
+    rolledHP: number
+    t_egs: number
+}) {
+    const {osztaly, rolledHP, t_egs} = props
+    return <>
+        <div className='row'>
+            <h5 className='col align-self-center'>2. Szint</h5>
+        </div>
+        <div className='row'>
+            <div className='col-lg-4'>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label'>Extra Életerő{' '}</label>
+                    <span className='col col-form-label'>{SignedNumberToText(rolledHP + Modifier(t_egs))}</span>
+                </div>
+            </div>
+            <div className='col-lg-4'>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label'>Támadás bónusz{' '}</label>
+                    <span className='col col-form-label'>+1</span>
+                </div>
+            </div>
+            <div className='col-lg-4'>
+                <div className='row m-2'>
+                    <label className='col-sm-6 col-8 col-form-label'>Elsődleges mentő{' '}</label>
+                    <span className='col col-form-label'>+1</span>
+                </div>
+            </div>
+        </div>
+    </>
+}
+
+export default Level2

src/components/MasodlagosErtekek.tsx

@@ -26,33 +26,33 @@ function MasodlagosErtekek(props: {ertekek: KarakterMasodlagosErtekek}) {
                                 <span>(HP)</span>
                             </OverlayTrigger>
                         </label>
-                    <p className='col'>{ertekek.HP}</p>
+                    <p className='col col-form-label'>{ertekek.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'>{ertekek.VO}</p>
+                    <p className='col col-form-label'>{ertekek.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'>{SignedNumberToText(ertekek.KozelHarciTB)}</p>
+                    <p className='col col-form-label'>{SignedNumberToText(ertekek.KozelHarciTB)}</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'>{SignedNumberToText(ertekek.CelzoTB)}</p>
+                    <p className='col col-form-label'>{SignedNumberToText(ertekek.CelzoTB)}</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'>{SignedNumberToText(ertekek.KitartasMento)}</p>
+                    <p className='col col-form-label'>{SignedNumberToText(ertekek.KitartasMento)}</p>
                 </div>
                 <div className='row m-2'>
                     <label className='col-sm-6 col-8 col-form-label' >Reflex mentő</label>
-                    <p className='col'>{SignedNumberToText(ertekek.ReflexMento)}</p>
+                    <p className='col col-form-label'>{SignedNumberToText(ertekek.ReflexMento)}</p>
                 </div>
                 <div className='row m-2'>
                     <label className='col-sm-6 col-8 col-form-label' >Akaraterő mentő </label>
-                    <p className='col'>{SignedNumberToText(ertekek.AkarateroMento)}</p>
+                    <p className='col col-form-label'>{SignedNumberToText(ertekek.AkarateroMento)}</p>
                 </div>
             </div>
         </div>

src/domain-models/karakter.ts

@@ -2,7 +2,7 @@ import {Faj} from "./faj";
 import {Osztaly} from "./osztaly";
 import {KarakterTulajdonsagok, Modifier} from "./tulajdonsag";
 import {CalculateMasodlagosErtekek, KarakterMasodlagosErtekek} from "./masodlagos_ertekek";
-import {Kepzettseg} from "./kepzettsegek";
+import {Kepzettseg, Kepzettsegek, KepzettsegId} from "./kepzettsegek";
 
 export interface Karakter {
     Name: string
@@ -13,7 +13,6 @@ export interface Karakter {
     Osztaly: Osztaly
     Tulajdonsagok: KarakterTulajdonsagok,
     Szint: number
-    MasodlagosErtekek: KarakterMasodlagosErtekek
     HP: () => number
     VO: () => number
     Mozgas: () => number
@@ -27,6 +26,20 @@ export interface Karakter {
     TolvajKepzettsegek: Kepzettseg[]
 }
 
+export interface KarakterInputs {
+    name: string,
+    nem?: string,
+    kor: number,
+    isten?: string,
+    faj: Faj,
+    osztaly: Osztaly,
+    tulajdonsagok: KarakterTulajdonsagok,
+    kepzettsegek: KepzettsegId[],
+    tolvajKepzettsegek?: KepzettsegId[]
+    szint: number
+    HProlls: number[],
+}
+
 export class KarakterClass implements Karakter {
 
     public Name : string
@@ -37,31 +50,23 @@ export class KarakterClass implements Karakter {
     public Osztaly : Osztaly
     public Tulajdonsagok : KarakterTulajdonsagok
     public Szint : number = 1
-    public MasodlagosErtekek : KarakterMasodlagosErtekek
     public Kepzettsegek: Kepzettseg[]
     public TolvajKepzettsegek: Kepzettseg[]
 
-    constructor(
+    private MasodlagosErtekek : KarakterMasodlagosErtekek
-        name: string,
+
-        nem: string,
+    constructor(inputs: KarakterInputs) {
-        kor: number,
+        this.Name = inputs.name
-        isten: string,
+        this.Nem = inputs.nem || ""
-        faj: Faj,
+        this.Kor = inputs.kor
-        osztaly: Osztaly,
+        this.Isten = inputs.isten || ""
-        tulajdonsagok: KarakterTulajdonsagok,
+        this.Faj = inputs.faj
-        kepzettsegek: Kepzettseg[],
+        this.Osztaly = inputs.osztaly
-        tolvajKepzettsegek: Kepzettseg[] = []
+        this.Tulajdonsagok = inputs.tulajdonsagok
-    ) {
+        this.MasodlagosErtekek = CalculateMasodlagosErtekek(inputs.osztaly, inputs.tulajdonsagok)
-        this.Name = name
+        this.Kepzettsegek = inputs.kepzettsegek.map(k => Kepzettsegek[k])
-        this.Nem = nem
+        this.TolvajKepzettsegek = (inputs.tolvajKepzettsegek || []).map(k => Kepzettsegek[k])
-        this.Kor = kor
+        this.Szint = inputs.szint
-        this.Isten = isten
-        this.Faj = faj
-        this.Osztaly = osztaly
-        this.Tulajdonsagok = tulajdonsagok
-        this.MasodlagosErtekek = CalculateMasodlagosErtekek(osztaly, tulajdonsagok)
-        this.Kepzettsegek = kepzettsegek
-        this.TolvajKepzettsegek = tolvajKepzettsegek
     }
 
     public HP = () => this.MasodlagosErtekek.HP

src/pages/CreateCharacter.tsx

@@ -8,10 +8,11 @@ import OsztalySelector from "../components/OsztalySelector";
 import KarakterKepzettsegek from "../components/KarakterKepzettsegek";
 import {KarakterTulajdonsagok, Modifier} from "../domain-models/tulajdonsag";
 import MasodlagosErtekek from "../components/MasodlagosErtekek";
-import {AvailableKezpettsegList, Kepzettsegek, KepzettsegId, TolvajKepzettsegList} from "../domain-models/kepzettsegek";
+import {AvailableKezpettsegList, TolvajKepzettsegList} from "../domain-models/kepzettsegek";
 import {CalculateMasodlagosErtekek} from "../domain-models/masodlagos_ertekek";
 import {CreatePDF} from "../pdf/character.pdf";
-import {KarakterClass} from "../domain-models/karakter";
+import {KarakterClass, KarakterInputs} from "../domain-models/karakter";
+import Level2 from "../components/Level2";
 
 const tulajdonsagDefaults: KarakterTulajdonsagok = {
     t_ero: 10,
@@ -22,6 +23,17 @@ const tulajdonsagDefaults: KarakterTulajdonsagok = {
     t_kar: 10,
 }
 
+const karakterDefaults: KarakterInputs = {
+    name: "Névtelen Kalandozó",
+    faj: Faj.Ember,
+    kor: 20,
+    tulajdonsagok: tulajdonsagDefaults,
+    osztaly: Osztaly.Harcos,
+    kepzettsegek: [],
+    szint: 1,
+    HProlls: [],
+}
+
 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)
@@ -38,38 +50,25 @@ function getNumberOfKepzettsegek(t_int: number, faj: Faj, max: number) {
 
 function CreateCharacterPage() {
 
-    let [name, changeName] = useState<string>("Névtelen kalandozó")
+    let [karakter, changeKarakter] = useState(karakterDefaults)
-    let [nem, changeNem] = useState<string>("")
-    let [kor, changeKor] = useState<number>(20)
-    let [isten, changeIsten] = useState<string>("")
-    let [faj, changeFaj] = useState(Faj.Ember)
-    let [tulajdonsagok, changeTulajdonsagok] = useState(tulajdonsagDefaults)
-    let [osztaly, changeOsztaly] = useState<Osztaly>(Osztaly.Harcos)
-    let [kepzettsegek, changeKepzettsegek] = useState<KepzettsegId[]>([])
-    let [tolvajKepzettsegek, changeTolvajKepzettsegek] = useState<KepzettsegId[]>([])
 
-    const availableKepzettsegList = AvailableKezpettsegList(osztaly)
+    const availableKepzettsegList = AvailableKezpettsegList(karakter.osztaly)
 
-    if (osztaly !== Osztaly.Tolvaj && tolvajKepzettsegek.length > 0) {
+    if (karakter.osztaly !== Osztaly.Tolvaj && karakter.tolvajKepzettsegek != null) {
-        tolvajKepzettsegek = []
+        changeKarakter({...karakter, tolvajKepzettsegek: undefined})
-        changeTolvajKepzettsegek([])
     }
-    if (osztaly === Osztaly.Tolvaj && tolvajKepzettsegek.length === 0) {
+    if (karakter.osztaly === Osztaly.Tolvaj && (karakter.tolvajKepzettsegek == null || karakter.tolvajKepzettsegek.length === 0)) {
-        tolvajKepzettsegek = TolvajKepzettsegList.slice(0, 4).map(x => x.Id)
+        const tolvajKepzettsegek = TolvajKepzettsegList.slice(0, 4).map(x => x.Id)
-        changeTolvajKepzettsegek(tolvajKepzettsegek)
+        changeKarakter({...karakter, tolvajKepzettsegek: tolvajKepzettsegek})
     }
 
-    const karakter = () => new KarakterClass(
+    function levelUp() {
-        name,
+        changeKarakter({...karakter, szint: karakter.szint + 1, HProlls: [...karakter.HProlls, 1]})
-        nem,
+    }
-        kor,
+
-        isten,
+    function levelDown() {
-        faj,
+        changeKarakter({...karakter, szint: karakter.szint - 1, HProlls: karakter.HProlls.slice(0, karakter.HProlls.length - 1)})
-        osztaly,
+    }
-        tulajdonsagok,
-        kepzettsegek.map(k => Kepzettsegek[k]),
-        osztaly === Osztaly.Tolvaj ? tolvajKepzettsegek.map(k => Kepzettsegek[k]) : []
-    )
 
     return (
         <div>
@@ -84,62 +83,69 @@ function CreateCharacterPage() {
                     <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={name}
+                               value={karakter.name}
-                               onChange={(e) => changeName(e.target.value)}/>
+                               onChange={(e) => changeKarakter({...karakter, name: e.target.value})}/>
-                        {!name && <span className='form-field-error'>A karaktered nem mászkálhat névtelenül a világban!</span>}
+                        {!karakter.name && <span className='form-field-error'>A karaktered nem mászkálhat névtelenül a világban!</span>}
                     </div>
                     <div className='row m-2'>
                         <label className='col-md-2 col-sm-3 col-form-label' >Nem</label>
                         <input className='col form-control'
-                               value={nem}
+                               value={karakter.nem}
-                               onChange={(e) => changeNem(e.target.value)}/>
+                               onChange={(e) => changeKarakter({...karakter, nem: e.target.value})}/>
                     </div>
                     <div className='row m-2'>
                         <label className='col-md-2 col-sm-3 col-form-label' >Kor</label>
                         <input className='col form-control'
-                               value={kor}
+                               value={karakter.kor}
                                type={"number"}
-                               onChange={(e) => changeKor(Number(e.target.value))}/>
+                               onChange={(e) => changeKarakter({...karakter, kor: Number(e.target.value)})}/>
                     </div>
                     <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={isten}
+                               value={karakter.isten}
-                               onChange={(e) => changeIsten(e.target.value)}/>
+                               onChange={(e) => changeKarakter({...karakter, isten: e.target.value})}/>
                     </div>
                     <FajSelector
-                        changeFaj={changeFaj}
+                        changeFaj={(faj: Faj) => changeKarakter({...karakter, faj: faj})}
-                        faj={faj}
+                        faj={karakter.faj}
                     />
                     <hr/>
                     <Tulajdonsagok
-                        currentFaj={faj}
+                        currentFaj={karakter.faj}
-                        tulajdonsagok={tulajdonsagok}
+                        tulajdonsagok={karakter.tulajdonsagok}
-                        changeTulajdonsagok={changeTulajdonsagok}
+                        changeTulajdonsagok={(tul: KarakterTulajdonsagok) => changeKarakter({...karakter, tulajdonsagok: tul})}
                     />
                     <hr />
                     <div className='row'>
                         <h5 className='col align-self-center'>Tanult</h5>
                     </div>
                     <OsztalySelector
-                        currentFaj={faj}
+                        currentFaj={karakter.faj}
-                        currentOsztaly={osztaly}
+                        currentOsztaly={karakter.osztaly}
-                        changeOsztaly={changeOsztaly}
+                        changeOsztaly={(o: Osztaly) => changeKarakter({...karakter, osztaly: o})}
                     />
                     <KarakterKepzettsegek
                         availableKepzettsegList={availableKepzettsegList}
-                        numberOfKepzettsegek={getNumberOfKepzettsegek(tulajdonsagok.t_int, faj, availableKepzettsegList.length)}
+                        numberOfKepzettsegek={getNumberOfKepzettsegek(karakter.tulajdonsagok.t_int, karakter.faj, availableKepzettsegList.length)}
-                        kepzettsegek={kepzettsegek}
+                        kepzettsegek={karakter.kepzettsegek}
-                        changeKepzettsegek={changeKepzettsegek}
+                        changeKepzettsegek={(ks) => changeKarakter({...karakter, kepzettsegek: ks}) }
-                        tolvajKepzettsegek={tolvajKepzettsegek}
+                        tolvajKepzettsegek={karakter.tolvajKepzettsegek || []}
-                        changeTolvajKepzettsegek={changeTolvajKepzettsegek}
+                        changeTolvajKepzettsegek={(tks) => changeKarakter({...karakter, tolvajKepzettsegek: tks})}
                     />
 
                     <hr />
-                    <MasodlagosErtekek ertekek={CalculateMasodlagosErtekek(osztaly, tulajdonsagok)} />
+                    <MasodlagosErtekek ertekek={CalculateMasodlagosErtekek(karakter.osztaly, karakter.tulajdonsagok)} />
+
+                    {karakter.szint > 1 && <Level2 osztaly={karakter.osztaly} rolledHP={karakter.HProlls[0]} t_egs={karakter.tulajdonsagok.t_egs} /> }
 
                     <div className='d-grid gap-2 m-5'>
-                        <button className='btn btn-danger btn-lg' type='button' onClick={async () =>  await CreatePDF(karakter())}>Létrehozás</button>
+                        {karakter.szint < 2 && <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>
+
+                    <div className='d-grid gap-2 m-5'>
+                        <button className='btn btn-danger btn-lg' type='button' onClick={async () =>  await CreatePDF(new KarakterClass(karakter))}>Létrehozás</button>
                     </div>
                 </form>
             </div>