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
|
import { ButtonItem, Field, Focusable, PanelSection, PanelSectionRow } from "@decky/ui";
import { useCallback, useEffect, useRef, useState } from "react";
import { ConfigurationData } from "../config/configSchema";
import { GameTarget } from "../hooks/useGameConfiguration";
import { GameConfigurationControls } from "./GameConfigurationControls";
import { GameConfigurationSelector } from "./GameConfigurationSelector";
interface ConfigurationTabProps {
config: ConfigurationData;
targets: GameTarget[];
runningGame: GameTarget | null;
onSelect: (appid: string) => void;
onConfigChange: (fieldName: keyof ConfigurationData, value: boolean | number | string | string[]) => Promise<void>;
onEnable: (appid: string) => Promise<boolean>;
onReset: () => Promise<void>;
onResetAll: () => Promise<void>;
}
export function ConfigurationTab({
config,
targets,
runningGame,
onSelect,
onConfigChange,
onEnable,
onReset,
onResetAll,
}: ConfigurationTabProps) {
const [detailAppId, setDetailAppId] = useState<string | null>(null);
const [focusFpsMultiplier, setFocusFpsMultiplier] = useState(false);
const [focusBackToGames, setFocusBackToGames] = useState(false);
const backToGamesRef = useRef<HTMLDivElement>(null);
const promptedRunningAppId = useRef<string | null>(null);
const closeDetails = useCallback(() => {
setFocusFpsMultiplier(false);
setFocusBackToGames(false);
setDetailAppId(null);
}, []);
const clearFpsFocusRequest = useCallback(() => setFocusFpsMultiplier(false), []);
useEffect(() => {
if (!focusBackToGames) return;
const frame = requestAnimationFrame(() => {
backToGamesRef.current?.querySelector<HTMLElement>('[role="button"]')?.focus();
setFocusBackToGames(false);
});
return () => cancelAnimationFrame(frame);
}, [focusBackToGames]);
useEffect(() => {
if (!runningGame || runningGame.configured) {
promptedRunningAppId.current = null;
return;
}
if (promptedRunningAppId.current !== runningGame.appid && detailAppId === null) {
promptedRunningAppId.current = runningGame.appid;
setDetailAppId(runningGame.appid);
}
}, [detailAppId, runningGame?.appid, runningGame?.configured]);
const selectedTarget = detailAppId ? targets.find((target) => target.appid === detailAppId) : null;
if (detailAppId === null) {
return (
<PanelSection title="Games">
<GameConfigurationSelector
targets={targets}
runningGame={runningGame}
onSelect={(appid) => {
setFocusBackToGames(true);
onSelect(appid);
setDetailAppId(appid);
}}
onResetAll={onResetAll}
/>
</PanelSection>
);
}
const profileLabel = selectedTarget?.name || "Game profile";
const profileDescription = selectedTarget
? `${selectedTarget.nonSteam ? "Non-Steam" : "Steam"} · App ID ${selectedTarget.appid} · ${selectedTarget.configured ? "Configured" : "Not configured"}`
: "Game is no longer available";
return (
<Focusable onCancelButton={closeDetails}>
<PanelSection title="Game Profile">
<PanelSectionRow>
<Field label={profileLabel} description={profileDescription} />
</PanelSectionRow>
<PanelSectionRow>
<Focusable ref={backToGamesRef} noFocusRing>
<ButtonItem layout="below" onClick={closeDetails}>Back to games</ButtonItem>
</Focusable>
</PanelSectionRow>
</PanelSection>
{selectedTarget?.configured && (
<GameConfigurationControls
config={config}
onConfigChange={onConfigChange}
autoFocusFpsMultiplier={focusFpsMultiplier}
onFpsMultiplierFocused={clearFpsFocusRequest}
/>
)}
<PanelSectionRow>
<ButtonItem
layout="below"
onClick={async () => {
if (selectedTarget?.configured) {
promptedRunningAppId.current = detailAppId;
await onReset();
closeDetails();
} else if (detailAppId) {
if (await onEnable(detailAppId)) setFocusFpsMultiplier(true);
}
}}
>
{selectedTarget?.configured ? "Remove profile" : "Enable for next launch"}
</ButtonItem>
</PanelSectionRow>
</Focusable>
);
}
|
