[Update] Add supporter period.

src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.jsx

@@ -5,7 +5,7 @@ import styles from "./SupportUsContainer.module.scss";
 
 export const SupportUsContainer = () => {
     return (
-        <div id="ttt" className={styles.support_us_container}>
+        <div id="support_us_container" className={styles.support_us_container}>
             <img className={styles.fanbox_img} src={fanbox_img} />
             <div className={styles.support_us_button_wrapper}>
                 <div className={styles.fanbox_wrapper}>

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

@@ -11,6 +11,7 @@ import {
 import json_data from "./data.json";
 
 const target_supporting_month = "2025-01";
+const calc_support_period = ["2024-10", "2024-11", "2024-12", "2025-01"];
 
 const SHUFFLE_INTERVAL_TIME = 20000;
 
@@ -142,9 +143,7 @@ export const SupportersWrapper = () => {
 
             const random_delay = `${randomMinMax(0.1, 6).toFixed(1)}s`;
 
-            const image_wrapper_classname = clsx(styles.supporter_image_wrapper, {
+
-                [styles.mogu_image]: target_plan === "もぐもぐ_2000",
-            });
 
             const file_name = is_and_you ? "and_you" : `supporter_${item.supporter_id}`;
             const label_img_src = getSupportersLabelsPath(file_name);
@@ -172,27 +171,38 @@ export const SupportersWrapper = () => {
                 </div>
             );
 
+
+
+            const supporter_image_wrapper_classname = clsx(styles.supporter_image_wrapper, {
+                [styles.mogu_image]: target_plan === "もぐもぐ_2000",
+            });
+
             return is_and_you ? (
-                <a href="#ttt">
+                <a href="#support_us_container">
+                    <div key={item.supporter_id} className={styles.supporter_image_container}>
+                        <div
+                            key={item.supporter_id}
+                            className={supporter_image_wrapper_classname}
+                            style={{ "--delay": random_delay }}
+                        >
+                            <img className={styles.supporter_image} src={img_src} />
+                            {supporterLabelComponent()}
+                            <AndYouIcon />
+                        </div>
+                    </div>
+
+                </a>
+            ): img_src ? (
+                <div key={item.supporter_id} className={styles.supporter_image_container}>
                     <div
                         key={item.supporter_id}
-                        className={image_wrapper_classname}
+                        className={supporter_image_wrapper_classname}
                         style={{ "--delay": random_delay }}
                     >
                         <img className={styles.supporter_image} src={img_src} />
                         {supporterLabelComponent()}
-                        <AndYouIcon />
                     </div>
-                </a>
+                    <SupporterPeriodContainer settings={item}/>
-
-            ): img_src ? (
-                <div
-                    key={item.supporter_id}
-                    className={image_wrapper_classname}
-                    style={{ "--delay": random_delay }}
-                >
-                    <img className={styles.supporter_image} src={img_src} />
-                    {supporterLabelComponent()}
                 </div>
             ) : null;
         });
@@ -229,4 +239,37 @@ const AndYouIcon = () => {
             <ArrowLeftSvg className={styles.arrow_left_svg} />
         </>
     );
+};
+
+const SupporterPeriodContainer = ({settings}) => {
+
+    const period_data = extractKeys(settings, calc_support_period);
+
+    return (
+        <div className={styles.supporter_period_container}>
+            {Object.entries(period_data).map(([key, item]) => {
+                if (item === "") return null;
+                const class_name = clsx(styles.period_box, {
+                    [styles.mogu_bar]: item === "もぐもぐ_2000",
+                    [styles.mochi_bar]: item === "もちもち_1000",
+                    [styles.fuwa_bar]: item === "ふわふわ_500",
+                    [styles.basic_bar]: item === "Basic_300",
+                });
+
+                return <div className={class_name}></div>
+            })}
+        </div>
+    );
+};
+
+
+
+const extractKeys = (data, keys_to_extract) => {
+    const result = {};
+    for (const key of keys_to_extract) {
+        if (key in data) {
+            result[key] = data[key];
+        }
+    }
+    return result;
 };

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

@@ -5,16 +5,24 @@
     align-content: start;
     flex-wrap: wrap;
     column-gap: 1.4rem;
-    row-gap: 0.8rem;
+    row-gap: 1.2rem;
+}
+
+.supporter_image_container {
+    position: relative;
+    width: 18rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
 }
 
 .supporter_image_wrapper {
     position: relative;
-    width: 18rem;
     overflow: hidden;
 }
 
 .supporter_image {
+    position: relative;
     width: 100%;
 }
 
@@ -121,7 +129,7 @@
     transform: translate(-50%, -50%) rotate(90deg);
 }
 
-.supporter_image_wrapper {
+.supporter_image_container {
     &:hover .and_you_container {
         top: 36%;
         transform: translate(-50%, -50%) rotate(180deg);
@@ -138,7 +146,7 @@
     }
 }
 
-.supporter_image_wrapper.and_you_image {
+.supporter_image_container.and_you_image {
     cursor: pointer;
     &:active {
         opacity: 0.6;
@@ -185,4 +193,29 @@
     100% {
         opacity: 0;
     }
+}
+
+
+.supporter_period_container {
+    display: flex;
+    gap: 0.2rem;
+    padding-left: 0.4rem;
+}
+
+.period_box {
+    width: 1.8rem;
+    height: 0.3rem;
+    border-radius: 0.3rem;
+    &.mogu_bar {
+        background-color: var(--dark_basic_text_color);
+    }
+    &.mochi_bar {
+        background-color: var(--received_300_color);
+    }
+    &.fuwa_bar {
+        background-color: #5788a2;
+    }
+    &.basic_bar {
+        background-color: var(--dark_800_color);
+    }
 }