add logout button

src/renderer/App.css

@@ -24,6 +24,7 @@ body {
   align-items: center;
   padding: 0;
   margin: 0;
+  user-select: none;
 }
 
 p {

src/renderer/components/CapeCard.tsx

@@ -11,7 +11,7 @@ import {
   Box,
   Chip,
 } from '@mui/material';
-
+import CustomTooltip from './CustomTooltip';
 // Тип для плаща с необязательными полями для обоих вариантов использования
 export interface CapeCardProps {
   cape: {
@@ -60,13 +60,14 @@ export default function CapeCard({
   const capeDescription = cape.cape_description || cape.description || '';
 
   return (
-    <Tooltip arrow title={capeDescription}>
+    <CustomTooltip arrow title={capeDescription}>
       <Card
         sx={{
           bgcolor: 'rgba(255, 255, 255, 0.05)',
           width: 200,
           overflow: 'hidden',
           position: 'relative', // для позиционирования ценника
+          borderRadius: '1vw',
         }}
       >
         {/* Ценник для магазина */}
@@ -97,7 +98,13 @@ export default function CapeCard({
           }}
         />
 
-        <CardContent sx={{ bgcolor: 'rgba(255, 255, 255, 0.05)', pt: '9vh' }}>
+        <CardContent
+          sx={{
+            bgcolor: 'rgba(255, 255, 255, 0.05)',
+            pt: '6vw',
+            minHeight: '5vw',
+          }}
+        >
           <Typography sx={{ color: 'white' }}>{capeName}</Typography>
         </CardContent>
 
@@ -108,8 +115,8 @@ export default function CapeCard({
             onClick={() => onAction(capeId)}
             disabled={actionDisabled}
             sx={{
-              borderRadius: '20px',
-              p: '5px 25px',
+              borderRadius: '2vw',
+              p: '0.5vw 2.5vw',
               color: 'white',
               backgroundColor: 'rgb(0, 134, 0)',
               '&:hover': {
@@ -122,6 +129,6 @@ export default function CapeCard({
           </Button>
         </CardActions>
       </Card>
-    </Tooltip>
+    </CustomTooltip>
   );
 }

src/renderer/components/CustomTooltip.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/jsx-props-no-spreading */
+
+import { styled } from '@mui/material/styles';
+import Tooltip, { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
+
+// Создаем кастомный стилизованный Tooltip с правильной типизацией
+const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: 'rgba(0, 0, 0, 1)',
+    color: 'white',
+    maxWidth: 300,
+    fontSize: '0.9vw',
+    border: '1px solid rgba(255, 77, 77, 0.5)',
+    borderRadius: '1vw',
+    padding: '1vw',
+    boxShadow:
+      '0 0 1vw rgba(255, 77, 77, 0.3), inset 0.8vw -0.8vw 2vw rgba(255, 77, 77, 0.15)',
+    fontFamily: 'Benzin-Bold',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: '1vw',
+      // background: 'linear-gradient(45deg, rgba(255, 77, 77, 0.1), transparent)',
+      zIndex: -1,
+    },
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: 'rgba(255, 77, 77, 0.5)',
+  },
+}));
+
+export default CustomTooltip;

src/renderer/components/TopBar.tsx

@@ -5,7 +5,7 @@ import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useEffect, useState } from 'react';
 import { Tooltip } from '@mui/material';
 import { fetchCoins } from '../api';
-
+import CustomTooltip from './CustomTooltip';
 declare global {
   interface Window {
     electron: {
@@ -102,6 +102,11 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
     }
   }, [username]);
 
+  const logout = () => {
+    localStorage.removeItem('launcher_config');
+    navigate('/login');
+  };
+
   return (
     <Box
       sx={{
@@ -274,11 +279,34 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
           marginRight: '1vw',
         }}
       >
+        {!isLoginPage && !isRegistrationPage && username && (
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={() => logout()}
+          sx={{
+            width: '10em',
+            height: '3em',
+            borderRadius: '1.5vw',
+            color: 'white',
+            backgroundImage: 'linear-gradient(to right, #7BB8FF, #FFB7ED)',
+            border: 'unset',
+            '&:hover': {
+              backgroundImage: 'linear-gradient(to right, #6AA8EE, #EEA7DD)',
+            },
+            boxShadow: '0.5em 0.5em 0.5em 0px #00000040 inset',
+          }}
+        >
+            Выйти
+          </Button>
+        )}
         {/* Кнопка регистрации, если на странице логина */}
-        {username && (
-          <Tooltip
+        {!isLoginPage && !isRegistrationPage && username && (
+          <CustomTooltip
             title="Попы — внутриигровая валюта, начисляемая за время игры на серверах."
             arrow
+            placement="bottom"
+            TransitionProps={{ timeout: 300 }}
           >
             <Box
               sx={{
@@ -313,7 +341,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                 {coins}
               </Typography>
             </Box>
-          </Tooltip>
+          </CustomTooltip>
         )}
         {isLoginPage && (
           <Button

src/renderer/pages/Marketplace.tsx

@@ -317,6 +317,21 @@ export default function Marketplace() {
               transition: 'all 0.3s ease',
             }}
           />
+          <Tab
+            label="Мои товары"
+            disableRipple={true}
+            sx={{
+              fontFamily: 'Benzin-Bold',
+              color: 'white',
+              '&.Mui-selected': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              '&:hover': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              transition: 'all 0.3s ease',
+            }}
+          />
         </Tabs>
       </Box>
 

src/renderer/pages/Profile.tsx

@@ -41,6 +41,9 @@ export default function Profile() {
   const [uuid, setUuid] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
 
+  const [viewerWidth, setViewerWidth] = useState(500);
+  const [viewerHeight, setViewerHeight] = useState(600);
+
   useEffect(() => {
     const savedConfig = localStorage.getItem('launcher_config');
     if (savedConfig) {
@@ -54,6 +57,25 @@ export default function Profile() {
     }
   }, []);
 
+  useEffect(() => {
+    // Функция для обновления размеров
+    const updateDimensions = () => {
+      setViewerWidth(window.innerWidth * 0.4); // 25vw
+      setViewerHeight(window.innerWidth * 0.5); // 30vw
+    };
+
+    // Вызываем один раз при монтировании
+    updateDimensions();
+
+    // Добавляем слушатель изменения размера окна
+    window.addEventListener('resize', updateDimensions);
+
+    // Очистка при размонтировании
+    return () => {
+      window.removeEventListener('resize', updateDimensions);
+    };
+  }, []);
+
   const loadPlayerData = async (uuid: string) => {
     try {
       setLoading(true);
@@ -182,7 +204,6 @@ export default function Profile() {
               p: 0,
               borderRadius: 2,
               overflow: 'hidden',
-              mb: 4,
               bgcolor: 'transparent',
             }}
           >
@@ -193,17 +214,20 @@ export default function Profile() {
                 alignSelf: 'center',
                 justifySelf: 'center',
                 textAlign: 'center',
-                width: '100%',
-                mb: '5vw',
+                mb: '2vw',
                 fontSize: '3vw',
                 color: 'white',
+                borderRadius: '3vw',
+                p: '0.5vw 5vw',
+                bgcolor: 'rgb(255, 77, 77)',
+                boxShadow: '0 0 1vw 0 rgba(0, 0, 0, 0.5)',
               }}
             >
               {username}
             </Typography>
             <SkinViewer
-              width={300}
-              height={400}
+              width={viewerWidth}
+              height={viewerHeight}
               skinUrl={skin}
               capeUrl={cape}
               walkingSpeed={walkingSpeed}
@@ -215,25 +239,26 @@ export default function Profile() {
             sx={{
               display: 'flex',
               flexDirection: 'column',
-              gap: 2,
+              gap: '1vw',
             }}
           >
             <Box
               sx={{
-                width: '100%',
-                maxWidth: '500px',
+                width: '40vw',
+                maxWidth: '40vw',
                 bgcolor: 'rgba(255, 255, 255, 0.05)',
                 padding: '3vw',
                 borderRadius: '1vw',
+                flexShrink: 0,
               }}
             >
               <Box
                 sx={{
                   border: '2px dashed',
                   borderColor: isDragOver ? 'primary.main' : 'grey.400',
-                  borderRadius: 2,
-                  p: 3,
-                  mb: 2,
+                  borderRadius: '1vw',
+                  p: '1.5vw',
+                  mb: '1vw',
                   textAlign: 'center',
                   cursor: 'pointer',
                   bgcolor: isDragOver
@@ -266,24 +291,83 @@ export default function Profile() {
               <FormControl
                 color="primary"
                 fullWidth
-                sx={{ mb: 2, color: 'white' }}
+                sx={{
+                  mb: '1vw',
+                  color: 'white',
+                  '&:hover .MuiInputLabel-root': {
+                    color: 'rgb(255, 77, 77)',
+                    transition: 'all 0.3s ease-in-out',
+                  },
+                }}
               >
-                <InputLabel sx={{ color: 'white' }}>Модель скина</InputLabel>
+                <InputLabel
+                  sx={{
+                    fontFamily: 'Benzin-Bold',
+                    color: 'white',
+                    '&.Mui-focused': {
+                      color: 'rgb(255, 77, 77)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    transform: 'translate(14px, -9px) scale(0.75)',
+                    '&.MuiInputLabel-shrink': {
+                      transform: 'translate(14px, -9px) scale(0.75)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                  }}
+                >
+                  Модель скина
+                </InputLabel>
                 <Select
                   value={skinModel}
                   label="Модель скина"
                   onChange={(e) => setSkinModel(e.target.value)}
+                  displayEmpty
                   sx={{
+                    border: 'none',
+                    '& .MuiSelect-select': {
+                      fontFamily: 'Benzin-Bold',
                       color: 'white',
-                    borderColor: 'white',
-                    '& .MuiInputBase-input': {
-                      border: '1px solid white',
-                      transition: 'unset',
+                      paddingTop: '1vw',
+                      paddingBottom: '1vw',
+                      transition: 'all 0.3s ease-in-out',
                     },
-                    '&:focus': {
-                      borderRadius: 4,
-                      borderColor: '#80bdff',
-                      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+                    '&:hover': {
+                      '& .MuiSelect-select': {
+                        color: 'rgb(255, 77, 77)',
+                        transition: 'all 0.3s ease-in-out',
+                      },
+                    },
+                    '&.Mui-focused': {
+                      '& .MuiSelect-select': {
+                        color: 'rgb(255, 77, 77)',
+                        transition: 'all 0.3s ease-in-out',
+                      },
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      borderRadius: '5vw',
+                      borderColor: 'rgb(255, 255, 255)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                      borderColor: 'rgb(255, 77, 77)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                      borderColor: 'rgb(255, 77, 77)',
+                      borderWidth: '2px',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '& .MuiSelect-icon': {
+                      color: 'white',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '&:hover .MuiSelect-icon': {
+                      color: 'rgb(255, 77, 77)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '&.Mui-focused .MuiSelect-icon': {
+                      color: 'rgb(255, 77, 77)',
+                      transition: 'all 0.3s ease-in-out',
                     },
                   }}
                 >
@@ -340,7 +424,7 @@ export default function Profile() {
                 display: 'flex',
                 justifyContent: 'center',
                 flexDirection: 'column',
-                gap: 2,
+                gap: '2vw',
               }}
             >
               <Typography>Ваши плащи</Typography>
@@ -348,7 +432,7 @@ export default function Profile() {
                 sx={{
                   display: 'flex',
                   flexDirection: 'row',
-                  gap: 2,
+                  gap: '2vw',
                   flexWrap: 'wrap',
                 }}
               >

src/renderer/pages/VersionsExplorer.tsx

@@ -25,14 +25,20 @@ interface VersionCardProps {
   imageUrl: string;
   version: string;
   onSelect: (id: string) => void;
+  isHovered: boolean;
+  onHover: (id: string | null) => void;
+  hoveredCardId: string | null;
 }
 
-const VersionCard: React.FC<VersionCardProps> = ({
+export const VersionCard: React.FC<VersionCardProps> = ({
   id,
   name,
   imageUrl,
   version,
   onSelect,
+  isHovered,
+  onHover,
+  hoveredCardId,
 }) => {
   return (
     <Card
@@ -47,11 +53,19 @@ const VersionCard: React.FC<VersionCardProps> = ({
         flexDirection: 'column',
         borderRadius: '16px',
         boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
-        transition: 'transform 0.3s, box-shadow 0.3s',
+        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={{
@@ -125,6 +139,7 @@ export const VersionsExplorer = () => {
   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(() => {
@@ -220,13 +235,21 @@ export const VersionsExplorer = () => {
         flexDirection: 'column',
         borderRadius: '16px',
         boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
-        transition: 'transform 0.3s, box-shadow 0.3s',
+        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
@@ -256,8 +279,27 @@ export const VersionsExplorer = () => {
         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 />
@@ -268,8 +310,13 @@ export const VersionsExplorer = () => {
           spacing={3}
           sx={{
             width: '100%',
+            height: '100%',
             overflowY: 'auto',
             justifyContent: 'center',
+            alignContent: 'center',
+            position: 'relative',
+            zIndex: 6,
+            padding: '2vh 0',
           }}
         >
           {/* Показываем установленные версии или дефолтную, если она есть */}
@@ -277,7 +324,15 @@ export const VersionsExplorer = () => {
             installedVersions.map((version) => (
               <Grid
                 key={version.id}
-                size={{ xs: 'auto', sm: 'auto', md: 'auto' }}
+                item
+                xs={12}
+                sm={6}
+                md={4}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  marginBottom: '2vh',
+                }}
               >
                 <VersionCard
                   id={version.id}
@@ -288,19 +343,42 @@ export const VersionsExplorer = () => {
                   }
                   version={version.version}
                   onSelect={() => handleSelectVersion(version)}
+                  isHovered={hoveredCardId === version.id}
+                  onHover={setHoveredCardId}
+                  hoveredCardId={hoveredCardId}
                 />
               </Grid>
             ))
           ) : (
             // Если нет ни одной версии, показываем карточку добавления
-            <Grid size={{ xs: 'auto', sm: 'auto', md: 'auto' }}>
+            <Grid
+              item
+              xs={12}
+              sm={6}
+              md={4}
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                marginBottom: '2vh',
+              }}
+            >
               <AddVersionCard />
             </Grid>
           )}
 
           {/* Всегда добавляем карточку для добавления новых версий */}
           {installedVersions.length > 0 && (
-            <Grid size={{ xs: 'auto', sm: 'auto', md: 'auto' }}>
+            <Grid
+              item
+              xs={12}
+              sm={6}
+              md={4}
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                marginBottom: '2vh',
+              }}
+            >
               <AddVersionCard />
             </Grid>
           )}