Skip to content

Commit

Permalink
added more things
Browse files Browse the repository at this point in the history
  • Loading branch information
@day-mon
day-mon committed Jan 20, 2024
1 parent 09f319b commit 0b094b1
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 66 deletions.
135 changes: 73 additions & 62 deletions ui/src/components/display-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { isLive, timeUntilGame } from '~/lib/utils.ts';
const logos = import.meta.glob('../assets/teams/*.svg', { eager: true });

const getLogo = (team: string) => {
let strIndex = `../assets/teams/${team}.svg`
let strIndex = `../assets/teams/${team}.svg`;
// @ts-ignore
return logos[strIndex].default;
};
Expand All @@ -43,7 +43,6 @@ const formattedTimeForUser = (time: number): string => {
};



const getColorFromStatusAndOutcome = (
status: string,
winner: boolean,
Expand All @@ -57,7 +56,7 @@ const getColorFromStatusAndOutcome = (
} else {
return 'bg-yellow-600';
}
}
};


const winningTeam = (game: GameWithPrediction): number => {
Expand All @@ -78,7 +77,7 @@ interface ITeamProps {
interface ITeamInfoProps {
team: Team;
winner: number;
prediction?: Prediction
prediction?: Prediction;
game: GameWithPrediction;
}

Expand All @@ -92,15 +91,18 @@ export const ScoreTable: Component<ITeamProps> = (props: ITeamProps) => {
};

return (
<Table class="mt-2">
<TableHeader class="bg-shark-700 text-shark-300">
<Table class='mt-2'>
<TableHeader class='bg-shark-700 text-shark-300'>
<TableRow>
<For each={props.team.score.periods}>{(period, _) => <TableHead class="text-center text-shark-300">{formatPeriodType(period)}</TableHead>}</For>
<For each={props.team.score.periods}>{(period, _) => <TableHead
class='text-center text-shark-300'>{formatPeriodType(period)}</TableHead>}</For>
</TableRow>
</TableHeader>
<TableBody class="bg-shark-600">
<TableBody class='bg-shark-600'>
<TableRow>
<For each={props.team.score.periods}>{(period, _) => <TableCell class="text-center">{period.score}</TableCell>}</For>
<For each={props.team.score.periods}>{(period, _) => <TableCell
class='text-center'>{period.score === null || period.score === 0 ? '-' : period.score
}</TableCell>}</For>
</TableRow>
</TableBody>
</Table>
Expand All @@ -109,36 +111,37 @@ export const ScoreTable: Component<ITeamProps> = (props: ITeamProps) => {

export const KeyPlayer: Component<ITeamProps> = (props: ITeamProps) => {
return (
<div class="bg-shark-700 p-4 rounded mt-4">
<h4 class="font-semibold">Key Player - {props.team.name}</h4>
<div class='bg-shark-700 p-4 rounded mt-4'>
<h4 class='font-semibold'>Key Player - {props.team.name}</h4>
<p>{props.team.leader.name}</p>
<p class="text-sm text-gray-200">Points: {props.team.leader.points}</p>
<p class="text-sm text-gray-200">Rebounds: {props.team.leader.rebounds}</p>
<p class="text-sm text-gray-200">Assists: {props.team.leader.assists}</p>
<p class='text-sm text-gray-200'>Points: {props.team.leader.points}</p>
<p class='text-sm text-gray-200'>Rebounds: {props.team.leader.rebounds}</p>
<p class='text-sm text-gray-200'>Assists: {props.team.leader.assists}</p>
</div>
);
};

export const TeamInfo: Component<ITeamInfoProps> = (props: ITeamInfoProps) => {
return (
<div class="flex flex-col items-center">
<Avatar class="h-14 w-14">
<div class='flex flex-col items-center'>
<Avatar class='h-14 w-14'>
<AvatarImage
alt={`${props.team.name}'s logo`}
src={getLogo(props.team.abbreviation.toLowerCase())}
/>
</Avatar>
<CardTitle class="text-lg font-bold text-center">{`${props.team.city} ${props.team.name}`}</CardTitle>
<CardDescription class="text-sm text-center flex flex-col items-center">
<CardTitle class='text-lg font-bold text-center'>{`${props.team.city} ${props.team.name}`}</CardTitle>
<CardDescription class='text-sm text-center flex flex-col items-center'>
<span>{`${props.team.wins} - ${props.team.losses}`}</span>
<span class="flex flex-row items-center mt-1">
<span class='flex flex-row items-center mt-1'>
<Show when={props.winner === props.team.id}>
<Badge class="bg-yellow-600 text-black">Winner</Badge>
<Badge class='bg-yellow-600 text-black'>Winner</Badge>
</Show>
<Show when={props.prediction && props.prediction.prediction_type === "win-loss" && props.prediction.prediction === `${props.team.city} ${props.team.name}`}>
<Show
when={props.prediction && props.prediction.prediction_type === 'win-loss' && props.prediction.prediction === `${props.team.city} ${props.team.name}`}>
<Badge class={`ml-2 ${getColorFromStatusAndOutcome(
props.game.status,
props.winner === props.team.id
props.winner === props.team.id,
)} text-white`}>Projected Winner</Badge>
</Show>
</span>
Expand All @@ -155,8 +158,8 @@ export const AdvancedGameCard: Component<ITeamProps> = (props: ITeamProps) => {
<ScoreTable team={props.team} />
</div>
</div>
)
}
);
};

export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
const [injuryReportOpen, setInjuryReportOpen] = createSignal(false);
Expand All @@ -166,28 +169,31 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
class='w-full max-w-4xl mx-auto bg-shark-900 rounded-lg shadow-md overflow-hidden p-4 text-white border-4 border-shark-700'>
<CardHeader>
<div class='flex flex-row items-center justify-between'>
<TeamInfo team={props.game.home_team} winner={winningTeam(props.game)} prediction={props.game.prediction} game={props.game} />
<span class="uppercase leading-3 font-boldtext-sm text-shark-400">vs</span>
<TeamInfo team={props.game.away_team} winner={winningTeam(props.game)} prediction={props.game.prediction} game={props.game} />
<TeamInfo team={props.game.home_team} winner={winningTeam(props.game)} prediction={props.game.prediction}
game={props.game} />
<span class='uppercase leading-3 font-boldtext-sm text-shark-400'>vs</span>
<TeamInfo team={props.game.away_team} winner={winningTeam(props.game)} prediction={props.game.prediction}
game={props.game} />
</div>
</CardHeader>
<CardContent class="">
<div class="flex justify-evenly mt-4 items-center pb-4">
<CardContent class=''>
<div class='flex justify-evenly mt-4 items-center pb-4'>
<Show when={props.game.location}>
<div class="flex items-center text-sm">
<IoLocationOutline class="mr-1 h-4 w-4 inline-block" />
<span class="ml-2">{`${props.game.location.name}, ${props.game.location.city}, ${props.game.location.state}`}</span>
<div class='flex items-center text-sm'>
<IoLocationOutline class='mr-1 h-4 w-4 inline-block' />
<span
class='ml-2'>{`${props.game.location.name}, ${props.game.location.city}, ${props.game.location.state}`}</span>
</div>
</Show>
<Show when={!isLive(props.game)}>
<div class="flex items-center justify-center text-sm">
<FiClock class="mr-1 h-4 w-4 inline-block" />
<span class="ml-2">
<div class='flex items-center justify-center text-sm'>
<FiClock class='mr-1 h-4 w-4 inline-block' />
<span class='ml-2'>
<Show when={props.game.status === 'PPD'}>
<p class="text-xs text-gray-400">Postponed</p>
<p class='text-xs text-gray-400'>Postponed</p>
</Show>

<span class={`${props.game.status === 'PPD' ? 'line-through': ''} `}>
<span class={`${props.game.status === 'PPD' ? 'line-through' : ''} `}>
{formattedTimeForUser(props.game.start_time_unix)}
</span>

Expand All @@ -200,7 +206,7 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
</div>
</Show>
</div>
<div class="grid grid-cols-2 gap-4">
<div class='grid grid-cols-2 gap-4'>
<For each={[props.game.home_team, props.game.away_team]}>
{(team, _) => (
<Show when={team.leader !== null && isLive(props.game)}>
Expand All @@ -209,22 +215,29 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
)}
</For>
<Show when={isLive(props.game)}>
<div class="col-span-2" id={`${props.game.id}-live-score`}>
<div class="text-center bg-shark-800 p-4 rounded-lg">
<div class="flex items-center justify-center mb-2">
<div class='col-span-2' id={`${props.game.id}-live-score`}>
<div class='text-center bg-shark-800 p-4 rounded-lg'>
<div class='flex items-center justify-center mb-2'>
<Show when={!props.game.status.toLowerCase().includes('final')}>
<span class="text-red-500 animate-pulse mr-2">
<span class='text-red-500 animate-pulse mr-2'>
<OcDotfill3 />
</span>
<span class="text-white font-bold">Live</span>
<span class='text-white font-bold'>Live</span>
</Show>
</div>
<p class="text-2xl text-white font-bold mb-2">
{`${props.game.home_team.name}: ${props.game.home_team.score.points}`}
<span class={'text-sm text-gray-400 mx-3'}> - </span>
{`${props.game.away_team.name}: ${props.game.away_team.score.points}`}
</p>
<p class="text-sm text-gray-400">{props.game.status.includes('ET') ? 'Starting soon!' : props.game.status}</p>
<div class='flex justify-center items-center text-2xl font-bold mb-2'>
<div class='text-center'>
<p class='text-white'>{props.game.home_team.name}</p>
<p class='text-white bg-shark-700 py-2 px-4 rounded'>{props.game.home_team.score.points}</p>
</div>
<span class='text-sm text-gray-400 mt-6 mx-3'> - </span>
<div class='text-center'>
<p class='text-white'>{props.game.away_team.name}</p>
<p class='text-white bg-shark-700 py-2 px-4 rounded'>{props.game.away_team.score.points}</p>
</div>
</div>
<p
class='text-sm text-gray-400'>{props.game.status.includes('ET') ? 'Starting soon!' : props.game.status}</p>
</div>
</div>
<For each={[props.game.home_team, props.game.away_team]}>
Expand All @@ -235,36 +248,35 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
</Show>
</div>
</CardContent>
<CardFooter class="flex justify-center mt-4">
<CardFooter class='flex justify-center mt-4'>
<Show when={[props.game.home_team, props.game.away_team].every((team) => team.injuries.length > 0)}>
<Button class="bg-yellow-300 text-yellow-800" variant="default" onClick={() => (setInjuryReportOpen(true))}>
<Button class='bg-shark-700 text-white' variant='default' onClick={() => (setInjuryReportOpen(true))}>
View Injury Report
<AlertDialog
open={injuryReportOpen()}
onOpenChange={setInjuryReportOpen}
preventScroll={true}

>
<AlertDialogContent>
<AlertDialogTitle>Injury Report</AlertDialogTitle>
<AlertDialogDescription>
<Table class="mt-2">
<TableHeader class="text-white">
<Table class='mt-2'>
<TableHeader class='text-white'>
<TableRow>
<TableHead class="text-center text-white ">Team</TableHead>
<TableHead class="text-center text-white">Player</TableHead>
<TableHead class="text-center text-white">Status</TableHead>
<TableHead class='text-center text-white '>Team</TableHead>
<TableHead class='text-center text-white'>Player</TableHead>
<TableHead class='text-center text-white'>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody class="">
<TableBody class=''>
<For each={[props.game.home_team, props.game.away_team]}>
{(team, _) => (
<For each={team.injuries}>
{(injury, _) => (
<TableRow>
<TableCell class="text-center">{team.name}</TableCell>
<TableCell class="text-center">{injury.player}</TableCell>
<TableCell class="text-center">{injury.status}</TableCell>
<TableCell class='text-center'>{team.name}</TableCell>
<TableCell class='text-center'>{injury.player}</TableCell>
<TableCell class='text-center'>{injury.status}</TableCell>
</TableRow>
)}
</For>
Expand All @@ -275,7 +287,6 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
</AlertDialogDescription>
</AlertDialogContent>
</AlertDialog>
View Injury Report (dont click lol it wont stop popping up)
</Button>
</Show>
</CardFooter>
Expand Down
8 changes: 4 additions & 4 deletions ui/src/pages/Games.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,10 +126,10 @@ export const Games = () => {
await fetchPredictions(e);
}}
value={selectedModel()}
itemComponent={(props) => <SelectItem class={'text-white bg-transparent hover:bg-shark-900'} item={props.item}>{props.item.rawValue}</SelectItem>} >
<SelectTrigger aria-label="models" class="w-[180px] bg-shark-950 text-white">
<SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
</SelectTrigger>
itemComponent={(props) => <SelectItem class={'text-white bg-transparent border-shark-700 hover:bg-shark-900'} item={props.item}>{props.item.rawValue}</SelectItem>} >
<SelectTrigger aria-label="models" class="w-[180px] bg-shark-950 text-white border-2 border-shark-700">
<SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
</SelectTrigger>
<SelectContent class="bg-shark-950" />
</Select>
</div>
Expand Down

0 comments on commit 0b094b1

Please sign in to comment.