473 lines
13 KiB
TypeScript
473 lines
13 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import {
|
||
Box,
|
||
Typography,
|
||
Grid,
|
||
Card,
|
||
CardMedia,
|
||
CardContent,
|
||
CardActions,
|
||
Button,
|
||
CircularProgress,
|
||
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';
|
||
|
||
interface VersionCardProps {
|
||
id: string;
|
||
name: string;
|
||
imageUrl: string;
|
||
version: string;
|
||
onSelect: (id: string) => void;
|
||
isHovered: boolean;
|
||
onHover: (id: string | null) => void;
|
||
hoveredCardId: string | null;
|
||
}
|
||
|
||
export const VersionCard: React.FC<VersionCardProps> = ({
|
||
id,
|
||
name,
|
||
imageUrl,
|
||
version,
|
||
onSelect,
|
||
isHovered,
|
||
onHover,
|
||
hoveredCardId,
|
||
}) => {
|
||
return (
|
||
<Card
|
||
sx={{
|
||
backgroundColor: 'rgba(30, 30, 50, 0.8)',
|
||
backdropFilter: 'blur(10px)',
|
||
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',
|
||
overflow: 'hidden',
|
||
cursor: 'pointer',
|
||
filter: hoveredCardId && !isHovered ? 'blur(5px)' : 'blur(0px)',
|
||
transform: isHovered ? 'scale(1.03)' : 'scale(1)',
|
||
zIndex: isHovered ? 10 : 1,
|
||
'&:hover': {
|
||
boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
|
||
},
|
||
}}
|
||
onClick={() => onSelect(id)}
|
||
onMouseEnter={() => onHover(id)}
|
||
onMouseLeave={() => onHover(null)}
|
||
>
|
||
<CardContent
|
||
sx={{
|
||
flexGrow: 1,
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
height: '10%',
|
||
}}
|
||
>
|
||
<Typography
|
||
gutterBottom
|
||
variant="h5"
|
||
component="div"
|
||
sx={{
|
||
fontWeight: 'bold',
|
||
color: '#ffffff',
|
||
fontSize: '1.5rem',
|
||
}}
|
||
>
|
||
{name}
|
||
</Typography>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
interface VersionInfo {
|
||
id: string;
|
||
name: string;
|
||
version: string;
|
||
imageUrl?: string;
|
||
config?: {
|
||
downloadUrl: string;
|
||
apiReleaseUrl: string;
|
||
versionFileName: string;
|
||
packName: string;
|
||
memory: number;
|
||
baseVersion: string;
|
||
serverIp: string;
|
||
fabricVersion: string;
|
||
preserveFiles: string[];
|
||
};
|
||
}
|
||
|
||
interface AvailableVersionInfo {
|
||
id: string;
|
||
name: string;
|
||
version: string;
|
||
imageUrl?: string;
|
||
config: {
|
||
downloadUrl: string;
|
||
apiReleaseUrl: string;
|
||
versionFileName: string;
|
||
packName: string;
|
||
memory: number;
|
||
baseVersion: string;
|
||
serverIp: string;
|
||
fabricVersion: string;
|
||
preserveFiles: string[];
|
||
};
|
||
}
|
||
|
||
// В компоненте VersionsExplorer
|
||
export const VersionsExplorer = () => {
|
||
const [installedVersions, setInstalledVersions] = useState<VersionInfo[]>([]);
|
||
const [availableVersions, setAvailableVersions] = useState<
|
||
AvailableVersionInfo[]
|
||
>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [modalOpen, setModalOpen] = useState(false);
|
||
const [downloadLoading, setDownloadLoading] = useState<string | null>(null);
|
||
const [hoveredCardId, setHoveredCardId] = useState<string | null>(null);
|
||
const navigate = useNavigate();
|
||
|
||
useEffect(() => {
|
||
const fetchVersions = async () => {
|
||
try {
|
||
setLoading(true);
|
||
|
||
// Получаем список установленных версий через IPC
|
||
const installedResult = await window.electron.ipcRenderer.invoke(
|
||
'get-installed-versions',
|
||
);
|
||
if (installedResult.success) {
|
||
setInstalledVersions(installedResult.versions);
|
||
}
|
||
|
||
// Получаем доступные версии с GitHub Gist
|
||
const availableResult = await window.electron.ipcRenderer.invoke(
|
||
'get-available-versions',
|
||
{
|
||
gistUrl:
|
||
'https://gist.githubusercontent.com/DIKER0K/06cd12fb3a4d08b1f0f8c763a7d05e06/raw/versions.json',
|
||
},
|
||
);
|
||
if (availableResult.success) {
|
||
setAvailableVersions(availableResult.versions);
|
||
}
|
||
} catch (error) {
|
||
console.error('Ошибка при загрузке версий:', error);
|
||
// Можно добавить обработку ошибки, например показать уведомление
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchVersions();
|
||
}, []);
|
||
|
||
const handleSelectVersion = (version: VersionInfo) => {
|
||
localStorage.setItem(
|
||
'selected_version_config',
|
||
JSON.stringify(version.config || {}),
|
||
);
|
||
navigate(`/launch/${version.id}`);
|
||
};
|
||
|
||
const handleAddVersion = () => {
|
||
setModalOpen(true);
|
||
};
|
||
|
||
const handleCloseModal = () => {
|
||
setModalOpen(false);
|
||
};
|
||
|
||
const handleDownloadVersion = async (version: AvailableVersionInfo) => {
|
||
try {
|
||
setDownloadLoading(version.id);
|
||
|
||
// Скачивание и установка выбранной версии
|
||
const downloadResult = await window.electron.ipcRenderer.invoke(
|
||
'download-and-extract',
|
||
{
|
||
downloadUrl: version.config.downloadUrl,
|
||
apiReleaseUrl: version.config.apiReleaseUrl,
|
||
versionFileName: version.config.versionFileName,
|
||
packName: version.id,
|
||
preserveFiles: version.config.preserveFiles || [],
|
||
},
|
||
);
|
||
|
||
if (downloadResult?.success) {
|
||
// Добавляем скачанную версию в список установленных
|
||
setInstalledVersions((prev) => [...prev, version]);
|
||
setModalOpen(false);
|
||
}
|
||
} catch (error) {
|
||
console.error(`Ошибка при скачивании версии ${version.id}:`, error);
|
||
} finally {
|
||
setDownloadLoading(null);
|
||
}
|
||
};
|
||
|
||
// Карточка добавления новой версии
|
||
const AddVersionCard = () => (
|
||
<Card
|
||
sx={{
|
||
backgroundColor: 'rgba(30, 30, 50, 0.8)',
|
||
backdropFilter: 'blur(10px)',
|
||
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',
|
||
overflow: 'hidden',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
cursor: 'pointer',
|
||
filter: hoveredCardId && hoveredCardId !== 'add' ? 'blur(5px)' : 'blur(0)',
|
||
transform: hoveredCardId === 'add' ? 'scale(1.03)' : 'scale(1)',
|
||
zIndex: hoveredCardId === 'add' ? 10 : 1,
|
||
'&:hover': {
|
||
boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
|
||
},
|
||
}}
|
||
onClick={handleAddVersion}
|
||
onMouseEnter={() => setHoveredCardId('add')}
|
||
onMouseLeave={() => setHoveredCardId(null)}
|
||
>
|
||
<AddIcon sx={{ fontSize: 60, color: '#fff' }} />
|
||
<Typography
|
||
variant="h6"
|
||
sx={{
|
||
color: '#fff',
|
||
}}
|
||
>
|
||
Добавить
|
||
</Typography>
|
||
<Typography
|
||
variant="h6"
|
||
sx={{
|
||
color: '#fff',
|
||
}}
|
||
>
|
||
версию
|
||
</Typography>
|
||
</Card>
|
||
);
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
paddingLeft: '5vw',
|
||
paddingRight: '5vw',
|
||
position: 'relative',
|
||
flexGrow: 1,
|
||
height: 'calc(100vh - 64px)',
|
||
overflow: 'hidden',
|
||
}}
|
||
>
|
||
{/* Глобальный фоновый слой для размытия всего интерфейса */}
|
||
<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,
|
||
pointerEvents: 'none',
|
||
}}
|
||
/>
|
||
|
||
{loading ? (
|
||
<Box display="flex" justifyContent="center" my={5}>
|
||
<CircularProgress />
|
||
</Box>
|
||
) : (
|
||
<Grid
|
||
container
|
||
spacing={3}
|
||
sx={{
|
||
width: '100%',
|
||
height: '100%',
|
||
overflowY: 'auto',
|
||
justifyContent: 'center',
|
||
alignContent: 'center',
|
||
position: 'relative',
|
||
zIndex: 6,
|
||
padding: '2vh 0',
|
||
}}
|
||
>
|
||
{/* Показываем установленные версии или дефолтную, если она есть */}
|
||
{installedVersions.length > 0 ? (
|
||
installedVersions.map((version) => (
|
||
<Grid
|
||
key={version.id}
|
||
item
|
||
xs={12}
|
||
sm={6}
|
||
md={4}
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
marginBottom: '2vh',
|
||
}}
|
||
>
|
||
<VersionCard
|
||
id={version.id}
|
||
name={version.name}
|
||
imageUrl={
|
||
version.imageUrl ||
|
||
'https://via.placeholder.com/300x140?text=Minecraft'
|
||
}
|
||
version={version.version}
|
||
onSelect={() => handleSelectVersion(version)}
|
||
isHovered={hoveredCardId === version.id}
|
||
onHover={setHoveredCardId}
|
||
hoveredCardId={hoveredCardId}
|
||
/>
|
||
</Grid>
|
||
))
|
||
) : (
|
||
// Если нет ни одной версии, показываем карточку добавления
|
||
<Grid
|
||
item
|
||
xs={12}
|
||
sm={6}
|
||
md={4}
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
marginBottom: '2vh',
|
||
}}
|
||
>
|
||
<AddVersionCard />
|
||
</Grid>
|
||
)}
|
||
|
||
{/* Всегда добавляем карточку для добавления новых версий */}
|
||
{installedVersions.length > 0 && (
|
||
<Grid
|
||
item
|
||
xs={12}
|
||
sm={6}
|
||
md={4}
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
marginBottom: '2vh',
|
||
}}
|
||
>
|
||
<AddVersionCard />
|
||
</Grid>
|
||
)}
|
||
</Grid>
|
||
)}
|
||
|
||
{/* Модальное окно для выбора версии для скачивания */}
|
||
<Modal
|
||
open={modalOpen}
|
||
onClose={handleCloseModal}
|
||
aria-labelledby="modal-versions"
|
||
aria-describedby="modal-available-versions"
|
||
>
|
||
<Box
|
||
sx={{
|
||
position: 'absolute',
|
||
top: '50%',
|
||
left: '50%',
|
||
transform: 'translate(-50%, -50%)',
|
||
width: 400,
|
||
maxHeight: '80vh',
|
||
overflowY: 'auto',
|
||
background: 'linear-gradient(45deg, #000000 10%, #3b4187 184.73%)',
|
||
border: '2px solid #000',
|
||
boxShadow: 24,
|
||
p: 4,
|
||
borderRadius: '3vw',
|
||
gap: '1vh',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
backdropFilter: 'blur(10px)',
|
||
}}
|
||
>
|
||
<Typography variant="h6" component="h2" sx={{ color: '#fff' }}>
|
||
Доступные версии для скачивания
|
||
</Typography>
|
||
|
||
{availableVersions.length === 0 ? (
|
||
<Typography sx={{ color: '#fff', mt: 2 }}>
|
||
Загрузка доступных версий...
|
||
</Typography>
|
||
) : (
|
||
<List sx={{ mt: 2 }}>
|
||
{availableVersions.map((version) => (
|
||
<ListItem
|
||
key={version.id}
|
||
sx={{
|
||
borderRadius: '8px',
|
||
mb: 1,
|
||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||
cursor: 'pointer',
|
||
'&:hover': {
|
||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||
},
|
||
}}
|
||
onClick={() => handleSelectVersion(version)}
|
||
>
|
||
<ListItemText
|
||
primary={version.name}
|
||
secondary={version.version}
|
||
primaryTypographyProps={{ color: '#fff' }}
|
||
secondaryTypographyProps={{
|
||
color: 'rgba(255,255,255,0.7)',
|
||
}}
|
||
/>
|
||
</ListItem>
|
||
))}
|
||
</List>
|
||
)}
|
||
|
||
<Button
|
||
onClick={handleCloseModal}
|
||
variant="outlined"
|
||
sx={{
|
||
mt: 3,
|
||
alignSelf: 'center',
|
||
borderColor: '#fff',
|
||
color: '#fff',
|
||
'&:hover': {
|
||
borderColor: '#ccc',
|
||
backgroundColor: 'rgba(255,255,255,0.1)',
|
||
},
|
||
}}
|
||
>
|
||
Закрыть
|
||
</Button>
|
||
</Box>
|
||
</Modal>
|
||
</Box>
|
||
);
|
||
};
|