added racevariant parsing

src/modules/main/modules/sheetHeader/components/SheetHeader.tsx

@@ -1,95 +1,103 @@
 import type {CharacterData} from "../../../../../types/CharacterJson.ts";
-import type {AttributeWithValue} from "../../../../../utils/loaders";
-import {useState, useEffect} from 'react';
-import {loadRace, loadProfession, loadAttributesWithValues} from "../../../../../utils/loaders";
+import {
+    type AttributeWithValue,
+    loadAttributesWithValues,
+    loadProfession,
+    loadRace,
+    loadRaceVariant
+} from "../../../../../utils/loaders";
+import {useEffect, useState} from 'react';
 
 export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
-  const [raceName, setRaceName] = useState<string>(jsonData.r);
-  const [professionName, setProfessionName] = useState<string>(jsonData.p);
-  const [attributes, setAttributes] = useState<AttributeWithValue[]>([]);
+    const [raceName, setRaceName] = useState<string>(jsonData.r);
+    const [raceVariantName, setRaceVariantName] = useState<string>(jsonData.rv || '');
+    const [professionName, setProfessionName] = useState<string>(jsonData.p);
+    const [attributes, setAttributes] = useState<AttributeWithValue[]>([]);
 
-  useEffect(() => {
-    let isMounted = true;
+    useEffect(() => {
+        let isMounted = true;
 
-    const loadData = async () => {
-      try {
-        // Load race and profession using the new loader functions
-        const [race, profession] = await Promise.all([
-          loadRace(jsonData.r),
-          loadProfession(jsonData.p)
-        ]);
+        const loadData = async () => {
+            try {
+                // Load race and profession using the new loader functions
+                const [race, raceVariant, profession] = await Promise.all([
+                    loadRace(jsonData.r),
+                    loadRaceVariant(jsonData.rv || ''),
+                    loadProfession(jsonData.p)
+                ]);
 
-        // Process attributes using the new loadAttributesWithValues function
-        const loadedAttributes = await loadAttributesWithValues(jsonData.attr.values);
+                // Process attributes using the new loadAttributesWithValues function
+                const loadedAttributes = await loadAttributesWithValues(jsonData.attr.values);
 
-        if (isMounted) {
-          setRaceName(race?.name || jsonData.r);
-          // For profession, handle gendered name
-          if (profession?.name) {
-            setProfessionName(profession.name.m || profession.name.f || jsonData.p);
-          } else {
-            setProfessionName(jsonData.p);
-          }
-          // Set the attributes with their values, names, and short forms
-          setAttributes(loadedAttributes);
-        }
-      } catch (error) {
-        console.error('Error loading data:', error);
-        if (isMounted) {
-          setRaceName(jsonData.r);
-          setProfessionName(jsonData.p);
-        }
-      }
-    };
+                if (isMounted) {
+                    setRaceName(race?.name || jsonData.r);
+                    setRaceVariantName(raceVariant?.name|| '');
+                    // For profession, handle gendered name
+                    if (profession?.name) {
+                        setProfessionName(profession.name.m || profession.name.f || jsonData.p);
+                    } else {
+                        setProfessionName(jsonData.p);
+                    }
+                    // Set the attributes with their values, names, and short forms
+                    setAttributes(loadedAttributes);
+                }
+            } catch (error) {
+                console.error('Error loading data:', error);
+                if (isMounted) {
+                    setRaceName(jsonData.r);
+                    setProfessionName(jsonData.p);
+                }
+            }
+        };
 
-    loadData();
+        loadData();
 
-    return () => {
-      isMounted = false;
-    };
-  }, [jsonData.r, jsonData.p, jsonData.attr]);
+        return () => {
+            isMounted = false;
+        };
+    }, [jsonData.r, jsonData.rv, jsonData.p, jsonData.attr]);
 
-  console.log(jsonData)
+    console.log(jsonData)
 
-  return (
-      <>
-        <div className="flex justify-between items-center py-5 px-5">
-          <div className="w-[30%]">
-            <p className="border-b border-gray-500 font-semibold">
-              {jsonData.name}
-            </p>
-            <small>Name</small>
-          </div>
-          <div className="w-[30%]">
-            <p className="border-b border-gray-500 font-semibold">
-              {raceName}
-            </p>
-            <small>Spezies</small>
-          </div>
-          <div className="w-[30%]">
-            <p className="border-b border-gray-500 font-semibold">
-              {professionName}
-            </p>
-            <small>Profession</small>
-          </div>
-        </div>
-
-        <div className="flex justify-between items-center py-3 px-10">
-          <div className="w-[20%] h-[20%] rounded-full overflow-hidden">
-            <img src="#" alt="char bild"/>
-          </div>
-
-          <div className="flex flex-col gap-2 w-[80%]">
-            <div className="flex justify-between">
-              {attributes.map(attr => (
-                  <div key={attr.id} className="w-[10%] text-center">
-                    <div className="font-bold">{attr.short}</div>
-                    <div>{attr.value}</div>
-                  </div>
-              ))}
+    return (
+        <>
+            <div className="flex justify-between items-center py-5 px-5">
+                <div className="w-[30%]">
+                    <p className="border-b border-gray-500 font-semibold">
+                        {jsonData.name}
+                    </p>
+                    <small>Name</small>
+                </div>
+                <div className="w-[30%]">
+                    <p className="border-b border-gray-500 font-semibold">
+                        {raceName} {raceVariantName ? <>({raceVariantName})</> : ''}
+                    </p>
+                    <small>Spezies</small>
+                </div>
+                <div className="w-[30%]">
+                    <p className="border-b border-gray-500 font-semibold">
+                        {professionName}
+                    </p>
+                    <small>Profession</small>
+                </div>
             </div>
 
-            <div className="w-[100%] flex pt-5">
+            <div className="flex justify-between items-center py-3 px-10">
+                <div className="w-[20%] h-[20%] rounded-full overflow-hidden">
+                    <img src="#" alt="char bild"/>
+                </div>
+
+                <div className="flex flex-col gap-2 w-[80%]">
+                    <div className="flex justify-between">
+                        {attributes.map(attr => (
+                            <div key={attr.id} className="w-[10%] text-center">
+                                <div className="font-bold">{attr.short}</div>
+                                <div>{attr.value}</div>
+                            </div>
+                        ))}
+                    </div>
+
+                    <div className="w-[100%] flex pt-5">
               <span className="relative group cursor-help">
                 LP
                 <span
@@ -97,24 +105,24 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                   Lebenspunkte
                 </span>
               </span>
-              <div
-                  className="ms-5 w-[50%] bg-red-800 rounded-s-full h-6 flex items-center justify-center text-white text-sm font-medium">
-                15 / 15
-              </div>
-              <div
-                  className="me-5 w-[50%] bg-green-800 rounded-e-full h-6 flex items-center justify-center text-white text-sm font-medium">
-                16 / 16
-              </div>
-              <span className="relative group cursor-help whitespace-nowrap">
+                        <div
+                            className="ms-5 w-[50%] bg-red-800 rounded-s-full h-6 flex items-center justify-center text-white text-sm font-medium">
+                            15 / 15
+                        </div>
+                        <div
+                            className="me-5 w-[50%] bg-green-800 rounded-e-full h-6 flex items-center justify-center text-white text-sm font-medium">
+                            16 / 16
+                        </div>
+                        <span className="relative group cursor-help whitespace-nowrap">
                 AP/KP
                 <span
                     className="absolute right-0 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
                   Astralpunkte / Karmapunkte
                 </span>
               </span>
-            </div>
+                    </div>
 
-            <div className="w-[100%] flex pt-5">
+                    <div className="w-[100%] flex pt-5">
               <span className="w-[10%] relative group cursor-help">
                 SP
                 <span
@@ -122,14 +130,14 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                   Schicksalspunkte
                 </span>
               </span>
-              <div className="w-[90%] flex items-center gap-2">
-                <div className="rounded-full w-5 h-5 bg-violet-400"></div>
-                <div className="rounded-full w-5 h-5 bg-violet-400"></div>
-                <div className="rounded-full w-5 h-5 bg-violet-400"></div>
-              </div>
+                        <div className="w-[90%] flex items-center gap-2">
+                            <div className="rounded-full w-5 h-5 bg-violet-400"></div>
+                            <div className="rounded-full w-5 h-5 bg-violet-400"></div>
+                            <div className="rounded-full w-5 h-5 bg-violet-400"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </>
-  )
+        </>
+    )
 }

src/types/CharacterJson.ts

@@ -87,6 +87,7 @@ export interface CharacterData {
   ap: AdventurePoints;
   el: string; // Experience Level
   r: string;  // Race
+  rv?: string;// Race_Variant
   c: string;  // Culture
   p: string;  // Profession
   sex: string;

src/utils/loaders.ts

@@ -49,6 +49,7 @@ import type {AnimistForce} from '../types/AnimistForce';
 // import type { RogueSpell } from '../types/RogueSpell';
 // import type { SkillGroup } from '../types/SkillGroup';
 import type {Skill} from '../types/Skill';
+import type {RaceVariant} from "../types/RaceVariant.ts";
 // import type { SocialStatuse } from '../types/SocialStatuse';
 // import type { SpecialAbilitie } from '../types/SpecialAbilitie';
 // import type { SpecialAbilityGroup } from '../types/SpecialAbilityGroup';
@@ -136,6 +137,11 @@ export async function loadRace(id: string): Promise<Race | undefined> {
   return getItemById<Race>('Races.json', id);
 }
 
+// Race_Variant loader
+export async function loadRaceVariant(id: string): Promise<RaceVariant | undefined> {
+  return getItemById<RaceVariant>('RaceVariants.json', id);
+}
+
 // Profession loader
 export async function loadProfession(id: string): Promise<Profession | undefined> {
   return getItemById<Profession>('Professions.json', id);