Skip to content

Commit

Permalink
Adding Photo Picker to project
Browse files Browse the repository at this point in the history
  • Loading branch information
@StanislawMalinski
StanislawMalinski committed May 23, 2024
1 parent 50f5ac2 commit bda00ae
Show file tree
Hide file tree
Showing 17 changed files with 595 additions and 304 deletions.
57 changes: 57 additions & 0 deletions src/User/ProfileView/ProfileGameList.js
View file
Original file line number Diff line number Diff line change
@@ -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({ userId }) {
const navigate = useNavigate();
const [games, setGames] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
UserService.getGamesForPlayer(userId).then((response) => {
console.log(response);
setGames(response.data.data);
console.log(games);
setLoading(false);
}).catch((error) => {
console.log(error);
});
}, [userId]);

const handleGameElementClick = (gameId) => {
return () => navigate(`/game/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>
);
}
40 changes: 40 additions & 0 deletions src/User/ProfileView/ProfileGameList.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
75 changes: 20 additions & 55 deletions src/User/ProfileView/ProfileInfoTable.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
import { useEffect, useState } from "react";
import {PointsService} from "../../services/PointsService";
import {XAxis, YAxis, CartesianGrid, ResponsiveContainer, Tooltip, LineChart, Line } from 'recharts';
import ProfileGameList from './ProfileGameList';
import TournamentsPlayedTable from './TournamentsPlayedTable';


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 =
Expand All @@ -17,8 +25,8 @@ function RatingTable(props) {
<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" />
<YAxis dataKey="before" tick={{fontSize: ticksize}} />
<Line type="linear" dataKey="before" stroke="#01FF00" fill="#01FF00" />
</LineChart>
</ResponsiveContainer>
return (
Expand All @@ -28,66 +36,23 @@ function RatingTable(props) {
);
}

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 "rating":
return <RatingTable/>;
case "bots":
return <BotsTable bots={5} />;
return <RatingTable user={user}/>;
case "games":
return <GamesAddedTable games={5} />;
return <ProfileGameList userId={user.id}/>;
case "tournaments":
return <TournamentsPlayedTable tournaments={5} />;
return <TournamentsPlayedTable username={user.login} />;
default:
return null;
}
}

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

return (<>
Expand Down
47 changes: 14 additions & 33 deletions src/User/ProfileView/ProfileInfoTableAchievements.js
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,23 @@
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},
]
}
import {AchivmentService} from '../../services/AchivmentService';

import './ProfileInfoTableAchievements.css'

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

useEffect(() => {
setAchievements(getAchievements(playerId));
}, [playerId]);
console.log(userId);
AchivmentService.getAchivmentsForPlayer(userId)
.then((data) => {
setAchievements(data.data.data);
}).catch((error) => {
console.log(error);
});
}, [userId]);

let content = achievements.map((achiv) => {
let tooltipcontent = <>
Expand All @@ -54,7 +35,7 @@ function ProfileInfoTableAchievements(props) {
<div className='user-achivments-icon-container'>
<img
className='user-achivments-icon'
src={achiv.icon}
src={AchivmentService.getIcon(achiv.achievementTypeId)}
style={{
filter: `grayscale(${achiv.achived ? 1 : 0}) brightness(${100}%)`,
}}
Expand Down
3 changes: 1 addition & 2 deletions src/User/ProfileView/ProfileInfoTableButtons.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import "./ProfileView.css";
import "./ProfileView.scss";


function ProfileInfoTableButtons(props) {
Expand All @@ -7,7 +7,6 @@ function ProfileInfoTableButtons(props) {
return (
<div className="user-info-table-buttons-container">
<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")}>My Games</button>
<button type="user-info-table-button" onClick={() => setState("tournaments")}>Tournaments</button>
</div>
Expand Down
Loading

0 comments on commit bda00ae

Please sign in to comment.