wip create character

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,35 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="CyclomaticComplexityJS" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="m_limit" value="10" />
+    </inspection_tool>
+    <inspection_tool class="DocumentWriteJS" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="FunctionWithMultipleLoopsJS" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="FunctionWithMultipleReturnPointsJS" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="GrazieInspection" enabled="false" level="GRAMMAR_ERROR" enabled_by_default="false" />
+    <inspection_tool class="InnerHTMLJS" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="JSHint" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="LanguageDetectionInspection" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="NestingDepthJS" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="m_limit" value="5" />
+    </inspection_tool>
+    <inspection_tool class="ParametersPerFunctionJS" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="m_limit" value="5" />
+    </inspection_tool>
+    <inspection_tool class="PlatformDetectionJS" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
+      <option name="processCode" value="true" />
+      <option name="processLiterals" value="true" />
+      <option name="processComments" value="true" />
+    </inspection_tool>
+    <inspection_tool class="StandardJS" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="StatementsPerFunctionJS" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="m_limit" value="30" />
+    </inspection_tool>
+    <inspection_tool class="ThreeNegationsPerFunctionJS" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="TsLint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="XHTMLIncompatabilitiesJS" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.idea/watcherTasks.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions">
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="$FileName$ $FileNameWithoutExtension$.css --source-map" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="less" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="Less" />
+      <option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
+      <option name="outputFilters">
+        <array>
+          <FilterInfo>
+            <option name="description" value="" />
+            <option name="name" value="" />
+            <option name="regExp" value="$MESSAGE$\Q in \E$FILE_PATH$\Q on line \E$LINE$\Q, column \E$COLUMN$" />
+          </FilterInfo>
+        </array>
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="$USER_HOME$/.yarn/bin/lessc" />
+      <option name="runOnExternalChanges" value="true" />
+      <option name="scopeName" value="Project Files" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+  </component>
+</project>

.tool-versions

@@ -0,0 +1 @@
+nodejs 20.4.0

package.json

@@ -10,8 +10,11 @@
     "@types/node": "^16.18.38",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "bootstrap": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.45.2",
+    "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
@@ -39,5 +42,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.3"
   }
 }

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">
+    <div className="container">
-      <header className="App-header">
+        <CreateCharacter />
-        <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>
   );
 }

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;