got it hooked up to new interactive features, update settings

Author: mastercoms

src/components/settings/controls/SettingsButton.tsx

@@ -6,4 +6,4 @@ export function SettingsButton({ setting }) {
             </button>
         </div>
     )
-}
+}

src/components/settings/controls/SettingsCheck.tsx

@@ -1,10 +1,45 @@
+import { runRpc } from "@/util/ws";
+import { useEffect, useState } from "react";
+
 export function SettingsCheck({ setting }) {
+  const [value, setValue] = useState(false);
+  const [floatValue, setFloatValue] = useState(0.0);
+
+  useEffect(() => {
+    runRpc("getcvar", setting.cvar).then((response) => {
+      if (response !== null && response.length > 0) {
+        if (setting.mode === "negate") {
+          const floatVal = parseFloat(response);
+          setValue(floatVal < 0.0);
+          setFloatValue(floatVal);
+        } else {
+          setValue(response !== "0");
+        }
+      }
+    });
+  }, []);
+
+  const callback = (val: boolean) => {
+    if (setting.mode === "negate") {
+      const f = val ? -Math.abs(floatValue) : Math.abs(floatValue);
+      runRpc("setcvar", `${setting.cvar} ${f}`);
+    } else {
+      const b = val ? "1" : "0";
+      runRpc("setcvar", `${setting.cvar} ${b}`);
+    }
+    setValue(val);
+  };
+
   return (
     <div className="flex gap-3">
       <div className="flex h-6 shrink-0 items-center">
         <div className="group grid size-8 grid-cols-1">
           <input
             id={setting.cvar}
+            checked={value}
+            onChange={(ev) => {
+              callback(ev.target.checked);
+            }}
             type="checkbox"
             className="col-start-1 row-start-1 appearance-none border border-gray-300 bg-white/5 disabled:bg-white/10 disabled:checked:bg-white/10 checked:border-stone-400 checked:bg-stone-400 indeterminate:border-stone-400 indeterminate:bg-stone-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-400 disabled:border-gray-300 forced-colors:appearance-auto"
           />

src/components/settings/controls/SettingsSelect.tsx

@@ -1,14 +1,34 @@
+import { runRpc } from "@/util/ws";
+import { useEffect, useState } from "react";
+
 export function SettingsSelect({ setting }) {
-    return (
-        <div>
-            <label className="block mb-2 text-white tf2-light text-xl">{setting.label}</label>
-            <select className="px-4 py-2 mb-2 border text-white">
-                {setting.options.map((option) => (
-                    <option key={option.value} value={option.value}>
-                        {option.label}
-                    </option>
-                ))}
-            </select>
-        </div>
-    )
-}
+  const [value, setValue] = useState(0);
+
+  useEffect(() => {
+    runRpc("getcvar", setting.cvar).then((response) => {
+      if (response !== null && response.length > 0) {
+        setValue(parseFloat(response));
+      }
+    });
+  }, []);
+
+  const callback = (val: string) => {
+    runRpc("setcvar", `${setting.cvar} ${val}`);
+    setValue(parseInt(val));
+  };
+
+  return (
+    <div>
+      <label className="block mb-2 text-white tf2-light text-xl">
+        {setting.label}
+      </label>
+      <select className="px-4 py-2 mb-2 border text-white" value={value} onChange={(ev) => callback(ev.target.value)}>
+        {setting.options.map((option) => (
+          <option key={option.value} value={option.value} selected={option.value === value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

src/components/settings/controls/SettingsSlider.tsx

@@ -1,4 +1,22 @@
+import { runRpc } from "@/util/ws";
+import { useCallback, useEffect, useState } from "react";
+
 export function SettingsSlider({ setting }) {
+  const [value, setValue] = useState(0);
+
+  useEffect(() => {
+    runRpc("getcvar", setting.cvar).then((response) => {
+      if (response !== null && response.length > 0) {
+        setValue(parseFloat(response));
+      }
+    });
+  }, []);
+
+  const callback = (val: string) => {
+    runRpc("setcvar", `${setting.cvar} ${val}`);
+    setValue(parseFloat(val));
+  };
+
   return (
     <div>
       <label className="mb-2 text-white tf2-light text-xl">
@@ -8,13 +26,24 @@ export function SettingsSlider({ setting }) {
         <input
           className="me-4 flex-1"
           type="range"
+          value={value}
+          onChange={(ev) => {
+            callback(ev.target.value)
+          }}
           min={setting.min ?? 0}
           max={setting.max ?? 100}
           step={setting.step ?? 1}
         />
         <input
-          type="number"
           className="mb-2 p-2 text-white bg-stone-800 border border-gray-300 w-20"
+          type="number"
+          value={value}
+          onChange={(ev) => {
+            callback(ev.target.value)
+          }}
+          min={setting.min ?? 0}
+          max={setting.max ?? 100}
+          step={setting.step ?? 1}
         />
       </div>
     </div>