mirror of
https://github.com/morbalint/kemkas.git
synced 2026-07-17 19:03:46 +00:00
refactor: split page into smaller components
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
import React from "react";
|
||||
import {Faj, FajLabel} from "../domain-models/faj";
|
||||
import {UseFormRegisterReturn} from "react-hook-form";
|
||||
|
||||
function FajSelector(props: {register: () => UseFormRegisterReturn}) {
|
||||
const {register} = props
|
||||
return <div className='row m-2'>
|
||||
<label className='col-lg-1 col-sm-2 col-form-label'>Faj</label>
|
||||
<select className='col form-select' defaultValue={Faj.Ember} {...register()}>
|
||||
<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>
|
||||
<option key={Faj.Birodalmi} value={Faj.Birodalmi}>{FajLabel(Faj.Birodalmi)}</option>
|
||||
<option key={Faj.Eszaki} value={Faj.Eszaki}>{FajLabel(Faj.Eszaki)}</option>
|
||||
<option key={Faj.Etuniai} value={Faj.Etuniai}>{FajLabel(Faj.Etuniai)}</option>
|
||||
<option key={Faj.Osember} value={Faj.Osember}>{FajLabel(Faj.Osember)}</option>
|
||||
</optgroup>
|
||||
<optgroup label='nem emberi fajok'>
|
||||
<option key={Faj.Elf} value={Faj.Elf}>{FajLabel(Faj.Elf)}</option>
|
||||
<option key={Faj.Felelf} value={Faj.Felelf}>{FajLabel(Faj.Felelf)}</option>
|
||||
<option key={Faj.Felork} value={Faj.Felork}>{FajLabel(Faj.Felork)}</option>
|
||||
<option key={Faj.Felszerzet}
|
||||
value={Faj.Felszerzet}>{FajLabel(Faj.Felszerzet)}</option>
|
||||
<option key={Faj.Gnom} value={Faj.Gnom}>{FajLabel(Faj.Gnom)}</option>
|
||||
<option key={Faj.Torpe} value={Faj.Torpe}>{FajLabel(Faj.Torpe)}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default FajSelector
|
||||
@@ -18,8 +18,18 @@ function TulajdonsagInput(props: {
|
||||
fajiModosito: (faj: Faj) => number,
|
||||
register: () => any,
|
||||
getCurrentValue: () => number
|
||||
tooLowError: string,
|
||||
tooHighError: string
|
||||
}) {
|
||||
const {tulajdonsag, register, currentFaj, getCurrentValue, fajiModosito} = props;
|
||||
const {
|
||||
tulajdonsag,
|
||||
register,
|
||||
currentFaj,
|
||||
getCurrentValue,
|
||||
fajiModosito,
|
||||
tooLowError,
|
||||
tooHighError,
|
||||
} = props;
|
||||
return (<div className='row m-2'>
|
||||
<label className='col-lg-1 col-sm-2 col-form-label'>{tulajdonsag}</label>
|
||||
<div className='col-md-1 col-sm-2 m-2'>
|
||||
@@ -35,9 +45,9 @@ function TulajdonsagInput(props: {
|
||||
Módosító: { SignedNumberToText(Modifier(getCurrentValue() + fajiModosito(currentFaj()))) }
|
||||
</span>
|
||||
{getCurrentValue() < 3 && (
|
||||
<span className='form-field-error'>Túl gyenge vagy, nem bírtad felemelni a kezed a jelentkezéshez!</span>)}
|
||||
<span className='form-field-error'>{tooLowError}</span>)}
|
||||
{getCurrentValue() > 18 && (
|
||||
<span className='form-field-error'>Szét szakadtak az izmaid!</span>)}
|
||||
<span className='form-field-error'>{tooHighError}</span>)}
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
import React from "react";
|
||||
import {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>
|
||||
}) {
|
||||
const {currentFaj, watch, setValue, register} = 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(setValue)}>Dobás
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<TulajdonsagInput
|
||||
tulajdonsag='Erő'
|
||||
getCurrentValue={() => Number(watch(Tulajdonsag.Ero, 10))}
|
||||
currentFaj={currentFaj}
|
||||
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ero)}
|
||||
register={() => register(Tulajdonsag.Ero, tulajdonsagDefaultOptions)}
|
||||
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(Tulajdonsag.Ugyesseg, 10))}
|
||||
currentFaj={currentFaj}
|
||||
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ugyesseg)}
|
||||
register={() => register(Tulajdonsag.Ugyesseg, tulajdonsagDefaultOptions)}
|
||||
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(Tulajdonsag.Egeszseg, 10))}
|
||||
currentFaj={currentFaj}
|
||||
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Egeszseg)}
|
||||
register={() => register(Tulajdonsag.Egeszseg, tulajdonsagDefaultOptions)}
|
||||
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(Tulajdonsag.Intelligencia, 10))}
|
||||
currentFaj={currentFaj}
|
||||
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Intelligencia)}
|
||||
register={() => register(Tulajdonsag.Intelligencia, tulajdonsagDefaultOptions)}
|
||||
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(Tulajdonsag.Bolcsesseg, 10))}
|
||||
currentFaj={currentFaj}
|
||||
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Bolcsesseg)}
|
||||
register={() => register(Tulajdonsag.Bolcsesseg, tulajdonsagDefaultOptions)}
|
||||
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(Tulajdonsag.Karizma, 10))}
|
||||
currentFaj={currentFaj}
|
||||
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Karizma)}
|
||||
register={() => register(Tulajdonsag.Karizma, tulajdonsagDefaultOptions)}
|
||||
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.'
|
||||
/>
|
||||
|
||||
</>
|
||||
}
|
||||
|
||||
export default Tulajdonsagok
|
||||
@@ -2,7 +2,6 @@ import React from 'react';
|
||||
import './CreateCharacter.css'
|
||||
import {useForm} from "react-hook-form";
|
||||
import {Faj, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj";
|
||||
import {RollAllAbilities, Tulajdonsag, TulajdonsagModositokFajokra} from "../domain-models/tulajdonsag";
|
||||
import {
|
||||
Osztaly,
|
||||
OsztalyDescription,
|
||||
@@ -10,13 +9,8 @@ import {
|
||||
OsztalyProperties,
|
||||
OsztalySpecialSkills
|
||||
} from "../domain-models/osztaly"
|
||||
import TulajdonsagInput from "../components/TulajdonsagInput";
|
||||
|
||||
const tulajdonsagDefaultOptions = {
|
||||
required: true,
|
||||
min: 3,
|
||||
max: 18,
|
||||
};
|
||||
import FajSelector from "../components/FajSelector";
|
||||
import Tulajdonsagok from "../components/Tulajdonsagok";
|
||||
|
||||
function CreateCharacterPage() {
|
||||
const {
|
||||
@@ -48,28 +42,7 @@ function CreateCharacterPage() {
|
||||
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>}
|
||||
</div>
|
||||
<div className='row m-2'>
|
||||
<label className='col-lg-1 col-sm-2 col-form-label'>Faj</label>
|
||||
<select className='col form-select' defaultValue={Faj.Ember} {...register('faj', {required: true})}>
|
||||
<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>
|
||||
<option key={Faj.Birodalmi} value={Faj.Birodalmi}>{FajLabel(Faj.Birodalmi)}</option>
|
||||
<option key={Faj.Eszaki} value={Faj.Eszaki}>{FajLabel(Faj.Eszaki)}</option>
|
||||
<option key={Faj.Etuniai} value={Faj.Etuniai}>{FajLabel(Faj.Etuniai)}</option>
|
||||
<option key={Faj.Osember} value={Faj.Osember}>{FajLabel(Faj.Osember)}</option>
|
||||
</optgroup>
|
||||
<optgroup label='nem emberi fajok'>
|
||||
<option key={Faj.Elf} value={Faj.Elf}>{FajLabel(Faj.Elf)}</option>
|
||||
<option key={Faj.Felelf} value={Faj.Felelf}>{FajLabel(Faj.Felelf)}</option>
|
||||
<option key={Faj.Felork} value={Faj.Felork}>{FajLabel(Faj.Felork)}</option>
|
||||
<option key={Faj.Felszerzet}
|
||||
value={Faj.Felszerzet}>{FajLabel(Faj.Felszerzet)}</option>
|
||||
<option key={Faj.Gnom} value={Faj.Gnom}>{FajLabel(Faj.Gnom)}</option>
|
||||
<option key={Faj.Torpe} value={Faj.Torpe}>{FajLabel(Faj.Torpe)}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<FajSelector register={() => register('faj', {required: true})} />
|
||||
<div className='row m-2'>
|
||||
<label className='col-lg-1 col-sm-2 form-label'></label>
|
||||
<div className='col'>
|
||||
@@ -82,56 +55,7 @@ function CreateCharacterPage() {
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<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(setValue)}>Dobás
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<TulajdonsagInput
|
||||
tulajdonsag='Erő'
|
||||
getCurrentValue={() => Number(watch(Tulajdonsag.Ero, 10))}
|
||||
currentFaj={currentFaj}
|
||||
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ero)}
|
||||
register={() => register(Tulajdonsag.Ero, tulajdonsagDefaultOptions)}
|
||||
/>
|
||||
<TulajdonsagInput
|
||||
tulajdonsag='Ügyesség'
|
||||
getCurrentValue={() => Number(watch(Tulajdonsag.Ugyesseg, 10))}
|
||||
currentFaj={currentFaj}
|
||||
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ugyesseg)}
|
||||
register={() => register(Tulajdonsag.Ugyesseg, tulajdonsagDefaultOptions)}
|
||||
/>
|
||||
<TulajdonsagInput
|
||||
tulajdonsag='Egészség'
|
||||
getCurrentValue={() => Number(watch(Tulajdonsag.Egeszseg, 10))}
|
||||
currentFaj={currentFaj}
|
||||
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Egeszseg)}
|
||||
register={() => register(Tulajdonsag.Egeszseg, tulajdonsagDefaultOptions)}
|
||||
/>
|
||||
<TulajdonsagInput
|
||||
tulajdonsag='Intelligencia'
|
||||
getCurrentValue={() => Number(watch(Tulajdonsag.Intelligencia, 10))}
|
||||
currentFaj={currentFaj}
|
||||
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Intelligencia)}
|
||||
register={() => register(Tulajdonsag.Intelligencia, tulajdonsagDefaultOptions)}
|
||||
/>
|
||||
<TulajdonsagInput
|
||||
tulajdonsag='Bölcsesség'
|
||||
getCurrentValue={() => Number(watch(Tulajdonsag.Bolcsesseg, 10))}
|
||||
currentFaj={currentFaj}
|
||||
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Bolcsesseg)}
|
||||
register={() => register(Tulajdonsag.Bolcsesseg, tulajdonsagDefaultOptions)}
|
||||
/>
|
||||
<TulajdonsagInput
|
||||
tulajdonsag='Karizma'
|
||||
getCurrentValue={() => Number(watch(Tulajdonsag.Karizma, 10))}
|
||||
currentFaj={currentFaj}
|
||||
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Karizma)}
|
||||
register={() => register(Tulajdonsag.Karizma, tulajdonsagDefaultOptions)}
|
||||
/>
|
||||
<Tulajdonsagok currentFaj={currentFaj} watch={watch} setValue={setValue} register={register} />
|
||||
<hr />
|
||||
<div className='row'>
|
||||
<h5 className='col-lg-2 col-sm-4 align-self-center'>Tanult</h5>
|
||||
|
||||
Reference in New Issue
Block a user