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>
<div className="grid grid-rows-2 flex-grow mx-4 min-w-0"> <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 } { player.tag ? `${ player.tag } ${ player.name }` : player.name }
</div> </div>
@ -96,7 +96,7 @@ export default function Lobby ( { player }: { player: string } )
backgroundImage: `url(${ player.positionIcon })`, backgroundImage: `url(${ player.positionIcon })`,
} } } }
></div> ></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 }% { player.wr }%
</div> </div>
</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="text flex flex-row font-bold tracking-wide">
<div className="elo basis-2/3 pr-4 mb-3 text-white"> <div className="elo basis-2/3 pr-4 mb-3 text-white">
{ [ "MASTER", "GRANDMASTER", "CHALLENGER" ].includes( data.tier ) ? ( { [ "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 { data.tier } { data.lp } LP
</div> </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 { data.tier } { data.division } { data.lp } LP
</div> </div>
) } ) }
</div> </div>
<div className="stats basis-1/3 flex flex-row justify-end text-3xl tracking-tighter"> <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="wins px-2 text-sky-600 ">{ data.wins }W</div>
<div className="losses px-2 text-red-600 text-shadow-xl">{ data.losses }L</div> <div className="losses px-2 text-red-600 ">{ data.losses }L</div>
<div className="winrate pl-3 text-white text-shadow-xl"> <div className="winrate pl-3 text-white ">
{ data.winrate }% { data.winrate }%
</div> </div>
</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" : "" }` } className={ `game basis-1/6 px-1.5 ${ match.isOld ? "old" : "" }` }
> >
<div <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 <div
@ -92,7 +92,7 @@ export default function Ranked ( { name, tag }: { name: string; tag: string } )
style={ { backgroundImage: `url('${ match.championImg }')` } } style={ { backgroundImage: `url('${ match.championImg }')` } }
/> />
</div> </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 } { match.kills }/{ match.deaths }/{ match.assists }
</div> </div>
</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="session mt-5">
<div className="kda text-center px-2"> <div className="kda text-center px-2">
<span className="text-3xl text-white text-shadow-xl"> <span className="text-3xl text-white ">
{ data.kills } { data.kills }
</span> </span>
<span className="text-2xl text-gray-300 text-shadow-xl">/</span> <span className="text-2xl text-gray-300 ">/</span>
<span className="text-3xl text-red-600 text-shadow-xl"> <span className="text-3xl text-red-600 ">
{ data.deaths } { data.deaths }
</span> </span>
<span className="text-2xl text-gray-300 text-shadow-xl">/</span> <span className="text-2xl text-gray-300 ">/</span>
<span className="text-3xl text-white text-shadow-xl"> <span className="text-3xl text-white ">
{ data.assists } { data.assists }
</span> </span>
</div> </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={ `absolute top-0 w-full ${ data.lpGain !== 0 ? "slide-box" : ""
}` }> }` }>
<div className="wl flex flex-row justify-center"> <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 { data.wins }W
</div> </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 { data.losses }L
</div> </div>
</div> </div>
{ typeof data.lpGain === "number" && data.lpGain !== 0 && ( { typeof data.lpGain === "number" && data.lpGain !== 0 && (
<div <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" ? "text-sky-600"
: data.lpGain < 0 : data.lpGain < 0
? "text-red-600" ? "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 { .scaler-200 {
transform: scale(2); transform: scale(2);
} }