diff --git a/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx b/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx index a86c9c8..c76b53f 100644 --- a/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx +++ b/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(jsonData.r); - const [professionName, setProfessionName] = useState(jsonData.p); - const [attributes, setAttributes] = useState([]); + const [raceName, setRaceName] = useState(jsonData.r); + const [raceVariantName, setRaceVariantName] = useState(jsonData.rv || ''); + const [professionName, setProfessionName] = useState(jsonData.p); + const [attributes, setAttributes] = useState([]); - 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 ( - <> -
-
-

- {jsonData.name} -

- Name -
-
-

- {raceName} -

- Spezies -
-
-

- {professionName} -

- Profession -
-
- -
-
- char bild -
- -
-
- {attributes.map(attr => ( -
-
{attr.short}
-
{attr.value}
-
- ))} + return ( + <> +
+
+

+ {jsonData.name} +

+ Name +
+
+

+ {raceName} {raceVariantName ? <>({raceVariantName}) : ''} +

+ Spezies +
+
+

+ {professionName} +

+ Profession +
-
+
+
+ char bild +
+ +
+
+ {attributes.map(attr => ( +
+
{attr.short}
+
{attr.value}
+
+ ))} +
+ +
LP -
- 15 / 15 -
-
- 16 / 16 -
- +
+ 15 / 15 +
+
+ 16 / 16 +
+ AP/KP Astralpunkte / Karmapunkte -
+
-
+
SP -
-
-
-
-
+
+
+
+
+
+
+
-
-
- - ) + + ) } diff --git a/src/types/CharacterJson.ts b/src/types/CharacterJson.ts index c941374..5b97bbf 100644 --- a/src/types/CharacterJson.ts +++ b/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; diff --git a/src/utils/loaders.ts b/src/utils/loaders.ts index 80a5adf..203d61b 100644 --- a/src/utils/loaders.ts +++ b/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 { return getItemById('Races.json', id); } +// Race_Variant loader +export async function loadRaceVariant(id: string): Promise { + return getItemById('RaceVariants.json', id); +} + // Profession loader export async function loadProfession(id: string): Promise { return getItemById('Professions.json', id);