redesign login/registration. add autologin from registration. add 'continue' register from accept acc
This commit is contained in:
@ -61,6 +61,9 @@ function getRarityColor(weight?: number): string {
|
||||
}
|
||||
}
|
||||
|
||||
const GRADIENT =
|
||||
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';
|
||||
|
||||
export default function Shop() {
|
||||
const [storeCapes, setStoreCapes] = useState<StoreCape[]>([]);
|
||||
const [userCapes, setUserCapes] = useState<Cape[]>([]);
|
||||
@ -120,6 +123,18 @@ export default function Shop() {
|
||||
type: 'success',
|
||||
});
|
||||
|
||||
const showNotification = (
|
||||
message: React.ReactNode,
|
||||
severity: 'success' | 'info' | 'warning' | 'error' = 'info',
|
||||
position: NotificationPosition = getNotifPositionFromSettings(),
|
||||
) => {
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg(message);
|
||||
setNotifSeverity(severity);
|
||||
setNotifPos(position);
|
||||
setNotifOpen(true);
|
||||
};
|
||||
|
||||
const loadBonuses = async (username: string) => {
|
||||
try {
|
||||
setBonusesLoading(true);
|
||||
@ -133,10 +148,7 @@ export default function Shop() {
|
||||
console.error('Ошибка при получении прокачек:', error);
|
||||
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg('Ошибка при загрузке прокачки!');
|
||||
setNotifSeverity('error');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification('Ошибка при загрузке прокачки!', 'error')
|
||||
} finally {
|
||||
setBonusesLoading(false);
|
||||
}
|
||||
@ -182,18 +194,12 @@ export default function Shop() {
|
||||
playBuySound();
|
||||
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg('Плащ успешно куплен!');
|
||||
setNotifSeverity('success');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification('Плащ успешно куплен!', 'success')
|
||||
} catch (error) {
|
||||
console.error('Ошибка при покупке плаща:', error);
|
||||
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg('Ошибка при покупке плаща!');
|
||||
setNotifSeverity('error');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification('Ошибка при покупке плаща!', 'error')
|
||||
}
|
||||
};
|
||||
|
||||
@ -275,10 +281,7 @@ export default function Shop() {
|
||||
if (!username) {
|
||||
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg('Не найдено имя игрока. Авторизируйтесь в лаунчере!');
|
||||
setNotifSeverity('error');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification('Не найдено имя игрока. Авторизируйтесь в лаунчере!', 'error')
|
||||
return;
|
||||
}
|
||||
|
||||
@ -291,18 +294,12 @@ export default function Shop() {
|
||||
await loadBonuses(username);
|
||||
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg('Прокачка успешно куплена!');
|
||||
setNotifSeverity('success');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification('Прокачка успешно куплена!', 'success')
|
||||
} catch (error) {
|
||||
console.error('Ошибка при покупке прокачки:', error);
|
||||
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg('Ошибка при прокачке!');
|
||||
setNotifSeverity('error');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification('Ошибка при прокачке!', 'error')
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -317,18 +314,12 @@ export default function Shop() {
|
||||
await loadBonuses(username);
|
||||
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg('Бонус улучшен!');
|
||||
setNotifSeverity('success');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification('Бонус улучшен!', 'success')
|
||||
} catch (error) {
|
||||
console.error('Ошибка при улучшении бонуса:', error);
|
||||
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg('Ошибка при улучшении бонуса!');
|
||||
setNotifSeverity('error');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification('Ошибка при улучшении бонуса!', 'error')
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -343,10 +334,7 @@ export default function Shop() {
|
||||
} catch (error) {
|
||||
console.error('Ошибка при переключении бонуса:', error);
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg('Ошибка при переключении бонуса!');
|
||||
setNotifSeverity('error');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification('Ошибка при переключении бонуса!', 'error')
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -389,33 +377,22 @@ const filteredCases = (cases || []).filter((c) => {
|
||||
const handleOpenCase = async (caseData: Case) => {
|
||||
if (!username) {
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg('Не найдено имя игрока. Авторизуйтесь в лаунчере!');
|
||||
setNotifSeverity('error');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification('Не найдено имя игрока. Авторизуйтесь в лаунчере!', 'error')
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedCaseServerIp) {
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg('Выберите сервер для открытия кейса!');
|
||||
setNotifSeverity('warning');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification('Выберите сервер для открытия кейса!', 'warning')
|
||||
return;
|
||||
}
|
||||
|
||||
const allowedIps = caseData.server_ips || [];
|
||||
if (allowedIps.length > 0 && !allowedIps.includes(selectedCaseServerIp)) {
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg(
|
||||
`Этот кейс доступен на: ${allowedIps
|
||||
showNotification(`Этот кейс доступен на: ${allowedIps
|
||||
.map((ip) => translateServer(`Server ${ip}`))
|
||||
.join(', ')}`,
|
||||
);
|
||||
setNotifSeverity('warning');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
.join(', ')}`, 'warning')
|
||||
return;
|
||||
}
|
||||
|
||||
@ -437,18 +414,12 @@ const filteredCases = (cases || []).filter((c) => {
|
||||
playBuySound();
|
||||
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg('Кейс открыт!');
|
||||
setNotifSeverity('success');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification('Кейс открыт!', 'success')
|
||||
} catch (error) {
|
||||
console.error('Ошибка при открытии кейса:', error);
|
||||
|
||||
if (!isNotificationsEnabled()) return;
|
||||
setNotifMsg(String(error instanceof Error ? error.message : 'Ошибка при открытии кейса!'));
|
||||
setNotifSeverity('error');
|
||||
setNotifPos({ vertical: 'top', horizontal: 'center' });
|
||||
setNotifOpen(true);
|
||||
showNotification((String(error instanceof Error ? error.message : 'Ошибка при открытии кейса!')), 'error')
|
||||
} finally {
|
||||
setIsOpening(false);
|
||||
}
|
||||
@ -617,28 +588,99 @@ const filteredCases = (cases || []).filter((c) => {
|
||||
</Typography>
|
||||
|
||||
{caseServers.length > 0 && (
|
||||
<FormControl size="small" sx={{ minWidth: 220 }}>
|
||||
<InputLabel id="cases-server-label" sx={{ fontFamily: 'Benzin-Bold', color: 'rgba(255,255,255,0.75)' }}>
|
||||
Сервер
|
||||
</InputLabel>
|
||||
<Select
|
||||
labelId="cases-server-label"
|
||||
label="Сервер"
|
||||
value={selectedCaseServerIp}
|
||||
onChange={(e) => setSelectedCaseServerIp(String(e.target.value))}
|
||||
MenuProps={{
|
||||
<FormControl
|
||||
size="small"
|
||||
sx={{
|
||||
// textTransform: 'uppercase',
|
||||
// чтобы по ширине вел себя как бейдж
|
||||
// minWidth: '18vw',
|
||||
// maxWidth: '28vw',
|
||||
|
||||
'& .MuiInputLabel-root': { display: 'none' },
|
||||
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '3vw',
|
||||
position: 'relative',
|
||||
px: '1.2vw',
|
||||
py: '0.5vw',
|
||||
|
||||
color: 'rgba(255,255,255,0.95)',
|
||||
background:
|
||||
'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.20), transparent 55%), radial-gradient(circle at 90% 20%, rgba(233,64,205,0.16), transparent 55%), rgba(10,10,20,0.92)',
|
||||
border: '1px solid rgba(255,255,255,0.10)',
|
||||
boxShadow: '0 1.4vw 3.8vw rgba(0,0,0,0.55)',
|
||||
backdropFilter: 'blur(14px)',
|
||||
overflow: 'hidden',
|
||||
|
||||
transition: 'transform 0.18s ease, filter 0.18s ease',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.02)',
|
||||
// filter: 'brightness(1.03)',
|
||||
},
|
||||
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: 'none',
|
||||
},
|
||||
|
||||
// нижняя градиентная полоска как у username
|
||||
'&:after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: 0,
|
||||
height: '0.15vw',
|
||||
borderRadius: '999px',
|
||||
background: GRADIENT,
|
||||
opacity: 0.9,
|
||||
pointerEvents: 'none',
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
|
||||
'& .MuiSelect-select': {
|
||||
// стиль текста как у плашки username
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1.9vw',
|
||||
lineHeight: 1.1,
|
||||
textAlign: 'center',
|
||||
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
|
||||
// убираем “инпутный” паддинг
|
||||
padding: 0,
|
||||
minHeight: 'unset',
|
||||
|
||||
// чтобы длинные названия не ломали
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
labelId="cases-server-label"
|
||||
label="Сервер"
|
||||
value={selectedCaseServerIp}
|
||||
onChange={(e) => setSelectedCaseServerIp(String(e.target.value))}
|
||||
MenuProps={{
|
||||
PaperProps: {
|
||||
sx: {
|
||||
mt: 1,
|
||||
bgcolor: 'rgba(10,10,20,0.96)',
|
||||
border: '1px solid rgba(255,255,255,0.10)',
|
||||
borderRadius: '1vw',
|
||||
backdropFilter: 'blur(14px)',
|
||||
|
||||
'& .MuiMenuItem-root': {
|
||||
color: 'rgba(255,255,255,0.9)',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1.1vw',
|
||||
},
|
||||
'& .MuiMenuItem-root.Mui-selected': {
|
||||
backgroundColor: 'rgba(242,113,33,0.16)',
|
||||
backgroundColor: 'rgba(242,113,33,0.18)',
|
||||
},
|
||||
'& .MuiMenuItem-root:hover': {
|
||||
backgroundColor: 'rgba(233,64,205,0.14)',
|
||||
@ -646,37 +688,75 @@ const filteredCases = (cases || []).filter((c) => {
|
||||
},
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
borderRadius: '999px',
|
||||
bgcolor: 'rgba(255,255,255,0.04)',
|
||||
color: 'rgba(255,255,255,0.92)',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
'& .MuiSelect-select': {
|
||||
py: '0.9vw',
|
||||
px: '1.2vw',
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255,255,255,0.14)',
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(242,113,33,0.55)',
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(233,64,205,0.65)',
|
||||
borderWidth: '2px',
|
||||
},
|
||||
'& .MuiSelect-icon': {
|
||||
color: 'rgba(255,255,255,0.75)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{caseServers.map((ip) => (
|
||||
<MenuItem key={ip} value={ip}>
|
||||
{translateServer(`Server ${ip}`)}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
>
|
||||
{caseServers.map((ip) => (
|
||||
<MenuItem key={ip} value={ip}>
|
||||
{translateServer(`Server ${ip}`)}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
// <FormControl size="small" sx={{ minWidth: 220 }}>
|
||||
// <InputLabel id="cases-server-label" sx={{ fontFamily: 'Benzin-Bold', color: 'rgba(255,255,255,0.75)' }}>
|
||||
// Сервер
|
||||
// </InputLabel>
|
||||
// <Select
|
||||
// labelId="cases-server-label"
|
||||
// label="Сервер"
|
||||
// value={selectedCaseServerIp}
|
||||
// onChange={(e) => setSelectedCaseServerIp(String(e.target.value))}
|
||||
// MenuProps={{
|
||||
// PaperProps: {
|
||||
// sx: {
|
||||
// bgcolor: 'rgba(10,10,20,0.96)',
|
||||
// border: '1px solid rgba(255,255,255,0.10)',
|
||||
// borderRadius: '1vw',
|
||||
// backdropFilter: 'blur(14px)',
|
||||
// '& .MuiMenuItem-root': {
|
||||
// color: 'rgba(255,255,255,0.9)',
|
||||
// fontFamily: 'Benzin-Bold',
|
||||
// },
|
||||
// '& .MuiMenuItem-root.Mui-selected': {
|
||||
// backgroundColor: 'rgba(242,113,33,0.16)',
|
||||
// },
|
||||
// '& .MuiMenuItem-root:hover': {
|
||||
// backgroundColor: 'rgba(233,64,205,0.14)',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// }}
|
||||
// sx={{
|
||||
// borderRadius: '999px',
|
||||
// bgcolor: 'rgba(255,255,255,0.04)',
|
||||
// color: 'rgba(255,255,255,0.92)',
|
||||
// fontFamily: 'Benzin-Bold',
|
||||
// '& .MuiSelect-select': {
|
||||
// py: '0.9vw',
|
||||
// px: '1.2vw',
|
||||
// },
|
||||
// '& .MuiOutlinedInput-notchedOutline': {
|
||||
// borderColor: 'rgba(255,255,255,0.14)',
|
||||
// },
|
||||
// '&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
// borderColor: 'rgba(242,113,33,0.55)',
|
||||
// },
|
||||
// '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
// borderColor: 'rgba(233,64,205,0.65)',
|
||||
// borderWidth: '2px',
|
||||
// },
|
||||
// '& .MuiSelect-icon': {
|
||||
// color: 'rgba(255,255,255,0.75)',
|
||||
// },
|
||||
// }}
|
||||
// >
|
||||
// {caseServers.map((ip) => (
|
||||
// <MenuItem key={ip} value={ip}>
|
||||
// {translateServer(`Server ${ip}`)}
|
||||
// </MenuItem>
|
||||
// ))}
|
||||
// </Select>
|
||||
// </FormControl>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user