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;