User profile page

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.5",
     "date-fns": "^3.6.0",
+    "buffer": "^6.0.3",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/User/ProfileView/ProfileGameList.js

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import {UserService } from '../../services/UserService';
+import {useNavigate} from 'react-router-dom';
+
+import './ProfileGameList.scss';
+
+import notAvailableIcon from '../../resources/cross.svg';
+
+export default function ProfileGameList({ user }) {
+    const navigate = useNavigate();
+    const [games, setGames] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => { 
+        UserService.getGamesForPlayer(user.id).then((response) => {
+            console.log(response);
+            setGames(response.data.data);
+            console.log(games);
+            setLoading(false);
+        }).catch((error) => {
+            console.log(error);
+        });
+    }, [user.id]);
+
+    const handleGameElementClick = (gameId) => {
+        return () => navigate(`/games/details/${gameId}`);
+    };
+
+    return (
+        <div className="user-info-table">
+            <div className="user-info-table-content">
+                {loading ? (
+                    <p>Loading...</p>
+                ) : (
+                <>
+                {games.map((game, index) => (
+                        <div className={`${(index % 2) ? 'light' : 'dark'} game-list-element-container`}
+                            key={game.id}
+                            onClick={handleGameElementClick(game.id)}>
+                            <p className="game-list-element-name">
+                                {game.gameFileName}
+                            </p>
+                            <p className="game-list-element-date">
+                                {game.lastModificatiosn}
+                            </p>
+                            <div className="game-list-element-availability">
+                                {game.isAvailableForPlay || (
+                                    <img className="not-available-icon" src={notAvailableIcon} alt="Not available" />
+                                )}
+                            </div>
+                        </div>
+                    ))}
+                </>)}
+            </div>
+        </div>
+    );
+}

src/User/ProfileView/ProfileGameList.scss

@@ -0,0 +1,40 @@
+.user-info-table {
+    height: 100%;
+    .user-info-table-content {
+        overflow-y: scroll;
+        .game-list-element-container {
+            display: grid;
+            grid-template-columns: max-content auto 15px;
+            padding: 2px 5px;
+
+            .game-list-element-availability {
+                overflow: hidden;
+                display: flex;
+                .not-available-icon {
+                    top: 0; 
+                    width: 100%;
+                    aspect-ratio: 1;
+                }    
+            }
+
+            p {
+                font-size: 20px;
+                transition: all 0.3s ease;
+            }
+
+            p:hover {
+                cursor: pointer;
+                text-shadow: #309e00 0px 0px 5px;
+                color: #79ec48;
+            }
+        }
+
+        .light {
+            background-color: #222222;
+        }
+
+        .dark {
+            background-color: #080808;
+        }
+    }
+}

src/User/ProfileView/ProfileInfoTable.js

@@ -1,111 +1,58 @@
 import { useEffect, useState } from "react";
 import {PointsService} from "../../services/PointsService";
-import {XAxis, YAxis, CartesianGrid, Tooltip, LineChart, Line  } from 'recharts';
+import {XAxis, YAxis, CartesianGrid, ResponsiveContainer, Tooltip, LineChart, Line  } from 'recharts';
+import ProfileGameList from './ProfileGameList';
+import TournamentsPlayedTable from './TournamentsPlayedTable';
 
-function StatsTable(props) {
-    return (
-        <table>
-            <tr>
-                <th>Wins</th>
-                <th>Losses</th>
-                <th>Draws</th>
-            </tr>
-            <tr>
-                <td>{props.wins}</td>
-                <td>{props.losses}</td>
-                <td>{props.draws}</td>
-            </tr>
-        </table>
-    );
-}
-
-function RatingTable(props) {
+function RatingTable({user}) {
     const [history, setHistory] = useState([{id: 0, logDate: "", points: 0, playerId: 0}]);
 
     useEffect(() => {
-        setHistory(PointsService.getPointsHistoryForPlayer(props.playerid)["data"]);
-    }, [props.playerid]);
+        console.log(user);
+        PointsService.getPointsHistoryForPlayer(user.id)
+        .then((data) => {
+            setHistory(data.data.data);
+            console.log(history);
+        }).catch((error) => {
+            console.log(error);
+        });
+    }, [user.id]);
 
+    var ticksize = 20;
     const chart = 
-        <LineChart data={history} width={1000} height={300}>
-            <CartesianGrid />
-            <Tooltip />
-            <XAxis dataKey="logDate" />
-            <YAxis dataKey="rating"  />
-            <Line type="linear" dataKey="rating" stroke="#01FF00" fill="#01FF00" /> 
-        </LineChart>;
-
-        console.log(history);
-
+        <ResponsiveContainer minWidth={100} minHeight={200}>
+            <LineChart data={history}>
+                <CartesianGrid/>
+                <Tooltip labelStyle={{fontSize: ticksize}} contentStyle={{fontSize: ticksize}}/>
+                <XAxis dataKey="logDate" tick={{fontSize: ticksize}} />
+                <YAxis dataKey="before" tick={{fontSize: ticksize}} />
+                <Line type="linear" dataKey="before" stroke="#01FF00" fill="#01FF00" /> 
+            </LineChart>
+        </ResponsiveContainer>
     return (
         <>
         {chart}
         </>
     );
 }
 
-function BotsTable(props) {
-    return (
-        <table>
-            <tr>
-                <th>Bots</th>
-            </tr>
-            <tr>
-                <td>{props.bots}</td>
-            </tr>
-        </table>
-    );
-}
-
-function GamesAddedTable(props) {
-    return (
-        <table>
-            <tr>
-                <th>Games Added</th>
-            </tr>
-            <tr>
-                <td>{props.games}</td>
-            </tr>
-        </table>
-    );
-}
-
-function TournamentsPlayedTable(props) {
-    return (
-        <table>
-            <tr>
-                <th>Tournaments Played</th>
-            </tr>
-            <tr>
-                <td>{props.tournaments}</td>
-            </tr>
-        </table>
-    );
-}
-
-function changeState(newState) {
+function changeState(newState, user) {
     switch (newState) {
-        case "stats":
-            return <StatsTable wins={10} losses={5} draws={3} />;
         case "rating":
-            return <RatingTable/>;
-        case "bots":
-            return <BotsTable bots={5} />;
+            return <RatingTable user={user}/>;
         case "games":
-            return <GamesAddedTable games={5} />;
+            return <ProfileGameList user={user}/>;
         case "tournaments":
-            return <TournamentsPlayedTable tournaments={5} />;
+            return <TournamentsPlayedTable username={user.login} />;
         default:
             return null;
     }
 }
 
-function ProfileInfoTable(props) {
-    const { state } = props;
+function ProfileInfoTable({ state, user }) {
     const [content, setContent] = useState(null);
     useEffect(() => {
-        const con = changeState(state);
-        setContent(con);
+        setContent(changeState(state, user));
     }, [state]);
 
     return (<>

src/User/ProfileView/ProfileInfoTableAchievements.css

@@ -0,0 +1,80 @@
+.user-achivments-container {
+    position: relative;
+    margin-bottom: 10px;
+    vertical-align: middle;
+}
+
+.user-achivments-container-content {
+    position: relative;
+    z-index: 100;
+    height: 100%;
+    padding: 10px;
+}
+
+.user-achivments-background {
+    color:#222222;
+    background-color: #111111;
+    position: absolute;
+    z-index: 10;
+    width: 100%;
+    top: 0;
+    left: 0;
+    padding: 10px;
+}
+
+.user-achivments-background-text {
+    text-shadow: 0px 0px 10px #000000;
+    float: right;    
+    user-select: none;
+}
+
+.user-achivments-scroll {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    height: 100%;
+    user-select: none;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    flex-shrink: 0;
+}
+
+
+.user-achivments-container-content > ::-webkit-scrollbar {
+    background: #222222;
+    height: 5px;
+}
+
+.user-achivments-container-content > ::-webkit-scrollbar-track {
+    background: #090909; 
+}
+
+.user-achivments-container-content > ::-webkit-scrollbar-thumb {
+    background: #002200;
+    border-radius: 5px;
+}
+
+.user-achivments-container-content > ::-webkit-scrollbar-thumb:hover {
+    background: #006000;
+}
+
+.user-achivments-icon {
+    height: 30px;
+    width: auto;
+
+    min-width: 30px;
+}
+
+.user-achivments-icon-container {
+    margin: 5px;
+    padding: 0px 10px 0px 10px;
+    width: fit-content;
+    border-radius: 50%;
+    display: inline-block;
+    transition: all 0.3s ease;
+}
+
+.user-achivments-icon-container:hover {
+    cursor: pointer;
+    background: rgb(170, 170, 170, 0.5);
+}