ya xyi znaet che pisat, zaebalsya pridymivat
This commit is contained in:
aurinex
@ -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={{
|
||||
color: 'white',
|
||||
borderColor: 'white',
|
||||
'& .MuiInputBase-input': {
|
||||
border: '1px solid white',
|
||||
transition: 'unset',
|
||||
border: 'none',
|
||||
'& .MuiSelect-select': {
|
||||
fontFamily: 'Benzin-Bold',
|
||||
color: 'white',
|
||||
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',
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user