From afa32be88894d56d8d550f89a93aeb8e4e72e8f5 Mon Sep 17 00:00:00 2001
From: "Damon L. Montague Jr." <damon@montague.im>
Date: Sun, 28 Apr 2024 15:34:38 -0400
Subject: [PATCH] added brain and added animation to ball

---
 ui/src/pages/Games.tsx | 13 +++++++++----
 ui/src/pages/Home.tsx  | 12 ++++--------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/ui/src/pages/Games.tsx b/ui/src/pages/Games.tsx
index 177bda7..634a06e 100644
--- a/ui/src/pages/Games.tsx
+++ b/ui/src/pages/Games.tsx
@@ -19,17 +19,22 @@ import { Prediction } from '~/model/prediction.ts';
 import { AccuribetAPI } from '~/client/api.ts';
 import { AnimationDiv } from '~/components/animated-div.tsx';
 import { SimpleTooltip } from '~/components/tooltip.tsx';
-import { cache } from '@solidjs/router';
 
 async function fetchGames() {
   const instance = AccuribetAPI.getInstance();
   return await instance.dailyGames();
 }
 
-const fetchModels = cache(async () => {
+
+async function fetchModels() {
+  if (sessionStorage.getItem('models')) {
+    return JSON.parse(sessionStorage.getItem('models') as string);
+  }
   const instance = AccuribetAPI.getInstance();
-  return await instance.listModels();
-}, 'models');
+  const response =  await instance.listModels();
+  sessionStorage.setItem('models', JSON.stringify(response));
+  return response;
+}
 
 async function fetchPredictions(model: string) {
   const instance = AccuribetAPI.getInstance();
diff --git a/ui/src/pages/Home.tsx b/ui/src/pages/Home.tsx
index 7d0ae1c..653b350 100644
--- a/ui/src/pages/Home.tsx
+++ b/ui/src/pages/Home.tsx
@@ -3,6 +3,8 @@ import { Button } from "~/components/ui/button.tsx";
 import { AiFillGithub } from "solid-icons/ai";
 import { AnimationDiv } from "~/components/animated-div.tsx";
 import { FaSolidBasketball } from "solid-icons/fa";
+import { BsCloudRain } from 'solid-icons/bs';
+import { TbBrain } from 'solid-icons/tb';
 
 export const Home = () => {
   return (
@@ -38,7 +40,7 @@ export const Home = () => {
                   easing={"ease-in-out"}
                 >
                   <AnimationDiv animate={{ rotate: [0, 360] }} duration={1.2} easing={"linear"}>
-                    <FaSolidBasketball class="mx-auto w-48 h-48 overflow-hidden rounded-xl object-cover sm:w-full lg:order-last light:fill-white" />
+                    <FaSolidBasketball class="mx-auto w-48 h-48 overflow-hidden rounded-xl object-cover sm:w-full lg:order-last light:fill-white transition-all duration-500 ease-in-out transform hover:scale-125 hover:rotate-45 cursor-pointer" />
                   </AnimationDiv>
                 </AnimationDiv>
               </div>
@@ -61,13 +63,7 @@ export const Home = () => {
                 </div>
               </div>
               <div class="mx-auto grid max-w-5xl items-center gap-6 py-12 lg:grid-cols-2 lg:gap-12">
-                <img
-                  alt="Accuracy Chart"
-                  class="mx-auto aspect-video overflow-hidden rounded-xl object-cover object-center sm:w-full lg:order-last"
-                  height="310"
-                  src="https://placeholder.pics/svg/300x200/F97EFF-8589FF/Placedholder"
-                  width="550"
-                />
+                <TbBrain class="mx-auto w-48 h-48 overflow-hidden rounded-xl object-cover sm:w-full lg:order-last text-secondary"/>
                 <div class="flex flex-col justify-center space-y-4">
                   <ul class="grid gap-6">
                     <li>