diff --git a/src-ui/app/splash_component/SplashComponent.jsx b/src-ui/app/splash_component/SplashComponent.jsx index 05b2307c..e5e945c5 100644 --- a/src-ui/app/splash_component/SplashComponent.jsx +++ b/src-ui/app/splash_component/SplashComponent.jsx @@ -5,6 +5,7 @@ import { DownloadModelsContainer } from "./download_models_container/DownloadMod import MegaphoneSvg from "@images/megaphone.svg?react"; import XMarkSvg from "@images/cancel.svg?react"; import { appWindow } from "@tauri-apps/api/window"; +import clsx from "clsx"; export const SplashComponent = () => { return ( @@ -17,33 +18,57 @@ export const SplashComponent = () => { ); }; -const AnnouncementsContainer = () => { - const labels = ["VRCT Real-Time Announcements", "VRCTからのお知らせ"]; - const [currentLabelIndex, setCurrentLabelIndex] = useState(0); +const SHOW_MEGAPHONE_TIME = 1000; +const AnnouncementsContainer = () => { + const labels = ["Check the Latest Status", "最新の状況を確認"]; + const [is_shown, setIsShown] = useState(0); + const [currentLabelIndex, setCurrentLabelIndex] = useState(0); + const [is_labels_active, setIsLabelsActive] = useState(false); useEffect(() => { - const labelInterval = setInterval(() => { - setCurrentLabelIndex((prevIndex) => (prevIndex + 1) % labels.length); - }, 6000); - return () => clearInterval(labelInterval); - }, [labels.length]); + const showTimeout = setTimeout(() => { + setIsShown(true); + }, SHOW_MEGAPHONE_TIME); + + const labelsTimeout = setTimeout(() => { + setIsLabelsActive(true); + }, SHOW_MEGAPHONE_TIME + 500); + + let labelInterval; + if (is_labels_active) { + labelInterval = setInterval(() => { + setCurrentLabelIndex((prevIndex) => (prevIndex + 1) % labels.length); + }, 4000); + } + + return () => { + clearTimeout(showTimeout); + clearTimeout(labelsTimeout); + if (labelInterval) clearInterval(labelInterval); + }; + }, [is_labels_active, labels.length]); + return ( ); }; + const CloseButtonContainer = () => { const close = () => { appWindow.close(); diff --git a/src-ui/app/splash_component/SplashComponent.module.scss b/src-ui/app/splash_component/SplashComponent.module.scss index 6ef953b7..b38573fa 100644 --- a/src-ui/app/splash_component/SplashComponent.module.scss +++ b/src-ui/app/splash_component/SplashComponent.module.scss @@ -5,19 +5,32 @@ position: relative; } -.announcements_button { +.announcements_button_wrapper { position: absolute; top: 16px; left: 20px; - border: 1px solid var(--dark_600_color); + opacity: 0; + transition: opacity 0.3s ease; + &.is_shown { + opacity: 1; + } +} +.announcements_button { + border: 1px solid var(--dark_700_color); display: flex; justify-content: center; align-items: center; gap: 6px; - padding: 6px 8px; + padding: 4px 8px; border-radius: 4px; &:hover { - background-color: var(--dark_750_color); + background-color: var(--dark_825_color); + & .announcements_label { + color: var(--dark_basic_text_color); + } + & .announcements_link_svg { + color: var(--primary_300_color); + } } &:active { background-color: var(--dark_850_color); @@ -27,6 +40,12 @@ .announcements_label { font-size: 12px; + color: var(--dark_400_color); + opacity: 0; + transition: opacity 0.3s ease; + &.is_labels_active { + opacity: 1; + } } .announcements_link_svg { width: 20px;