fix first level spell ordering

.tool-versions

@@ -1 +1,2 @@
 nodejs 20.15.1
+yarn 1.22.22

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

@@ -3,11 +3,11 @@ import {KarakterVarazslat, Varazslat} from "../domain-models/varazslat";
 import {getClassLevels} from "../domain-models/szintlepes";
 import {useDispatch, useSelector} from "react-redux";
 import {AppDispatch, RootState} from "../../store";
-import {addVarazslat, characterSelector, setVarazslatok} from "../domain-models/characterSlice";
+import {addVarazslat, characterSelector, setVarazslat} from "../domain-models/characterSlice";
 import {Osztaly2E} from "../domain-models/osztaly2E";
 import spells from "../data/spells.json";
 import VarazslatSelector from "../display-components/VarazslatSelector";
-import {arraySetN} from "../../util";
+
 //
 // function VarazslatSzint(props: {
 //     szint: number,
@@ -44,8 +44,8 @@ import {arraySetN} from "../../util";
 //
 // }
 
-function Varazskonyv(props: {osztaly: Osztaly2E, varazsloSzint: number, varazslatok: KarakterVarazslat[] }) {
-    const {osztaly, varazsloSzint, varazslatok } = props;
+function Varazskonyv(props: {osztaly: Osztaly2E, varazslatok: KarakterVarazslat[] }) {
+    const {osztaly, varazslatok } = props;
 
     const dispatch = useDispatch.withTypes<AppDispatch>()()
 
@@ -71,29 +71,26 @@ function Varazskonyv(props: {osztaly: Osztaly2E, varazsloSzint: number, varazsla
     }
 
     const firstLevel = classSpells.filter(v => v.szint === 1)
-    const firstLevelSelected = firstLevel.filter(v => varazslatok.some(x => x.id === v.id))
+    const firstLevelSelected = varazslatok.map(v => {
+        return firstLevel.find(x => x.id === v.id)
+    }).filter(x => !!x)
     const firstLevelAvailable = firstLevel.filter(v => varazslatok.every(x => x.id !== v.id))
 
-    const createOnChange = (idx: number, allSelected: string[]) => (selected: string) => {
-        const nextVarazslatok: KarakterVarazslat[] = arraySetN(allSelected, idx, selected).map(x => ({
-            id: x,
-            bekeszitve: false,
-        }))
-        dispatch(setVarazslatok(nextVarazslatok))
-    }
-
     return <>
-        <h3>Varazsloi Varazskonyv</h3>
-        <h5>1. Szintu varazslatok</h5>
+        <h3>Varázslói Varázskönyv</h3>
+        <h5>1. Szintű varázslatok</h5>
         {firstLevelSelected.map((v, i) => (
             <VarazslatSelector
+                key={`${i}VarazslatSelector`}
                 selected={v.id}
                 available={[v, ...firstLevelAvailable]}
                 dataTestId={`varazskonyv_varazslo_1_${v.id}`}
-                onChange={createOnChange(i, varazslatok.map(x => x.id))}
-            />)) }
-        {firstLevelSelected.length < varazsloSzint &&
-            <button className='btn btn-outline-dark' onClick={() => dispatch(addVarazslat({id: firstLevelAvailable[0].id, bekeszitve: false}))} >Uj varazslat hozzadasa</button>}
+                onChange={(nextId) => dispatch(setVarazslat({prev: v.id, next: nextId}))}
+            />))}
+        <button className='btn btn-outline-dark'
+                onClick={() => dispatch(addVarazslat(firstLevelAvailable[0].id))}>
+            Új varázslat hozzáadása
+        </button>
     </>;
 }
 
@@ -103,7 +100,7 @@ function Varazslatok() {
 
 
     return <>
-        {classLevels[Osztaly2E.Varazslo] > 0 && <Varazskonyv osztaly={Osztaly2E.Varazslo} varazsloSzint={classLevels[Osztaly2E.Varazslo]} varazslatok={karakter.varazslatok} />}
+        {classLevels[Osztaly2E.Varazslo] > 0 && <Varazskonyv osztaly={Osztaly2E.Varazslo} varazslatok={karakter.varazslatok} />}
     </>
 }
 

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

@@ -14,7 +14,6 @@ import {
 } from  "./kepzettsegek2E.data"
 import {BaseHP} from "./masodlagos_ertekek";
 import {KarakterFelszereles} from "./felszereles";
-import {KarakterVarazslat} from "./varazslat";
 
 export const characterSlice = createSlice({
     name: "character2E",
@@ -97,11 +96,14 @@ export const characterSlice = createSlice({
         setFelszereles: (state, action: {payload: KarakterFelszereles}) => {
             state.felszereles = action.payload;
         },
-        setVarazslatok: (state, action: {payload: KarakterVarazslat[]}) => {
-            state.varazslatok = action.payload;
+        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: KarakterVarazslat}) => {
-            state.varazslatok = [...state.varazslatok, action.payload];
+        addVarazslat: (state, action: {payload: string}) => {
+            state.varazslatok = [...state.varazslatok, {id: action.payload, bekeszitve: false}];
         },
     }
 })
@@ -157,7 +159,7 @@ export const {
     setKepzettsegek,
     setTolvajKepzettsegek,
     setFelszereles,
-    setVarazslatok,
+    setVarazslat,
     addVarazslat,
 } = characterSlice.actions
 

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

@@ -37,18 +37,11 @@ export interface OsztalySzintVarazslat extends MagasabbSzintuVarazslat {
 
 export type OsztalyVarazslat = OsztalyCantrip | OsztalySzintVarazslat;
 
-export interface KarakterCantrip {
+export interface KarakterVarazslat {
     id: string
     bekeszitve: boolean
 }
 
-export interface KarakterSzintVarazslat {
-    id: string
-    bekeszitve: boolean
-}
-
-export type KarakterVarazslat = KarakterCantrip | KarakterSzintVarazslat
-
 export function GetCantrips(osztaly: Osztaly2E): Cantrip[] {
     switch (osztaly) {
         case Osztaly2E.Pap: