gameMode

src/renderer/App.tsx

@@ -6,7 +6,6 @@ import CheckUpdatePage from 'pages/CheckUpdatePage';
 import PatreonLoginPage from 'pages/PatroenLoginPage';
 import WelcomePage from 'pages/WelcomePage';
 import DeviceSelectorPage from 'pages/DeviceSelectorPage';
-import DeviceConfiguratorPage from 'pages/DeviceConfiguratorPage';
 import EmulatorSelectorPage from 'pages/EmulatorSelectorPage';
 import EmulatorConfigurationPage from 'pages/EmulatorConfigurationPage';
 import RomStoragePage from 'pages/RomStoragePage';
@@ -32,6 +31,8 @@ import UpdateEmusPage from 'pages/UpdateEmusPage';
 
 import CloudSyncPage from 'pages/CloudSyncPage';
 import CloudSyncConfigPage from 'pages/CloudSyncConfigPage';
+import GameModePage from 'pages/GameModePage';
+
 import ChangeLogPage from 'pages/ChangeLogPage';
 import SettingsPage from 'pages/SettingsPage';
 import UninstallPage from 'pages/UninstallPage';
@@ -275,11 +276,6 @@ export default function App() {
             path="/device-selector"
             element={<DeviceSelectorPage />}
           />
-          <Route
-            exact
-            path="/device-configurator"
-            element={<DeviceConfiguratorPage />}
-          />
           <Route
             exact
             path="/emulator-selector"
@@ -374,6 +370,9 @@ export default function App() {
           <Route exact path="/cloud-sync" element={<CloudSyncPage />}>
             <Route path=":type" element={<CloudSyncPage />} />
           </Route>
+          <Route exact path="/game-mode" element={<GameModePage />}>
+            <Route path=":type" element={<GameModePage />} />
+          </Route>
           <Route
             exact
             path="/cloud-sync-config"

src/renderer/components

@@ -1 +1 @@
-Subproject commit 95c2f766c69c83c78635058eabfb25a9f18360a6
+Subproject commit 7e8edf99d3c61e914f10ee4350d11641f4a7589b

src/renderer/pages/DeviceConfiguratorPage.jsx

@@ -1,142 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { GlobalContext } from 'context/globalContext';
-import Wrapper from 'components/molecules/Wrapper/Wrapper';
-import Header from 'components/organisms/Header/Header';
-import Footer from 'components/organisms/Footer/Footer';
-import Card from 'components/molecules/Card/Card';
-import DeviceSelector from 'components/organisms/Wrappers/DeviceSelector';
-
-// import img552 from 'assets/rg552.png';
-// import imgOdin from 'assets/odin.png';
-// import imgRP2 from 'assets/rp2.png';
-// import imgAndroid from 'assets/android.png';
-
-import imgDeck from 'assets/devices/deck.png';
-import imgPS4 from 'assets/devices/PS4.png';
-import imgPS5 from 'assets/devices/PS5.png';
-import imgWin600 from 'assets/devices/win600.png';
-import imgX360 from 'assets/devices/x360.png';
-import imgXOne from 'assets/devices/xone.png';
-import imgSwitchPro from 'assets/devices/switchpro.png';
-
-function DeviceConfiguratorPage() {
-  const { state, setState } = useContext(GlobalContext);
-  const { device, system } = state;
-  const [statePage, setStatePage] = useState({
-    disabledNext: true,
-    disabledBack: false,
-    data: '',
-  });
-  const { disabledNext, disabledBack, data } = statePage;
-  const ipcChannel = window.electron.ipcRenderer;
-  // Setting the device
-  const deviceSet = (deviceName) => {
-    setStatePage({ ...statePage, disabledNext: false });
-    setState({
-      ...state,
-      device: deviceName,
-    });
-  };
-
-  // Enabling button when changing the global state only if we have a device selected
-  useEffect(() => {
-    if (device !== '') {
-      setStatePage({ ...statePage, disabledNext: false });
-      const json = JSON.stringify(state);
-      localStorage.setItem('settings_emudeck', json);
-      if (system === 'win32') {
-        console.log({ device });
-        ipcChannel.sendMessage('emudeck', [
-          `changeController|||changeController('${device}')`,
-        ]);
-        ipcChannel.once('changeController', (message) => {
-          console.log({ message });
-        });
-      }
-    }
-  }, [state]);
-
-  return (
-    <Wrapper>
-      <Header
-        title={`Select your ${system === 'win32' ? 'controller' : 'device'} `}
-      />
-      <DeviceSelector data={data} onClick={deviceSet}>
-        {system !== 'win32' && (
-          <>
-            <Card
-              css={device === 'Steam Deck' && 'is-selected'}
-              onClick={() => deviceSet('Steam Deck')}
-            >
-              <img src={imgDeck} width="100" alt="Background" />
-              <span className="h6">Steam Deck</span>
-            </Card>
-            <Card
-              css={device === 'Anbernic Win600' && 'is-selected'}
-              onClick={() => deviceSet('Anbernic Win600')}
-            >
-              <img src={imgWin600} width="100" alt="Background" />
-              <span className="h6">Anbernic WIN600</span>
-            </Card>
-          </>
-        )}
-        {system === 'win32' && (
-          <>
-            <Card
-              css={device === 'Steam Deck' && 'is-selected'}
-              onClick={() => deviceSet('Steam Deck')}
-            >
-              <img src={imgDeck} width="100" alt="Background" />
-              <span className="h6">Steam Deck</span>
-            </Card>
-            <Card
-              css={device === 'Anbernic Win600' && 'is-selected'}
-              onClick={() => deviceSet('Anbernic Win600')}
-            >
-              <img src={imgWin600} width="100" alt="Background" />
-              <span className="h6">Anbernic WIN600</span>
-            </Card>
-            <Card
-              css={device === 'PS4' && 'is-selected'}
-              onClick={() => deviceSet('PS4')}
-            >
-              <img src={imgPS4} width="100" alt="Background" />
-              <span className="h6">PS4 Controller</span>
-            </Card>
-            <Card
-              css={device === 'PS5' && 'is-selected'}
-              onClick={() => deviceSet('PS5')}
-            >
-              <img src={imgPS5} width="100" alt="Background" />
-              <span className="h6">PS5 Controller</span>
-            </Card>
-            <Card
-              css={device === 'X360' && 'is-selected'}
-              onClick={() => deviceSet('X360')}
-            >
-              <img src={imgX360} width="100" alt="Background" />
-              <span className="h6">Xbox 360 Controller</span>
-            </Card>
-            <Card
-              css={device === 'XONE' && 'is-selected'}
-              onClick={() => deviceSet('XONE')}
-            >
-              <img src={imgXOne} width="100" alt="Background" />
-              <span className="h6">Xbox One Controller</span>
-            </Card>
-            <Card
-              css={device === 'SWITCHPRO' && 'is-selected'}
-              onClick={() => deviceSet('SWITCHPRO')}
-            >
-              <img src={imgSwitchPro} width="100" alt="Background" />
-              <span className="h6">Pro Controller</span>
-            </Card>
-          </>
-        )}
-      </DeviceSelector>
-      <Footer disabledNext={disabledNext} disabledBack={disabledBack} />
-    </Wrapper>
-  );
-}
-
-export default DeviceConfiguratorPage;

src/renderer/pages/DeviceSelectorPage.jsx

@@ -6,22 +6,20 @@ import Footer from 'components/organisms/Footer/Footer';
 import DeviceSelector from 'components/organisms/Wrappers/DeviceSelector';
 import Card from 'components/molecules/Card/Card';
 
-// import img552 from 'assets/rg552.png';
-// import imgOdin from 'assets/odin.png';
-// import imgRP2 from 'assets/rp2.png';
-// import imgAndroid from 'assets/android.png';
-
-import imgDeck from 'assets/devices/deck.png';
-import imgPS4 from 'assets/devices/PS4.png';
-import imgPS5 from 'assets/devices/PS5.png';
-import imgWin600 from 'assets/devices/win600.png';
-import imgX360 from 'assets/devices/x360.png';
-import imgXOne from 'assets/devices/xone.png';
-import imgSwitchPro from 'assets/devices/switchpro.png';
+import {
+  imgDeck,
+  imgWin600,
+  imgally,
+  imgaokzoepro,
+  imgayaneo2,
+  imgayaneogeek,
+  imglinux,
+  imgwindows,
+} from 'components/utils/images/images';
 
 function DeviceSelectorPage() {
   const { state, setState } = useContext(GlobalContext);
-  const { device, system, mode } = state;
+  const { device, system, mode, resolutions } = state;
   const [statePage, setStatePage] = useState({
     disabledNext: true,
     disabledBack: false,
@@ -32,9 +30,91 @@ function DeviceSelectorPage() {
   // Setting the device
   const deviceSet = (deviceName) => {
     setStatePage({ ...statePage, disabledNext: false });
+
+    const amd6800U = {
+      dolphin: '1080P',
+      duckstation: '1080P',
+      pcsx2: '1080P',
+      yuzu: '720P',
+      ppsspp: '1080P',
+      rpcs3: '720P',
+      ryujinx: '720P',
+      xemu: '720P',
+      cemu: '720P',
+      xenia: '720P',
+      citra: '1080P',
+      vita3k: '1080P',
+      melonds: '1080P',
+    };
+
+    const deck = {
+      dolphin: '720P',
+      duckstation: '720P',
+      pcsx2: '720P',
+      yuzu: '720P',
+      ppsspp: '720P',
+      rpcs3: '720P',
+      ryujinx: '720P',
+      xemu: '720P',
+      cemu: '720P',
+      xenia: '720P',
+      citra: '720P',
+      vita3k: '720P',
+      melonds: '720P',
+    };
+
+    const r1080p = {
+      dolphin: '1080P',
+      duckstation: '1080P',
+      pcsx2: '1080P',
+      yuzu: '1080P',
+      ppsspp: '1080P',
+      rpcs3: '1080P',
+      ryujinx: '1080P',
+      xemu: '1080P',
+      cemu: '1080P',
+      xenia: '1080P',
+      citra: '1080P',
+      vita3k: '1080P',
+      melonds: '1080P',
+    };
+
+    let resolutionsObj = {};
+    switch (deviceName) {
+      case 'Steam Deck':
+        resolutionsObj = deck;
+        break;
+      case 'Anbernic Win600':
+        resolutionsObj = deck;
+        break;
+      case 'Asus Rog Ally':
+        resolutionsObj = amd6800U;
+        break;
+      case 'AOKZOE PRO1':
+        resolutionsObj = amd6800U;
+        break;
+      case 'AYA Neo Geek':
+        resolutionsObj = amd6800U;
+        break;
+      case 'AYA Neo 2':
+        resolutionsObj = amd6800U;
+        break;
+      case 'Windows PC':
+        resolutionsObj = r1080p;
+        break;
+      case 'Linux PC':
+        resolutionsObj = r1080p;
+        break;
+      default:
+        resolutionsObj = deck;
+    }
+
+    console.log({ resolutionsObj });
+
     setState({
       ...state,
       device: deviceName,
+      resolutions: resolutionsObj,
     });
   };
 
@@ -49,9 +129,7 @@ function DeviceSelectorPage() {
 
   return (
     <Wrapper>
-      <Header
-        title={`Select your ${system === 'win32' ? 'controller' : 'device'} `}
-      />
+      <Header title={`Select your device `} />
       <DeviceSelector data={data} onClick={deviceSet}>
         {system !== 'win32' && (
           <>
@@ -69,6 +147,15 @@ function DeviceSelectorPage() {
               <img src={imgWin600} width="100" alt="Background" />
               <span className="h6">Anbernic WIN600</span>
             </Card>
+            {/*
+            <Card
+              css={device === 'Linux PC' && 'is-selected'}
+              onClick={() => deviceSet('Linux PC')}
+            >
+              <img src={imglinux} width="100" alt="Background" />
+              <span className="h6">Linux PC</span>
+            </Card>
+            */}
           </>
         )}
         {system === 'win32' && (
@@ -88,39 +175,46 @@ function DeviceSelectorPage() {
               <span className="h6">Anbernic WIN600</span>
             </Card>
             <Card
-              css={device === 'PS4' && 'is-selected'}
-              onClick={() => deviceSet('PS4')}
+              css={device === 'Asus Rog Ally' && 'is-selected'}
+              onClick={() => deviceSet('Asus Rog Ally')}
             >
-              <img src={imgPS4} width="100" alt="Background" />
-              <span className="h6">PS4 Controller</span>
+              <img src={imgally} width="100" alt="Background" />
+              <span className="h6">Asus Rog Ally</span>
             </Card>
             <Card
-              css={device === 'PS5' && 'is-selected'}
-              onClick={() => deviceSet('PS5')}
+              css={device === 'AOKZOE PRO1' && 'is-selected'}
+              onClick={() => deviceSet('AOKZOE PRO1')}
             >
-              <img src={imgPS5} width="100" alt="Background" />
-              <span className="h6">PS5 Controller</span>
+              <img src={imgaokzoepro} width="100" alt="Background" />
+              <span className="h6">AOKZOE PRO1</span>
             </Card>
             <Card
-              css={device === 'X360' && 'is-selected'}
-              onClick={() => deviceSet('X360')}
+              css={device === 'AYA Neo Geek' && 'is-selected'}
+              onClick={() => deviceSet('AYA Neo Geek')}
             >
-              <img src={imgX360} width="100" alt="Background" />
-              <span className="h6">Xbox 360 Controller</span>
+              <img src={imgayaneogeek} width="100" alt="Background" />
+              <span className="h6">AYA Neo Geek</span>
             </Card>
             <Card
-              css={device === 'XONE' && 'is-selected'}
-              onClick={() => deviceSet('XONE')}
+              css={device === 'AYA Neo 2' && 'is-selected'}
+              onClick={() => deviceSet('AYA Neo 2')}
             >
-              <img src={imgXOne} width="100" alt="Background" />
-              <span className="h6">Xbox One Controller</span>
+              <img src={imgayaneo2} width="100" alt="Background" />
+              <span className="h6">AYA Neo 2</span>
             </Card>
             <Card
-              css={device === 'SWITCHPRO' && 'is-selected'}
-              onClick={() => deviceSet('SWITCHPRO')}
+              css={device === 'Windows PC' && 'is-selected'}
+              onClick={() => deviceSet('Windows PC')}
             >
-              <img src={imgSwitchPro} width="100" alt="Background" />
-              <span className="h6">Pro Controller</span>
+              <img src={imgwindows} width="100" alt="Background" />
+              <span className="h6">Windows PC</span>
+            </Card>
+            <Card
+              css={device === 'Windows Handlheld' && 'is-selected'}
+              onClick={() => deviceSet('Windows Handlheld')}
+            >
+              <img src={imgwindows} width="100" alt="Background" />
+              <span className="h6">Windows Handlheld</span>
             </Card>
           </>
         )}

src/renderer/pages/EmulatorResolutionPage.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useContext } from 'react';
 import { GlobalContext } from 'context/globalContext';
 import Wrapper from 'components/molecules/Wrapper/Wrapper';
 import Header from 'components/organisms/Header/Header';
@@ -8,13 +8,8 @@ import EmulatorResolution from 'components/organisms/Wrappers/EmulatorResolution
 
 function EmulatorResolutionPage() {
   const { state, setState } = useContext(GlobalContext);
-  const { bezels, resolutions } = state;
-  const [statePage, setStatePage] = useState({
-    disabledNext: false,
-    disabledBack: false,
-    data: '',
-  });
-  const { disabledNext, disabledBack, data } = statePage;
+  const { resolutions, system } = state;
+
   const setResolution = (emulator, resolution) => {
     setState({
       ...state,
@@ -24,18 +19,15 @@ function EmulatorResolutionPage() {
       },
     });
   };
-  // Enabling button when changing the global state only if we have a device selected
-  useEffect(() => {
-    if (bezels != '') {
-      setStatePage({ ...statePage, disabledNext: false });
-    }
-  }, [state]); 
 
   return (
     <Wrapper>
       <Header title="Emulator Resolution" />
-      <EmulatorResolution data={data} onClick={setResolution} />
-      <Footer next="confirmation" nextText="Next" />
+      <EmulatorResolution onClick={setResolution} />
+      <Footer
+        next={system === 'win32' ? 'game-mode' : 'confirmation'}
+        nextText="Next"
+      />
     </Wrapper>
   );
 }

src/renderer/pages/GameModePage.jsx

@@ -0,0 +1,47 @@
+import React, { useState, useContext } from 'react';
+import { GlobalContext } from 'context/globalContext';
+import Wrapper from 'components/molecules/Wrapper/Wrapper';
+import Header from 'components/organisms/Header/Header';
+import Footer from 'components/organisms/Footer/Footer';
+import { useParams } from 'react-router-dom';
+import GameMode from 'components/organisms/Wrappers/GameMode';
+
+function GameModePage() {
+  const { state, setState } = useContext(GlobalContext);
+  const { type } = useParams();
+  const { cloudSyncType } = state;
+  const [statePage] = useState({
+    disabledNext: false,
+    disabledBack: false,
+    disableButton: false,
+  });
+  const { disabledNext, disableButton } = statePage;
+
+  const gameModeSet = (item) => {
+    setState({
+      ...state,
+      gamemode: item,
+    });
+  };
+  const nextButtonStatus = () => {
+    if (type === 'welcome') {
+      return 'welcome';
+    }
+    return 'confirmation';
+  };
+
+  return (
+    <Wrapper>
+      <Header title="Boot Mode" />
+      <GameMode onClick={gameModeSet} disableButton={disableButton} />
+
+      <Footer
+        next={nextButtonStatus()}
+        nextText={type === 'welcome' ? 'Back' : 'Next'}
+        disabledNext={disabledNext}
+      />
+    </Wrapper>
+  );
+}
+
+export default GameModePage;

src/renderer/pages/PatroenLoginPage.jsx

@@ -155,7 +155,18 @@ function PatroenLoginPage() {
             aria="Next"
             onClick={() => patreonShowInput()}
           >
-            Login with patreon
+            Login with Patreon
+          </BtnSimple>
+        )}
+        {!patreonClicked && (
+          <BtnSimple
+            css="btn-simple--2"
+            type="button"
+            target="_blank"
+            aria="Next"
+            onClick={() => patreonShowInput()}
+          >
+            Login with Token
           </BtnSimple>
         )}
         {patreonClicked && (
@@ -173,7 +184,7 @@ function PatroenLoginPage() {
                 css="btn-simple--3"
                 type="button"
                 aria="Next"
-                onClick={patreonCheckToken}
+                onClick={() => patreonCheckToken()}
               >
                 {status === null && 'Check Token'}
                 {status === 'checking' && 'Checking token...'}

src/renderer/pages/PegasusThemePage.jsx

@@ -8,7 +8,7 @@ import PegasusTheme from 'components/organisms/Wrappers/PegasusTheme';
 
 function PegasusThemePage() {
   const { state, setState } = useContext(GlobalContext);
-  const { system, mode } = state;
+  const { device, mode } = state;
   const [statePage] = useState({
     disabledNext: false,
     disabledBack: false,
@@ -22,18 +22,26 @@ function PegasusThemePage() {
     });
   };
 
+  const nextPage = () => {
+    if (
+      device === 'Linux PC' ||
+      device === 'Windows PC' ||
+      device === 'Windows Handlheld'
+    ) {
+      return 'emulator-resolution';
+    }
+    if (mode === 'easy') {
+      return 'end';
+    }
+    return 'confirmation';
+  };
+
   return (
     <Wrapper>
       <Header title="EmulationStation DE " bold="Theme" />
       <PegasusTheme data={data} onClick={themeSet} />
       <Footer
-        next={
-          system === 'win32'
-            ? 'emulator-resolution'
-            : mode === 'easy'
-            ? 'end'
-            : 'confirmation'
-        }
+        next={nextPage()}
         nextText="Next"
         disabledNext={disabledNext}
         disabledBack={disabledBack}

src/renderer/pages/WelcomePage.jsx

@@ -164,7 +164,7 @@ function WelcomePage() {
       description: 'Transfer your games using a USB Drive',
       button: 'Add more games',
       btnCSS: 'btn-simple--1',
-      status: system !== 'win32',
+      status: system === 'SteamOS',
       function: () => functions.navigate('/copy-games'),
     },
     {
@@ -198,16 +198,6 @@ function WelcomePage() {
   ];
 
   const settingsCards = [
-    {
-      icon: [iconMigrate],
-      title: 'SteamOS 3.5 Fix',
-      description:
-        'Update your paths to the new SD Card paths introduced in Steam 3.5',
-      button: 'Fix',
-      btnCSS: 'btn-simple--5',
-      status: false,
-      function: () => functions.migrationFixSDPaths(),
-    },
     {
       icon: [iconJoystick],
       title: 'Steam ROM Manager',
@@ -217,15 +207,6 @@ function WelcomePage() {
       status: true,
       function: () => functions.openSRM(),
     },
-    {
-      icon: [iconMigrate],
-      title: 'Change Controller',
-      description: 'Change your controller to configure emulators like Yuzu',
-      button: 'Change',
-      btnCSS: 'btn-simple--5',
-      status: system === 'win32',
-      function: () => functions.navigate('/device-configurator'),
-    },
     {
       icon: [iconQuick],
       title: 'Quick Reset',
@@ -246,6 +227,15 @@ function WelcomePage() {
       status: true,
       function: () => selectMode('expert'),
     },
+    {
+      icon: [iconQuick],
+      title: 'Game Mode',
+      description: 'Enable the SteamOS experience on Windows',
+      button: 'More info',
+      btnCSS: 'btn-simple--5',
+      status: system === 'win32',
+      function: () => functions.navigate('/game-mode/welcome'),
+    },
     {
       icon: [iconPlugin],
       title: 'Power Tools',
@@ -253,7 +243,7 @@ function WelcomePage() {
         'A Decky Loader Plugin to manage performance settings in Game Mode',
       button: 'More info',
       btnCSS: 'btn-simple--5',
-      status: system !== 'win32',
+      status: system === 'SteamOS',
       function: () => functions.navigate('/power-tools'),
     },
     {
@@ -263,7 +253,7 @@ function WelcomePage() {
         'An EmuDeck Decky Loader Plugin to easily view emulator hotkeys in Game Mode',
       button: 'More info',
       btnCSS: 'btn-simple--5',
-      status: system !== 'win32',
+      status: system === 'SteamOS',
       function: () => functions.navigate('/decky-controls'),
     },
     {
@@ -272,7 +262,7 @@ function WelcomePage() {
       description: 'Enable your Steam Deck gyroscope in emulation',
       button: 'More info',
       btnCSS: 'btn-simple--5',
-      status: system !== 'win32',
+      status: system === 'SteamOS',
       function: () => functions.navigate('/gyrodsu'),
     },
     {
@@ -290,7 +280,7 @@ function WelcomePage() {
       description: 'Use the EmuDeck BIOS Checker to validate your BIOS',
       button: 'More info',
       btnCSS: 'btn-simple--5',
-      status: system !== 'win32',
+      status: true,
       function: () => functions.navigate('/check-bios'),
     },
     {