add: display coins in TopBar

This commit is contained in:
2025-07-18 01:30:39 +05:00
parent 7938555c91
commit f3aa32a60a
2 changed files with 91 additions and 2 deletions

View File

@ -93,6 +93,17 @@ const App = () => {
const handleRegister = () => { const handleRegister = () => {
window.open('https://account.ely.by/register', '_blank'); 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 ( return (
<Router> <Router>
@ -109,7 +120,7 @@ const App = () => {
}} }}
> >
<MinecraftBackground /> <MinecraftBackground />
<TopBar onRegister={handleRegister} /> <TopBar onRegister={handleRegister} username={username} />
<Notifier /> <Notifier />
<Routes> <Routes>
<Route path="/login" element={<Login />} /> <Route path="/login" element={<Login />} />

View File

@ -2,6 +2,8 @@ import { Box, Button, Typography } from '@mui/material';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded'; import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import { useLocation, useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
import { useEffect, useState } from 'react';
import { Tooltip } from '@mui/material';
declare global { declare global {
interface Window { interface Window {
@ -18,15 +20,26 @@ declare global {
// Определяем пропсы // Определяем пропсы
interface TopBarProps { interface TopBarProps {
onRegister?: () => void; // Опционально, если нужен обработчик регистрации 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 location = useLocation();
const isLoginPage = location.pathname === '/login'; const isLoginPage = location.pathname === '/login';
const isLaunchPage = location.pathname.startsWith('/launch'); const isLaunchPage = location.pathname.startsWith('/launch');
const isVersionsExplorerPage = location.pathname.startsWith('/'); const isVersionsExplorerPage = location.pathname.startsWith('/');
const navigate = useNavigate(); const navigate = useNavigate();
const [coins, setCoins] = useState<number>(0);
const handleLaunchPage = () => { const handleLaunchPage = () => {
navigate('/'); navigate('/');
@ -45,6 +58,31 @@ export default function TopBar({ onRegister }: TopBarProps) {
return 'Неизвестная страница'; 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 ( return (
<Box <Box
sx={{ 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 && ( {isLoginPage && (
<Button <Button
variant="outlined" variant="outlined"