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

new style VersionExplorer

Browse Source
This commit is contained in:
DIKER0K
2025-12-06 14:14:01 +05:00
parent 2e6b2d7add
commit 6a7169e2ae
1 changed files with 133 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,19 +4,15 @@ import {
Typography,
Grid,
Card,
CardMedia,
CardContent,
CardActions,
Button,
Modal,
List,
ListItem,
ListItemText,
IconButton,
} from '@mui/material';
import { useNavigate } from 'react-router-dom';
import AddIcon from '@mui/icons-material/Add';
import DownloadIcon from '@mui/icons-material/Download';
import { FullScreenLoader } from '../components/FullScreenLoader';
interface VersionCardProps {
@ -30,10 +26,13 @@ interface VersionCardProps {
hoveredCardId: string | null;
}
const gradientPrimary =
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';
export const VersionCard: React.FC<VersionCardProps> = ({
id,
name,
imageUrl,
imageUrl, // пока не используется, но оставляем для будущего
version,
onSelect,
isHovered,
@ -43,24 +42,28 @@ export const VersionCard: React.FC<VersionCardProps> = ({
return (
<Card
sx={{
backgroundColor: 'rgba(30, 30, 50, 0.8)',
backdropFilter: 'blur(10px)',
background:
'radial-gradient(circle at top left, rgba(242,113,33,0.2), transparent 55%), rgba(10,10,20,0.95)',
backdropFilter: 'blur(18px)',
width: '35vw',
height: '35vh',
minWidth: 'unset',
minHeight: 'unset',
display: 'flex',
flexDirection: 'column',
borderRadius: '16px',
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
transition: 'transform 0.3s, box-shadow 0.3s, filter 0.3s',
borderRadius: '2.5vw',
border: '1px solid rgba(255,255,255,0.06)',
boxShadow: isHovered
? '0 0 10px rgba(233,64,205,0.55)'
: '0 14px 40px rgba(0, 0, 0, 0.6)',
transition:
'transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease',
overflow: 'hidden',
cursor: 'pointer',
// filter: hoveredCardId && !isHovered ? 'blur(5px)' : 'blur(0px)', //НЕ БЕЙ МЕНЯ АНДРЕЙ
transform: isHovered ? 'scale(1.03)' : 'scale(1)',
transform: isHovered ? 'scale(1.04)' : 'scale(1)',
zIndex: isHovered ? 10 : 1,
'&:hover': {
boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
borderColor: 'rgba(242,113,33,0.8)',
},
}}
onClick={() => onSelect(id)}
@ -74,7 +77,8 @@ export const VersionCard: React.FC<VersionCardProps> = ({
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '10%',
gap: '1vh',
textAlign: 'center',
}}
>
<Typography
@ -83,12 +87,24 @@ export const VersionCard: React.FC<VersionCardProps> = ({
component="div"
sx={{
fontWeight: 'bold',
color: '#ffffff',
fontSize: '1.5rem',
fontFamily: 'Benzin-Bold',
fontSize: '2vw',
backgroundImage: gradientPrimary,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
{name}
</Typography>
<Typography
variant="subtitle1"
sx={{
color: 'rgba(255,255,255,0.8)',
fontSize: '1.1vw',
}}
>
Версия {version}
</Typography>
</CardContent>
</Card>
);
@ -168,7 +184,6 @@ export const VersionsExplorer = () => {
}
} catch (error) {
console.error('Ошибка при загрузке версий:', error);
// Можно добавить обработку ошибки, например показать уведомление
} finally {
setLoading(false);
}
@ -181,10 +196,8 @@ export const VersionsExplorer = () => {
const cfg: any = (version as any).config;
if (cfg && (cfg.downloadUrl || cfg.apiReleaseUrl)) {
// Версия из Gist — у неё есть нормальный config
localStorage.setItem('selected_version_config', JSON.stringify(cfg));
} else {
// Установленная версия без config — не засоряем localStorage пустым объектом
localStorage.removeItem('selected_version_config');
}
@ -203,7 +216,6 @@ export const VersionsExplorer = () => {
try {
setDownloadLoading(version.id);
// Скачивание и установка выбранной версии
const downloadResult = await window.electron.ipcRenderer.invoke(
'download-and-extract',
{
@ -216,7 +228,6 @@ export const VersionsExplorer = () => {
);
if (downloadResult?.success) {
// Добавляем скачанную версию в список установленных
setInstalledVersions((prev) => [...prev, version]);
setModalOpen(false);
}
@ -231,49 +242,42 @@ export const VersionsExplorer = () => {
const AddVersionCard = () => (
<Card
sx={{
backgroundColor: 'rgba(30, 30, 50, 0.8)',
// backdropFilter: 'blur(10px)',
background:
'radial-gradient(circle at top left, rgba(233,64,205,0.3), rgba(10,10,20,0.95))',
width: '35vw',
height: '35vh',
minWidth: 'unset',
minHeight: 'unset',
display: 'flex',
flexDirection: 'column',
borderRadius: '16px',
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
transition: 'transform 0.3s, box-shadow 0.3s, filter 0.3s',
borderRadius: '2.5vw',
border: '1px dashed rgba(255,255,255,0.3)',
boxShadow: '0 14px 40px rgba(0, 0, 0, 0.6)',
transition: 'transform 0.35s ease, box-shadow 0.35s ease',
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer',
// filter:
// hoveredCardId && hoveredCardId !== 'add' ? 'blur(5px)' : 'blur(0)', //НЕ БЕЙ МЕНЯ АНДРЕЙ
transform: hoveredCardId === 'add' ? 'scale(1.03)' : 'scale(1)',
transform: hoveredCardId === 'add' ? 'scale(1.04)' : 'scale(1)',
zIndex: hoveredCardId === 'add' ? 10 : 1,
'&:hover': {
boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
boxShadow: '0 0 40px rgba(242,113,33,0.7)',
borderStyle: 'solid',
},
}}
onClick={handleAddVersion}
onMouseEnter={() => setHoveredCardId('add')}
onMouseLeave={() => setHoveredCardId(null)}
>
<AddIcon sx={{ fontSize: 60, color: '#fff' }} />
<AddIcon sx={{ fontSize: '4vw', color: '#fff' }} />
<Typography
variant="h6"
sx={{
color: '#fff',
fontFamily: 'Benzin-Bold',
fontSize: '1.5vw',
mt: 1,
}}
>
Добавить
</Typography>
<Typography
variant="h6"
sx={{
color: '#fff',
}}
>
версию
Добавить версию
</Typography>
</Card>
);
@ -292,20 +296,51 @@ export const VersionsExplorer = () => {
overflow: 'hidden',
}}
>
{/* Глобальный фоновый слой для размытия всего интерфейса */}
{/* Заголовок страницы в стиле 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,
// backdropFilter: hoveredCardId ? 'blur(10px)' : 'blur(0)', //НЕ БЕЙ МЕНЯ АНДРЕЙ
transition: 'backdrop-filter 0.3s ease-in-out',
zIndex: 5,
background:
'radial-gradient(circle at top, rgba(242,113,33,0.12), transparent 55%)',
pointerEvents: 'none',
zIndex: 0,
}}
/>
/> */}
{loading ? (
<FullScreenLoader message="Загрузка ваших версий..." />
@ -318,13 +353,12 @@ export const VersionsExplorer = () => {
height: '100%',
overflowY: 'auto',
justifyContent: 'center',
alignContent: 'center',
alignContent: 'flex-start',
position: 'relative',
zIndex: 6,
padding: '2vh 0',
zIndex: 1,
pt: '3vh',
}}
>
{/* Показываем установленные версии или дефолтную, если она есть */}
{installedVersions.length > 0 ? (
installedVersions.map((version) => (
<Grid
@ -355,7 +389,6 @@ export const VersionsExplorer = () => {
</Grid>
))
) : (
// Если нет ни одной версии, показываем карточку добавления
<Grid
item
xs={12}
@ -371,7 +404,6 @@ export const VersionsExplorer = () => {
</Grid>
)}
{/* Всегда добавляем карточку для добавления новых версий */}
{installedVersions.length > 0 && (
<Grid
item
@ -403,21 +435,30 @@ export const VersionsExplorer = () => {
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
width: 420,
maxWidth: '90vw',
maxHeight: '80vh',
overflowY: 'auto',
background: 'linear-gradient(45deg, #000000 10%, #3b4187 184.73%)',
border: '2px solid #000',
boxShadow: 24,
background: 'linear-gradient(145deg, #000000 10%, #8A2387 100%)',
border: '1px solid rgba(255,255,255,0.16)',
boxShadow: '0 20px 60px rgba(0,0,0,0.85)',
p: 4,
borderRadius: '3vw',
gap: '1vh',
borderRadius: '2.5vw',
gap: '1.5vh',
display: 'flex',
flexDirection: 'column',
backdropFilter: 'blur(10px)',
backdropFilter: 'blur(18px)',
}}
>
<Typography variant="h6" component="h2" sx={{ color: '#fff' }}>
<Typography
variant="h6"
component="h2"
sx={{
color: '#fff',
fontFamily: 'Benzin-Bold',
mb: 1,
}}
>
Доступные версии для скачивания
</Typography>
@ -426,17 +467,22 @@ export const VersionsExplorer = () => {
Загрузка доступных версий...
</Typography>
) : (
<List sx={{ mt: 2 }}>
<List sx={{ mt: 1 }}>
{availableVersions.map((version) => (
<ListItem
key={version.id}
sx={{
borderRadius: '8px',
borderRadius: '1vw',
mb: 1,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
backgroundColor: 'rgba(0, 0, 0, 0.35)',
border: '1px solid rgba(255,255,255,0.08)',
cursor: 'pointer',
transition:
'background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.2)',
backgroundColor: 'rgba(255, 255, 255, 0.08)',
transform: 'translateY(-2px)',
boxShadow: '0 8px 24px rgba(0,0,0,0.6)',
},
}}
onClick={() => handleSelectVersion(version)}
@ -444,11 +490,22 @@ export const VersionsExplorer = () => {
<ListItemText
primary={version.name}
secondary={version.version}
primaryTypographyProps={{ color: '#fff' }}
primaryTypographyProps={{
color: '#fff',
fontFamily: 'Benzin-Bold',
}}
secondaryTypographyProps={{
color: 'rgba(255,255,255,0.7)',
}}
/>
{downloadLoading === version.id && (
<Typography
variant="body2"
sx={{ color: 'rgba(255,255,255,0.7)' }}
>
Загрузка...
</Typography>
)}
</ListItem>
))}
</List>
@ -456,15 +513,20 @@ export const VersionsExplorer = () => {
<Button
onClick={handleCloseModal}
variant="outlined"
variant="contained"
sx={{
mt: 3,
alignSelf: 'center',
borderColor: '#fff',
color: '#fff',
px: 6,
py: 1.2,
borderRadius: '2.5vw',
background: gradientPrimary,
fontFamily: 'Benzin-Bold',
fontSize: '1vw',
textTransform: 'none',
'&:hover': {
borderColor: '#ccc',
backgroundColor: 'rgba(255,255,255,0.1)',
transform: 'scale(1.05)',
boxShadow: '0 10px 30px rgba(0,0,0,0.6)',
},
}}
>