WIP varazskonyv

frontend/src/second-edition/components/LevelUps.tsx

@@ -44,7 +44,7 @@ function LevelUp(props: {
     
     return <div>
         <div className='row mt-3'>
-            <h5 className='col align-self-center'>{szint}. Szint</h5>
+            <h4 className='col align-self-center'>{szint}. Szint</h4>
         </div>
         {osztaly !== Osztaly2E.Druida && 
             <MultiClassOsztalySelector2E 

frontend/src/second-edition/components/MasodlagosErtekek.tsx

@@ -37,7 +37,7 @@ export function MasodlagosErtekekPresenter(props: MasodlagosErtekekView) {
 
     return <>
         <div className='row'>
-            <h5 className='col align-self-center'>Másodlagos értékek</h5>
+            <h4 className='col align-self-center'>Másodlagos értékek (első szinten)</h4>
         </div>
         <div className='row'>
             <div className='col-lg-6'>

frontend/src/second-edition/components/Tulajdonsagok2E.tsx

@@ -29,7 +29,7 @@ function Tulajdonsagok(props: {
     const tulajdonsagok = props.tulajdonsagok ?? karakter.tulajdonsagok
     return <>
         <div className='row'>
-            <h5 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h5>
+            <h4 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h4>
             <div className='col-sm-2 m-2'>
                 <button className='btn btn-dark' type='button' data-testid="tulajdonsag-dobas"
                         onClick={() => dispatch(rollAbilities())}>Dobás

frontend/src/second-edition/components/Varazskonyv.tsx

@@ -0,0 +1,25 @@
+import {Osztaly2E} from "../domain-models/osztaly2E";
+import {ClassSpells, KarakterVarazslat} from "../domain-models/varazslat";
+import VarazskonyvSzint from "./VarazskonyvSzint";
+import React from "react";
+
+function Varazskonyv(props: { osztaly: Osztaly2E, varazslatok: KarakterVarazslat[] }) {
+    const {osztaly, varazslatok} = props;
+
+    const classSpells = ClassSpells(osztaly)
+    const spells = varazslatok.map(v => classSpells.find(x => x.id === v.id)).filter(x => !!x)
+
+    return <>
+        <div className='row my-2'>
+            <h4 className='col align-self-center'>{osztaly === Osztaly2E.Varazslo ? "Varázslói" : "Illúzionista"} Varázskönyv</h4>
+        </div>
+        <VarazskonyvSzint osztaly={osztaly} level={0} varazslatok={varazslatok}/>
+        {spells.some(v => v.szint === 0) && <VarazskonyvSzint osztaly={osztaly} level={1} varazslatok={varazslatok}/>}
+        {spells.some(v => v.szint === 1) && <VarazskonyvSzint osztaly={osztaly} level={2} varazslatok={varazslatok}/>}
+        {spells.some(v => v.szint === 2) && <VarazskonyvSzint osztaly={osztaly} level={3} varazslatok={varazslatok}/>}
+        {spells.some(v => v.szint === 3) && <VarazskonyvSzint osztaly={osztaly} level={4} varazslatok={varazslatok}/>}
+        {spells.some(v => v.szint === 4) && <VarazskonyvSzint osztaly={osztaly} level={5} varazslatok={varazslatok}/>}
+    </>;
+}
+
+export default Varazskonyv

frontend/src/second-edition/components/VarazskonyvSzint.tsx

@@ -0,0 +1,55 @@
+import {Osztaly2E} from "../domain-models/osztaly2E";
+import {ClassSpells, KarakterVarazslat} from "../domain-models/varazslat";
+import {useDispatch} from "react-redux";
+import {AppDispatch} from "../../store";
+import VarazslatSelector from "../display-components/VarazslatSelector";
+import {addVarazslat, removeVarazslat, setVarazslat} from "../domain-models/characterSlice";
+import React from "react";
+
+function VarazskonyvSzint(props: { osztaly: Osztaly2E, level: number, varazslatok: KarakterVarazslat[] }) {
+    const {level, osztaly, varazslatok} = props;
+    const dispatch = useDispatch.withTypes<AppDispatch>()()
+
+    const classSpells = ClassSpells(osztaly)
+    const leveledSpells = classSpells.filter(v => v.szint === level)
+    const selectedSpells = varazslatok.map(v => {
+        return leveledSpells.find(x => x.id === v.id)
+    }).filter(x => !!x)
+    const availableSpells = leveledSpells.filter(v => varazslatok.every(x => x.id !== v.id))
+
+    return <>
+        <div className='row my-2'>
+            <h5 className='col align-self-center'>{level}. Szintű varázslatok</h5>
+        </div>
+        {selectedSpells.map((v, i) => (
+            <React.Fragment key={`VarazslatSelector-${i}`}>
+                <div className='row m-2'>
+                    <VarazslatSelector
+                        selected={v.id}
+                        available={[v, ...availableSpells]}
+                        dataTestId={`varazskonyv_varazslo_1_${v.id}`}
+                        onChange={(nextId) => dispatch(setVarazslat({prev: v.id, next: nextId}))}
+                    />
+                    <div className="col-lg-2 col-md-3 col-sm-4">
+                        <button
+                            className='btn btn-outline-dark w-100'
+                            type='button'
+                            onClick={() => dispatch(removeVarazslat(v.id))}>Elvesz
+                        </button>
+                    </div>
+                </div>
+                <div className="row m-2">
+                    <span>{v?.leiras}</span>
+                    {v?.megfordithato && <u>Megfordítható{' '}</u>}
+                    {v?.komponens && <b>Kötelező komponens: {v.komponens}{' '}</b>}
+                    {v?.opcionalis_komponens && <i>Opcionális komponens: {v.opcionalis_komponens}{' '}</i>}
+                </div>
+            </React.Fragment>))}
+        {availableSpells.length > 0 && <button className='btn btn-outline-dark ms-2'
+                                               onClick={() => dispatch(addVarazslat(availableSpells[0].id))}>
+            Új varázslat hozzáadása
+        </button>}
+    </>;
+}
+
+export default VarazskonyvSzint

frontend/src/second-edition/components/Varazslatok.tsx

@@ -1,65 +1,18 @@
 import React from "react";
-import {ClassSpells, KarakterVarazslat} from "../domain-models/varazslat";
 import {getClassLevels} from "../domain-models/szintlepes";
-import {useDispatch, useSelector} from "react-redux";
-import {AppDispatch, RootState} from "../../store";
-import {addVarazslat, characterSelector, setVarazslat} from "../domain-models/characterSlice";
+import {useSelector} from "react-redux";
+import {RootState} from "../../store";
+import {characterSelector} from "../domain-models/characterSlice";
 import {Osztaly2E} from "../domain-models/osztaly2E";
-import VarazslatSelector from "../display-components/VarazslatSelector";
-
-function VarazskonyvSzint(props: {osztaly: Osztaly2E, level: number, varazslatok: KarakterVarazslat[]}) {
-    const {level, osztaly, varazslatok} = props;
-    const dispatch = useDispatch.withTypes<AppDispatch>()()
-
-    const classSpells = ClassSpells(osztaly)
-    const leveledSpells = classSpells.filter(v => v.szint === level)
-    const selectedSpells = varazslatok.map(v => {
-        return leveledSpells.find(x => x.id === v.id)
-    }).filter(x => !!x)
-    const availableSpells = leveledSpells.filter(v => varazslatok.every(x => x.id !== v.id))
-
-    return <>
-        <h5>{level}. Szintű varázslatok</h5>
-        {selectedSpells.map((v, i) => (
-            <VarazslatSelector
-                key={`${i}VarazslatSelector`}
-                selected={v.id}
-                available={[v, ...availableSpells]}
-                dataTestId={`varazskonyv_varazslo_1_${v.id}`}
-                onChange={(nextId) => dispatch(setVarazslat({prev: v.id, next: nextId}))}
-            />))}
-        {availableSpells.length > 0 && <button className='btn btn-outline-dark'
-                onClick={() => dispatch(addVarazslat(availableSpells[0].id))}>
-            Új varázslat hozzáadása
-        </button>}
-    </>;
-
-}
-
-function Varazskonyv(props: {osztaly: Osztaly2E, varazslatok: KarakterVarazslat[] }) {
-    const {osztaly, varazslatok } = props;
-
-    const classSpells = ClassSpells(osztaly)
-    const spells = varazslatok.map(v => classSpells.find(x => x.id === v.id)).filter(x => !!x)
-
-    return <>
-        <h3>Varázslói Varázskönyv</h3>
-        <VarazskonyvSzint osztaly={osztaly} level={0} varazslatok={varazslatok} />
-        {spells.some(v => v.szint === 0) && <VarazskonyvSzint osztaly={osztaly} level={1} varazslatok={varazslatok} />}
-        {spells.some(v => v.szint === 1) && <VarazskonyvSzint osztaly={osztaly} level={2} varazslatok={varazslatok} />}
-        {spells.some(v => v.szint === 2) && <VarazskonyvSzint osztaly={osztaly} level={3} varazslatok={varazslatok} />}
-        {spells.some(v => v.szint === 3) && <VarazskonyvSzint osztaly={osztaly} level={4} varazslatok={varazslatok} />}
-        {spells.some(v => v.szint === 4) && <VarazskonyvSzint osztaly={osztaly} level={5} varazslatok={varazslatok} />}
-    </>;
-}
+import Varazskonyv from "./Varazskonyv";
 
 function Varazslatok() {
     const karakter = useSelector.withTypes<RootState>()(characterSelector)
     const classLevels = getClassLevels(karakter.szintlepesek)
 
-
     return <>
         {classLevels[Osztaly2E.Varazslo] > 0 && <Varazskonyv osztaly={Osztaly2E.Varazslo} varazslatok={karakter.varazslatok} />}
+        {classLevels[Osztaly2E.Illuzionista] > 0 && <Varazskonyv osztaly={Osztaly2E.Illuzionista} varazslatok={karakter.varazslatok} />}
     </>
 }
 

frontend/src/second-edition/domain-models/characterSlice.ts

@@ -96,14 +96,17 @@ export const characterSlice = createSlice({
         setFelszereles: (state, action: {payload: KarakterFelszereles}) => {
             state.felszereles = action.payload;
         },
+        addVarazslat: (state, action: {payload: string}) => {
+            state.varazslatok = [...state.varazslatok, {id: action.payload, bekeszitve: false}];
+        },
         setVarazslat: (state, action: {payload: {prev: string, next: string}}) => {
             let spell = state.varazslatok.find(x => x.id === action.payload.prev)
             if (spell !== undefined) {
                 spell.id = action.payload.next
             }
         },
-        addVarazslat: (state, action: {payload: string}) => {
-            state.varazslatok = [...state.varazslatok, {id: action.payload, bekeszitve: false}];
+        removeVarazslat: (state, action: {payload: string}) => {
+            state.varazslatok = [...state.varazslatok.filter(x => x.id !== action.payload)];
         },
     }
 })
@@ -159,8 +162,9 @@ export const {
     setKepzettsegek,
     setTolvajKepzettsegek,
     setFelszereles,
-    setVarazslat,
     addVarazslat,
+    setVarazslat,
+    removeVarazslat,
 } = characterSlice.actions
 
 export const characterSelector = characterSlice.selectSlice

frontend/src/second-edition/pages/CreateCharacter2E.tsx

@@ -99,14 +99,14 @@ function CreateCharacter2E(props: {
         <div className='p-3'>
             <form onSubmit={async (event) => event.preventDefault()}>
                 <div className='row'>
-                    <h5 className='col align-self-center'>Származás</h5>
+                    <h4 className='col align-self-center'>Származás</h4>
                 </div>
                 <Szarmazas/>
                 <hr/>
                 <Tulajdonsagok2E/>
                 <hr/>
                 <div className='row'>
-                    <h5 className='col align-self-center'>Tanult</h5>
+                    <h4 className='col align-self-center'>Tanult</h4>
                 </div>
                 <OsztalySelector2E />
                 {karakter.szintlepesek[0].osztaly === Osztaly2E.Harcos && <HarcosFegyverSpecializacio szint={1}/>}