made soem more qol changes

day-mon · Jan 20, 2024 · 09f319b · 09f319b
1 parent 6d05c5b
commit 09f319b
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 42 deletions.
diff --git a/ui/src/components/display-card.tsx b/ui/src/components/display-card.tsx
@@ -1,5 +1,5 @@
 import { Component, createSignal, For, Show } from 'solid-js';
-import { Game, GameWithPrediction, Period, Team } from '~/interface';
+import { GameWithPrediction, Period, Team } from '~/interface';
 
 import { FiClock } from 'solid-icons/fi';
 import { IoLocationOutline } from 'solid-icons/io';
@@ -16,6 +16,7 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '~/components/ui/alert-dialog.tsx';
+import { isLive, timeUntilGame } from '~/lib/utils.ts';
 
 const logos = import.meta.glob('../assets/teams/*.svg', { eager: true });
 
@@ -41,16 +42,7 @@ const formattedTimeForUser = (time: number): string => {
   return new Intl.DateTimeFormat('en-US', options).format(date);
 };
 
-const isLive = (game: Game): boolean => {
-  let time = game.start_time_unix;
-  let date = new Date(time * 1000);
-  let currentDate = new Date();
-  if (date > currentDate) {
-    return false;
-  }
-  let status = game.status.toLowerCase();
-  return status !== 'ppd';
-};
+
 
 const getColorFromStatusAndOutcome = (
   status: string,
@@ -66,19 +58,7 @@ const getColorFromStatusAndOutcome = (
     return 'bg-yellow-600';
   }
 }
-const timeUntilGame = (game: GameWithPrediction): string => {
-  /**
-   * Takes in a unix seconds timestamp and returns a formatted time string
-   * for the user.
-   * Like so: 12:00 PM EST
-   */
-  const date = new Date(game.start_time_unix * 1000); // Convert seconds to milliseconds
-  const currentDate = new Date();
-  const diff = date.getTime() - currentDate.getTime();
-  const hours = Math.floor(diff / (1000 * 60 * 60));
-  const minutes = Math.floor((diff / (1000 * 60)) % 60);
-  return `${hours} hours, ${minutes} minutes`;
-};
+
 
 const winningTeam = (game: GameWithPrediction): number => {
   if (game.status === 'Final') {
@@ -143,7 +123,10 @@ export const TeamInfo: Component<ITeamInfoProps> = (props: ITeamInfoProps) => {
   return (
     <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())} />
+        <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">
@@ -209,7 +192,7 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
                   </span>
 
                   <Show when={!isLive(props.game) && props.game.status !== 'PPD'}>
-                    <p class={`text-xs text-gray-400 font-bold`}>
+                    <p class={`text-xs text-gray-400 text-center font-bold`}>
                       {timeUntilGame(props.game)}
                     </p>
                   </Show>
@@ -255,6 +238,7 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
         <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))}>
+              View Injury Report
               <AlertDialog
                 open={injuryReportOpen()}
                 onOpenChange={setInjuryReportOpen}

diff --git a/ui/src/lib/utils.ts b/ui/src/lib/utils.ts
@@ -1,7 +1,7 @@
 import type { ClassValue } from 'clsx';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { GameWithPrediction } from '~/interface.ts';
+import { Game, GameWithPrediction } from '~/interface.ts';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -45,6 +45,38 @@ export const isPredictionCorrect = (game: GameWithPrediction): boolean => {
   return false;
 }
 
+export const isLive = (game: Game): boolean => {
+  let time = game.start_time_unix;
+  let date = new Date(time * 1000);
+  let currentDate = new Date();
+  if (date > currentDate) {
+    return false;
+  }
+  let status = game.status.toLowerCase();
+  return status !== 'ppd';
+};
+
+export const timeUntilGame = (game: GameWithPrediction): string => {
+  /**
+   * Takes in a unix seconds timestamp and returns a formatted time string
+   * for the user.
+   * Like so: 12:00 PM EST
+   */
+  const date = new Date(game.start_time_unix * 1000); // Convert seconds to milliseconds
+  const currentDate = new Date();
+  const diff = date.getTime() - currentDate.getTime();
+  const hours = Math.floor(diff / (1000 * 60 * 60));
+  const minutes = Math.floor((diff / (1000 * 60)) % 60);
+
+  // check to see if there is one hour left and if so dont add an s to hour
+  const hourString = hours === 1 ? 'hour' : 'hours';
+  const minuteString = minutes === 1 ? 'minute' : 'minutes';
+  if (hours === 0) {
+    return `${minutes} ${minuteString}`;
+  }
+  return `${hours} ${hourString} ${minutes} ${minuteString}`;
+};
+
 
 export const isGameActuallyLive = (game: GameWithPrediction): boolean => {
   let status = game.status.toLowerCase();

diff --git a/ui/src/pages/Games.tsx b/ui/src/pages/Games.tsx
@@ -7,6 +7,7 @@ import { Game, GameWithPrediction } from '~/interface';
 import { formattedDateForUser, isGameActuallyLive, isPredictionCorrect } from '~/lib/utils';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select.tsx';
 import { Prediction } from '~/model/prediction.ts';
+import { Tooltip, TooltipContent, TooltipTrigger } from '~/components/ui/tooltip.tsx';
 
 export const Games = () => {
   const [games, setGames] = createSignal<Game[]>([]);
@@ -69,6 +70,8 @@ export const Games = () => {
 
 
 
+
+
   const getGamesWithPredictions = (games: Game[], prediction: Prediction[]): GameWithPrediction[] => {
     return games.map((game) => {
       const gamePrediction = prediction.find((pred) => pred.game_id === game.id);
@@ -115,29 +118,39 @@ export const Games = () => {
     <main class="pt-4 min-h-screen bg-shark-950">
       <Show when={games().length > 0} keyed fallback={<Loading />}>
         <div class="mx-2">
-          <div class="flex flex-row items-center justify-center">
-            <Select
-              options={models()}
-              placeholder="Select a model"
-              onChange={async (e) => {
-                await fetchPredictions(e);
-              }}
-              value={selectedModel()}
-              itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>} >
-              <SelectTrigger aria-label="models" class="w-[180px]">
-                <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
-              </SelectTrigger>
-              <SelectContent />
-            </Select>
+          <div class="flex flex-row items-center justify-center mb-10">
+         <Select
+          options={models()}
+          placeholder="Select a model"
+          onChange={async (e) => {
+            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>
+          <SelectContent class="bg-shark-950" />
+        </Select>
           </div>
           <div id="options" class="text-white w-full max-w-4xl mx-auto mb-3 flex flex-row items-center justify-between">
             <div class="flex items-center text-sm">
               <FiCalendar class="mr-1 h-4 w-4 inline-block" />
               <span class="ml-2">{formattedDateForUser(games()[0].start_time_unix)}</span>
             </div>
+
             <div class="flex flex-row items-center">
               <span class="text-sm mr-2">Live Updates</span>
-              <Switch checked={liveUpdates()} onChange={toggleLiveUpdates} disabled={!gamesPlaying(games())} />
+              <Tooltip>
+                <TooltipTrigger>
+                  <Switch checked={liveUpdates()} onChange={toggleLiveUpdates} disabled={!gamesPlaying(games())} />
+                </TooltipTrigger>
+                <Show when={!gamesPlaying(games())}>
+                  <TooltipContent>
+                    Live updates are disabled until games start
+                  </TooltipContent>
+                </Show>
+              </Tooltip>
             </div>
           </div>