login check, better auto play

src/components/about-tab.tsx

@@ -10,9 +10,9 @@ export default function AboutTab() {
     <div className="space-y-6">
       <Card>
         <CardHeader>
-          <CardTitle className="text-2xl">About Wikispeedia</CardTitle>
+          <CardTitle className="text-2xl">About WikiRacing</CardTitle>
           <CardDescription>
-            A wiki racing game where you navigate from one Wikipedia article to another using only hyperlinks
+            Navigate from one Wikipedia article to another using only hyperlinks
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">

src/components/game-component.tsx

@@ -113,7 +113,7 @@ export default function GameComponent({
     "playing"
   );
   const [continuousPlay, setContinuousPlay] = useState<boolean>(false);
-  const [autoRunning, setAutoRunning] = useState<boolean>(true);
+  const [autoRunning, setAutoRunning] = useState<boolean>(false);
 
   const [convo, setConvo] = useState<Message[]>([]);
   const [expandedMessages, setExpandedMessages] = useState<Record<number, boolean>>({});

src/components/play-tab.tsx

@@ -48,6 +48,7 @@ export default function PlayTab({
   const [maxTokens, setMaxTokens] = useState<number>(3000);
   const [maxLinks, setMaxLinks] = useState<number>(200);
   const [isServerConnected, setIsServerConnected] = useState<boolean>(false);
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
   const [modelList, setModelList] = useState<
     {
       id: string;
@@ -78,6 +79,34 @@ export default function PlayTab({
     return () => clearInterval(interval);
   }, []);
 
+  // Authentication check
+  useEffect(() => {
+    const checkAuthentication = () => {
+      const idToken = window.localStorage.getItem("huggingface_id_token");
+      const accessToken = window.localStorage.getItem("huggingface_access_token");
+
+      if (idToken && accessToken) {
+        try {
+          const idTokenObject = JSON.parse(idToken);
+          if (idTokenObject.exp > Date.now() / 1000) {
+            setIsAuthenticated(true);
+            return;
+          }
+        } catch (error) {
+          console.error("Error parsing ID token:", error);
+        }
+      }
+      setIsAuthenticated(false);
+    };
+
+    checkAuthentication();
+    window.addEventListener("storage", checkAuthentication);
+    
+    return () => {
+      window.removeEventListener("storage", checkAuthentication);
+    };
+  }, []);
+
   useEffect(() => {
     const fetchAllArticles = async () => {
       const response = await fetch(`${API_BASE}/get_all_articles`);
@@ -306,14 +335,30 @@ export default function PlayTab({
           </Card>
 
           <div className="flex justify-center">
-            <Button
-              onClick={handleStartGame}
-              size="lg"
-              className="px-8"
-              variant="default"
-            >
-              Start Game
-            </Button>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <Button
+                      onClick={handleStartGame}
+                      size="lg"
+                      className="px-8"
+                      variant="default"
+                      disabled={!isAuthenticated && player === "model"}
+                    >
+                      Start Game
+                    </Button>
+                  </div>
+                </TooltipTrigger>
+                {!isAuthenticated && player === "model" && (
+                  <TooltipContent>
+                    <p className="max-w-xs">
+                      Please sign in with Hugging Face to play the game
+                    </p>
+                  </TooltipContent>
+                )}
+              </Tooltip>
+            </TooltipProvider>
           </div>
 
           {!isServerConnected && (