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

refactor WIP

Browse Source
This commit is contained in:
Balint Morasz
2023-09-03 14:20:04 +02:00
parent 0d30049fa3
commit 442b930334
9 changed files with 105 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FajSelector.tsx
+5 -6
View File
@@ -1,13 +1,12 @@
import React from "react";
import {Faj, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj";
import {UseFormRegisterReturn} from "react-hook-form";
function FajSelector(props: { register: () => UseFormRegisterReturn, currentFaj: () => Faj }) {
const {register, currentFaj} = props
function FajSelector(props: { faj: Faj, changeFaj: (val: Faj) => void }) {
const {faj, changeFaj} = props
return <>
<div className='row m-2'>
<label className='col-md-2 col-sm-3 col-form-label'>Faj</label>
<select className='col form-select' defaultValue={Faj.Ember} {...register()}>
<select className='col form-select' defaultValue={Faj.Ember} value={faj} onChange={e => changeFaj(e.target.value as Faj)}>
<option key={Faj.Ember} value={Faj.Ember}>{FajLabel(Faj.Ember)}</option>
<optgroup label='más emberi népek'>
<option key={Faj.Amazon} value={Faj.Amazon}>{FajLabel(Faj.Amazon)}</option>
@@ -31,10 +30,10 @@ function FajSelector(props: { register: () => UseFormRegisterReturn, currentFaj:
<label className='col-md-2 col-sm-3 form-label'></label>
<div className='col'>
<p className='row pt-2'>
{FajDescription(currentFaj())}
{FajDescription(faj)}
</p>
<ul>
{FajSpecials(currentFaj()).map(((special, i) => (<li key={currentFaj() + i}>{special}</li>)))}
{FajSpecials(faj).map(((special, i) => (<li key={faj + i}>{special}</li>)))}
</ul>
</div>
</div>
src/components/KarakterKepzettsegek.tsx
+12 -46
View File
@@ -1,34 +1,32 @@
import React from "react";
import KepzettsegSelector from "./KepzettsegSelector";
import {Osztaly} from "../domain-models/osztaly";
import {UseFormRegisterReturn} from "react-hook-form";
import {
AvailableKezpettsegList,
Kepzettseg,
Kepzettsegek,
KepzettsegId,
KepzettsegLista
} from "../domain-models/kepzettsegek";
import {Modifier} from "../domain-models/tulajdonsag";
import {Faj} from "../domain-models/faj";
function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg: number, getKepzettsegListaN: (n: number) => Kepzettseg[], register: (n: number) => UseFormRegisterReturn, availableKepzettsegList: Kepzettseg[], getKepzettsegN: (n: number) => Kepzettseg}) {
const {title, numberOfKepzettseg, getKepzettsegListaN, register, availableKepzettsegList, getKepzettsegN} = props
function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg: number, getKepzettsegListaN: (n: number) => Kepzettseg[], kepzettsegek: KepzettsegId[], changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void}) {
const {title, numberOfKepzettseg, getKepzettsegListaN, kepzettsegek, changeKepzettsegek} = props
const klist = Array.from(new Array(numberOfKepzettseg).keys())
const preCalculated: {
kepzettsegek: Kepzettseg[],
registration: UseFormRegisterReturn,
changeKepzettseg: (newKepzettseg: KepzettsegId) => void,
selected: Kepzettseg,
}[] = [];
for (let i = 0; i < numberOfKepzettseg; i++) {
preCalculated.push({
kepzettsegek: getKepzettsegListaN(i),
registration: register(i),
selected: getKepzettsegN(i)
selected: Kepzettsegek[kepzettsegek[i]],
changeKepzettseg: (newKepzettseg: KepzettsegId) => { changeKepzettsegek([...kepzettsegek.slice(0, i), newKepzettseg, ...kepzettsegek.slice(i+1)]) }
})
}
@@ -44,8 +42,8 @@ function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg:
<KepzettsegSelector
key={title+idx}
kepzettsegek={preCalculated[idx].kepzettsegek}
fieldRegistration={preCalculated[idx].registration}
selected={preCalculated[idx].selected}
changeKepzettseg={preCalculated[idx].changeKepzettseg}
/>)
}
</div>
@@ -58,10 +56,10 @@ function KarakterKepzettsegek (props: {
faj: Faj
osztaly: Osztaly,
t_int: number,
register: (fieldName: string) => UseFormRegisterReturn,
watch: (fieldName: string, defaultValue: KepzettsegId) => string
kepzettsegek: KepzettsegId[],
changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
}) {
const { faj, osztaly, t_int, register, watch } = props
const { faj, osztaly, t_int, kepzettsegek, changeKepzettsegek} = props
const availableKepzettsegList = AvailableKezpettsegList(osztaly)
@@ -76,33 +74,10 @@ function KarakterKepzettsegek (props: {
}
console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg)
const getKepzettsegN = (n: number) => Kepzettsegek[watch('kepzettseg.'+n, availableKepzettsegList[n].Id) as KepzettsegId]
const getKepzettsegListaN = (n: number) => {
let response = availableKepzettsegList;
for (let i = 0; i < numberOfKepzettseg; i++) {
response = response.filter(x => i === n || x.Id !== getKepzettsegN(i).Id)
}
if (osztaly === Osztaly.Tolvaj) {
for (let i = 0; i < 4; i++) {
response = response.filter(x => x.Id !== getTolvajKepzettsegN(i).Id)
}
}
return response
}
const tolvajKepzettsegek = KepzettsegLista.filter(k => k.Osztalyok != null && k.Osztalyok.includes(Osztaly.Tolvaj))
const getTolvajKepzettsegN = (n: number) => Kepzettsegek[watch('tolvaj_kepzettseg.'+n, tolvajKepzettsegek[n].Id) as KepzettsegId]
const getTolvajKepzettsegListaN = (n: number) => {
let response = tolvajKepzettsegek;
// filter out selected kepzettsegek
for (let i = 0; i < numberOfKepzettseg; i++) {
response = response.filter(x => x.Id !== getKepzettsegN(i).Id)
}
// filter out selected tolvaj kepzettsegek
for (let i = 0; i < 4; i++) {
response = response.filter(x => i === n || x.Id !== getTolvajKepzettsegN(i).Id)
response = response.filter(x => i === n || x.Id !== kepzettsegek[i])
}
return response
}
@@ -111,18 +86,9 @@ function KarakterKepzettsegek (props: {
<InternalKepzettsegekSelector
title="Képzettségek"
numberOfKepzettseg={numberOfKepzettseg}
availableKepzettsegList={availableKepzettsegList}
getKepzettsegListaN={getKepzettsegListaN}
register={(n: number) => register('kepzettseg.' + n)}
getKepzettsegN={getKepzettsegN} />
{osztaly === Osztaly.Tolvaj &&
<InternalKepzettsegekSelector
title="Tolvaj Képzettségek"
numberOfKepzettseg={4}
availableKepzettsegList={tolvajKepzettsegek}
getKepzettsegListaN={getTolvajKepzettsegListaN}
register={(n: number) => register('tolvaj_kepzettseg.' + n)}
getKepzettsegN={getTolvajKepzettsegN} />}
changeKepzettsegek={changeKepzettsegek}
kepzettsegek={kepzettsegek} />
</>
}
src/components/KepzettsegSelector.tsx
+4 -5
View File
@@ -1,7 +1,6 @@
import React from "react";
import {Kepzettseg} from "../domain-models/kepzettsegek";
import {Kepzettseg, KepzettsegId} from "../domain-models/kepzettsegek";
import {TulajdonsagLabel} from "../domain-models/tulajdonsag";
import {UseFormRegisterReturn} from "react-hook-form";
import {OsztalyLabel} from "../domain-models/osztaly";
function kepzettsegOptionText(k: Kepzettseg) {
@@ -9,14 +8,14 @@ function kepzettsegOptionText(k: Kepzettseg) {
return k.Name + ' (' + k.Tulajdonsag.reduce((acc, k) => (acc === '' ? acc : acc + ' / ') + TulajdonsagLabel(k), '') + ')' + (osztalyok == null ? '' : (' - ' + osztalyok));
}
function KepzettsegSelector (props: {kepzettsegek: Kepzettseg[], fieldRegistration: UseFormRegisterReturn, selected : Kepzettseg}) {
function KepzettsegSelector (props: {kepzettsegek: Kepzettseg[], changeKepzettseg: (newKepzettseg: KepzettsegId) => void, selected : Kepzettseg}) {
const { kepzettsegek, fieldRegistration, selected } = props
const { kepzettsegek, changeKepzettseg, selected } = props
return <>
<div className='row'>
<select className='form-control'
value={selected.Id} {...fieldRegistration}>
value={selected.Id} onChange={e => changeKepzettseg(e.target.value as KepzettsegId)}>
{kepzettsegek.map(k =>(
<option key={k.Id} value={k.Id}>
{kepzettsegOptionText(k)}
src/components/MasodlagosErtekek.tsx
+8 -8
View File
@@ -103,7 +103,7 @@ function AkarateroMento(osztaly: Osztaly) : number {
}
}
function MasodlagosErtekek(props: {osztaly: Osztaly, tulajdonsagok: () => KarakterTulajdonsagok}) {
function MasodlagosErtekek(props: {osztaly: Osztaly, tulajdonsagok: KarakterTulajdonsagok}) {
const { osztaly, tulajdonsagok } = props;
@@ -125,33 +125,33 @@ function MasodlagosErtekek(props: {osztaly: Osztaly, tulajdonsagok: () => Karakt
<span>(HP)</span>
</OverlayTrigger>
</label>
<p className='col'>{HP(osztaly, tulajdonsagok().t_egs)}</p>
<p className='col'>{HP(osztaly, tulajdonsagok.t_egs)}</p>
</div>
<div className='row m-2'>
<label className='col-sm-6 col-8 col-form-label' >Védekezési Osztály (VO)</label>
<p className='col'>{10+Modifier(tulajdonsagok().t_ugy)}</p>
<p className='col'>{10+Modifier(tulajdonsagok.t_ugy)}</p>
</div>
<div className='row m-2'>
<label className='col-sm-6 col-8 col-form-label' >Közelharci támadás</label>
<p className='col'>{SignedNumberToText(KozelharciTB(osztaly, tulajdonsagok()))}</p>
<p className='col'>{SignedNumberToText(KozelharciTB(osztaly, tulajdonsagok))}</p>
</div>
<div className='row m-2'>
<label className='col-sm-6 col-8 col-form-label' >Célzó támadás</label>
<p className='col'>{SignedNumberToText(TamadasBonusz(osztaly) + Modifier(tulajdonsagok().t_ugy))}</p>
<p className='col'>{SignedNumberToText(TamadasBonusz(osztaly) + Modifier(tulajdonsagok.t_ugy))}</p>
</div>
</div>
<div className='col-lg-6'>
<div className='row m-2'>
<label className='col-sm-6 col-8 col-form-label' >Kitartás mentő</label>
<p className='col'>{SignedNumberToText(KitartasMento(osztaly) + Modifier(tulajdonsagok().t_egs))}</p>
<p className='col'>{SignedNumberToText(KitartasMento(osztaly) + Modifier(tulajdonsagok.t_egs))}</p>
</div>
<div className='row m-2'>
<label className='col-sm-6 col-8 col-form-label' >Reflex mentő</label>
<p className='col'>{SignedNumberToText(ReflexMento(osztaly) + Modifier(tulajdonsagok().t_ugy))}</p>
<p className='col'>{SignedNumberToText(ReflexMento(osztaly) + Modifier(tulajdonsagok.t_ugy))}</p>
</div>
<div className='row m-2'>
<label className='col-sm-6 col-8 col-form-label' >Akaraterő mentő </label>
<p className='col'>{SignedNumberToText(AkarateroMento(osztaly) + Modifier(tulajdonsagok().t_bol))}</p>
<p className='col'>{SignedNumberToText(AkarateroMento(osztaly) + Modifier(tulajdonsagok.t_bol))}</p>
</div>
</div>
</div>
src/components/OsztalySelector.tsx
+9 -32
View File
@@ -7,26 +7,25 @@ import {
OsztalySpecialSkills
} from "../domain-models/osztaly";
import {Faj} from "../domain-models/faj";
import {UseFormRegisterReturn} from "react-hook-form";
function OsztalySelector(props: {currentFaj: () => Faj, currentOsztaly: () => Osztaly, register: () => UseFormRegisterReturn}) {
const {currentFaj, currentOsztaly, register} = props;
function OsztalySelector(props: {currentFaj: Faj, currentOsztaly: Osztaly, changeOsztaly: (newOsztaly: Osztaly) => 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" defaultValue={Osztaly.Harcos} {...register()}>
<select className="col form-select" defaultValue={Osztaly.Harcos} value={currentOsztaly} onChange={(e) => changeOsztaly(e.target.value as Osztaly)} >
<optgroup label='Harcos'>
<option value={Osztaly.Harcos}>{OsztalyLabel(Osztaly.Harcos)}</option>
{currentFaj() === Faj.Amazon && (
{currentFaj === Faj.Amazon && (
<option value={Osztaly.Amazon}>{OsztalyLabel(Osztaly.Amazon)}</option>) }
<option value={Osztaly.Barbar}>{OsztalyLabel(Osztaly.Barbar)}</option>
<option value={Osztaly.Ijasz}>{OsztalyLabel(Osztaly.Ijasz)}</option>
<option value={Osztaly.Kaloz}>{OsztalyLabel(Osztaly.Kaloz)}</option>
</optgroup>
<option value={Osztaly.Pap}>{OsztalyLabel(Osztaly.Pap)}</option>
{currentFaj() !== Faj.Amazon && (<option value={Osztaly.Tolvaj}>{OsztalyLabel(Osztaly.Tolvaj)}</option>)}
{![Faj.Osember, Faj.Amazon].includes(currentFaj()) && (
{currentFaj !== Faj.Amazon && (<option value={Osztaly.Tolvaj}>{OsztalyLabel(Osztaly.Tolvaj)}</option>)}
{![Faj.Osember, Faj.Amazon].includes(currentFaj) && (
<optgroup label='Varázsló'>
<option value={Osztaly.Varazslo}>{OsztalyLabel(Osztaly.Varazslo)}</option>
<option value={Osztaly.Illuzionista}>{OsztalyLabel(Osztaly.Illuzionista)}</option>
@@ -38,13 +37,13 @@ function OsztalySelector(props: {currentFaj: () => Faj, currentOsztaly: () => Os
<label className='col-md-2 col-sm-3 form-label'></label>
<div className='col' >
<p className='row pt-2'>
{OsztalyDescription(currentOsztaly())}
{OsztalyDescription(currentOsztaly)}
</p>
<ul>
{OsztalyProperties(currentOsztaly()).map(((special, i) => (<li key={currentOsztaly() + i}>{special}</li>)))}
{OsztalyProperties(currentOsztaly).map(((special, i) => (<li key={currentOsztaly + i}>{special}</li>)))}
</ul>
<div className='col'>
{OsztalySpecialSkills(currentOsztaly()).map(skill =>
{OsztalySpecialSkills(currentOsztaly).map(skill =>
<p key={skill.Id} >
<strong className='d-inline'>
{skill.Name}
@@ -60,28 +59,6 @@ function OsztalySelector(props: {currentFaj: () => Faj, currentOsztaly: () => Os
</p>
)}
</div>
{/*<p className='d-inline-flex gap-1'>*/}
{/* {OsztalySpecialSkills(currentOsztaly()).map(skill => (*/}
{/* <button*/}
{/* key={'btn' + skill.Id}*/}
{/* className='btn btn-outline-dark'*/}
{/* type='button'*/}
{/* data-bs-toggle="collapse"*/}
{/* data-bs-target={"#collapse-"+skill.Id}*/}
{/* aria-expanded="false"*/}
{/* aria-controls="collapseExample"*/}
{/* >*/}
{/* {skill.Name}*/}
{/* </button>*/}
{/* ))}*/}
{/*</p>*/}
{/*{OsztalySpecialSkills(currentOsztaly()).map(skill => (*/}
{/* <div key={'collapse'+skill.Id} className="collapse" id={'collapse-' + skill.Id}>*/}
{/* <div className="card card-body">*/}
{/* {skill.Description}*/}
{/* </div>*/}
{/* </div>*/}
{/*))}*/}
</div>
</div>
</>
src/components/TulajdonsagInput.tsx
+11 -11
View File
@@ -12,18 +12,18 @@ function fajiModositoText(faj: Faj, szamolas: (f: Faj) => number) : string {
function TulajdonsagInput(props: {
tulajdonsag: string,
currentFaj : () => Faj,
currentFaj : Faj,
fajiModosito: (faj: Faj) => number,
register: () => any,
getCurrentValue: () => number
changeValue: (val: number) => void
currentValue: number
tooLowError: string,
tooHighError: string
}) {
const {
tulajdonsag,
register,
changeValue,
currentFaj,
getCurrentValue,
currentValue,
fajiModosito,
tooLowError,
tooHighError,
@@ -31,20 +31,20 @@ function TulajdonsagInput(props: {
return (<div className='row m-2'>
<label className='col-lg-1 col-sm-2 col-form-label'>{tulajdonsag}</label>
<div className='col-lg-1 col-sm-2 m-2'>
<input className='form-control' maxLength={2} defaultValue={10} type='number' {...register()} />
<input className='form-control' maxLength={2} defaultValue={10} type='number' value={currentValue} onChange={e => changeValue(Number(e.target.value))} />
</div>
<span className='col-sm-2 m-2'>
{fajiModositoText(currentFaj(), fajiModosito)}
{fajiModositoText(currentFaj, fajiModosito)}
</span>
<span className='col-sm-2 m-2'>
Összesen: { (getCurrentValue() + (fajiModosito(currentFaj()))).toString() }
Összesen: { (currentValue + (fajiModosito(currentFaj))).toString() }
</span>
<span className='col-sm-2 m-2'>
Módosító: { SignedNumberToText(Modifier(getCurrentValue() + fajiModosito(currentFaj()))) }
Módosító: { SignedNumberToText(Modifier(currentValue + fajiModosito(currentFaj))) }
</span>
{getCurrentValue() < 3 && (
{currentValue < 3 && (
<span className='form-field-error'>{tooLowError}</span>)}
{getCurrentValue() > 18 && (
{currentValue > 18 && (
<span className='form-field-error'>{tooHighError}</span>)}
</div>)
}
src/components/Tulajdonsagok.tsx
+23 -26
View File
@@ -1,82 +1,79 @@
import React from "react";
import {RollAllAbilities, Tulajdonsag, TulajdonsagModositokFajokra} from "../domain-models/tulajdonsag";
import {
KarakterTulajdonsagok,
RollAllAbilities,
Tulajdonsag,
TulajdonsagModositokFajokra
} from "../domain-models/tulajdonsag";
import TulajdonsagInput from "./TulajdonsagInput";
import {Faj} from "../domain-models/faj";
import {FieldValues, UseFormRegister} from "react-hook-form";
const tulajdonsagDefaultOptions = {
required: true,
min: 3,
max: 18,
};
function Tulajdonsagok(props: {
currentFaj: () => Faj,
watch: (name: string, defaultValue: any) => any
setValue: (name: string, value: any) => void
register: UseFormRegister<FieldValues>
currentFaj: Faj,
tulajdonsagok: KarakterTulajdonsagok
changeTulajdonsagok: (tulajdonsagok: KarakterTulajdonsagok) => void
}) {
const {currentFaj, watch, setValue, register} = props
const {currentFaj, tulajdonsagok, changeTulajdonsagok} = props
return <>
<div className='row'>
<h5 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h5>
<div className='col-sm-2 m-2'>
<button className='btn btn-dark' type='button'
onClick={() => RollAllAbilities((name: string, value: number) => setValue('tul.'+name, value))}>Dobás
onClick={() => RollAllAbilities(changeTulajdonsagok)}>Dobás
</button>
</div>
</div>
<TulajdonsagInput
tulajdonsag='Erő'
getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Ero, 10))}
currentValue={tulajdonsagok.t_ero}
currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ero)}
register={() => register('tul.'+Tulajdonsag.Ero, tulajdonsagDefaultOptions)}
changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_ero: val})}
tooLowError='Túl gyenge vagy, nem bírtad felemelni a kezed a jelentkezéshez!'
tooHighError='Szét szakadtak az izmaid!'
/>
<TulajdonsagInput
tulajdonsag='Ügyesség'
getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Ugyesseg, 10))}
currentValue={tulajdonsagok.t_ugy}
currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ugyesseg)}
register={() => register('tul.'+Tulajdonsag.Ugyesseg, tulajdonsagDefaultOptions)}
changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_ugy: val})}
tooLowError='Orrabuktál jelentkezés helyett!'
tooHighError='Emberfeletti zsonglörködésedre záptojással válaszoltak a helyiek!'
/>
<TulajdonsagInput
tulajdonsag='Egészség'
getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Egeszseg, 10))}
currentValue={tulajdonsagok.t_egs}
currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Egeszseg)}
register={() => register('tul.'+Tulajdonsag.Egeszseg, tulajdonsagDefaultOptions)}
changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_egs: val})}
tooLowError='Túl beteg vagy ahhoz, hogy kalandozni menj!'
tooHighError='Kicsattanó egészségedet csak a diambroid állíthatja meg, minő véletlen, hogy pont az arcodba robbant...'
/>
<TulajdonsagInput
tulajdonsag='Intelligencia'
getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Intelligencia, 10))}
currentValue={tulajdonsagok.t_int}
currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Intelligencia)}
register={() => register('tul.'+Tulajdonsag.Intelligencia, tulajdonsagDefaultOptions)}
changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_int: val})}
tooLowError='Elfelejtetted, hogy mikor is kéne kalandozni indulni!'
tooHighError='Ilyen tudás és logika birtokában mi szükséged van új információkra? Mindent le tudsz vezetni a már meglévő ismereteidből, és ezt azonnal beláttad.'
/>
<TulajdonsagInput
tulajdonsag='Bölcsesség'
getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Bolcsesseg, 10))}
currentValue={tulajdonsagok.t_bol}
currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Bolcsesseg)}
register={() => register('tul.'+Tulajdonsag.Bolcsesseg, tulajdonsagDefaultOptions)}
changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_bol: val})}
tooLowError='Nem bírtál ellenállni a kíváncsiságodnak, hogy közelebbről is megvizsgáld a tőr hegyét. Nagyon közelről.'
tooHighError='Hatalmas bölcsességedben beláttad a kalandozás veszélyeit és inkább más tevékenységbe fogtál.'
/>
<TulajdonsagInput
tulajdonsag='Karizma'
getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Karizma, 10))}
currentValue={tulajdonsagok.t_kar}
currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Karizma)}
register={() => register('tul.'+Tulajdonsag.Karizma, tulajdonsagDefaultOptions)}
changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_kar: val})}
tooLowError='Mintha taszítanád az embereket, sose sikerült kalandozó csapatot találnod.'
tooHighError='Az ellenkező nem tagjai nem engedték, hogy útnak indulj.'
/>
src/domain-models/tulajdonsag.ts
+9 -7
View File
@@ -40,13 +40,15 @@ function rollAbility() {
return result;
}
export function RollAllAbilities(setValue: (ability: string, value: number) => void) {
setValue(Tulajdonsag.Ero, rollAbility())
setValue(Tulajdonsag.Ugyesseg, rollAbility())
setValue(Tulajdonsag.Egeszseg, rollAbility())
setValue(Tulajdonsag.Intelligencia, rollAbility())
setValue(Tulajdonsag.Bolcsesseg, rollAbility())
setValue(Tulajdonsag.Karizma, rollAbility())
export function RollAllAbilities(setValue: (newValue: KarakterTulajdonsagok) => void) {
setValue({
t_ero: rollAbility(),
t_ugy: rollAbility(),
t_egs: rollAbility(),
t_int: rollAbility(),
t_bol: rollAbility(),
t_kar: rollAbility(),
})
}
export const Modifier = (val : number) => Math.floor(val / 3) - 3
src/pages/CreateCharacter.tsx
+24 -33
View File
@@ -1,6 +1,5 @@
import React from 'react';
import React, {useState} from 'react';
import './CreateCharacter.css'
import {useForm} from "react-hook-form";
import {Faj} from "../domain-models/faj";
import {Osztaly} from "../domain-models/osztaly"
import FajSelector from "../components/FajSelector";
@@ -9,9 +8,7 @@ import OsztalySelector from "../components/OsztalySelector";
import KarakterKepzettsegek from "../components/KarakterKepzettsegek";
import {KarakterTulajdonsagok} from "../domain-models/tulajdonsag";
import MasodlagosErtekek from "../components/MasodlagosErtekek";
const FAJ_FIELD_NAME = 'faj'
const OSZTALY_FIELD_NAME = 'osztaly'
import {KepzettsegId} from "../domain-models/kepzettsegek";
const tulajdonsagDefaults: KarakterTulajdonsagok = {
t_ero: 10,
@@ -23,18 +20,12 @@ const tulajdonsagDefaults: KarakterTulajdonsagok = {
}
function CreateCharacterPage() {
const {
register,
handleSubmit,
setValue,
watch,
formState: {errors}
} = useForm()
const sendForm = (data: any) => console.log(data)
const currentFaj = () => watch(FAJ_FIELD_NAME, Faj.Ember)
const currentOsztaly = () => watch(OSZTALY_FIELD_NAME, Osztaly.Harcos)
let [name, changeName] = useState<string>("Névtelen kanadozó")
let [faj, changeFaj] = useState(Faj.Ember)
let [tulajdonsagok, changeTulajdonsagok] = useState(tulajdonsagDefaults)
let [currentOsztaly, changeOsztaly] = useState<Osztaly>(Osztaly.Harcos)
let [kepzettsegek, changeKepzettsegek] = useState<KepzettsegId[]>([])
return (
<div>
@@ -42,46 +33,46 @@ function CreateCharacterPage() {
<h1>Karakter létrehozása</h1>
</div>
<div className='p-3'>
<form onSubmit={handleSubmit(sendForm)}>
<form>
<div className='row'>
<h5 className='col align-self-center'>Származás</h5>
</div>
<div className='row m-2'>
<label className='col-md-2 col-sm-3 col-form-label' >Név</label>
<input className='col form-control'
defaultValue='Névtelen Kalandozó' {...register('nev', {required: true})} />
{errors.nev && <span className='form-field-error'>A karaktered nem mászkálhat névtelenül a világban!</span>}
value={name}
onChange={(e) => changeName(e.target.value)}/>
{!name && <span className='form-field-error'>A karaktered nem mászkálhat névtelenül a világban!</span>}
</div>
<FajSelector
register={() => register(FAJ_FIELD_NAME, {required: true})}
currentFaj={currentFaj}
changeFaj={changeFaj}
faj={faj}
/>
<hr/>
<Tulajdonsagok
currentFaj={currentFaj}
watch={watch}
setValue={setValue}
register={register}
currentFaj={faj}
tulajdonsagok={tulajdonsagok}
changeTulajdonsagok={changeTulajdonsagok}
/>
<hr />
<div className='row'>
<h5 className='col align-self-center'>Tanult</h5>
</div>
<OsztalySelector
currentFaj={currentFaj}
currentFaj={faj}
currentOsztaly={currentOsztaly}
register={() => register(OSZTALY_FIELD_NAME, {required: true})}
changeOsztaly={changeOsztaly}
/>
<KarakterKepzettsegek
faj={currentFaj()}
osztaly={currentOsztaly()}
t_int={watch('tul', tulajdonsagDefaults).t_int}
register={(fieldName: string) => register(fieldName, {required: true})}
watch={watch}
faj={faj}
osztaly={currentOsztaly}
t_int={tulajdonsagok.t_int}
kepzettsegek={kepzettsegek}
changeKepzettsegek={changeKepzettsegek}
/>
<hr />
<MasodlagosErtekek osztaly={currentOsztaly()} tulajdonsagok={() => watch('tul', tulajdonsagDefaults)} />
<MasodlagosErtekek osztaly={currentOsztaly} tulajdonsagok={tulajdonsagok} />
<div className='d-grid gap-2 m-5'>
<button className='btn btn-danger btn-lg' type='submit'>Létrehozás</button>