diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index c9e45c5..c18ce52 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -18,6 +18,7 @@ import Profile from './pages/Profile'; import Shop from './pages/Shop'; import Marketplace from './pages/Marketplace'; import { Registration } from './pages/Registration'; +import { FullScreenLoader } from './components/FullScreenLoader'; const AuthCheck = ({ children }: { children: ReactNode }) => { const [isAuthenticated, setIsAuthenticated] = useState(null); @@ -86,7 +87,7 @@ const AuthCheck = ({ children }: { children: ReactNode }) => { }; if (isAuthenticated === null) { - return
Loading...
; + return ; } return isAuthenticated ? children : ; @@ -127,7 +128,10 @@ const App = () => { - } /> + } + /> } /> ; + return ; } if (error) { diff --git a/src/renderer/components/FullScreenLoader.tsx b/src/renderer/components/FullScreenLoader.tsx index b0b0542..cbed7ed 100644 --- a/src/renderer/components/FullScreenLoader.tsx +++ b/src/renderer/components/FullScreenLoader.tsx @@ -1,59 +1,72 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -export const FullScreenLoader = ({ message }: { message?: string }) => ( - - {/* Градиентное вращающееся кольцо */} - { + const containerSx = fullScreen + ? { + position: 'fixed' as const, + inset: 0, + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + gap: 3, + zIndex: 9999, + pointerEvents: 'none' as const, + } + : { + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + gap: 3, + width: '100%', + height: '100%', + }; - animation: 'spin 1s linear infinite', - - // создаём отверстие внутри маской - WebkitMask: 'radial-gradient(circle, transparent 55%, black 56%)', - mask: 'radial-gradient(circle, transparent 55%, black 56%)', - - '@keyframes spin': { - '0%': { transform: 'rotate(0deg)' }, - '100%': { transform: 'rotate(360deg)' }, - }, - }} - /> - - {message && ( - + {/* Градиентное вращающееся кольцо */} + - {message} - - )} - -); + /> + + {message && ( + + {message} + + )} + + ); +}; diff --git a/src/renderer/components/PlayerInventory.tsx b/src/renderer/components/PlayerInventory.tsx index 4d7d34c..eb22286 100644 --- a/src/renderer/components/PlayerInventory.tsx +++ b/src/renderer/components/PlayerInventory.tsx @@ -8,7 +8,6 @@ import { CardMedia, CardContent, Button, - CircularProgress, Dialog, DialogTitle, DialogContent, @@ -22,6 +21,7 @@ import { sellItem, PlayerInventoryItem, } from '../api'; +import { FullScreenLoader } from './FullScreenLoader'; interface PlayerInventoryProps { username: string; @@ -223,9 +223,7 @@ export default function PlayerInventory({ )} {loading ? ( - - - + ) : ( <> {inventoryItems.length === 0 ? ( @@ -266,7 +264,13 @@ export default function PlayerInventory({ alt={item.material} /> - + {getItemDisplayName(item.material)} @@ -363,7 +367,7 @@ export default function PlayerInventory({ color="primary" disabled={sellLoading} > - {sellLoading ? : 'Продать'} + {sellLoading ? : 'Продать'} diff --git a/src/renderer/components/ServerStatus/ServerStatus.tsx b/src/renderer/components/ServerStatus/ServerStatus.tsx index fc1a46e..098b221 100644 --- a/src/renderer/components/ServerStatus/ServerStatus.tsx +++ b/src/renderer/components/ServerStatus/ServerStatus.tsx @@ -1,4 +1,4 @@ -import { Box, Typography, CircularProgress, Avatar } from '@mui/material'; +import { Box, Typography, Avatar } from '@mui/material'; import { useEffect, useState } from 'react'; interface ServerStatusProps { diff --git a/src/renderer/pages/Login.tsx b/src/renderer/pages/Login.tsx index 888e0fc..4f5e294 100644 --- a/src/renderer/pages/Login.tsx +++ b/src/renderer/pages/Login.tsx @@ -8,7 +8,11 @@ import useConfig from '../hooks/useConfig'; import { useState } from 'react'; import { FullScreenLoader } from '../components/FullScreenLoader'; -const Login = () => { +interface LoginProps { + onLoginSuccess?: (username: string) => void; +} + +const Login = ({ onLoginSuccess }: LoginProps) => { const navigate = useNavigate(); const { config, setConfig, saveConfig, handleInputChange } = useConfig(); const { status, validateSession, refreshSession, authenticateWithElyBy } = @@ -88,6 +92,11 @@ const Login = () => { } console.log('Авторизация успешно завершена'); + + if (onLoginSuccess) { + onLoginSuccess(config.username); + } + navigate('/'); } catch (error: any) { console.log(`ОШИБКА при авторизации: ${error.message}`); diff --git a/src/renderer/pages/Marketplace.tsx b/src/renderer/pages/Marketplace.tsx index a750f93..3411710 100644 --- a/src/renderer/pages/Marketplace.tsx +++ b/src/renderer/pages/Marketplace.tsx @@ -3,7 +3,6 @@ import { useEffect, useState } from 'react'; import { Box, Typography, - CircularProgress, Button, Grid, Card, @@ -18,6 +17,7 @@ import { import { isPlayerOnline, getPlayerServer } from '../utils/playerOnlineCheck'; import { buyItem, fetchMarketplace, MarketplaceResponse, Server } from '../api'; import PlayerInventory from '../components/PlayerInventory'; +import { FullScreenLoader } from '../components/FullScreenLoader'; interface TabPanelProps { children?: React.ReactNode; @@ -195,14 +195,14 @@ export default function Marketplace() { flexDirection: 'column', alignItems: 'center', justifyContent: 'center', - height: '100%', + height: '20vh', gap: 2, }} > - - - Проверяем, находитесь ли вы на сервере... - + ); } @@ -339,7 +339,7 @@ export default function Marketplace() { {marketLoading ? ( - + ) : !marketItems || marketItems.items.length === 0 ? ( diff --git a/src/renderer/pages/Profile.tsx b/src/renderer/pages/Profile.tsx index 8f5edd8..9f6d898 100644 --- a/src/renderer/pages/Profile.tsx +++ b/src/renderer/pages/Profile.tsx @@ -19,10 +19,10 @@ import { Select, MenuItem, Alert, - CircularProgress, } from '@mui/material'; import CapeCard from '../components/CapeCard'; +import { FullScreenLoader } from '../components/FullScreenLoader'; export default function Profile() { const fileInputRef = useRef(null); @@ -195,7 +195,7 @@ export default function Profile() { }} > {loading ? ( - + ) : ( <> + ) : null } > {uploadStatus === 'loading' ? ( - Загрузка... + ) : ( Установить скин diff --git a/src/renderer/pages/Registration.tsx b/src/renderer/pages/Registration.tsx index fc58563..e04b7f9 100644 --- a/src/renderer/pages/Registration.tsx +++ b/src/renderer/pages/Registration.tsx @@ -12,7 +12,6 @@ import { TextField, Button, Snackbar, - CircularProgress, } from '@mui/material'; import LoginRoundedIcon from '@mui/icons-material/LoginRounded'; import VerifiedRoundedIcon from '@mui/icons-material/VerifiedRounded'; @@ -25,6 +24,7 @@ import { import QRCodeStyling from 'qr-code-styling'; import popalogo from '../../../assets/icons/popa-popa.svg'; import GradientTextField from '../components/GradientTextField'; +import { FullScreenLoader } from '../components/FullScreenLoader'; const ColorlibConnector = styled(StepConnector)(({ theme }) => ({ [`&.${stepConnectorClasses.alternativeLabel}`]: { @@ -34,7 +34,7 @@ const ColorlibConnector = styled(StepConnector)(({ theme }) => ({ [`& .${stepConnectorClasses.line}`]: { backgroundImage: //'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)', - 'linear-gradient( 95deg,rgb(150,150,150) 0%, rgb(242,113,33) 80%,rgb(233,64,87) 110%,rgb(138,35,135) 150%)' + 'linear-gradient( 95deg,rgb(150,150,150) 0%, rgb(242,113,33) 80%,rgb(233,64,87) 110%,rgb(138,35,135) 150%)', }, }, [`&.${stepConnectorClasses.completed}`]: { @@ -46,7 +46,8 @@ const ColorlibConnector = styled(StepConnector)(({ theme }) => ({ [`& .${stepConnectorClasses.line}`]: { height: 3, border: 0, - backgroundImage: 'linear-gradient( 275deg,rgb(150,150,150) 0%, rgb(242,113,33) 80%,rgb(233,64,87) 110%,rgb(138,35,135) 150%)', + backgroundImage: + 'linear-gradient( 275deg,rgb(150,150,150) 0%, rgb(242,113,33) 80%,rgb(233,64,87) 110%,rgb(138,35,135) 150%)', borderRadius: 1, transition: 'background-image 1s ease, background-color 1s ease', ...theme.applyStyles('dark', { @@ -84,8 +85,7 @@ const ColorlibStepIconRoot = styled('div')<{ { props: ({ ownerState }) => ownerState.completed, style: { - backgroundImage: - '#adadad', + backgroundImage: '#adadad', }, }, ], @@ -282,7 +282,7 @@ export const Registration = () => { sx={{ position: 'absolute', top: '10%', - }} // чтобы отделить степпер от формы + }} // чтобы отделить степпер от формы > {steps.map((label) => ( @@ -311,7 +311,15 @@ export const Registration = () => { ))} - + {activeStep === 0 && ( { transition: 'transform 0.3s ease', width: '60%', mt: 2, - background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)', + background: + 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)', fontFamily: 'Benzin-Bold', borderRadius: '2.5vw', fontSize: '2vw', '&:hover': { transform: 'scale(1.1)', - }, }} onClick={handleCreateAccount} @@ -389,13 +397,13 @@ export const Registration = () => { transition: 'transform 0.3s ease', width: '60%', mt: 2, - background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)', + background: + 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)', fontFamily: 'Benzin-Bold', borderRadius: '2.5vw', fontSize: '2vw', '&:hover': { transform: 'scale(1.1)', - }, }} onClick={handleOpenBot} @@ -425,10 +433,10 @@ export const Registration = () => { {verificationCode} Ждем ответа от бота - + ) : ( - + )} )} diff --git a/src/renderer/pages/Shop.tsx b/src/renderer/pages/Shop.tsx index 0371157..65d29e1 100644 --- a/src/renderer/pages/Shop.tsx +++ b/src/renderer/pages/Shop.tsx @@ -9,6 +9,7 @@ import { StoreCape, } from '../api'; import { useEffect, useState } from 'react'; +import { FullScreenLoader } from '../components/FullScreenLoader'; export default function Shop() { const [storeCapes, setStoreCapes] = useState([]); @@ -88,7 +89,7 @@ export default function Shop() { }} > {loading ? ( - Загрузка... + ) : ( { /> {loading ? ( - - - + ) : (