From 9569bbcd70d5a85127e30bad9699fb0547970800 Mon Sep 17 00:00:00 2001 From: Andreas Dahm Date: Tue, 28 Apr 2026 15:41:38 +0200 Subject: [PATCH] Added counter for steam game counts --- .env.development | 3 ++- .env.production | 3 ++- public/i18n/de.json | 3 ++- public/i18n/en.json | 3 ++- src/components/SteamGameCount.jsx | 40 +++++++++++++++++++++++++++++ src/pages/Dashboard.jsx | 42 +++++++++++++++++++++++++------ 6 files changed, 82 insertions(+), 12 deletions(-) create mode 100644 src/components/SteamGameCount.jsx diff --git a/.env.development b/.env.development index cb4cb40..24848d3 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,3 @@ # For local development (npm run dev) -VITE_API_URL=http://localhost:8080 \ No newline at end of file +VITE_API_URL=http://localhost:8080 +VITE_CORE_API_URL=http://localhost:8090 \ No newline at end of file diff --git a/.env.production b/.env.production index 658e57e..8bf2a6d 100644 --- a/.env.production +++ b/.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 \ No newline at end of file +VITE_API_URL=https://auth.tbp.andreas-dahm.eu +VITE_CORE_API_URL=https://api.tbp.andreas-dahm.eu \ No newline at end of file diff --git a/public/i18n/de.json b/public/i18n/de.json index 1db8fe8..0b4999e 100644 --- a/public/i18n/de.json +++ b/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", diff --git a/public/i18n/en.json b/public/i18n/en.json index 703bcdf..aa9ddff 100644 --- a/public/i18n/en.json +++ b/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", diff --git a/src/components/SteamGameCount.jsx b/src/components/SteamGameCount.jsx new file mode 100644 index 0000000..092bcc8 --- /dev/null +++ b/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 ( +
+
+ {count} +
+
+ {t('DASHBOARD.STEAM_GAMES')} +
+
+ ); +}; + +export default SteamGameCount; diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index 433c81e..832d690 100644 --- a/src/pages/Dashboard.jsx +++ b/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 = () => {
+ {steamData.hasSteamId && ( + + )}
Tile 1 (Coming soon)
-
- Tile 2 (Coming soon) -
+ {!steamData.hasSteamId && ( +
+ Tile 2 (Coming soon) +
+ )}