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

Enhance SheetHeader component: add total attribute calculation methods (LP, AP, KP, SP), update progress bar logic, and streamline data handling.

Browse Source
This commit is contained in:
vikingowl
2025-07-14 00:07:09 +02:00
parent ca72b7119f
commit d2e4345d20
1 changed files with 44 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -91,6 +91,43 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
);
}
const calculateTotalLp = () => {
// GW der Spezies + KO + KO
const tempRaceLp = 5 // TODO: Needs to be pulled from universal stats
const constVal = attributes.find(attr => attr.id === 'ATTR_7')?.value || 0; // ATTR_7 = Constitution
const bonusMalus = 0 // Negative when malus
const zukauf = 0
return (jsonData.attr.lp + constVal * 2 + tempRaceLp + zukauf + bonusMalus);
}
const calculateTotalAP = () => {
// TODO: Only show if Zauberer
// 20 durch Zauberer + Leiteigenschaft
const initial = 20
const leiteigenschaft = 0 // TODO: needs to be pulled
const bonusMalus = 0 // Negative when malus
const zukauf = 0
return (jsonData.attr.ae + initial + leiteigenschaft + bonusMalus + zukauf);
}
const calculateTotalKP = () => {
// TODO: Only show if Geweihter
// 20 durch Geweiht + Leiteigenschaft
const initial = 20
const leiteigenschaft = 0 // TODO: needs to be pulled
const bonusMalus = 0 // Negative when malus
const zukauf = 0
return (jsonData.attr.kp + initial + leiteigenschaft + bonusMalus + zukauf);
}
const calculateTotalSp = () => {
// TODO: needs to be pulled
const initial = 3
const bonus = 0
return (jsonData.attr.sp || 0 + initial + bonus);
}
return (
<>
<div className="flex justify-between items-end py-5 px-5">
@@ -148,10 +185,10 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
<div
className="bg-gradient-to-r from-red-900 to-red-600 h-full transition-all duration-300"
style={{width: `${Math.min(((jsonData.attr.lp - jsonData.attr.permanentLP.lost) / jsonData.attr.lp) * 100, 100)}%`}}
style={{width: `${Math.min(((calculateTotalLp() - jsonData.attr.permanentLP.lost) / calculateTotalLp()) * 100, 100)}%`}}
/>
<div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
{jsonData.attr.lp} / {jsonData.attr.lp - jsonData.attr.permanentLP.lost}
{calculateTotalLp()} / {calculateTotalLp() - jsonData.attr.permanentLP.lost}
</div>
</div>
</div>
@@ -168,10 +205,10 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
<div
className="bg-gradient-to-r from-blue-900 to-blue-500 h-full transition-all duration-300"
style={{width: `${Math.min(((jsonData.attr.ae - jsonData.attr.permanentAE.lost) / jsonData.attr.ae) * 100, 100)}%`}}
style={{width: `${Math.min(((calculateTotalAP() - jsonData.attr.permanentAE.lost) / calculateTotalAP()) * 100, 100)}%`}}
/>
<div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
{jsonData.attr.ae} / {jsonData.attr.ae - jsonData.attr.permanentAE.lost}
{calculateTotalAP()} / {calculateTotalAP() - jsonData.attr.permanentAE.lost}
</div>
</div>
</div>
@@ -188,10 +225,10 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
<div
className="bg-gradient-to-r from-emerald-900 to-emerald-500 h-full transition-all duration-300"
style={{width: `${Math.min(((jsonData.attr.kp - jsonData.attr.permanentKP.lost) / jsonData.attr.kp) * 100, 100)}%`}}
style={{width: `${Math.min(((calculateTotalKP() - jsonData.attr.permanentKP.lost) / calculateTotalKP()) * 100, 100)}%`}}
/>
<div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
{jsonData.attr.kp} / {jsonData.attr.kp - jsonData.attr.permanentKP.lost}
{calculateTotalKP()} / {calculateTotalKP() - jsonData.attr.permanentKP.lost}
</div>
</div>
</div>
@@ -205,7 +242,7 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
</span>
</span>
<div className="ms-5 w-[100%] flex items-center gap-2">
{Array.from({length: jsonData.attr.sp}, (_, index) => (
{Array.from({length: calculateTotalSp()}, (_, index) => (
<div
key={`sp-available-${index}`}
className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"