Support additional gamescope options

[Etaash-mathamsetty]

Funny story behind this PR: I was trying to play some random Styx game from GOG that had broken mouse capture on kwin wayland, I opened it through gamescope, it works but on the wrong monitor this time, then I wrote the code for this PR really quickly to change the displays, and guess what ... gamescope doesn't support changing the displays. I will have to make a PR there as well

Use the following Checklist if you have changed something on the Backend or Frontend:

• Tested the feature and it's working on a current and clean install.
• Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
• Created / Updated Tests (If necessary)
• Created / Updated documentation (If necessary)

[Etaash-mathamsetty]

this generates a lot of log spam when changing the additional options thingy, I think there should be a way to fix this though

[imLinguin]

LGTM

[flavioislima]

I believe that would be good to also add the HDR option.
And when enabled, add the DXVK_HDR=1 to the env variables.
this is how it works on my machine.

[Etaash-mathamsetty]

i think on change is the best option since otherwise you need to have a onChange and an onBlur

[imLinguin]

onBlur didn't work because you were relying on the value from useSetting it didn't change because you couldn't input anything in the first place due to lack of meaningful onChange. To implement this properly you need to add separate state for holding input value, then update useSetting value onBlur

[imLinguin]

That would look like this

   const [fetching, setFetching] = useState(true)
   const [isInstalled, setIsInstalled] = useState(false)
 
+  const [additionalOptions, setAdditionalOptions] = useState(gamescope.additionalOptions)
+
   useEffect(() => {
     setFetching(true)
     window.api
@@ -358,7 +360,7 @@ const Gamescope = () => {
         label={t('options.gamescope.additionalOptions', 'Additional Options')}
         htmlId="additionalOptions"
         placeholder=""
-        value={gamescope.additionalOptions}
+        value={additionalOptions}
         afterInput={
           <FontAwesomeIcon
             className="helpIcon"
@@ -369,7 +371,8 @@ const Gamescope = () => {
             )}
           />
         }
-        onChange={(event: ChangeEvent<HTMLInputElement>) =>
+        onChange={(event: ChangeEvent<HTMLInputElement>) => setAdditionalOptions(event.currentTarget.value)}
+        onBlur={(event: ChangeEvent<HTMLInputElement>) =>
           setGamescope({
             ...gamescope,
             additionalOptions: event.currentTarget.value

I imagine while we are at it we could do the same thing for other input fields in this component

[Etaash-mathamsetty]

onBlur didn't work because you were relying on the value from useSetting it didn't change because you couldn't input anything in the first place due to lack of meaningful onChange. To implement this properly you need to add separate state for holding input value, then update useSetting value onBlur

yeah I was trying to fix this, but I just didn't connect it with useState lol
I was using a regular old variable

[flavioislima]

lgtm