add: marketplace
This commit is contained in:
@ -1,3 +1,389 @@
|
||||
export default function Marketplace() {
|
||||
return <div>Marketplace</div>;
|
||||
// src/renderer/pages/Marketplace.tsx
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
CircularProgress,
|
||||
Button,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
CardMedia,
|
||||
Pagination,
|
||||
Tabs,
|
||||
Tab,
|
||||
Alert,
|
||||
Snackbar,
|
||||
} from '@mui/material';
|
||||
import { isPlayerOnline, getPlayerServer } from '../utils/playerOnlineCheck';
|
||||
import { buyItem, fetchMarketplace, MarketplaceResponse, Server } from '../api';
|
||||
import PlayerInventory from '../components/PlayerInventory';
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
index: number;
|
||||
value: number;
|
||||
}
|
||||
|
||||
function TabPanel(props: TabPanelProps) {
|
||||
const { children, value, index, ...other } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="tabpanel"
|
||||
hidden={value !== index}
|
||||
id={`marketplace-tabpanel-${index}`}
|
||||
aria-labelledby={`marketplace-tab-${index}`}
|
||||
{...other}
|
||||
>
|
||||
{value === index && <Box sx={{ pt: 3 }}>{children}</Box>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Marketplace() {
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [marketLoading, setMarketLoading] = useState<boolean>(false);
|
||||
const [isOnline, setIsOnline] = useState<boolean>(false);
|
||||
const [username, setUsername] = useState<string>('');
|
||||
const [playerServer, setPlayerServer] = useState<Server | null>(null);
|
||||
const [marketItems, setMarketItems] = useState<MarketplaceResponse | null>(
|
||||
null,
|
||||
);
|
||||
const [page, setPage] = useState<number>(1);
|
||||
const [totalPages, setTotalPages] = useState<number>(1);
|
||||
const [tabValue, setTabValue] = useState<number>(0);
|
||||
const [notification, setNotification] = useState<{
|
||||
open: boolean;
|
||||
message: string;
|
||||
type: 'success' | 'error';
|
||||
}>({
|
||||
open: false,
|
||||
message: '',
|
||||
type: 'success',
|
||||
});
|
||||
|
||||
// Функция для проверки онлайн-статуса игрока и определения сервера
|
||||
const checkPlayerStatus = async () => {
|
||||
if (!username) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
// Проверяем, онлайн ли игрок и получаем сервер, где он находится
|
||||
const { online, server } = await getPlayerServer(username);
|
||||
setIsOnline(online);
|
||||
setPlayerServer(server);
|
||||
|
||||
// Если игрок онлайн и на каком-то сервере, загружаем предметы рынка
|
||||
if (online && server) {
|
||||
await loadMarketItems(server.ip, 1);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка при проверке онлайн-статуса:', error);
|
||||
setIsOnline(false);
|
||||
setPlayerServer(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Функция для загрузки предметов маркетплейса
|
||||
const loadMarketItems = async (serverIp: string, pageNumber: number) => {
|
||||
try {
|
||||
setMarketLoading(true);
|
||||
const marketData = await fetchMarketplace(serverIp, pageNumber, 10); // 10 предметов на страницу
|
||||
setMarketItems(marketData);
|
||||
setPage(marketData.page);
|
||||
setTotalPages(marketData.pages);
|
||||
} catch (error) {
|
||||
console.error('Ошибка при загрузке предметов рынка:', error);
|
||||
setMarketItems(null);
|
||||
} finally {
|
||||
setMarketLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Обработчик смены страницы
|
||||
const handlePageChange = (
|
||||
_event: React.ChangeEvent<unknown>,
|
||||
newPage: number,
|
||||
) => {
|
||||
if (playerServer) {
|
||||
loadMarketItems(playerServer.ip, newPage);
|
||||
}
|
||||
};
|
||||
|
||||
// Обработчик смены вкладок
|
||||
const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
|
||||
setTabValue(newValue);
|
||||
};
|
||||
|
||||
// Обновляем функцию handleBuyItem в Marketplace.tsx
|
||||
const handleBuyItem = async (itemId: string) => {
|
||||
try {
|
||||
if (username) {
|
||||
const result = await buyItem(username, itemId);
|
||||
|
||||
setNotification({
|
||||
open: true,
|
||||
message:
|
||||
result.message ||
|
||||
'Предмет успешно куплен! Он будет добавлен в ваш инвентарь.',
|
||||
type: 'success',
|
||||
});
|
||||
|
||||
// Обновляем список предметов
|
||||
if (playerServer) {
|
||||
loadMarketItems(playerServer.ip, page);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка при покупке предмета:', error);
|
||||
setNotification({
|
||||
open: true,
|
||||
message:
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: 'Ошибка при покупке предмета',
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Закрытие уведомления
|
||||
const handleCloseNotification = () => {
|
||||
setNotification({ ...notification, open: false });
|
||||
};
|
||||
|
||||
// Получаем имя пользователя из localStorage при монтировании компонента
|
||||
useEffect(() => {
|
||||
const savedConfig = localStorage.getItem('launcher_config');
|
||||
if (savedConfig) {
|
||||
const config = JSON.parse(savedConfig);
|
||||
if (config.username) {
|
||||
setUsername(config.username);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Проверяем статус при изменении username
|
||||
useEffect(() => {
|
||||
if (username) {
|
||||
checkPlayerStatus();
|
||||
}
|
||||
}, [username]);
|
||||
|
||||
// Показываем loader во время проверки
|
||||
if (loading) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<CircularProgress size={60} />
|
||||
<Typography variant="h6" color="white">
|
||||
Проверяем, находитесь ли вы на сервере...
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Если игрок не онлайн
|
||||
if (!isOnline) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
gap: 3,
|
||||
padding: 4,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4" color="error">
|
||||
Доступ к рынку ограничен
|
||||
</Typography>
|
||||
<Typography variant="h6" color="white">
|
||||
Для доступа к рынку вам необходимо находиться на одном из серверов
|
||||
игры.
|
||||
</Typography>
|
||||
<Typography variant="body1" color="white" sx={{ opacity: 0.8 }}>
|
||||
Зайдите на любой сервер и обновите страницу.
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={checkPlayerStatus}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
Проверить снова
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ padding: 3 }}>
|
||||
<Typography variant="h4" color="white" gutterBottom>
|
||||
Рынок сервера {playerServer?.name || ''}
|
||||
</Typography>
|
||||
|
||||
{/* Вкладки */}
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Tabs
|
||||
value={tabValue}
|
||||
onChange={handleTabChange}
|
||||
aria-label="marketplace tabs"
|
||||
>
|
||||
<Tab label="Товары" />
|
||||
<Tab label="Мой инвентарь" />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{/* Содержимое вкладки "Товары" */}
|
||||
<TabPanel value={tabValue} index={0}>
|
||||
{marketLoading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : !marketItems || marketItems.items.length === 0 ? (
|
||||
<Box sx={{ mt: 4, textAlign: 'center' }}>
|
||||
<Typography variant="h6" color="white">
|
||||
На данный момент на рынке нет предметов.
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() =>
|
||||
playerServer && loadMarketItems(playerServer.ip, 1)
|
||||
}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
Обновить
|
||||
</Button>
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
<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)' }}>
|
||||
<CardMedia
|
||||
component="img"
|
||||
sx={{
|
||||
height: 140,
|
||||
objectFit: 'contain',
|
||||
bgcolor: 'rgba(0, 0, 0, 0.2)',
|
||||
p: 1,
|
||||
imageRendering: 'pixelated',
|
||||
}}
|
||||
image={`/minecraft/${item.material.toLowerCase()}.png`}
|
||||
alt={item.material}
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography variant="h6" color="white">
|
||||
{item.display_name ||
|
||||
item.material
|
||||
.replace(/_/g, ' ')
|
||||
.toLowerCase()
|
||||
.replace(/\b\w/g, (l) => l.toUpperCase())}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="white">
|
||||
Количество: {item.amount}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="white">
|
||||
Цена: {item.price} монет
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{ opacity: 0.7 }}
|
||||
>
|
||||
Продавец: {item.seller_name}
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
sx={{ mt: 2 }}
|
||||
onClick={() => handleBuyItem(item.id)}
|
||||
>
|
||||
Купить
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
|
||||
<Pagination
|
||||
count={totalPages}
|
||||
page={page}
|
||||
onChange={handlePageChange}
|
||||
color="primary"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</TabPanel>
|
||||
|
||||
{/* Содержимое вкладки "Мой инвентарь" */}
|
||||
<TabPanel value={tabValue} index={1}>
|
||||
{playerServer && username ? (
|
||||
<PlayerInventory
|
||||
username={username}
|
||||
serverIp={playerServer.ip}
|
||||
onSellSuccess={() => {
|
||||
// После успешной продажи, обновляем список товаров
|
||||
if (playerServer) {
|
||||
loadMarketItems(playerServer.ip, 1);
|
||||
}
|
||||
|
||||
// Показываем уведомление
|
||||
setNotification({
|
||||
open: true,
|
||||
message: 'Предмет успешно выставлен на продажу!',
|
||||
type: 'success',
|
||||
});
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Typography
|
||||
variant="body1"
|
||||
color="white"
|
||||
sx={{ textAlign: 'center', my: 4 }}
|
||||
>
|
||||
Не удалось загрузить инвентарь.
|
||||
</Typography>
|
||||
)}
|
||||
</TabPanel>
|
||||
|
||||
{/* Уведомления */}
|
||||
<Snackbar
|
||||
open={notification.open}
|
||||
autoHideDuration={6000}
|
||||
onClose={handleCloseNotification}
|
||||
>
|
||||
<Alert
|
||||
onClose={handleCloseNotification}
|
||||
severity={notification.type}
|
||||
sx={{ width: '100%' }}
|
||||
>
|
||||
{notification.message}
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user