DIKER/popa-launcher
1
0
Fork 0
Code Issues Pull Requests Packages Releases 9 Wiki Activity

minor fix front

Browse Source
This commit is contained in:
aurinex
2025-12-13 00:12:32 +05:00
parent 5e5f1aaa0a
commit bfb5a8ae6d
13 changed files with 223 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/App.css
View File

@ -18,7 +18,6 @@ body {
height: 100vh;
background: linear-gradient(242.94deg, #000000 39.07%, #3b4187 184.73%);
font-family: 'Benzin-Bold' !important;
overflow-y: hidden;
display: flex;
justify-content: center;
align-items: center;

20
src/renderer/App.tsx
View File

@ -20,6 +20,8 @@ import Marketplace from './pages/Marketplace';
import { Registration } from './pages/Registration';
import { FullScreenLoader } from './components/FullScreenLoader';
import { News } from './pages/News';
import PageHeader from './components/PageHeader';
import { useLocation } from 'react-router-dom';
const AuthCheck = ({ children }: { children: ReactNode }) => {
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
@ -95,11 +97,21 @@ const AuthCheck = ({ children }: { children: ReactNode }) => {
};
const App = () => {
return (
<Router>
<AppLayout />
</Router>
);
};
const AppLayout = () => {
// Просто используйте window.open без useNavigate
const handleRegister = () => {
window.open('https://account.ely.by/register', '_blank');
};
const [username, setUsername] = useState<string | null>(null);
const location = useLocation();
const path = location.pathname;
useEffect(() => {
const savedConfig = localStorage.getItem('launcher_config');
@ -112,7 +124,6 @@ const App = () => {
}, []);
return (
<Router>
<Box
sx={{
height: '100vh',
@ -121,13 +132,17 @@ const App = () => {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
justifyContent: location.pathname === '/profile'
? 'center'
: 'flex-start',
overflowX: 'hidden',
}}
>
<MinecraftBackground />
<TopBar onRegister={handleRegister} username={username || ''} />
<PageHeader />
<Notifier />
<Routes>
<Route
path="/login"
@ -184,7 +199,6 @@ const App = () => {
/>
</Routes>
</Box>
</Router>
);
};

16
src/renderer/components/BonusShopItem.tsx
View File

@ -81,7 +81,7 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
sx={{
position: 'relative',
width: '100%',
maxWidth: 300,
maxWidth: 220,
height: 440,
display: 'flex',
flexDirection: 'column',
@ -95,8 +95,8 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
transition: 'transform 0.35s ease, box-shadow 0.35s ease',
'&:hover': {
transform: 'scale(1.05)',
boxShadow: '0 20px 60px rgba(242,113,33,0.45)',
transform: 'scale(1.01)',
boxShadow: '0 10px 20px rgba(242,113,33,0.1)',
},
}}
>
@ -151,7 +151,7 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
<Typography
sx={{
fontFamily: 'Benzin-Bold',
fontSize: '1.05rem',
fontSize: '1rem',
mb: 0.5,
backgroundImage:
'linear-gradient(136deg, rgb(242,113,33), rgb(233,64,87), rgb(138,35,135))',
@ -165,7 +165,7 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
<Typography
sx={{
color: 'rgba(255,255,255,0.7)',
fontSize: '0.8rem',
fontSize: '0.7rem',
mb: 0.8,
}}
>
@ -177,11 +177,9 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
<Typography
sx={{
color: 'rgba(255,255,255,0.75)',
fontSize: '0.85rem',
fontSize: '0.7rem',
mb: 1.2,
minHeight: 40,
maxHeight: 40,
overflow: 'hidden',
}}
>
{description}
@ -294,7 +292,7 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
color: '#fff',
opacity: buttonDisabled ? 0.6 : 1,
'&:hover': {
transform: buttonDisabled ? 'none' : 'scale(1.1)',
transform: buttonDisabled ? 'none' : 'scale(1.05)',
},
}}
>

2
src/renderer/components/CaseRoulette.tsx
View File

@ -408,7 +408,7 @@ export default function CaseRoulette({
opacity: animationFinished ? 1 : 0.4,
pointerEvents: animationFinished ? 'auto' : 'none',
'&:hover': {
transform: 'scale(1.1)',
transform: 'scale(1.02)',
},
}}
>

114
src/renderer/components/PageHeader.tsx Normal file
View File

@ -0,0 +1,114 @@
import { Box, Typography } from '@mui/material';
import { useLocation } from 'react-router-dom';
import { useMemo } from 'react';
interface HeaderConfig {
title: string;
subtitle: string;
hidden?: boolean;
}
export default function PageHeader() {
const location = useLocation();
const headerConfig: HeaderConfig | null = useMemo(() => {
const path = location.pathname;
// Страницы без заголовка
if (
path === '/login' ||
path === '/registration' ||
path === '/marketplace' ||
path === '/profile' ||
path.startsWith('/launch')
) {
return { title: '', subtitle: '', hidden: true };
}
if (path === '/news') {
return {
title: 'Новости',
subtitle: 'Последние обновления лаунчера, сервера и ивентов',
};
}
if (path === '/') {
return {
title: 'Выбор версию клиента',
subtitle: 'Выберите установленную версию или добавьте новую сборку',
};
}
if (path.startsWith('/profile')) {
return {
title: 'Профиль пользователя',
subtitle: 'Профиль пользователя для личных настроек',
};
}
if (path.startsWith('/shop')) {
return {
title: 'Внутриигровой магазин',
subtitle: 'Тратьте свою уникалькую, виртуальную валюту - Попы!',
};
}
if (path.startsWith('/marketplace')) {
return {
title: 'Маркетплейс',
subtitle: 'Покупайте или продавайте - торговая площадка между игроками',
};
}
// Дефолт на всякий случай
return {
title: 'test',
subtitle: 'test',
};
}, [location.pathname]);
if (!headerConfig || headerConfig.hidden) {
return null;
}
return (
<Box
sx={{
width: '100%',
maxWidth: '85%',
mt: '10vh',
mb: '2vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
pointerEvents: 'none',
}}
>
<Typography
variant="h3"
sx={{
fontFamily: 'Benzin-Bold',
fontSize: '3vw',
backgroundImage:
'linear-gradient(71deg, #F27121 0%, #E940CD 60%, #8A2387 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
textTransform: 'uppercase',
letterSpacing: '0.08em',
}}
>
{headerConfig.title}
</Typography>
<Typography
variant="body2"
sx={{
mt: 0.5,
color: 'rgba(255,255,255,1)',
}}
>
{headerConfig.subtitle}
</Typography>
</Box>
);
}

8
src/renderer/components/PlayerPreviewModal.tsx
View File

@ -24,7 +24,13 @@ const CapePreviewModal: React.FC<CapePreviewModalProps> = ({
skinUrl,
}) => {
return (
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth
sx={{
'& .MuiPaper-root': {
backgroundColor: 'transparent',
borderRadius: '2vw',
},
}}>
<DialogContent
sx={{
bgcolor: 'rgba(5, 5, 15, 0.96)',

9
src/renderer/components/ShopItem.tsx
View File

@ -66,8 +66,8 @@ export default function ShopItem({
transition: 'transform 0.35s ease, box-shadow 0.35s ease',
'&:hover': {
transform: 'scale(1.05)',
boxShadow: '0 20px 60px rgba(242,113,33,0.45)',
transform: 'scale(1.01)',
boxShadow: '0 20px 20px rgba(242,113,33,0.1)',
},
}}
>
@ -124,8 +124,9 @@ export default function ShopItem({
background:
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
'&:hover': {
transform: 'scale(1.1)',
transform: 'scale(1.05)',
},
transition: 'all 0.5s ease'
}}
>
<VisibilityIcon fontSize="small" />
@ -219,7 +220,7 @@ export default function ShopItem({
borderRadius: '2.5vw',
fontSize: '0.85rem',
'&:hover': {
transform: 'scale(1.1)',
transform: 'scale(1.02)',
},
}}
>

4
src/renderer/components/TopBar.tsx
View File

@ -375,7 +375,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
'&:hover': {
background:
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
transform: 'scale(1.05)',
transform: 'scale(1.01)',
boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
},
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
@ -411,7 +411,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
'&:hover': {
background:
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
transform: 'scale(1.05)',
transform: 'scale(1.01)',
boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
},
'&:active': {

13
src/renderer/pages/LaunchPage.tsx
View File

@ -411,8 +411,8 @@ const LaunchPage = ({
value={progress}
valueBuffer={buffer}
sx={{
height: 12,
borderRadius: 6,
height: '0.45vw',
borderRadius: '1vw',
// Фон прогресс-бара (buffer background)
backgroundColor: 'rgba(255,255,255,0.1)',
@ -426,7 +426,7 @@ const LaunchPage = ({
'& .MuiLinearProgress-bar2Buffer': {
// Buffer линия (вторая линия)
backgroundColor: 'rgba(255,255,255,0.25)',
backgroundColor: 'rgba(255,255,255,0)',
borderRadius: 6,
},
@ -473,7 +473,7 @@ const LaunchPage = ({
background: 'linear-gradient(71deg, #555 0%, #777 100%)',
'&:hover': {
background: 'linear-gradient(71deg, #666 0%, #888 100%)',
transform: 'scale(1.05)',
transform: 'scale(1.01)',
boxShadow: '0 4px 15px rgba(100, 100, 100, 0.4)',
},
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
@ -485,10 +485,11 @@ const LaunchPage = ({
'&:hover': {
background:
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
transform: 'scale(1.05)',
transform: 'scale(1.01)',
boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
},
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
transition: 'all 0.25s ease',
}),
}}
>
@ -506,13 +507,13 @@ const LaunchPage = ({
minHeight: 'unset',
minWidth: 'unset',
height: '100%', // занимает полную высоту родителя
transition: 'transform 0.3s ease',
'&:hover': {
background:
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
transform: 'scale(1.05)',
boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
},
transition: 'transform 0.25s ease, box-shadow 0.25s ease',
}}
onClick={handleOpen}
>

2
src/renderer/pages/Marketplace.tsx
View File

@ -254,7 +254,7 @@ export default function Marketplace() {
}
return (
<Box sx={{ padding: 3, width: '95%', height: '80%' }}>
<Box sx={{ padding: '0 2vw 2vw 2vw', width: '95%', height: '100%', mt: '10vh' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '1vw' }}>
<Typography variant="h4" color="white" gutterBottom>
Рынок сервера{' '}

85
src/renderer/pages/News.tsx
View File

@ -151,48 +151,15 @@ export const News = () => {
return (
<Box
sx={{
mt: '7vh',
px: '7vw',
pb: '4vh',
maxHeight: '90vh',
maxHeight: '100vh',
overflowY: 'auto',
display: 'flex',
flexDirection: 'column',
gap: '2vh',
}}
>
{/* Заголовок страницы */}
<Box
sx={{
mb: '2vh',
}}
>
<Typography
variant="h3"
sx={{
fontFamily: 'Benzin-Bold',
fontSize: '3vw',
backgroundImage:
'linear-gradient(71deg, #F27121 0%, #E940CD 60%, #8A2387 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
textTransform: 'uppercase',
letterSpacing: '0.08em',
}}
>
Новости
</Typography>
<Typography
variant="body2"
sx={{
mt: 0.5,
color: 'rgba(255,255,255,0.6)',
}}
>
Последние обновления лаунчера, сервера и ивентов
</Typography>
</Box>
{/* Админский редактор */}
{isAdmin && (
<Paper
@ -229,6 +196,7 @@ export const News = () => {
'& .MuiInputBase-root': {
backgroundColor: 'rgba(0,0,0,0.6)',
color: 'white',
borderRadius: '1.2vw'
},
'& .MuiInputLabel-root': {
color: 'rgba(255,255,255,0.7)',
@ -247,6 +215,7 @@ export const News = () => {
'& .MuiInputBase-root': {
backgroundColor: 'rgba(0,0,0,0.6)',
color: 'white',
borderRadius: '1.2vw',
},
'& .MuiInputLabel-root': {
color: 'rgba(255,255,255,0.7)',
@ -259,21 +228,23 @@ export const News = () => {
mb: 2,
'& .EasyMDEContainer': {
backgroundColor: 'rgba(0,0,0,0.6)',
borderRadius: '0.8vw',
borderRadius: '1.2vw',
overflow: 'hidden',
border: '1px solid rgba(255,255,255,0.15)',
border: 'none'
},
'& .editor-toolbar': {
'& .editor-toolbar': { // полоски(разделители) иконок
background: 'transparent',
borderBottom: '1px solid rgba(255, 255, 255, 1)',
color: 'white',
border: 'none',
borderBottom: '1px solid #FFFFFF'
},
'& .editor-toolbar .fa': { // все иконки
color: 'white',
},
'& .editor-toolbar .fa': {
color: 'white',
},
'& .CodeMirror': {
'& .CodeMirror': { // поле ввода
backgroundColor: 'transparent',
color: 'white',
border: 'none'
},
}}
>
@ -302,7 +273,7 @@ export const News = () => {
borderRadius: '999px',
textTransform: 'uppercase',
fontFamily: 'Benzin-Bold',
fontSize: '0.8vw',
fontSize: '1vw',
letterSpacing: '0.08em',
backgroundImage:
'linear-gradient(71deg, #F27121 0%, #E940CD 60%, #8A2387 100%)',
@ -310,7 +281,9 @@ export const News = () => {
'&:hover': {
boxShadow: '0 18px 40px rgba(0,0,0,1)',
filter: 'brightness(1.05)',
transform: 'scale(1.02)',
},
transition: 'all 0.5s ease'
}}
>
{creating ? 'Публикация...' : 'Опубликовать'}
@ -381,12 +354,13 @@ export const News = () => {
boxShadow: '0 18px 45px rgba(0, 0, 0, 0.7)',
backdropFilter: 'blur(14px)',
width: '80vw',
transition:
'transform 0.25s ease, box-shadow 0.25s.ease, border-color 0.25s ease',
// transition:
// 'transform 0.25s ease, box-shadow 0.25s.ease, border-color 0.25s ease',
'&:hover': {
boxShadow: '0 24px 60px rgba(0, 0, 0, 0.9)',
borderColor: 'rgba(242,113,33,0.5)',
},
transition: 'all 0.25s ease',
}}
>
{/* Шапка новости */}
@ -453,19 +427,20 @@ export const News = () => {
</Box>
<IconButton
disableRipple
disableFocusRipple
disableTouchRipple
onClick={() => handleToggleExpand(item.id)}
sx={{
ml: 1,
alignSelf: 'center',
transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
transition: 'transform 0.25s ease, background 0.25s ease',
background:
'linear-gradient(140deg, rgba(242,113,33,0.15), rgba(233,64,87,0.15))',
'rgba(242,113,33,0.15)',
borderRadius: '1.4vw',
'&:hover': {
background:
'linear-gradient(140deg, rgba(242,113,33,0.4), rgba(233,64,87,0.4))',
'rgba(242,113,33,0.4)',
},
transition: 'all 0.25s ease',
}}
>
<ExpandMoreIcon
@ -474,20 +449,22 @@ export const News = () => {
</IconButton>
{isAdmin && (
<IconButton
disableRipple
disableFocusRipple
disableTouchRipple
onClick={() => handleDeleteNews(item.id)}
sx={{
mt: 0.5,
backgroundColor: 'rgba(255, 77, 77, 0.1)',
background: 'rgba(255, 77, 77, 0.1)',
borderRadius: '1.4vw',
'&:hover': {
backgroundColor: 'rgba(255, 77, 77, 0.3)',
background: 'rgba(255, 77, 77, 0.3)',
},
}}
>
<DeleteOutlineIcon
sx={{
color: 'rgba(255, 120, 120, 0.9)',
fontSize: '1.2vw',
fontSize: '1.4vw',
}}
/>
</IconButton>

19
src/renderer/pages/Shop.tsx
View File

@ -407,6 +407,7 @@ export default function Shop() {
height: '100%',
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
}}
>
{(loading || onlineCheckLoading) && (
@ -418,14 +419,13 @@ export default function Shop() {
sx={{
display: 'flex',
flexDirection: 'column',
width: '90%',
height: '80%',
width: '100%',
height: '100%',
gap: '2vw',
overflow: 'auto',
paddingTop: '3vh',
paddingBottom: '10vh',
paddingLeft: '5vw',
paddingRight: '5vw',
paddingBottom: '5vw',
paddingLeft: '2.5vw',
paddingRight: '1.5vw',
}}
>
{/* Блок прокачки */}
@ -434,6 +434,7 @@ export default function Shop() {
display: 'flex',
flexDirection: 'column',
gap: 2,
mt: '2vh'
}}
>
<Typography
@ -546,6 +547,9 @@ export default function Shop() {
{!isOnline && (
<Button
disableRipple
disableFocusRipple
disableTouchRipple
variant="outlined"
size="small"
sx={{
@ -558,8 +562,9 @@ export default function Shop() {
fontSize: '0.8em',
color: 'white',
'&:hover': {
transform: 'scale(1.1)',
transform: 'scale(1.02)',
},
border: 'none',
}}
onClick={() => {
checkPlayerStatus(); // обновляем онлайн-статус

59
src/renderer/pages/VersionsExplorer.tsx
View File

@ -285,63 +285,14 @@ export const VersionsExplorer = () => {
return (
<Box
sx={{
px: '7vw',
overflowY: 'auto',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
paddingLeft: '5vw',
paddingRight: '5vw',
position: 'relative',
flexGrow: 1,
height: 'calc(100vh - 64px)',
overflow: 'hidden',
gap: '2vh',
height: '100%',
}}
>
{/* Заголовок страницы в стиле Registration */}
<Box
sx={{
mt: '7vh',
mb: '1vh',
textAlign: 'center',
}}
>
<Typography
variant="h3"
sx={{
fontFamily: 'Benzin-Bold',
fontSize: '3vw',
backgroundImage: gradientPrimary,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
Выбор версии клиента
</Typography>
<Typography
variant="subtitle1"
sx={{
color: 'rgba(255,255,255,0.7)',
mt: 1,
}}
>
Выберите установленную версию или добавьте новую сборку
</Typography>
</Box>
{/* Глобальный фоновый слой (мягкий эффект) */}
{/* <Box
sx={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
background:
'radial-gradient(circle at top, rgba(242,113,33,0.12), transparent 55%)',
pointerEvents: 'none',
zIndex: 0,
}}
/> */}
{loading ? (
<FullScreenLoader message="Загрузка ваших версий..." />
) : (
@ -525,7 +476,7 @@ export const VersionsExplorer = () => {
fontSize: '1vw',
textTransform: 'none',
'&:hover': {
transform: 'scale(1.05)',
transform: 'scale(1.01)',
boxShadow: '0 10px 30px rgba(0,0,0,0.6)',
},
}}