Merge pull request #981 from hydralauncher/feature/adding-flame-animation

feat: adding flame animation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydralauncher",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Hydra",
   "main": "./out/main/index.js",
   "author": "Los Broxas",

src/locales/en/translation.json

@@ -9,7 +9,7 @@
     "surprise_me": "Surprise me",
     "no_results": "No results found",
     "start_typing": "Starting typing to search...",
-    "hot": "🔥 Hot now",
+    "hot": "Hot now",
     "weekly": "📅 Top games of the week"
   },
   "sidebar": {

src/locales/es/translation.json

@@ -8,7 +8,7 @@
     "trending": "Tendencias",
     "surprise_me": "¡Sorpréndeme!",
     "no_results": "No se encontraron resultados",
-    "hot": "🔥 Caliente ahora",
+    "hot": "Caliente ahora",
     "weekly": "📅 Los mejores juegos de la semana",
     "start_typing": "Empieza a escribir para buscar..."
   },

src/locales/pt-BR/translation.json

@@ -6,7 +6,7 @@
   "home": {
     "featured": "Destaques",
     "trending": "Populares",
-    "hot": "🔥 Populares agora",
+    "hot": "Populares agora",
     "weekly": "📅 Mais baixados da semana",
     "surprise_me": "Surpreenda-me",
     "no_results": "Nenhum resultado encontrado",

src/locales/ru/translation.json

@@ -8,7 +8,7 @@
     "trending": "В тренде",
     "surprise_me": "Удиви меня",
     "no_results": "Ничего не найдено",
-    "hot": "🔥 Сейчас жарко",
+    "hot": "Сейчас жарко",
     "start_typing": "Начинаю вводить текст для поиска...",
     "weekly": "📅 Лучшие игры недели"
   },

src/renderer/src/components/sidebar/download-icon.tsx

@@ -1,4 +1,3 @@
-import { useRef } from "react";
 import Lottie from "lottie-react";
 
 import downloadingAnimation from "@renderer/assets/lottie/downloading.json";
@@ -8,11 +7,8 @@ export interface DownloadIconProps {
 }
 
 export function DownloadIcon({ isDownloading }: DownloadIconProps) {
-  const lottieRef = useRef(null);
-
   return (
     <Lottie
-      lottieRef={lottieRef}
       animationData={downloadingAnimation}
       loop={isDownloading}
       autoplay={isDownloading}

src/renderer/src/pages/home/home.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -8,10 +8,11 @@ import { Button, GameCard, Hero } from "@renderer/components";
 import type { Steam250Game, CatalogueEntry } from "@types";
 
 import starsAnimation from "@renderer/assets/lottie/stars.json";
+import flameAnimation from "@renderer/assets/lottie/flame.json";
 
 import * as styles from "./home.css";
-import { vars } from "@renderer/theme.css";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
-import Lottie from "lottie-react";
+import Lottie, { type LottieRefCurrentProps } from "lottie-react";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { CatalogueCategory } from "@shared";
 
@@ -19,6 +20,8 @@ export function Home() {
   const { t } = useTranslation("home");
   const navigate = useNavigate();
 
+  const flameAnimationRef = useRef<LottieRefCurrentProps>(null);
+
   const [isLoading, setIsLoading] = useState(false);
   const [randomGame, setRandomGame] = useState<Steam250Game | null>(null);
 
@@ -82,6 +85,18 @@ export function Home() {
 
   const categories = Object.values(CatalogueCategory);
 
+  const handleMouseEnterCategory = (category: CatalogueCategory) => {
+    if (category === CatalogueCategory.Hot) {
+      flameAnimationRef?.current?.play();
+    }
+  };
+
+  const handleMouseLeaveCategory = (category: CatalogueCategory) => {
+    if (category === CatalogueCategory.Hot) {
+      flameAnimationRef?.current?.stop();
+    }
+  };
+
   return (
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
       <section className={styles.content}>
@@ -100,7 +115,28 @@ export function Home() {
                       : "outline"
                   }
                   onClick={() => handleCategoryClick(category)}
+                  onMouseEnter={() => handleMouseEnterCategory(category)}
+                  onMouseLeave={() => handleMouseLeaveCategory(category)}
                 >
+                  {category === CatalogueCategory.Hot && (
+                    <div
+                      style={{ width: 16, height: 16, position: "relative" }}
+                    >
+                      <Lottie
+                        lottieRef={flameAnimationRef}
+                        animationData={flameAnimation}
+                        loop
+                        autoplay={false}
+                        style={{
+                          width: 30,
+                          top: -10,
+                          left: -5,
+                          position: "absolute",
+                        }}
+                      />
+                    </div>
+                  )}
+
                   {t(category)}
                 </Button>
               </li>
@@ -116,14 +152,32 @@ export function Home() {
               <Lottie
                 animationData={starsAnimation}
                 style={{ width: 70, position: "absolute", top: -28, left: -27 }}
-                loop
+                loop={Boolean(randomGame)}
               />
             </div>
             {t("surprise_me")}
           </Button>
         </section>
 
-        <h2>{t(currentCatalogueCategory)}</h2>
+        <h2 style={{ display: "flex", gap: SPACING_UNIT }}>
+          {currentCatalogueCategory === CatalogueCategory.Hot && (
+            <div style={{ width: 24, height: 24, position: "relative" }}>
+              <Lottie
+                animationData={flameAnimation}
+                loop
+                autoplay
+                style={{
+                  width: 40,
+                  top: -10,
+                  left: -5,
+                  position: "absolute",
+                }}
+              />
+            </div>
+          )}
+
+          {t(currentCatalogueCategory)}
+        </h2>
 
         <section className={styles.cards}>
           {isLoading

src/renderer/src/pages/profile/profile-content/profile-content.css.ts

@@ -155,6 +155,7 @@ export const listItemImage = style({
   width: "32px",
   height: "32px",
   borderRadius: "4px",
+  objectFit: "cover",
 });
 
 export const listItemDetails = style({