From ecb5000814058f9e84bd48ff270be8d15fa2c3b6 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 18 Jan 2024 00:44:03 -0500 Subject: [PATCH] change game card? yes --- new-ui/src/components/display-card.tsx | 219 ++++++++++++++++++++++++- new-ui/src/components/loading.tsx | 11 ++ new-ui/src/components/ui/avatar.tsx | 23 +++ new-ui/src/components/ui/badge.tsx | 30 ++++ new-ui/src/components/ui/button.tsx | 72 ++++---- new-ui/src/components/ui/card.tsx | 1 - new-ui/src/components/ui/table.tsx | 50 ++++++ new-ui/src/components/ui/tabs.tsx | 71 +++----- new-ui/src/pages/Games.tsx | 27 +-- 9 files changed, 397 insertions(+), 107 deletions(-) create mode 100644 new-ui/src/components/loading.tsx create mode 100644 new-ui/src/components/ui/avatar.tsx create mode 100644 new-ui/src/components/ui/badge.tsx create mode 100644 new-ui/src/components/ui/table.tsx diff --git a/new-ui/src/components/display-card.tsx b/new-ui/src/components/display-card.tsx index 7b37af4..3a3aa9f 100644 --- a/new-ui/src/components/display-card.tsx +++ b/new-ui/src/components/display-card.tsx @@ -3,8 +3,12 @@ import { Game } from '~/interface'; import { FiCalendar, FiClock } from 'solid-icons/fi'; import { IoLocationOutline, IoWarning } from 'solid-icons/io'; +import { OcDotfill3 } from 'solid-icons/oc'; +import { Avatar, AvatarImage } from '~/components/ui/avatar'; +import { Badge } from '~/components/ui/badge'; import { Button } from '~/components/ui/button'; -import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/card'; +import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '~/components/ui/card'; +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/ui/table'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs'; const logos = import.meta.glob('../assets/teams/*.svg', { eager: true }); @@ -15,7 +19,7 @@ const getLogo = (team: string) => { const shortName = (name: string) => { const split = name.split(' '); - return split[split.length - 1]; + return split.slice(1).join(' '); }; const formattedTimeForUser = (time: number): string => { @@ -58,6 +62,13 @@ const formattedDateForUser = (time: number): string => { return new Intl.DateTimeFormat('en-US', options).format(date); }; +const winningTeam = (game: Game): number => { + if (game.status === 'Final') { + return game.home_team.score > game.away_team.score ? game.home_team.id : game.away_team.id; + } + return 0; +}; + interface IDisplayCard { game: Game; } @@ -85,6 +96,210 @@ export const DisplayCardHeader: Component = (props: IDisplayCard) ); }; +export const DemoCard: Component = (props: IDisplayCard) => { + return ( + <> + + +
+
+ + + +
+ {props.game.home_team.name} + {`${props.game.home_team.wins} - ${props.game.home_team.losses}`} +
+
+ + + Winner + + +
+
+
+ + + +
+ {props.game.away_team.name} + {`${props.game.away_team.wins} - ${props.game.away_team.losses}`} +
+
+ + + Winner + + +
+ + {/* +
+ {`${props.game.home_team.name}'s +
+ {`${props.game.home_team.name}`} +

30-15

+
+
+
+
+ {`${props.game.away_team.name}`} +

35-10

+
+ {`${props.game.away_team.name}'s + Projected Winner +
+ */} + +
+
+ + {formattedDateForUser(props.game.start_time_unix)} +
+ +
+ + {`${props.game.location.name}, ${props.game.location.city}, ${props.game.location.state}`} +
+ +
+ + + + Live +
+
+
+ +
+

Key Player - {props.game.home_team.name}

+

{props.game.home_team.leader.name}

+

Points: {props.game.home_team.leader.points}

+

Rebounds: {props.game.home_team.leader.rebounds}

+

Assists: {props.game.home_team.leader.assists}

+
+ + +
+

Key Player - {props.game.away_team.name}

+

{props.game.away_team.leader.name}

+

Points: {props.game.away_team.leader.points}

+

Rebounds: {props.game.away_team.leader.rebounds}

+

Assists: {props.game.away_team.leader.assists}

+
+ +
+
+
+ • + Live +
+

+ {`${shortName(props.game.home_team.name)} : ${props.game.home_team.score}`} - {`${shortName(props.game.away_team.name)}: ${props.game.away_team.score}`} +

+

{props.game.status}

+
+
+
+
+

Current Score

+
+ + {shortName(props.game.home_team.name)}: {props.game.home_team.score} + + Final +
+
+
+

Score Breakdown - {shortName(props.game.home_team.name)}

+ + + + 1st Quarter + 2nd Quarter + 3rd Quarter + 4th Quarter + + + + + 25 + 22 + 30 + 27 + + + 20 + 25 + 22 + 30 + + +
+
+
+

Timeouts Remaining

+

{shortName(props.game.home_team.name)}: 2

+
+
+
+
+

Current Score

+
+ + {shortName(props.game.away_team.name)}: {props.game.away_team.score} + + Final +
+
+
+

Score Breakdown - {shortName(props.game.away_team.name)}

+ + + + 1st Quarter + 2nd Quarter + 3rd Quarter + 4th Quarter + + + + + 25 + 22 + 30 + 27 + + + 20 + 25 + 22 + 30 + + +
+
+
+

Timeouts Remaining

+

{shortName(props.game.away_team.name)}: 1

+
+
+
+ + + + + + + + ); +}; + export const DisplayCard: Component = (props: IDisplayCard) => { return ( <> diff --git a/new-ui/src/components/loading.tsx b/new-ui/src/components/loading.tsx new file mode 100644 index 0000000..aa53191 --- /dev/null +++ b/new-ui/src/components/loading.tsx @@ -0,0 +1,11 @@ +import { Component } from 'solid-js'; + +export const Loading: Component = () => { + return ( +
+
+
+
+
+ ); +}; diff --git a/new-ui/src/components/ui/avatar.tsx b/new-ui/src/components/ui/avatar.tsx new file mode 100644 index 0000000..7554433 --- /dev/null +++ b/new-ui/src/components/ui/avatar.tsx @@ -0,0 +1,23 @@ +import type { Component } from 'solid-js'; +import { splitProps } from 'solid-js'; + +import { Image as ImagePrimitive } from '@kobalte/core'; + +import { cn } from '~/lib/utils'; + +const Avatar: Component = (props) => { + const [, rest] = splitProps(props, ['class']); + return ; +}; + +const AvatarImage: Component = (props) => { + const [, rest] = splitProps(props, ['class']); + return ; +}; + +const AvatarFallback: Component = (props) => { + const [, rest] = splitProps(props, ['class']); + return ; +}; + +export { Avatar, AvatarFallback, AvatarImage }; diff --git a/new-ui/src/components/ui/badge.tsx b/new-ui/src/components/ui/badge.tsx new file mode 100644 index 0000000..9778067 --- /dev/null +++ b/new-ui/src/components/ui/badge.tsx @@ -0,0 +1,30 @@ +import type { Component, ComponentProps } from 'solid-js'; +import { splitProps } from 'solid-js'; + +import type { VariantProps } from 'class-variance-authority'; +import { cva } from 'class-variance-authority'; + +import { cn } from '~/lib/utils'; + +const badgeVariants = cva('focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2', { + variants: { + variant: { + default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent', + secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent', + destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent', + outline: 'text-foreground', + }, + }, + defaultVariants: { + variant: 'default', + }, +}); + +export interface BadgeProps extends ComponentProps<'div'>, VariantProps {} + +const Badge: Component = (props) => { + const [, rest] = splitProps(props, ['variant', 'class']); + return
; +}; + +export { Badge, badgeVariants }; diff --git a/new-ui/src/components/ui/button.tsx b/new-ui/src/components/ui/button.tsx index 36dbd20..4b82f2d 100644 --- a/new-ui/src/components/ui/button.tsx +++ b/new-ui/src/components/ui/button.tsx @@ -1,49 +1,39 @@ -import type { Component, ComponentProps } from "solid-js" -import { splitProps } from "solid-js" +import type { Component, ComponentProps } from 'solid-js'; +import { splitProps } from 'solid-js'; -import type { VariantProps } from "class-variance-authority" -import { cva } from "class-variance-authority" +import type { VariantProps } from 'class-variance-authority'; +import { cva } from 'class-variance-authority'; -import { cn } from "~/lib/utils" +import { cn } from '~/lib/utils'; -const buttonVariants = cva( - "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", - { - variants: { - variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/90", - destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", - outline: "border-input hover:bg-accent hover:text-accent-foreground border", - secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline" - }, - size: { - default: "h-10 px-4 py-2", - sm: "h-9 rounded-md px-3", - lg: "h-11 rounded-md px-8", - icon: "h-10 w-10" - } +const buttonVariants = cva('ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', { + variants: { + variant: { + default: 'bg-primary text-primary-foreground hover:bg-primary/90', + destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', + outline: 'border-input hover:bg-accent hover:text-accent-foreground border', + secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'text-primary underline-offset-4 hover:underline', }, - defaultVariants: { - variant: "default", - size: "default" - } - } -) + size: { + default: 'h-10 px-4 py-2', + sm: 'h-9 rounded-md px-3', + lg: 'h-11 rounded-md px-8', + icon: 'h-10 w-10', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, +}); -export interface ButtonProps - extends ComponentProps<"button">, - VariantProps {} +export interface ButtonProps extends ComponentProps<'button'>, VariantProps {} const Button: Component = (props) => { - const [, rest] = splitProps(props, ["variant", "size", "class"]) - return ( -