Added counter for steam game counts

.env.development

@@ -1,2 +1,3 @@
 # For local development (npm run dev)
 VITE_API_URL=http://localhost:8080
+VITE_CORE_API_URL=http://localhost:8090

.env.production

@@ -1,3 +1,4 @@
 # For the docker image on the server
 # Uses the variable AUTH_HOST from your docker structure [cite: 3]
 VITE_API_URL=https://auth.tbp.andreas-dahm.eu
+VITE_CORE_API_URL=https://api.tbp.andreas-dahm.eu

public/i18n/de.json

@@ -68,7 +68,8 @@
   },
   "DASHBOARD": {
     "LOADING": "Lade Dashboard ...",
-    "HELLO": "Hallo"
+    "HELLO": "Hallo",
+    "STEAM_GAMES": "Steam Spiele"
   },
   "MAIN": {
     "WELCOME": "Dein Game-Backlog unter Kontrolle",

public/i18n/en.json

@@ -68,7 +68,8 @@
   },
   "DASHBOARD": {
     "LOADING": "Loading dashboard ...",
-    "HELLO": "Hello"
+    "HELLO": "Hello",
+    "STEAM_GAMES": "Steam Games"
   },
   "MAIN": {
     "WELCOME": "Control your game backlog",

src/components/SteamGameCount.jsx

@@ -0,0 +1,40 @@
+import React, {useState, useEffect} from 'react';
+import {useTranslation} from 'react-i18next';
+
+const SteamGameCount = ({targetCount}) => {
+    const {t} = useTranslation();
+    const [count, setCount] = useState(0);
+
+    useEffect(() => {
+        let startTime;
+        const duration = 1000; // 1 second
+        const startCount = 0;
+
+        const animate = (timestamp) => {
+            if (!startTime) startTime = timestamp;
+            const progress = Math.min((timestamp - startTime) / duration, 1);
+            
+            const currentCount = Math.floor(progress * (targetCount - startCount) + startCount);
+            setCount(currentCount);
+
+            if (progress < 1) {
+                requestAnimationFrame(animate);
+            }
+        };
+
+        requestAnimationFrame(animate);
+    }, [targetCount]);
+
+    return (
+        <div className="flex flex-col items-center justify-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
+            <div className="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">
+                {count}
+            </div>
+            <div className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
+                {t('DASHBOARD.STEAM_GAMES')}
+            </div>
+        </div>
+    );
+};
+
+export default SteamGameCount;

src/pages/Dashboard.jsx

@@ -1,11 +1,13 @@
 import React, {useEffect, useState} from 'react';
 import {Link, useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
+import SteamGameCount from '../components/SteamGameCount';
 
 const Dashboard = () => {
     const {t} = useTranslation();
     const navigate = useNavigate();
     const [userData, setUserData] = useState(null);
+    const [steamData, setSteamData] = useState({count: 0, hasSteamId: false});
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
 
@@ -19,7 +21,7 @@ const Dashboard = () => {
             }
 
             try {
-                const response = await fetch(`${import.meta.env.VITE_API_URL}/api/users/me?v=1`, {
+                const profileResponse = await fetch(`${import.meta.env.VITE_API_URL}/api/users/me?v=1`, {
                     method: 'GET',
                     headers: {
                         'Authorization': `Bearer ${token}`,
@@ -27,10 +29,29 @@ const Dashboard = () => {
                     }
                 });
 
-                if (response.ok) {
-                    const data = await response.json();
+                if (profileResponse.ok) {
+                    const data = await profileResponse.json();
                     setUserData(data);
-                } else if (response.status === 401) {
+
+                    // If user has a steamId, fetch game count from Core Service
+                    if (data.steamId) {
+                        try {
+                            const steamResponse = await fetch(`${import.meta.env.VITE_CORE_API_URL}/api/steam/games-count`, {
+                                method: 'GET',
+                                headers: {
+                                    'Authorization': `Bearer ${token}`,
+                                    'Content-Type': 'application/json'
+                                }
+                            });
+                            if (steamResponse.ok) {
+                                const steamJson = await steamResponse.json();
+                                setSteamData(steamJson);
+                            }
+                        } catch (steamErr) {
+                            console.error('Error fetching steam data:', steamErr);
+                        }
+                    }
+                } else if (profileResponse.status === 401) {
                     localStorage.removeItem('tbp_jwt');
                     navigate('/login');
                 } else {
@@ -45,7 +66,7 @@ const Dashboard = () => {
         };
 
         fetchUserData();
-    }, [navigate]);
+    }, [navigate, t]);
 
     if (isLoading) {
         return (
@@ -77,12 +98,17 @@ const Dashboard = () => {
                 </div>
 
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {steamData.hasSteamId && (
+                        <SteamGameCount targetCount={steamData.count} />
+                    )}
                     <div className="bg-white dark:bg-slate-800 h-40 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-center">
                         <span className="text-slate-400 dark:text-slate-500">Tile 1 (Coming soon)</span>
                     </div>
-                    <div className="bg-white dark:bg-slate-800 h-40 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-center">
-                        <span className="text-slate-400 dark:text-slate-500">Tile 2 (Coming soon)</span>
-                    </div>
+                    {!steamData.hasSteamId && (
+                        <div className="bg-white dark:bg-slate-800 h-40 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-center">
+                            <span className="text-slate-400 dark:text-slate-500">Tile 2 (Coming soon)</span>
+                        </div>
+                    )}
                     <Link
                         to="/settings"
                         className="bg-white dark:bg-slate-800 h-40 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex flex-col items-center justify-center hover:border-blue-500 dark:hover:border-blue-500 transition-colors"