sacdeq
/
trackerdeq
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix css ring

This commit is contained in:
sacdeq 2025-04-25 14:41:17 +02:00
parent 4f5f5e71c7
commit 4e9872adb5
4 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/Lobby.tsx
View File

@ -79,7 +79,7 @@ export default function Lobby ( { player }: { player: string } )
></div>
<div className="grid grid-rows-2 flex-grow mx-4 min-w-0">
<div className="name font-semibold text-white text-sm text-shadow-xl truncate">
<div className="name font-semibold text-white text-sm truncate">
{ player.tag ? `${ player.tag } ${ player.name }` : player.name }
</div>
@ -96,7 +96,7 @@ export default function Lobby ( { player }: { player: string } )
backgroundImage: `url(${ player.positionIcon })`,
} }
></div>
<div className="wr font-bold text-white text-xs text-shadow-xl ml-1 pt-1">
<div className="wr font-bold text-white text-xs ml-1 pt-1">
{ player.wr }%
</div>
</div>

14
src/app/components/Ranked.tsx
View File

@ -57,20 +57,20 @@ export default function Ranked ( { name, tag }: { name: string; tag: string } )
<div className="text flex flex-row font-bold tracking-wide">
<div className="elo basis-2/3 pr-4 mb-3 text-white">
{ [ "MASTER", "GRANDMASTER", "CHALLENGER" ].includes( data.tier ) ? (
<div className="league basis-1/2 text-4xl text-shadow-xl">
<div className="league basis-1/2 text-4xl ">
{ data.tier } { data.lp } LP
</div>
) : (
<div className="points basis-1/2 text-3xl text-shadow-xl">
<div className="points basis-1/2 text-3xl ">
{ data.tier } { data.division } { data.lp } LP
</div>
) }
</div>
<div className="stats basis-1/3 flex flex-row justify-end text-3xl tracking-tighter">
<div className="wins px-2 text-sky-600 text-shadow-xl">{ data.wins }W</div>
<div className="losses px-2 text-red-600 text-shadow-xl">{ data.losses }L</div>
<div className="winrate pl-3 text-white text-shadow-xl">
<div className="wins px-2 text-sky-600 ">{ data.wins }W</div>
<div className="losses px-2 text-red-600 ">{ data.losses }L</div>
<div className="winrate pl-3 text-white ">
{ data.winrate }%
</div>
</div>
@ -83,7 +83,7 @@ export default function Ranked ( { name, tag }: { name: string; tag: string } )
className={ `game basis-1/6 px-1.5 ${ match.isOld ? "old" : "" }` }
>
<div
className={ `background ring-4 rounded-full ${ match.win ? "win ring-sky-600" : "loss ring-red-600"
className={ `background rounded-full ${ match.win ? "win ring-4-sky-600" : "loss ring-4-red-600"
}` }
>
<div
@ -92,7 +92,7 @@ export default function Ranked ( { name, tag }: { name: string; tag: string } )
style={ { backgroundImage: `url('${ match.championImg }')` } }
/>
</div>
<div className="kda text-center text-xl font-semilight text-gray-200 tracking-tight text-shadow-xl">
<div className="kda text-center text-xl font-semilight text-gray-200 tracking-tight ">
{ match.kills }/{ match.deaths }/{ match.assists }
</div>
</div>

16
src/app/components/Session.tsx
View File

@ -62,15 +62,15 @@ export default function Session ( { name, tag }: { name: string; tag: string } )
<div className="session mt-5">
<div className="kda text-center px-2">
<span className="text-3xl text-white text-shadow-xl">
<span className="text-3xl text-white ">
{ data.kills }
</span>
<span className="text-2xl text-gray-300 text-shadow-xl">/</span>
<span className="text-3xl text-red-600 text-shadow-xl">
<span className="text-2xl text-gray-300 ">/</span>
<span className="text-3xl text-red-600 ">
{ data.deaths }
</span>
<span className="text-2xl text-gray-300 text-shadow-xl">/</span>
<span className="text-3xl text-white text-shadow-xl">
<span className="text-2xl text-gray-300 ">/</span>
<span className="text-3xl text-white ">
{ data.assists }
</span>
</div>
@ -79,17 +79,17 @@ export default function Session ( { name, tag }: { name: string; tag: string } )
<div className={ `absolute top-0 w-full ${ data.lpGain !== 0 ? "slide-box" : ""
}` }>
<div className="wl flex flex-row justify-center">
<div className="wins text-3xl text-center text-sky-600 px-1 text-shadow-xl">
<div className="wins text-3xl text-center text-sky-600 px-1 ">
{ data.wins }W
</div>
<div className="losses text-3xl text-center text-red-600 px-1 text-shadow-xl">
<div className="losses text-3xl text-center text-red-600 px-1 ">
{ data.losses }L
</div>
</div>
{ typeof data.lpGain === "number" && data.lpGain !== 0 && (
<div
className={ `lp text-3xl text-center px-1 text-shadow-xl ${ data.lpGain > 0
className={ `lp text-3xl text-center px-1 ${ data.lpGain > 0
? "text-sky-600"
: data.lpGain < 0
? "text-red-600"

8
src/app/globals.css
View File

@ -45,6 +45,14 @@ body {
}
}
.ring-4-red-600 {
box-shadow: 0 0 0 4px #e7000b;
}
.ring-4-sky-600 {
box-shadow: 0 0 0 4px #0084d1;
}
.scaler-200 {
transform: scale(2);
}