[feat] read video config is ok

src/components/cstb/VideoSetting.tsx

@@ -1,15 +1,17 @@
 import { CloseSmall, Down, Edit, Plus, SettingConfig, Up } from "@icon-park/react"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Card, CardBody, CardHeader, CardIcon, CardTool } from "../window/Card"
 import { ToolButton } from "../window/ToolButton"
 import { addToast, NumberInput, Tab, Tabs, Tooltip } from "@heroui/react"
 import { motion } from "framer-motion"
 import { useToolStore } from "@/store/tool"
+import { useSteamStore } from "@/store/steam"
 
 const VideoSetting = () => {
   const [hide, setHide] = useState(false)
   const [edit, setEdit] = useState(false)
   const tool = useToolStore()
+  const steam = useSteamStore()
   // const [launchOpt, setLaunchOpt] = useState(tool.state.VideoSettings[tool.state.launchIndex] || "")
 
   // useEffect(() => {
@@ -18,69 +20,173 @@ const VideoSetting = () => {
 
   // 设置对应关系
   // TODO Value通过实际数值映射
+
   const videoSettings = [
-    { type: "", title: "全屏", value: "全屏", options: ["窗口", "全屏"] },
-    { type: "", title: "垂直同步", value: "关闭", options: ["关闭", "开启"] },
-    { type: "", title: "低延迟模式", value: "关闭", options: ["关闭", "开启"] },
-    { type: "", title: "增强角色对比度", value: "禁用", options: ["禁用", "启用"] },
-    { type: "", title: "CMAA2抗锯齿", value: "关闭", options: ["关闭", "开启"] },
     {
-      type: "",
+      type: "fullscreen",
+      title: "全屏",
+      value: tool.state.videoSetting.fullscreen === "1" ? "全屏" : "窗口",
+      options: ["窗口", "全屏"],
+    },
+    {
+      type: "mat_vsync",
+      title: "垂直同步",
+      value: tool.state.videoSetting.mat_vsync === "1" ? "开启" : "关闭",
+      options: ["关闭", "开启"],
+    },
+    {
+      type: "r_low_latency",
+      title: "低延迟模式",
+      value: tool.state.videoSetting.r_low_latency === "1" ? "开启" : "关闭",
+      options: ["关闭", "开启"],
+    },
+    {
+      type: "r_csgo_cmaa_enable",
+      title: "增强角色对比度",
+      value: tool.state.videoSetting.r_csgo_cmaa_enable === "1" ? "启用" : "禁用",
+      options: ["禁用", "启用"],
+    },
+    {
+      type: "msaa_samples",
       title: "多重采样抗锯齿",
-      value: "2X MSAA",
+      value:
+        {
+          0: "无",
+          2: "2X MSAA",
+          4: "4X MSAA",
+          8: "8X MSAA",
+        }[parseInt(tool.state.videoSetting.msaa_samples)] || "无",
       options: ["无", "2X MSAA", "4X MSAA", "8X MSAA"],
     },
-    { type: "", title: "全局阴影效果", value: "低", options: ["低", "中", "高", "非常高"] },
-    { type: "", title: "动态阴影", value: "全部", options: ["仅限日光", "全部"] },
-    { type: "", title: "模型/贴图细节", value: "中", options: ["低", "中", "高"] },
     {
-      type: "",
+      type: "videocfg_shadow_quality",
+      title: "全局阴影效果",
+      value:
+        ["低", "中", "高", "非常高"][parseInt(tool.state.videoSetting.videocfg_shadow_quality)] ||
+        "低",
+      options: ["低", "中", "高", "非常高"],
+    },
+    {
+      type: "videocfg_dynamic_shadows",
+      title: "动态阴影",
+      value:
+        ["仅限日光", "全部"][parseInt(tool.state.videoSetting.videocfg_dynamic_shadows)] ||
+        "仅限日光",
+      options: ["仅限日光", "全部"],
+    },
+    {
+      type: "videocfg_texture_detail",
+      title: "模型/贴图细节",
+      value: ["低", "中", "高"][parseInt(tool.state.videoSetting.videocfg_texture_detail)] || "低",
+      options: ["低", "中", "高"],
+    },
+    {
+      type: "r_texturefilteringquality",
       title: "贴图过滤模式",
-      value: "异向 4X",
+      value:
+        ["双线性", "三线性", "异向 2X", "异向 4X", "异向 8X", "异向 16X"][
+          parseInt(tool.state.videoSetting.r_texturefilteringquality)
+        ] || "双线性",
       options: ["双线性", "三线性", "异向 2X", "异向 4X", "异向 8X", "异向 16X"],
     },
-    { type: "", title: "光影细节", value: "低", options: ["低", "高"] },
-    { type: "", title: "粒子细节", value: "低", options: ["低", "中", "高", "非常高"] },
-    { type: "", title: "环境光遮蔽", value: "已禁用", options: ["已禁用", "中", "高"] },
-    { type: "", title: "高动态范围", value: "性能", options: ["性能", "品质"] },
     {
-      type: "",
+      type: "videocfg_hdr_detail",
+      title: "光影细节",
+      value: ["低", "高"][parseInt(tool.state.videoSetting.shaderquality)] || "低",
+      options: ["低", "高"],
+    },
+    {
+      type: "videocfg_particle_detail",
+      title: "粒子细节",
+      value:
+        ["低", "中", "高", "非常高"][parseInt(tool.state.videoSetting.videocfg_particle_detail)] ||
+        "低",
+      options: ["低", "中", "高", "非常高"],
+    },
+    {
+      type: "videocfg_ao_detail",
+      title: "环境光遮蔽",
+      value:
+        ["已禁用", "中", "高"][parseInt(tool.state.videoSetting.videocfg_ao_detail)] || "已禁用",
+      options: ["已禁用", "中", "高"],
+    },
+    {
+      type: "videocfg_fsr_detail",
       title: "Fidelity FX 超级分辨率",
-      value: "已禁用",
+      value:
+        ["已禁用", "超高品质", "品质", "均衡", "性能"][
+          parseInt(tool.state.videoSetting.videocfg_fsr_detail)
+        ] || "性能",
       options: ["性能", "均衡", "品质", "超高品质", "已禁用"],
     },
   ]
+  // const videoSettings = [
+  //   { type: "", title: "全屏", value: "全屏", options: ["窗口", "全屏"] },
+  //   { type: "", title: "垂直同步", value: "关闭", options: ["关闭", "开启"] },
+  //   { type: "", title: "低延迟模式", value: "关闭", options: ["关闭", "开启"] },
+  //   { type: "", title: "增强角色对比度", value: "禁用", options: ["禁用", "启用"] },
+  //   { type: "", title: "CMAA2抗锯齿", value: "关闭", options: ["关闭", "开启"] },
+  //   {
+  //     type: "",
+  //     title: "多重采样抗锯齿",
+  //     value: "2X MSAA",
+  //     options: ["无", "2X MSAA", "4X MSAA", "8X MSAA"],
+  //   },
+  //   { type: "", title: "全局阴影效果", value: "低", options: ["低", "中", "高", "非常高"] },
+  //   { type: "", title: "动态阴影", value: "全部", options: ["仅限日光", "全部"] },
+  //   { type: "", title: "模型/贴图细节", value: "中", options: ["低", "中", "高"] },
+  //   {
+  //     type: "",
+  //     title: "贴图过滤模式",
+  //     value: "异向 4X",
+  //     options: ["双线性", "三线性", "异向 2X", "异向 4X", "异向 8X", "异向 16X"],
+  //   },
+  //   { type: "", title: "光影细节", value: "低", options: ["低", "高"] },
+  //   { type: "", title: "粒子细节", value: "低", options: ["低", "中", "高", "非常高"] },
+  //   { type: "", title: "环境光遮蔽", value: "已禁用", options: ["已禁用", "中", "高"] },
+  //   { type: "", title: "高动态范围", value: "性能", options: ["性能", "品质"] },
+  //   {
+  //     type: "",
+  //     title: "Fidelity FX 超级分辨率",
+  //     value: "已禁用",
+  //     options: ["性能", "均衡", "品质", "超高品质", "已禁用"],
+  //   },
+  // ]
+
+  // useEffect(() => {
+  //   void tool.getVideoConfig()
+  // })
 
   return (
-    <Tooltip content="功能测试中，尚未实装" showArrow={true} delay={300}>
-      <Card>
-        <CardHeader>
-          <CardIcon>
-            <SettingConfig /> 视频设置
-          </CardIcon>
-          <CardTool>
-            {/* {tool.state.VideoSettings.map((option, index) => (
+    <Card>
+      <CardHeader>
+        <CardIcon>
+          <SettingConfig /> 视频设置
+        </CardIcon>
+        <CardTool>
+          {/* {tool.state.VideoSettings.map((option, index) => (
             <ToolButton key={index} onClick={() => tool.setLaunchIndex(index)}>
               {index + 1}
             </ToolButton>
           ))} */}
-            {edit && (
-              <>
-                <ToolButton>低</ToolButton>
-                <ToolButton>中</ToolButton>
-                <ToolButton>高</ToolButton>
-                <ToolButton>非常高</ToolButton>
-                <ToolButton>推荐</ToolButton>
-                <ToolButton
-                  onClick={() => {
-                    addToast({ title: "测试中 功能完成后可应用设置到游戏" })
-                  }}
-                >
-                  <Plus />
-                  应用
-                </ToolButton>
-              </>
-            )}
+          {edit && (
+            <>
+              <ToolButton>低</ToolButton>
+              <ToolButton>中</ToolButton>
+              <ToolButton>高</ToolButton>
+              <ToolButton>非常高</ToolButton>
+              <ToolButton>推荐</ToolButton>
+              <ToolButton
+                onClick={() => {
+                  addToast({ title: "测试中 功能完成后可应用设置到游戏" })
+                }}
+              >
+                <Plus />
+                应用
+              </ToolButton>
+            </>
+          )}
+          <Tooltip content="功能测试中，尚未实装" showArrow={true} delay={300}>
             <ToolButton onClick={() => setEdit(!edit)}>
               {edit ? (
                 <>
@@ -94,85 +200,93 @@ const VideoSetting = () => {
                 </>
               )}
             </ToolButton>
-            <ToolButton onClick={() => setHide(!hide)}>
-              {hide ? (
-                <>
-                  <Up />
-                  显示
-                </>
-              ) : (
-                <>
-                  <Down />
-                  隐藏
-                </>
-              )}
-            </ToolButton>
-          </CardTool>
-        </CardHeader>
-        {!hide && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
+          </Tooltip>
+
+          <ToolButton
+            onClick={() =>
+              void tool.getVideoConfig(steam.state.steamDir, steam.currentUser()?.steam_id32 || 0)
+            }
           >
-            <CardBody>
-              <ul className="flex flex-wrap gap-3 mt-1">
-                <li className="flex flex-col gap-1.5">
-                  <span className="ml-2">分辨率</span>
-                  <span className="flex gap-3">
-                    <NumberInput
-                      aria-label="width"
-                      value={tool.state.videoSetting.width}
-                      onValueChange={(value) => {
-                        tool.setVideoSetting({
-                          ...tool.state.videoSetting,
-                          width: value,
-                        })
-                      }}
-                      radius="full"
-                      step={10}
-                      className="max-w-28"
-                      classNames={{ inputWrapper: "h-10" }}
-                    />
-                    <NumberInput
-                      aria-label="height"
-                      value={tool.state.videoSetting.height}
-                      onValueChange={(value) => {
-                        tool.setVideoSetting({
-                          ...tool.state.videoSetting,
-                          height: value,
-                        })
-                      }}
-                      radius="full"
-                      step={10}
-                      className="max-w-28"
-                      classNames={{ inputWrapper: "h-10" }}
-                    />
-                  </span>
+            读取
+          </ToolButton>
+          <ToolButton onClick={() => setHide(!hide)}>
+            {hide ? (
+              <>
+                <Up />
+                显示
+              </>
+            ) : (
+              <>
+                <Down />
+                隐藏
+              </>
+            )}
+          </ToolButton>
+        </CardTool>
+      </CardHeader>
+      {!hide && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          <CardBody>
+            <ul className="flex flex-wrap gap-3 mt-1">
+              <li className="flex flex-col gap-1.5">
+                <span className="ml-2">分辨率</span>
+                <span className="flex gap-3">
+                  <NumberInput
+                    aria-label="width"
+                    value={parseInt(tool.state.videoSetting.defaultres, 10)}
+                    onValueChange={(value) => {
+                      tool.setVideoSetting({
+                        ...tool.state.videoSetting,
+                        defaultres: value.toString(),
+                      })
+                    }}
+                    radius="full"
+                    step={10}
+                    className="max-w-28"
+                    classNames={{ inputWrapper: "h-10" }}
+                  />
+                  <NumberInput
+                    aria-label="height"
+                    value={parseInt(tool.state.videoSetting.defaultresheight, 10)}
+                    onValueChange={(value) => {
+                      tool.setVideoSetting({
+                        ...tool.state.videoSetting,
+                        defaultresheight: value.toString(),
+                      })
+                    }}
+                    radius="full"
+                    step={10}
+                    className="max-w-28"
+                    classNames={{ inputWrapper: "h-10" }}
+                  />
+                </span>
+              </li>
+              {videoSettings.map((vid, index) => (
+                <li className="flex flex-col gap-1.5" key={index}>
+                  <span className="ml-2">{vid.title}</span>
+                  <Tabs
+                    selectedKey={vid.value}
+                    size="md"
+                    radius="full"
+                    className="min-w-36"
+                    fullWidth
+                  >
+                    {vid.options.map((opt, _) => (
+                      <Tab key={opt} title={opt} />
+                    ))}
+                  </Tabs>
                 </li>
-                {videoSettings.map((vid, index) => (
-                  <li className="flex flex-col gap-1.5" key={index}>
-                    <span className="ml-2">{vid.title}</span>
-                    <Tabs
-                      selectedKey={vid.value}
-                      size="md"
-                      radius="full"
-                      className="min-w-36"
-                      fullWidth
-                    >
-                      {vid.options.map((opt, _) => (
-                        <Tab key={opt} title={opt} />
-                      ))}
-                    </Tabs>
-                  </li>
-                ))}
-              </ul>
-            </CardBody>
-          </motion.div>
-        )}
-      </Card>
-    </Tooltip>
+              ))}
+            </ul>
+          </CardBody>
+        </motion.div>
+      )}
+    </Card>
   )
 }