kemkas/kemkas-gh-mirror
1
0
Fork 0
mirror of https://github.com/morbalint/kemkas.git synced 2026-07-17 19:03:46 +00:00
Code Issues 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 React from "react";
import {Faj, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj"; import {Faj, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj";
import {UseFormRegisterReturn} from "react-hook-form";
function FajSelector(props: { register: () => UseFormRegisterReturn, currentFaj: () => Faj }) { function FajSelector(props: { faj: Faj, changeFaj: (val: Faj) => void }) {
const {register, currentFaj} = props const {faj, changeFaj} = props
return <> return <>
<div className='row m-2'> <div className='row m-2'>
<label className='col-md-2 col-sm-3 col-form-label'>Faj</label> <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> <option key={Faj.Ember} value={Faj.Ember}>{FajLabel(Faj.Ember)}</option>
<optgroup label='más emberi népek'> <optgroup label='más emberi népek'>
<option key={Faj.Amazon} value={Faj.Amazon}>{FajLabel(Faj.Amazon)}</option> <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> <label className='col-md-2 col-sm-3 form-label'></label>
<div className='col'> <div className='col'>
<p className='row pt-2'> <p className='row pt-2'>
{FajDescription(currentFaj())} {FajDescription(faj)}
</p> </p>
<ul> <ul>
{FajSpecials(currentFaj()).map(((special, i) => (<li key={currentFaj() + i}>{special}</li>)))} {FajSpecials(faj).map(((special, i) => (<li key={faj + i}>{special}</li>)))}
</ul> </ul>
</div> </div>
</div> </div>
src/components/KarakterKepzettsegek.tsx
+12 -46
View File
@@ -1,34 +1,32 @@
import React from "react"; import React from "react";
import KepzettsegSelector from "./KepzettsegSelector"; import KepzettsegSelector from "./KepzettsegSelector";
import {Osztaly} from "../domain-models/osztaly"; import {Osztaly} from "../domain-models/osztaly";
import {UseFormRegisterReturn} from "react-hook-form";
import { import {
AvailableKezpettsegList, AvailableKezpettsegList,
Kepzettseg, Kepzettseg,
Kepzettsegek, Kepzettsegek,
KepzettsegId, KepzettsegId,
KepzettsegLista
} from "../domain-models/kepzettsegek"; } from "../domain-models/kepzettsegek";
import {Modifier} from "../domain-models/tulajdonsag"; import {Modifier} from "../domain-models/tulajdonsag";
import {Faj} from "../domain-models/faj"; 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}) { function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg: number, getKepzettsegListaN: (n: number) => Kepzettseg[], kepzettsegek: KepzettsegId[], changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void}) {
const {title, numberOfKepzettseg, getKepzettsegListaN, register, availableKepzettsegList, getKepzettsegN} = props const {title, numberOfKepzettseg, getKepzettsegListaN, kepzettsegek, changeKepzettsegek} = props
const klist = Array.from(new Array(numberOfKepzettseg).keys()) const klist = Array.from(new Array(numberOfKepzettseg).keys())
const preCalculated: { const preCalculated: {
kepzettsegek: Kepzettseg[], kepzettsegek: Kepzettseg[],
registration: UseFormRegisterReturn, changeKepzettseg: (newKepzettseg: KepzettsegId) => void,
selected: Kepzettseg, selected: Kepzettseg,
}[] = []; }[] = [];
for (let i = 0; i < numberOfKepzettseg; i++) { for (let i = 0; i < numberOfKepzettseg; i++) {
preCalculated.push({ preCalculated.push({
kepzettsegek: getKepzettsegListaN(i), kepzettsegek: getKepzettsegListaN(i),
registration: register(i), selected: Kepzettsegek[kepzettsegek[i]],
selected: getKepzettsegN(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 <KepzettsegSelector
key={title+idx} key={title+idx}
kepzettsegek={preCalculated[idx].kepzettsegek} kepzettsegek={preCalculated[idx].kepzettsegek}
fieldRegistration={preCalculated[idx].registration}
selected={preCalculated[idx].selected} selected={preCalculated[idx].selected}
changeKepzettseg={preCalculated[idx].changeKepzettseg}
/>) />)
} }
</div> </div>
@@ -58,10 +56,10 @@ function KarakterKepzettsegek (props: {
faj: Faj faj: Faj
osztaly: Osztaly, osztaly: Osztaly,
t_int: number, t_int: number,
register: (fieldName: string) => UseFormRegisterReturn, kepzettsegek: KepzettsegId[],
watch: (fieldName: string, defaultValue: KepzettsegId) => string changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
}) { }) {
const { faj, osztaly, t_int, register, watch } = props const { faj, osztaly, t_int, kepzettsegek, changeKepzettsegek} = props
const availableKepzettsegList = AvailableKezpettsegList(osztaly) const availableKepzettsegList = AvailableKezpettsegList(osztaly)
@@ -76,33 +74,10 @@ function KarakterKepzettsegek (props: {
} }
console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg) console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg)
const getKepzettsegN = (n: number) => Kepzettsegek[watch('kepzettseg.'+n, availableKepzettsegList[n].Id) as KepzettsegId]
const getKepzettsegListaN = (n: number) => { const getKepzettsegListaN = (n: number) => {
let response = availableKepzettsegList; let response = availableKepzettsegList;
for (let i = 0; i < numberOfKepzettseg; i++) { for (let i = 0; i < numberOfKepzettseg; i++) {
response = response.filter(x => i === n || x.Id !== getKepzettsegN(i).Id) response = response.filter(x => i === n || x.Id !== kepzettsegek[i])
}
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)
} }
return response return response
} }
@@ -111,18 +86,9 @@ function KarakterKepzettsegek (props: {
<InternalKepzettsegekSelector <InternalKepzettsegekSelector
title="Képzettségek" title="Képzettségek"
numberOfKepzettseg={numberOfKepzettseg} numberOfKepzettseg={numberOfKepzettseg}
availableKepzettsegList={availableKepzettsegList}
getKepzettsegListaN={getKepzettsegListaN} getKepzettsegListaN={getKepzettsegListaN}
register={(n: number) => register('kepzettseg.' + n)} changeKepzettsegek={changeKepzettsegek}
getKepzettsegN={getKepzettsegN} /> kepzettsegek={kepzettsegek} />
{osztaly === Osztaly.Tolvaj &&
<InternalKepzettsegekSelector
title="Tolvaj Képzettségek"
numberOfKepzettseg={4}
availableKepzettsegList={tolvajKepzettsegek}
getKepzettsegListaN={getTolvajKepzettsegListaN}
register={(n: number) => register('tolvaj_kepzettseg.' + n)}
getKepzettsegN={getTolvajKepzettsegN} />}
</> </>
} }
src/components/KepzettsegSelector.tsx
+4 -5
View File
@@ -1,7 +1,6 @@
import React from "react"; import React from "react";
import {Kepzettseg} from "../domain-models/kepzettsegek"; import {Kepzettseg, KepzettsegId} from "../domain-models/kepzettsegek";
import {TulajdonsagLabel} from "../domain-models/tulajdonsag"; import {TulajdonsagLabel} from "../domain-models/tulajdonsag";
import {UseFormRegisterReturn} from "react-hook-form";
import {OsztalyLabel} from "../domain-models/osztaly"; import {OsztalyLabel} from "../domain-models/osztaly";
function kepzettsegOptionText(k: Kepzettseg) { 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)); 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 <> return <>
<div className='row'> <div className='row'>
<select className='form-control' <select className='form-control'
value={selected.Id} {...fieldRegistration}> value={selected.Id} onChange={e => changeKepzettseg(e.target.value as KepzettsegId)}>
{kepzettsegek.map(k =>( {kepzettsegek.map(k =>(
<option key={k.Id} value={k.Id}> <option key={k.Id} value={k.Id}>
{kepzettsegOptionText(k)} {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; const { osztaly, tulajdonsagok } = props;
@@ -125,33 +125,33 @@ function MasodlagosErtekek(props: {osztaly: Osztaly, tulajdonsagok: () => Karakt
<span>(HP)</span> <span>(HP)</span>
</OverlayTrigger> </OverlayTrigger>
</label> </label>
<p className='col'>{HP(osztaly, tulajdonsagok().t_egs)}</p> <p className='col'>{HP(osztaly, tulajdonsagok.t_egs)}</p>
</div> </div>
<div className='row m-2'> <div className='row m-2'>
<label className='col-sm-6 col-8 col-form-label' >Védekezési Osztály (VO)</label> <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>
<div className='row m-2'> <div className='row m-2'>
<label className='col-sm-6 col-8 col-form-label' >Közelharci támadás</label> <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>
<div className='row m-2'> <div className='row m-2'>
<label className='col-sm-6 col-8 col-form-label' >Célzó támadás</label> <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> </div>
<div className='col-lg-6'> <div className='col-lg-6'>
<div className='row m-2'> <div className='row m-2'>
<label className='col-sm-6 col-8 col-form-label' >Kitartás mentő</label> <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>
<div className='row m-2'> <div className='row m-2'>
<label className='col-sm-6 col-8 col-form-label' >Reflex mentő</label> <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>
<div className='row m-2'> <div className='row m-2'>
<label className='col-sm-6 col-8 col-form-label' >Akaraterő mentő </label> <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> </div>
</div> </div>
src/components/OsztalySelector.tsx
+9 -32
View File
@@ -7,26 +7,25 @@ import {
OsztalySpecialSkills OsztalySpecialSkills
} from "../domain-models/osztaly"; } from "../domain-models/osztaly";
import {Faj} from "../domain-models/faj"; import {Faj} from "../domain-models/faj";
import {UseFormRegisterReturn} from "react-hook-form";
function OsztalySelector(props: {currentFaj: () => Faj, currentOsztaly: () => Osztaly, register: () => UseFormRegisterReturn}) { function OsztalySelector(props: {currentFaj: Faj, currentOsztaly: Osztaly, changeOsztaly: (newOsztaly: Osztaly) => void}) {
const {currentFaj, currentOsztaly, register} = props; const {currentFaj, currentOsztaly, changeOsztaly} = props;
return <> return <>
<div className='row m-2'> <div className='row m-2'>
<label className='col-md-2 col-sm-3 col-form-label'>Osztály</label> <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'> <optgroup label='Harcos'>
<option value={Osztaly.Harcos}>{OsztalyLabel(Osztaly.Harcos)}</option> <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.Amazon}>{OsztalyLabel(Osztaly.Amazon)}</option>) }
<option value={Osztaly.Barbar}>{OsztalyLabel(Osztaly.Barbar)}</option> <option value={Osztaly.Barbar}>{OsztalyLabel(Osztaly.Barbar)}</option>
<option value={Osztaly.Ijasz}>{OsztalyLabel(Osztaly.Ijasz)}</option> <option value={Osztaly.Ijasz}>{OsztalyLabel(Osztaly.Ijasz)}</option>
<option value={Osztaly.Kaloz}>{OsztalyLabel(Osztaly.Kaloz)}</option> <option value={Osztaly.Kaloz}>{OsztalyLabel(Osztaly.Kaloz)}</option>
</optgroup> </optgroup>
<option value={Osztaly.Pap}>{OsztalyLabel(Osztaly.Pap)}</option> <option value={Osztaly.Pap}>{OsztalyLabel(Osztaly.Pap)}</option>
{currentFaj() !== Faj.Amazon && (<option value={Osztaly.Tolvaj}>{OsztalyLabel(Osztaly.Tolvaj)}</option>)} {currentFaj !== Faj.Amazon && (<option value={Osztaly.Tolvaj}>{OsztalyLabel(Osztaly.Tolvaj)}</option>)}
{![Faj.Osember, Faj.Amazon].includes(currentFaj()) && ( {![Faj.Osember, Faj.Amazon].includes(currentFaj) && (
<optgroup label='Varázsló'> <optgroup label='Varázsló'>
<option value={Osztaly.Varazslo}>{OsztalyLabel(Osztaly.Varazslo)}</option> <option value={Osztaly.Varazslo}>{OsztalyLabel(Osztaly.Varazslo)}</option>
<option value={Osztaly.Illuzionista}>{OsztalyLabel(Osztaly.Illuzionista)}</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> <label className='col-md-2 col-sm-3 form-label'></label>
<div className='col' > <div className='col' >
<p className='row pt-2'> <p className='row pt-2'>
{OsztalyDescription(currentOsztaly())} {OsztalyDescription(currentOsztaly)}
</p> </p>
<ul> <ul>
{OsztalyProperties(currentOsztaly()).map(((special, i) => (<li key={currentOsztaly() + i}>{special}</li>)))} {OsztalyProperties(currentOsztaly).map(((special, i) => (<li key={currentOsztaly + i}>{special}</li>)))}
</ul> </ul>
<div className='col'> <div className='col'>
{OsztalySpecialSkills(currentOsztaly()).map(skill => {OsztalySpecialSkills(currentOsztaly).map(skill =>
<p key={skill.Id} > <p key={skill.Id} >
<strong className='d-inline'> <strong className='d-inline'>
{skill.Name} {skill.Name}
@@ -60,28 +59,6 @@ function OsztalySelector(props: {currentFaj: () => Faj, currentOsztaly: () => Os
</p> </p>
)} )}
</div> </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>
</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: { function TulajdonsagInput(props: {
tulajdonsag: string, tulajdonsag: string,
currentFaj : () => Faj, currentFaj : Faj,
fajiModosito: (faj: Faj) => number, fajiModosito: (faj: Faj) => number,
register: () => any, changeValue: (val: number) => void
getCurrentValue: () => number currentValue: number
tooLowError: string, tooLowError: string,
tooHighError: string tooHighError: string
}) { }) {
const { const {
tulajdonsag, tulajdonsag,
register, changeValue,
currentFaj, currentFaj,
getCurrentValue, currentValue,
fajiModosito, fajiModosito,
tooLowError, tooLowError,
tooHighError, tooHighError,
@@ -31,20 +31,20 @@ function TulajdonsagInput(props: {
return (<div className='row m-2'> return (<div className='row m-2'>
<label className='col-lg-1 col-sm-2 col-form-label'>{tulajdonsag}</label> <label className='col-lg-1 col-sm-2 col-form-label'>{tulajdonsag}</label>
<div className='col-lg-1 col-sm-2 m-2'> <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> </div>
<span className='col-sm-2 m-2'> <span className='col-sm-2 m-2'>
{fajiModositoText(currentFaj(), fajiModosito)} {fajiModositoText(currentFaj, fajiModosito)}
</span> </span>
<span className='col-sm-2 m-2'> <span className='col-sm-2 m-2'>
Összesen: { (getCurrentValue() + (fajiModosito(currentFaj()))).toString() } Összesen: { (currentValue + (fajiModosito(currentFaj))).toString() }
</span> </span>
<span className='col-sm-2 m-2'> <span className='col-sm-2 m-2'>
Módosító: { SignedNumberToText(Modifier(getCurrentValue() + fajiModosito(currentFaj()))) } Módosító: { SignedNumberToText(Modifier(currentValue + fajiModosito(currentFaj))) }
</span> </span>
{getCurrentValue() < 3 && ( {currentValue < 3 && (
<span className='form-field-error'>{tooLowError}</span>)} <span className='form-field-error'>{tooLowError}</span>)}
{getCurrentValue() > 18 && ( {currentValue > 18 && (
<span className='form-field-error'>{tooHighError}</span>)} <span className='form-field-error'>{tooHighError}</span>)}
</div>) </div>)
} }
src/components/Tulajdonsagok.tsx
+23 -26
View File
@@ -1,82 +1,79 @@
import React from "react"; 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 TulajdonsagInput from "./TulajdonsagInput";
import {Faj} from "../domain-models/faj"; import {Faj} from "../domain-models/faj";
import {FieldValues, UseFormRegister} from "react-hook-form";
const tulajdonsagDefaultOptions = {
required: true,
min: 3,
max: 18,
};
function Tulajdonsagok(props: { function Tulajdonsagok(props: {
currentFaj: () => Faj, currentFaj: Faj,
watch: (name: string, defaultValue: any) => any tulajdonsagok: KarakterTulajdonsagok
setValue: (name: string, value: any) => void changeTulajdonsagok: (tulajdonsagok: KarakterTulajdonsagok) => void
register: UseFormRegister<FieldValues>
}) { }) {
const {currentFaj, watch, setValue, register} = props const {currentFaj, tulajdonsagok, changeTulajdonsagok} = props
return <> return <>
<div className='row'> <div className='row'>
<h5 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h5> <h5 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h5>
<div className='col-sm-2 m-2'> <div className='col-sm-2 m-2'>
<button className='btn btn-dark' type='button' <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> </button>
</div> </div>
</div> </div>
<TulajdonsagInput <TulajdonsagInput
tulajdonsag='Erő' tulajdonsag='Erő'
getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Ero, 10))} currentValue={tulajdonsagok.t_ero}
currentFaj={currentFaj} currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ero)} 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!' tooLowError='Túl gyenge vagy, nem bírtad felemelni a kezed a jelentkezéshez!'
tooHighError='Szét szakadtak az izmaid!' tooHighError='Szét szakadtak az izmaid!'
/> />
<TulajdonsagInput <TulajdonsagInput
tulajdonsag='Ügyesség' tulajdonsag='Ügyesség'
getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Ugyesseg, 10))} currentValue={tulajdonsagok.t_ugy}
currentFaj={currentFaj} currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ugyesseg)} fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ugyesseg)}
register={() => register('tul.'+Tulajdonsag.Ugyesseg, tulajdonsagDefaultOptions)} changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_ugy: val})}
tooLowError='Orrabuktál jelentkezés helyett!' tooLowError='Orrabuktál jelentkezés helyett!'
tooHighError='Emberfeletti zsonglörködésedre záptojással válaszoltak a helyiek!' tooHighError='Emberfeletti zsonglörködésedre záptojással válaszoltak a helyiek!'
/> />
<TulajdonsagInput <TulajdonsagInput
tulajdonsag='Egészség' tulajdonsag='Egészség'
getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Egeszseg, 10))} currentValue={tulajdonsagok.t_egs}
currentFaj={currentFaj} currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Egeszseg)} 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!' 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...' tooHighError='Kicsattanó egészségedet csak a diambroid állíthatja meg, minő véletlen, hogy pont az arcodba robbant...'
/> />
<TulajdonsagInput <TulajdonsagInput
tulajdonsag='Intelligencia' tulajdonsag='Intelligencia'
getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Intelligencia, 10))} currentValue={tulajdonsagok.t_int}
currentFaj={currentFaj} currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Intelligencia)} 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!' 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.' 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 <TulajdonsagInput
tulajdonsag='Bölcsesség' tulajdonsag='Bölcsesség'
getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Bolcsesseg, 10))} currentValue={tulajdonsagok.t_bol}
currentFaj={currentFaj} currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Bolcsesseg)} 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.' 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.' tooHighError='Hatalmas bölcsességedben beláttad a kalandozás veszélyeit és inkább más tevékenységbe fogtál.'
/> />
<TulajdonsagInput <TulajdonsagInput
tulajdonsag='Karizma' tulajdonsag='Karizma'
getCurrentValue={() => Number(watch('tul.'+Tulajdonsag.Karizma, 10))} currentValue={tulajdonsagok.t_kar}
currentFaj={currentFaj} currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Karizma)} 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.' 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.' 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; return result;
} }
export function RollAllAbilities(setValue: (ability: string, value: number) => void) { export function RollAllAbilities(setValue: (newValue: KarakterTulajdonsagok) => void) {
setValue(Tulajdonsag.Ero, rollAbility()) setValue({
setValue(Tulajdonsag.Ugyesseg, rollAbility()) t_ero: rollAbility(),
setValue(Tulajdonsag.Egeszseg, rollAbility()) t_ugy: rollAbility(),
setValue(Tulajdonsag.Intelligencia, rollAbility()) t_egs: rollAbility(),
setValue(Tulajdonsag.Bolcsesseg, rollAbility()) t_int: rollAbility(),
setValue(Tulajdonsag.Karizma, rollAbility()) t_bol: rollAbility(),
t_kar: rollAbility(),
})
} }
export const Modifier = (val : number) => Math.floor(val / 3) - 3 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 './CreateCharacter.css'
import {useForm} from "react-hook-form";
import {Faj} from "../domain-models/faj"; import {Faj} from "../domain-models/faj";
import {Osztaly} from "../domain-models/osztaly" import {Osztaly} from "../domain-models/osztaly"
import FajSelector from "../components/FajSelector"; import FajSelector from "../components/FajSelector";
@@ -9,9 +8,7 @@ import OsztalySelector from "../components/OsztalySelector";
import KarakterKepzettsegek from "../components/KarakterKepzettsegek"; import KarakterKepzettsegek from "../components/KarakterKepzettsegek";
import {KarakterTulajdonsagok} from "../domain-models/tulajdonsag"; import {KarakterTulajdonsagok} from "../domain-models/tulajdonsag";
import MasodlagosErtekek from "../components/MasodlagosErtekek"; import MasodlagosErtekek from "../components/MasodlagosErtekek";
import {KepzettsegId} from "../domain-models/kepzettsegek";
const FAJ_FIELD_NAME = 'faj'
const OSZTALY_FIELD_NAME = 'osztaly'
const tulajdonsagDefaults: KarakterTulajdonsagok = { const tulajdonsagDefaults: KarakterTulajdonsagok = {
t_ero: 10, t_ero: 10,
@@ -23,18 +20,12 @@ const tulajdonsagDefaults: KarakterTulajdonsagok = {
} }
function CreateCharacterPage() { 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) let [name, changeName] = useState<string>("Névtelen kanadozó")
let [faj, changeFaj] = useState(Faj.Ember)
const currentOsztaly = () => watch(OSZTALY_FIELD_NAME, Osztaly.Harcos) let [tulajdonsagok, changeTulajdonsagok] = useState(tulajdonsagDefaults)
let [currentOsztaly, changeOsztaly] = useState<Osztaly>(Osztaly.Harcos)
let [kepzettsegek, changeKepzettsegek] = useState<KepzettsegId[]>([])
return ( return (
<div> <div>
@@ -42,46 +33,46 @@ function CreateCharacterPage() {
<h1>Karakter létrehozása</h1> <h1>Karakter létrehozása</h1>
</div> </div>
<div className='p-3'> <div className='p-3'>
<form onSubmit={handleSubmit(sendForm)}> <form>
<div className='row'> <div className='row'>
<h5 className='col align-self-center'>Származás</h5> <h5 className='col align-self-center'>Származás</h5>
</div> </div>
<div className='row m-2'> <div className='row m-2'>
<label className='col-md-2 col-sm-3 col-form-label' >Név</label> <label className='col-md-2 col-sm-3 col-form-label' >Név</label>
<input className='col form-control' <input className='col form-control'
defaultValue='Névtelen Kalandozó' {...register('nev', {required: true})} /> value={name}
{errors.nev && <span className='form-field-error'>A karaktered nem mászkálhat névtelenül a világban!</span>} 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> </div>
<FajSelector <FajSelector
register={() => register(FAJ_FIELD_NAME, {required: true})} changeFaj={changeFaj}
currentFaj={currentFaj} faj={faj}
/> />
<hr/> <hr/>
<Tulajdonsagok <Tulajdonsagok
currentFaj={currentFaj} currentFaj={faj}
watch={watch} tulajdonsagok={tulajdonsagok}
setValue={setValue} changeTulajdonsagok={changeTulajdonsagok}
register={register}
/> />
<hr /> <hr />
<div className='row'> <div className='row'>
<h5 className='col align-self-center'>Tanult</h5> <h5 className='col align-self-center'>Tanult</h5>
</div> </div>
<OsztalySelector <OsztalySelector
currentFaj={currentFaj} currentFaj={faj}
currentOsztaly={currentOsztaly} currentOsztaly={currentOsztaly}
register={() => register(OSZTALY_FIELD_NAME, {required: true})} changeOsztaly={changeOsztaly}
/> />
<KarakterKepzettsegek <KarakterKepzettsegek
faj={currentFaj()} faj={faj}
osztaly={currentOsztaly()} osztaly={currentOsztaly}
t_int={watch('tul', tulajdonsagDefaults).t_int} t_int={tulajdonsagok.t_int}
register={(fieldName: string) => register(fieldName, {required: true})} kepzettsegek={kepzettsegek}
watch={watch} changeKepzettsegek={changeKepzettsegek}
/> />
<hr /> <hr />
<MasodlagosErtekek osztaly={currentOsztaly()} tulajdonsagok={() => watch('tul', tulajdonsagDefaults)} /> <MasodlagosErtekek osztaly={currentOsztaly} tulajdonsagok={tulajdonsagok} />
<div className='d-grid gap-2 m-5'> <div className='d-grid gap-2 m-5'>
<button className='btn btn-danger btn-lg' type='submit'>Létrehozás</button> <button className='btn btn-danger btn-lg' type='submit'>Létrehozás</button>