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

refactor: split page into smaller components part 3

Browse Source 
everything is nice and small now
This commit is contained in:
Balint Morasz
2023-07-27 00:08:58 +02:00
parent 9f38cff680
commit 9759b6fc81
3 changed files with 134 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FajSelector.tsx
+17 -4
View File
@@ -1,10 +1,11 @@
import React from "react";
import {Faj, FajLabel} from "../domain-models/faj";
import {Faj, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj";
import {UseFormRegisterReturn} from "react-hook-form";
function FajSelector(props: {register: () => UseFormRegisterReturn}) {
const {register} = props
return <div className='row m-2'>
function FajSelector(props: { register: () => UseFormRegisterReturn, currentFaj: () => Faj }) {
const {register, currentFaj} = 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>
@@ -26,6 +27,18 @@ function FajSelector(props: {register: () => UseFormRegisterReturn}) {
</optgroup>
</select>
</div>
<div className='row m-2'>
<label className='col-lg-1 col-sm-2 form-label'></label>
<div className='col'>
<p className='row pt-2'>
{FajDescription(currentFaj())}
</p>
<ul>
{FajSpecials(currentFaj()).map(((special, i) => (<li key={currentFaj() + i}>{special}</li>)))}
</ul>
</div>
</div>
</>
}
export default FajSelector
src/components/OsztalySelector.tsx
+73
View File
@@ -0,0 +1,73 @@
import React from "react";
import {
Osztaly,
OsztalyDescription,
OsztalyLabel,
OsztalyProperties,
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;
return <>
<div className='row m-2'>
<label className='col-lg-1 col-sm-2 col-form-label'>Osztály</label>
<select className="col form-select" defaultValue={Osztaly.Harcos} {...register()}>
<optgroup label='Harcos'>
<option value={Osztaly.Harcos}>{OsztalyLabel(Osztaly.Harcos)}</option>
{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()) && (
<optgroup label='Varázsló'>
<option value={Osztaly.Varazslo}>{OsztalyLabel(Osztaly.Varazslo)}</option>
<option value={Osztaly.Illuzionista}>{OsztalyLabel(Osztaly.Illuzionista)}</option>
</optgroup>
)}
</select>
</div>
<div className='row m-2'>
<label className='col-lg-1 col-sm-2 form-label'></label>
<div className='col' >
<p className='row pt-2'>
{OsztalyDescription(currentOsztaly())}
</p>
<ul>
{OsztalyProperties(currentOsztaly()).map(((special, i) => (<li key={currentOsztaly() + i}>{special}</li>)))}
</ul>
<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>
</>
}
export default OsztalySelector;
src/pages/CreateCharacter.tsx
+23 -77
View File
@@ -1,16 +1,14 @@
import React from 'react';
import './CreateCharacter.css'
import {useForm} from "react-hook-form";
import {Faj, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj";
import {
Osztaly,
OsztalyDescription,
OsztalyLabel,
OsztalyProperties,
OsztalySpecialSkills
} from "../domain-models/osztaly"
import {Faj} from "../domain-models/faj";
import {Osztaly} from "../domain-models/osztaly"
import FajSelector from "../components/FajSelector";
import Tulajdonsagok from "../components/Tulajdonsagok";
import OsztalySelector from "../components/OsztalySelector";
const FAJ_FIELD_NAME = 'faj'
const OSZTALY_FIELD_NAME = 'osztaly'
function CreateCharacterPage() {
const {
@@ -22,9 +20,9 @@ function CreateCharacterPage() {
} = useForm()
const sendForm = (data: any) => console.log(data)
const currentFaj = () => watch().faj || Faj.Ember
const currentFaj = () => watch(FAJ_FIELD_NAME, Faj.Ember)
const currentOsztaly = () => watch().osztaly || Osztaly.Harcos
const currentOsztaly = () => watch(OSZTALY_FIELD_NAME, Osztaly.Harcos)
return (
<div className='row'>
@@ -42,78 +40,26 @@ 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>
<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'>
<p className='row pt-2'>
{FajDescription(currentFaj())}
</p>
<ul>
{FajSpecials(currentFaj()).map(((special, i) => (<li key={currentFaj()+i}>{special}</li>)))}
</ul>
</div>
</div>
<FajSelector
register={() => register(FAJ_FIELD_NAME, {required: true})}
currentFaj={currentFaj}
/>
<hr/>
<Tulajdonsagok currentFaj={currentFaj} watch={watch} setValue={setValue} register={register} />
<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>
</div>
<div className='row m-2'>
<label className='col-lg-1 col-sm-2 col-form-label'>Osztály</label>
<select className="col form-select" defaultValue={Osztaly.Harcos} {...register('osztaly', {required: true})}>
<optgroup label='Harcos'>
<option value={Osztaly.Harcos}>{OsztalyLabel(Osztaly.Harcos)}</option>
{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()) && (
<optgroup label='Varázsló'>
<option value={Osztaly.Varazslo}>{OsztalyLabel(Osztaly.Varazslo)}</option>
<option value={Osztaly.Illuzionista}>{OsztalyLabel(Osztaly.Illuzionista)}</option>
</optgroup>
)}
</select>
</div>
<div className='row m-2'>
<label className='col-lg-1 col-sm-2 form-label'></label>
<div className='col' >
<p className='row pt-2'>
{OsztalyDescription(currentOsztaly())}
</p>
<ul>
{OsztalyProperties(currentOsztaly()).map(((special, i) => (<li key={currentOsztaly() + i}>{special}</li>)))}
</ul>
<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>
<OsztalySelector
currentFaj={currentFaj}
currentOsztaly={currentOsztaly}
register={() => register(OSZTALY_FIELD_NAME, {required: true})}
/>
<div className='d-grid gap-2'>
<button className='btn btn-danger btn-lg' type='submit'>Létrehozás</button>