fix design marketplace
This commit is contained in:
aurinex
@ -183,13 +183,13 @@ export default function PlayerInventory({
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ mt: 4 }}>
|
||||
<Box sx={{ mt: '1vw' }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
gap: '1vw',
|
||||
alignItems: 'center',
|
||||
mb: 2,
|
||||
mb: '2vw',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" color="white">
|
||||
@ -199,6 +199,18 @@ export default function PlayerInventory({
|
||||
variant="outlined"
|
||||
onClick={fetchPlayerInventory}
|
||||
disabled={loading}
|
||||
sx={{
|
||||
borderRadius: '20px',
|
||||
p: '10px 25px',
|
||||
color: 'white',
|
||||
borderColor: 'rgba(255, 77, 77, 1)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(255, 77, 77, 1)',
|
||||
borderColor: 'rgba(255, 77, 77, 1)',
|
||||
},
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1vw',
|
||||
}}
|
||||
>
|
||||
Обновить
|
||||
</Button>
|
||||
@ -235,28 +247,33 @@ export default function PlayerInventory({
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.2s',
|
||||
'&:hover': { transform: 'scale(1.03)' },
|
||||
borderRadius: '1vw',
|
||||
}}
|
||||
onClick={() => handleOpenSellDialog(item)}
|
||||
>
|
||||
<CardMedia
|
||||
component="img"
|
||||
sx={{
|
||||
height: 100,
|
||||
minWidth: '10vw',
|
||||
minHeight: '10vw',
|
||||
maxHeight: '10vw',
|
||||
objectFit: 'contain',
|
||||
bgcolor: 'rgba(0, 0, 0, 0.2)',
|
||||
p: 1,
|
||||
bgcolor: 'white',
|
||||
p: '1vw',
|
||||
imageRendering: 'pixelated',
|
||||
}}
|
||||
image={`/minecraft/${item.material.toLowerCase()}.png`}
|
||||
alt={item.material}
|
||||
/>
|
||||
<CardContent sx={{ p: 1 }}>
|
||||
<Typography variant="body2" color="white" noWrap>
|
||||
{getItemDisplayName(item.material)}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="white">
|
||||
x{item.amount}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: '1vw', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="white" noWrap>
|
||||
{getItemDisplayName(item.material)}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="white">
|
||||
{item.amount > 1 ? `x${item.amount}` : ''}
|
||||
</Typography>
|
||||
</Box>
|
||||
{Object.keys(item.enchants || {}).length > 0 && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
|
||||
@ -178,7 +178,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
color: 'rgba(255, 77, 77, 1)',
|
||||
},
|
||||
'&:hover': {
|
||||
color: 'rgb(199, 199, 199)',
|
||||
color: 'rgb(177, 52, 52)',
|
||||
},
|
||||
transition: 'all 0.3s ease',
|
||||
}}
|
||||
@ -197,7 +197,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
color: 'rgba(255, 77, 77, 1)',
|
||||
},
|
||||
'&:hover': {
|
||||
color: 'rgb(199, 199, 199)',
|
||||
color: 'rgb(177, 52, 52)',
|
||||
},
|
||||
transition: 'all 0.3s ease',
|
||||
}}
|
||||
@ -216,7 +216,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
color: 'rgba(255, 77, 77, 1)',
|
||||
},
|
||||
'&:hover': {
|
||||
color: 'rgb(199, 199, 199)',
|
||||
color: 'rgb(177, 52, 52)',
|
||||
},
|
||||
transition: 'all 0.3s ease',
|
||||
}}
|
||||
@ -235,7 +235,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
color: 'rgba(255, 77, 77, 1)',
|
||||
},
|
||||
'&:hover': {
|
||||
color: 'rgb(199, 199, 199)',
|
||||
color: 'rgb(177, 52, 52)',
|
||||
},
|
||||
transition: 'all 0.3s ease',
|
||||
}}
|
||||
|
||||
@ -63,6 +63,19 @@ export default function Marketplace() {
|
||||
type: 'success',
|
||||
});
|
||||
|
||||
const translateServer = (server: Server) => {
|
||||
switch (server.name) {
|
||||
case 'Server minecraft.hub.popa-popa.ru':
|
||||
return 'Хаб';
|
||||
case 'Server survival.hub.popa-popa.ru':
|
||||
return 'Выживание';
|
||||
case 'Server minecraft.minigames.popa-popa.ru':
|
||||
return 'Миниигры';
|
||||
default:
|
||||
return server.name;
|
||||
}
|
||||
};
|
||||
|
||||
// Функция для проверки онлайн-статуса игрока и определения сервера
|
||||
const checkPlayerStatus = async () => {
|
||||
if (!username) return;
|
||||
@ -241,32 +254,81 @@ export default function Marketplace() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ padding: 3 }}>
|
||||
<Typography variant="h4" color="white" gutterBottom>
|
||||
Рынок сервера {playerServer?.name || ''}
|
||||
</Typography>
|
||||
<Box sx={{ padding: 3, width: '95%', height: '80%' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: '1vw' }}>
|
||||
<Typography variant="h4" color="white" gutterBottom>
|
||||
Рынок сервера{' '}
|
||||
</Typography>
|
||||
<Typography
|
||||
style={{
|
||||
color: 'white',
|
||||
backgroundColor: 'rgba(255, 77, 77, 1)',
|
||||
padding: '0vw 2vw',
|
||||
borderRadius: '5vw',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
textAlign: 'center',
|
||||
fontSize: '2vw',
|
||||
}}
|
||||
>
|
||||
{translateServer(playerServer || { name: '' })}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Вкладки */}
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'transparent' }}>
|
||||
<Tabs
|
||||
value={tabValue}
|
||||
onChange={handleTabChange}
|
||||
aria-label="marketplace tabs"
|
||||
disableRipple={true}
|
||||
sx={{
|
||||
'& .MuiTabs-indicator': {
|
||||
backgroundColor: 'rgba(255, 77, 77, 1)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Tab label="Товары" />
|
||||
<Tab label="Мой инвентарь" />
|
||||
<Tab
|
||||
label="Товары"
|
||||
disableRipple={true}
|
||||
sx={{
|
||||
fontFamily: 'Benzin-Bold',
|
||||
color: 'white',
|
||||
'&.Mui-selected': {
|
||||
color: 'rgba(255, 77, 77, 1)',
|
||||
},
|
||||
'&:hover': {
|
||||
color: 'rgba(255, 77, 77, 1)',
|
||||
},
|
||||
transition: 'all 0.3s ease',
|
||||
}}
|
||||
/>
|
||||
<Tab
|
||||
label="Мой инвентарь"
|
||||
disableRipple={true}
|
||||
sx={{
|
||||
fontFamily: 'Benzin-Bold',
|
||||
color: 'white',
|
||||
'&.Mui-selected': {
|
||||
color: 'rgba(255, 77, 77, 1)',
|
||||
},
|
||||
'&:hover': {
|
||||
color: 'rgba(255, 77, 77, 1)',
|
||||
},
|
||||
transition: 'all 0.3s ease',
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{/* Содержимое вкладки "Товары" */}
|
||||
<TabPanel value={tabValue} index={0}>
|
||||
{marketLoading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mt: '50vw' }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : !marketItems || marketItems.items.length === 0 ? (
|
||||
<Box sx={{ mt: 4, textAlign: 'center' }}>
|
||||
<Typography variant="h6" color="white">
|
||||
<Typography variant="h6" color="white" sx={{ mt: '10vw' }}>
|
||||
На данный момент на рынке нет предметов.
|
||||
</Typography>
|
||||
<Button
|
||||
@ -275,7 +337,18 @@ export default function Marketplace() {
|
||||
onClick={() =>
|
||||
playerServer && loadMarketItems(playerServer.ip, 1)
|
||||
}
|
||||
sx={{ mt: 2 }}
|
||||
sx={{
|
||||
mt: 2,
|
||||
borderRadius: '20px',
|
||||
p: '10px 25px',
|
||||
color: 'white',
|
||||
backgroundColor: 'rgb(255, 77, 77)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(255, 77, 77, 0.5)',
|
||||
},
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1vw',
|
||||
}}
|
||||
>
|
||||
Обновить
|
||||
</Button>
|
||||
@ -285,14 +358,21 @@ export default function Marketplace() {
|
||||
<Grid container spacing={2} sx={{ mt: 2 }}>
|
||||
{marketItems.items.map((item) => (
|
||||
<Grid item xs={12} sm={6} md={4} lg={3} key={item.id}>
|
||||
<Card sx={{ bgcolor: 'rgba(255, 255, 255, 0.05)' }}>
|
||||
<Card
|
||||
sx={{
|
||||
bgcolor: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1vw',
|
||||
}}
|
||||
>
|
||||
<CardMedia
|
||||
component="img"
|
||||
sx={{
|
||||
height: 140,
|
||||
minWidth: '10vw',
|
||||
minHeight: '10vw',
|
||||
maxHeight: '10vw',
|
||||
objectFit: 'contain',
|
||||
bgcolor: 'rgba(0, 0, 0, 0.2)',
|
||||
p: 1,
|
||||
bgcolor: 'white',
|
||||
p: '1vw',
|
||||
imageRendering: 'pixelated',
|
||||
}}
|
||||
image={`/minecraft/${item.material.toLowerCase()}.png`}
|
||||
@ -323,7 +403,18 @@ export default function Marketplace() {
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
sx={{ mt: 2 }}
|
||||
sx={{
|
||||
mt: '1vw',
|
||||
borderRadius: '20px',
|
||||
p: '0.3vw 0vw',
|
||||
color: 'white',
|
||||
backgroundColor: 'rgb(255, 77, 77)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(255, 77, 77, 0.5)',
|
||||
},
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1vw',
|
||||
}}
|
||||
onClick={() => handleBuyItem(item.id)}
|
||||
>
|
||||
Купить
|
||||
|
||||
Reference in New Issue
Block a user