update

client/src/components/InfiniteBackground.jsx

@@ -0,0 +1,172 @@
+import { Box } from "@mui/material";
+import { keyframes } from "@mui/system";
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+const slideLeft = keyframes`
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+`;
+
+const slideRight = keyframes`
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+`;
+
+// Hook pour précharger l'image et obtenir ses dimensions
+const useImageDimensions = (imagePath) => {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = imagePath;
+    img.onload = () => {
+      setDimensions({ width: img.width, height: img.height });
+      setIsLoaded(true);
+    };
+  }, [imagePath]);
+
+  return { dimensions, isLoaded };
+};
+
+const Row = ({ imagePath, direction = "left", speed = 1, containerHeight }) => {
+  const { dimensions, isLoaded } = useImageDimensions(imagePath);
+  const animation = direction === "left" ? slideLeft : slideRight;
+  const duration = 120 / speed;
+
+  if (!isLoaded) return null;
+
+  // Calculer la hauteur de l'image pour qu'elle s'adapte à la hauteur du conteneur
+  const scale = containerHeight / dimensions.height;
+  const scaledWidth = dimensions.width * scale;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 1 }}
+    >
+      <Box
+        sx={{
+          position: "relative",
+          width: "100%",
+          height: containerHeight,
+          overflow: "hidden",
+          display: "flex",
+        }}
+      >
+        {/* Premier set d'images */}
+        <Box
+          sx={{
+            display: "flex",
+            animation: `${animation} ${duration}s linear infinite`,
+            height: "100%",
+          }}
+        >
+          {[1, 2, 3].map((i) => (
+            <img
+              key={i}
+              src={imagePath}
+              alt="panorama"
+              style={{
+                height: containerHeight,
+                width: scaledWidth,
+                objectFit: "contain",
+              }}
+            />
+          ))}
+        </Box>
+        {/* Second set d'images pour la boucle continue */}
+        <Box
+          sx={{
+            display: "flex",
+            animation: `${animation} ${duration}s linear infinite`,
+            position: "absolute",
+            left: direction === "left" ? "100%" : `-${scaledWidth * 3}px`,
+            height: "100%",
+          }}
+        >
+          {[1, 2, 3].map((i) => (
+            <img
+              key={i}
+              src={imagePath}
+              alt="panorama"
+              style={{
+                height: containerHeight,
+                width: scaledWidth,
+                objectFit: "contain",
+              }}
+            />
+          ))}
+        </Box>
+      </Box>
+    </motion.div>
+  );
+};
+
+export function InfiniteBackground() {
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  useEffect(() => {
+    const updateHeight = () => {
+      const vh = window.innerHeight;
+      setContainerHeight(vh / 3); // Divise la hauteur de la fenêtre en 3
+    };
+
+    updateHeight();
+    window.addEventListener("resize", updateHeight);
+    return () => window.removeEventListener("resize", updateHeight);
+  }, []);
+
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: "hidden",
+        zIndex: 0,
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: "rgba(0, 0, 0, 0.85)",
+          zIndex: 1,
+        },
+      }}
+    >
+      <Row
+        imagePath="/bande-1.webp"
+        direction="left"
+        speed={1}
+        containerHeight={containerHeight}
+      />
+      <Row
+        imagePath="/bande-2.webp"
+        direction="right"
+        speed={0.8}
+        containerHeight={containerHeight}
+      />
+      <Row
+        imagePath="/bande-3.webp"
+        direction="left"
+        speed={1.2}
+        containerHeight={containerHeight}
+      />
+    </Box>
+  );
+}

client/src/pages/Home.jsx

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { usePageSound } from "../hooks/usePageSound";
 import { BlinkingText } from "../components/BlinkingText";
 import { BookPages } from "../components/BookPages";
+import { InfiniteBackground } from "../components/InfiniteBackground";
 
 export function Home() {
   const navigate = useNavigate();
@@ -31,40 +32,9 @@ export function Home() {
           minHeight: "100vh",
           width: "100%",
           position: "relative",
-          "&::before": {
-            content: '""',
-            position: "fixed",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundImage: "url('/home.webp')",
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-            backgroundRepeat: "no-repeat",
-            opacity: 0.3,
-            zIndex: 0,
-          },
         }}
       >
-        {/* <Typography
-          variant="h1"
-          component="h1"
-          sx={{
-            fontWeight: "bold",
-            marginBottom: 2,
-            color: "#f0e6d9",
-            textShadow: `
-                      0 -1px 1px rgba(0,0,0,0.3),
-                      0 1px 1px rgba(255,255,255,0.2)
-                    `,
-            letterSpacing: "0.5px",
-            filter: "brightness(0.95)",
-          }}
-        >
-          Sarah's
-          <br /> Chronicles
-        </Typography> */}
+        <InfiniteBackground />
         <Box
           sx={{
             position: "relative",

client/src/pages/Tutorial.jsx

@@ -271,31 +271,6 @@ export function Tutorial() {
           Start the game
         </Button>
       </Box>
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          minHeight: "100vh",
-          width: "100%",
-          position: "relative",
-          "&::before": {
-            content: '""',
-            position: "fixed",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundImage: "url('/home.webp')",
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-            backgroundRepeat: "no-repeat",
-            opacity: 0.3,
-            zIndex: 0,
-          },
-        }}
-      ></Box>
     </motion.div>
   );
 }