1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
import { Tabs } from "@decky/ui";
import { useEffect, useState } from "react";
import { FaFileAlt, FaGamepad, FaLayerGroup, FaTools } from "react-icons/fa";
import { ConfigurationData } from "../config/configSchema";
import { tabStyles } from "../styles";
import { useGameConfiguration } from "../hooks/useGameConfiguration";
import { useInstallationActions } from "../hooks/useInstallationActions";
import { useInstallationStatus } from "../hooks/useLsfgHooks";
import { ConfigFileTab } from "./ConfigFileTab";
import { ConfigurationTab } from "./ConfigurationTab";
import { FlatpaksTab } from "./FlatpaksTab";
import { SetupTab } from "./SetupTab";
const tabIcons = {
configuration: <FaGamepad size={18} />,
flatpak: <FaLayerGroup size={18} />,
configFile: <FaFileAlt size={18} />,
setup: <FaTools size={18} />,
};
export function Content() {
const {
isInstalled,
installationStatus,
setIsInstalled,
setInstallationStatus,
losslessScalingInstalled,
losslessScalingStatus,
steamBranchStatus,
checkInstallation,
} = useInstallationStatus();
const {
config,
targets,
runningGame,
selectedAppId,
setSelectedAppId,
save,
resetSelected,
resetAll,
reload,
} = useGameConfiguration();
const { isInstalling, isUninstalling, handleInstall, handleUninstall } = useInstallationActions();
const [tab, setTab] = useState("Setup");
const setupComplete =
isInstalled &&
losslessScalingInstalled &&
steamBranchStatus?.success === true &&
steamBranchStatus.installed &&
!steamBranchStatus.needs_switch;
useEffect(() => {
setTab(setupComplete ? "Configuration" : "Setup");
}, [setupComplete]);
useEffect(() => {
if (isInstalled) void reload();
}, [isInstalled, reload]);
const handleConfigChange = async (
fieldName: keyof ConfigurationData,
value: boolean | number | string | string[],
) => {
await save({ ...config, [fieldName]: value });
};
const onInstall = () => {
void handleInstall(setIsInstalled, setInstallationStatus, reload, checkInstallation);
};
const onUninstall = () => {
void handleUninstall(setIsInstalled, setInstallationStatus, checkInstallation);
};
const setupContent = (
<SetupTab
isInstalled={isInstalled}
installationStatus={installationStatus}
losslessScalingInstalled={losslessScalingInstalled}
losslessScalingStatus={losslessScalingStatus}
steamBranchStatus={steamBranchStatus}
isInstalling={isInstalling}
isUninstalling={isUninstalling}
onInstall={onInstall}
onUninstall={onUninstall}
/>
);
const tabs = setupComplete
? [
{
id: "Configuration",
title: tabIcons.configuration,
content: (
<ConfigurationTab
config={config}
targets={targets}
runningGame={runningGame}
selectedAppId={selectedAppId}
onSelect={setSelectedAppId}
onConfigChange={handleConfigChange}
onReset={resetSelected}
onResetAll={resetAll}
/>
),
},
{ id: "Flatpak", title: tabIcons.flatpak, content: <FlatpaksTab /> },
{ id: "ConfigFile", title: tabIcons.configFile, content: <ConfigFileTab /> },
{ id: "Setup", title: tabIcons.setup, content: setupContent },
]
: [
{ id: "Setup", title: tabIcons.setup, content: setupContent },
];
return (
<div
className="lsfg-vk-tabs"
style={{ height: "95%", width: "300px", position: "fixed", marginTop: "-12px", overflow: "hidden" }}
>
<style>{tabStyles}</style>
<Tabs activeTab={tab} onShowTab={setTab} tabs={tabs} />
</div>
);
}
|
