every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Config Page: VR Tab. Add button that send sample texts to Overlay. per 1 sec for now.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-18 16:31:10 +09:00
parent 8629d9aa4a
commit 8cc66ca0cc
8 changed files with 150 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
View File

@@ -20,6 +20,7 @@ import {
useIsEnabledOverlayLargeLog,
useOverlayLargeLogSettings,
useOverlayShowOnlyTranslatedMessages,
useSendTextToOverlay,
} from "@logics_configs";
import RedoSvg from "@images/redo.svg?react";
@@ -50,26 +51,26 @@ export const Vr = () => {
is_selected={is_opened_small_settings}
label_1={t("config_page.vr.single_line")}
label_2={t("config_page.vr.multi_lines")}
/>
/>
{is_opened_small_settings ? (
<OverlaySettingsContainer
id="overlay_settings_small"
ui_configs={ui_configs.overlay_small_log}
default_ui_configs={ui_configs.overlay_small_log_default_settings}
current_overlay_settings={currentOverlaySmallLogSettings.data}
set_overlay_settings={setOverlaySmallLogSettings}
current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
id="overlay_settings_small"
ui_configs={ui_configs.overlay_small_log}
default_ui_configs={ui_configs.overlay_small_log_default_settings}
current_overlay_settings={currentOverlaySmallLogSettings.data}
set_overlay_settings={setOverlaySmallLogSettings}
current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
/>
) : (
<OverlaySettingsContainer
id="overlay_settings_large"
ui_configs={ui_configs.overlay_large_log}
default_ui_configs={ui_configs.overlay_large_log_default_settings}
current_overlay_settings={currentOverlayLargeLogSettings.data}
set_overlay_settings={setOverlayLargeLogSettings}
current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
id="overlay_settings_large"
ui_configs={ui_configs.overlay_large_log}
default_ui_configs={ui_configs.overlay_large_log_default_settings}
current_overlay_settings={currentOverlayLargeLogSettings.data}
set_overlay_settings={setOverlayLargeLogSettings}
current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
/>
)}
</div>
@@ -146,6 +147,7 @@ const OverlaySettingsContainer = ({
) : (
<RotationControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} default_ui_configs={default_ui_configs} selectFunction={selectFunction}/>
)}
<SendSampleTextToggleButton />
</div>
<OtherControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
<RadioButtonContainer
@@ -379,4 +381,58 @@ const ResetButton = ({onClickFunction}) => {
<RedoSvg className={styles.slider_reset_svg}/>
</button>
);
};
import SquareSvg from "@images/square.svg?react";
import TriangleSvg from "@images/triangle.svg?react";
import { randomIntMinMax } from "@utils";
const SendSampleTextToggleButton = () => {
const { t } = useTranslation();
const { sendTextToOverlay } = useSendTextToOverlay();
const [is_started, setIsStarted] = useState(false);
useEffect(() => {
let interval_id;
if (is_started) {
interval_id = setInterval(() => {
const text_data = Array.from(
{ length: randomIntMinMax(1, 5) },
() => t("config_page.vr.sample_text_button.sample_text")
).join(" ");
sendTextToOverlay(text_data);
}, 1000);
};
return () => {
if (interval_id) {
clearInterval(interval_id);
}
};
}, [is_started]);
const toggleFunction = () => {
setIsStarted(!is_started);
};
const label = is_started
? t("config_page.vr.sample_text_button.stop")
: t("config_page.vr.sample_text_button.start");
return (
<div className={styles.sample_text_button_wrapper}>
<button
className={clsx(styles.sample_text_button, { [styles.is_started]: is_started })}
onClick={toggleFunction}
>
{is_started ? (
<SquareSvg className={styles.sample_text_button_square_svg} />
) : (
<TriangleSvg className={styles.sample_text_button_triangle_svg} />
)}
</button>
<p className={styles.sample_text_button_label}>{label}</p>
</div>
);
};

48
src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
View File

@@ -56,6 +56,54 @@
transform: translate(-10%);
}
.sample_text_button_wrapper {
position: absolute;
bottom: 0;
left: -74%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.sample_text_button {
background-color: var(--dark_850_color);
padding: 1.8rem;
border-radius: 50%;
&:hover {
background-color: var(--dark_800_color);
}
&:active {
background-color: var(--dark_925_color);
}
&.is_started {
background-color: var(--primary_600_color);
&:hover {
background-color: var(--primary_500_color);
}
&:active {
background-color: var(--primary_700_color);
}
}
}
.sample_text_button_triangle_svg, .sample_text_button_square_svg {
width: 2.4rem;
}
.sample_text_button_triangle_svg {
transform: translateX(10%) rotate(90deg);
}
.sample_text_button_label {
color: var(--dark_basic_text_color);
position: absolute;
left: 50%;
top: 110%;
// bottom: -2rem;
transform: translateX(-50%);
white-space: pre-wrap;
font-size: 1.2rem;
width: max-content;
text-align: center;
}
// .position_controls {
// background-color: gray;
// }