Bjourn

electron_app/frontend/src/Components/Details/DetailsMain.css

@@ -63,19 +63,21 @@
 .canvas-container {
   position: absolute;
   z-index: 1;
-  left: 10%;
-  top:30%;
+  left: 15%;
+  top:20%;
   margin-left:2%;
+  border: 2px solid white;
+  border-radius: 20px;
 
 }
 
 .emulator_summary {
   position: absolute;
   right: 13%;
-  top: 10%;
+  top: 5%;
   width: 27%;
   color: white;
-  text-align:center;
+  text-align:left;
   /* font-size: 2vw; */
   font-size: clamp(20px, 2vw, 40px);
   z-index: 1;
@@ -88,7 +90,7 @@
 .game_recommendations {
   padding: 2%;
   margin: 10px;
-  border: 2px solid white;
+  /*border: 2px solid white;*/
   /* border-radius: 20px; */
   position: absolute;
   color: white;
@@ -182,7 +184,7 @@
 } */
 
 
-.Link{
+.Gif{
   width:clamp(100px, 20vw, 250px);
   z-index: 2;
   position:absolute;
@@ -193,6 +195,8 @@
 
 
 }
+
+
 .Side1 {
   position: absolute;
   top: 45%;

electron_app/frontend/src/Components/Details/DetailsMain.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import Rotate from "./Rotating_Image";
 import "./DetailsMain.css";
 // import pixelPanel from "/images/pixelPanel.png";
 import Mario64 from "/images/Mario64.gif";
-import Sonic_Run_Right from "/images/DreamCast_Moving_Right.gif";
-import Sonic_Run_Left from "/images/DreamCast_Moving_Left.gif";
+// import Sonic_Run_Right from "/images/DreamCast_Moving_Right.gif";
+// import Sonic_Run_Left from "/images/DreamCast_Moving_Left.gif";
 import { useNavigate } from "react-router-dom";
 import LeftBanner from "../Banners/LeftBanner";
 import RightBanner from "../Banners/RightBanner";
@@ -19,6 +19,9 @@ interface Emulator {
   description: string;
   image: string;
   games: string[];
+  gif1: string;
+  gif2: string;
+  idle: string;
 }
 
 // Define props for the DetailsMain component
@@ -42,10 +45,14 @@ const DetailsMain: React.FC<DetailsMainProps> = ({ emulatorName }) => {
   const [emulators] = useState<Emulator[]>(emuData);
   const [selectedEmulator, setSelectedEmulator] = useState<Emulator | null>(null);
 
-  const [sonicPosition, setSonicPosition] = useState(0); // Sonic's horizontal position
-  const [direction] = useState<"right" | "left">("right"); // Movement direction
-  const [sonicImage, setSonicImage] = useState(Sonic_Run_Right); // Current Sonic image
+  const [GifPosition, setGifPosition] = useState(0); // Image horizontal position
+  const [currentDirection, setCurrentDirection] = useState<"right" | "left">("right"); // Movement direction
+  const [gifImage, setGifImage] = useState(selectedEmulator?.gif1 ?? "/path/to/fallback-image.webp"); // Image
 
+  const directionRef = useRef(currentDirection);
+  directionRef.current = currentDirection;
+
+  // Update selectedEmulator when emulatorName changes
   useEffect(() => {
     if (emulatorName) {
       const emulator = emulators.find(
@@ -55,33 +62,40 @@ const DetailsMain: React.FC<DetailsMainProps> = ({ emulatorName }) => {
     }
   }, [emulatorName, emulators]);
 
+  // Update gifImage when selectedEmulator or currentDirection changes
   useEffect(() => {
-    let currentDirection = direction; // Local variable to track direction
-
-    const animateSonic = () => {
-      setSonicPosition((prev) => {
-        if (currentDirection === "right") {
+    setGifImage(
+      currentDirection === "right"
+        ? selectedEmulator?.gif1 ?? "/path/to/fallback-image.webp"
+        : selectedEmulator?.gif2 ?? "/path/to/fallback-image.webp"
+    );
+  }, [selectedEmulator, currentDirection]);
+
+  // Animation logic
+  useEffect(() => {
+    let animationId: number;
+    const animateGif = () => {
+      setGifPosition((prev) => {
+        if (directionRef.current === "right") {
           if (prev >= (window.innerWidth / 2) - 5) {
-            currentDirection = "left"; // Update direction locally
-            setSonicImage(Sonic_Run_Left);
+            setCurrentDirection("left"); // Update direction in state
             return prev - 2; // Start moving left
           }
           return prev + 2; // Move right
         } else {
           if (prev <= 2) {
-            currentDirection = "right"; // Update direction locally
-            setSonicImage(Sonic_Run_Right);
+            setCurrentDirection("right"); // Update direction in state
             return prev + 2; // Start moving right
           }
           return prev - 2; // Move left
         }
       });
-
-      requestAnimationFrame(animateSonic);
+      animationId = requestAnimationFrame(animateGif);
     };
-    const animationId = requestAnimationFrame(animateSonic);
+
+    animationId = requestAnimationFrame(animateGif);
     return () => cancelAnimationFrame(animationId); // Cleanup on unmount
-  }, []); // Empty dependency array to run only once
+  }, [currentDirection]); // Re-run effect when currentDirection changes
 
   return (
     <div className="Main_Div">
@@ -92,14 +106,14 @@ const DetailsMain: React.FC<DetailsMainProps> = ({ emulatorName }) => {
       <button className="back_button" onClick={goBack}>
         Back
       </button>
-      <img className="Mario" src={Mario64} alt="Mario 64" />
+      <img className="Mario" src={selectedEmulator?.idle ?? "/path/to/fallback-image.webp"} alt="Mario 64" />
 
-      {/* Sonic GIF */}
+      {/* GIF */}  
       <img
-        className="Link"
-        src={sonicImage}
-        alt="Sonic"
-        style={{ left: `${sonicPosition}px` }}
+        className="Gif"
+        src={gifImage}
+        alt="Gift"
+        style={{ left: `${GifPosition}px` }}
       />
 
       {/* Canvas for 3D content */}
@@ -111,6 +125,7 @@ const DetailsMain: React.FC<DetailsMainProps> = ({ emulatorName }) => {
         <Cube
           src={selectedEmulator?.image ?? "/path/to/fallback-image.webp"} // in case no img found
         />
+         <Rotate src={selectedEmulator?.image ?? "/path/to/fallback-image.webp"} />
       </Canvas> */}
       <div className="canvas-container">
         <Rotate src={selectedEmulator?.image ?? "/path/to/fallback-image.webp"} />

electron_app/frontend/src/Components/Emulators/Emulators.tsx

@@ -210,7 +210,7 @@ const Emulators: React.FC<EmulatorsProps> = ({
                   className="buttonCircle"
                   onClick={handleEmulatorSelection}
                 >
-                  button
+                  X
                 </button>
                 <p> for </p>
               </div>

electron_app/frontend/src/emuData.json

@@ -1,6 +1,9 @@
 [
   {
       "image": "/emu/SNES.png",
+      "gif1" : "/images/mario_y_yoshi_right.gif",
+      "gif2" : "/images/mario_y_yoshi_left.gif",
+      "idle" : "/images/Mario64.gif",
       "text": "SNES",
       "className": "box-snes",
       "description": "SNES emulators allow you to play Super Nintendo Entertainment System games on modern devices. Popular SNES emulators include bsnes, Snes9x, and ZSNES, offering high compatibility and features like save states, cheat codes, and graphical enhancements1",
@@ -14,6 +17,9 @@
   },
   {
       "image": "/emu/Desmume.png",
+      "gif1": "/images/charizard_right.gif",
+      "gif2": "/images/charizard_left.gif",
+      "idle": "/images/shinycharidle.gif",
       "text": "Desmume",
       "className": "box-desmume",
       "description": "DeSmuME is a Nintendo DS emulator that enables playing DS games on computers. It supports features like save states, cheat codes, and screen layout customization. DeSmuME is known for its high compatibility with the DS game library.",
@@ -27,6 +33,9 @@
   },
   {
       "image": "/emu/genesisPlusGX.png",
+      "gif1" : "/images/DreamCast_Moving_Right.gif",
+      "gif2" : "/images/DreamCast_Moving_Left.gif",
+      "idle": "images/sonicidle.gif",
       "text": "genesisPlusGX",
       "className": "box-genesis",
       "description": "Genesis Plus GX is a multi-system emulator that primarily focuses on Sega systems. It supports the Sega Genesis/Mega Drive, Sega CD, Master System, Game Gear, and SG-1000. The emulator offers high accuracy and various enhancement options.",
@@ -40,6 +49,9 @@
   },
   {
       "image": "/emu/Mesen.png",
+      "gif1" : "/images/mega_man_right.gif",
+      "gif2" : "/images/mega_man_left.gif",
+      "idle": "images/megaidle.gif",
       "text": "Mesen",
       "className": "box-Mesen",
       "description": "Mesen is a high-accuracy NES and Famicom emulator. It also supports other 8-bit Nintendo systems like the Game Boy and Game Boy Color. Mesen is known for its cycle-accurate emulation and extensive debugging features.",
@@ -53,6 +65,9 @@
   },
   {
       "image": "/emu/mupen64plus.png",
+      "gif1" : "/images/Link64.gif",
+      "gif2" : "/images/Link64.gif",
+      "idle": "/images/linkidle.gif",
       "text": "Mupen",
       "className": "box-Mupen",
       "description": "Mupen64Plus is an open-source Nintendo 64 emulator. It provides good compatibility with the N64 game library and supports features like high-resolution textures, save states, and various audio and video plugins.",
@@ -65,7 +80,10 @@
       ]
   },
   {
-      "image": "/emu/PCSX.png",
+      "image": "/emu/pcsx.png",
+      "gif1" : "/images/crash_right.gif",
+      "gif2" : "/images/crash_left.gif",
+      "idle": "/images/crashidle.gif",
       "text": "PCSX",
       "className": "box-PCSX",
       "description": "PCSX-ReARMed is a PlayStation 1 emulator optimized for ARM devices. It offers good compatibility and performance, making it popular for emulating PS1 games on mobile devices and single-board computers.",
@@ -77,21 +95,11 @@
       "Spyro the Dragon"
       ]
   },
-  {
-      "image": "/emu/PCSX.png",
-      "text": "PCSX2",
-      "className": "box-PCSX",
-      "description": "PCSX2 is a PlayStation 2 emulator that allows users to play PS2 games on PC. It offers features like improved graphics, save states, and cheat codes. PCSX2 has high compatibility with the PS2 game library and continues to be actively developed.",
-      "games": [
-      "Shadow of the Colossus",
-      "Final Fantasy X",
-      "Metal Gear Solid 3: Snake Eater",
-      "Kingdom Hearts II",
-      "Gran Turismo 4"
-      ]
-  },
   {
       "image": "/emu/ppsspp.png",
+      "gif1" : "/images/metal-gear_right.gif",
+      "gif2" : "/images/metal-gear_left.gif",
+      "idle":"/images/mgsidle.gif",
       "text": "PPSSPP",
       "className": "box-PPSSPP",
       "description": "PPSSPP (PlayStation Portable Simulator Suitable for Playing Portably) is a PSP emulator that runs on various platforms. It offers enhanced graphics, save states, and network play features, allowing users to enjoy PSP games with improved visuals.",
@@ -105,6 +113,9 @@
   },
   {
       "image": "/emu/redream.png",
+      "gif1" : "/images/liu_kang_right.gif",
+      "gif2" : "/images/liu_kang_left.gif",
+      "idle": "/images/kangidle.gif",
       "text": "Redream",
       "className": "box-Redream",
       "description": "Redream is a Sega Dreamcast emulator known for its ease of use and good performance. It supports high-resolution rendering, save states, and controller remapping, providing an accessible way to play Dreamcast games on modern systems.",