wip: add pancel ui

src/components/Felszereles.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { KarakterFelszereles, PancelTypes, PancelTypeLabel } from "../domain-models/felszereles";
+import pancelok from '../domain-models/pancel.json'
+import pajzsok from '../domain-models/pajzs.json'
+
+function Felszereles(props: {felszereles: KarakterFelszereles, changeFelszereles: (felszereles: KarakterFelszereles) => void}) {
+    const { felszereles, changeFelszereles } = props;
+    return <>
+        <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>
+                {
+                    PancelTypes.map(pancelType => (
+                        <optgroup label={PancelTypeLabel(pancelType)}>
+                            {pancelok[pancelType].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>
+                {pajzsok['pajzs'].map(p => <option key={p.ID} value={p.ID}>{`${p.Name} (+${p.VO} VO) - ${p.Price} at`}</option>)}
+            </select>
+        </div>
+    </>
+}
+
+export default Felszereles

src/domain-models/felszereles.ts

@@ -0,0 +1,58 @@
+import pancel from "./pancel.json"
+
+export type PancelType = keyof typeof pancel
+
+export const PancelTypes: PancelType[] = ['konnyu', 'kozepes', 'nehez']
+
+export interface Pancel {
+    ID: string,
+    Name: string,
+    Type: 'konnyu' | 'kozepes' | 'nehez'
+    VO: number,
+    Price: number,
+}
+
+export interface Pajzs {
+    ID: string,
+    Name: string,
+    Type: 'pajzs'
+    VO: number,
+    Price: number,
+}
+
+export interface Fegyver {
+    ID: string,
+    Name: string,
+    Range: 'kozelharci' | 'tavolsagi'
+    Ketkezes: boolean,
+    Egzotikus: boolean,
+    Rohamtoro: boolean, 
+}
+
+export interface KarakterFelszereles {
+    pancelID?: string
+    pajzsID?: string
+    FegyverIDk: string[]
+}
+
+export const DefaultFelszereles: KarakterFelszereles = {
+    FegyverIDk: [],
+}
+
+export function PancelTypeLabel(type: PancelType): string {
+    let result = ''
+    switch(type) {
+        case 'konnyu': 
+            result = 'Könnyű'
+            break
+        case 'kozepes':
+            result = 'Közepes'
+            break
+        case 'nehez':
+            result = 'Nehéz'
+            break
+        default:
+            result = 'Egyéb páncél'
+    }
+    return result
+}

src/domain-models/karakter.ts

@@ -3,6 +3,7 @@ import {Osztaly} from "./osztaly";
 import {KarakterTulajdonsagok, Tulajdonsag, TulajdonsagDefaults} from "./tulajdonsag";
 import {KepzettsegId} from "./kepzettsegek";
 import {JellemID} from "./jellem";
+import { DefaultFelszereles, KarakterFelszereles } from './felszereles'
 
 export interface KarakterInputs {
     name: string,
@@ -20,6 +21,7 @@ export interface KarakterInputs {
     tulajdonsagNovelesek: Tulajdonsag[],
     harcosSpecializaciok: string[],
     kalozKritikus: string[],
+    felszereles: KarakterFelszereles,
 }
 
 export const KarakterDefaults: KarakterInputs = {
@@ -35,4 +37,5 @@ export const KarakterDefaults: KarakterInputs = {
     tulajdonsagNovelesek: [],
     harcosSpecializaciok: [],
     kalozKritikus: [],
+    felszereles: DefaultFelszereles,
 }

src/domain-models/pajzs.json

@@ -0,0 +1,32 @@
+{
+    "pajzs": [
+        {
+            "ID": "kis_fa",
+            "Name": "Kis fapajzs ",
+            "Type": "pajzs",
+            "VO": 1,
+            "Price": 3
+        },
+        {
+            "ID": "kis_fem",
+            "Name": "Kis fémpajzs ",
+            "Type": "pajzs",
+            "VO": 1,
+            "Price": 9
+        },
+        {
+            "ID": "nagy_fa",
+            "Name": "Nagy fapajzs ",
+            "Type": "pajzs",
+            "VO": 2,
+            "Price": 7
+        },
+        {
+            "ID": "nagy_fem",
+            "Name": "Nagy fémpajzs ",
+            "Type": "pajzs",
+            "VO": 2,
+            "Price": 20
+        }
+    ]
+}

src/domain-models/pancel.json

@@ -88,35 +88,5 @@
             "VO": 8,
             "Price": 800
         }
-    ],
-    "pajzs": [
-        {
-            "ID": "kis_fa",
-            "Name": "Kis fapajzs ",
-            "Type": "pajzs",
-            "VO": 1,
-            "Price": 3
-        },
-        {
-            "ID": "kis_fem",
-            "Name": "Kis fémpajzs ",
-            "Type": "pajzs",
-            "VO": 1,
-            "Price": 9
-        },
-        {
-            "ID": "nagy_fa",
-            "Name": "Nagy fapajzs ",
-            "Type": "pajzs",
-            "VO": 2,
-            "Price": 7
-        },
-        {
-            "ID": "nagy_fem",
-            "Name": "Nagy fémpajzs ",
-            "Type": "pajzs",
-            "VO": 2,
-            "Price": 20
-        }
     ]
 }

src/pages/CreateCharacter.tsx

@@ -25,6 +25,7 @@ import {CanLevelUp, LevelDown, LevelUp} from "../domain-models/level";
 import {Card} from "react-bootstrap";
 import LevelUps from "../components/LevelUps";
 import HarcosFegyverSpecializacio from "../components/HarcosFegyverSpecializacio";
+import Felszereles from '../components/Felszereles';
 
 function CreateCharacterPage() {
 
@@ -126,9 +127,14 @@ function CreateCharacterPage() {
                     <MasodlagosErtekek {...CalculateMasodlagosErtekek({...karakter, tulajdonsagok: tulajdonsagokFajjal, szint: 1, hpRolls: []})} />
 
                     <hr />
-                    <LevelUps key={'level-ups'} karakter={karakter} changeKarakter={changeKarakter} />
+
+                    <Felszereles felszereles={karakter.felszereles} changeFelszereles={(f) => changeKarakter({...karakter, felszereles: f})} />
 
                     <hr />
+
+                    <LevelUps key={'level-ups'} karakter={karakter} changeKarakter={changeKarakter} />
+
+                    {karakter.szint > 1 &&  <hr />}
                     <div className='d-grid gap-2 m-5'>
                         {canLevelUp && <button className='btn btn-dark btn-lg' type='button' onClick={levelUp}>Szintlépés! ⇧</button> }
                         {!canLevelUp && karakter.szint < 10 &&