global background

Author: dragoonDorise

src/components/molecules/System/System.jsx

@@ -1,15 +1,37 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { PropTypes } from 'prop-types';
 import { useFocusable, init, FocusContext, setKeyMap } from 'spatial';
 import { useNavigate, Link } from 'react-router-dom';
+import { GlobalContext } from 'context/globalContext';
 
 function System({ data, onEnterPress, onFocus }) {
   const { ref, focused } = useFocusable({
     onEnterPress,
     onFocus,
   });
+  const { state, setState } = useContext(GlobalContext);
 
+  const { themeName, currentSystem } = state;
   const item = data;
+
+  const saveSystem = (id) => {
+    console.log({ id });
+    setState({ ...state, currentSystem: id });
+  };
+
+  const devnull = (id) => {
+    // setState({ ...state, currentSystem: id });
+  };
+
+  useEffect(() => {
+    if (focused) {
+      if (item.id !== currentSystem) {
+        saveSystem(item.id);
+      }
+    }
+    // Opcionalmente, incluir devnull o lógica similar si necesitas manejar la pérdida de foco.
+  }, [focused, item.id, saveSystem]);
+
   return (
     <div ref={ref}>
       <Link
@@ -19,18 +41,31 @@ function System({ data, onEnterPress, onFocus }) {
           focused ? 'systems__system--focused' : ''
         }`}
       >
-        <img className="systems__bg" src={item.poster} alt="" />
+        <img
+          className="systems__bg"
+          src={`file:///Users/rsedano/emudeck/launcher/themes/${themeName}/posters/${item.id}.jpg`}
+          alt=""
+        />
         <div className="systems__excerpt">{item.excerpt}</div>
         <div className="systems__name">{item.name}</div>
         <div className="systems__count">Games: {item.games}</div>
         <div className="systems__description">{item.description}</div>
-        <img
-          loading="lazy"
-          className="systems__controller"
-          src={item.controller}
-          alt=""
-        />
-        <img loading="lazy" className="systems__logo" src={item.logo} alt="" />
+        <div className="systems__controller-holder">
+          <img
+            loading="lazy"
+            className="systems__controller"
+            src={item.controller}
+            alt=""
+          />
+        </div>
+        <div className="systems__logo-holder">
+          <img
+            loading="lazy"
+            className="systems__logo"
+            src={`file:///Users/rsedano/emudeck/launcher/themes/${themeName}/logos/${item.id}.svg`}
+            alt=""
+          />
+        </div>
       </Link>
     </div>
   );

src/components/organisms/Systems/Systems.jsx

@@ -38,6 +38,7 @@ function Systems({ focusKey: focusKeyParam, systems }) {
 
   const onAssetFocus = useCallback(
     ({ x, y }) => {
+      console.log({ scrollingRef });
       scrollingRef.current.scrollTo({
         left: x,
         top: y,
@@ -46,6 +47,14 @@ function Systems({ focusKey: focusKeyParam, systems }) {
     },
     [scrollingRef],
   );
+
+  const multifunction = (item) => {
+    onAssetFocus();
+  };
+
+  const setSystem = (system) => {
+    console.log({ system });
+  };
   const { ref, focusSelf, hasFocusedChild, focusKey } = useFocusable({
     focusable: true,
     saveLastFocusedChild: true,

src/components/organisms/Themes/Themes.jsx

@@ -76,7 +76,6 @@ function Themes({ focusKey: focusKeyParam, themes, onClick }) {
 
           {themes &&
             themes.map((item, i) => {
-              console.log({ item });
               return (
                 <Theme
                   name={item}

src/global.css

@@ -196,3 +196,12 @@ body {
   background-color: #fff;
   color: #fff;
 }
+
+.global-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: -1;
+}

src/pages/HomePage.jsx

@@ -41,7 +41,7 @@ function HomePage({ focusKey: focusKeyParam }) {
   } = useContext(GlobalContext);
   const { gamepad } = stateGamePad;
   const { theme } = stateTheme;
-  const { themes } = state;
+  const { themes, themeName, currentSystem } = state;
 
   // Mapeo de botones del D-pad a las teclas de teclado
   const dpadKeyMap = {
@@ -165,17 +165,29 @@ function HomePage({ focusKey: focusKeyParam }) {
       console.log({ systemsTemp });
       setState({ ...state, themes: systemsTemp });
     });
+
+    // Set current Selected theme.
+    const currentTheme = localStorage.getItem('current_theme');
+    if (currentTheme) {
+      ipcChannel.sendMessage('get-theme', [currentTheme]);
+      ipcChannel.once('get-theme', (theme) => {
+        setState({ ...state, themeName: theme });
+        setStateTheme({ ...stateTheme, theme });
+      });
+    }
   }, []);
 
   const onClickSetTheme = (value) => {
     ipcChannel.sendMessage('get-theme', [value]);
     ipcChannel.once('get-theme', (theme) => {
       setStateTheme({ ...stateTheme, theme });
+      setState({ ...state, themeName: value });
+      localStorage.setItem('current_theme', value);
     });
   };
 
   return (
-    <>
+    <div>
       <ul className="controls">
         <li>
           <span>A</span> Enter
@@ -193,7 +205,14 @@ function HomePage({ focusKey: focusKeyParam }) {
         <Themes themes={themes} onClick={onClickSetTheme} />
       )}
       {theme && systems && <Systems systems={systems} />}
-    </>
+      {currentSystem && (
+        <img
+          className="global-background"
+          src={`file:///Users/rsedano/emudeck/launcher/themes/${themeName}/posters/${currentSystem}.jpg`}
+          alt="System"
+        />
+      )}
+    </div>
   );
 }
 

src/renderer/App.tsx

@@ -20,6 +20,7 @@ export default function App() {
     userfolder: undefined,
     themeName: 'default',
     themes: undefined,
+    currentSystem: undefined,
   });
 
   const [stateTheme, setStateTheme] = useState({

themes/epicnoir/index.css

@@ -228,3 +228,7 @@ body {
   background: rgba(93, 255, 77, 0.3);
   z-index: 1;
 }
+
+.global-background {
+  display: none;
+}