refactor a bit

src/components/TulajdonsagInput.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import {Faj, FajLabel} from "../domain-models/faj";
+import {Modifier} from "../domain-models/tulajdonsag";
+
+export 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 TulajdonsagInput(props: {
+    tulajdonsag: string,
+    currentFaj : () => Faj,
+    fajiModosito: (faj: Faj) => number,
+    register: () => any,
+    getCurrentValue: () => number
+}) {
+    const {tulajdonsag, register, currentFaj, getCurrentValue, fajiModosito} = 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'>
+            <input className='form-control' defaultValue={10} type='number' {...register()} />
+        </div>
+        <span className='col-sm-2 m-2'>
+                            {fajiModositoText(currentFaj(), fajiModosito)}
+                        </span>
+        <span className='col-sm-2 m-2'>
+                            Összesen: { (getCurrentValue() + (fajiModosito(currentFaj()))).toString() }
+                        </span>
+        <span className='col-sm-2 m-2'>
+                            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>)}
+        {getCurrentValue() > 18 && (
+            <span className='form-field-error'>Szét szakadtak az izmaid!</span>)}
+    </div>)
+}
+
+export default TulajdonsagInput;

src/domain-models/faj.ts

@@ -1,11 +1,4 @@
-export enum Tulajdonsag {
+
-    Ero = 't_ero',
-    Ugyesseg = 't_ugy',
-    Egeszseg = 't_egs',
-    Intelligencia = 't_int',
-    Bolcsesseg = 't_bol',
-    Karizma = 't_kar',
-}
 
 export enum Faj {
     Ember = 'f_ember',

src/domain-models/kockak.ts

@@ -0,0 +1,8 @@
+
+export function getRandomInt(max: number) {
+    return Math.floor(Math.random() * max) + 1;
+}
+
+export function d6() {
+    return getRandomInt(6)
+}

src/domain-models/tulajdonsag.ts

@@ -0,0 +1,104 @@
+import {d6} from "./kockak";
+import {Faj} from "./faj";
+
+export enum Tulajdonsag {
+    Ero = 't_ero',
+    Ugyesseg = 't_ugy',
+    Egeszseg = 't_egs',
+    Intelligencia = 't_int',
+    Bolcsesseg = 't_bol',
+    Karizma = 't_kar',
+}
+
+
+function rollAbility() {
+    let min = 6;
+    let sum = 0;
+    let rolls: number[] = []
+    for (let i = 0; i < 4; i++) {
+        const roll = d6();
+        if (roll < min) {
+            min = roll;
+        }
+        sum += roll;
+        rolls = [...rolls, roll]
+    }
+    const result = sum - min;
+    console.log("Rolled: " + rolls + " got: " + result)
+    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 const Modifier = (val : number) => Math.floor(val / 3) - 3
+
+/* eslint-disable */ /* tslint:disable */
+function tulajdonsagModositokPerFaj(tul: Tulajdonsag, faj: Faj) : number {
+    switch (faj) {
+        case Faj.Birodalmi: switch (tul) {
+            case Tulajdonsag.Egeszseg: return -1;
+            case Tulajdonsag.Intelligencia: return +1;
+            default: return 0;
+        }
+        case Faj.Eszaki: switch (tul) {
+            case Tulajdonsag.Ero: return +1;
+            case Tulajdonsag.Bolcsesseg: return -1;
+            default: return 0;
+        }
+        case Faj.Etuniai: switch (tul) {
+            case Tulajdonsag.Egeszseg: return +1;
+            case Tulajdonsag.Bolcsesseg: return -1;
+            default: return 0
+        }
+        case Faj.Osember: switch (tul) {
+            case Tulajdonsag.Ero: return +1;
+            case Tulajdonsag.Egeszseg: return +1;
+            case Tulajdonsag.Intelligencia: return -1;
+            case Tulajdonsag.Bolcsesseg: return -1;
+            default: return 0
+        }
+        case Faj.Elf: switch (tul) {
+            case Tulajdonsag.Egeszseg: return -1;
+            case Tulajdonsag.Ugyesseg: return +1;
+            default: return 0;
+        }
+        case Faj.Felork: switch (tul) {
+            case Tulajdonsag.Ero: return +1;
+            case Tulajdonsag.Egeszseg: return +1;
+            case Tulajdonsag.Karizma: return -2;
+            default: return 0;
+        }
+        case Faj.Felszerzet: switch (tul) {
+            case Tulajdonsag.Ero: return -1;
+            case Tulajdonsag.Ugyesseg: return +1;
+            default: return 0;
+        }
+        case Faj.Gnom: switch (tul) {
+            case Tulajdonsag.Ero: return -1;
+            case Tulajdonsag.Intelligencia: return +1;
+            default: return 0;
+        }
+        case Faj.Torpe: switch (tul) {
+            case Tulajdonsag.Egeszseg: return +1;
+            case Tulajdonsag.Karizma: return -1;
+            default: return 0;
+        }
+
+        default: return 0;
+    }
+}
+
+export function TulajdonsagModositokFajokra(tul: Tulajdonsag) {
+    return (faj: Faj) => tulajdonsagModositokPerFaj(tul, faj);
+}
+
+export function FajiTulajdonsagModositok(faj: Faj) {
+    return (tul: Tulajdonsag) => tulajdonsagModositokPerFaj(tul, faj)
+}

src/pages/CreateCharacter.tsx

@@ -1,7 +1,8 @@
-import React, {ReactNode} from 'react';
+import React from 'react';
 import './CreateCharacter.css'
 import {useForm} from "react-hook-form";
-import {Faj, FajDescription, FajLabel, FajSpecials, Tulajdonsag} from "../domain-models/faj";
+import {Faj, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj";
+import {RollAllAbilities, Tulajdonsag, TulajdonsagModositokFajokra} from "../domain-models/tulajdonsag";
 import {
     Osztaly,
     OsztalyDescription,
@@ -9,62 +10,7 @@ import {
     OsztalyProperties,
     OsztalySpecialSkills
 } from "../domain-models/osztaly"
-
+import TulajdonsagInput from "../components/TulajdonsagInput";
-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(Tulajdonsag.Ero, rollAbility())
-    setValue(Tulajdonsag.Ugyesseg, rollAbility())
-    setValue(Tulajdonsag.Egeszseg, rollAbility())
-    setValue(Tulajdonsag.Intelligencia, rollAbility())
-    setValue(Tulajdonsag.Bolcsesseg, rollAbility())
-    setValue(Tulajdonsag.Karizma, rollAbility())
-}
 
 const tulajdonsagDefaultOptions = {
     required: true,
@@ -72,28 +18,6 @@ const tulajdonsagDefaultOptions = {
     max: 18,
 };
 
-function displayAbilityInput(tulajdonsag: string, currentFaj : () => Faj, fajiModosito: (faj: Faj) => number, register: () => any, getCurrentValue: () => number) : ReactNode {
-    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'>
-            <input className='form-control' defaultValue={10} type='number' {...register()} />
-        </div>
-        <span className='col-sm-2 m-2'>
-                            {fajiModositoText(currentFaj(), fajiModosito)}
-                        </span>
-        <span className='col-sm-2 m-2'>
-                            Összesen: { (getCurrentValue() + (fajiModosito(currentFaj()))).toString() }
-                        </span>
-        <span className='col-sm-2 m-2'>
-                            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>)}
-        {getCurrentValue() > 18 && (
-            <span className='form-field-error'>Szét szakadtak az izmaid!</span>)}
-    </div>)
-}
-
 function CreateCharacterPage() {
     const {
         register,
@@ -162,52 +86,52 @@ function CreateCharacterPage() {
                         <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
+                                    onClick={() => RollAllAbilities(setValue)}>Dobás
                             </button>
                         </div>
                     </div>
-                    {displayAbilityInput(
+                    <TulajdonsagInput
-                        'Erő',
+                        tulajdonsag='Erő'
-                        currentFaj,
+                        getCurrentValue={() => Number(watch(Tulajdonsag.Ero, 10))}
-                        fajiEroModosito,
+                        currentFaj={currentFaj}
-                        () => register(Tulajdonsag.Ero, tulajdonsagDefaultOptions),
+                        fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ero)}
-                        () => Number(watch(Tulajdonsag.Ero, 10))
+                        register={() => register(Tulajdonsag.Ero, tulajdonsagDefaultOptions)}
-                    )}
+                    />
-                    {displayAbilityInput(
+                    <TulajdonsagInput
-                        'Ügyesség',
+                        tulajdonsag='Ügyesség'
-                        currentFaj,
+                        getCurrentValue={() => Number(watch(Tulajdonsag.Ugyesseg, 10))}
-                        fajiUgyModosito,
+                        currentFaj={currentFaj}
-                        () => register(Tulajdonsag.Ugyesseg, tulajdonsagDefaultOptions),
+                        fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Ugyesseg)}
-                        () => Number(watch(Tulajdonsag.Ugyesseg, 10))
+                        register={() => register(Tulajdonsag.Ugyesseg, tulajdonsagDefaultOptions)}
-                    )}
+                    />
-                    {displayAbilityInput(
+                    <TulajdonsagInput
-                        'Egészség',
+                        tulajdonsag='Egészség'
-                        currentFaj,
+                        getCurrentValue={() => Number(watch(Tulajdonsag.Egeszseg, 10))}
-                        fajiEgsModosito,
+                        currentFaj={currentFaj}
-                        () => register(Tulajdonsag.Egeszseg, tulajdonsagDefaultOptions),
+                        fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Egeszseg)}
-                        () => Number(watch(Tulajdonsag.Egeszseg, 10))
+                        register={() => register(Tulajdonsag.Egeszseg, tulajdonsagDefaultOptions)}
-                    )}
+                    />
-                    {displayAbilityInput(
+                    <TulajdonsagInput
-                        'Intelligencia',
+                        tulajdonsag='Intelligencia'
-                        currentFaj,
+                        getCurrentValue={() => Number(watch(Tulajdonsag.Intelligencia, 10))}
-                        fajiIntModosito,
+                        currentFaj={currentFaj}
-                        () => register(Tulajdonsag.Intelligencia, tulajdonsagDefaultOptions),
+                        fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Intelligencia)}
-                        () => Number(watch(Tulajdonsag.Intelligencia, 10))
+                        register={() => register(Tulajdonsag.Intelligencia, tulajdonsagDefaultOptions)}
-                    )}
+                    />
-                    {displayAbilityInput(
+                    <TulajdonsagInput
-                        'Bölcsesség',
+                        tulajdonsag='Bölcsesség'
-                        currentFaj,
+                        getCurrentValue={() => Number(watch(Tulajdonsag.Bolcsesseg, 10))}
-                        fajiBolModosito,
+                        currentFaj={currentFaj}
-                        () => register(Tulajdonsag.Bolcsesseg, tulajdonsagDefaultOptions),
+                        fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Bolcsesseg)}
-                        () => Number(watch(Tulajdonsag.Bolcsesseg, 10))
+                        register={() => register(Tulajdonsag.Bolcsesseg, tulajdonsagDefaultOptions)}
-                    )}
+                    />
-                    {displayAbilityInput(
+                    <TulajdonsagInput
-                        'Karizma',
+                        tulajdonsag='Karizma'
-                        currentFaj,
+                        getCurrentValue={() => Number(watch(Tulajdonsag.Karizma, 10))}
-                        fajiKarModosito,
+                        currentFaj={currentFaj}
-                        () => register(Tulajdonsag.Karizma, tulajdonsagDefaultOptions),
+                        fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag.Karizma)}
-                        () => Number(watch(Tulajdonsag.Karizma, 10))
+                        register={() => register(Tulajdonsag.Karizma, tulajdonsagDefaultOptions)}
-                    )}
+                    />
                     <hr />
                     <div className='row'>
                         <h5 className='col-lg-2 col-sm-4 align-self-center'>Tanult</h5>
@@ -216,20 +140,19 @@ function CreateCharacterPage() {
                         <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} value={Osztaly.Harcos}>{OsztalyLabel(Osztaly.Harcos)}</option>
+                                <option value={Osztaly.Harcos}>{OsztalyLabel(Osztaly.Harcos)}</option>
                                 {currentFaj() === Faj.Amazon && (
-                                    <option key={Osztaly.Amazon}  value={Osztaly.Amazon}>{OsztalyLabel(Osztaly.Amazon)}</option>) }
+                                    <option value={Osztaly.Amazon}>{OsztalyLabel(Osztaly.Amazon)}</option>) }
-                                <option key={Osztaly.Barbar} value={Osztaly.Barbar}>{OsztalyLabel(Osztaly.Barbar)}</option>
+                                <option value={Osztaly.Barbar}>{OsztalyLabel(Osztaly.Barbar)}</option>
-                                <option key={Osztaly.Ijasz} value={Osztaly.Ijasz}>{OsztalyLabel(Osztaly.Ijasz)}</option>
+                                <option value={Osztaly.Ijasz}>{OsztalyLabel(Osztaly.Ijasz)}</option>
-                                <option key={Osztaly.Kaloz} value={Osztaly.Kaloz}>{OsztalyLabel(Osztaly.Kaloz)}</option>
+                                <option value={Osztaly.Kaloz}>{OsztalyLabel(Osztaly.Kaloz)}</option>
                             </optgroup>
-                            <option key={Osztaly.Pap} value={Osztaly.Pap}>{OsztalyLabel(Osztaly.Pap)}</option>
+                            <option value={Osztaly.Pap}>{OsztalyLabel(Osztaly.Pap)}</option>
-                            {currentFaj() !== Faj.Amazon && (<option key={Osztaly.Tolvaj}
+                            {currentFaj() !== Faj.Amazon && (<option value={Osztaly.Tolvaj}>{OsztalyLabel(Osztaly.Tolvaj)}</option>)}
-                                                                     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 value={Osztaly.Varazslo}>{OsztalyLabel(Osztaly.Varazslo)}</option>
-                                    <option key={Osztaly.Illuzionista} value={Osztaly.Illuzionista}>{OsztalyLabel(Osztaly.Illuzionista)}</option>
+                                    <option value={Osztaly.Illuzionista}>{OsztalyLabel(Osztaly.Illuzionista)}</option>
                                 </optgroup>
                             )}
                         </select>
@@ -268,8 +191,8 @@ function CreateCharacterPage() {
                         </div>
                     </div>
 
-                    <div>
+                    <div className='d-grid gap-2'>
-                        <button className='btn btn-danger' type='submit'>Létrehozás</button>
+                        <button className='btn btn-danger btn-lg' type='submit'>Létrehozás</button>
                     </div>
                 </form>
             </div>