Added achivements to user-view

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);
+}

src/User/ProfileView/ProfileInfoTableAchievements.js

@@ -1,17 +1,74 @@
+import './ProfileInfoTableAchievements.css';
+import icon1 from '../../resources/icon1.svg'
+import icon2 from '../../resources/icon2.svg'
+import icon3 from '../../resources/icon3.svg'
+import { useEffect, useState } from 'react';
+import { Tooltip } from '@mui/material';
 
+function getAchievements(playerId) {
+    return [
+        {'achiv': 'achiv1', 'description': 'very good description', 'icon': icon1, 'value': '1000'},
+        {'achiv': 'achiv2', 'description': 'very bad description', 'icon': icon2, 'value': '2000'}, 
+        {'achiv': 'achiv3', 'description': 'very ugly description', 'icon': icon3, 'value': '3000'},
+        {'achiv': 'achiv4', 'description': 'very beautiful description', 'icon': icon2, 'value': '4000'},
+        {'achiv': 'achiv5', 'description': 'very descriptive description', 'icon': icon1, 'value': '5000'},
+        {'achiv': 'achiv6', 'description': 'very good description', 'icon': icon2, 'value': '1000'},
+        {'achiv': 'achiv7', 'description': 'very bad description', 'icon': icon3, 'value': '2000'},
+        {'achiv': 'achiv8', 'description': 'very ugly description', 'icon': icon2, 'value': '3000'},
+        {'achiv': 'achiv9', 'description': 'very beautiful description', 'icon': icon1, 'value': '4000'},
+        {'achiv': 'achiv10', 'description': 'very descriptive description', 'icon': icon3, 'value': '5000'},
+        {'achiv': 'achiv11', 'description': 'very good description', 'icon': icon1, 'value': '1000'},
+        {'achiv': 'achiv12', 'description': 'very bad description', 'icon': icon2, 'value': '2000'},
+        {'achiv': 'achiv13', 'description': 'very ugly description', 'icon': icon3, 'value': '3000'},
+        {'achiv': 'achiv7', 'description': 'very bad description', 'icon': icon1, 'value': '2000'},
+        {'achiv': 'achiv8', 'description': 'very ugly description', 'icon': icon3, 'value': '3000'},
+        {'achiv': 'achiv9', 'description': 'very beautiful description', 'icon': icon1, 'value': '4000'},
+        {'achiv': 'achiv10', 'description': 'very descriptive description', 'icon': icon2, 'value': '5000'},
+        {'achiv': 'achiv11', 'description': 'very good description', 'icon': icon1, 'value': '1000'},
+        {'achiv': 'achiv12', 'description': 'very bad description', 'icon': icon2, 'value': '2000'},
+        {'achiv': 'achiv13', 'description': 'very ugly description', 'icon': icon3, 'value': '3000'},
+    ]
+}
 
 function ProfileInfoTableAchievements(props) {
     const {playerId} = props;
+    const [achievements, setAchievements] = useState([{'achiv':'', 'description':'', 'icon':'', 'value':''}]);
+
+    useEffect(() => {
+        setAchievements(getAchievements(playerId));
+    }, [playerId]);
 
+    let content = achievements.map((achiv) => {
+        let tooltipcontent = <>
+            <h3>{achiv.achiv}</h3>
+            <p>{achiv.description}</p>
+      </>
+        return (
+            <Tooltip 
+                title={tooltipcontent} 
+                followCursor 
+                enterDelay={500} 
+                leaveDelay={100}>
+                <div className='user-achivments-icon-container'>
+                    <img className='user-achivments-icon' src={achiv.icon}/>
+                </div>
+            </Tooltip>
+        );
+    });
+
     return (
-        <table>
-            <tr>
-                <th>achievements</th>
-            </tr>
-            <tr>
-                <td>{playerId}</td>
-            </tr>
-        </table>
+        <>
+            <div className='user-achivments-container'>
+                <div className='user-achivments-container-content'>
+                    <div className='user-achivments-scroll'>
+                        {content}
+                    </div>
+                </div>
+                <div className='user-achivments-background'>
+                    <p className='user-achivments-background-text'>Achivments</p>
+                </div>
+            </div>
+        </>
     );
 }
 

src/User/ProfileView/ProfileView.js

@@ -2,7 +2,7 @@ import { useParams } from 'react-router-dom';
 import React, { useState, useEffect } from 'react';
 import { getUser } from '../../services/Api';
 import ProfileInfoTable from './ProfileInfoTable';
-import ProfileInfoTableAchivments from './ProfileInfoTableAchivments';
+import ProfileInfoTableAchievements from './ProfileInfoTableAchievements';
 
 import './ProfileView.css';
 import ProfileInfoTableButtons from './ProfileInfoTableButtons';
@@ -35,7 +35,7 @@ function ProfileView() {
                     </div>
                 </div>
                 <div className='widget user-achivments'>
-                    <ProfileInfoTableAchivments userId={user.playerid}/>
+                    <ProfileInfoTableAchievements userId={user.playerid}/>
                 </div>
             </div>
             <div className='cell row2col1 notcollapse'>