Refactor SheetHeader component: improve formatting, adjust styles, and update data handling logic.
This commit is contained in:
@@ -1,128 +1,145 @@
|
|||||||
import type {CharacterData} from "../../../../../types/CharacterJson.ts";
|
import type {CharacterData} from "../../../../../types/CharacterJson.ts";
|
||||||
import {
|
import {
|
||||||
type AttributeWithValue,
|
type AttributeWithValue,
|
||||||
loadAttributesWithValues,
|
loadAttributesWithValues,
|
||||||
loadProfession,
|
loadProfession,
|
||||||
loadRace,
|
loadRace,
|
||||||
loadRaceVariant
|
loadRaceVariant
|
||||||
} from "../../../../../utils/loaders";
|
} from "../../../../../utils/loaders";
|
||||||
import {useEffect, useState} from 'react';
|
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 [raceVariantName, setRaceVariantName] = useState<string>(jsonData.rv || '');
|
const [raceVariantName, setRaceVariantName] = useState<string>(jsonData.rv || '');
|
||||||
const [professionName, setProfessionName] = useState<string>(jsonData.p);
|
const [professionName, setProfessionName] = useState<string>(jsonData.p);
|
||||||
const [attributes, setAttributes] = useState<AttributeWithValue[]>([]);
|
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, raceVariant, profession] = await Promise.all([
|
const [race, raceVariant, profession] = await Promise.all([
|
||||||
loadRace(jsonData.r),
|
loadRace(jsonData.r),
|
||||||
loadRaceVariant(jsonData.rv || ''),
|
loadRaceVariant(jsonData.rv || ''),
|
||||||
loadProfession(jsonData.p)
|
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);
|
||||||
setRaceVariantName(raceVariant?.name|| '');
|
setRaceVariantName(raceVariant?.name || '');
|
||||||
// For profession, handle gendered name
|
// For profession, handle gendered name
|
||||||
if (profession?.name) {
|
if (profession?.name) {
|
||||||
setProfessionName(profession.name.m || profession.name.f || jsonData.p);
|
setProfessionName(profession.name.m || profession.name.f || jsonData.p);
|
||||||
} else {
|
} else {
|
||||||
setProfessionName(jsonData.p);
|
setProfessionName(jsonData.p);
|
||||||
}
|
}
|
||||||
// Set the attributes with their values, names, and short forms
|
// Set the attributes with their values, names, and short forms
|
||||||
setAttributes(loadedAttributes);
|
setAttributes(loadedAttributes);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error loading data:', error);
|
console.error('Error loading data:', error);
|
||||||
if (isMounted) {
|
if (isMounted) {
|
||||||
setRaceName(jsonData.r);
|
setRaceName(jsonData.r);
|
||||||
setProfessionName(jsonData.p);
|
setProfessionName(jsonData.p);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
loadData();
|
loadData();
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
isMounted = false;
|
isMounted = false;
|
||||||
};
|
};
|
||||||
}, [jsonData.r, jsonData.rv, 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} {raceVariantName ? <>({raceVariantName})</> : ''}
|
{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="flex justify-between items-center py-3 px-10">
|
<div className="w-[100%] flex pt-2">
|
||||||
<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
|
||||||
className="absolute left-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 left-0 bottom-full mb-1 px-2 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
|
||||||
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-[100%] bg-gradient-to-r from-red-900 to-red-600 rounded-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">
|
|
||||||
16 / 16
|
<div className="w-[100%] flex pt-2">
|
||||||
</div>
|
<span className="relative group cursor-help">
|
||||||
<span className="relative group cursor-help whitespace-nowrap">
|
AP
|
||||||
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 left-0 bottom-full mb-1 px-2 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
|
||||||
Astralpunkte / Karmapunkte
|
Astralpunkte
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
<div
|
||||||
|
className="ms-5 w-[100%] bg-gradient-to-r from-blue-900 to-blue-500 rounded-full h-6 flex items-center justify-center text-white text-sm font-medium">
|
||||||
|
16 / 16
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="w-[100%] flex pt-5">
|
<div className="w-[100%] flex pt-2">
|
||||||
|
<span className="relative group cursor-help">
|
||||||
|
KP
|
||||||
|
<span
|
||||||
|
className="absolute left-0 bottom-full mb-1 px-2 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
|
||||||
|
Karmapunkte
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
className="ms-5 w-[100%] bg-gradient-to-r from-green-900 to-green-500 rounded-full h-6 flex items-center justify-center text-white text-sm font-medium">
|
||||||
|
16 / 16
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-[100%] flex pt-2">
|
||||||
<span className="w-[10%] relative group cursor-help">
|
<span className="w-[10%] relative group cursor-help">
|
||||||
SP
|
SP
|
||||||
<span
|
<span
|
||||||
@@ -130,14 +147,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-gradient-to-br from-violet-700 to-violet-500"></div>
|
||||||
<div className="rounded-full w-5 h-5 bg-violet-400"></div>
|
<div className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"></div>
|
||||||
<div className="rounded-full w-5 h-5 bg-violet-400"></div>
|
<div className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
)
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user