jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-06-10 08:14:47 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Comprehensive review changes

Browse source
This commit is contained in:
seavor 2026-04-20 18:58:40 -05:00
parent 3aa8c654cc
commit 6074d9d6e4
143 changed files with 2661 additions and 1535 deletions
Download patch file Download diff file Expand all files Collapse all files

3
webclient/src/components/LanguageDropdown/LanguageDropdown.css
View file

@ -1,6 +1,3 @@
.LanguageDropdown {
}
.LanguageDropdown-item {
display: flex;
align-items: center;

65
webclient/src/components/LanguageDropdown/LanguageDropdown.tsx
View file

@ -1,7 +1,5 @@
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Select, MenuItem } from '@mui/material';
import { Select, MenuItem, SelectChangeEvent } from '@mui/material';
import FormControl from '@mui/material/FormControl';
import { Images } from '@app/images';
@ -11,48 +9,43 @@ import './LanguageDropdown.css';
const LanguageDropdown = () => {
const { t, i18n } = useTranslation();
// i18next `resolvedLanguage` is undefined until a registered resource matches;
// MUI Select requires a concrete, in-range value.
const [language, setLanguage] = useState(i18n.resolvedLanguage ?? i18n.language ?? '');
const currentLanguage = i18n.resolvedLanguage ?? i18n.language ?? '';
useEffect(() => {
if (language !== i18n.resolvedLanguage) {
i18n.changeLanguage(language);
const onLanguageChange = (event: SelectChangeEvent) => {
const next = event.target.value as App.Language;
if (next !== currentLanguage) {
void i18n.changeLanguage(next);
}
}, [language]);
};
return (
<FormControl size='small' variant='outlined' className='LanguageDropdown'>
<FormControl size="small" variant="outlined" className="LanguageDropdown">
<Select
id='LanguageDropdown-select'
margin='dense'
value={language}
fullWidth={true}
onChange={e => setLanguage(e.target.value as App.Language)}
id="LanguageDropdown-select"
margin="dense"
value={currentLanguage}
fullWidth
onChange={onLanguageChange}
>
{
Object.keys(App.Language).map((lang) => {
const country = App.LanguageCountry[lang];
{Object.keys(App.Language).map((lang) => {
const country = App.LanguageCountry[lang];
const nativeName = App.LanguageNative[lang];
const translatedName = t(`Common.languages.${lang}`);
return (
<MenuItem value={lang} key={lang}>
<div className="LanguageDropdown-item">
<img className="LanguageDropdown-item__image" src={Images.Countries[country]} />
<span className="LanguageDropdown-item__label">
{App.LanguageNative[lang]} {
App.LanguageNative[lang] !== t(`Common.languages.${lang}`) && (
<>({ t(`Common.languages.${lang}`) })</>
)
}
</span>
</div>
</MenuItem>
);
})
}
return (
<MenuItem value={lang} key={lang}>
<div className="LanguageDropdown-item">
<img className="LanguageDropdown-item__image" src={Images.Countries[country]} />
<span className="LanguageDropdown-item__label">
{nativeName} {nativeName !== translatedName && <>({translatedName})</>}
</span>
</div>
</MenuItem>
);
})}
</Select>
</FormControl>
)
);
};
export default LanguageDropdown;