add slider for ordinal settings

src/components/elements/EditModal.tsx

@@ -42,8 +42,8 @@ export function EditModal() {
   >(path || "");
 
   if (!path || !setting) return <></>;
-  if (!["mode", "multiple", "discrete", "action"].includes(setting.type))
-    return <></>;
+  if (!["mode", "multiple", "action"].includes(setting.type)) return <></>;
+  if (setting.tags?.includes("ordinal")) return <></>;
   const verify = setting.type === "action";
 
   const click = (val: string) => {

src/components/elements/NumberComponent.tsx

@@ -47,11 +47,13 @@ const NumberComponent: FC<SettingProps> = ({
   if (sel) {
     thumbStyle = {
       bg:
-        getCssColor({
-          hue: hsv?.hue || 0,
-          saturation: 100,
-          brightness: Math.max(hsv?.brightness || 30, 30),
-        }) || "brand.300",
+        (hsv?.hue !== undefined &&
+          getCssColor({
+            hue: hsv?.hue || 0,
+            saturation: 100,
+            brightness: Math.max(hsv?.brightness || 30, 30),
+          })) ||
+        "brand.300",
     };
   } else if (colorMode === "light") {
     thumbStyle = { bg: "gray.100" };

src/components/elements/SettingComponent.tsx

@@ -1,5 +1,6 @@
 import { ChevronDownIcon } from "@chakra-ui/icons";
 import {
+  Box,
   Button,
   Checkbox,
   Code,
@@ -11,6 +12,11 @@ import {
   MenuItemOption,
   MenuList,
   MenuOptionGroup,
+  Slider,
+  SliderFilledTrack,
+  SliderMark,
+  SliderThumb,
+  SliderTrack,
   Text,
   Tooltip,
   useColorMode,
@@ -69,45 +75,81 @@ const DiscreteComponent: FC<SettingProps> = ({
   path,
   section,
 }) => {
-  const { title, options } = set as DiscreteSetting;
-  const { state, setState } = useSettingState<number>(path);
-  const { ref, focus, setFocus } = useElementNav(section, path);
+  let title, options: any[], labels;
+  if (set.type === "discrete") {
+    ({ title, options } = set as DiscreteSetting);
+    labels = options;
+  } else {
+    let optionDict;
+    ({ title, options: optionDict } = set as MultipleSetting);
+    options = Object.keys(optionDict);
+    labels = Object.values(optionDict);
+  }
+  const { state, setState } = useSettingState<any>(path);
+  const { ref, sel, focus, setFocus } = useElementNav<HTMLInputElement>(
+    section,
+    path
+  );
   const { colorMode } = useColorMode();
+  let thumbStyle = {};
+  if (sel) {
+    thumbStyle = {
+      bg: "brand.300",
+    };
+  } else if (colorMode === "light") {
+    thumbStyle = { bg: "gray.100" };
+  }
 
   return (
     <Flex
       flexDirection="column"
       {...getFocusStyle(focus, colorMode)}
       marginTop="0.2rem"
+      paddingTop="0.4rem"
       marginBottom="0.2rem"
     >
-      <FormLabel htmlFor={path}>{title}</FormLabel>
-      <Menu>
-        <MenuButton
-          as={Button}
-          rightIcon={<ChevronDownIcon />}
+      <FormLabel htmlFor={path} paddingLeft={"0.5rem"}>
+        {title}
+      </FormLabel>
+      <Box padding={"0 2rem"}>
+        <Slider
+          min={0}
+          max={options.length - 1}
+          step={1}
+          value={state ? options.indexOf(state) : 0}
+          marginTop="0.4rem"
+          marginBottom="2.4rem"
           ref={ref}
+          focusThumbOnChange={false}
           onFocus={setFocus}
-          marginBottom="0.35rem"
+          onChange={(value) =>
+            value >= 0 && value < options.length && setState(options[value])
+          }
         >
-          {state}
-        </MenuButton>
-        <MenuList zIndex={100}>
-          <MenuOptionGroup type="radio" value={String(state)}>
-            {options.map((value) => {
-              return (
-                <MenuItemOption
-                  key={value}
-                  value={String(value)}
-                  onClick={() => setState(value)}
-                >
-                  {value}
-                </MenuItemOption>
-              );
-            })}
-          </MenuOptionGroup>
-        </MenuList>
-      </Menu>
+          {options.map((val, index) => (
+            <SliderMark
+              key={index}
+              value={index}
+              marginTop="1.2rem"
+              textAlign="center"
+              transform="translate(-50%, 0%)"
+              padding={"0rem 0.5rem"}
+              {...(state === val && {
+                background: "brand.300",
+                borderRadius: "10px",
+                fontWeight: "bold",
+                color: colorMode === "dark" ? "gray.800" : "white",
+              })}
+            >
+              {labels[index]}
+            </SliderMark>
+          ))}
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <SliderThumb {...thumbStyle}></SliderThumb>
+        </Slider>
+      </Box>
     </Flex>
   );
 };
@@ -268,6 +310,9 @@ const SettingComponent: FC<SettingProps> = (props) => {
     case "discrete":
       return <DiscreteComponent {...props} />;
     case "multiple":
+      if (props.settings.tags?.includes("ordinal")) {
+        return <DiscreteComponent {...props} />;
+      }
       return <MultipleComponent {...props} />;
     case "display":
       return <DisplayComponent {...props} />;

src/model/controller.tsx

@@ -1,4 +1,4 @@
-import { NumberSetting } from "./common";
+import { DiscreteSetting, MultipleSetting, NumberSetting } from "./common";
 import local from "./local";
 import hhdSlice, {
   selectAppType,
@@ -104,15 +104,14 @@ const goIn = (s: typeof store) => {
       }
       break;
     case "multiple":
-    case "discrete":
+      // case "discrete":
       if (isSel) {
         if (curr !== selChoice)
           s.dispatch(
             updateSettingValue({
               cred: { token, endpoint: url },
               path,
-              value:
-                setting.type === "discrete" ? Number(selChoice) : selChoice,
+              value: selChoice,
             })
           );
         s.dispatch(hhdSlice.actions.unselect());
@@ -128,32 +127,64 @@ const goIn = (s: typeof store) => {
 const goSideways = (s: typeof store, left: boolean) => {
   const state = s.getState();
   const { setting, path } = selectSelectedSetting(state);
-  if (!setting || !path || !["float", "int"].includes(setting.type)) return;
-  const numSet = setting as NumberSetting<number, "float" | "int">;
+  if (!setting || !path) return;
 
   const url = local.selectors.selectUrl(state);
   const token = local.selectors.selectToken(state);
+  if (["float", "int"].includes(setting.type)) {
+    const numSet = setting as NumberSetting<number, "float" | "int">;
 
-  if (!setting || !path || !url || !token) {
-    s.dispatch(hhdSlice.actions.select());
-    return;
-  }
-  const val = selectSettingState(path)(state) as unknown as number;
+    if (!setting || !path || !url || !token) {
+      s.dispatch(hhdSlice.actions.select());
+      return;
+    }
+    const val = selectSettingState(path)(state) as unknown as number;
 
-  let newVal = val;
-  if (left) {
-    newVal -= numSet.step || 1;
-  } else {
-    newVal += numSet.step || 1;
-  }
+    let newVal = val;
+    if (left) {
+      newVal -= numSet.step || 1;
+    } else {
+      newVal += numSet.step || 1;
+    }
+
+    s.dispatch(
+      updateSettingValue({
+        cred: { token, endpoint: url },
+        path,
+        value: newVal,
+      })
+    );
+  } else if (
+    setting.type === "discrete" ||
+    (setting.type === "multiple" && setting.tags?.includes("ordinal"))
+  ) {
+    const selChoice = selectSettingState(path)(state) as unknown as number;
+    if (!selChoice) return;
+    let options: any[];
+    if (setting.type === "discrete") {
+      options = (setting as DiscreteSetting).options;
+    } else {
+      options = Object.keys((setting as MultipleSetting).options);
+    }
 
-  s.dispatch(
-    updateSettingValue({
-      cred: { token, endpoint: url },
-      path,
-      value: newVal,
-    })
-  );
+    const idx = options.indexOf(selChoice);
+    if (idx === -1) return;
+
+    let newIdx = idx;
+    if (left && idx > 0) {
+      newIdx = idx - 1;
+    } else if (!left && idx < options.length - 1) {
+      newIdx = idx + 1;
+    }
+
+    s.dispatch(
+      updateSettingValue({
+        cred: { token, endpoint: url },
+        path,
+        value: options[newIdx],
+      })
+    );
+  }
 };
 
 export const handleGamepadCommands = (evs: string[]) => {