diff --git a/src-ui/app/config_page/setting_section/SettingSection.module.scss b/src-ui/app/config_page/setting_section/SettingSection.module.scss index 2ed9e9e6..fd35a3e2 100644 --- a/src-ui/app/config_page/setting_section/SettingSection.module.scss +++ b/src-ui/app/config_page/setting_section/SettingSection.module.scss @@ -1,6 +1,6 @@ .scroll_container { width: 100%; - overflow-y: auto; + overflow-y: scroll; overflow-x: hidden; } diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/Supporters.jsx b/src-ui/app/config_page/setting_section/setting_box/supporters/Supporters.jsx index 662f64e3..30c65b9d 100644 --- a/src-ui/app/config_page/setting_section/setting_box/supporters/Supporters.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/supporters/Supporters.jsx @@ -1,12 +1,22 @@ import styles from "./Supporters.module.scss"; import { SupportUsContainer } from "./support_us_container/SupportUsContainer"; import { SupportersContainer } from "./supporters_container/SupportersContainer"; +import { useSupporters } from "@logics_configs"; +import { useEffect } from "react"; export const Supporters = () => { + const { asyncFetchSupportersData } = useSupporters(); + + useEffect(() => { + asyncFetchSupportersData(); + }, []); + return (
- +
+ +
); }; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/Supporters.module.scss b/src-ui/app/config_page/setting_section/setting_box/supporters/Supporters.module.scss index 19d4d541..3c678046 100644 --- a/src-ui/app/config_page/setting_section/setting_box/supporters/Supporters.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/supporters/Supporters.module.scss @@ -5,4 +5,17 @@ justify-content: center; align-items: center; width: 100%; +} +.supportersWrapper { + opacity: 0; + animation: fadeIn 0.8s ease-in-out 1.6s forwards; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } } \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss b/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss index 4d4a1e41..47ea8636 100644 --- a/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss @@ -1,3 +1,44 @@ +$progress_ease: cubic-bezier(0, 1, 0.75, 1); + +@keyframes revealTopImg { + 0% { + clip-path: inset(0 50% 0 50%); + opacity: 0; + } + 100% { + clip-path: inset(0 0 0 0); + opacity: 1; + } +} + +@keyframes bounceIn { + 0% { + transform: translateY(100%); + opacity: 0; + } + 60% { + transform: translateY(-10%); + opacity: 1; + } + 80% { + transform: translateY(10%); + opacity: 1; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes expandWidth { + 0% { + transform: scaleX(0); + } + 100% { + transform: scaleX(1); + } +} + .support_us_container { display: flex; flex-direction: column; @@ -6,39 +47,56 @@ gap: 1.4rem; width: 100%; } + .support_buttons_wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; - gap: 2rem; + gap: 1.2rem; } .top_img { width: 100%; + animation: revealTopImg 0.8s ease forwards; } .lines_container { display: flex; + justify-content: center; + align-items: center; + width: 100%; gap: 3.6rem; } -.line_basic, .line_fuwa, .line_mochi, .line_mogu { +.line_basic, +.line_fuwa, +.line_mochi, +.line_mogu { width: 8.6rem; height: 0.2rem; + transform: scaleX(0); + transform-origin: left center; } .line_basic { background-color: var(--dark_800_color); + animation: expandWidth 1s $progress_ease 0.4s forwards; } + .line_fuwa { background-color: #5788a2; + animation: expandWidth 1s $progress_ease 0.6s forwards; } + .line_mochi { background-color: var(--received_300_color); + animation: expandWidth 1s $progress_ease 0.8s forwards; } + .line_mogu { background-color: var(--dark_basic_text_color); + animation: expandWidth 1s $progress_ease 1s forwards; } .support_us_button_wrapper { @@ -52,8 +110,21 @@ .support_button { position: relative; padding: 1.2rem 1.6rem; + opacity: 0; + transform: translateY(100%); } +.support_button:nth-child(1) { + animation: bounceIn 0.4s ease-out 1.2s forwards; +} +.support_button:nth-child(2) { + animation: bounceIn 0.4s ease-out 1.4s forwards; +} +.support_button:nth-child(3) { + animation: bounceIn 0.4s ease-out 1.6s forwards; +} + + .support_img { &.fanbox_logo { height: 1.8rem; @@ -64,8 +135,6 @@ } - - .spiral_top::before, .spiral_top::after, .spiral_bottom::before, @@ -74,6 +143,7 @@ position: absolute; transition-duration: 0.3s; } + .spiral_top::before { background: var(--dark_800_color); box-shadow: 0 0 0.4rem 0 var(--dark_800_color); @@ -116,20 +186,17 @@ height: 0; } -.support_button:hover -.spiral_top::before { + +.support_button:hover .spiral_top::before { height: 100%; } -.support_button:hover -.spiral_top::after { +.support_button:hover .spiral_top::after { width: 100%; } -.support_button:hover -.spiral_bottom::before { +.support_button:hover .spiral_bottom::before { width: 100%; } -.support_button:hover -.spiral_bottom::after { +.support_button:hover .spiral_bottom::after { height: 100%; } @@ -141,10 +208,12 @@ flex-direction: column; gap: 1rem; } + .vrct_supporters_title { height: 6rem; } + .vrct_supporters_desc { font-size: 1.4rem; text-align: start; -} \ No newline at end of file +} diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.jsx b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.jsx index 72d48e48..6eff53f0 100644 --- a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.jsx @@ -1,15 +1,10 @@ import styles from "./SupportersContainer.module.scss"; -import { useEffect } from "react"; import { SupportersWrapper } from "./supporters_wrapper/SupportersWrapper"; import { useSupporters } from "@logics_configs"; import { supporters_images_url } from "@ui_configs"; export const SupportersContainer = () => { - const { currentSupportersData, asyncFetchSupportersData } = useSupporters(); - - useEffect(() => { - asyncFetchSupportersData(); - }, []); + const { currentSupportersData } = useSupporters(); if (currentSupportersData.state === "error") return
Failed to retrieve data.
; @@ -17,11 +12,10 @@ export const SupportersContainer = () => { if (currentSupportersData.state === "pending" || currentSupportersData.data === null) return
Loading...
; - const supporters_settings = currentSupportersData.data.supporters_settings; return (
- +

{`みなさんのおかげで、みしゃ社長は布団で寝ることを許され(in開発室) しいなは喜び庭駆け回っています!!!ふわもちもぐもぐです!ありがとうございます。これからもまだまだ進化するVRCTをどうかよろしくお願いします!\nThanks to everyone, Misha has been granted the privilege of sleeping in a proper bed (in the development room), and Shiina is so happy, running around the yard! Fuwa-mochi-mogu-mogu! Thank you so much! We hope you'll continue to support the ever-evolving VRCT!`}

); diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx index 58b2a4c8..85e708a6 100644 --- a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx @@ -42,7 +42,7 @@ const getSupportersLabelsPath = (file_name) => `${image_sets.supporters_labels}$ const getSupportersIconsPath = (file_name) => `${image_sets.supporters_icons}${file_name}.png`; -export const SupportersWrapper = ({supporters_settings}) => { +export const SupportersWrapper = () => { const { saveScrollPosition, restoreScrollPosition } = useSettingBoxScrollPosition(); const { currentSupportersData } = useSupporters(); @@ -55,6 +55,8 @@ export const SupportersWrapper = ({supporters_settings}) => { }, [currentSupportersData.data]); + const supporters_settings = currentSupportersData.data.supporters_settings; + const target_supporting_month = supporters_settings.target_supporting_month; const calc_support_period = supporters_settings.calc_support_period; const chato_ex_count = supporters_settings.chato_ex_count; diff --git a/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss b/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss index 23646c92..6e53f4c9 100644 --- a/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss +++ b/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss @@ -1,4 +1,5 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1); +// Duplicated .container { position: absolute;