add simple felszereles picker

frontend/src/second-edition/components/Felszereles.tsx

@@ -1,14 +1,20 @@
 import React from "react";
-import {Fegyver, KarakterFelszereles, PancelTypeLabel} from "../domain-models/felszereles";
+import {
+    AllFelszereles,
+    Fegyver, FelszerelesDto,
+    GetFegyver, GetFelszereles, GetPajzs, GetPancel,
+    KarakterFelszereles,
+    PancelTypeLabel, ViseltSize
+} 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 {AllowedFegyverek} from "../domain-models/allowed-fegyver";
 import FegyverSelector from "../display-components/FegyverSelector";
 import {useDispatch, useSelector} from "react-redux";
 import {AppDispatch, RootState} from "../../store";
 import {characterSelector, setFelszereles} from "../domain-models/characterSlice";
+import FelszerlesSelector from "../display-components/FelszerelesSelector";
 
 export function Felszereles(){
     const character = useSelector.withTypes<RootState>()(characterSelector)
@@ -21,15 +27,33 @@ export function Felszereles(){
 
 export function FelszerelesView(props: {felszereles: KarakterFelszereles, changeFelszereles: (felszereles: KarakterFelszereles) => void, osztalyok: Osztaly2E[]}) {
     const {felszereles, changeFelszereles, osztalyok} = props;
+    const viseltSize = ViseltSize(felszereles)
     const allowedPancel = AllowedPancelTypes(osztalyok)
+        .filter(x => felszereles.pancelID === x.Id || x.Size + viseltSize - (GetPancel(felszereles.pancelID)?.Size ?? 0) <= 8)
     const allowedPajzs = AllowedPajzsTypes(osztalyok)
+        .filter(x => felszereles.pajzsID === x.Id || x.Size + viseltSize - (GetPajzs(felszereles.pajzsID)?.Size ?? 0) <= 8)
     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}))
+        .map((id, idx) => ({
+            idx,
+            fegyver: GetFegyver(id),
+        })).filter((x) => x.fegyver != null).map(({idx, fegyver}) => ({idx, fegyver: fegyver as Fegyver}));
+
+    const viseltFelszereles= felszereles.viseltFelszerelesIDk.map((id, idx) => ({
+        idx,
+        targy: GetFelszereles(id),
+    })).filter(x => x.targy != null);
+    const aprosagFelszereles= felszereles.aprosagFelszerelesIDk.map((id, idx) => ({
+        idx,
+        targy: GetFelszereles(id),
+    })).filter(x => x.targy != null);
 
     const osztalyAllowedFegyverek = AllowedFegyverek(osztalyok)
-    const allowedFegyverek = [...osztalyAllowedFegyverek, ...valasztottFegyverek.filter(({idx, fegyver}) => !osztalyAllowedFegyverek.map(f => f.Id).includes(fegyver.Id)).map(({fegyver}) => fegyver)]
+    const allowedFegyverek = (selected?: Fegyver) => ([
+        ...osztalyAllowedFegyverek.filter(x => x.Size + viseltSize - (selected?.Size ?? 0) <= 8),
+        ...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)
+        const found = GetFegyver(newID)
         if (!found) {
             console.log('Nem létező fegyver ID: ', newID)
             return
@@ -45,14 +69,76 @@ export function FelszerelesView(props: {felszereles: KarakterFelszereles, change
     }
     const removeFegyver = (idx: number) => () => changeFelszereles({
         ...felszereles,
-        fegyverIDk: [...felszereles.fegyverIDk.slice(0, idx), ...felszereles.fegyverIDk.slice(idx+1)]
+        fegyverIDk: [...felszereles.fegyverIDk.slice(0, idx), ...felszereles.fegyverIDk.slice(idx + 1)]
+    })
+    const addFegyver = () => changeFelszereles({...felszereles, fegyverIDk: [...felszereles.fegyverIDk, 'okol']})
+
+    const allowedViselt = (selected?: FelszerelesDto) => AllFelszereles.filter(x =>
+        (x.size > 0 && viseltSize + x.size - (selected?.size ?? 0) <= 8))
+    const addViseltFelszereles = () => changeFelszereles({
+        ...felszereles,
+        viseltFelszerelesIDk: [...felszereles.viseltFelszerelesIDk, 'szog']
+    })
+    const changeViselt = (idx: number) => (newID: string) => {
+        const found = GetFelszereles(newID)
+        if (!found) {
+            console.log('Nem létező tárgy ID: ', newID)
+            return
+        }
+        changeFelszereles({...felszereles, viseltFelszerelesIDk: arraySetN(felszereles.viseltFelszerelesIDk, idx, newID)})
+    }
+    const removeViseltFelszereles = (idx: number) => () => changeFelszereles({
+        ...felszereles,
+        viseltFelszerelesIDk: [...felszereles.viseltFelszerelesIDk.slice(0, idx), ...felszereles.viseltFelszerelesIDk.slice(idx + 1)]
+    })
+
+    const addAprosag = () => changeFelszereles({
+        ...felszereles,
+        aprosagFelszerelesIDk: [...felszereles.aprosagFelszerelesIDk, 'tarsoly']
+    })
+    const changeAprosag = (idx: number) => (newID: string) => {
+        const found = GetFelszereles(newID)
+        if (!found) {
+            console.log('Nem létező tárgy ID: ', newID)
+            return
+        }
+        changeFelszereles({...felszereles, aprosagFelszerelesIDk: arraySetN(felszereles.aprosagFelszerelesIDk, idx, newID)})
+    }
+    const removeAprosag = (idx: number) => () => changeFelszereles({
+        ...felszereles,
+        aprosagFelszerelesIDk: [...felszereles.aprosagFelszerelesIDk.slice(0, idx), ...felszereles.aprosagFelszerelesIDk.slice(idx + 1)]
+    })
+
+    const cipeltCapacity = viseltFelszereles.reduce((acc, item) => acc + (item.targy?.type === 'container' ? item.targy.capacity : 0), 0)
+    const addCipelt = () => changeFelszereles({
+        ...felszereles,
+        cipeltFelszerelesIDk: [...felszereles.cipeltFelszerelesIDk, 'szog']
+    })
+    const cipeltFelszereles= felszereles.cipeltFelszerelesIDk.map((id, idx) => ({
+        idx,
+        targy: GetFelszereles(id),
+    })).filter(x => x.targy != null);
+
+    const changeCipelt = (idx: number) => (newID: string) => {
+        const found = GetFelszereles(newID)
+        if (!found) {
+            console.log('Nem létező tárgy ID: ', newID)
+            return
+        }
+        changeFelszereles({...felszereles, cipeltFelszerelesIDk: arraySetN(felszereles.cipeltFelszerelesIDk, idx, newID)})
+    }
+    const removeCipelt = (idx: number) => () => changeFelszereles({
+        ...felszereles,
+        cipeltFelszerelesIDk: [...felszereles.cipeltFelszerelesIDk.slice(0, idx), ...felszereles.cipeltFelszerelesIDk.slice(idx + 1)]
     })
-    const addFegyver = () => changeFelszereles({...felszereles, fegyverIDk: [...felszereles.fegyverIDk, 'bot']})
 
     return <>
         <div className='row'>
             <h5 className='col align-self-center'>Felszerelés</h5>
         </div>
+        <div className='row mt-2'>
+            <h6 className='col align-self-center'>Harci felszerelés</h6>
+        </div>
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 col-form-label'>Viselt páncél</label>
             <select
@@ -65,15 +151,17 @@ export function FelszerelesView(props: {felszereles: KarakterFelszereles, change
                 {
                     allowedPancel.some(p => p.Type === "konnyu") &&
                     <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>)}
+                        {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.Size}] (+${p.VO} VO) - ${p.Price} at`}</option>)}
+                        {allowedPancel.filter(p => p.Type === "nehez").map(p =>
+                            <option key={p.Id}
+                                    value={p.Id}>{`${p.Name} [${p.Size}] (+${p.VO} VO) - ${p.Price} at`}</option>)}
                     </optgroup>
                 }
             </select>
@@ -87,14 +175,15 @@ export function FelszerelesView(props: {felszereles: KarakterFelszereles, change
                 data-testid={"pajzs"}
             >
                 <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>)}
+                {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}
+                    fegyverek={allowedFegyverek(fegyver)}
                     selectedId={fegyver.Id}
                     onChange={(fegyverId) => changeFegyver(idx, fegyverId)}
                     dataTestId={`felszereles-fegyver-${idx}`}
@@ -106,13 +195,91 @@ export function FelszerelesView(props: {felszereles: KarakterFelszereles, change
                 </button>
             </div>
         ))}
-        <button
+        {viseltSize < 8 && (<button
             className='btn btn-outline-dark btn btn-lg ms-2'
             type='button'
             onClick={addFegyver}
         >
             Fegyver hozzáadása
-        </button>
+        </button>)}
+        <hr/>
+        <div className='row mt-2'>
+            <h6 className='col align-self-center'>Viselt felszerelés</h6>
+        </div>
+        {viseltFelszereles.map(({idx, targy}) => (
+            <div key={`felszereles-viselt-${idx}`} className='row m-2'>
+                <FelszerlesSelector
+                    felszerelesek={allowedViselt(targy)}
+                    onChange={changeViselt(idx)}
+                    selectedId={targy!.id}
+                    dataTestId={`felszereles-viselt-selector-${idx}`}
+                />
+                <button
+                    className='col-md-2 col-sm-3 btn btn-outline-dark btn-lg ms-2'
+                    type='button'
+                    onClick={removeViseltFelszereles(idx)}>Elvesz
+                </button>
+            </div>
+        ))}
+        {viseltSize < 8 && (<button
+            className='btn btn-outline-dark btn btn-lg ms-2'
+            type='button'
+            onClick={addViseltFelszereles}
+        >
+            Felszerelés hozzáadása
+        </button>)}
+        {cipeltCapacity > 0 && <><hr/>
+        <div className='row mt-2'>
+            <h6 className='col align-self-center'>Cipelt felszerelés</h6>
+        </div>
+        {cipeltFelszereles.map(({idx, targy}) => (
+            <div key={`felszereles-viselt-${idx}`} className='row m-2'>
+                <FelszerlesSelector
+                    felszerelesek={AllFelszereles.filter(x => x.size > 0)}
+                    onChange={changeCipelt(idx)}
+                    selectedId={targy!.id}
+                    dataTestId={`felszereles-viselt-selector-${idx}`}
+                />
+                <button
+                    className='col-md-2 col-sm-3 btn btn-outline-dark btn-lg ms-2'
+                    type='button'
+                    onClick={removeCipelt(idx)}>Elvesz
+                </button>
+            </div>
+        ))}
+        {felszereles.cipeltFelszerelesIDk.length < cipeltCapacity && (<button
+            className='btn btn-outline-dark btn btn-lg ms-2'
+            type='button'
+            onClick={addCipelt}
+        >
+            Cipelt felszerelés hozzáadása
+        </button>)}</>}
+        <hr/>
+        <div className='row mt-2'>
+            <h6 className='col align-self-center'>Apróságok</h6>
+        </div>
+        {aprosagFelszereles.map(({idx, targy}) => (
+            <div key={`felszereles-viselt-${idx}`} className='row m-2'>
+                <FelszerlesSelector
+                    felszerelesek={AllFelszereles.filter(x => x.size === 0)}
+                    onChange={changeAprosag(idx)}
+                    selectedId={targy!.id}
+                    dataTestId={`felszereles-viselt-selector-${idx}`}
+                />
+                <button
+                    className='col-md-2 col-sm-3 btn btn-outline-dark btn-lg ms-2'
+                    type='button'
+                    onClick={removeAprosag(idx)}>Elvesz
+                </button>
+            </div>
+        ))}
+        {felszereles.aprosagFelszerelesIDk.length < 8 && (<button
+            className='btn btn-outline-dark btn btn-lg ms-2'
+            type='button'
+            onClick={addAprosag}
+        >
+            Apróság hozzáadása
+        </button>)}
     </>
 }
 

frontend/src/second-edition/components/Szarmazas.tsx

@@ -5,9 +5,7 @@ import FajSelector2E from "./FajSelector2E";
 import {useDispatch, useSelector} from "react-redux";
 import {AppDispatch, RootState} from "../../store";
 
-function KarakterSzarmazas(props: {
-
-}) {
+function Szarmazas() {
     const karakter = useSelector.withTypes<RootState>()(characterSelector)
     const dispatch = useDispatch.withTypes<AppDispatch>()()
     return <>
@@ -32,4 +30,4 @@ function KarakterSzarmazas(props: {
     </>
 }
 
-export default KarakterSzarmazas;
+export default Szarmazas;

frontend/src/second-edition/data/felszereles.json

@@ -0,0 +1,611 @@
+{
+  "containers": [
+    {
+      "id": "hatizsak",
+      "nev": "Hátizsák",
+      "size": 1,
+      "price": 2,
+      "type": "container",
+      "capacity": 5
+    },
+    {
+      "id": "lada_fa_kicsi",
+      "nev": "Láda, fa, kicsi",
+      "size": 1,
+      "price": 2,
+      "type": "container",
+      "capacity": 1
+    },
+    {
+      "id": "lada_fa_nagy",
+      "nev": "Láda, fa, nagy",
+      "size": 8,
+      "price": 5,
+      "type": "container",
+      "capacity": 8
+    },
+    {
+      "id": "lada_fem_kicsi",
+      "nev": "Láda, fém, kicsi",
+      "size": 1,
+      "price": 10,
+      "type": "container",
+      "capacity": 1
+    },
+    {
+      "id": "lada_fem_nagy",
+      "nev": "Láda, fém, nagy",
+      "size": 8,
+      "price": 30,
+      "type": "container",
+      "capacity": 8
+    },
+    {
+      "id": "zsak",
+      "nev": "Zsák",
+      "size": 1,
+      "price": 0.1,
+      "type": "container",
+      "capacity": 4
+    }
+  ],
+  "items": [
+    {
+      "id": "acel_es_kova",
+      "nev": "Acél és kova",
+      "size": 0,
+      "price": 0.1,
+      "type": "items"
+    },
+    {
+      "id": "aso",
+      "nev": "Ásó",
+      "size": 1,
+      "price": 1,
+      "type": "items"
+    },
+    {
+      "id": "bogracs",
+      "nev": "Bogrács, vas",
+      "size": 1,
+      "price": 0.5,
+      "type": "items"
+    },
+    {
+      "id": "borostomlo",
+      "nev": "Borostömlő",
+      "size": 1,
+      "price": 1,
+      "type": "items"
+    },
+    {
+      "id": "csakany",
+      "nev": "Csákány",
+      "size": 1,
+      "price": 5,
+      "type": "items"
+    },
+    {
+      "id": "doboz",
+      "nev": "Doboz",
+      "size": 1,
+      "price": 2,
+      "type": "items"
+    },
+    {
+      "id": "elelem",
+      "nev": "Élelem, egy napra",
+      "size": 0.25,
+      "price": 0.5,
+      "type": "items"
+    },
+    {
+      "id": "faklya",
+      "nev": "Fáklya (1 óráig ég)",
+      "size": 0.2,
+      "price": 0.1,
+      "type": "items"
+    },
+    {
+      "id": "farud",
+      "nev": "Farúd, 10'",
+      "size": 1,
+      "price": 0.5,
+      "type": "items"
+    },
+    {
+      "id": "feszitovas",
+      "nev": "Feszítővas",
+      "size": 1,
+      "price": 2,
+      "type": "items"
+    },
+    {
+      "id": "fustolo",
+      "nev": "Füstölő, rúd",
+      "size": 0,
+      "price": 1,
+      "type": "items"
+    },
+    {
+      "id": "gyertya",
+      "nev": "Gyertya, viasz (1 óráig ég)",
+      "size": 0.1,
+      "price": 0.1,
+      "type": "items"
+    },
+    {
+      "id": "halasz_halo",
+      "nev": "Háló, halász",
+      "size": 1,
+      "price": 4,
+      "type": "items"
+    },
+    {
+      "id": "hangszer_kicsi",
+      "nev": "Hangszer, kisebb (pl. doromb)",
+      "size": 0,
+      "price": 5,
+      "type": "items"
+    },
+    {
+      "id": "hangszer_osszetett",
+      "nev": "Hangszer, összetett (pl. lant)",
+      "size": 1,
+      "price": 40,
+      "type": "items"
+    },
+    {
+      "id": "hangszer_nagyobb",
+      "nev": "Hangszer, nagyobb (pl. hárfa)",
+      "size": 4,
+      "price": 80,
+      "type": "items"
+    },
+    {
+      "id": "hordo_kicsi",
+      "nev": "Hordó, kicsi",
+      "size": 1,
+      "price": 2,
+      "type": "items"
+    },
+    {
+      "id": "illatszer",
+      "nev": "Illatszer",
+      "size": 0,
+      "price": 5,
+      "type": "items"
+    },
+    {
+      "id": "kalapacs",
+      "nev": "Kalapács",
+      "size": 1,
+      "price": 0.5,
+      "type": "items"
+    },
+    {
+      "id": "konyv_kisebb",
+      "nev": "Könyv, kisebb",
+      "size": 0.5,
+      "price": 20,
+      "type": "items"
+    },
+    {
+      "id": "konyv_nagyobb",
+      "nev": "Könyv, nagyobb",
+      "size": 1,
+      "price": 40,
+      "type": "items"
+    },
+    {
+      "id": "konyv_folians",
+      "nev": "Könyv, fóliáns",
+      "size": 2,
+      "price": 80,
+      "type": "items"
+    },
+    {
+      "id": "kotel_kender",
+      "nev": "Kötés, kender, 50'",
+      "size": 1,
+      "price": 1,
+      "type": "items"
+    },
+    {
+      "id": "kotel_selyem",
+      "nev": "Kötés, selyem, 50'",
+      "size": 0,
+      "price": 10,
+      "type": "items"
+    },
+    {
+      "id": "kreta",
+      "nev": "Kréta",
+      "size": 0,
+      "price": 0.1,
+      "type": "items"
+    },
+    {
+      "id": "lakat_egyszeru",
+      "nev": "Lakat, egyszerű",
+      "size": 1,
+      "price": 20,
+      "type": "items"
+    },
+    {
+      "id": "lakat_oszetett",
+      "nev": "Lakat, összetett",
+      "size": 1,
+      "price": 80,
+      "type": "items"
+    },
+    {
+      "id": "lampas_olaj_mecses",
+      "nev": "Lámpás, olaj, mécses (2 óráig ég)",
+      "size": 0,
+      "price": 0.1,
+      "type": "items"
+    },
+    {
+      "id": "lampas_olaj_vedett",
+      "nev": "Lámpás, olaj, védett (2 óráig ég)",
+      "size": 1,
+      "price": 10,
+      "type": "items"
+    },
+    {
+      "id": "lampas_olaj_nagy",
+      "nev": "Lámpás, olaj, nagy (2 óráig ég)",
+      "size": 1,
+      "price": 20,
+      "type": "items"
+    },
+    {
+      "id": "lanc",
+      "nev": "Lánc, 10'",
+      "size": 1,
+      "price": 5,
+      "type": "items"
+    },
+    {
+      "id": "letra_kotel",
+      "nev": "Létra, kötlél, 50'",
+      "size": 2,
+      "price": 5,
+      "type": "items"
+    },
+    {
+      "id": "maszovas",
+      "nev": "Mászóvas",
+      "size": 1,
+      "price": 10,
+      "type": "items"
+    },
+    {
+      "id": "olaj_palack",
+      "nev": "Olaj, palack",
+      "size": 0.25,
+      "price": 2,
+      "type": "items"
+    },
+    {
+      "id": "palack_cserep",
+      "nev": "Palack, cserép",
+      "size": 0.5,
+      "price": 0.2,
+      "type": "items"
+    },
+    {
+      "id": "palack_uveg",
+      "nev": "Palack, üveg",
+      "size": 0.5,
+      "price": 2,
+      "type": "items"
+    },
+    {
+      "id": "papirusz_lap",
+      "nev": "Papirusz, lap",
+      "size": 0,
+      "price": 0.2,
+      "type": "items"
+    },
+    {
+      "id": "pecset_gyuru",
+      "nev": "Pecsétgűrű",
+      "size": 0,
+      "price": 8,
+      "type": "items"
+    },
+    {
+      "id": "pecsetviasz",
+      "nev": "Pecsétviasz",
+      "size": 0,
+      "price": 1,
+      "type": "items"
+    },
+    {
+      "id": "pergamen_lap",
+      "nev": "Pergamen, lap",
+      "size": 0,
+      "price": 0.5,
+      "type": "items"
+    },
+    {
+      "id": "sator_2",
+      "nev": "Sátor, 2 fős",
+      "size": 2,
+      "price": 10,
+      "type": "items"
+    },
+    {
+      "id": "szapan",
+      "nev": "Szappan",
+      "size": 1,
+      "price": 0.5,
+      "type": "items"
+    },
+    {
+      "id": "szog",
+      "nev": "Szög",
+      "size": 0.1,
+      "price": 0.1,
+      "type": "items"
+    },
+    {
+      "id": "takaro",
+      "nev": "Takaró",
+      "size": 1,
+      "price": 0.2,
+      "type": "items"
+    },
+    {
+      "id": "tarsoly",
+      "nev": "Tarsoly",
+      "size": 0,
+      "price": 1,
+      "type": "items"
+    },
+    {
+      "id": "tegez",
+      "nev": "Tegez",
+      "size": 1,
+      "price": 2,
+      "type": "items"
+    },
+    {
+      "id": "tekercs",
+      "nev": "Tekercs",
+      "size": 1,
+      "price": 8,
+      "type": "items"
+    },
+    {
+      "id": "tekercs_tarto",
+      "nev": "Tekercs tartó",
+      "size": 1,
+      "price": 5,
+      "type": "items"
+    },
+    {
+      "id": "tinta",
+      "nev": "Tinta",
+      "size": 0,
+      "price": 8,
+      "type": "items"
+    },
+    {
+      "id": "tukor_ezust",
+      "nev": "Tükör, ezüst",
+      "size": 0,
+      "price": 10,
+      "type": "items"
+    },
+    {
+      "id": "tu_es_cerna",
+      "nev": "Tű és cérna",
+      "size": 0,
+      "price": 0.1,
+      "type": "items"
+    },
+    {
+      "id": "uvegcse",
+      "nev": "üvegcse",
+      "size": 0.25,
+      "price": 1,
+      "type": "items"
+    },
+    {
+      "id": "vodor",
+      "nev": "Vödör",
+      "size": 1,
+      "price": 0.5,
+      "type": "items"
+    }
+  ],
+  "clothes": [
+    {
+      "id": "ruha_elokelo",
+      "nev": "Előkelő",
+      "size": 1,
+      "price": 75,
+      "type": "clothes"
+    },
+    {
+      "id": "ruha_diszes",
+      "nev": "Díszes",
+      "size": 1,
+      "price": 12,
+      "type": "clothes"
+    },
+    {
+      "id": "ruha_kozrendu",
+      "nev": "Közrendű",
+      "size": 1,
+      "price": 0.5,
+      "type": "clothes"
+    },
+    {
+      "id": "ruha_nagyuri",
+      "nev": "Nagyúri",
+      "size": 1,
+      "price": 200,
+      "type": "clothes"
+    },
+    {
+      "id": "ruha_papi",
+      "nev": "Papi",
+      "size": 1,
+      "price": 12,
+      "type": "clothes"
+    },
+    {
+      "id": "ruha_patricius",
+      "nev": "Patrícius",
+      "size": 1,
+      "price": 30,
+      "type": "clothes"
+    },
+    {
+      "id": "ruha_plebejus",
+      "nev": "Plebejus",
+      "size": 1,
+      "price": 2,
+      "type": "clothes"
+    },
+    {
+      "id": "ruha_szormek",
+      "nev": "Szőrmék",
+      "size": 2,
+      "price": 12,
+      "type": "clothes"
+    },
+    {
+      "id": "ruha_utazo",
+      "nev": "Utazó",
+      "size": 1,
+      "price": 2,
+      "type": "clothes"
+    }
+  ],
+  "specialis": [
+    {
+      "id": "alkimista_labor",
+      "nev": "Alkimista labor",
+      "size": 4,
+      "price": 500,
+      "type": "spec"
+    },
+    {
+      "id": "csapda_medve",
+      "nev": "Csapda, medve",
+      "size": 1,
+      "price": 6,
+      "type": "spec"
+    },
+    {
+      "id": "gorogtuz",
+      "nev": "gorogtuz",
+      "size": 0.25,
+      "price": 20,
+      "type": "spec"
+    },
+    {
+      "id": "gyogyfu",
+      "nev": "Gyógyfű",
+      "size": 0.1,
+      "price": 10,
+      "type": "spec"
+    },
+    {
+      "id": "homokora",
+      "nev": "Homokóra",
+      "size": 0,
+      "price": 25,
+      "type": "spec"
+    },
+    {
+      "id": "ketrec_kisebb",
+      "nev": "Ketrec, kisebb",
+      "size": 1,
+      "price": 5,
+      "type": "spec"
+    },
+    {
+      "id": "ketrec_nagyobb",
+      "nev": "Ketrec, nagyobb",
+      "size": 8,
+      "price": 40,
+      "type": "spec"
+    },
+    {
+      "id": "merleg",
+      "nev": "Mérleg",
+      "size": 0,
+      "price": 2,
+      "type": "spec"
+    },
+    {
+      "id": "nagyito",
+      "nev": "Nagyító",
+      "size": 0,
+      "price": 100,
+      "type": "spec"
+    },
+    {
+      "id": "orvoslo_keszlet",
+      "nev": "Orvosló készlet",
+      "size": 1,
+      "price": 200,
+      "type": "spec"
+    },
+    {
+      "id": "sav",
+      "nev": "Sav",
+      "size": 0,
+      "price": 10,
+      "type": "spec"
+    },
+    {
+      "id": "szenteltviz",
+      "nev": "Szenteltvíz",
+      "size": 0,
+      "price": 25,
+      "type": "spec"
+    },
+    {
+      "id": "szent_szimbolum",
+      "nev": "Szent szimbólum",
+      "size": 0,
+      "price": 25,
+      "type": "spec"
+    },
+    {
+      "id": "tinta_magikus",
+      "nev": "Tinta, mágikus, 1 szintre",
+      "size": 0,
+      "price": 100,
+      "type": "spec"
+    },
+    {
+      "id": "tolvajszerszamok",
+      "nev": "Tolvajszerszámok",
+      "size": 1,
+      "price": 30,
+      "type": "spec"
+    },
+    {
+      "id": "varazskonyv",
+      "nev": "Varázskönyv, üres",
+      "size": 1,
+      "price": 120,
+      "type": "spec"
+    },
+    {
+      "id": "vizora",
+      "nev": "Vízóra",
+      "size": 1,
+      "price": 500,
+      "type": "spec"
+    }
+  ]
+}

frontend/src/second-edition/display-components/FelszerelesSelector.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import {FelszerelesContainer, FelszerelesDto} from "../domain-models/felszereles";
+
+function PriceLabel(priceInGold: number): string {
+    if (priceInGold >= 1 && (priceInGold * 10) % 10 === 0) {
+        return `${priceInGold} at`;
+    }
+    if ((priceInGold * 100) % 10 === 0) {
+        return `${priceInGold*10} et`;
+    }
+    return `${priceInGold*100} rt`;
+}
+
+function FelszerelesLabel(f: FelszerelesDto): string {
+    return `${f.nev}${f.size > 1 ? ` [${f.size}]` : f.size < 1 && f.size > 0 ? ` [1/${Math.round(1/f.size)}]` : ''} | ${PriceLabel(f.price)}`
+}
+
+function ContainerLabel(c: FelszerelesContainer): string {
+    return `${c.nev}${c.size > 1 ? ` [${c.size}]` : c.size < 1 ? ` [1/${Math.round(1/c.size)}]` : ''} | kapacitás: ${c.capacity} | ${PriceLabel(c.price)}`
+}
+
+function FelszerlesSelector(props: {
+    felszerelesek: FelszerelesDto[],
+    selectedId: string,
+    onChange: (id: string) => void,
+    dataTestId?: string,
+}) {
+    const { felszerelesek, selectedId, onChange, dataTestId } = props
+
+    const containers = felszerelesek.filter(x => x.type === 'container').map(x => x as FelszerelesContainer)
+    const ordinary = felszerelesek.filter(f => f.type === 'items');
+
+    return <>
+        <select className='col form-select'
+                value={selectedId}
+                onChange={e => onChange(e.target.value)}
+                data-testid={dataTestId}
+        >
+            {ordinary.length > 0 && <optgroup label="Közönséges">
+                {ordinary.map(f => <option
+                    key={f.id} value={f.id}>{FelszerelesLabel(f)}</option>)}
+            </optgroup>}
+            {containers.length > 0 && <optgroup label="Tárolók">
+                {containers.map(c => <option
+                    key={c.id} value={c.id}>{ContainerLabel(c)}</option>)}
+            </optgroup>}
+            <optgroup label="Ruhák">
+                {felszerelesek.filter(f => f.type === 'clothes').map(f => <option
+                    key={f.id} value={f.id}>{FelszerelesLabel(f)}</option>)}
+            </optgroup>
+            <optgroup label="Speciális">
+                {felszerelesek.filter(f => f.type === 'spec').map(f => <option
+                    key={f.id} value={f.id}>{FelszerelesLabel(f)}</option>)}
+            </optgroup>
+        </select>
+    </>
+}
+
+export default FelszerlesSelector

frontend/src/second-edition/domain-models/allowed-fegyver.ts

@@ -1,5 +1,5 @@
 import {Fegyver} from "./felszereles";
-import fegyverDB from "./fegyver.json";
+import fegyverDB from "../data/fegyver.json";
 import {Osztaly2E} from "./osztaly2E";
 
 export function AllowedFegyverek(osztalyok: Osztaly2E[]): Fegyver[] {

frontend/src/second-edition/domain-models/allowed-pancel-types.ts

@@ -1,7 +1,7 @@
 import {Pajzs, Pancel} from "./felszereles";
 import {Osztaly2E} from "./osztaly2E";
-import pancelDB from "./pancel.json";
-import pajzsDB from "./pajzs.json"
+import pancelDB from "../data/pancel.json";
+import pajzsDB from "../data/pajzs.json"
 
 export function AllowedPajzsTypes(osztalyok: Osztaly2E[]): Pajzs[] {
     return [...new Set(osztalyok.flatMap(osztalyAllowedPajzs))]

frontend/src/second-edition/domain-models/felszereles.ts

@@ -1,6 +1,9 @@
-import pancelok from './pancel.json'
-import pajzsok from './pajzs.json'
-import fegyverek from './fegyver.json'
+import pancelok from '../data/pancel.json'
+import pajzsok from '../data/pajzs.json'
+import fegyverek from '../data/fegyver.json'
+import felszereles from '../data/felszereles.json'
+import {Modifier, TulajdonsagokTotal} from "./tulajdonsag2E";
+import {Karakter2E} from "./karakter2E";
 
 export type PancelType = 'konnyu' | 'nehez'
 
@@ -55,14 +58,62 @@ export interface Fegyver {
     Size: number
 }
 
+export interface FelszerelesContainer {
+    id: string,
+    nev: string,
+    size: number,
+    price: number,
+    type: "container",
+    capacity: number
+}
+
+export interface FelszerelesItem {
+    id: string,
+    nev: string,
+    size: number,
+    price: number,
+    type: "items" | "spec" | "clothes"
+}
+
+export type FelszerelesDto = FelszerelesItem | FelszerelesContainer;
+
+export function NumberOfSizedItems(karakter: Pick<Karakter2E, "tulajdonsagok" | "faj" | "szintlepesek">) {
+    const tulajdonsagok = TulajdonsagokTotal(karakter)
+    return 13 + Modifier(tulajdonsagok.t_ero)
+}
+
+export const AllFelszereles : FelszerelesDto[] = [
+    ...(felszereles.items as FelszerelesItem[]),
+    ...(felszereles.containers as FelszerelesContainer[]),
+    ...(felszereles.clothes as FelszerelesItem[]),
+    ...(felszereles.specialis as FelszerelesItem[])
+]
+
 export interface KarakterFelszereles {
     pancelID?: string
     pajzsID?: string
     fegyverIDk: string[]
+    viseltFelszerelesIDk: string[]
+    cipeltFelszerelesIDk: string[]
+    aprosagFelszerelesIDk: string[]
 }
 
 export const DefaultFelszereles: KarakterFelszereles = {
     fegyverIDk: [],
+    viseltFelszerelesIDk: [],
+    cipeltFelszerelesIDk: [],
+    aprosagFelszerelesIDk: [],
+}
+
+export function ViseltSize(felszereles: KarakterFelszereles): number {
+    let sum = 0;
+    sum += GetPajzs(felszereles.pajzsID)?.Size ?? 0;
+    sum += GetPancel(felszereles.pancelID)?.Size ?? 0;
+
+    sum += felszereles.fegyverIDk.map(GetFegyver).reduce((acc, item) => acc + (item?.Size ?? 0),0)
+    sum += felszereles.viseltFelszerelesIDk.map(GetFelszereles).reduce((acc, item) => acc + (item?.size ?? 0),0)
+
+    return sum;
 }
 
 export function PancelTypeLabel(type: PancelType): string {
@@ -108,8 +159,28 @@ export function GetFegyver(id: string): Fegyver | undefined {
     return fegyverek.data.find(f => f.Id === id) as Fegyver | undefined
 }
 
-export function GetFegyverek(ids: string[]): Fegyver[] {
-    return ids.map(GetFegyver).filter(x => x != null).map(x => x as Fegyver)
+export function GetFelszereles(id?: string): FelszerelesItem | FelszerelesContainer | undefined {
+    return GetFelszerelesItem(id) || GetFelszerelesContainer(id);
 }
-export const defaultFegyverID = 'okol'
-export const defaultFegyver = GetFegyver('okol')!
+
+export function GetFelszerelesItem(id?: string): FelszerelesItem | undefined {
+    if (id == null) {
+        return undefined
+    }
+    const item = felszereles.items.find(f => f.id === id) as FelszerelesItem | undefined
+    if (item != null) {
+        return item;
+    }
+    const cloth = felszereles.clothes.find(f => f.id === id) as FelszerelesItem | undefined
+    if (cloth != null) {
+        return cloth;
+    }
+    return felszereles.specialis.find(f => f.id === id) as FelszerelesItem | undefined
+}
+
+export function GetFelszerelesContainer(id?: string): FelszerelesContainer | undefined {
+    if (id == null) {
+        return undefined
+    }
+    return felszereles.containers.find(f => f.id === id) as FelszerelesContainer | undefined
+}

frontend/src/second-edition/domain-models/kepzettsegek2E.ts

@@ -98,4 +98,4 @@ export function AdjustKepzettsegek(karakter: Pick<Karakter2E, 'faj' | 'tulajdons
     else {
         return karakter.kepzettsegek.slice(0, numberOfKepzettsegek);
     }
-}
+}

frontend/src/second-edition/pages/CreateCharacter2E.tsx

@@ -5,7 +5,7 @@ import {Karakter2E} from "../domain-models/karakter2E";
 import Tulajdonsagok2E from "../components/Tulajdonsagok2E";
 import OsztalySelector2E from "../components/OsztalySelector2E";
 import {Osztaly2E} from "../domain-models/osztaly2E";
-import KarakterKepzettsegek from "../components/KarakterKepzettsegek2E";
+import KarakterKepzettsegek from "../components/Kepzettsegek2E";
 import MasodlagosErtekek from "../components/MasodlagosErtekek";
 import Felszereles from "../components/Felszereles";
 import LevelUps from "../components/LevelUps";
@@ -21,7 +21,7 @@ import {AppDispatch, RootState} from "../../store";
 import {userSelector} from "../../shared/domain-models/userSlice";
 import {SaveModal} from "../../shared/components/SaveModal";
 import {characterSelector, setCharacter} from "../domain-models/characterSlice";
-import KarakterSzarmazas from "../components/KarakterSzarmazas";
+import Szarmazas from "../components/Szarmazas";
 
 function CreateCharacter2E(props: {
     faro?: Faro
@@ -95,7 +95,7 @@ function CreateCharacter2E(props: {
                 <div className='row'>
                     <h5 className='col align-self-center'>Származás</h5>
                 </div>
-                <KarakterSzarmazas/>
+                <Szarmazas/>
                 <hr/>
                 <Tulajdonsagok2E/>
                 <hr/>