Create Graphics Settings Presets [SYNTH-91]

fission/src/systems/preferences/PreferenceTypes.ts

@@ -92,6 +92,61 @@ export function defaultGraphicsPreferences(): GraphicsPreferences {
     }
 }
 
+export function mediumGraphicsPreferences(): GraphicsPreferences {
+    return {
+        lightIntensity: 5,
+        fancyShadows: false,
+        maxFar: 30,
+        cascades: 4,
+        shadowMapSize: 4096,
+        antiAliasing: false,
+    }
+}
+
+export function highGraphicsPreferences(): GraphicsPreferences {
+    return {
+        lightIntensity: 5,
+        fancyShadows: true,
+        maxFar: 30,
+        cascades: 4,
+        shadowMapSize: 4096,
+        antiAliasing: true,
+    }
+}
+
+export function veryHighGraphicsPreferences(): GraphicsPreferences {
+    return {
+        lightIntensity: 6,
+        fancyShadows: true,
+        maxFar: 50,
+        cascades: 4,
+        shadowMapSize: 4096,
+        antiAliasing: true,
+    }
+}
+
+export function lowGraphicsPreferences(): GraphicsPreferences {
+    return {
+        lightIntensity: 3,
+        fancyShadows: false,
+        maxFar: 20,
+        cascades: 2,
+        shadowMapSize: 2048,
+        antiAliasing: false,
+    }
+}
+
+export function ultraGraphicsPreferences(): GraphicsPreferences {
+    return {
+        lightIntensity: 7,
+        fancyShadows: true,
+        maxFar: 100,
+        cascades: 6,
+        shadowMapSize: 8192,
+        antiAliasing: true,
+    }
+}
+
 export type IntakePreferences = {
     deltaTransformation: number[]
     zoneDiameter: number

fission/src/systems/preferences/PreferencesSystem.ts

@@ -222,6 +222,11 @@ class PreferencesSystem {
         this.savePreferences()
     }
 
+    public static setGraphicsPreferences(g: GraphicsPreferences) {
+        this._preferences[GRAPHICS_PREFERENCE_KEY] = g
+        this.savePreferences()
+    }
+
     /** Loads all preferences from local storage. */
     public static loadPreferences() {
         const loadedPrefs = window.localStorage.getItem(this._localStorageKey)

fission/src/ui/components/StatefulSlider.tsx

@@ -1,6 +1,6 @@
 import { Slider, Stack, Tooltip, Typography } from "@mui/material"
 import Label from "./Label"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 const StatefulSlider: React.FC<
     Omit<Parameters<typeof Slider>[0], "value" | "onChange"> & {
@@ -12,6 +12,11 @@ const StatefulSlider: React.FC<
     }
 > = props => {
     const [value, setValue] = useState(props.defaultValue)
+
+    useEffect(() => {
+        setValue(props.defaultValue)
+    }, [props.defaultValue])
+
     return (
         <Tooltip title={props.tooltip ?? ""}>
             <Stack

fission/src/ui/modals/configuring/SettingsModal.tsx

@@ -16,6 +16,15 @@ import { useThemeContext } from "@/ui/helpers/ThemeProviderHelpers"
 import { useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import { randomColor } from "@/util/Random"
 import CommandRegistry from "@/ui/components/CommandRegistry"
+import {
+    mediumGraphicsPreferences,
+    lowGraphicsPreferences,
+    highGraphicsPreferences,
+    veryHighGraphicsPreferences,
+    ultraGraphicsPreferences,
+    type GraphicsPreferences,
+} from "@/systems/preferences/PreferenceTypes"
+import { Select, MenuItem } from "@mui/material"
 
 // Register command: Open Settings (module-scope side effect)
 CommandRegistry.get().registerCommand({
@@ -209,6 +218,7 @@ const GeneralTab: React.FC<GeneralTabProps> = ({ writePreference }) => (
 
 const GraphicsTab: React.FC<GraphicsTabProps> = ({ onActionsChange }) => {
     const [reload, setReload] = useState<boolean>(false)
+    const [selectedPreset, setSelectedPreset] = useState<string>("medium")
     const [lightIntensity, setLightIntensity] = useState<number>(
         PreferencesSystem.getGraphicsPreferences().lightIntensity
     )
@@ -218,6 +228,43 @@ const GraphicsTab: React.FC<GraphicsTabProps> = ({ onActionsChange }) => {
     const [shadowMapSize, setShadowMapSize] = useState<number>(PreferencesSystem.getGraphicsPreferences().shadowMapSize)
     const [antiAliasing, setAntiAliasing] = useState<boolean>(PreferencesSystem.getGraphicsPreferences().antiAliasing)
 
+    const applyGraphicsPreferencesLocally = (prefs: ReturnType<typeof PreferencesSystem.getGraphicsPreferences>) => {
+        setLightIntensity(prefs.lightIntensity)
+        setFancyShadows(prefs.fancyShadows)
+        setMaxFar(prefs.maxFar)
+        setCascades(prefs.cascades)
+        setShadowMapSize(prefs.shadowMapSize)
+        setAntiAliasing(prefs.antiAliasing)
+        World.sceneRenderer.changeLighting(prefs.fancyShadows)
+    }
+
+    useEffect(() => {
+        const current = PreferencesSystem.getGraphicsPreferences()
+
+        const presetMatches = (preset: GraphicsPreferences) => {
+            return (
+                current.lightIntensity === preset.lightIntensity &&
+                current.fancyShadows === preset.fancyShadows &&
+                current.maxFar === preset.maxFar &&
+                current.cascades === preset.cascades &&
+                current.shadowMapSize === preset.shadowMapSize &&
+                current.antiAliasing === preset.antiAliasing
+            )
+        }
+
+        if (presetMatches(lowGraphicsPreferences())) {
+            setSelectedPreset("low")
+        } else if (presetMatches(mediumGraphicsPreferences())) {
+            setSelectedPreset("medium")
+        } else if (presetMatches(highGraphicsPreferences())) {
+            setSelectedPreset("high")
+        } else if (presetMatches(veryHighGraphicsPreferences())) {
+            setSelectedPreset("veryHigh")
+        } else if (presetMatches(ultraGraphicsPreferences())) {
+            setSelectedPreset("ultra")
+        }
+    }, [])
+
     // Create actions object and notify parent
     useEffect(() => {
         const actions: GraphicsTabActions = {
@@ -250,6 +297,28 @@ const GraphicsTab: React.FC<GraphicsTabProps> = ({ onActionsChange }) => {
                 setAntiAliasing(g.antiAliasing)
                 setReload(false)
                 World.sceneRenderer.changeLighting(g.fancyShadows)
+                const presetMatches = (preset: GraphicsPreferences) => {
+                    return (
+                        g.lightIntensity === preset.lightIntensity &&
+                        g.fancyShadows === preset.fancyShadows &&
+                        g.maxFar === preset.maxFar &&
+                        g.cascades === preset.cascades &&
+                        g.shadowMapSize === preset.shadowMapSize &&
+                        g.antiAliasing === preset.antiAliasing
+                    )
+                }
+
+                if (presetMatches(lowGraphicsPreferences())) {
+                    setSelectedPreset("low")
+                } else if (presetMatches(mediumGraphicsPreferences())) {
+                    setSelectedPreset("medium")
+                } else if (presetMatches(highGraphicsPreferences())) {
+                    setSelectedPreset("high")
+                } else if (presetMatches(veryHighGraphicsPreferences())) {
+                    setSelectedPreset("veryHigh")
+                } else if (presetMatches(ultraGraphicsPreferences())) {
+                    setSelectedPreset("ultra")
+                }
             },
             requiresReload: reload,
         }
@@ -258,6 +327,29 @@ const GraphicsTab: React.FC<GraphicsTabProps> = ({ onActionsChange }) => {
 
     return (
         <Stack gap={2}>
+            <Label size="md">Graphics Presets</Label>
+            <Select
+                value={selectedPreset}
+                onChange={e => {
+                    const preset = e.target.value
+                    setSelectedPreset(preset)
+                    if (preset === "low") applyGraphicsPreferencesLocally(lowGraphicsPreferences())
+                    else if (preset === "medium") applyGraphicsPreferencesLocally(mediumGraphicsPreferences())
+                    else if (preset === "high") applyGraphicsPreferencesLocally(highGraphicsPreferences())
+                    else if (preset === "veryHigh") applyGraphicsPreferencesLocally(veryHighGraphicsPreferences())
+                    else if (preset === "ultra") applyGraphicsPreferencesLocally(ultraGraphicsPreferences())
+                }}
+                sx={{ width: "100%" }}
+            >
+                <MenuItem value="low">Low Graphics</MenuItem>
+                <MenuItem value="medium">Medium Graphics (Default)</MenuItem>
+                <MenuItem value="high">High Graphics</MenuItem>
+                <MenuItem value="veryHigh">Very High Graphics</MenuItem>
+                <MenuItem value="ultra">Ultra Graphics</MenuItem>
+            </Select>
+
+            <Label size="md">Customize Graphics</Label>
+
             <StatefulSlider
                 label="Light Intensity"
                 min={MIN_LIGHT_INTENSITY}
@@ -334,26 +426,6 @@ const GraphicsTab: React.FC<GraphicsTabProps> = ({ onActionsChange }) => {
                         }}
                         step={1024}
                     />
-                    <Box alignSelf="center">
-                        <Button
-                            onClick={() => {
-                                setShadowMapSize(4096)
-                                setMaxFar(30)
-                                setLightIntensity(5)
-                                setCascades(4)
-                                World.sceneRenderer.changeCSMSettings({
-                                    shadowMapSize: 4096,
-                                    maxFar: 30,
-                                    lightIntensity: 5,
-                                    fancyShadows,
-                                    cascades: 4,
-                                    antiAliasing,
-                                })
-                            }}
-                        >
-                            Reset Default
-                        </Button>
-                    </Box>
                 </>
             )}
             <Checkbox