ya xyi znaet che pisat, zaebalsya pridymivat

2025-07-21 22:32:40 +05:00
parent f201aaa894
commit 9746847ebf
7 changed files with 215 additions and 31 deletions
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@ -24,6 +24,7 @@ body {
  align-items: center;
  padding: 0;
  margin: 0;
+  user-select: none;
 }

 p {
--- a/src/renderer/components/CapeCard.tsx
+++ b/src/renderer/components/CapeCard.tsx
@ -11,7 +11,7 @@ import {
  Box,
  Chip,
 } from '@mui/material';
-
+import CustomTooltip from './CustomTooltip';
 // Тип для плаща с необязательными полями для обоих вариантов использования
 export interface CapeCardProps {
  cape: {
@ -60,7 +60,7 @@ 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)',
@ -122,6 +122,6 @@ export default function CapeCard({
          </Button>
        </CardActions>
      </Card>
-    </Tooltip>
+    </CustomTooltip>
  );
 }
--- a/src/renderer/components/CustomTooltip.tsx
+++ b/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;
--- a/src/renderer/components/TopBar.tsx
+++ b/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: {
@ -276,9 +276,11 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
      >
        {/* Кнопка регистрации, если на странице логина */}
        {username && (
-          <Tooltip
+          <CustomTooltip
            title="Попы — внутриигровая валюта, начисляемая за время игры на серверах."
            arrow
+            placement="bottom"
+            TransitionProps={{ timeout: 300 }}
          >
            <Box
              sx={{
@ -313,7 +315,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                {coins}
              </Typography>
            </Box>
-          </Tooltip>
+          </CustomTooltip>
        )}
        {isLoginPage && (
          <Button
--- a/src/renderer/pages/Marketplace.tsx
+++ b/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>

--- a/src/renderer/pages/Profile.tsx
+++ b/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',
                    },
                  }}
                >
--- a/src/renderer/pages/VersionsExplorer.tsx
+++ b/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,24 @@ export const VersionsExplorer = () => {
        alignItems: 'center',
        paddingLeft: '5vw',
        paddingRight: '5vw',
+        position: 'relative',
      }}
    >
+      {/* Глобальный фоновый слой для размытия всего интерфейса */}
+      <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 />
@ -270,6 +309,8 @@ export const VersionsExplorer = () => {
            width: '100%',
            overflowY: 'auto',
            justifyContent: 'center',
+            position: 'relative',
+            zIndex: 6, // Выше чем фоновый слой размытия
          }}
        >
          {/* Показываем установленные версии или дефолтную, если она есть */}
@ -288,6 +329,9 @@ export const VersionsExplorer = () => {
                  }
                  version={version.version}
                  onSelect={() => handleSelectVersion(version)}
+                  isHovered={hoveredCardId === version.id}
+                  onHover={setHoveredCardId}
+                  hoveredCardId={hoveredCardId}
                />
              </Grid>
            ))