From 2caf04fcd1d8518823d759bea2b81f89b5540625 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 28 Jan 2025 17:39:31 +0900
Subject: [PATCH 1/3] [Refactor] Remove the files that was for backup the code.

---
 .../supporters copy/C_Supporters.jsx          | 224 ------------------
 .../supporters copy/C_Supporters.module.scss  | 205 ----------------
 2 files changed, 429 deletions(-)
 delete mode 100644 src-ui/app/config_page/setting_section/setting_box/supporters copy/C_Supporters.jsx
 delete mode 100644 src-ui/app/config_page/setting_section/setting_box/supporters copy/C_Supporters.module.scss

diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters copy/C_Supporters.jsx b/src-ui/app/config_page/setting_section/setting_box/supporters copy/C_Supporters.jsx
deleted file mode 100644
index 1d64b9c5..00000000
--- a/src-ui/app/config_page/setting_section/setting_box/supporters copy/C_Supporters.jsx	
+++ /dev/null
@@ -1,224 +0,0 @@
-import { useState, useEffect } from "react";
-import styles from "./Supporters.module.scss";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-
-import {
-    useSettingBoxScrollPosition,
-} from "@logics_configs"
-
-const supporter_images = import.meta.glob("@images/supporters/supporters_images/*.{png,jpg,jpeg,svg}", { eager: true });
-const chato_expression_images = import.meta.glob("@images/supporters/chato_expressions/*.{png,jpg,jpeg,svg}", { eager: true });
-import fanbox_img from "@images/supporters/c_fanbox_1620x580.png";
-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: 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 SHUFFLE_INTERVAL_TIME = 20000;
-const shuffleArray = (array) => {
-    return array
-        .map((value) => ({ value, sort: Math.random() }))
-        .sort((a, b) => a.sort - b.sort)
-        .map(({ value }) => value);
-};
-
-export const Supporters = () => {
-    return (
-        <div className={styles.container}>
-            <SupportUsContainer />
-            <SupportersContainer />
-        </div>
-    );
-};
-
-const SupportUsContainer = () => {
-    return (
-        <div 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}>
-                    <a className={styles.fanbox_button} href="https://vrct-dev.fanbox.cc/" target="_blank" rel="noreferrer">
-                        <img style={{ height: "100%", width: "100%", objectFit: "contain" }} src={fanbox_button} />
-                    </a>
-                    <p className={styles.mainly_japanese}>日本語 / Mainly Japanese</p>
-                </div>
-                <div className={styles.kofi_wrapper}>
-                    <img className={styles.kofi_preparing} src={kofi_preparing} />
-                    <p className={styles.mainly_english}>Mainly English</p>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-const getRandomImage = (images) => {
-    const random_index = Math.floor(Math.random() * images.length);
-    return images[random_index];
-};
-
-export const SupportersContainer = () => {
-
-    return (
-        <div className={styles.supporters_container}>
-            <img className={styles.vrct_supporters_title} src={vrct_supporters_title} />
-            <p className={styles.vrct_supporters_desc}>{`VRCT3.0のアップデートに向けて、めちゃ大変な開発を支えてくれた "Early Supporters" です。\nThey are the 'Early Supporters' who supported us through the incredibly challenging development toward the VRCT3.0 update.`}</p>
-            <ProgressBar />
-            <SupportsWrapper />
-            <ProgressBar />
-            <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>
-        </div>
-    );
-};
-
-const ProgressBar = () => {
-    const [is_active, setIsActive] = useState(false);
-
-    useEffect(() => {
-        setIsActive(true);
-        const interval = setInterval(() => {
-            setIsActive(false);
-            setTimeout(() => setIsActive(true), 50);
-        }, SHUFFLE_INTERVAL_TIME);
-
-        return () => clearInterval(interval);
-    }, []);
-
-    return (
-        <div
-            className={clsx(styles.progress_bar, {
-                [styles.progress_bar_active]: is_active,
-            })}
-        />
-    );
-};
-
-const SupportsWrapper = () => {
-    const { saveScrollPosition, restoreScrollPosition } = useSettingBoxScrollPosition();
-    const [imagesState, setImagesState] = useState({
-        mogu_images: [],
-        mochi_images: [],
-        fuwa_images: [],
-        basic_images: [],
-        former_images: [],
-        and_you_images: [],
-        chato_images: [],
-    });
-
-    const shuffleImages = () => {
-        saveScrollPosition();
-        const getCategoryImages = (start, count) => {
-            const category_images = supporters_filenames.slice(start, start + count);
-            return shuffleArray(category_images);
-        };
-
-        const randomChatoImages = shuffleArray(
-            Array.from({ length: mogu_count + mochi_count + fuwa_count + basic_count + former_count }, () =>
-                getRandomImage(chato_expressions_filenames)
-            )
-        );
-
-        setImagesState({
-            mogu_images: getCategoryImages(0, mogu_count),
-            mochi_images: getCategoryImages(mogu_count, mochi_count),
-            fuwa_images: getCategoryImages(mogu_count + mochi_count, fuwa_count),
-            basic_images: getCategoryImages(mogu_count + mochi_count + fuwa_count, basic_count),
-            former_images: getCategoryImages(mogu_count + mochi_count + fuwa_count + basic_count, former_count),
-            and_you_images: getCategoryImages(mogu_count + mochi_count + fuwa_count + basic_count + former_count, and_you_count),
-            chato_images: randomChatoImages,
-        });
-        setTimeout(() => restoreScrollPosition(), 0);
-    };
-
-    useEffect(() => {
-        shuffleImages();
-        const interval = setInterval(() => {
-            shuffleImages();
-        }, SHUFFLE_INTERVAL_TIME);
-
-        return () => clearInterval(interval);
-    }, []);
-
-
-    const getSupportersImageByFileName = (file_name) => {
-        const image_path = Object.keys(supporter_images).find((path) => path.endsWith(file_name + ".png"));
-        return image_path ? supporter_images[image_path]?.default : null;
-    };
-
-    const getChatoImageByFileName = (file_name) => {
-        const image_path = Object.keys(chato_expression_images).find((path) => path.endsWith(file_name + ".png"));
-        return image_path ? chato_expression_images[image_path]?.default : null;
-    };
-
-    const getRandomDelay = (min, max) => {
-        const random_value = Math.random() * (max - min) + min;
-        return `${random_value.toFixed(1)}s`;
-    };
-
-
-    const renderImages = (image_list, chato_list, options = {}) => {
-        return image_list.map((file_name, index) => {
-            const img_src = getSupportersImageByFileName(file_name);
-            const is_default_icon = default_icon_numbers.some((element) => file_name.endsWith(element));
-            const chato_expression_src = is_default_icon ? getChatoImageByFileName(chato_list[index]) : null;
-            const random_delay = getRandomDelay(0.1, 6);
-
-            return img_src ? (
-                <div
-                    key={file_name}
-                    className={clsx(styles.supporter_image_wrapper, options.class_name)}
-                    style={{ "--delay": random_delay }}
-                >
-                    <img className={styles.supporter_image} src={img_src} />
-                    {chato_expression_src && (
-                        <img
-                            className={styles.default_chato_expression_image}
-                            src={chato_expression_src}
-                        />
-                    )}
-                    {options.is_and_you_icon ? <AndYouIcon /> : null}
-                </div>
-            ) : null;
-        });
-    };
-
-    return (
-        <div className={styles.supporters_wrapper}>
-            {renderImages(imagesState.mogu_images, imagesState.chato_images, { class_name: styles.mogu_image })}
-            {renderImages(imagesState.mochi_images, imagesState.chato_images)}
-            {renderImages(imagesState.fuwa_images, imagesState.chato_images)}
-            {renderImages(imagesState.basic_images, imagesState.chato_images)}
-            {renderImages(imagesState.former_images, imagesState.chato_images)}
-            <a href="https://vrct-dev.fanbox.cc/" target="_blank" rel="noreferrer">
-                {renderImages(imagesState.and_you_images, imagesState.chato_images, { is_and_you_icon: true, class_name: styles.and_you_image })}
-            </a>
-        </div>
-    );
-};
-
-const AndYouIcon = () => {
-    return (
-        <>
-            <div className={styles.and_you_container}>
-                <div className={styles.and_you_1}></div>
-                <div className={styles.and_you_2}></div>
-            </div>
-            <p className={styles.and_you_fanbox_link_text}>
-                FANBOX
-                <ExternalLink className={styles.external_link_svg} />
-            </p>
-        </>
-    );
-};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters copy/C_Supporters.module.scss b/src-ui/app/config_page/setting_section/setting_box/supporters copy/C_Supporters.module.scss
deleted file mode 100644
index 4288b653..00000000
--- a/src-ui/app/config_page/setting_section/setting_box/supporters copy/C_Supporters.module.scss	
+++ /dev/null
@@ -1,205 +0,0 @@
-.container {
-    display: flex;
-    gap: 1.2rem;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    // background-color: gray;
-}
-
-.support_us_container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 2rem;
-    width: 100%;
-
-}
-.fanbox_img {
-    width: 60vw;
-}
-
-.support_us_button_wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    gap: 4.8rem;
-}
-.fanbox_wrapper, .kofi_wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-}
-.fanbox_button {
-    width: 14rem;
-    transition: all 0.3s ease;
-    &:hover {
-        width: 16rem;
-    }
-}
-.kofi_preparing {
-    width: 6rem;
-}
-
-.mainly_japanese, .mainly_english {
-    font-size: 1.2rem;
-    color: var(--dark_400_color);
-}
-
-
-.supporters_container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    gap: 1rem;
-}
-.vrct_supporters_title {
-    height: 6rem;
-}
-.vrct_supporters_desc {
-    font-size: 1.4rem;
-    text-align: start;
-}
-
-.supporters_wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    align-content: start;
-    flex-wrap: wrap;
-    column-gap: 1.4rem;
-    row-gap: 0.8rem;
-}
-
-.supporter_image_wrapper {
-    position: relative;
-    width: 18rem;
-    overflow: hidden;
-}
-
-.supporter_image {
-    width: 100%;
-}
-
-.mogu_image {
-    position: relative;
-    &::after {
-        content: "";
-        position: absolute;
-        top: -200%;
-        left: -200%;
-        width: 300%;
-        height: 300%;
-        background: linear-gradient(45deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 70%);
-        transform: rotate(90deg);
-        animation: shine 2.5s infinite;
-        filter: blur(0.4rem);
-        animation-delay: var(--delay, 0s);
-    }
-
-}
-
-@keyframes shine {
-    0% {
-        top: -200%;
-        left: -200%;
-    }
-    50% {
-        top: 50%;
-        left: 50%;
-        opacity: 0.7;
-    }
-    100% {
-        top: 200%;
-        left: 200%;
-    }
-}
-
-.default_chato_expression_image {
-    position: absolute;
-    top: 50%;
-    left: 2.9rem;
-    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);
-}
-
-.progress_bar {
-    height: 0.2rem;
-    width: 0%;
-    &.progress_bar_active {
-        transition: width 20000ms linear;
-        background-color: var(--primary_400_color);
-        width: 100%;
-    }
-}
\ No newline at end of file

From 59fe407834f74acfba78aaa8beace896eea26864 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 28 Jan 2025 18:50:53 +0900
Subject: [PATCH 2/3] [bugfix] Fix window scaling issue when dragging between
 monitors.

---
 src-tauri/src/main.rs | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 77e9ce0f..163cc78a 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -1,9 +1,9 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
-// use tauri::command;
 use tauri::Manager;
 use window_shadows::set_shadow;
+
 fn main() {
     tauri::Builder::default()
         .setup(|app| {
@@ -17,6 +17,11 @@ fn main() {
 
             Ok(())
         })
+        .on_window_event(|event| { // This is for fix the bug that the window scaling issue when dragging between monitors.
+            if let tauri::WindowEvent::ScaleFactorChanged { new_inner_size, .. } = event.event() {
+                event.window().set_size(tauri::Size::Physical(*new_inner_size)).unwrap();
+            }
+        })
         .invoke_handler(tauri::generate_handler![get_font_list])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

From 5869cbae2f2546f383aaec8bb7e082ba1604e671 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 30 Jan 2025 12:00:10 +0900
Subject: [PATCH 3/3] [bugfix] Fix window size and scale issue when windows'
 scaling is not 100%.

---
 src-ui/logics/common/useWindow.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src-ui/logics/common/useWindow.js b/src-ui/logics/common/useWindow.js
index 7d04fd74..f94f3293 100644
--- a/src-ui/logics/common/useWindow.js
+++ b/src-ui/logics/common/useWindow.js
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { appWindow, currentMonitor, availableMonitors, LogicalPosition, LogicalSize } from "@tauri-apps/api/window";
+import { appWindow, currentMonitor, availableMonitors, PhysicalPosition, PhysicalSize } from "@tauri-apps/api/window";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 import { useStore_IsBreakPoint } from "@store";
 import { useUiScaling } from "@logics_configs";
@@ -12,14 +12,14 @@ export const useWindow = () => {
     const asyncGetWindowGeometry = async () => {
         try {
             const position = await appWindow.outerPosition();
-            const { x, y } = position;
+            const { x: x_pos, y: y_pos } = position;
 
             const size = await appWindow.outerSize();
             const { width, height } = size;
 
             return {
-                x_pos: x,
-                y_pos: y,
+                x_pos: x_pos,
+                y_pos: y_pos,
                 width: width,
                 height: height
             };
@@ -78,8 +78,8 @@ export const useWindow = () => {
                     adjustedY = monitorY + monitorHeight - adjustedHeight;
                 }
 
-                await appWindow.setPosition(new LogicalPosition(adjustedX, adjustedY));
-                await appWindow.setSize(new LogicalSize(adjustedWidth, adjustedHeight));
+                await appWindow.setPosition(new PhysicalPosition(adjustedX, adjustedY));
+                await appWindow.setSize(new PhysicalSize(adjustedWidth, adjustedHeight));
             } else {
                 console.error("Monitor information could not be retrieved.");
             }