add: VersionExplorer, don't work first run Minecraft
This commit is contained in:
268
src/renderer/pages/VersionsExplorer.tsx
Normal file
268
src/renderer/pages/VersionsExplorer.tsx
Normal file
@ -0,0 +1,268 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Grid,
|
||||
Card,
|
||||
CardMedia,
|
||||
CardContent,
|
||||
CardActions,
|
||||
Button,
|
||||
CircularProgress,
|
||||
} from '@mui/material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
interface VersionCardProps {
|
||||
id: string;
|
||||
name: string;
|
||||
imageUrl: string;
|
||||
version: string;
|
||||
onSelect: (id: string) => void;
|
||||
}
|
||||
|
||||
const VersionCard: React.FC<VersionCardProps> = ({
|
||||
id,
|
||||
name,
|
||||
imageUrl,
|
||||
version,
|
||||
onSelect,
|
||||
}) => {
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
backgroundColor: 'rgba(30, 30, 50, 0.8)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
borderRadius: '16px',
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
|
||||
transition: 'transform 0.3s, box-shadow 0.3s',
|
||||
overflow: 'hidden',
|
||||
'&:hover': {
|
||||
transform: 'translateY(-8px)',
|
||||
boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ position: 'relative', overflow: 'hidden', width: '100%' }}>
|
||||
<CardMedia
|
||||
component="img"
|
||||
height="180"
|
||||
image={'https://placehold.co/300x140?text=' + name}
|
||||
alt={name}
|
||||
sx={{
|
||||
transition: 'transform 0.5s',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.05)',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.6)',
|
||||
color: '#fff',
|
||||
padding: '4px 12px',
|
||||
borderBottomLeftRadius: '12px',
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" fontWeight="bold">
|
||||
{version}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<CardContent sx={{ flexGrow: 1, padding: '16px' }}>
|
||||
<Typography
|
||||
gutterBottom
|
||||
variant="h5"
|
||||
component="div"
|
||||
sx={{
|
||||
fontWeight: 'bold',
|
||||
color: '#ffffff',
|
||||
fontSize: '1.5rem',
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
marginBottom: '12px',
|
||||
}}
|
||||
>
|
||||
Версия: {version}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
|
||||
<CardActions sx={{ padding: '0 16px 16px' }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => onSelect(id)}
|
||||
sx={{
|
||||
borderRadius: '12px',
|
||||
textTransform: 'none',
|
||||
fontWeight: 'bold',
|
||||
padding: '10px 0',
|
||||
background: 'linear-gradient(90deg, #3a7bd5, #6d5bf1)',
|
||||
'&:hover': {
|
||||
background: 'linear-gradient(90deg, #4a8be5, #7d6bf1)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Играть
|
||||
</Button>
|
||||
</CardActions>
|
||||
</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[];
|
||||
};
|
||||
}
|
||||
|
||||
// В компоненте VersionsExplorer
|
||||
export const VersionsExplorer = () => {
|
||||
const [versions, setVersions] = useState<VersionInfo[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchVersions = async () => {
|
||||
try {
|
||||
const result = await window.electron.ipcRenderer.invoke(
|
||||
'get-available-versions',
|
||||
);
|
||||
if (result.success) {
|
||||
// Для каждой версии получаем её конфигурацию
|
||||
const versionsWithConfig = await Promise.all(
|
||||
result.versions.map(async (version: VersionInfo) => {
|
||||
const configResult = await window.electron.ipcRenderer.invoke(
|
||||
'get-version-config',
|
||||
{ versionId: version.id },
|
||||
);
|
||||
|
||||
return {
|
||||
...version,
|
||||
config: configResult.success ? configResult.config : undefined,
|
||||
};
|
||||
}),
|
||||
);
|
||||
|
||||
setVersions(versionsWithConfig);
|
||||
} else {
|
||||
console.error('Ошибка получения версий:', result.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка при запросе версий:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchVersions();
|
||||
}, []);
|
||||
|
||||
const handleSelectVersion = (version: VersionInfo) => {
|
||||
// Сохраняем конфигурацию в localStorage для использования в LaunchPage
|
||||
localStorage.setItem(
|
||||
'selected_version_config',
|
||||
JSON.stringify(version.config || {}),
|
||||
);
|
||||
navigate(`/launch/${version.id}`);
|
||||
};
|
||||
|
||||
// Тестовая версия, если нет доступных
|
||||
const displayVersions =
|
||||
versions.length > 0
|
||||
? versions
|
||||
: [
|
||||
{
|
||||
id: 'Comfort',
|
||||
name: 'Comfort',
|
||||
version: '1.21.4-fabric0.16.14',
|
||||
imageUrl: 'https://via.placeholder.com/300x140?text=Comfort',
|
||||
config: {
|
||||
downloadUrl:
|
||||
'https://github.com/DIKER0K/Comfort/releases/latest/download/Comfort.zip',
|
||||
apiReleaseUrl:
|
||||
'https://api.github.com/repos/DIKER0K/Comfort/releases/latest',
|
||||
versionFileName: 'comfort_version.txt',
|
||||
packName: 'Comfort',
|
||||
memory: 4096,
|
||||
baseVersion: '1.21.4',
|
||||
serverIp: 'popa-popa.ru',
|
||||
fabricVersion: '0.16.14',
|
||||
preserveFiles: ['popa-launcher-config.json'],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100vw',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4" sx={{ mb: 4 }}>
|
||||
Доступные версии
|
||||
</Typography>
|
||||
|
||||
{loading ? (
|
||||
<Box display="flex" justifyContent="center" my={5}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : (
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{displayVersions.map((version) => (
|
||||
<Grid key={version.id} size={{ xs: 12, sm: 6, md: 4 }}>
|
||||
<VersionCard
|
||||
id={version.id}
|
||||
name={version.name}
|
||||
imageUrl={
|
||||
version.imageUrl ||
|
||||
'https://via.placeholder.com/300x140?text=Minecraft'
|
||||
}
|
||||
version={version.version}
|
||||
onSelect={() => handleSelectVersion(version)}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user