From 6950347ffb09cbad2bd389f2aa3ef72616aab04c Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 20 Oct 2024 09:58:16 +0900
Subject: [PATCH] [Update/Memo] Config Page: Add VR Tab. Overlay settings.

---
 .../setting_box/SettingBox.jsx                |   3 +
 .../setting_box/_components/slider/Slider.jsx |  52 +++---
 .../_components/slider/Slider.module.scss     |  24 ++-
 .../setting_section/setting_box/vr/Vr.jsx     | 149 ++++++++++++++++++
 .../setting_box/vr/Vr.module.scss             |  79 ++++++++++
 5 files changed, 278 insertions(+), 29 deletions(-)
 create mode 100644 src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
 create mode 100644 src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss

diff --git a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
index d78ec87e..adec9373 100644
--- a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
@@ -5,6 +5,7 @@ import { Appearance } from "./appearance/Appearance";
 import { Transcription } from "./transcription/Transcription";
 import { Others } from "./others/Others";
 import { AdvancedSettings } from "./advanced_settings/AdvancedSettings";
+import { Vr } from "./vr/Vr";
 // import { AboutVrct } from "./about_vrct/AboutVrct";
 
 export const SettingBox = () => {
@@ -18,6 +19,8 @@ export const SettingBox = () => {
             return <Transcription />;
         case "others":
             return <Others />;
+        case "vr":
+            return <Vr />;
         case "advanced_settings":
             return <AdvancedSettings />;
         // case "about_vrct":
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
index 280ec3f9..e0da05a6 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
@@ -20,7 +20,6 @@ export const Slider = (props) => {
         <div className={styles.container}>
             <MUI_Slider
                 className={styles.range_slider}
-                defaultValue={50}
                 aria-label="Default"
                 valueLabelDisplay="auto"
                 value={props.variable}
@@ -28,38 +27,39 @@ export const Slider = (props) => {
                 min={Number(props.min)}
                 max={Number(props.max)}
                 onChange={(_e, value) => props.onchangeFunction(value)}
-                onChangeCommitted={(_e, value) => props.onchangeCommittedFunction(value)}
+                onChangeCommitted={(_e, value) => props.onchangeCommittedFunction ? props.onchangeCommittedFunction(value) : null}
                 marks={props.marks}
                 track={props.track}
+                orientation={props.orientation}
                 sx={{
                     color: baseColor,
-                        "& .MuiSlider-thumb": {
-                            backgroundColor: activeColor,
-                            "&:hover, &.Mui-focusVisible, &.Mui-active": {
-                                boxShadow: "0 0 0 0.8rem" + activeColor + "44",
-                            },
-                            "& .MuiSlider-valueLabel": {
-                                fontSize: "1.4rem",
-                                backgroundColor: toolTipColor,
-                                padding: "0.6rem 1rem",
-                                lineHeight: "1.15",
-                                top: "-1.4rem",
-                                "&::before": {
-                                    left: "30%",
-                                    width: "1rem",
-                                    height: "1rem",
-                                    clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
-                                }
-                            }
+                    "& .MuiSlider-thumb": {
+                        backgroundColor: activeColor,
+                        "&:hover, &.Mui-focusVisible, &.Mui-active": {
+                            boxShadow: `0 0 0 0.8rem ${activeColor}44`,
                         },
-                        "& .MuiSlider-markLabel": {
+                        "& .MuiSlider-valueLabel": {
                             fontSize: "1.4rem",
-                            color: "white"
+                            backgroundColor: toolTipColor,
+                            padding: "0.6rem 1rem",
+                            lineHeight: "1.15",
+                            top: "-1.4rem",
+                            "&::before": {
+                                left: "30%",
+                                width: "1rem",
+                                height: "1rem",
+                                clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
+                            },
                         },
-                        "& .MuiSlider-markLabelActive": {
-                            color: activeColor,
-                        }
-                    }}
+                    },
+                    "& .MuiSlider-markLabel": {
+                        fontSize: "1.4rem",
+                        color: "white",
+                    },
+                    "& .MuiSlider-markLabelActive": {
+                        color: activeColor,
+                    },
+                }}
             />
         </div>
     );
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
index 873029b1..907f7529 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
@@ -1,12 +1,30 @@
 .container {
     display: flex;
     flex-direction: column;
-    align-items: end;
+    align-items: center; // 中央に揃え
     justify-content: center;
     width: 100%;
     padding-left: 4rem;
 }
 
 .range_slider {
-    // max-width: 60rem;
-}
\ No newline at end of file
+    // スライダーの幅を調整（必要に応じて調整）
+    height: 200px; // 縦スライダーの高さ
+    padding: 10px 0; // スライダーの上下のパディング
+
+    & .MuiSlider-thumb {
+        // スライダーのつまみのサイズを調整
+        height: 24px;
+        width: 24px;
+        margin-top: -12px; // つまみが中心に来るように調整
+    }
+
+    & .MuiSlider-track {
+        height: 2px; // トラックの高さを調整
+    }
+
+    & .MuiSlider-vertical {
+        // 縦スライダー用のスタイル
+        height: 100%; // コンテナの高さにフィット
+    }
+}
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
new file mode 100644
index 00000000..b78be1be
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
@@ -0,0 +1,149 @@
+import React, { useState } from "react";
+import styles from "./Vr.module.scss";
+import { Slider } from "../_components/";
+
+export const Vr = () => {
+    const [position, setPosition] = useState({ x: 0, y: 0, z: 0 });
+    const [rotation, setRotation] = useState({ rotate_x: 0, rotate_y: 0, rotate_z: 0 });
+    const [opacity, setOpacity] = useState(1);
+    const [ui_scaling, setUiScaling] = useState(100);
+
+    const handlePositionChange = (axis, value) => {
+        setPosition((prev) => ({ ...prev, [axis]: value }));
+    };
+
+    const handleRotationChange = (axis, value) => {
+        setRotation((prev) => ({ ...prev, [axis]: value }));
+    };
+
+    const handleOpacityChange = (value) => {
+        setOpacity(value / 100);
+    };
+
+    const handleUiScalingChange = (value) => {
+        setUiScaling(value);
+    };
+
+
+    const scale = position.z >= 0
+        ? (1 - position.z / 200) * (ui_scaling / 100)
+        : (1 + Math.abs(position.z) / 200) * (ui_scaling / 100);
+
+
+    const x_factor = Math.min(Math.abs(position.x) / 100, 1);
+    const y_factor = Math.min(Math.abs(position.y) / 100, 1);
+
+    const translate_x = position.x + (position.z * x_factor * (position.x >= 0 ? -1 : 1));
+    const translate_y = -1 * (position.y + (position.z * y_factor * (position.y >= 0 ? -1 : 1)));
+
+
+    return (
+        <div className={styles.app}>
+            <div className={styles.canvas_container}>
+                <div className={styles.z_position}>
+                    <label>Z Position</label>
+                    <Slider
+                        variable={position.z}
+                        step={1}
+                        min={-100}
+                        max={100}
+                        onchangeFunction={(value) => handlePositionChange("z", value)}
+                        orientation="vertical"
+                    />
+                </div>
+                <div className={styles.canvas}>
+                    <div
+                        className={styles.chat_box}
+                        style={{
+                            transform: `
+                                translate(${translate_x}px, ${translate_y}px)
+                                scale(${scale})
+                                rotateX(${rotation.rotate_x}deg)
+                                rotateY(${rotation.rotate_y}deg)
+                                rotateZ(${rotation.rotate_z}deg)
+                            `,
+                            opacity: opacity
+                        }}
+                    >
+                        <p className={styles.chat_text}>
+                            実際の表示とは大きく違います。これはただのイメージ図です。
+                        </p>
+                    </div>
+                </div>
+                <div className={styles.y_position}>
+                    <label>Y Position</label>
+                    <Slider
+                        variable={position.y}
+                        step={1}
+                        min={-100}
+                        max={100}
+                        onchangeFunction={(value) => handlePositionChange("y", value)}
+                        orientation="vertical"
+                    />
+                </div>
+                <div className={styles.x_position}>
+                    <label>X Position</label>
+                    <Slider
+                        variable={position.x}
+                        step={1}
+                        min={-100}
+                        max={100}
+                        onchangeFunction={(value) => handlePositionChange("x", value)}
+                    />
+                </div>
+            </div>
+            <div className={styles.other_controls}>
+                <div className={styles.x_rotation}>
+                    <label>X Rotation</label>
+                    <Slider
+                        variable={rotation.rotate_x}
+                        step={1}
+                        min={-180}
+                        max={180}
+                        onchangeFunction={(value) => handleRotationChange("rotate_x", value)}
+                    />
+                </div>
+                <div className={styles.y_rotation}>
+                    <label>Y Rotation</label>
+                    <Slider
+                        variable={rotation.rotate_y}
+                        step={1}
+                        min={-180}
+                        max={180}
+                        onchangeFunction={(value) => handleRotationChange("rotate_y", value)}
+                    />
+                </div>
+                <div className={styles.z_rotation}>
+                    <label>Z Rotation</label>
+                    <Slider
+                        variable={rotation.rotate_z}
+                        step={1}
+                        min={-180}
+                        max={180}
+                        onchangeFunction={(value) => handleRotationChange("rotate_z", value)}
+                    />
+                </div>
+                <div className={styles.opacity}>
+                    <label>Opacity</label>
+                    <Slider
+                        variable={opacity * 100}
+                        step={1}
+                        min={0}
+                        max={100}
+                        onchangeFunction={handleOpacityChange}
+                    />
+                </div>
+                <div className={styles.ui_scaling}>
+                    <label>UI Scaling</label>
+                    <Slider
+                        variable={ui_scaling}
+                        step={1}
+                        min={40}
+                        max={200}
+                        onchangeFunction={handleUiScalingChange}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
new file mode 100644
index 00000000..8c2f3bc4
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
@@ -0,0 +1,79 @@
+.app {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: 4rem;
+}
+
+.canvas_container {
+    display: flex;
+    position: relative;
+}
+
+.canvas {
+    width: 40rem;
+    height: 30rem;
+    border: 0.1rem solid #fff;
+    background-color: var(--dark_800_color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.chat_box {
+    max-width: 20rem;
+    background-color: #33363a;
+    border-radius: 0.4rem;
+    padding: 1.2rem;
+    position: absolute;
+    transform-origin: center;
+    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
+}
+
+.chat_text {
+    font-size: 1.2rem;
+}
+
+.x_position {
+    position: absolute;
+    bottom: -6rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+}
+
+.y_position {
+    position: absolute;
+    right: -8rem;
+    top: 50%;
+    transform: translateY(-50%);
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    height: 100%;
+}
+
+.z_position {
+    position: absolute;
+    left: -8rem;
+    top: 50%;
+    transform: translateY(-50%);
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    height: 100%;
+}
+
+.other_controls {
+    margin-top: 10rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+}
+
+.x_rotation, .y_rotation, .z_rotation, .opacity, .ui_scaling {
+    width: 100%;
+}
\ No newline at end of file