From 442b930334ce62e0256812ad3469f0370328dbe0 Mon Sep 17 00:00:00 2001 From: Balint Morasz Date: Sun, 3 Sep 2023 14:20:04 +0200 Subject: [PATCH] refactor WIP --- src/components/FajSelector.tsx | 11 +++-- src/components/KarakterKepzettsegek.tsx | 58 +++++-------------------- src/components/KepzettsegSelector.tsx | 9 ++-- src/components/MasodlagosErtekek.tsx | 16 +++---- src/components/OsztalySelector.tsx | 41 ++++------------- src/components/TulajdonsagInput.tsx | 22 +++++----- src/components/Tulajdonsagok.tsx | 49 ++++++++++----------- src/domain-models/tulajdonsag.ts | 16 ++++--- src/pages/CreateCharacter.tsx | 57 ++++++++++-------------- 9 files changed, 105 insertions(+), 174 deletions(-) diff --git a/src/components/FajSelector.tsx b/src/components/FajSelector.tsx index 00bc4e5..ac7da52 100644 --- a/src/components/FajSelector.tsx +++ b/src/components/FajSelector.tsx @@ -1,13 +1,12 @@ import React from "react"; import {Faj, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj"; -import {UseFormRegisterReturn} from "react-hook-form"; -function FajSelector(props: { register: () => UseFormRegisterReturn, currentFaj: () => Faj }) { - const {register, currentFaj} = props +function FajSelector(props: { faj: Faj, changeFaj: (val: Faj) => void }) { + const {faj, changeFaj} = props return <>
- changeFaj(e.target.value as Faj)}> @@ -31,10 +30,10 @@ function FajSelector(props: { register: () => UseFormRegisterReturn, currentFaj:

- {FajDescription(currentFaj())} + {FajDescription(faj)}

    - {FajSpecials(currentFaj()).map(((special, i) => (
  • {special}
    • )))} + {FajSpecials(faj).map(((special, i) => (
  • {special}
    • )))}
diff --git a/src/components/KarakterKepzettsegek.tsx b/src/components/KarakterKepzettsegek.tsx index 5d95b2d..4e5322f 100644 --- a/src/components/KarakterKepzettsegek.tsx +++ b/src/components/KarakterKepzettsegek.tsx @@ -1,34 +1,32 @@ import React from "react"; import KepzettsegSelector from "./KepzettsegSelector"; import {Osztaly} from "../domain-models/osztaly"; -import {UseFormRegisterReturn} from "react-hook-form"; import { AvailableKezpettsegList, Kepzettseg, Kepzettsegek, KepzettsegId, - KepzettsegLista } from "../domain-models/kepzettsegek"; import {Modifier} from "../domain-models/tulajdonsag"; 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}) { - const {title, numberOfKepzettseg, getKepzettsegListaN, register, availableKepzettsegList, getKepzettsegN} = props +function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg: number, getKepzettsegListaN: (n: number) => Kepzettseg[], kepzettsegek: KepzettsegId[], changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void}) { + const {title, numberOfKepzettseg, getKepzettsegListaN, kepzettsegek, changeKepzettsegek} = props const klist = Array.from(new Array(numberOfKepzettseg).keys()) const preCalculated: { kepzettsegek: Kepzettseg[], - registration: UseFormRegisterReturn, + changeKepzettseg: (newKepzettseg: KepzettsegId) => void, selected: Kepzettseg, }[] = []; for (let i = 0; i < numberOfKepzettseg; i++) { preCalculated.push({ kepzettsegek: getKepzettsegListaN(i), - registration: register(i), - selected: getKepzettsegN(i) + selected: Kepzettsegek[kepzettsegek[i]], + changeKepzettseg: (newKepzettseg: KepzettsegId) => { changeKepzettsegek([...kepzettsegek.slice(0, i), newKepzettseg, ...kepzettsegek.slice(i+1)]) } }) } @@ -44,8 +42,8 @@ function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg: ) } @@ -58,10 +56,10 @@ function KarakterKepzettsegek (props: { faj: Faj osztaly: Osztaly, t_int: number, - register: (fieldName: string) => UseFormRegisterReturn, - watch: (fieldName: string, defaultValue: KepzettsegId) => string + kepzettsegek: KepzettsegId[], + changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void }) { - const { faj, osztaly, t_int, register, watch } = props + const { faj, osztaly, t_int, kepzettsegek, changeKepzettsegek} = props const availableKepzettsegList = AvailableKezpettsegList(osztaly) @@ -76,33 +74,10 @@ function KarakterKepzettsegek (props: { } console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg) - const getKepzettsegN = (n: number) => Kepzettsegek[watch('kepzettseg.'+n, availableKepzettsegList[n].Id) as KepzettsegId] - const getKepzettsegListaN = (n: number) => { let response = availableKepzettsegList; for (let i = 0; i < numberOfKepzettseg; i++) { - response = response.filter(x => i === n || x.Id !== getKepzettsegN(i).Id) - } - 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) + response = response.filter(x => i === n || x.Id !== kepzettsegek[i]) } return response } @@ -111,18 +86,9 @@ function KarakterKepzettsegek (props: { register('kepzettseg.' + n)} - getKepzettsegN={getKepzettsegN} /> - {osztaly === Osztaly.Tolvaj && - register('tolvaj_kepzettseg.' + n)} - getKepzettsegN={getTolvajKepzettsegN} />} + changeKepzettsegek={changeKepzettsegek} + kepzettsegek={kepzettsegek} /> } diff --git a/src/components/KepzettsegSelector.tsx b/src/components/KepzettsegSelector.tsx index e71355d..98aa9b8 100644 --- a/src/components/KepzettsegSelector.tsx +++ b/src/components/KepzettsegSelector.tsx @@ -1,7 +1,6 @@ import React from "react"; -import {Kepzettseg} from "../domain-models/kepzettsegek"; +import {Kepzettseg, KepzettsegId} from "../domain-models/kepzettsegek"; import {TulajdonsagLabel} from "../domain-models/tulajdonsag"; -import {UseFormRegisterReturn} from "react-hook-form"; import {OsztalyLabel} from "../domain-models/osztaly"; 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)); } -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 <>
+ + changeValue(Number(e.target.value))} />
- {fajiModositoText(currentFaj(), fajiModosito)} + {fajiModositoText(currentFaj, fajiModosito)} - Összesen: { (getCurrentValue() + (fajiModosito(currentFaj()))).toString() } + Összesen: { (currentValue + (fajiModosito(currentFaj))).toString() } - Módosító: { SignedNumberToText(Modifier(getCurrentValue() + fajiModosito(currentFaj()))) } + Módosító: { SignedNumberToText(Modifier(currentValue + fajiModosito(currentFaj))) } - {getCurrentValue() < 3 && ( + {currentValue < 3 && ( {tooLowError})} - {getCurrentValue() > 18 && ( + {currentValue > 18 && ( {tooHighError})} ) } diff --git a/src/components/Tulajdonsagok.tsx b/src/components/Tulajdonsagok.tsx index de5bce8..197d4c6 100644 --- a/src/components/Tulajdonsagok.tsx +++ b/src/components/Tulajdonsagok.tsx @@ -1,82 +1,79 @@ 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 {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 + currentFaj: Faj, + tulajdonsagok: KarakterTulajdonsagok + changeTulajdonsagok: (tulajdonsagok: KarakterTulajdonsagok) => void }) { - const {currentFaj, watch, setValue, register} = props + const {currentFaj, tulajdonsagok, changeTulajdonsagok} = props return <>
Tulajdonságok
Number(watch('tul.'+Tulajdonsag.Ero, 10))} + currentValue={tulajdonsagok.t_ero} currentFaj={currentFaj} 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!' tooHighError='Szét szakadtak az izmaid!' /> Number(watch('tul.'+Tulajdonsag.Ugyesseg, 10))} + currentValue={tulajdonsagok.t_ugy} currentFaj={currentFaj} fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ugyesseg)} - register={() => register('tul.'+Tulajdonsag.Ugyesseg, tulajdonsagDefaultOptions)} + changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_ugy: val})} tooLowError='Orrabuktál jelentkezés helyett!' tooHighError='Emberfeletti zsonglörködésedre záptojással válaszoltak a helyiek!' /> Number(watch('tul.'+Tulajdonsag.Egeszseg, 10))} + currentValue={tulajdonsagok.t_egs} currentFaj={currentFaj} 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!' tooHighError='Kicsattanó egészségedet csak a diambroid állíthatja meg, minő véletlen, hogy pont az arcodba robbant...' /> Number(watch('tul.'+Tulajdonsag.Intelligencia, 10))} + currentValue={tulajdonsagok.t_int} currentFaj={currentFaj} 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!' 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.' /> Number(watch('tul.'+Tulajdonsag.Bolcsesseg, 10))} + currentValue={tulajdonsagok.t_bol} currentFaj={currentFaj} 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.' tooHighError='Hatalmas bölcsességedben beláttad a kalandozás veszélyeit és inkább más tevékenységbe fogtál.' /> Number(watch('tul.'+Tulajdonsag.Karizma, 10))} + currentValue={tulajdonsagok.t_kar} currentFaj={currentFaj} 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.' tooHighError='Az ellenkező nem tagjai nem engedték, hogy útnak indulj.' /> diff --git a/src/domain-models/tulajdonsag.ts b/src/domain-models/tulajdonsag.ts index 09a3b05..facc07c 100644 --- a/src/domain-models/tulajdonsag.ts +++ b/src/domain-models/tulajdonsag.ts @@ -40,13 +40,15 @@ function rollAbility() { return result; } -export function RollAllAbilities(setValue: (ability: string, value: number) => void) { - setValue(Tulajdonsag.Ero, rollAbility()) - setValue(Tulajdonsag.Ugyesseg, rollAbility()) - setValue(Tulajdonsag.Egeszseg, rollAbility()) - setValue(Tulajdonsag.Intelligencia, rollAbility()) - setValue(Tulajdonsag.Bolcsesseg, rollAbility()) - setValue(Tulajdonsag.Karizma, rollAbility()) +export function RollAllAbilities(setValue: (newValue: KarakterTulajdonsagok) => void) { + setValue({ + t_ero: rollAbility(), + t_ugy: rollAbility(), + t_egs: rollAbility(), + t_int: rollAbility(), + t_bol: rollAbility(), + t_kar: rollAbility(), + }) } export const Modifier = (val : number) => Math.floor(val / 3) - 3 diff --git a/src/pages/CreateCharacter.tsx b/src/pages/CreateCharacter.tsx index ee8b1fa..1af3b53 100644 --- a/src/pages/CreateCharacter.tsx +++ b/src/pages/CreateCharacter.tsx @@ -1,6 +1,5 @@ -import React from 'react'; +import React, {useState} from 'react'; import './CreateCharacter.css' -import {useForm} from "react-hook-form"; import {Faj} from "../domain-models/faj"; import {Osztaly} from "../domain-models/osztaly" import FajSelector from "../components/FajSelector"; @@ -9,9 +8,7 @@ import OsztalySelector from "../components/OsztalySelector"; import KarakterKepzettsegek from "../components/KarakterKepzettsegek"; import {KarakterTulajdonsagok} from "../domain-models/tulajdonsag"; import MasodlagosErtekek from "../components/MasodlagosErtekek"; - -const FAJ_FIELD_NAME = 'faj' -const OSZTALY_FIELD_NAME = 'osztaly' +import {KepzettsegId} from "../domain-models/kepzettsegek"; const tulajdonsagDefaults: KarakterTulajdonsagok = { t_ero: 10, @@ -23,18 +20,12 @@ const tulajdonsagDefaults: KarakterTulajdonsagok = { } 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) - - const currentOsztaly = () => watch(OSZTALY_FIELD_NAME, Osztaly.Harcos) + let [name, changeName] = useState("Névtelen kanadozó") + let [faj, changeFaj] = useState(Faj.Ember) + let [tulajdonsagok, changeTulajdonsagok] = useState(tulajdonsagDefaults) + let [currentOsztaly, changeOsztaly] = useState(Osztaly.Harcos) + let [kepzettsegek, changeKepzettsegek] = useState([]) return (
@@ -42,46 +33,46 @@ function CreateCharacterPage() {

Karakter létrehozása

-
+
Származás
- {errors.nev && A karaktered nem mászkálhat névtelenül a világban!} + value={name} + onChange={(e) => changeName(e.target.value)}/> + {!name && A karaktered nem mászkálhat névtelenül a világban!}
register(FAJ_FIELD_NAME, {required: true})} - currentFaj={currentFaj} + changeFaj={changeFaj} + faj={faj} />
Tanult
register(OSZTALY_FIELD_NAME, {required: true})} + changeOsztaly={changeOsztaly} /> register(fieldName, {required: true})} - watch={watch} + faj={faj} + osztaly={currentOsztaly} + t_int={tulajdonsagok.t_int} + kepzettsegek={kepzettsegek} + changeKepzettsegek={changeKepzettsegek} />
- watch('tul', tulajdonsagDefaults)} /> +