diff options
| -rw-r--r-- | src/components/FpsMultiplierControl.tsx | 72 |
1 files changed, 56 insertions, 16 deletions
diff --git a/src/components/FpsMultiplierControl.tsx b/src/components/FpsMultiplierControl.tsx index 1fd0e78..2c50be1 100644 --- a/src/components/FpsMultiplierControl.tsx +++ b/src/components/FpsMultiplierControl.tsx @@ -1,4 +1,4 @@ -import { Focusable, PanelSectionRow, SliderField } from "@decky/ui"; +import { DialogButton, Focusable, PanelSectionRow } from "@decky/ui"; import { useEffect, useRef } from "react"; import { ConfigurationData } from "../config/configSchema"; import { MULTIPLIER } from "../config/generatedConfigSchema"; @@ -31,23 +31,63 @@ 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> - <SliderField - label={`FPS multiplier · ${multiplierLabel}`} - value={config.multiplier} - min={1} - max={4} - step={1} - notchCount={4} - showValue={false} - onChange={(value) => void onConfigChange(MULTIPLIER, value)} - /> + <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> </PanelSectionRow> ); |