Quality presets and recommended preset

[ariesninjadev]

This PR adds quality presets to the graphics settings modal, and allows Synthesis to automatically select the low (or "fast") graphics preset based on certain parameters including whether the device is a mobile device, or the specs are low. Check the Recommended Settings section for help on testing the recommended settings functionality.

---

Presets

Fast Graphics (Low)

Balanced Graphics (Medium)

Fancy Graphics (High)

If any options are changed, the preset is automatically set to "Custom":

---

Recommended Settings

The recommended settings are only applied to a device once. We then save whether or not this optimization has been applied in localstorage. To tell the browser that we haven't run the optimization yet, run the following in dev tools:

let p=JSON.parse(localStorage.getItem("Preferences"));p.GraphicsOptimizationApplied=!1;localStorage.setItem("Preferences",JSON.stringify(p));

Then, you can emulate mobile device headers by using device mode in dev tools:

Finally, reload the page.

[BrandonPacewic]

Running into a few issues related to the checkboxes for both fancy shadows and anti-aliasing. It seems that they don't always apply the visual changes related to the option being selected/deselected.

Also running into some weird things with the browser refresh being forced when the state of anti-aliasing has not been changed. Not 100% sure if its related to this pr or not.

[ariesninjadev]

Running into a few issues related to the checkboxes for both fancy shadows and anti-aliasing. It seems that they don't always apply the visual changes related to the option being selected/deselected.

Also running into some weird things with the browser refresh being forced when the state of anti-aliasing has not been changed. Not 100% sure if its related to this pr or not.

I can't seem to figure out how to directly toggle a checkbox in-code; do you have any insight on this?

AntiA being double toggled and force reloading is a result of @Dhruv-0-Arora's PR.

[BrandonPacewic]

I can't seem to figure out how to directly toggle a checkbox in-code; do you have any insight on this?

AntiA being double toggled and force reloading is a result of @Dhruv-0-Arora's PR.

It seems like both of these issues are being caused by the state of the checkbox sometimes not matching the state of the setting when the preset gets applied. See if you can find a way to update the display state of the checkboxes when applying the presets. If it does not appear reasonable, we can wait to make this change till after the UI refactor is done.

[ariesninjadev]

I can't seem to figure out how to directly toggle a checkbox in-code; do you have any insight on this?
AntiA being double toggled and force reloading is a result of @Dhruv-0-Arora's PR.

It seems like both of these issues are being caused by the state of the checkbox sometimes not matching the state of the setting when the preset gets applied. See if you can find a way to update the display state of the checkboxes when applying the presets. If it does not appear reasonable, we can wait to make this change till after the UI refactor is done.

Let's fix checkboxes after refactor :D

[Dhruv-0-Arora]

the state of the checkbox sometimes not matching the state of the setting when the preset gets applied. See if you can find a way to update the display state of the checkboxes when applying the presets. If it does not appear reasonable, we can wait to make this change till after the UI ref

For AntiA, there are two different anti-alias settings that are being set and in order to actually change these settings, there are some weird re-render things you need to do

[Dhruv-0-Arora]

Depends on UI Refactor