50 lines
2.2 KiB
TypeScript
50 lines
2.2 KiB
TypeScript
import React, {ReactNode} from 'react';
|
|
import './CreateCharacter.css'
|
|
import {useForm} from "react-hook-form";
|
|
import {Osztaly, OsztalyLabel} from "../domain-models/enums";
|
|
import {randomInt} from "crypto";
|
|
|
|
function CreateCharacterPage() {
|
|
const { register, handleSubmit, setValue, formState : { errors} } = useForm()
|
|
const sendForm = (data: any) => console.log(data)
|
|
|
|
return (
|
|
<div className='row'>
|
|
<div className='container-fluid p-5 bg-black text-white text-center'>
|
|
<h1>Karakter létrehozása</h1>
|
|
</div>
|
|
<div className='p-3'>
|
|
<form onSubmit={handleSubmit(sendForm)} className='col-12'>
|
|
<div className='row p-3'>
|
|
<label className='col-sm-4'>Név</label>
|
|
<input className='col-sm-4' {...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 p-3'>
|
|
<label className='col-sm-4'>Osztály</label>
|
|
<select className='col-sm-4' {...register('osztaly', {required: true})}>
|
|
{Object.values(Osztaly).map((oszt) : ReactNode =>
|
|
(<option key={oszt} value={oszt}>{OsztalyLabel(oszt)}</option>)
|
|
)}
|
|
</select>
|
|
</div>
|
|
<hr />
|
|
<p>Tulajdonságok</p>
|
|
<div className='row p-3'>
|
|
<label className='col-sm-4'>Erő</label>
|
|
<input className='col-sm-4' {...register('ero', {required: true, min: 1, max: 20, pattern: /[0-9]{1,2}/})} />
|
|
{errors.ero && (<span className='form-field-error'>Az erődnek 0 és 20 között kell lennie</span>)}
|
|
<button className='btn btn-secondary, col-sm-4' type='button' onClick={() => setValue('ero', randomInt(1,6))}>Dobás</button>
|
|
</div>
|
|
|
|
<div>
|
|
<button type='submit'>Létrehozás</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CreateCharacterPage;
|