fix multiclass level up display

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

@@ -7,7 +7,9 @@ import {arraySetN} from "../../util";
 import {Osztaly2E} from "../domain-models/osztaly2E";
 import KalozKritikus from "./KalozKritikus";
 import HarcosFegyverSpecializacio from "./HarcosFegyverSpec";
-import {BasicOsztalySelector2E} from "./OsztalySelector2E";
+
+import MultiClassOsztalySelector2E from "./MultiClassOsztalySelector2E";
+import {getClassLevels} from "../domain-models/szintlepes";
 
 function LevelUp(props: {
     szint: number,
@@ -30,8 +32,10 @@ function LevelUp(props: {
         changeOsztaly
     } = props
 
-    const harcosSzint = karakter.szintlepesek.filter(x => x.osztaly === Osztaly2E.Harcos).length
+    const classLevels = getClassLevels(karakter.szintlepesek)
-    const kalozSzint = karakter.szintlepesek.filter(x => x.osztaly === Osztaly2E.Tengeresz).length
+    
+    const harcosSzint = classLevels[Osztaly2E.Harcos]
+    const kalozSzint = classLevels[Osztaly2E.Tengeresz]
     const specialization = karakter.szintlepesek[szint-1].harcosFegyver
     const krit = karakter.szintlepesek[szint-1].kalozKritikus
     
@@ -39,13 +43,19 @@ function LevelUp(props: {
         <div className='row mt-3'>
             <h5 className='col align-self-center'>{szint}. Szint</h5>
         </div>
-        <BasicOsztalySelector2E faj={karakter.faj} osztaly={osztaly} changeOsztaly={changeOsztaly} />
+        {osztaly !== Osztaly2E.Druida && 
-        {szint % 4 === 0 
+            <MultiClassOsztalySelector2E 
-            && <TulajdonsagNoveles
+                faj={karakter.faj} 
-            tulajdonsagok={karakter.tulajdonsagok}
+                osztaly={osztaly}
-            tulajdonsagNoveles={karakter.szintlepesek[szint-1].tulajdonsagNoveles!}
+                changeOsztaly={changeOsztaly}
-            changeTulajdonsagNoveles={changeTulajdonsagNoveles}
+                osztalySzint={classLevels[osztaly]}
-        />}
+            /> }
+        {szint % 4 === 0 && 
+            <TulajdonsagNoveles
+                tulajdonsagok={karakter.tulajdonsagok}
+                tulajdonsagNoveles={karakter.szintlepesek[szint-1].tulajdonsagNoveles!}
+                changeTulajdonsagNoveles={changeTulajdonsagNoveles}
+            /> }
         <BasicNewLevel
             szint={szint}
             karakter={karakter}
@@ -60,9 +70,9 @@ function LevelUp(props: {
                 szint={harcosSzint}
             />
         }
-        {osztaly === Osztaly2E.Tengeresz && kalozSzint % 3 === 0 && !!krit &&
+        {osztaly === Osztaly2E.Tengeresz && kalozSzint % 3 === 0 &&
             <KalozKritikus
-                kritFegyverId={krit}
+                kritFegyverId={krit!}
                 existingKrits={karakter.szintlepesek.map(x => x.kalozKritikus)}
                 changeKrit={changeKalozKritikus}
                 szint={kalozSzint}

Kemkas.Web/frontend/src/second-edition/components/MultiClassOsztalySelector2E.tsx

@@ -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

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

@@ -8,16 +8,21 @@ import {
 } from "../domain-models/osztaly2E";
 import {Faj2E, SzintKorlatokFajokra} from "../domain-models/faj2E";
 
-export function BasicOsztalySelector2E(props: {faj: Faj2E, osztaly: Osztaly2E, changeOsztaly: (osztaly: Osztaly2E) => void}) {
+function OsztalySelector2E(props: {
-    const {faj, osztaly, changeOsztaly} = 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={osztaly}
+            <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(faj)[Osztaly2E.Amazon] > 0 && (
+                    {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>
@@ -36,18 +41,6 @@ export function BasicOsztalySelector2E(props: {faj: Faj2E, osztaly: Osztaly2E, c
                 </optgroup>
             </select>
         </div>
-    </>
-}
-
-function OsztalySelector2E(props: {
-    currentFaj: Faj2E,
-    currentOsztaly: Osztaly2E,
-    changeOsztaly: (newOsztaly: Osztaly2E) => void
-}) {
-    const {currentFaj, currentOsztaly, changeOsztaly} = props;
-
-    return <>
-        <BasicOsztalySelector2E faj={currentFaj} osztaly={currentOsztaly} changeOsztaly={changeOsztaly} />
         <div className='row m-2'>
         <label className='col-md-2 col-sm-3 form-label'></label>
             <div className='col'>

Kemkas.Web/frontend/src/second-edition/domain-models/szintlepes.ts

@@ -56,8 +56,7 @@ export function LevelUp(karakter: Karakter2E, changeKarakter: (input: Karakter2E
             szintlepes.kalozKritikus = AllowedFegyver(Osztaly2E.Tengeresz).filter(specializationFilter)[0].Id
         }
     }
-    console.log(`picked harcos specializacio ${szintlepes.harcosFegyver}`)
+
-    console.log(`picked kaloz krit ${szintlepes.kalozKritikus}`)
     changeKarakter({...karakter, szint, szintlepesek: [...karakter.szintlepesek, szintlepes]})
 }
 
@@ -69,3 +68,32 @@ export function LevelDown(karakter: Karakter2E, changeKarakter: (input: Karakter
         console.error(`Can't level down character: ${karakter}`)
     }
 }
+
+export type ClassLevels = {
+    [key in Osztaly2E]: number;
+};
+
+const defaultClassLevels: ClassLevels = {
+    [Osztaly2E.Amazon]: 0,
+    [Osztaly2E.Barbar]: 0,
+    [Osztaly2E.Ijasz]: 0,
+    [Osztaly2E.Harcos]: 0,
+    [Osztaly2E.Tengeresz]: 0,
+    
+    [Osztaly2E.Tolvaj]: 0,
+    [Osztaly2E.Pap]: 0,
+
+    [Osztaly2E.Varazslo]: 0,
+    [Osztaly2E.Illuzionista]: 0,
+
+    [Osztaly2E.Dalnok]: 0,
+    [Osztaly2E.Druida]: 0,
+    [Osztaly2E.Vandor]: 0,
+}
+
+export function getClassLevels(szintlepesek: Szintlepes[]) : ClassLevels {
+    return szintlepesek.map(x => x.osztaly).reduce((classLevels, osztaly) => {
+        classLevels[osztaly]++
+        return classLevels
+    }, {...defaultClassLevels})
+}