119 lines
3.3 KiB
TypeScript
119 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface Player
|
|
{
|
|
name: string;
|
|
position: string;
|
|
team: string | null;
|
|
tag: string | null;
|
|
country: string | null;
|
|
logo: string | null;
|
|
championId: number;
|
|
teamId: number;
|
|
wr: number;
|
|
championImage: string;
|
|
countryFlag: string;
|
|
positionIcon: string;
|
|
}
|
|
|
|
interface LobbyData
|
|
{
|
|
inGame: boolean;
|
|
gameId?: number;
|
|
players?: Player[];
|
|
}
|
|
|
|
export default function Lobby ( { player }: { player: string } )
|
|
{
|
|
const [ data, setData ] = useState<LobbyData | null>( null );
|
|
const [ lastGameId, setLastGameId ] = useState<number | null>( null );
|
|
const [ showAnimation, setShowAnimation ] = useState( false );
|
|
|
|
useEffect( () =>
|
|
{
|
|
const fetchLobby = async () =>
|
|
{
|
|
const res = await fetch( `/api/lobby/${ player }` );
|
|
if ( !res.ok ) return;
|
|
const json = await res.json();
|
|
setData( json );
|
|
|
|
if ( json.inGame && json.gameId !== lastGameId )
|
|
{
|
|
setShowAnimation( true );
|
|
setLastGameId( json.gameId );
|
|
}
|
|
};
|
|
|
|
fetchLobby();
|
|
const interval = setInterval( fetchLobby, 45 * 1000 );
|
|
return () => clearInterval( interval );
|
|
}, [ player, lastGameId ] );
|
|
|
|
if ( !data || !data.inGame || !data.players ) return null;
|
|
|
|
const overlayClass = `overlay slide-animation max-h-screen grid grid-rows-2 items-center font-sans font-bold tracking-wide ${ showAnimation ? "" : "hidden"
|
|
}`;
|
|
|
|
return (
|
|
<div className={ overlayClass } onAnimationEnd={ () => setShowAnimation( false ) }>
|
|
{ [ 200, 100 ].map( ( teamId ) => (
|
|
<div className="team w-max" key={ teamId }>
|
|
{ data.players
|
|
.filter( ( p ) => p.teamId === teamId )
|
|
.map( ( player, i ) =>
|
|
{
|
|
const playerClass =
|
|
"player flex flex-row justify-between items-center my-2 min-w-56 w-full max-w-[400px] bg-opacity-50 rounded-xl shadow-md " +
|
|
( teamId === 100 ? "bg-sky-800" : "bg-red-800" );
|
|
|
|
return (
|
|
<div key={ i } className={ playerClass }>
|
|
<div
|
|
className="champion w-11 h-11 scaler-125 bg-center bg-no-repeat bg-[length:120%] rounded-br-xl rounded-tr-xl"
|
|
style={ {
|
|
backgroundImage: `url(${ player.championImage })`,
|
|
} }
|
|
></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">
|
|
{ player.tag ? `${ player.tag } ${ player.name }` : player.name }
|
|
</div>
|
|
|
|
<div className="flex flex-row gap-1">
|
|
<div
|
|
className="country w-8 h-6 scaler-75 bg-center bg-contain bg-no-repeat"
|
|
style={ {
|
|
backgroundImage: `url(${ player.countryFlag })`,
|
|
} }
|
|
></div>
|
|
<div
|
|
className="position w-6 h-6 scaler-105 bg-center bg-contain bg-no-repeat"
|
|
style={ {
|
|
backgroundImage: `url(${ player.positionIcon })`,
|
|
} }
|
|
></div>
|
|
<div className="wr font-bold text-white text-xs text-shadow-xl ml-1 pt-1">
|
|
{ player.wr }%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{ player.logo && (
|
|
<div
|
|
className="logo w-10 h-10 scaler-90 mr-1 -ml-1 my-1 bg-center bg-contain bg-no-repeat rounded-lg"
|
|
style={ { backgroundImage: `url(${ player.logo })` } }
|
|
></div>
|
|
) }
|
|
</div>
|
|
);
|
|
} ) }
|
|
</div>
|
|
) ) }
|
|
</div>
|
|
);
|
|
}
|