diff options
| -rw-r--r-- | src/components/FpsMultiplierControl.tsx | 81 |
1 files changed, 25 insertions, 56 deletions
diff --git a/src/components/FpsMultiplierControl.tsx b/src/components/FpsMultiplierControl.tsx index 2c50be1..523e8b3 100644 --- a/src/components/FpsMultiplierControl.tsx +++ b/src/components/FpsMultiplierControl.tsx @@ -1,4 +1,4 @@ -import { DialogButton, Focusable, PanelSectionRow } from "@decky/ui"; +import { Focusable, PanelSectionRow, SliderField } from "@decky/ui"; import { useEffect, useRef } from "react"; import { ConfigurationData } from "../config/configSchema"; import { MULTIPLIER } from "../config/generatedConfigSchema"; @@ -31,63 +31,32 @@ export function FpsMultiplierControl({ return () => cancelAnimationFrame(frame); }, [autoFocus, onAutoFocus]); + const multiplierLabel = config.multiplier === 1 + ? t("MULTIPLIER_OFF", "Off") + : `${config.multiplier}x`; + return ( <PanelSectionRow> - <Focusable - ref={focusableRef} - noFocusRing - style={{ - marginTop: "6px", - marginBottom: "6px", - display: "flex", - justifyContent: "center", - alignItems: "center", - }} - flow-children="horizontal" - > - <DialogButton - style={{ - marginLeft: "0px", - height: "30px", - display: "flex", - alignItems: "center", - justifyContent: "center", - padding: "5px 0px 0px 0px", - minWidth: "40px", - }} - onClick={() => void onConfigChange(MULTIPLIER, Math.max(1, config.multiplier - 1))} - disabled={config.multiplier <= 1} - > - − - </DialogButton> - <div - style={{ - marginLeft: "20px", - marginRight: "20px", - fontSize: "16px", - fontWeight: "bold", - color: config.multiplier > 4 ? "red" : "white", - minWidth: "60px", - textAlign: "center", - }} - > - {config.multiplier < 2 ? t("MULTIPLIER_OFF", "OFF") : `${config.multiplier}X`} - </div> - <DialogButton - style={{ - marginLeft: "0px", - height: "30px", - display: "flex", - alignItems: "center", - justifyContent: "center", - padding: "5px 0px 0px 0px", - minWidth: "40px", - }} - onClick={() => void onConfigChange(MULTIPLIER, Math.min(4, config.multiplier + 1))} - disabled={config.multiplier >= 4} - > - + - </DialogButton> + <Focusable ref={focusableRef} noFocusRing> + <SliderField + label={`FPS multiplier · ${multiplierLabel}`} + value={config.multiplier} + min={1} + max={6} + step={1} + notchCount={6} + notchLabels={[ + { notchIndex: 0, label: "OFF", value: 1 }, + { notchIndex: 1, label: "2X", value: 2 }, + { notchIndex: 2, label: "3X", value: 3 }, + { notchIndex: 3, label: "4X", value: 4 }, + { notchIndex: 4, label: "5X", value: 5 }, + { notchIndex: 5, label: "6X", value: 6 }, + ]} + notchTicksVisible={true} + showValue={false} + onChange={(value) => void onConfigChange(MULTIPLIER, value)} + /> </Focusable> </PanelSectionRow> ); |