kemkas/kemkas-gh-mirror
1
0
Fork 0
mirror of https://github.com/morbalint/kemkas.git synced 2026-07-18 03:13:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

add simple felszereles picker

Browse Source
This commit is contained in:
Balint Morasz
2024-05-20 11:52:23 +02:00
parent a7c692c0ba
commit 5cf9b298aa
13 changed files with 939 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/second-edition/components/Felszereles.tsx
+182 -15
View File
@@ -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/KarakterKepzettsegek2E.tsx → frontend/src/second-edition/components/Kepzettsegek2E.tsx
View File
frontend/src/second-edition/components/KarakterSzarmazas.tsx → frontend/src/second-edition/components/Szarmazas.tsx
+2 -4
View File
@@ -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;