Skip to content

Commit

Permalink
user-view
Browse files Browse the repository at this point in the history
  • Loading branch information
@StanislawMalinski
StanislawMalinski committed May 22, 2024
1 parent 31ad2fc commit 50f5ac2
Show file tree
Hide file tree
Showing 20 changed files with 948 additions and 84 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.5",
"buffer": "^6.0.3",
"jwt-decode": "^4.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
44 changes: 13 additions & 31 deletions src/User/ProfileView/ProfileInfoTable.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,7 @@
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';

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) {
const [history, setHistory] = useState([{id: 0, logDate: "", points: 0, playerId: 0}]);
Expand All @@ -26,17 +10,17 @@ function RatingTable(props) {
setHistory(PointsService.getPointsHistoryForPlayer(props.playerid)["data"]);
}, [props.playerid]);

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="rating" tick={{fontSize: ticksize}} />
<Line type="linear" dataKey="rating" stroke="#01FF00" fill="#01FF00" />
</LineChart>
</ResponsiveContainer>
return (
<>
{chart}
Expand Down Expand Up @@ -85,8 +69,6 @@ function TournamentsPlayedTable(props) {

function changeState(newState) {
switch (newState) {
case "stats":
return <StatsTable wins={10} losses={5} draws={3} />;
case "rating":
return <RatingTable/>;
case "bots":
Expand All @@ -101,10 +83,10 @@ function changeState(newState) {
}

function ProfileInfoTable(props) {
const { state } = props;
const { state, user } = props;
const [content, setContent] = useState(null);
useEffect(() => {
const con = changeState(state);
var con = changeState(state);
setContent(con);
}, [state]);

Expand Down
80 changes: 80 additions & 0 deletions src/User/ProfileView/ProfileInfoTableAchievements.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}
81 changes: 73 additions & 8 deletions src/User/ProfileView/ProfileInfoTableAchievements.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,82 @@
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', 'achived': true},
{'achiv': 'achiv2', 'description': 'very bad description', 'icon': icon2, 'value': '2000', 'achived': true},
{'achiv': 'achiv3', 'description': 'very ugly description', 'icon': icon3, 'value': '3000', 'achived': false},
{'achiv': 'achiv4', 'description': 'very beautiful description', 'icon': icon2, 'value': '4000', 'achived': true},
{'achiv': 'achiv5', 'description': 'very descriptive description', 'icon': icon1, 'value': '5000', 'achived':false},
{'achiv': 'achiv6', 'description': 'very good description', 'icon': icon2, 'value': '1000', 'achived': false},
{'achiv': 'achiv7', 'description': 'very bad description', 'icon': icon3, 'value': '2000', 'achived': true},
{'achiv': 'achiv8', 'description': 'very ugly description', 'icon': icon2, 'value': '3000','achived': false},
{'achiv': 'achiv9', 'description': 'very beautiful description', 'icon': icon1, 'value': '4000', 'achived': true},
{'achiv': 'achiv10', 'description': 'very descriptive description', 'icon': icon3, 'value': '5000', 'achived': false},
{'achiv': 'achiv11', 'description': 'very good description', 'icon': icon1, 'value': '1000', 'achived': false},
{'achiv': 'achiv12', 'description': 'very bad description', 'icon': icon2, 'value': '2000', 'achived': true},
{'achiv': 'achiv13', 'description': 'very ugly description', 'icon': icon3, 'value': '3000', 'achived': false},
{'achiv': 'achiv7', 'description': 'very bad description', 'icon': icon1, 'value': '2000', 'achived': true},
{'achiv': 'achiv8', 'description': 'very ugly description', 'icon': icon3, 'value': '3000', 'achived':false},
{'achiv': 'achiv9', 'description': 'very beautiful description', 'icon': icon1, 'value': '4000','achived': true},
{'achiv': 'achiv10', 'description': 'very descriptive description', 'icon': icon2, 'value': '5000','achived': false},
{'achiv': 'achiv11', 'description': 'very good description', 'icon': icon1, 'value': '1000','achived': true},
{'achiv': 'achiv12', 'description': 'very bad description', 'icon': icon2, 'value': '2000','achived': false},
{'achiv': 'achiv13', 'description': 'very ugly description', 'icon': icon3, 'value': '3000','achived': true},
]
}

function ProfileInfoTableAchievements(props) {
const {playerId} = props;
const [achievements, setAchievements] = useState([{'achiv':'', 'description':'', 'icon':'', 'value':'', 'achived':false}]);

useEffect(() => {
setAchievements(getAchievements(playerId));
}, [playerId]);

let content = achievements.map((achiv) => {
let tooltipcontent = <>
<h3>{achiv.achiv}</h3>
<p>{achiv.description}</p>
<p>Current value: {achiv.value}</p>
</>
return (
<Tooltip
title={tooltipcontent}
followCursor
enterDelay={500}
leaveDelay={100}
>
<div className='user-achivments-icon-container'>
<img
className='user-achivments-icon'
src={achiv.icon}
style={{
filter: `grayscale(${achiv.achived ? 1 : 0}) brightness(${100}%)`,
}}
/>
</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>
</>
);
}

Expand Down
6 changes: 3 additions & 3 deletions src/User/ProfileView/ProfileInfoTableButtons.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import "./ProfileView.css";


function ProfileInfoTableButtons(props) {
const { setState } = props;

return (
<div className="user-info-table-buttons-container">
<button type="user-info-table-button" onClick={() => setState("stats")}>Stats</button>
<button type="user-info-table-button" onClick={() => setState("rating")}>Rating</button>
<button type="user-info-table-button" onClick={() => setState("bots")}>Bots</button>
<button type="user-info-table-button" onClick={() => setState("games")}>Games Added</button>
<button type="user-info-table-button" onClick={() => setState("tournaments")}>Tournaments Played</button>
<button type="user-info-table-button" onClick={() => setState("games")}>My Games</button>
<button type="user-info-table-button" onClick={() => setState("tournaments")}>Tournaments</button>
</div>
);
}
Expand Down
51 changes: 46 additions & 5 deletions src/User/ProfileView/ProfileView.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

justify-items: stretch;
align-content: stretch;
height: 100%;
height: 100hw;
}

.user-photo {
Expand All @@ -19,6 +19,11 @@
.profile-image {
border: 3px solid black;
border-radius: 1px;

width: 100%;
aspect-ratio: 1/1;

object-fit: cover;
}

.change-photo {
Expand All @@ -28,12 +33,16 @@
}

.user-info {
font-size: 20px;
font-size: 30%;
border: 3px solid black;
padding: 10px;
height: 100%;
}

.user-info .user-info-text {
color: aqua;
}

.user-info-table-container {
border: 3px solid black;
padding: 20px;
Expand All @@ -53,10 +62,38 @@
}

.user-info-table-buttons-container {
display: flex;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-content:space-evenly;
}

@media (max-aspect-ratio: 1){
.user-info-table-buttons-container {
grid-template-columns: 1fr 1fr;
}
}

@media (max-aspect-ratio: 5/6) {
/*Handling collapse*/
.main-container {
grid-template-columns: 0% 100%;
}

.notcollapse {
background-color: red;
visibility: collapse;
width: 0;
}

.collapse {
visibility: visible;
}
}

.collapse {
visibility: collapse;
}

.user-overview {
height: 100%;
}
Expand All @@ -74,8 +111,6 @@
.settings-button {
width: 100%;
align-self: flex-end;

bottom: 0;
}

.cell {
Expand Down Expand Up @@ -104,3 +139,9 @@ button {
width: 100%;
padding: 10px;
}

.user-ban-icon {
position: absolute;
width: 50px;
padding: 10px;
}
Loading

0 comments on commit 50f5ac2

Please sign in to comment.