add: linear progress

src/renderer/pages/LaunchPage.tsx

@@ -1,4 +1,11 @@
-import { Box, Typography, Button, Snackbar, Alert } from '@mui/material';
+import {
+  Box,
+  Typography,
+  Button,
+  Snackbar,
+  Alert,
+  LinearProgress,
+} from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -18,6 +25,7 @@ const LaunchPage = () => {
   const navigate = useNavigate();
   const [isDownloading, setIsDownloading] = useState(false);
   const [downloadProgress, setDownloadProgress] = useState(0);
+  const [buffer, setBuffer] = useState(10);
   const [installStatus, setInstallStatus] = useState('');
   const [notification, setNotification] = useState<{
     open: boolean;
@@ -33,6 +41,22 @@ const LaunchPage = () => {
       navigate('/login');
     }
 
+    const progressListener = (...args: unknown[]) => {
+      const progress = args[0] as number;
+      setDownloadProgress(progress);
+      setBuffer(Math.min(progress + 10, 100));
+    };
+
+    window.electron.ipcRenderer.on('download-progress', progressListener);
+    window.electron.ipcRenderer.on(
+      'installation-status',
+      (...args: unknown[]) => {
+        const status = args[0] as { step: string; message: string };
+        setInstallStep(status.step);
+        setInstallMessage(status.message);
+      },
+    );
+
     return () => {
       window.electron.ipcRenderer.removeAllListeners('download-progress');
       window.electron.ipcRenderer.removeAllListeners('installation-progress');
@@ -60,13 +84,12 @@ const LaunchPage = () => {
     try {
       setIsDownloading(true);
       setDownloadProgress(0);
+      setBuffer(10);
 
-      // Загружаем настройки и токены
       const savedConfig = JSON.parse(
         localStorage.getItem('launcher_config') || '{}',
       );
 
-      // Сначала проверяем и обновляем файлы
       const downloadResult = await window.electron.ipcRenderer.invoke(
         'download-and-extract',
       );
@@ -84,7 +107,6 @@ const LaunchPage = () => {
           );
         }
 
-        // Затем запускаем Minecraft с данными авторизации
         const launchResult = await window.electron.ipcRenderer.invoke(
           'launch-minecraft',
           {
@@ -108,15 +130,32 @@ const LaunchPage = () => {
   };
 
   return (
-    <Box sx={{ p: 3 }}>
+    <Box sx={{ p: 3, display: 'flex', flexDirection: 'column' }}>
       <Typography variant="h4" sx={{ mb: 3 }}>
         Добро пожаловать в лаунчер
       </Typography>
 
       {isDownloading ? (
-        <Box sx={{ mb: 3 }}>
+        <Box sx={{ mb: 3, width: '100%' }}>
-          <Typography>Загрузка и установка: {downloadProgress}%</Typography>
+          {/* <Typography sx={{ mb: 1 }}>
-          {installMessage && (
+            Загрузка и установка: {downloadProgress}%
+          </Typography> */}
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Box sx={{ width: '100%', mr: 1 }}>
+              <LinearProgress
+                variant="buffer"
+                value={downloadProgress}
+                valueBuffer={buffer}
+              />
+            </Box>
+            <Box sx={{ minWidth: 35 }}>
+              <Typography
+                variant="body2"
+                sx={{ color: 'white' }}
+              >{`${Math.round(downloadProgress)}%`}</Typography>
+            </Box>
+          </Box>
+          {/* {installMessage && (
             <Typography variant="body1" sx={{ mt: 1, color: 'white' }}>
               {installMessage}
             </Typography>
@@ -125,7 +164,7 @@ const LaunchPage = () => {
             <Typography variant="body2" sx={{ color: 'white' }}>
               Шаг: {installStep}
             </Typography>
-          )}
+          )} */}
         </Box>
       ) : (
         <Button