feat: UI and design changes

src/app/evalbars/App.js

@@ -193,6 +193,13 @@ function App() {
     }
   };
 
+  const returnToHomePage = () => {
+    if (isBroadcastLoaded) {
+      setIsBroadcastLoaded(false);
+      setLinks([]);
+    }
+  }
+
   const startStreaming = async (roundId) => {
     if (!roundId) {
       console.error("No roundId provided for streaming");
@@ -676,7 +683,8 @@ function App() {
                 <img
                   src="https://i.imgur.com/z2fbMtT.png"
                   alt="ChessBase India Logo"
-                  style={{ height: "100px", marginTop: "20px" }}
+                  style={{ height: "100px", marginTop: "20px", cursor: isBroadcastLoaded ? "pointer" : "default" }}
+                  onClick={returnToHomePage}
                 />
               </Box>
             </Toolbar>
@@ -691,38 +699,42 @@ function App() {
                   marginBottom: 2,
                 }}
               >
-                {availableGames.map((game, index) => (
-                  <GameCard
-                    key={index}
-                    game={game}
-                    onClick={() => handleGameSelection(game)}
-                    isSelected={selectedGames.includes(game)}
-                  />
-                ))}
-                <Button
-                  variant="contained"
-                  color="primary"
-                  style={{ marginTop: "10px", marginRight: "10px" }}
-                  onClick={addSelectedGames}
-                >
-                  Add Selected Games Bar
-                </Button>
-                <Button
-                  variant="contained"
-                  color="secondary"
-                  style={{ marginTop: "10px", marginRight: "10px" }}
-                  onClick={handleDemoBlunder}
-                >
-                  Demo Blunder
-                </Button>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  style={{ marginTop: "10px" }}
-                  onClick={handleGenerateLink}
-                >
-                  Create Unique Link
-                </Button>
+                <Box>
+                  {availableGames.map((game, index) => (
+                    <GameCard
+                      key={index}
+                      game={game}
+                      onClick={() => handleGameSelection(game)}
+                      isSelected={selectedGames.includes(game)}
+                    />
+                  ))}
+                </Box>
+                <Box mb={2}>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    style={{ marginTop: "10px", marginRight: "10px" }}
+                    onClick={addSelectedGames}
+                  >
+                    Add Selected Games Bar
+                  </Button>
+                  <Button
+                    variant="contained"
+                    color="secondary"
+                    style={{ marginTop: "10px", marginRight: "10px" }}
+                    onClick={handleDemoBlunder}
+                  >
+                    Demo Blunder
+                  </Button>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    style={{ marginTop: "10px" }}
+                    onClick={handleGenerateLink}
+                  >
+                    Create Unique Link
+                  </Button>
+                </Box>
                 <CustomizeEvalBar
                   customStyles={customStyles}
                   setCustomStyles={setCustomStyles}

src/components/evalbar/Evalbar.js

@@ -133,7 +133,7 @@ function EvalBar({
 
   const formatEvaluation = (evalValue) => {
     if (evalValue < -1000 || evalValue > 1000) {
-      return "Checkmate";
+      return "Winning";
     }
     return evalValue;
   };

src/components/tournaments-list/TournamentsList.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import styled from "styled-components";
 
 const TournamentsWrapper = styled.div`
@@ -7,10 +7,6 @@ const TournamentsWrapper = styled.div`
   flex-direction: column;
   align-items: center;
 `;
-const NoBroadcastsMessage = styled.p`
-  color: #faf9f6; /* White color */
-  font-size: 1.2em; /* Bigger font size */
-`;
 
 const Card = styled.div`
   display: flex;
@@ -21,7 +17,6 @@ const Card = styled.div`
   padding: 1rem;
   margin: 1rem 0;
   border-radius: 1rem;
-  cursor: pointer;
   background-color: ${(props) =>
     props.selected ? "rgba(76, 175, 80, 0.3)" : "rgba(1, 1, 4, 0.6)"};
   transition: all 0.3s ease-in-out;
@@ -51,26 +46,33 @@ const CardHeader = styled.div`
 const CardTitle = styled.h2`
   font-size: 1.8em;
   color: #faf9f6;
+  margin-top: 1rem;
   margin-bottom: 1rem;
 `;
 
 const CardDate = styled.p`
   font-size: 1em;
   color: #faf9f6;
+  margin-top: 1rem;
   margin-bottom: 1rem;
 `;
 
 const CardDescription = styled.p`
   font-size: 1em;
   color: #faf9f6;
   margin-bottom: 1rem;
-  height: 4em;
+  height: auto;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
 
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
 const Button = styled.a`
-  margin-top: 0.5rem;
+  margin: 0.5rem;
   padding: 0.5rem 1rem;
   background-color: #4caf50;
   color: white;
@@ -97,7 +99,7 @@ const Title = styled.h1`
 const SearchWrapper = styled.div`
   display: flex;
   justify-content: center;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 `;
 
 const SearchInput = styled.input`
@@ -124,11 +126,8 @@ const TournamentsList = ({ onSelect }) => {
   const [tournaments, setTournaments] = useState([]);
   const [filteredTournaments, setFilteredTournaments] = useState([]);
   const [searchTerm, setSearchTerm] = useState("");
-  const [selectedTournaments, setSelectedTournaments] = useState([]);
-  const [checkedItems, setCheckedItems] = useState({});
   const [customUrl, setCustomUrl] = useState("");
   const [tournamentId, setTournamentId] = useState("");
-  const [broadcasts, setBroadcasts] = useState(true);
 
   useEffect(() => {
     fetch("https://lichess.org/api/broadcast?nb=50")
@@ -145,9 +144,6 @@ const TournamentsList = ({ onSelect }) => {
         );
         setTournaments(ongoingTournaments);
         setFilteredTournaments(ongoingTournaments);
-        if (ongoingTournaments.length === 0) {
-          setBroadcasts(false);
-        }
       })
       .catch((error) =>
         console.error("Error fetching tournaments:", error)
@@ -198,7 +194,9 @@ const TournamentsList = ({ onSelect }) => {
           placeholder="Search tournaments..."
         />
         <SearchButton onClick={handleSearch}>Search</SearchButton>
+      </SearchWrapper>
 
+      <SearchWrapper>
         <SearchInput
           value={customUrl}
           onChange={handleCustomUrlChange}
@@ -210,7 +208,6 @@ const TournamentsList = ({ onSelect }) => {
         tournament.tour && tournament.rounds && tournament.rounds.length > 0 ? (
           <Card
             key={tournament.tour.id}
-            selected={selectedTournaments.includes(tournament.tour.id)}
           >
             {tournament.image && (
               <img
@@ -219,38 +216,36 @@ const TournamentsList = ({ onSelect }) => {
                 alt="Tournament Image"
               />
             )}
-            <input
-              type="checkbox"
-              checked={checkedItems[tournament.tour.id]}
-              onChange={() => {
-                setCheckedItems((prevState) => ({
-                  ...prevState,
-                  [tournament.tour.id]: !prevState[tournament.tour.id],
-                }));
-                const ongoingRound = tournament.rounds.find(
-                  (round) => round.ongoing === true
-                ) || tournament.rounds[0];
-                if (ongoingRound) {
-                  onSelect({
-                    tournamentId: tournament.tour.id,
-                    roundId: ongoingRound.id,
-                    gameIDs: ongoingRound.games ? ongoingRound.games.map(game => `${game.white.name}-vs-${game.black.name}`) : []
-                  });
-                }
-              }}
-            />
             <CardHeader>
               <CardTitle>{tournament.tour.name}</CardTitle>
               <CardDate>{tournament.tour.date}</CardDate>
             </CardHeader>
-            <CardDescription>{tournament.tour.description}</CardDescription>
-            <Button
-              href={tournament.tour.url}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Official Website
-            </Button>
+            <CardDescription>{tournament.tour.description ?? "No description available"}</CardDescription>
+            <ButtonWrapper>
+              <Button
+                onClick={() => {
+                  const ongoingRound = tournament.rounds.find(
+                    (round) => round.ongoing === true
+                  ) || tournament.rounds[0];
+                  if (ongoingRound) {
+                    onSelect({
+                      tournamentId: tournament.tour.id,
+                      roundId: ongoingRound.id,
+                      gameIDs: ongoingRound.games ? ongoingRound.games.map(game => `${game.white.name}-vs-${game.black.name}`) : []
+                    });
+                  }
+                }}
+              >
+                Check Games
+              </Button>
+              <Button
+                href={tournament.tour.url}
+                target="_blank"
+                rel="noreferrer"
+              >
+                Official Website
+              </Button>
+            </ButtonWrapper>
           </Card>
         ) : null
       )}