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 AttributeWithValue,
|
||||
loadAttributesWithValues,
|
||||
loadProfession,
|
||||
loadRace,
|
||||
loadRaceVariant
|
||||
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 [raceVariantName, setRaceVariantName] = useState<string>(jsonData.rv || '');
|
||||
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, raceVariant, profession] = await Promise.all([
|
||||
loadRace(jsonData.r),
|
||||
loadRaceVariant(jsonData.rv || ''),
|
||||
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);
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
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.rv, 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} {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>
|
||||
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="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="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">
|
||||
<div className="w-[100%] flex pt-2">
|
||||
<span className="relative group cursor-help">
|
||||
LP
|
||||
<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
|
||||
</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">
|
||||
AP/KP
|
||||
<div
|
||||
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
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-[100%] flex pt-2">
|
||||
<span className="relative group cursor-help">
|
||||
AP
|
||||
<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
|
||||
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
|
||||
</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">
|
||||
SP
|
||||
<span
|
||||
@@ -130,14 +147,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>
|
||||
</div>
|
||||
<div className="w-[90%] flex items-center gap-2">
|
||||
<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-gradient-to-br from-violet-700 to-violet-500"></div>
|
||||
<div className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user