From 1e5c0db46e24c825dce2bdce9e948a92c214cdde Mon Sep 17 00:00:00 2001
From: Matheus Dantas <matheus.kohaku.dantas@gmail.com>
Date: Sun, 5 May 2024 00:25:23 -0300
Subject: [PATCH] Add prettier to gallery-slider.tsx, remove console.log and
 revert .env.example file exclusion

---
 .env.example                                  |   5 +
 .../src/pages/game-details/gallery-slider.tsx | 139 +++++++++++-------
 .../src/pages/game-details/game-details.tsx   |   1 -
 3 files changed, 90 insertions(+), 55 deletions(-)
 create mode 100644 .env.example

diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..2d863486
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,5 @@
+MAIN_VITE_STEAMGRIDDB_API_KEY=YOUR_API_KEY
+MAIN_VITE_ONLINEFIX_USERNAME=YOUR_USERNAME
+MAIN_VITE_ONLINEFIX_PASSWORD=YOUR_PASSWORD
+MAIN_VITE_SENTRY_DSN=YOUR_SENTRY_DSN
+RENDERER_VITE_SENTRY_DSN=YOUR_SENTRY_DSN
\ No newline at end of file
diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx
index a8b64534..4e78ba05 100644
--- a/src/renderer/src/pages/game-details/gallery-slider.tsx
+++ b/src/renderer/src/pages/game-details/gallery-slider.tsx
@@ -4,65 +4,96 @@ import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
 import * as styles from "./game-details.css";
 import { useTranslation } from "react-i18next";
 
-
 export interface GallerySliderProps {
-    gameDetails: ShopDetails | null;
+  gameDetails: ShopDetails | null;
 }
 
 export function GallerySlider({ gameDetails }: GallerySliderProps) {
-    const [mediaIndex, setMediaIndex] = useState<number>(0);
-    const [mediaType, setMediaType] = useState<'video' | 'image'>('video');
-    const { t } = useTranslation("game_details");
+  const [mediaIndex, setMediaIndex] = useState<number>(0);
+  const [mediaType, setMediaType] = useState<"video" | "image">("video");
+  const { t } = useTranslation("game_details");
 
-    const showNextImage = () => {
-        setMediaIndex((index: number) => {
-            if (gameDetails?.movies.length && index === (gameDetails?.movies.length - 1) && mediaType === 'video') {
-                setMediaType('image')
-                return 1
-            }
-            if (gameDetails?.screenshots.length && index === (gameDetails?.screenshots.length - 1) && mediaType === 'image') {
-                setMediaType('video')
-                return 0
-            }
+  const showNextImage = () => {
+    setMediaIndex((index: number) => {
+      if (
+        gameDetails?.movies.length &&
+        index === gameDetails?.movies.length - 1 &&
+        mediaType === "video"
+      ) {
+        setMediaType("image");
+        return 1;
+      }
+      if (
+        gameDetails?.screenshots.length &&
+        index === gameDetails?.screenshots.length - 1 &&
+        mediaType === "image"
+      ) {
+        setMediaType("video");
+        return 0;
+      }
 
-            return index + 1
-        })
-    };
-    const showPrevImage = () => {
-        setMediaIndex((index: number) => {
-            if (gameDetails?.screenshots.length && index === 0 && mediaType === 'video') {
-                setMediaType('image')
-                return gameDetails?.screenshots.length - 1
-            }
-            if (gameDetails?.movies.length && index === 1 && mediaType === 'image') {
-                setMediaType('video')
-                return gameDetails?.movies.length - 1
-            }
+      return index + 1;
+    });
+  };
+  const showPrevImage = () => {
+    setMediaIndex((index: number) => {
+      if (
+        gameDetails?.screenshots.length &&
+        index === 0 &&
+        mediaType === "video"
+      ) {
+        setMediaType("image");
+        return gameDetails?.screenshots.length - 1;
+      }
+      if (gameDetails?.movies.length && index === 1 && mediaType === "image") {
+        setMediaType("video");
+        return gameDetails?.movies.length - 1;
+      }
 
-            return index - 1
-        })
-    };
+      return index - 1;
+    });
+  };
 
-    return (
-        <>
-            {gameDetails?.screenshots && (
-                <div className={styles.gallerySliderContainer}>
-                    <h2 className={styles.gallerySliderTitle}>{t('gallery')}</h2>
-                    <div className={styles.gallerySliderAnimationContainer}>
-                        {gameDetails.movies.map((video: SteamMovies) => (
-                            <video controls className={styles.gallerySliderMedia} poster={video.thumbnail} style={{ translate: `${-100 * mediaIndex}%` }}>
-                                <source src={video.webm.max.replace('http', 'https')} />
-                            </video>
-                        ))}
-                        {gameDetails.screenshots.map((image: SteamScreenshot) => (
-                            <img className={styles.gallerySliderMedia} src={image.path_full} style={{ translate: `${-100 * mediaIndex}%` }} />
-                        ))}
-                    </div>
-                    <button onClick={showPrevImage} className={styles.gallerySliderButton} style={{ left: 0 }}><ChevronLeftIcon className={styles.gallerySliderIcons} /></button>
-                    <button onClick={showNextImage} className={styles.gallerySliderButton} style={{ right: 0 }}><ChevronRightIcon className={styles.gallerySliderIcons} /></button>
-                </div>
-            )}
-        </>
-    )
-
-}
\ No newline at end of file
+  return (
+    <>
+      {gameDetails?.screenshots && (
+        <div className={styles.gallerySliderContainer}>
+          <h2 className={styles.gallerySliderTitle}>{t("gallery")}</h2>
+          <div className={styles.gallerySliderAnimationContainer}>
+            {gameDetails.movies.map((video: SteamMovies) => (
+              <video
+                controls
+                className={styles.gallerySliderMedia}
+                poster={video.thumbnail}
+                style={{ translate: `${-100 * mediaIndex}%` }}
+              >
+                <source src={video.webm.max.replace("http", "https")} />
+              </video>
+            ))}
+            {gameDetails.screenshots.map((image: SteamScreenshot) => (
+              <img
+                className={styles.gallerySliderMedia}
+                src={image.path_full}
+                style={{ translate: `${-100 * mediaIndex}%` }}
+              />
+            ))}
+          </div>
+          <button
+            onClick={showPrevImage}
+            className={styles.gallerySliderButton}
+            style={{ left: 0 }}
+          >
+            <ChevronLeftIcon className={styles.gallerySliderIcons} />
+          </button>
+          <button
+            onClick={showNextImage}
+            className={styles.gallerySliderButton}
+            style={{ right: 0 }}
+          >
+            <ChevronRightIcon className={styles.gallerySliderIcons} />
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/renderer/src/pages/game-details/game-details.tsx b/src/renderer/src/pages/game-details/game-details.tsx
index 18f472b3..4b3633c1 100644
--- a/src/renderer/src/pages/game-details/game-details.tsx
+++ b/src/renderer/src/pages/game-details/game-details.tsx
@@ -88,7 +88,6 @@ export function GameDetails() {
   useEffect(() => {
     getGame();
   }, [getGame, gameDownloading?.id]);
-  console.log(gameDetails)
   useEffect(() => {
     setGame(null);
     setIsLoading(true);