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 d8e72d34..8c3d4a76 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 @@ -9,14 +9,18 @@ import vrct_supporters_title from "@images/supporters/vrct_supporters_title.png" import fanbox_button from "@images/supporters/fanbox_button.png"; import kofi_preparing from "@images/supporters/kofi_preparing.png"; +import ExternalLink from "@images/external_link.svg?react"; + + const mogu_count = 8; const mochi_count = 3; const fuwa_count = 4; const basic_count = 5; const former_count = 2; +const and_you_count = 1; const default_icon_numbers = ["05", "06", "07", "11"]; -const supporters_filenames = Array.from({ length: 22 }, (_, index) => `supporter_${String(index + 1).padStart(2, "0")}`); +const supporters_filenames = Array.from({ length: 23 }, (_, index) => `supporter_${String(index + 1).padStart(2, "0")}`); const chato_expressions_filenames = Array.from({ length: 7 }, (_, index) => `chato_expression_${String(index + 1).padStart(2, "0")}`); const shuffleArray = (array) => { @@ -36,6 +40,7 @@ const mochi_images = getCategoryImages(mogu_count, mochi_count); const fuwa_images = getCategoryImages(mogu_count + mochi_count, fuwa_count); const basic_images = getCategoryImages(mogu_count + mochi_count + fuwa_count, basic_count); const former_images = getCategoryImages(mogu_count + mochi_count + fuwa_count + basic_count, former_count); +const and_you_images = getCategoryImages(mogu_count + mochi_count + fuwa_count + basic_count + former_count, and_you_count); const getRandomImage = (images) => { const random_index = Math.floor(Math.random() * images.length); @@ -88,7 +93,7 @@ const SupportUsContainer = () => { }; export const SupportersContainer = () => { - const renderImages = (image_list, class_name) => { + const renderImages = (image_list, options={}) => { return image_list.map((file_name) => { const img_src = getSupportersImageByFileName(file_name); const is_default_icon = default_icon_numbers.some((default_num) => file_name.endsWith(default_num)); @@ -100,7 +105,7 @@ export const SupportersContainer = () => { return img_src ? (
@@ -110,6 +115,7 @@ export const SupportersContainer = () => { src={chato_expression_src} /> )} + {options.is_and_you_icon ? : null}
) : null; }); @@ -118,14 +124,33 @@ export const SupportersContainer = () => { return (
-

{`VRCT3.0のアップデートに向けて、むちゃ大変な開発を支えてくれた "Early Supporters" です。\nThey are the 'Early Supporters' who supported us through the incredibly challenging development toward the VRCT3.0 update.`}

+

{`VRCT3.0のアップデートに向けて、めちゃ大変な開発を支えてくれた "Early Supporters" です。\nThey are the 'Early Supporters' who supported us through the incredibly challenging development toward the VRCT3.0 update.`}

- {renderImages(mogu_images, `${styles.mogu_image}`)} + {renderImages(mogu_images, {class_name: styles.mogu_image})} {renderImages(mochi_images)} {renderImages(fuwa_images)} {renderImages(basic_images)} {renderImages(former_images)} + + {renderImages(and_you_images, {is_and_you_icon: true, class_name: styles.and_you_image})} +
+

{`みなさんのおかげで、みしゃ社長は布団で寝ることを許され(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!`}

); }; + +const AndYouIcon = () => { + return ( + <> +
+
+
+
+

+ FANBOX + +

+ + ); +}; \ 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 bd556503..7c0cfc16 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 @@ -128,4 +128,68 @@ width: 2.8rem; transform: translate(-50%, -50%) rotate(10deg); opacity: 0.8; +} + +.and_you_container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: all 0.3s ease; +} + +.and_you_1, .and_you_2 { + width: 2.2rem; + height: 0.2rem; + border-radius: 50%; + background-color: var(--dark_400_color); +} + +.and_you_2 { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(90deg); +} + +.supporter_image_wrapper { + &:hover .and_you_container { + top: 40%; + transform: translate(-50%, -50%) rotate(180deg); + } + &:hover .and_you_fanbox_link_text { + top: 70%; + opacity: 1; + } +} + +.supporter_image_wrapper.and_you_image { + cursor: pointer; + &:active { + opacity: 0.6; + } +} + +.and_you_fanbox_link_text { + font-size: 1.2rem; + color: var(--dark_400_color); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: all 0.3s ease; + opacity: 0; +} + +.external_link_svg { + color: var(--dark_200_color); + width: 1.2rem; + margin-left: 0.6rem; + padding-bottom: 0.2rem; +} + +.vrct_supporters_desc_end { + font-size: 1.4rem; + margin-top: 2rem; + color: var(--dark_300_color); } \ No newline at end of file diff --git a/src-ui/assets/supporters/supporters_images/supporter_23.png b/src-ui/assets/supporters/supporters_images/supporter_23.png new file mode 100644 index 00000000..207be07e Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_23.png differ