Merge branch 'feat/VersionsExplorer' of https://git.popa-popa.ru/DIKER/popa-launcher into feat/VersionsExplorer
This commit is contained in:
aurinex
@ -20,6 +20,7 @@ import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
|
||||
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
|
||||
import PersonIcon from '@mui/icons-material/Person';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
declare global {
|
||||
interface Window {
|
||||
electron: {
|
||||
@ -48,6 +49,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
const navigate = useNavigate();
|
||||
const tabsWrapperRef = useRef<HTMLDivElement | null>(null);
|
||||
const tabsRootRef = useRef<HTMLDivElement | null>(null);
|
||||
const theme = useTheme();
|
||||
|
||||
const updateGradientVars = useCallback(() => {
|
||||
const root = tabsRootRef.current;
|
||||
@ -71,7 +73,8 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
);
|
||||
|
||||
const path = location.pathname || '';
|
||||
const isAuthPage = path.startsWith('/login') || path.startsWith('/registration');
|
||||
const isAuthPage =
|
||||
path.startsWith('/login') || path.startsWith('/registration');
|
||||
|
||||
const TAB_ROUTES: Array<{
|
||||
value: number;
|
||||
@ -198,26 +201,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
|
||||
// Функция для получения количества монет
|
||||
|
||||
const tabBaseSx = {
|
||||
color: 'white',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '0.7em',
|
||||
transition: 'all 0.3s ease',
|
||||
'&:hover': {
|
||||
color: 'rgb(170, 170, 170)',
|
||||
},
|
||||
};
|
||||
|
||||
const activeTabSx = {
|
||||
color: 'transparent',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundImage: 'var(--tabs-grad)',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'var(--tabs-w) 100%',
|
||||
backgroundPosition: 'calc(-1 * var(--active-x)) 0',
|
||||
WebkitBackgroundClip: 'text',
|
||||
backgroundClip: 'text',
|
||||
};
|
||||
const tabBaseSx = [{ fontSize: '0.7em' }, theme.launcher.topbar.tabBase];
|
||||
|
||||
const logout = () => {
|
||||
localStorage.removeItem('launcher_config');
|
||||
@ -230,7 +214,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
return;
|
||||
}
|
||||
|
||||
const savedConfig = localStorage.getItem('launcher_config');
|
||||
const savedConfig = localStorage.getItem('launcher_config');
|
||||
if (!savedConfig) return;
|
||||
|
||||
let cfg: any = null;
|
||||
@ -263,7 +247,8 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
};
|
||||
|
||||
window.addEventListener('skin-updated', handler as EventListener);
|
||||
return () => window.removeEventListener('skin-updated', handler as EventListener);
|
||||
return () =>
|
||||
window.removeEventListener('skin-updated', handler as EventListener);
|
||||
}, [loadSkin]);
|
||||
|
||||
useEffect(() => {
|
||||
@ -277,28 +262,24 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
className={isAuthPage ? undefined : 'glass-ui'}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '8vh',
|
||||
zIndex: 1000,
|
||||
width: '100%',
|
||||
WebkitAppRegion: 'drag',
|
||||
overflow: 'hidden',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
|
||||
// убрать если не оч
|
||||
|
||||
// стиль как в Registration
|
||||
background: isAuthPage ?
|
||||
'none' : 'linear-gradient(71deg, rgba(242,113,33,0.18) 0%, rgba(233,64,205,0.14) 70%, rgba(138,35,135,0.16) 100%)',
|
||||
boxShadow: isAuthPage ? 'none' : '0 8px 30px rgba(0,0,0,0.35)',
|
||||
}}
|
||||
className={isAuthPage ? undefined : 'glass-ui'}
|
||||
sx={[
|
||||
{
|
||||
display: 'flex',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '8vh',
|
||||
zIndex: 1000,
|
||||
width: '100%',
|
||||
WebkitAppRegion: 'drag',
|
||||
overflow: 'hidden',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
theme.launcher.topbar.firstBox,
|
||||
]}
|
||||
>
|
||||
{/* Левая часть */}
|
||||
<Box
|
||||
@ -314,20 +295,16 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => handleLaunchPage()}
|
||||
sx={{
|
||||
width: '3em',
|
||||
height: '3em',
|
||||
borderRadius: '50%',
|
||||
border: 'unset',
|
||||
color: 'white',
|
||||
minWidth: 'unset',
|
||||
minHeight: 'unset',
|
||||
transition: 'transform 0.3s ease',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.2)',
|
||||
...(document.body.classList.contains('reduce-motion') ? { transform: 'none' } : null),
|
||||
sx={[
|
||||
{
|
||||
width: '3em',
|
||||
height: '3em',
|
||||
borderRadius: '50%',
|
||||
minWidth: 'unset',
|
||||
minHeight: 'unset',
|
||||
},
|
||||
}}
|
||||
theme.launcher.topbar.backButton,
|
||||
]}
|
||||
>
|
||||
<ArrowBackRoundedIcon />
|
||||
</Button>
|
||||
@ -339,7 +316,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
// старый вариант
|
||||
sx={{
|
||||
borderBottom: 1,
|
||||
borderColor: 'transparent',
|
||||
...theme.launcher.topbar.tabsBox,
|
||||
// '& .MuiTabs-indicator': {
|
||||
// backgroundColor: 'rgba(255, 77, 77, 1)',
|
||||
// },
|
||||
@ -381,61 +358,40 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
scrollButtons={false}
|
||||
disableRipple={true}
|
||||
sx={{
|
||||
// один градиент на весь Tabs
|
||||
'--tabs-grad': 'linear-gradient(90deg, #F27121 0%, #E940CD 50%, #8A2387 100%)',
|
||||
|
||||
// активный текст показывает “срез” общего градиента
|
||||
'& .MuiTab-root.Mui-selected': {
|
||||
color: 'transparent',
|
||||
backgroundImage: 'var(--tabs-grad)',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'var(--tabs-w) 100%',
|
||||
backgroundPosition: 'calc(-1 * var(--active-x)) 0',
|
||||
WebkitBackgroundClip: 'text',
|
||||
backgroundClip: 'text',
|
||||
},
|
||||
|
||||
// подчёркивание тоже из того же “единого” градиента
|
||||
'& .MuiTabs-indicator': {
|
||||
height: '2px',
|
||||
backgroundImage: 'var(--tabs-grad)',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'var(--tabs-w) 100%',
|
||||
backgroundPosition: 'calc(-1 * var(--active-x)) 0',
|
||||
},
|
||||
...theme.launcher.topbar.tabs,
|
||||
}}
|
||||
>
|
||||
<Tab
|
||||
label="Новости"
|
||||
disableRipple={true}
|
||||
sx={{
|
||||
sx={[
|
||||
...tabBaseSx,
|
||||
...(selectedTab === 0 ? activeTabSx : null),
|
||||
}}
|
||||
selectedTab === 0 ? theme.launcher.topbar.tabActive : null,
|
||||
]}
|
||||
/>
|
||||
<Tab
|
||||
label="Версии"
|
||||
disableRipple={true}
|
||||
sx={{
|
||||
sx={[
|
||||
...tabBaseSx,
|
||||
...(selectedTab === 1 ? activeTabSx : null),
|
||||
}}
|
||||
selectedTab === 1 ? theme.launcher.topbar.tabActive : null,
|
||||
]}
|
||||
/>
|
||||
<Tab
|
||||
label="Магазин"
|
||||
disableRipple={true}
|
||||
sx={{
|
||||
sx={[
|
||||
...tabBaseSx,
|
||||
...(selectedTab === 2 ? activeTabSx : null),
|
||||
}}
|
||||
selectedTab === 2 ? theme.launcher.topbar.tabActive : null,
|
||||
]}
|
||||
/>
|
||||
<Tab
|
||||
label="Рынок"
|
||||
disableRipple={true}
|
||||
sx={{
|
||||
sx={[
|
||||
...tabBaseSx,
|
||||
...(selectedTab === 3 ? activeTabSx : null),
|
||||
}}
|
||||
selectedTab === 3 ? theme.launcher.topbar.tabActive : null,
|
||||
]}
|
||||
/>
|
||||
</Tabs>
|
||||
</CustomTooltip>
|
||||
@ -507,6 +463,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
width: '3em',
|
||||
height: '3em',
|
||||
borderRadius: '50%',
|
||||
...theme.launcher.topbar.windowControlButton,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
@ -517,7 +474,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
>
|
||||
<path
|
||||
d="M 7 19 h 10 c 0.55 0 1 0.45 1 1 s -0.45 1 -1 1 H 7 c -0.55 0 -1 -0.45 -1 -1 s 0.45 -1 1 -1"
|
||||
fill="white"
|
||||
fill={theme.launcher.topbar.windowControlIcon.color}
|
||||
></path>
|
||||
</svg>
|
||||
</Button>
|
||||
@ -531,9 +488,12 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
width: '3em',
|
||||
height: '3em',
|
||||
borderRadius: '50%',
|
||||
...theme.launcher.topbar.windowControlButton,
|
||||
}}
|
||||
>
|
||||
<CloseRoundedIcon sx={{ color: 'white' }} />
|
||||
<CloseRoundedIcon
|
||||
sx={{ color: theme.launcher.topbar.windowControlIcon.color }}
|
||||
/>
|
||||
</Button>
|
||||
</Box>
|
||||
<Menu
|
||||
@ -553,11 +513,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
mt: '0.5vw',
|
||||
borderRadius: '1vw',
|
||||
minWidth: '16vw',
|
||||
color: 'white',
|
||||
bgcolor: 'rgba(0,0,0,0.82)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(233,64,205,0.25)',
|
||||
boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
|
||||
...theme.launcher.topbar.menuPaper,
|
||||
},
|
||||
}}
|
||||
>
|
||||
@ -581,10 +537,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '2vw',
|
||||
}}
|
||||
sx={[{ fontSize: '2vw' }, theme.launcher.topbar.menuUsername]}
|
||||
>
|
||||
{username || 'Игрок'}
|
||||
</Typography>
|
||||
@ -603,22 +556,17 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ my: '0.4vw', borderColor: 'rgba(255,255,255,0.08)' }} />
|
||||
<Divider sx={{ my: '0.4vw', ...theme.launcher.topbar.menuDivider }} />
|
||||
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleAvatarMenuClose();
|
||||
navigate('/profile');
|
||||
}}
|
||||
sx={{
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1.5vw',
|
||||
gap: '0.5vw',
|
||||
py: '0.7vw',
|
||||
'&:hover': {
|
||||
bgcolor: 'rgba(255,77,77,0.15)',
|
||||
},
|
||||
}}
|
||||
sx={[
|
||||
{ fontSize: '1.5vw', gap: '0.5vw', py: '0.7vw' },
|
||||
theme.launcher.topbar.menuItem,
|
||||
]}
|
||||
>
|
||||
<PersonIcon sx={{ fontSize: '2vw' }} /> Профиль
|
||||
</MenuItem>
|
||||
@ -629,15 +577,10 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
handleAvatarMenuClose();
|
||||
navigate('/dailyquests');
|
||||
}}
|
||||
sx={{
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1.5vw',
|
||||
gap: '0.5vw',
|
||||
py: '0.7vw',
|
||||
'&:hover': {
|
||||
bgcolor: 'rgba(255,77,77,0.15)',
|
||||
},
|
||||
}}
|
||||
sx={[
|
||||
{ fontSize: '1.5vw', gap: '0.5vw', py: '0.7vw' },
|
||||
theme.launcher.topbar.menuItem,
|
||||
]}
|
||||
>
|
||||
<CalendarMonthIcon sx={{ fontSize: '2vw' }} /> Ежедневные задания
|
||||
</MenuItem>
|
||||
@ -648,15 +591,10 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
handleAvatarMenuClose();
|
||||
navigate('/daily');
|
||||
}}
|
||||
sx={{
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1.5vw',
|
||||
gap: '0.5vw',
|
||||
py: '0.7vw',
|
||||
'&:hover': {
|
||||
bgcolor: 'rgba(255,77,77,0.15)',
|
||||
},
|
||||
}}
|
||||
sx={[
|
||||
{ fontSize: '1.5vw', gap: '0.5vw', py: '0.7vw' },
|
||||
theme.launcher.topbar.menuItem,
|
||||
]}
|
||||
>
|
||||
<EmojiEventsIcon sx={{ fontSize: '2vw' }} /> Ежедневная награда
|
||||
</MenuItem>
|
||||
@ -666,20 +604,15 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
handleAvatarMenuClose();
|
||||
navigate('/settings');
|
||||
}}
|
||||
sx={{
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1.5vw',
|
||||
gap: '0.5vw',
|
||||
py: '0.7vw',
|
||||
'&:hover': {
|
||||
bgcolor: 'rgba(255,77,77,0.15)',
|
||||
},
|
||||
}}
|
||||
sx={[
|
||||
{ fontSize: '1.5vw', gap: '0.5vw', py: '0.7vw' },
|
||||
theme.launcher.topbar.menuItem,
|
||||
]}
|
||||
>
|
||||
<SettingsIcon sx={{ fontSize: '2vw' }} /> Настройки
|
||||
</MenuItem>
|
||||
|
||||
<Divider sx={{ my: '0.4vw', borderColor: 'rgba(255,255,255,0.08)' }} />
|
||||
<Divider sx={{ my: '0.4vw', ...theme.launcher.topbar.menuDivider }} />
|
||||
{!isLoginPage && !isRegistrationPage && username && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
@ -688,27 +621,15 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
handleAvatarMenuClose();
|
||||
logout();
|
||||
}}
|
||||
sx={{
|
||||
width: '8vw',
|
||||
height: '3vw',
|
||||
borderRadius: '2.5vw',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1.2vw',
|
||||
background:
|
||||
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
transition: 'transform 0.3s ease',
|
||||
'&:hover': {
|
||||
background:
|
||||
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
|
||||
transform: 'scale(1.01)',
|
||||
...(document.body.classList.contains('reduce-motion') ? { transform: 'none' } : null),
|
||||
boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
|
||||
sx={[
|
||||
{
|
||||
width: '8vw',
|
||||
height: '3vw',
|
||||
fontSize: '1.2vw',
|
||||
m: '0 0 0 18vw',
|
||||
},
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
||||
m: '0 0 0 18vw',
|
||||
}}
|
||||
theme.launcher.topbar.logoutButton,
|
||||
]}
|
||||
>
|
||||
Выйти
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user