add: display coins in TopBar

src/renderer/components/TopBar.tsx

@@ -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"