2 |
3 | 
4 |
5 |
6 | A mod manager and games launcher for shadps4
7 |
8 |
9 |
10 |
11 |
12 |
13 | 
14 | 
15 |
68 |
70 |
71 | const body = {message.name}
69 |
72 |
74 |
75 | const footer = {message.message}
73 |
76 |
78 |
79 | const obj = ({ header: header, body: body, footer: footer });
80 | setMessage(obj);
81 | setToolTipContent(obj);
82 | }
83 |
84 | /* Error State */
85 | if (message.type === 'error') {
86 | setType('error');
87 | const header = {
88 |
90 |
91 | const body = {message.name}
92 |
94 |
95 | const footer = {message.message}
93 |
96 |
97 |
98 | const obj = ({ header: header, body: body, footer: footer })
99 | setMessage(obj);
100 | setToolTipContent(obj);
101 | }
102 | }
103 |
104 | return () => {
105 | window.electron.removeListener('message');
106 | }
107 | })
108 | }, [ message ])
109 |
110 | /* Update tooltip content */
111 | useEffect(() => {
112 | if (tooltipContent !== null)
113 | setToolTipVisible(true);
114 |
115 | let timeoutID;
116 |
117 | const awaitFade = async () => {
118 | return new Promise((resolve) => {
119 | timeoutID = setTimeout(() => {
120 | resolve()
121 | }, 4000);
122 | })
123 | }
124 | if (type === 'success') {
125 | const fadeOut = async () => {
126 | await awaitFade();
127 | setToolTipVisible(false);
128 | }
129 | fadeOut();
130 | }
131 |
132 | return () => { setToolTipVisible(false); clearTimeout(timeoutID) };
133 |
134 | }, [ tooltipContent, type ])
135 |
136 | /* Update Global Settings */
137 | useEffect(() => {
138 | const handleSettingsListener = (event, data) => {
139 | console.log('Received Data:', data)
140 | if (data) {
141 | setvBlankDivider(data.GPU.vblankDivider);
142 | setScreenWidth(data.GPU.screenWidth);
143 | setScreenHeight(data.GPU.screenHeight);
144 | setFullscreen(data.General.Fullscreen);
145 | setIsPS4Pro(data.General.isPS4Pro);
146 | setLogType(data.General.logType);
147 | setShowSplash(data.General.showSplash);
148 | }
149 | }
150 | window.electron.send('get-settings');
151 | window.electron.on('get-settings', handleSettingsListener);
152 | return (() => { window.electron.removeListener('get-settings', handleSettingsListener) });
153 | }, [])
154 |
155 | useEffect(() => {
156 | setScreenWidth(screenWidth);
157 | setScreenHeight(screenHeight);
158 | }, [ screenWidth, screenHeight ])
159 | return (
160 | <>
161 |
7 |
8 |
12 | ) : (
13 |
9 | 
10 |
11 |
14 |
22 | )
23 | )
24 | }
25 |
26 | export default GameCard;
--------------------------------------------------------------------------------
/src/partials/GamesWrapper.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import GameCard from "./GameCard";
3 |
4 | function GamesWrapper({ content, select, isGrid }) {
5 | const click = (app) => {
6 | select(app);
7 | }
8 |
9 | return (<>
10 |
15 |
16 |
17 |
18 |
21 | {title}
19 |{id}
20 |
11 | {content.map(game => {
12 | return (
13 | { click(game) }}>
14 | )
15 | })}
16 |
17 |
18 | )
19 | }
20 |
21 | export default GamesWrapper;
--------------------------------------------------------------------------------
/src/partials/Modal.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import '../css/Modal.css';
3 | function Modal({ content, show }) {
4 |
5 | return (
6 |
7 | {content?.header}
8 | {content?.body}
9 | {content?.footer}
10 | {content?.backdrop}
11 |
12 | )
13 | }
14 |
15 | export default Modal;
--------------------------------------------------------------------------------
/src/partials/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import '../css/Navbar.css';
4 | import useGlobalStateStore from "../js/globalStateStore";
5 | function Navbar() {
6 | const [ processActtive ] = useGlobalStateStore(state => [ state.processActive ]);
7 | const routes = [ { path: '/settings', name: 'settings' }, { path: '/', name: 'library' }, { path: '/create', name: 'create' } ];
8 | return (
9 | <>
10 |
11 |
19 |
20 | )
21 | }
22 | export default Navbar;
--------------------------------------------------------------------------------
/src/partials/Search.jsx:
--------------------------------------------------------------------------------
1 | import { IoRefreshSharp } from "react-icons/io5";
2 | import { FaListUl } from "react-icons/fa";
3 | import { IoGrid } from "react-icons/io5";
4 | import '../css/Search.css';
5 |
6 | function Search({ reset, searchTerm, onChange, inputRef, isGrid, toggleGrid }) {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | )
20 | }
21 |
22 | export default Search;
--------------------------------------------------------------------------------
/src/partials/Title.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | function Title({ title }) {
4 | return (
5 | -
12 | {routes.map(route => {
13 | return (
14 | {route.name}
15 | )
16 | })}
17 |
{title}
6 | ) 7 | } 8 | 9 | export default Title; -------------------------------------------------------------------------------- /src/partials/TitleBar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import '../css/TitleBar.css' 3 | import { useState, useEffect } from 'react'; 4 | import { useLocation } from "react-router-dom"; 5 | import { VscChromeClose, VscChromeMaximize, VscChromeMinimize, VscChromeRestore } from "react-icons/vsc"; 6 | function TitleBar() { 7 | const [ maximized, setMaximized ] = useState(false); 8 | const [ titleName, setTitleName ] = useState(null); 9 | const location = useLocation(); 10 | useEffect(() => { 11 | if (location.pathname === '/') 12 | setTitleName('Library'); 13 | if (location.pathname === '/create') 14 | setTitleName('Create A Mod'); 15 | if (location.pathname === '/settings') 16 | setTitleName('Settings'); 17 | 18 | }, [ location ]) 19 | 20 | const maximizeWindow = () => { 21 | window.electron.maximizeWindow(); 22 | setMaximized(!maximized) 23 | } 24 | const closeWindow = () => { 25 | window.close(); 26 | } 27 | const minimizeWindow = () => { 28 | window.electron.minimizeWindow(); 29 | } 30 | 31 | 32 | return ( 33 | <> 34 |
35 |
46 |
47 | )
48 | }
49 |
50 | export default TitleBar;
--------------------------------------------------------------------------------
/src/partials/ToggleButton.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import '../css/ToggleButton.css';
3 | function ToggleButton({ checked, onClick, clickable = true }) {
4 | return (
5 |
8 | )
9 | }
10 |
11 | export default ToggleButton;
--------------------------------------------------------------------------------
/src/partials/Tooltip.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | function Tooltip({ content, visible, type }) {
4 | return (
5 |
36 | 
37 |
39 |
37 | shadPS4 Alchemist
38 | {titleName}
40 |
41 |
42 |
43 |
44 |
45 |
6 | {content?.header}
7 | {content?.body}
8 | {content?.footer}
9 |
10 | )
11 | }
12 |
13 | export default Tooltip;
--------------------------------------------------------------------------------
/src/partials/UpdateChecker.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useState, useEffect } from "react";
3 | import UpdateTooltip from "./UpdateTooltip";
4 | import { GoDownload } from "react-icons/go";
5 | function UpdateChecker() {
6 | const [ message, setMessage ] = useState(null);
7 | const [ content, setContent ] = useState(null);
8 | const [ progress, setProgress ] = useState(0);
9 | const [ isDownloading, setIsDownloading ] = useState(false);
10 | useEffect(() => {
11 | const handleUpdateCheck = (event, data) => {
12 | if (data && data.updateAvailable && data.type !== 'error') {
13 | setMessage(data.message);
14 | }
15 | if (data.type === 'error')
16 | console.error(data.message);
17 | }
18 | window.electron.send('check-updates');
19 | window.electron.on('check-updates', handleUpdateCheck);
20 | return () => {
21 | window.electron.removeListener('check-updates', handleUpdateCheck);
22 | }
23 | }, [])
24 |
25 | /* Set tooltip content when a message has been changed or set */
26 | useEffect(() => {
27 | setContent(
28 | {message}
29 | )
30 | }, [ message ])
31 |
32 |
33 | const initializeDownload = () => {
34 | window.electron.send('initiate-download');
35 | console.log('Initiated update download');
36 | }
37 |
38 | useEffect(() => {
39 | const handleDownload = (event, data) => {
40 | if (data && data.message) {
41 | setMessage(data.message);
42 | }
43 |
44 | if (data && data.progress) {
45 | setProgress(data.progress);
46 | setIsDownloading(true);
47 | }
48 | console.log(data);
49 | }
50 | window.electron.on('initiate-download', handleDownload);
51 | return () => { window.electron.removeListener('initiate-download', handleDownload) };
52 | }, [])
53 |
54 | return (
55 |
16 | {!isDownloading ?
17 |
29 |
30 | )
31 | }
32 |
33 | export default UpdateTooltip;
--------------------------------------------------------------------------------
/src/partials/VersionVisuals.jsx:
--------------------------------------------------------------------------------
1 | import '../css/VersionVisuals.css';
2 | function VersionVisuals() {
3 | return (
4 |
18 | {content}
19 |
20 | :
21 |
22 |
27 | }
28 | Progress:
23 |
24 |
25 |
26 | v0.1.4-alpha
5 | ) 6 | } 7 | export default VersionVisuals; -------------------------------------------------------------------------------- /src/views/Create.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import '../css/Create.css'; 3 | function Create() { 4 | return ( 5 |
6 |
8 | )
9 | }
10 |
11 | export default Create;
--------------------------------------------------------------------------------
/src/views/Install.jsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useRef } from "react";
2 | import { useEffect, useState } from "react";
3 | import '../css/Install.css';
4 | import useGlobalStateStore from "../js/globalStateStore";
5 | import { IoIosFolderOpen } from "react-icons/io";
6 | import GamesWrapper from "../partials/GamesWrapper";
7 | import Modal from '../partials/Modal';
8 | import ToggleButton from '../partials/ToggleButton';
9 | import Search from "../partials/Search";
10 | import { FaFaceFrown } from "react-icons/fa6";
11 | import { BiLoaderCircle } from "react-icons/bi";
12 | function Install() {
13 | const [ setLibraryDirectory ] = useGlobalStateStore(state => [ state.setLibraryDirectory ]);
14 | const [ setShadPS4Location ] = useGlobalStateStore(state => [ state.setShadPS4Location ]);
15 | const [ setModsDirectory ] = useGlobalStateStore(state => [ state.setModsDirectory ]);
16 |
17 | const [ games, setGames ] = useState([]);
18 | const [ filteredGames, setFilteredGames ] = useState(null);
19 | const [ searchTerm, setSearchTerm ] = useState('');
20 | const [ updated, setUpdated ] = useState(false);
21 | const [ modalContent, setModalContent ] = useState(null);
22 | const [ modalOpen, setModalOpen ] = useState(false);
23 | const [ selectedApp, setSelectedApp ] = useState(false);
24 | const [ isGrid, setIsGrid ] = useState(null);
25 | const [ viewTypeChanged, setViewTypeChanged ] = useState(false);
26 | const [ togglingMod, setTogglingMod ] = useState(null);
27 |
28 | /* Settings */
29 | const [ fullscreen, setFullscreen ] = useGlobalStateStore(state => [ state.fullscreen, state.setFullscreen ]);
30 | const [ isPS4Pro, setIsPS4Pro ] = useGlobalStateStore(state => [ state.isPS4Pro, state.setIsPS4Pro ]);
31 | const [ showSplash, setShowSplash ] = useGlobalStateStore(state => [ state.showSplash, state.setShowSplash ]);
32 | const [ vBlankDivider, setvBlankDivider ] = useGlobalStateStore(state => [ state.vBlankDivider, state.setvBlankDivider ]);
33 | const [ screenWidth, setScreenWidth ] = useGlobalStateStore(state => [ state.screenWidth, state.setScreenWidth ]);
34 | const [ screenHeight, setScreenHeight ] = useGlobalStateStore(state => [ state.screenHeight, state.setScreenHeight ]);
35 | const [ logType, setLogType ] = useGlobalStateStore(state => [ state.logType, state.setLogType ]);
36 |
37 | const [ modsForCurrentApp, setModsForCurrentApp ] = useState(null);
38 | const [ modalTabView, setModalTabView ] = useState('game');
39 | const [ enabledMods, setEnabledMods ] = useState([]);
40 | const [ disabledMods, setDisabledMods ] = useState([]);
41 | const [ installedMods, setInstalledMods ] = useState([]);
42 |
43 | const heightSettingRef = useRef(null);
44 | const widthSettingRef = useRef(null);
45 | const vBlankDividerRef = useRef(null);
46 | const searchInputRef = useRef(null);
47 |
48 | const initializeLibrary = () => {
49 | window.electron.send('open-file-dialog');
50 | }
51 | const bootGame = () => {
52 | let width = widthSettingRef.current.value;
53 | let height = heightSettingRef.current.value;
54 | let vBlankDividerValue = vBlankDividerRef.current.value;
55 | window.electron.send('launch-game', ({
56 | bin: `${selectedApp.path}/eboot.bin`,
57 | fullscreen: fullscreen,
58 | showSplash: showSplash,
59 | screenWidth: width || screenWidth,
60 | screenHeight: height || screenHeight,
61 | vBlankDivider: vBlankDividerValue || vBlankDivider,
62 | logType: logType,
63 | isPS4Pro: isPS4Pro
64 | }));
65 |
66 | console.log(heightSettingRef.current.value, widthSettingRef.current.value);
67 | }
68 | const revealInExplorer = (app, type) => {
69 | console.log(app, type);
70 | window.electron.send('open-in-explorer', { data: app, type: type });
71 | }
72 | const revealLogsInExplorer = (app) => {
73 | window.electron.send('open-logs', { id: app.id });
74 | }
75 | const handleSelectedApp = (app) => {
76 | setSelectedApp(app);
77 | setTimeout(() => {
78 | setModalOpen(true);
79 | }, 100);
80 | }
81 | const closeModal = () => {
82 | setModalOpen(false);
83 | }
84 |
85 | const setViewTab = (tab) => {
86 | if (tab === 'game')
87 | setModalTabView('game');
88 | else setModalTabView('mods');
89 | }
90 | const enableMod = async (data) => {
91 | await window.electron.send('enable-mod', ({ modName: data.modName, id: data.id }))
92 | }
93 | const disableMod = async (data) => {
94 | await window.electron.send('disable-mod', ({ modName: data.modName, id: data.id }));
95 | }
96 | const toggleView = () => {
97 | isGrid ? setIsGrid(false) : setIsGrid(true);
98 | }
99 | const resetSearch = () => {
100 | setSearchTerm('');
101 | if (searchInputRef.current)
102 | searchInputRef.current.value = '';
103 | }
104 | const toggleValue = (value, setState) => {
105 | value = !value;
106 | setState(value);
107 | }
108 | const toggleLogType = () => {
109 | if (logType === "async")
110 | setLogType("sync")
111 | else setLogType("async");
112 | }
113 |
114 | /* Refresh / set games in library */
115 | useEffect(() => {
116 | const handleLibraryRefresh = (event, data) => {
117 | if (data && data.games) {
118 | console.log('Games data:', data);
119 | setGames(data.games);
120 | setFilteredGames(data.games);
121 | }
122 | }
123 |
124 | window.electron.send('fetch-games-in-library');
125 | window.electron.on('fetch-games-in-library', handleLibraryRefresh);
126 | return () => { window.electron.removeAllListeners('fetch-games-in-library') }
127 | }, [])
128 |
129 | /* Get view type */
130 | useEffect(() => {
131 | const handleGetView = (event, data) => {
132 | console.log(data);
133 | if (data && data.isGrid) {
134 | setIsGrid(data.isGrid);
135 | setViewTypeChanged(true);
136 | }
137 | }
138 | window.electron.send('get-view');
139 | window.electron.on('get-view', handleGetView);
140 | setViewTypeChanged(false);
141 | return () => { window.electron.removeAllListeners('get-view', handleGetView) };
142 | }, [])
143 |
144 | /* Set available mods and fetch their current states for selected app from IPC */
145 | useEffect(() => {
146 | if (selectedApp && selectedApp.id) {
147 | window.electron.send(`get-mods-directory`, selectedApp.id)
148 | window.electron.send('mod-state', selectedApp.id);
149 |
150 | const modsDirectoryListener = (event, data) => {
151 | window.electron.removeListener(`mods-${selectedApp.id}`, modsDirectoryListener);
152 | if (data && data.mods) {
153 | setModsForCurrentApp(data.mods);
154 | }
155 | }
156 | const modsStateListener = (event, data) => {
157 | if (data) {
158 | console.log(data);
159 | }
160 | }
161 | /* Response from IPC from fetch request */
162 | window.electron.on(`check-mods`, modsStateListener)
163 | window.electron.on(`mods-${selectedApp.id}`, modsDirectoryListener)
164 |
165 | return () => {
166 | window.electron.on(`check-mods`, modsStateListener)
167 | window.electron.removeListener(`mods-${selectedApp.id}`, modsDirectoryListener);
168 | }
169 | }
170 | }, [ selectedApp ])
171 |
172 | /* Library */
173 | useEffect(() => {
174 | const getJsonData = async () => {
175 | const data = await window.electron.getJsonData();
176 | if (data && data.games) {
177 | setGames(data.games);
178 | setLibraryDirectory(data.games_path);
179 | setShadPS4Location(data.shadPS4Exe);
180 | setModsDirectory(data.mods_path);
181 | setUpdated(true);
182 | }
183 | };
184 | if (!updated) {
185 | getJsonData();
186 | }
187 | }, [ updated ]);
188 |
189 | useEffect(() => {
190 | if (selectedApp) {
191 | const getModStates = async () => {
192 | const data = await window.electron.getModStates(selectedApp);
193 | if (data && data.mods) {
194 | const enabledMods = [];
195 | const disabledMods = [];
196 | Object.values(data.mods).forEach(mod => {
197 | if (mod.enabled)
198 | enabledMods.push(mod);
199 | else disabledMods.push(mod);
200 | })
201 |
202 | setEnabledMods(enabledMods);
203 | setDisabledMods(disabledMods);
204 | }
205 | }
206 | getModStates();
207 | }
208 | }, [ selectedApp ]);
209 |
210 | /* Open Modal */
211 | useEffect(() => {
212 | const updateModData = (event, data) => {
213 | const setData = async () => {
214 | setInstalledMods(data.mods);
215 | setEnabledMods(data.enabled);
216 | setDisabledMods(data.disabled);
217 | }
218 | const update = async () => {
219 | await setData();
220 | }
221 | update();
222 | };
223 |
224 | window.electron.on('mod-state', updateModData);
225 | return () => {
226 | window.electron.removeListener('mod-state', updateModData)
227 | };
228 | }, [ selectedApp, enabledMods, disabledMods, installedMods, modalOpen ]);
229 |
230 | useEffect(() => {
231 | const handleModStatusChange = (event, data) => {
232 | if (data) {
233 | setTogglingMod(data.mod);
234 | }
235 | }
236 | const handleModStatusChangeCompletion = (event, data) => {
237 | if (data && data.status) {
238 | if (data.status === 'completed')
239 | setTogglingMod(null);
240 | }
241 | }
242 | window.electron.on('mod-process-complete', handleModStatusChangeCompletion);
243 | window.electron.on('processing-mod', handleModStatusChange);
244 | return (() => { window.electron.removeAllListeners('processing-mod', handleModStatusChange); window.electron.removeAllListeners('mod-process-complete', handleModStatusChangeCompletion) });
245 | }, [])
246 |
247 | /* Initialize Modal Structure */
248 | useEffect(() => {
249 | if (selectedApp) {
250 | const modalHeader = (
251 | <>
252 | Coming soon
7 |
253 |
254 |
255 |
256 |
257 |
266 |
267 | )
268 | const modsView = (
269 |
258 |
265 | Logs
259 | 260 |Game
261 | 262 |Mods
263 | 264 |
270 |
303 | )
304 | const gameView = (
305 |
271 | {Array.isArray(modsForCurrentApp) && modsForCurrentApp.length > 0 ? (
272 | <>
273 |
302 | Mods available
274 |-
275 | {modsForCurrentApp.map(mod => {
276 | const isModEnabled = enabledMods && enabledMods.find(x => x.modName === mod) ? true : false;
277 |
278 | return (
279 |
- {mod} 281 |
280 | {
282 | if (!isModEnabled) {
283 | enableMod({ modName: mod, id: selectedApp.id })
284 | }
285 | else {
286 | disableMod({ modName: mod, id: selectedApp.id })
287 | }
288 | }} />
289 |
291 | );
292 | })}
293 |
297 |
300 | )}
301 | No mods are currently installed
298 |
306 |
376 | )
377 | const modalBody = (
378 |
307 |
340 | Global Settings
308 |Emulator
309 |
310 | { toggleValue(isPS4Pro, setIsPS4Pro) }} checked={isPS4Pro} />
312 |
313 | PS4 Pro Mode
311 |
314 | { toggleValue(fullscreen, setFullscreen) }} checked={fullscreen} />
316 |
317 | Fullscreen
315 |
318 | { toggleValue(showSplash, setShowSplash) }} checked={showSplash} />
320 |
321 | Show Splash
319 |Graphics
322 |
323 |
326 | Screen Width:
324 | { setScreenWidth(e.target.value) }} /> 325 |
327 |
330 | Screen Height:
328 | setScreenHeight(e.target.value)} /> 329 |
331 |
334 | Vblank Divider
332 | { setvBlankDivider(e.target.value) }} /> 333 |Logger
335 |
336 |
339 | Enable Async
337 |
341 |
375 |
342 | 
343 |
344 |
345 |
346 |
347 |
348 |
374 |
349 |
351 | {selectedApp.title}
350 |
352 |
355 | {Array.isArray(modsForCurrentApp) ?
356 | (ID:
353 |{selectedApp.id}
354 |
357 |
) :
360 | (Total mods:
358 |{modsForCurrentApp.length}
359 |
361 |
)}
363 | {enabledMods && Array.isArray(modsForCurrentApp) ? (
364 | No mods installed
362 |
365 |
) : null}
368 | {disabledMods && Array.isArray(modsForCurrentApp) ? (
369 | Enabled Mods:
366 |{enabledMods.length}
367 |
370 |
) : null}
373 | Disabled Mods:
371 |{disabledMods.length}
372 |
379 |
479 | )
480 | const modalFooter = (
481 |
380 | {Array.isArray(modsForCurrentApp) && modsForCurrentApp.length > 0 ? (
381 | <>
382 |
407 |
408 | Mods available
383 |-
384 | {modsForCurrentApp.map(mod => {
385 | const isModEnabled = enabledMods && enabledMods.find(x => x.modName === mod) ? true : false;
386 | return (
387 |
- {mod} {/* Assuming mod is a string, not mod.modName */} 389 |
{/* key on outermost div */}
388 | {
390 | if (!isModEnabled)
391 | enableMod({ modName: mod, id: selectedApp.id })
392 | else disableMod({ modName: mod, id: selectedApp.id });
393 | }} />
394 |
395 | );
396 | })}
397 |
401 |
404 | )}
405 |
406 | No mods are currently installed
402 |
409 |
442 |
443 | Global Settings
410 |Emulator
411 |
412 | { toggleValue(isPS4Pro, setIsPS4Pro) }} checked={isPS4Pro} />
414 |
415 | PS4 Pro Mode
413 |
416 | { toggleValue(fullscreen, setFullscreen) }} checked={fullscreen} />
418 |
419 | Fullscreen
417 |
420 | { toggleValue(showSplash, setShowSplash) }} checked={showSplash} />
422 |
423 | Show Splash
421 |Graphics
424 |
425 |
428 | Screen Width:
426 | { setScreenWidth(e.target.value) }} /> 427 |
429 |
432 | Screen Height:
430 | setScreenHeight(e.target.value)} /> 431 |
433 |
436 | Vblank Divider
434 | { setvBlankDivider(e.target.value) }} /> 435 |Logger
437 |
438 |
441 | Enable Async
439 |
444 |
478 |
445 |
446 |
447 |
448 |
449 |
450 |
451 |
477 |
452 |
454 | {selectedApp.title}
453 |
455 |
458 | {Array.isArray(modsForCurrentApp) ?
459 | (ID:
456 |{selectedApp.id}
457 |
460 |
) :
463 | (Total mods:
461 |{modsForCurrentApp.length}
462 |
464 |
)}
466 | {enabledMods && Array.isArray(modsForCurrentApp) ? (
467 | No mods installed
465 |
468 |
) : null}
471 | {disabledMods && Array.isArray(modsForCurrentApp) ? (
472 | Enabled Mods:
469 |{enabledMods.length}
470 |
473 |
) : null}
476 | Disabled Mods:
474 |{disabledMods.length}
475 |
482 |
483 |
484 | )
485 | const modalBackdrop = (
486 |
487 | )
488 | setModalContent({
489 | header: modalHeader,
490 | body: modalTabView === 'game' ? gameView : modsView,
491 | footer: modalFooter,
492 | backdrop: modalBackdrop
493 | })
494 | }
495 | }, [ selectedApp, modsForCurrentApp, enabledMods, disabledMods, fullscreen, showSplash, logType, isPS4Pro, vBlankDivider, modalTabView, togglingMod ])
496 |
497 | useEffect(() => {
498 | if (searchTerm)
499 | setFilteredGames(games.filter(x => x.title.toLowerCase().replace('\u2122', '').startsWith(searchTerm.toLowerCase())));
500 |
501 | if (searchTerm.length === 0) {
502 | setFilteredGames(games);
503 | }
504 | }, [ searchTerm ])
505 |
506 | useEffect(() => {
507 | const updateView = () => {
508 | if (isGrid !== null) {
509 | console.log(viewTypeChanged)
510 | window.electron.send('update-view', { isGrid: isGrid });
511 | }
512 | }
513 | updateView();
514 | }, [ isGrid, viewTypeChanged ])
515 |
516 |
517 | return (
518 | <>
519 |
522 |
525 | :
526 | <>
527 | No games library found
523 | 524 |
6 |
8 | )
9 | }
10 |
11 | export default ProcessActive;
--------------------------------------------------------------------------------
/src/views/Settings.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { LuFolderEdit } from "react-icons/lu";
3 | import '../css/Settings.css';
4 | function Settings() {
5 | const [ shadPS4Location, setShadPS4Location ] = useState(null)
6 | const [ libraryDirectory, setLibraryDirectory ] = useState(null);
7 | const [ modsDirectory, setModsDirectory ] = useState(null);
8 |
9 | const setGames = () => {
10 | window.electron.send('set-games');
11 | }
12 |
13 | const setShadPS4 = () => {
14 | window.electron.send('set-shadps4');
15 | }
16 |
17 | const setMods = () => {
18 | window.electron.send('set-mods');
19 | }
20 |
21 | const reinitialize = () => {
22 | window.electron.send('open-file-dialog');
23 | }
24 |
25 | const fetchSettings = async () => {
26 | const data = await window.electron.getJsonData();
27 | if (data) {
28 | setLibraryDirectory(data.games_path);
29 | setModsDirectory(data.mods_path);
30 | setShadPS4Location(data.shadPS4Exe)
31 | }
32 | }
33 |
34 | useEffect(() => {
35 | const awaitSettings = async () => {
36 | await fetchSettings();
37 | }
38 | awaitSettings();
39 | }, [])
40 |
41 | useEffect(() => {
42 | const setPaths = async (event, data) => {
43 | if (data && data.gamesPath && data.shadPS4Path && data.modsPath) {
44 | setLibraryDirectory(data.gamesPath);
45 | setShadPS4Location(data.shadPS4Path)
46 | setModsDirectory(data.modsPath);
47 | }
48 |
49 | window.electron.on('get-paths', setPaths);
50 | return () => { window.electron.removeListener('get-paths', setPaths) }
51 | }
52 | setPaths();
53 | }, [])
54 |
55 | return (
56 | <>
57 | ShadPS4 is currently running
7 |
58 |
78 |
79 | )
80 | }
81 |
82 | export default Settings;
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import react from '@vitejs/plugin-react';
3 |
4 | export default defineConfig({
5 | plugins: [ react() ],
6 | build: {
7 | outDir: 'build'
8 | },
9 | base: './',
10 | server: {
11 | port: 3000,
12 | host: true,
13 | strictPort: true
14 | },
15 | resolve: {
16 | alias: {
17 | '@': '/src'
18 | },
19 | },
20 | });
21 |
--------------------------------------------------------------------------------
59 |
64 | shadPS4 Location
60 |{shadPS4Location ? shadPS4Location : 'No shadPS4.exe location specified'} 61 | 62 |
63 |
65 |
70 | Games Location
66 |{libraryDirectory ? libraryDirectory : 'No library directory specified'} 67 | 68 |
69 |
71 |
76 |
77 | Mods Location
72 |{modsDirectory ? modsDirectory : 'No mods directory specified'} 73 | 74 |
75 |