add: display coins in TopBar
This commit is contained in:
@ -93,6 +93,17 @@ const App = () => {
|
||||
const handleRegister = () => {
|
||||
window.open('https://account.ely.by/register', '_blank');
|
||||
};
|
||||
const [username, setUsername] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const savedConfig = localStorage.getItem('launcher_config');
|
||||
if (savedConfig) {
|
||||
const config = JSON.parse(savedConfig);
|
||||
if (config.username) {
|
||||
setUsername(config.username);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Router>
|
||||
@ -109,7 +120,7 @@ const App = () => {
|
||||
}}
|
||||
>
|
||||
<MinecraftBackground />
|
||||
<TopBar onRegister={handleRegister} />
|
||||
<TopBar onRegister={handleRegister} username={username} />
|
||||
<Notifier />
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
|
@ -2,6 +2,8 @@ import { Box, Button, Typography } from '@mui/material';
|
||||
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Tooltip } from '@mui/material';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
@ -18,15 +20,26 @@ declare global {
|
||||
// Определяем пропсы
|
||||
interface TopBarProps {
|
||||
onRegister?: () => void; // Опционально, если нужен обработчик регистрации
|
||||
username?: string;
|
||||
}
|
||||
|
||||
export default function TopBar({ onRegister }: TopBarProps) {
|
||||
interface CoinsResponse {
|
||||
username: string;
|
||||
coins: number;
|
||||
total_time_played: {
|
||||
seconds: number;
|
||||
formatted: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default function TopBar({ onRegister, username }: TopBarProps) {
|
||||
// Получаем текущий путь
|
||||
const location = useLocation();
|
||||
const isLoginPage = location.pathname === '/login';
|
||||
const isLaunchPage = location.pathname.startsWith('/launch');
|
||||
const isVersionsExplorerPage = location.pathname.startsWith('/');
|
||||
const navigate = useNavigate();
|
||||
const [coins, setCoins] = useState<number>(0);
|
||||
|
||||
const handleLaunchPage = () => {
|
||||
navigate('/');
|
||||
@ -45,6 +58,31 @@ export default function TopBar({ onRegister }: TopBarProps) {
|
||||
return 'Неизвестная страница';
|
||||
};
|
||||
|
||||
// Функция для получения количества монет
|
||||
const fetchCoins = async () => {
|
||||
if (!username) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`http://147.78.65.214:8000/users/${username}/coins`,
|
||||
);
|
||||
if (response.ok) {
|
||||
const data: CoinsResponse = await response.json();
|
||||
setCoins(data.coins);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка при получении количества монет:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (username) {
|
||||
fetchCoins();
|
||||
const intervalId = setInterval(fetchCoins, 60000);
|
||||
return () => clearInterval(intervalId);
|
||||
}
|
||||
}, [username]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -121,6 +159,46 @@ export default function TopBar({ onRegister }: TopBarProps) {
|
||||
}}
|
||||
>
|
||||
{/* Кнопка регистрации, если на странице логина */}
|
||||
{username && (
|
||||
<Tooltip
|
||||
title="Попы — внутриигровая валюта, начисляемая за время игры на серверах."
|
||||
arrow
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||||
borderRadius: '16px',
|
||||
padding: '6px 12px',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: '#2bff00ff' }}>P</Typography>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
color: 'white',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '16px',
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
{coins}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
)}
|
||||
{isLoginPage && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
|
Reference in New Issue
Block a user