redesign login/registration. add autologin from registration. add 'continue' register from accept acc

This commit is contained in:
aurinex
2025-12-21 01:15:53 +05:00
parent 779f8f779d
commit 4b8e535c58
7 changed files with 1522 additions and 566 deletions

View File

@ -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>