303 lines
17 KiB
TypeScript
303 lines
17 KiB
TypeScript
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} from "../domain-models/osztaly"
|
|
|
|
function getRandomInt(max: number) {
|
|
return Math.floor(Math.random() * max) + 1;
|
|
}
|
|
|
|
function rollAbility() {
|
|
let min = 6;
|
|
let sum = 0;
|
|
let rolls: number[] = []
|
|
for (let i = 0; i < 4; i++) {
|
|
const roll = getRandomInt(6);
|
|
if (roll < min) {
|
|
min = roll;
|
|
}
|
|
sum += roll;
|
|
rolls = [...rolls, roll]
|
|
}
|
|
const result = sum - min;
|
|
console.log("Rolled: " + rolls + " got: " + result)
|
|
return result;
|
|
}
|
|
|
|
const modifier = (val : number) => Math.floor(val / 3) - 3
|
|
|
|
const fajiEroModosito = (faj: Faj) => [Faj.Felork, Faj.Osember, Faj.Eszaki].includes(faj) ? +1 : [Faj.Gnom, Faj.Felszerzet].includes(faj) ? -1 : 0
|
|
|
|
const fajiUgyModosito = (faj: Faj) => [Faj.Elf, Faj.Felszerzet].includes(faj) ? +1 : 0
|
|
|
|
const fajiEgsModosito = (faj: Faj) => [Faj.Etuniai, Faj.Osember, Faj.Felork, Faj.Torpe].includes(faj) ? +1 :
|
|
[Faj.Birodalmi, Faj.Elf].includes(faj) ? -1 : 0
|
|
|
|
const fajiIntModosito = (faj: Faj) => [Faj.Gnom, Faj.Birodalmi].includes(faj) ? +1 :
|
|
[Faj.Osember].includes(faj) ? -1 : 0
|
|
|
|
const fajiBolModosito = (faj: Faj) => [Faj.Osember, Faj.Eszaki, Faj.Etuniai].includes(faj) ? -1 : 0
|
|
|
|
const fajiKarModosito = (faj: Faj) => [Faj.Torpe].includes(faj) ? -1 :
|
|
[Faj.Felork].includes(faj) ? -2 : 0
|
|
|
|
function signedNumberToText(val: number) : string {
|
|
return val > 0 ? '+'+val : val.toString()
|
|
}
|
|
|
|
function fajiModositoText(faj: Faj, szamolas: (f: Faj) => number) : string {
|
|
const mod = szamolas(faj)
|
|
return (mod !== 0) ? signedNumberToText(mod) + ' (' + FajLabel(faj) + ')' : ''
|
|
}
|
|
|
|
function rollAllAbilities(setValue: (ability: string, value: number) => void) {
|
|
setValue('ero', rollAbility())
|
|
setValue('ugy', rollAbility())
|
|
setValue('egs', rollAbility())
|
|
setValue('int', rollAbility())
|
|
setValue('bol', rollAbility())
|
|
setValue('kar', rollAbility())
|
|
}
|
|
|
|
function CreateCharacterPage() {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
formState: {errors}
|
|
} = useForm()
|
|
const sendForm = (data: any) => console.log(data)
|
|
|
|
const currentFaj = () => watch().faj || Faj.Ember
|
|
|
|
const currentOsztaly = () => watch().osztaly || Osztaly.Harcos
|
|
|
|
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 m-2'>
|
|
<label className='col-lg-1 col-sm-2 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>}
|
|
</div>
|
|
<div className='row m-2'>
|
|
<label className='col-lg-1 col-sm-2 col-form-label'>Faj</label>
|
|
<select className='col form-select' {...register('faj', {required: true})}>
|
|
<option key={Faj.Ember} selected={true} 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>
|
|
<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) => (<li>{special}</li>)))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
<div className='row'>
|
|
<h5 className='col-lg-2 col-sm-4 text-center 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>
|
|
<div className='row m-2'>
|
|
<label className='col-lg-1 col-sm-2'>Erő</label>
|
|
<input className='col-md-1 col-sm-2 m-2' defaultValue={10} type='number' {...register('ero', {
|
|
required: true,
|
|
min: 3,
|
|
max: 18,
|
|
})} />
|
|
<span className='col-sm-2 m-2'>
|
|
{fajiModositoText(currentFaj(), fajiEroModosito)}
|
|
</span>
|
|
<span className='col-sm-2 m-2'>
|
|
Összesen: { (Number((watch('ero') || 10)) + (fajiEroModosito(currentFaj()))).toString() }
|
|
</span>
|
|
<span className='col-sm-2 m-2'>
|
|
Módosító: { signedNumberToText(modifier(Number((watch('ero') || 10)) + fajiEroModosito(currentFaj()))) }
|
|
</span>
|
|
{Number(watch('ero')) < 3 && (
|
|
<span className='form-field-error'>Túl gyenge vagy, nem bírtad felemelni a kezed a jelentkezéshez!</span>)}
|
|
{Number(watch('ero')) > 18 && (
|
|
<span className='form-field-error'>Szét szakadtak az izmaid!</span>)}
|
|
</div>
|
|
<div className='row m-2'>
|
|
<label className='col-lg-1 col-sm-2'>Ügyesség</label>
|
|
<input className='col-sm-1 m-2' defaultValue={10} type='number' {...register('ugy', {
|
|
required: true,
|
|
min: 3,
|
|
max: 18,
|
|
})} />
|
|
<span className='col-sm-2 m-2'>
|
|
{fajiModositoText(currentFaj(), fajiUgyModosito)}
|
|
</span>
|
|
<span className='col-sm-2 m-2'>
|
|
Összesen: { (Number((watch('ugy') || 10)) + (fajiUgyModosito(currentFaj()))).toString() }
|
|
</span>
|
|
<span className='col-sm-2 m-2'>
|
|
Módosító: { signedNumberToText(modifier(Number((watch('ugy') || 10)) + fajiUgyModosito(currentFaj()))) }
|
|
</span>
|
|
{errors.ugy && Number(watch('ugy')) < 3 && (
|
|
<span className='form-field-error'>Orrabuktál jelentkezés helyett!</span>)}
|
|
{errors.ugy && Number(watch('ugy')) > 18 && (
|
|
<span className='form-field-error'>Emberfeletti zsonglörködésedre záptojással válaszoltak a helyiek!</span>)}
|
|
</div>
|
|
<div className='row m-2'>
|
|
<label className='col-lg-1 col-sm-2'>Egészség</label>
|
|
<input className='col-sm-1 m-2' defaultValue={10} type='number' {...register('egs', {
|
|
required: true,
|
|
min: 3,
|
|
max: 18
|
|
})} />
|
|
<span className='col-sm-2 m-2'>
|
|
{fajiModositoText(currentFaj(), fajiEgsModosito)}
|
|
</span>
|
|
<span className='col-sm-2 m-2'>
|
|
Összesen: { (Number((watch('egs') || 10)) + (fajiEgsModosito(currentFaj()))).toString() }
|
|
</span>
|
|
<span className='col-sm-2 m-2'>
|
|
Módosító: { signedNumberToText(modifier(Number((watch('egs') || 10)) + fajiEgsModosito(currentFaj()))) }
|
|
</span>
|
|
{errors.egs && Number(watch('egs')) < 3 && (
|
|
<span className='form-field-error'>Túl beteg vagy ahhoz, hogy kalandozni menj!</span>)}
|
|
{errors.egs && Number(watch('egs')) > 18 && (
|
|
<span className='form-field-error'>Kicsattanó egészségedet csak a diambroid állíthatja meg, minő véletlen, hogy pont az arcodba robbant...</span>)}
|
|
</div>
|
|
<div className='row m-2'>
|
|
<label className='col-lg-1 col-sm-2'>Intelligencia</label>
|
|
<input className='col-sm-1 m-2' defaultValue={10} type='number' {...register('int', {
|
|
required: true,
|
|
min: 3,
|
|
max: 18
|
|
})} />
|
|
<span className='col-sm-2 m-2'>
|
|
{fajiModositoText(currentFaj(), fajiIntModosito)}
|
|
</span>
|
|
<span className='col-sm-2 m-2'>
|
|
Összesen: { (Number((watch('int') || 10)) + (fajiIntModosito(currentFaj()))).toString() }
|
|
</span>
|
|
<span className='col-sm-2 m-2'>
|
|
Módosító: { signedNumberToText(modifier(Number((watch('int') || 10)) + fajiIntModosito(currentFaj()))) }
|
|
</span>
|
|
{errors.int && Number(watch('int')) < 3 && (
|
|
<span className='form-field-error'>Elfelejtetted, hogy mikor is kéne kalandozni indulni!</span>)}
|
|
{errors.int && Number(watch('int')) > 18 && (
|
|
<span className='form-field-error'>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.</span>)}
|
|
</div>
|
|
<div className='row m-2'>
|
|
<label className='col-lg-1 col-sm-2'>Bölcsesség</label>
|
|
<input className='col-sm-1 m-2' defaultValue={10} type='number' {...register('bol', {
|
|
required: true,
|
|
min: 3,
|
|
max: 18
|
|
})} />
|
|
<span className='col-sm-2 m-2'>
|
|
{fajiModositoText(currentFaj(), fajiBolModosito)}
|
|
</span>
|
|
<span className='col-sm-2 m-2'>
|
|
Összesen: { (Number((watch('bol') || 10)) + (fajiBolModosito(currentFaj()))).toString() }
|
|
</span>
|
|
<span className='col-sm-2 m-2'>
|
|
Módosító: { signedNumberToText(modifier(Number((watch('bol') || 10)) + fajiBolModosito(currentFaj()))) }
|
|
</span>
|
|
{errors.bol && Number(watch('bol')) < 3 && (
|
|
<span className='form-field-error'>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...</span>)}
|
|
{errors.bol && Number(watch('bol')) > 18 && (
|
|
<span className='form-field-error'>Hatalmas bölcsességedben beláttad a kalandozás veszélyeit és inkább más tevékenységbe fogtál.</span>)}
|
|
</div>
|
|
<div className='row m-2'>
|
|
<label className='col-lg-1 col-sm-2'>Karizma</label>
|
|
<input className='col-sm-1 m-2' defaultValue={10} type='number' {...register('kar', {
|
|
required: true,
|
|
min: 3,
|
|
max: 18,
|
|
})} />
|
|
<span className='col-sm-2 m-2'>
|
|
{fajiModositoText(currentFaj(), fajiKarModosito)}
|
|
</span>
|
|
<span className='col-sm-2 m-2'>
|
|
Összesen: { (Number((watch('kar') || 10)) + (fajiKarModosito(currentFaj()))).toString() }
|
|
</span>
|
|
<span className='col-sm-2 m-2'>
|
|
Módosító: { signedNumberToText(modifier(Number((watch('kar') || 10)) + fajiKarModosito(currentFaj()))) }
|
|
</span>
|
|
{errors.kar && Number(watch('kar')) < 3 && (
|
|
<span className='form-field-error'>Mintha taszítanád az embereket, sose sikerült kalandozó csapatot találnod.</span>)}
|
|
{errors.kar && Number(watch('kar')) > 18 && (
|
|
<span className='form-field-error'>Az ellenkező nem tagjai nem engedték, hogy útnak indulj.</span>)}
|
|
</div>
|
|
<hr />
|
|
<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 key={Osztaly.Harcos} selected={true} value={Osztaly.Harcos}>{OsztalyLabel(Osztaly.Harcos)}</option>
|
|
{currentFaj() === Faj.Amazon && (
|
|
<option key={Osztaly.Amazon} value={Osztaly.Amazon}>{OsztalyLabel(Osztaly.Amazon)}</option>) }
|
|
<option key={Osztaly.Barbar} value={Osztaly.Barbar}>{OsztalyLabel(Osztaly.Barbar)}</option>
|
|
<option key={Osztaly.Ijjasz} value={Osztaly.Ijjasz}>{OsztalyLabel(Osztaly.Ijjasz)}</option>
|
|
<option key={Osztaly.Kaloz} value={Osztaly.Kaloz}>{OsztalyLabel(Osztaly.Kaloz)}</option>
|
|
</optgroup>
|
|
<option key={Osztaly.Pap} value={Osztaly.Pap}>{OsztalyLabel(Osztaly.Pap)}</option>
|
|
{currentFaj() !== Faj.Amazon && (<option key={Osztaly.Tolvaj}
|
|
value={Osztaly.Tolvaj}>{OsztalyLabel(Osztaly.Tolvaj)}</option>)}
|
|
{![Faj.Osember, Faj.Amazon].includes(currentFaj()) && (
|
|
<optgroup label='Varázsló'>
|
|
<option key={Osztaly.Varazslo} value={Osztaly.Varazslo}>{OsztalyLabel(Osztaly.Varazslo)}</option>
|
|
<option key={Osztaly.Illuzionista} 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) => (<li>{special}</li>)))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button className='btn btn-danger' type='submit'>Létrehozás</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CreateCharacterPage;
|