every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Main Page: Add UI, multi language.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-12 16:16:40 +09:00
parent 607c04d7ba
commit a7d094bbcb
12 changed files with 210 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src-ui/app/main_page/main_section/MainSection.jsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from "react-i18next";
import styles from "./MainSection.module.scss";
import { TopBar } from "./top_bar/TopBar";
@@ -6,6 +7,7 @@ import { LanguageSelector } from "./language_selector/LanguageSelector";
import { useStore_IsOpenedLanguageSelector } from "@store";
import { useLanguageSettings } from "@logics_main";
import { useEffect } from "react";
export const MainSection = () => {
@@ -20,33 +22,62 @@ export const MainSection = () => {
const HandleLanguageSelector = () => {
const { t } = useTranslation();
const { currentIsOpenedLanguageSelector, updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const {
currentSelectedPresetTabNumber,
currentSelectedYourLanguages,
setSelectedYourLanguages,
currentSelectedTargetLanguages,
setSelectedTargetLanguages,
} = useLanguageSettings();
useEffect(() => {
updateIsOpenedLanguageSelector({
your_language: false,
target_language: false,
target_key: "1"
});
}, [currentSelectedPresetTabNumber.data, currentSelectedYourLanguages.data, currentSelectedTargetLanguages.data]);
const getTitle = (target_selector_key) => {
if (target_selector_key === "your_language") return t("main_page.language_selector.title_your_language");
if (target_selector_key === "target_language") {
if (currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["2"].enable === false) return t("main_page.language_selector.title_target_language");
return `${t("main_page.language_selector.title_target_language")} (${currentIsOpenedLanguageSelector.data.target_key})`;
}
};
if (currentIsOpenedLanguageSelector.data.your_language === true) {
const onclickFunction_YourLanguage = (payload) => {
updateIsOpenedLanguageSelector({ your_language: false, target_language: false });
setSelectedYourLanguages(payload);
updateIsOpenedLanguageSelector({ your_language: false, target_language: false, target_key: currentIsOpenedLanguageSelector.data.target_key });
setSelectedYourLanguages({
...payload,
target_key: currentIsOpenedLanguageSelector.data.target_key,
});
};
const title = getTitle("your_language");
return (
<LanguageSelector
id="your_language"
title={title}
onClickFunction={onclickFunction_YourLanguage}
/>
);
} else if (currentIsOpenedLanguageSelector.data.target_language === true) {
const onclickFunction_TargetLanguage = (payload) => {
updateIsOpenedLanguageSelector({ your_language: false, target_language: false });
setSelectedTargetLanguages(payload);
updateIsOpenedLanguageSelector({ your_language: false, target_language: false, target_key: currentIsOpenedLanguageSelector.data.target_key });
setSelectedTargetLanguages({
...payload,
target_key: currentIsOpenedLanguageSelector.data.target_key,
});
};
const title = getTitle("target_language");
return (
<LanguageSelector
id="target_language"
title={title}
onClickFunction={onclickFunction_TargetLanguage}
/>
);

23
src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx
View File

@@ -4,17 +4,10 @@ import { useSelectableLanguageList } from "@logics_main";
import styles from "./LanguageSelector.module.scss";
import { LanguageSelectorTopBar } from "./language_selector_top_bar/LanguageSelectorTopBar";
export const LanguageSelector = ({ id, onClickFunction }) => {
export const LanguageSelector = ({ title, onClickFunction }) => {
const { t } = useTranslation();
const { currentSelectableLanguageList } = useSelectableLanguageList();
const languageTitles = {
your_language: t("main_page.language_selector.title_your_language"),
target_language: t("main_page.language_selector.title_target_language")
};
const language_selector_title = languageTitles[id] || "";
const groupLanguagesByFirstLetter = (languages) => {
return languages.reduce((acc, { language, country }) => {
const firstLetter = language[0].toUpperCase();
@@ -30,7 +23,7 @@ export const LanguageSelector = ({ id, onClickFunction }) => {
return (
<div className={styles.container}>
<LanguageSelectorTopBar title={language_selector_title}/>
<LanguageSelectorTopBar title={title}/>
<div className={styles.language_list_scroll_wrapper}>
<div className={styles.language_list}>
{Object.entries(groupedLanguages).map(([letter, languages]) => (
@@ -46,25 +39,25 @@ const LanguageGroup = ({ onClickFunction, letter, languages }) => {
return (
<div className={styles.language_each_letter_box}>
<p className={styles.language_latter}>{letter}</p>
{languages.map((languageData, index) => (
<LanguageButton key={index} onClickFunction={onClickFunction} languageData={languageData} />
{languages.map((language_data, index) => (
<LanguageButton key={index} onClickFunction={onClickFunction} language_data={language_data} />
))}
</div>
);
};
const LanguageButton = ({ onClickFunction, languageData }) => {
const LanguageButton = ({ onClickFunction, language_data }) => {
const adjustedOnClickFunction = () => {
onClickFunction({
language: languageData.language,
country: languageData.country
language: language_data.language,
country: language_data.country,
});
};
return (
<div className={styles.language_button} onClick={adjustedOnClickFunction}>
<p className={styles.language_label}>{languageData.language} ({languageData.country})</p>
<p className={styles.language_label}>{language_data.language} ({language_data.country})</p>
</div>
);
};

1
src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.jsx
View File

@@ -9,6 +9,7 @@ export const LanguageSelectorTopBar = (props) => {
updateIsOpenedLanguageSelector({
your_language: false,
target_language: false,
target_key: "1"
});
};