kemkas/kemkas-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add data test ID to 2e karakter creator

Browse Source
This commit is contained in:
Balint Morasz
2024-03-25 21:32:36 +01:00
parent 839a14a95f
commit edbe8934e4
16 changed files with 181 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/second-edition/components/Felszereles.tsx
+42 -9
View File
@@ -25,13 +25,30 @@ function Felszereles(props: {felszereles: KarakterFelszereles, changeFelszereles
changeFelszereles({...felszereles, fegyverIDk: arraySetN(felszereles.fegyverIDk, idx, newID)})
}
const changePancel = (event: React.ChangeEvent<HTMLSelectElement>) => {
changeFelszereles({...felszereles, pancelID: event.target.value === 'nincs' ? undefined : event.target.value})
}
const changePajzs = (event: React.ChangeEvent<HTMLSelectElement>) => {
changeFelszereles({...felszereles, pajzsID: event.target.value === 'nincs' ? undefined : event.target.value})
}
const removeFegyver = (idx: number) => () => changeFelszereles({
...felszereles,
fegyverIDk: [...felszereles.fegyverIDk.slice(0, idx), ...felszereles.fegyverIDk.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 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})}>
<select
className='col form-select'
value={felszereles.pancelID}
onChange={changePancel}
data-testid={"pancel"}
>
<option key={'nincs'} value={'nincs'}>Nincs</option>
{
<optgroup label={PancelTypeLabel("konnyu")}>
@@ -50,8 +67,12 @@ function Felszereles(props: {felszereles: KarakterFelszereles, changeFelszereles
</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})}>
<select
className='col form-select'
value={felszereles.pajzsID}
onChange={changePajzs}
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>)}
</select>
@@ -59,14 +80,26 @@ function Felszereles(props: {felszereles: KarakterFelszereles, changeFelszereles
{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} selectedId={fegyver.Id} onChange={(fegyverId) => changeFegyver(idx, fegyverId)} />
<button className='col-md-2 col-sm-3 btn btn-outline-dark btn-lg ms-2' type='button'
onClick={() => changeFelszereles({
...felszereles,
fegyverIDk: [...felszereles.fegyverIDk.slice(0, idx), ...felszereles.fegyverIDk.slice(idx+1)]})}>Elvesz</button>
<FegyverSelector
fegyverek={allowedFegyverek}
selectedId={fegyver.Id}
onChange={(fegyverId) => changeFegyver(idx, fegyverId)}
dataTestId={`felszereles-fegyver-${idx}`}
/>
<button
className='col-md-2 col-sm-3 btn btn-outline-dark btn-lg ms-2'
type='button'
onClick={removeFegyver(idx)}>Elvesz
</button>
</div>
))}
<button className='btn btn-outline-dark btn btn-lg ms-2' type='button' onClick={() => changeFelszereles({...felszereles, fegyverIDk: [...felszereles.fegyverIDk, 'bot']})}>Fegyver hozzáadása</button>
<button
className='btn btn-outline-dark btn btn-lg ms-2'
type='button'
onClick={addFegyver}
>
Fegyver hozzáadása
</button>
</>
}