don't refresh when rerendering

src/components/GameComponent.tsx

@@ -14,6 +14,8 @@ export default function GameComponent() {
   const [game, setGame] = useState<GameObject | null>(null);
 
   useEffect(() => {
+    if (game) return;
+
     async function fetchGame() {
       const response = await fetch(
         "https://api.alexav.gg/v4/tracker/latestGame"
@@ -27,9 +29,6 @@ export default function GameComponent() {
       }
     }
 
-    setTimeout(() => {
-      fetchGame();
-    }, 60000);
     fetchGame();
   }, []);
 
@@ -70,9 +69,9 @@ export default function GameComponent() {
           <>
             <h1 className="text-2xl font-bold italic">previously played</h1>
             <div className="flex flex-wrap space-x-2">
-              {game.history.splice(0, 5).map((v) => {
+              {game.history.splice(0, 5).map((v, k) => {
                 return (
-                  <div>
+                  <div key={k}>
                     <p className="font-semibold">{v.game}</p>
                     <p>{dateOrTime(v)}</p>
                   </div>

src/components/modules/PictureCarousel.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import Overlay from "../Overlay";
+import Picture from "../Picture";
+
+const images = [
+  "https://storage.alexav.gg/content/1f822215-0768-424d-893a-13bcd10aa98b.jpg",
+  "https://storage.alexav.gg/content/de890eaf-fc73-42a4-9fbe-a62313394a4c.jpg",
+  "https://storage.alexav.gg/content/d057af80-3d03-45ca-88b2-680c1e7c63c1.jpg",
+  "https://storage.alexav.gg/content/1d717aab-3058-405a-b04d-324d7ab3e658.jpg",
+  "https://storage.alexav.gg/content/2f36c1dd-eaf8-4fd3-a3cd-1d25fe8f5a07.jpg",
+];
+
+export default function PictureCarousel() {
+  const [selectedImage, setSelectedImage] = useState<string>("");
+
+  return (
+    <>
+      {selectedImage !== "" && (
+        <Overlay onClose={() => setSelectedImage("")}>
+          <img width="400" height="400" src={selectedImage} />
+        </Overlay>
+      )}
+
+      <div className="border border-white border-solid rounded-lg p-2">
+        <h1 className="text-2xl font-bold italic">pictures</h1>
+
+        <div className="whitespace-nowrap overflow-x-auto">
+          <div className="my-2 space-x-2">
+            {images.map((v, k) => {
+              return (
+                <Picture
+                  key={k}
+                  image={v}
+                  onClick={() => setSelectedImage(v)}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}