add: shop capes and refactor cape card

2025-07-19 01:36:33 +05:00
parent 26f601635b
commit 56da7c7543
4 changed files with 315 additions and 62 deletions
--- a/src/renderer/components/CapeCard.tsx
+++ b/src/renderer/components/CapeCard.tsx
@ -0,0 +1,117 @@
+// src/renderer/components/CapeCard.tsx
+import React from 'react';
+import {
+  Card,
+  CardMedia,
+  CardContent,
+  Typography,
+  CardActions,
+  Button,
+  Tooltip,
+  Box,
+  Chip,
+} from '@mui/material';
+
+// Тип для плаща с необязательными полями для обоих вариантов использования
+export interface CapeCardProps {
+  cape: {
+    cape_id?: string;
+    id?: string;
+    cape_name?: string;
+    name?: string;
+    cape_description?: string;
+    description?: string;
+    image_url: string;
+    is_active?: boolean;
+    price?: number;
+    purchased_at?: string;
+  };
+  mode: 'profile' | 'shop';
+  onAction: (capeId: string) => void;
+  actionDisabled?: boolean;
+}
+
+export default function CapeCard({
+  cape,
+  mode,
+  onAction,
+  actionDisabled = false,
+}: CapeCardProps) {
+  // Определяем текст и цвет кнопки в зависимости от режима
+  const getActionButton = () => {
+    if (mode === 'shop') {
+      return {
+        text: 'Купить',
+        color: 'primary',
+      };
+    } else {
+      // Профиль
+      return cape.is_active
+        ? { text: 'Снять', color: 'error' }
+        : { text: 'Надеть', color: 'success' };
+    }
+  };
+
+  const actionButton = getActionButton();
+
+  // В функции компонента добавьте нормализацию данных
+  const capeId = cape.cape_id || cape.id || '';
+  const capeName = cape.cape_name || cape.name || '';
+  const capeDescription = cape.cape_description || cape.description || '';
+
+  return (
+    <Tooltip arrow title={capeDescription}>
+      <Card
+        sx={{
+          bgcolor: 'rgba(255, 255, 255, 0.05)',
+          width: 200,
+          overflow: 'hidden',
+          position: 'relative', // для позиционирования ценника
+        }}
+      >
+        {/* Ценник для магазина */}
+        {mode === 'shop' && cape.price !== undefined && (
+          <Chip
+            label={`${cape.price} коинов`}
+            sx={{
+              position: 'absolute',
+              top: 8,
+              right: 8,
+              zIndex: 2,
+              bgcolor: 'rgba(0, 0, 0, 0.7)',
+              color: 'white',
+              fontWeight: 'bold',
+            }}
+          />
+        )}
+
+        <CardMedia
+          component="img"
+          image={cape.image_url}
+          alt={capeName}
+          sx={{
+            display: 'block',
+            width: '100%',
+            transform: 'scale(2.9) translateX(66px) translateY(32px)',
+            imageRendering: 'pixelated',
+          }}
+        />
+
+        <CardContent sx={{ bgcolor: 'rgba(255, 255, 255, 0.05)', pt: '9vh' }}>
+          <Typography sx={{ color: 'white' }}>{capeName}</Typography>
+        </CardContent>
+
+        <CardActions sx={{ display: 'flex', justifyContent: 'center' }}>
+          <Button
+            variant="contained"
+            color={actionButton.color as 'primary' | 'success' | 'error'}
+            onClick={() => onAction(capeId)}
+            disabled={actionDisabled}
+          >
+            {actionButton.text}
+          </Button>
+        </CardActions>
+      </Card>
+    </Tooltip>
+  );
+}