[Update] Adjust calculation and apply multi supporting plans.

src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.jsx

@@ -13,11 +13,15 @@ export const SupportersContainer = () => {
     if (currentSupportersData.state === "pending" || currentSupportersData.data === null)
         return <div>Loading...</div>;
 
+    const supporters_settings = currentSupportersData.data.supporters_settings;
+    const last_updated_local_date = new Date(supporters_settings.last_updated_utc_date).toLocaleString();
+
     return (
         <div className={styles.supporters_container}>
             <div className={styles.vrct_supporters_title_wrapper}>
                 <img className={styles.vrct_supporters_title} src={vrct_supporters_title}/>
                 <img className={styles.calc_period} src={`${supporters_images_url}/calc_period_label.png`}/>
+                <p className={styles.last_updated_local_date}>{`Last updated date: ${last_updated_local_date}`}</p>
             </div>
             <SupportersWrapper />
             <p className={styles.vrct_supporters_desc_end}>{`みなさんのおかげで、みしゃ社長は布団で寝ることを許され(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!`}</p>

src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.module.scss

@@ -12,6 +12,7 @@
     align-items: center;
     flex-direction: column;
     gap: 0.2rem;
+    width: 100%;
 }
 .vrct_supporters_title {
     height: 4.2rem;
@@ -19,6 +20,12 @@
 .calc_period {
     height: 1.6rem;
 }
+.last_updated_local_date {
+    font-size: 1.2rem;
+    color: var(--dark_600_color);
+    width: 100%;
+    text-align: end;
+}
 
 .vrct_supporters_desc_end {
     font-size: 1.4rem;

src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx

@@ -54,64 +54,37 @@ export const SupportersWrapper = () => {
         setJsonData(currentSupportersData.data);
     }, [currentSupportersData.data]);
 
-
     const supporters_settings = currentSupportersData.data.supporters_settings;
-
     const calc_support_period = supporters_settings.calc_support_period;
-    const target_supporting_month = calc_support_period.at(-1);
     const chato_ex_count = supporters_settings.chato_ex_count;
-    const last_updated_local_date = new Date(supporters_settings.last_updated_utc_date)?.toString();
 
     const recalcAndUpdateSupporters = useCallback(() => {
         if (!json_data) return;
 
-        let credit_pending_count = 0;
+        const grouped_data = {
-        const newGroupedData = {
+            mogu_2000: [],
-            "mogu_2000": [],
+            mochi_1000: [],
-            "mochi_1000": [],
+            fuwa_500: [],
-            "fuwa_500": [],
+            basic_300: [],
-            "basic_300": [],
+            former_supporter: [],
-            "empty": [],
+            and_you: [],
-            "and_you": [],
         };
 
-        const filtered_data = json_data.supporters_data.filter((supporter) => {
+        json_data.supporters_data.forEach((supporter) => {
-            if (!supporter.supporter_id) return false;
+            const value = supporter.highest_plan_during_the_period || "former_supporter";
-
+            if (grouped_data[value]) {
-            const months = Object.keys(supporter).filter((key) => calc_support_period.includes(key));
+                grouped_data[value].push(supporter);
-            const has_valid_month = months.some((month) => supporter[month]);
-            if (!has_valid_month) return false;
-
-            const basic_300_months = months.filter(
-                (month) => supporter[month] === "basic_300"
-            );
-            const has_special_plan = months.some((month) =>
-                ["fuwa_500", "mochi_1000", "mogu_2000"].includes(supporter[month])
-            );
-
-            if (basic_300_months.length === 1 && !has_special_plan) {
-                credit_pending_count++;
-                return false;
-            }
-
-            return true;
-        });
-
-        filtered_data.forEach((supporter) => {
-            const value = supporter[target_supporting_month] || "empty";
-            if (newGroupedData[value]) {
-                newGroupedData[value].push(supporter);
             } else {
-                newGroupedData["empty"].push(supporter);
+                grouped_data["former_supporter"].push(supporter);
             }
         });
 
         const newSupportersData = [
-            ...shuffleArray(newGroupedData["mogu_2000"]),
+            ...shuffleArray(grouped_data["mogu_2000"]),
-            ...shuffleArray(newGroupedData["mochi_1000"]),
+            ...shuffleArray(grouped_data["mochi_1000"]),
-            ...shuffleArray(newGroupedData["fuwa_500"]),
+            ...shuffleArray(grouped_data["fuwa_500"]),
-            ...shuffleArray(newGroupedData["basic_300"]),
+            ...shuffleArray(grouped_data["basic_300"]),
-            ...shuffleArray(newGroupedData["empty"]),
+            ...shuffleArray(grouped_data["former_supporter"]),
             and_you_data,
         ];
 
@@ -152,11 +125,9 @@ export const SupportersWrapper = () => {
                 <SupporterCardsComponent
                     supportersData={supportersData}
                     chatoExpressions={chatoExpressions}
-                    target_supporting_month={target_supporting_month}
                     calc_support_period={calc_support_period}
                 />
             </div>
-            <p className={styles.last_updated_local_date}>{`Last updated date:\n${last_updated_local_date}`}</p>
             <ProgressBar />
         </div>
     );
@@ -177,9 +148,9 @@ const AndYouIcon = () => {
     );
 };
 
-const SupporterCardsComponent = ({ supportersData, chatoExpressions, target_supporting_month, calc_support_period }) => {
+const SupporterCardsComponent = ({ supportersData, chatoExpressions, calc_support_period }) => {
     return supportersData.map((item, index) => {
-        const target_plan = item[target_supporting_month];
+        const target_plan = item.highest_plan_during_the_period;
 
         const img_src = getSupporterCard(target_plan);
 

src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss

@@ -237,11 +237,4 @@
         background-color: var(--primary_400_color);
         width: 100%;
     }
-}
-
-.last_updated_local_date {
-    font-size: 1rem;
-    color: var(--dark_800_color);
-    width: 100%;
-    text-align: end;
 }