new style CaseRoulette
This commit is contained in:
@ -16,13 +16,18 @@ interface CaseRouletteProps {
|
||||
const ITEM_WIDTH = 110;
|
||||
const ITEM_GAP = 8;
|
||||
const VISIBLE_ITEMS = 21;
|
||||
const CENTER_INDEX = Math.floor(VISIBLE_ITEMS / 2);
|
||||
const CONTAINER_WIDTH = 800;
|
||||
const LINE_X = CONTAINER_WIDTH / 2;
|
||||
|
||||
const ANIMATION_DURATION = 10; // секунды
|
||||
const ANIMATION_DURATION_MS = ANIMATION_DURATION * 1000;
|
||||
|
||||
// Удаляем майнкрафтовские цвет-коды (§a, §b, §l и т.д.)
|
||||
function stripMinecraftColors(text?: string | null): string {
|
||||
if (!text) return '';
|
||||
return text.replace(/§[0-9A-FK-ORa-fk-or]/g, '');
|
||||
}
|
||||
|
||||
function getRarityByWeight(weight?: number): Rarity {
|
||||
if (weight === undefined || weight === null) return 'common';
|
||||
if (weight <= 5) return 'legendary';
|
||||
@ -42,7 +47,7 @@ function getRarityColor(weight?: number): string {
|
||||
return 'rgba(65, 105, 225, 1)';
|
||||
case 'common':
|
||||
default:
|
||||
return 'rgba(255, 255, 255, 0.25)';
|
||||
return 'rgba(255, 255, 255, 0.6)';
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,8 +66,9 @@ export default function CaseRoulette({
|
||||
const animationTimeoutRef = useRef<NodeJS.Timeout>();
|
||||
const finishTimeoutRef = useRef<NodeJS.Timeout>();
|
||||
|
||||
const winningName =
|
||||
const winningNameRaw =
|
||||
reward?.meta?.display_name || reward?.name || reward?.material || '';
|
||||
const winningName = stripMinecraftColors(winningNameRaw);
|
||||
|
||||
// Измеряем реальные ширины элементов
|
||||
const measureItemWidths = useCallback((): number[] => {
|
||||
@ -121,10 +127,8 @@ export default function CaseRoulette({
|
||||
winPosition * (ITEM_WIDTH + ITEM_GAP) + ITEM_WIDTH / 2;
|
||||
|
||||
const finalOffset = centerItemCenter - LINE_X;
|
||||
// стартовая позиция чуть левее финальной (едем вправо к ней)
|
||||
const initialOffset = Math.max(finalOffset - extraDistance, 0);
|
||||
|
||||
// ставим ленту далеко "слева", чтобы она много проехала
|
||||
setOffset(initialOffset);
|
||||
|
||||
animationTimeoutRef.current = setTimeout(() => {
|
||||
@ -132,7 +136,6 @@ export default function CaseRoulette({
|
||||
setOffset(finalOffset);
|
||||
}, 50);
|
||||
|
||||
// 7 секунд анимации + небольшой запас
|
||||
finishTimeoutRef.current = setTimeout(() => {
|
||||
setAnimationFinished(true);
|
||||
}, ANIMATION_DURATION_MS + 200);
|
||||
@ -148,7 +151,6 @@ export default function CaseRoulette({
|
||||
const centerItemCenter = cumulativeOffset + widths[winPosition] / 2;
|
||||
|
||||
const finalOffset = centerItemCenter - LINE_X;
|
||||
// стартовая позиция чуть левее финальной (едем вправо к ней)
|
||||
const initialOffset = Math.max(finalOffset - extraDistance, 0);
|
||||
|
||||
setOffset(initialOffset);
|
||||
@ -194,16 +196,31 @@ export default function CaseRoulette({
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
bgcolor: 'rgba(15, 15, 20, 0.95)',
|
||||
borderRadius: '1vw',
|
||||
bgcolor: 'rgba(5, 5, 10, 0.96)',
|
||||
borderRadius: '24px',
|
||||
border: '1px solid rgba(255,255,255,0.12)',
|
||||
boxShadow: '0 25px 80px rgba(0,0,0,0.8)',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogContent>
|
||||
<DialogContent
|
||||
sx={{
|
||||
px: 3,
|
||||
py: 3.5,
|
||||
background:
|
||||
'radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 60%)',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="white"
|
||||
sx={{ textAlign: 'center', mb: 2 }}
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
mb: 2.5,
|
||||
fontFamily: 'Benzin-Bold',
|
||||
letterSpacing: 0.5,
|
||||
}}
|
||||
>
|
||||
Открытие кейса {caseName}
|
||||
</Typography>
|
||||
@ -212,15 +229,31 @@ export default function CaseRoulette({
|
||||
sx={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
borderRadius: '1vw',
|
||||
border: '2px solid rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: '18px',
|
||||
border: '1px solid rgba(255, 255, 255, 0.15)',
|
||||
px: 2,
|
||||
py: 3,
|
||||
width: `${CONTAINER_WIDTH}px`,
|
||||
maxWidth: '100%',
|
||||
mx: 'auto',
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(10,10,20,0.9), rgba(25,25,45,0.9))',
|
||||
backdropFilter: 'blur(18px)',
|
||||
boxShadow: '0 0 40px rgba(0,0,0,0.7)',
|
||||
}}
|
||||
>
|
||||
{/* затемнённые края */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
pointerEvents: 'none',
|
||||
background:
|
||||
'linear-gradient(90deg, rgba(0,0,0,0.7) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.7) 100%)',
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Линия центра */}
|
||||
<Box
|
||||
sx={{
|
||||
@ -230,7 +263,8 @@ export default function CaseRoulette({
|
||||
left: `${LINE_X}px`,
|
||||
transform: 'translateX(-1px)',
|
||||
width: '2px',
|
||||
bgcolor: 'rgba(255, 77, 77, 0.8)',
|
||||
bgcolor: 'rgba(255, 77, 77, 0.9)',
|
||||
boxShadow: '0 0 18px rgba(255,77,77,0.9)',
|
||||
zIndex: 2,
|
||||
}}
|
||||
/>
|
||||
@ -246,6 +280,8 @@ export default function CaseRoulette({
|
||||
transition: animating
|
||||
? `transform ${ANIMATION_DURATION}s cubic-bezier(0.15, 0.85, 0.25, 1)`
|
||||
: 'none',
|
||||
position: 'relative',
|
||||
zIndex: 0,
|
||||
}}
|
||||
>
|
||||
{sequence.map((item, index) => {
|
||||
@ -253,6 +289,15 @@ export default function CaseRoulette({
|
||||
const isWinningItem =
|
||||
animationFinished && index === Math.floor(sequence.length / 2);
|
||||
|
||||
const rawName =
|
||||
item.meta?.display_name ||
|
||||
item.name ||
|
||||
item.material
|
||||
.replace(/_/g, ' ')
|
||||
.toLowerCase()
|
||||
.replace(/\b\w/g, (l) => l.toUpperCase());
|
||||
const displayName = stripMinecraftColors(rawName);
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={index}
|
||||
@ -260,19 +305,22 @@ export default function CaseRoulette({
|
||||
sx={{
|
||||
minWidth: `${ITEM_WIDTH}px`,
|
||||
width: 'auto',
|
||||
height: '120px',
|
||||
borderRadius: '0.7vw',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.04)',
|
||||
height: '130px',
|
||||
borderRadius: '14px',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.03)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: isWinningItem
|
||||
? `3px solid ${color}`
|
||||
? `2px solid ${color}`
|
||||
: `1px solid ${color}`,
|
||||
boxShadow: isWinningItem ? `0 0 20px ${color}` : 'none',
|
||||
boxShadow: isWinningItem
|
||||
? `0 0 22px ${color}`
|
||||
: '0 0 8px rgba(0,0,0,0.6)',
|
||||
transition: 'all 0.3s ease',
|
||||
padding: '0 10px',
|
||||
transform: isWinningItem ? 'scale(1.08)' : 'scale(1)',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -280,8 +328,8 @@ export default function CaseRoulette({
|
||||
src={`https://cdn.minecraft.popa-popa.ru/textures/${item.material.toLowerCase()}.png`}
|
||||
alt={item.material}
|
||||
sx={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
width: '52px',
|
||||
height: '52px',
|
||||
objectFit: 'contain',
|
||||
imageRendering: 'pixelated',
|
||||
mb: 1,
|
||||
@ -292,19 +340,14 @@ export default function CaseRoulette({
|
||||
sx={{
|
||||
color: 'white',
|
||||
textAlign: 'center',
|
||||
fontSize: '0.7rem',
|
||||
fontSize: '0.72rem',
|
||||
maxWidth: '100px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{item.meta?.display_name ||
|
||||
item.name ||
|
||||
item.material
|
||||
.replace(/_/g, ' ')
|
||||
.toLowerCase()
|
||||
.replace(/\b\w/g, (l) => l.toUpperCase())}
|
||||
{displayName}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
@ -318,7 +361,7 @@ export default function CaseRoulette({
|
||||
color="white"
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
mt: 2,
|
||||
mt: 2.5,
|
||||
animation: 'fadeIn 0.5s ease',
|
||||
}}
|
||||
>
|
||||
@ -340,16 +383,21 @@ export default function CaseRoulette({
|
||||
variant="contained"
|
||||
onClick={onClose}
|
||||
sx={{
|
||||
borderRadius: '20px',
|
||||
p: '0.5vw 2.5vw',
|
||||
borderRadius: '999px',
|
||||
px: '2.8vw',
|
||||
py: '0.6vw',
|
||||
color: 'white',
|
||||
backgroundColor: 'rgb(255, 77, 77)',
|
||||
background:
|
||||
'linear-gradient(135deg, rgb(255, 77, 77), rgb(255, 120, 100))',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(255, 77, 77, 0.5)',
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(255, 77, 77, 0.8), rgba(255, 120, 100, 0.8))',
|
||||
},
|
||||
fontFamily: 'Benzin-Bold',
|
||||
opacity: animationFinished ? 1 : 0.5,
|
||||
pointerEvents: animationFinished ? 'auto' : 'none',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1,
|
||||
}}
|
||||
>
|
||||
Закрыть
|
||||
|
||||
@ -343,66 +343,182 @@ export default function Shop() {
|
||||
<Grid container spacing={2} sx={{ mb: 4 }}>
|
||||
{cases.map((c) => (
|
||||
<Grid item xs={12} sm={6} md={4} lg={3} key={c.id}>
|
||||
{/* НОВАЯ КАРТОЧКА */}
|
||||
<Card
|
||||
sx={{
|
||||
bgcolor: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1vw',
|
||||
position: 'relative',
|
||||
bgcolor: 'rgba(5, 5, 15, 0.96)',
|
||||
borderRadius: '20px',
|
||||
border: '1px solid rgba(255, 255, 255, 0.08)',
|
||||
boxShadow: '0 18px 45px rgba(0, 0, 0, 0.8)',
|
||||
overflow: 'hidden',
|
||||
transition:
|
||||
'transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease',
|
||||
'&:hover': {
|
||||
transform: 'translateY(-6px)',
|
||||
boxShadow: '0 26px 60px rgba(0, 0, 0, 0.95)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.18)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* верхний “свет” */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
pointerEvents: 'none',
|
||||
background:
|
||||
'radial-gradient(circle at top, rgba(255,255,255,0.13), transparent 55%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
{c.image_url && (
|
||||
<CardMedia
|
||||
component="img"
|
||||
image={c.image_url}
|
||||
alt={c.name}
|
||||
<Box
|
||||
sx={{
|
||||
minWidth: '10vw',
|
||||
minHeight: '10vw',
|
||||
maxHeight: '10vw',
|
||||
objectFit: 'cover',
|
||||
p: '0.5vw',
|
||||
borderRadius: '1vw 1vw 0 0',
|
||||
position: 'relative',
|
||||
p: '0.9vw',
|
||||
pb: 0,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: '16px',
|
||||
overflow: 'hidden',
|
||||
border: '1px solid rgba(255, 255, 255, 0.12)',
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(40,40,80,0.9), rgba(15,15,35,0.9))',
|
||||
}}
|
||||
>
|
||||
<CardMedia
|
||||
component="img"
|
||||
image={c.image_url}
|
||||
alt={c.name}
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '11vw',
|
||||
minHeight: '140px',
|
||||
objectFit: 'cover',
|
||||
filter: 'saturate(1.1)',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* маленький бейдж сверху картинки */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: '1.2vw',
|
||||
left: '1.6vw',
|
||||
px: 1.2,
|
||||
py: 0.4,
|
||||
borderRadius: '999px',
|
||||
fontSize: '0.7rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.6,
|
||||
bgcolor: 'rgba(0, 0, 0, 0.6)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.4)',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
Кейс
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
<CardContent>
|
||||
<Typography variant="h6" color="white">
|
||||
|
||||
<CardContent
|
||||
sx={{
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
pt: c.image_url ? '0.9vw' : '1.4vw',
|
||||
pb: '1.3vw',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="white"
|
||||
sx={{
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1.05rem',
|
||||
mb: 0.8,
|
||||
}}
|
||||
>
|
||||
{c.name}
|
||||
</Typography>
|
||||
|
||||
{c.description && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{ opacity: 0.7 }}
|
||||
sx={{
|
||||
opacity: 0.75,
|
||||
fontSize: '0.85rem',
|
||||
mb: 1.5,
|
||||
minHeight: '40px',
|
||||
}}
|
||||
>
|
||||
{c.description}
|
||||
</Typography>
|
||||
)}
|
||||
<Typography variant="body2" color="white" sx={{ mt: 1 }}>
|
||||
Цена: {c.price} монет
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{ opacity: 0.8, fontSize: '0.85rem' }}
|
||||
>
|
||||
Цена
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
px: 1.6,
|
||||
py: 0.4,
|
||||
borderRadius: '999px',
|
||||
fontSize: '0.8rem',
|
||||
bgcolor: 'rgba(255, 77, 77, 0.16)',
|
||||
border: '1px solid rgba(255, 77, 77, 0.85)',
|
||||
color: 'white',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
}}
|
||||
>
|
||||
{c.price} поп
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{typeof c.items_count === 'number' && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{ opacity: 0.7 }}
|
||||
sx={{ opacity: 0.6, fontSize: '0.8rem', mb: 1.4 }}
|
||||
>
|
||||
Предметов в кейсе: {c.items_count}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
mt: '1vw',
|
||||
borderRadius: '20px',
|
||||
p: '0.3vw 0vw',
|
||||
mt: 0.5,
|
||||
borderRadius: '999px',
|
||||
py: '0.45vw',
|
||||
color: 'white',
|
||||
backgroundColor: 'rgb(255, 77, 77)',
|
||||
background:
|
||||
'linear-gradient(135deg, rgb(255, 77, 77), rgb(255, 120, 100))',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(255, 77, 77, 0.5)',
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(255, 77, 77, 0.85), rgba(255, 120, 100, 0.9))',
|
||||
},
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1vw',
|
||||
fontSize: '0.9rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.8,
|
||||
}}
|
||||
disabled={!isOnline || isOpening}
|
||||
onClick={() => handleOpenCase(c)}
|
||||
|
||||
Reference in New Issue
Block a user