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

Refactor SheetHeader styles and layout: adjust attribute card design, improve responsiveness, and streamline conditional rendering logic.

Browse Source
This commit is contained in:
vikingowl
2025-07-13 02:28:04 +02:00
parent 2a1d0a470f
commit fbd5b2cfb6
1 changed files with 67 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -114,51 +114,49 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
</div> </div>
</div> </div>
<div className="flex justify-between items-center py-3 px-10"> <div className="flex justify-between items-center py-5 px-5 gap-6">
<div className="w-[20%] h-[20%] rounded-full overflow-hidden"> <div className="w-[30%] h-full rounded-md bg-gray-600 overflow-hidden"
<img src="#" alt="char bild"/> style={{height: '12.5em', width: '9.375em'}}>
<img src="#" alt="char bild" className="object-cover w-full h-full"/>
</div> </div>
<div className="flex flex-col gap-2 w-[80%]"> <div className="w-[70%] flex flex-col gap-2 w-[80%]">
<div className="flex justify-between"> <div className="w-[100%] flex justify-between">
{attributes.map(attr => ( {attributes.map(attr => (
<div key={attr.id} className="w-[10%] text-center"> <div key={attr.id} className="">
<div className="relative group cursor-help"> <div className="relative group cursor-help flex items-center justify-center">
<div className="font-bold">{attr.short}</div> <div>{attr.short}</div>
<span <span
className="absolute left-1/2 transform -translate-x-1/2 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-1/2 transform -translate-x-1/2 bottom-full bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
{attr.name} {attr.name}
</span> </span>
</div> </div>
<div>{attr.value}</div> <span className="font-bold" style={{fontSize: '1.5em'}}>{attr.value}</span>
</div> </div>
))} ))}
</div> </div>
{jsonData.attr.lp && ( <div className="w-[100%] flex pt-2">
<div className="w-[100%] flex pt-2"> <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 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-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative"> <div
<div className="bg-gradient-to-r from-red-900 to-red-600 h-full transition-all duration-300"
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(((jsonData.attr.lp - jsonData.attr.permanentLP.lost) / jsonData.attr.lp) * 100, 100)}%`}} />
/> <div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
<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}
{jsonData.attr.lp} / {jsonData.attr.lp - jsonData.attr.permanentLP.lost}
</div>
</div>
</div> </div>
)} </div>
</div>
{jsonData.attr.ae > 0 && ( <div className="w-[100%] flex pt-2">
<div className="w-[100%] flex pt-2">
<span className="relative group cursor-help"> <span className="relative group cursor-help">
AP AP
<span <span
@@ -166,21 +164,19 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
Astralpunkte Astralpunkte
</span> </span>
</span> </span>
<div <div
className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative"> className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
<div <div
className="bg-gradient-to-r from-blue-900 to-blue-500 h-full transition-all duration-300" 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(((jsonData.attr.ae - jsonData.attr.permanentAE.lost) / jsonData.attr.ae) * 100, 100)}%`}}
/> />
<div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium"> <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} {jsonData.attr.ae} / {jsonData.attr.ae - jsonData.attr.permanentAE.lost}
</div>
</div>
</div> </div>
)} </div>
</div>
{jsonData.attr.kp > 0 && ( <div className="w-[100%] flex pt-2">
<div className="w-[100%] flex pt-2">
<span className="relative group cursor-help"> <span className="relative group cursor-help">
KP KP
<span <span
@@ -188,21 +184,19 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
Karmapunkte Karmapunkte
</span> </span>
</span> </span>
<div <div
className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative"> className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
<div <div
className="bg-gradient-to-r from-emerald-900 to-emerald-500 h-full transition-all duration-300" 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(((jsonData.attr.kp - jsonData.attr.permanentKP.lost) / jsonData.attr.kp) * 100, 100)}%`}}
/> />
<div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium"> <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} {jsonData.attr.kp} / {jsonData.attr.kp - jsonData.attr.permanentKP.lost}
</div>
</div>
</div> </div>
)} </div>
</div>
{jsonData.attr.sp > 0 && ( <div className="w-[100%] flex pt-2">
<div className="w-[100%] flex pt-2">
<span className="relative group cursor-help"> <span className="relative group cursor-help">
SP SP
<span <span
@@ -210,22 +204,21 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
Schicksalspunkte Schicksalspunkte
</span> </span>
</span> </span>
<div className="ms-5 w-[100%] flex items-center gap-2"> <div className="ms-5 w-[100%] flex items-center gap-2">
{Array.from({length: jsonData.attr.sp - jsonData.attr.permanentSP.lost}, (_, index) => ( {Array.from({length: jsonData.attr.sp - jsonData.attr.permanentSP.lost}, (_, index) => (
<div <div
key={`sp-available-${index}`} key={`sp-available-${index}`}
className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500" className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"
/> />
))} ))}
{Array.from({length: jsonData.attr.permanentSP.lost}, (_, index) => ( {Array.from({length: jsonData.attr.permanentSP.lost}, (_, index) => (
<div <div
key={`sp-lost-${index}`} key={`sp-lost-${index}`}
className="rounded-full w-5 h-5 bg-gradient-to-br from-gray-700 to-gray-500" className="rounded-full w-5 h-5 bg-gradient-to-br from-gray-700 to-gray-500"
/> />
))} ))}
</div> </div>
</div> </div>
)}
</div> </div>
</div> </div>
</> </>