add: display coins in TopBar
This commit is contained in:
@ -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 />} />
|
||||||
|
@ -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"
|
||||||
|
Reference in New Issue
Block a user