From d47b47cc5a7fa108d8eeac6d3ede0bc22b0d6fb3 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 15 Nov 2024 17:35:06 +0900
Subject: [PATCH] [UPdate] Config Page: Vr Tab. Add tracker settings.

---
 locales/en.json                               |  3 ++-
 .../setting_section/setting_box/vr/Vr.jsx     | 23 ++++++++++++++++++-
 src-ui/store.js                               |  2 ++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index 45b51634..bb3beaa4 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -72,7 +72,8 @@
         "opacity": "Opacity",
         "ui_scaling": "UI Scaling",
         "display_duration": "Display duration",
-        "fadeout_duration": "Fadeout duration"
+        "fadeout_duration": "Fadeout duration",
+        "tracker": "Tracker"
     },
     "config_page": {
         "config_title": "Settings",
diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
index 66a692ee..38cf53ac 100644
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
@@ -4,6 +4,7 @@ import { clsx } from "clsx";
 import styles from "./Vr.module.scss";
 import { Slider } from "../_components/";
 import {
+    RadioButtonContainer,
     SwitchBoxContainer,
 } from "../_templates/Templates";
 import {
@@ -25,7 +26,6 @@ export const Vr = () => {
 
     const { currentOverlayLargeLogSettings, setOverlayLargeLogSettings } = useOverlayLargeLogSettings();
     const { currentIsEnabledOverlayLargeLog, toggleIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
-
     return (
         <div className={styles.container}>
             <div className={styles.wrapper}>
@@ -37,6 +37,7 @@ export const Vr = () => {
                     />
                 {is_opened_small_settings ? (
                     <OverlaySettingsContainer
+                    id="overlay_settings_small"
                     current_overlay_settings={currentOverlaySmallLogSettings.data}
                     set_overlay_settings={setOverlaySmallLogSettings}
                     current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
@@ -44,6 +45,7 @@ export const Vr = () => {
                     />
                 ) : (
                     <OverlaySettingsContainer
+                    id="overlay_settings_large"
                     current_overlay_settings={currentOverlayLargeLogSettings.data}
                     set_overlay_settings={setOverlayLargeLogSettings}
                     current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
@@ -60,6 +62,7 @@ const OverlaySettingsContainer = ({
     set_overlay_settings,
     current_is_enabled_overlay,
     toggle_is_enabled_overlay,
+    id
 }) => {
 
     const { t } = useTranslation();
@@ -88,6 +91,12 @@ const OverlaySettingsContainer = ({
         setTimeoutId(newTimeoutId);
     };
 
+    const selectTrackerFunction = (value) => {
+        const new_data = { ...settings, tracker: value };
+        set_overlay_settings(new_data);
+    };
+
+
     return (
         <>
             <SwitchBoxContainer
@@ -110,6 +119,18 @@ const OverlaySettingsContainer = ({
                 )}
             </div>
             <OtherControls settings={settings} onchangeFunction={onchangeFunction} />
+            <RadioButtonContainer
+                label={t("overlay_settings.tracker")}
+                selectFunction={selectTrackerFunction}
+                name={id}
+                options={[
+                    { id: "HMD", label: "HMD" },
+                    { id: "LeftHand", label: "LeftHand" },
+                    { id: "RightHand", label: "RightHand" },
+                ]}
+                checked_variable={{data: settings.tracker}}
+                column={true}
+            />
         </>
     );
 };
diff --git a/src-ui/store.js b/src-ui/store.js
index e7d90f70..7b4c64a4 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -216,6 +216,7 @@ export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_Ove
     z_rotation: 0.0,
     display_duration: 5,
     fadeout_duration: 2,
+    tracker: "HMD",
 }, "OverlaySmallLogSettings");
 export const { atomInstance: Atom_IsEnabledOverlaySmallLog, useHook: useStore_IsEnabledOverlaySmallLog } = createAtomWithHook(false, "IsEnabledOverlaySmallLog");
 export const { atomInstance: Atom_OverlayLargeLogSettings, useHook: useStore_OverlayLargeLogSettings } = createAtomWithHook({
@@ -227,6 +228,7 @@ export const { atomInstance: Atom_OverlayLargeLogSettings, useHook: useStore_Ove
     z_rotation: 0.0,
     display_duration: 5,
     fadeout_duration: 2,
+    tracker: "HMD",
 }, "OverlayLargeLogSettings");
 export const { atomInstance: Atom_IsEnabledOverlayLargeLog, useHook: useStore_IsEnabledOverlayLargeLog } = createAtomWithHook(false, "IsEnabledOverlayLargeLog");