wip create character

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,24 +1,11 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import CreateCharacter from "./pages/CreateCharacter";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="container">
+        <CreateCharacter />
     </div>
   );
 }

src/domain-models/enums.ts

@@ -0,0 +1,49 @@
+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',
+    Amazon = 'f_amazon',
+    Birodalmi = 'f_birodalmi',
+    Etuniai = 'f_etuniai',
+    Eszaki = 'f_eszaki',
+    Osember = 'f_osember',
+    Elf = 'f_elf',
+    Felelf = 'f_felelf',
+    Felork = 'f_felork',
+    Felszerzet = 'f_felszerzet',
+    Gnom = 'f_gnom',
+    Torpe = 'f_torpe',
+}
+
+export enum Osztaly {
+    Harcos = 'o_harcos',
+    Ijjasz = 'o_ijjasz',
+    Amazon = 'o_amazon',
+    Kaloz = 'o_kaloz',
+    Barbar = 'o_barbar',
+    Pap = 'o_pap',
+    Tolvaj = 'o_tolvaj',
+    Varazslo = 'o_varazslo',
+    Illuzionista = 'o_illuzionista',
+}
+
+export function OsztalyLabel(osztaly: Osztaly) : string {
+    switch (osztaly) {
+        case Osztaly.Amazon: return 'Amazon';
+        case Osztaly.Barbar: return 'Barbár';
+        case Osztaly.Pap: return 'Pap';
+        case Osztaly.Illuzionista: return 'Illúzionista';
+        case Osztaly.Varazslo: return 'Varázsló';
+        case Osztaly.Harcos: return 'Harcos';
+        case Osztaly.Ijjasz: return 'Íjjász';
+        case Osztaly.Kaloz: return 'Kalóz';
+        case Osztaly.Tolvaj: return 'Tolvaj'
+    }
+}

src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import 'bootstrap/dist/css/bootstrap.css';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';

src/pages/.gitignore

@@ -0,0 +1 @@
+*.css

src/pages/CreateCharacter.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CreateCharacter.less"],"names":[],"mappings":"AAAA;EACE,cAAA;EACA,cAAA;;AAGF,IAAK;EACH,iBAAA","file":"CreateCharacter.css"}

src/pages/CreateCharacter.less

@@ -0,0 +1,8 @@
+.form-field-error {
+  display: block;
+  color: #8c0000;
+}
+
+form label {
+  margin-right: 1em;
+}

src/pages/CreateCharacter.tsx

@@ -0,0 +1,49 @@
+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;