s0wlz_talespire_symbiotes/talespire-dsa5-charactersheet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added racevariant parsing

Browse Source
This commit is contained in:
Matthias Puchstein
2025-07-06 22:19:41 +02:00
parent 1a4c5d96e7
commit 44d74396e5
3 changed files with 114 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/modules/main/modules/sheetHeader/components/SheetHeader.tsx
View File

@@ -1,95 +1,103 @@
import type {CharacterData} from "../../../../../types/CharacterJson.ts"; import type {CharacterData} from "../../../../../types/CharacterJson.ts";
import type {AttributeWithValue} from "../../../../../utils/loaders"; import {
import {useState, useEffect} from 'react'; type AttributeWithValue,
import {loadRace, loadProfession, loadAttributesWithValues} from "../../../../../utils/loaders"; loadAttributesWithValues,
loadProfession,
loadRace,
loadRaceVariant
} from "../../../../../utils/loaders";
import {useEffect, useState} from 'react';
export default function SheetHeader({jsonData}: { jsonData: CharacterData }) { export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
const [raceName, setRaceName] = useState<string>(jsonData.r); const [raceName, setRaceName] = useState<string>(jsonData.r);
const [professionName, setProfessionName] = useState<string>(jsonData.p); const [raceVariantName, setRaceVariantName] = useState<string>(jsonData.rv || '');
const [attributes, setAttributes] = useState<AttributeWithValue[]>([]); const [professionName, setProfessionName] = useState<string>(jsonData.p);
const [attributes, setAttributes] = useState<AttributeWithValue[]>([]);
useEffect(() => { useEffect(() => {
let isMounted = true; let isMounted = true;
const loadData = async () => { const loadData = async () => {
try { try {
// Load race and profession using the new loader functions // Load race and profession using the new loader functions
const [race, profession] = await Promise.all([ const [race, raceVariant, profession] = await Promise.all([
loadRace(jsonData.r), loadRace(jsonData.r),
loadProfession(jsonData.p) loadRaceVariant(jsonData.rv || ''),
]); loadProfession(jsonData.p)
]);
// Process attributes using the new loadAttributesWithValues function // Process attributes using the new loadAttributesWithValues function
const loadedAttributes = await loadAttributesWithValues(jsonData.attr.values); const loadedAttributes = await loadAttributesWithValues(jsonData.attr.values);
if (isMounted) { if (isMounted) {
setRaceName(race?.name || jsonData.r); setRaceName(race?.name || jsonData.r);
// For profession, handle gendered name setRaceVariantName(raceVariant?.name|| '');
if (profession?.name) { // For profession, handle gendered name
setProfessionName(profession.name.m || profession.name.f || jsonData.p); if (profession?.name) {
} else { setProfessionName(profession.name.m || profession.name.f || jsonData.p);
setProfessionName(jsonData.p); } else {
} setProfessionName(jsonData.p);
// Set the attributes with their values, names, and short forms }
setAttributes(loadedAttributes); // Set the attributes with their values, names, and short forms
} setAttributes(loadedAttributes);
} catch (error) { }
console.error('Error loading data:', error); } catch (error) {
if (isMounted) { console.error('Error loading data:', error);
setRaceName(jsonData.r); if (isMounted) {
setProfessionName(jsonData.p); setRaceName(jsonData.r);
} setProfessionName(jsonData.p);
} }
}; }
};
loadData(); loadData();
return () => { return () => {
isMounted = false; isMounted = false;
}; };
}, [jsonData.r, jsonData.p, jsonData.attr]); }, [jsonData.r, jsonData.rv, jsonData.p, jsonData.attr]);
console.log(jsonData) console.log(jsonData)
return ( return (
<> <>
<div className="flex justify-between items-center py-5 px-5"> <div className="flex justify-between items-center py-5 px-5">
<div className="w-[30%]"> <div className="w-[30%]">
<p className="border-b border-gray-500 font-semibold"> <p className="border-b border-gray-500 font-semibold">
{jsonData.name} {jsonData.name}
</p> </p>
<small>Name</small> <small>Name</small>
</div> </div>
<div className="w-[30%]"> <div className="w-[30%]">
<p className="border-b border-gray-500 font-semibold"> <p className="border-b border-gray-500 font-semibold">
{raceName} {raceName} {raceVariantName ? <>({raceVariantName})</> : ''}
</p> </p>
<small>Spezies</small> <small>Spezies</small>
</div> </div>
<div className="w-[30%]"> <div className="w-[30%]">
<p className="border-b border-gray-500 font-semibold"> <p className="border-b border-gray-500 font-semibold">
{professionName} {professionName}
</p> </p>
<small>Profession</small> <small>Profession</small>
</div> </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>
))}
</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"> <span className="relative group cursor-help">
LP LP
<span <span
@@ -97,24 +105,24 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
Lebenspunkte Lebenspunkte
</span> </span>
</span> </span>
<div <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"> 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 15 / 15
</div> </div>
<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"> 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 16 / 16
</div> </div>
<span className="relative group cursor-help whitespace-nowrap"> <span className="relative group cursor-help whitespace-nowrap">
AP/KP AP/KP
<span <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"> 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 Astralpunkte / Karmapunkte
</span> </span>
</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"> <span className="w-[10%] relative group cursor-help">
SP SP
<span <span
@@ -122,14 +130,14 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
Schicksalspunkte Schicksalspunkte
</span> </span>
</span> </span>
<div className="w-[90%] flex items-center gap-2"> <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 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>
</div> </>
</div> )
</>
)
} }

1
src/types/CharacterJson.ts
View File

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

6
src/utils/loaders.ts
View File

@@ -49,6 +49,7 @@ import type {AnimistForce} from '../types/AnimistForce';
// import type { RogueSpell } from '../types/RogueSpell'; // import type { RogueSpell } from '../types/RogueSpell';
// import type { SkillGroup } from '../types/SkillGroup'; // import type { SkillGroup } from '../types/SkillGroup';
import type {Skill} from '../types/Skill'; import type {Skill} from '../types/Skill';
import type {RaceVariant} from "../types/RaceVariant.ts";
// import type { SocialStatuse } from '../types/SocialStatuse'; // import type { SocialStatuse } from '../types/SocialStatuse';
// import type { SpecialAbilitie } from '../types/SpecialAbilitie'; // import type { SpecialAbilitie } from '../types/SpecialAbilitie';
// import type { SpecialAbilityGroup } from '../types/SpecialAbilityGroup'; // 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); 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 // Profession loader
export async function loadProfession(id: string): Promise<Profession | undefined> { export async function loadProfession(id: string): Promise<Profession | undefined> {
return getItemById<Profession>('Professions.json', id); return getItemById<Profession>('Professions.json', id);