Kinou/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no comment

Browse Source
This commit is contained in:
Elisee ADJIGUIDI 2023-06-28 17:23:01 +02:00
parent 44183cd1b5
commit b609c7a9d7
12 changed files with 9 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
containers/react/src/components/Social/Friend.tsx
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Friend.tsx :+: :+: :+: */ /* Friend.tsx :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/09 08:18:58 by apommier #+# #+# */ /* Created: 2023/06/09 08:18:58 by apommier #+# #+# */
/* Updated: 2023/06/23 17:12:07 by apommier ### ########.fr */ /* Updated: 2023/06/26 11:34:53 by sadjigui ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -16,7 +16,6 @@ import DefaultPicture from '../../assets/profile.jpg'
import styled from "styled-components"; import styled from "styled-components";
import { RxCircle } from "react-icons/rx"; import { RxCircle } from "react-icons/rx";
import { CgFontSpacing } from "react-icons/cg";
import React from "react"; import React from "react";
import {User} from "../../../interfaces.tsx" import {User} from "../../../interfaces.tsx"
@ -34,16 +33,10 @@ const UserChat = styled.div `
} }
` `
const SideP = styled.p`
font-size: 14px;
color: lightgray;
margin-left: 15px;
`
interface UserProps { interface UserProps {
currentUser: User currentUser: User
} }
// export default function Friend({currentUser})
export default function Friend({currentUser}: UserProps) export default function Friend({currentUser}: UserProps)
{ {
const [profilePicture, setProfilePicture] = useState(''); const [profilePicture, setProfilePicture] = useState('');
@ -51,10 +44,7 @@ export default function Friend({currentUser}: UserProps)
useEffect(() => { useEffect(() => {
const fetchProfilePicture = async () => { const fetchProfilePicture = async () => {
try { try {
// const user = await api.get("/profile");
const pic = await api.post("/getPicture", {username: currentUser.username}) const pic = await api.post("/getPicture", {username: currentUser.username})
// console.log(`user naem profile pic222= ${currentUser.username}`)
// console.log(` profile pic222= ${pic.data}`)
setProfilePicture(pic.data); setProfilePicture(pic.data);
} catch (error) { } catch (error) {
console.error('Error fetching profile picture:', error); console.error('Error fetching profile picture:', error);
@ -80,17 +70,8 @@ export default function Friend({currentUser}: UserProps)
return statusColor; return statusColor;
} }
const handleSpectate = (user: User) => {
//socket connection and add to party with one with username
console.log(`spectate hehe`)
console.log(`user= ${user}`)
};
const handleButtonClick = (user: User) => { const handleButtonClick = (user: User) => {
let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`; let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`;
console.log("path= ", path)
// history(path, { replace: true });
// window.location.replace(path);
window.history.pushState({}, '', path); window.history.pushState({}, '', path);
window.location.reload(); window.location.reload();
}; };
@ -111,9 +92,3 @@ export default function Friend({currentUser}: UserProps)
</UserChat> </UserChat>
) )
} }
// spectate visible
// {getStatus(currentUser) !== 'blue' ? (
// <></>
// ) : (
// <button className="friendRequest" onClick={() => handleSpectate(currentUser)} >Spectate</button>
// )}

23
containers/react/src/components/Social/FriendRequest.tsx
View File

@ -21,12 +21,6 @@ const UserChat = styled.div `
} }
` `
const SideP = styled.p`
font-size: 14px;
color: lightgray;
margin-left: 15px;
`
interface UserProps { interface UserProps {
currentUser: User currentUser: User
} }
@ -34,21 +28,15 @@ interface UserProps {
export default function Friend({currentUser}: UserProps) export default function Friend({currentUser}: UserProps)
{ {
const [profilePicture, setProfilePicture] = useState(''); const [profilePicture, setProfilePicture] = useState('');
const [request, setRequest] = useState<User>(); //user who invite const [request, setRequest] = useState<User>();
const [clickEvent, setClickEvent] = useState(false); const [clickEvent, setClickEvent] = useState(false);
// const [user, setUser] = useState(null);
useEffect(() => { useEffect(() => {
const fetchProfilePicture = async () => { const fetchProfilePicture = async () => {
try { try {
// const user = await api.get("/profile");\
// const tmpUser = await api.get("/profile")
const pic = await api.post("/getPicture", {username: currentUser.username}) const pic = await api.post("/getPicture", {username: currentUser.username})
const tmpRequest = await api.post("/user", {username: currentUser.username}) const tmpRequest = await api.post("/user", {username: currentUser.username})
// setUser(tmpUser.data);
setRequest(tmpRequest.data); setRequest(tmpRequest.data);
// console.log(`user naem profile pic222= ${currentUser.username}`)
// console.log(` profile pic222= ${pic.data}`)
setProfilePicture(pic.data); setProfilePicture(pic.data);
} catch (error) { } catch (error) {
console.error('Error fetching profile picture:', error); console.error('Error fetching profile picture:', error);
@ -60,8 +48,6 @@ export default function Friend({currentUser}: UserProps)
const handleButtonClick = (user: User) => { const handleButtonClick = (user: User) => {
let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`; let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`;
// history(path, { replace: true });
// window.location.replace(path);
window.history.pushState({}, '', path); window.history.pushState({}, '', path);
window.location.reload(); window.location.reload();
}; };
@ -73,8 +59,6 @@ export default function Friend({currentUser}: UserProps)
} catch(err) { } catch(err) {
console.log(err); console.log(err);
} }
console.log("accept")
console.log(`request = ${request}`)
} }
const Refuse = async (request: User) => { const Refuse = async (request: User) => {
@ -84,13 +68,10 @@ export default function Friend({currentUser}: UserProps)
} catch(err) { } catch(err) {
console.log(err); console.log(err);
} }
console.log("refuse")
console.log(`request = ${request}`)
} }
// Vérifier si le contenu doit être caché
if (clickEvent) { if (clickEvent) {
return null; // Rendre null pour ne pas afficher le contenu return null;
} }
return ( return (

49
containers/react/src/components/Social/Social.tsx
View File

@ -1,4 +1,3 @@
import DefaultPicture from '../../assets/profile.jpg'
import api from '../../script/axiosApi.tsx'; import api from '../../script/axiosApi.tsx';
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import styled from "styled-components"; import styled from "styled-components";
@ -8,37 +7,14 @@ import Friend from './Friend.tsx';
import FriendRequest from './FriendRequest.tsx'; import FriendRequest from './FriendRequest.tsx';
import {IoMdPeople} from 'react-icons/io' import {IoMdPeople} from 'react-icons/io'
import { ImBlocked } from 'react-icons/im';
import { MdOutlineGroupAdd } from 'react-icons/md';
import {User} from "../../../interfaces.tsx" import {User} from "../../../interfaces.tsx"
// import React from "react";
import { useNavigate } from "react-router-dom";
const TouchDiv = styled.div`
margin-left: 10px;
margin-right: 4px;
margin-bottom: 21px;
margin-top: 21px;
cursor: pointer;
justify-content: space-around;
&:hover {
color: #F4F3EF;
}
`
function Social (){ function Social (){
const [friends, setFriends] = useState([]); const [friends, setFriends] = useState([]);
const [invite, setInvite] = useState([]); const [invite, setInvite] = useState([]);
const [isLoading, setIsLoading] = useState<boolean>(true); const [isLoading, setIsLoading] = useState<boolean>(true);
const [user, setUser] = useState<User>(); const [user, setUser] = useState<User>();
const [profilePicture, setProfilePicture] = useState('');
useEffect(()=> { useEffect(()=> {
const getFriend = async ()=>{ const getFriend = async ()=>{
@ -49,10 +25,8 @@ function Social (){
const pic = await api.post("/getPicture", {username: tmpUser.data.username}) const pic = await api.post("/getPicture", {username: tmpUser.data.username})
setInvite(tmpInv.data); setInvite(tmpInv.data);
setProfilePicture(pic.data);
setUser(tmpUser.data); setUser(tmpUser.data);
setFriends(tmpFriends.data); setFriends(tmpFriends.data);
// return tmpUser;
console.log(`user= ${tmpUser.data.username}`); console.log(`user= ${tmpUser.data.username}`);
setIsLoading(false) setIsLoading(false)
@ -65,30 +39,9 @@ function Social (){
}, []) }, [])
// const { status } = this.props;
// let statusColor = '';
// // let statusIcon = RxCircle;
// let status = 0
// if (status === 0) {
// // statusIcon = faCircle;
// statusColor = 'green';
// } else if (status === 1) {
// // statusIcon = faCircle;
// statusColor = 'red';
// } else if (status === 2) {
// // statusIcon = faCircle;
// statusColor = 'blue';
// }
return ( return (
<div> <div>
<div className='navbarSocial'> <div className='navbarSocial'>
{/* <img src={DefaultPic} alt="profile" className="pic"/> */}
<IoMdPeople className="catchat"/> <IoMdPeople className="catchat"/>
<span> <span>
{isLoading || !user ? ( {isLoading || !user ? (
@ -100,8 +53,6 @@ function Social (){
</div> </div>
{/* map with fiend request */}
{invite.map(c=> ( {invite.map(c=> (
<FriendRequest currentUser={c}/> <FriendRequest currentUser={c}/>
))} ))}

5
containers/react/src/styles/Game.css
View File

@ -7,7 +7,6 @@
.rank_elements { .rank_elements {
border-width:1px; border-width:1px;
border-style:solid; border-style:solid;
/* background-color: #5843e4; */
border-color: grey; border-color: grey;
/* overflow: scroll; */ /* overflow: scroll; */
padding: 5px 100px; padding: 5px 100px;
@ -15,16 +14,12 @@
} }
.scroll { .scroll {
/* border:3px; */
/* background-color: #5843e4; */
/* border-color: white; */
overflow: scroll; overflow: scroll;
height: 68vh; height: 68vh;
} }
.profilePic{ .profilePic{
margin-left: 10px; margin-left: 10px;
/* margin-top: 10px; */
height: 30px; height: 30px;
width: 30px; width: 30px;
border-radius: 50%; border-radius: 50%;

18
containers/react/src/styles/Header.css
View File

@ -1,10 +1,7 @@
.Header { .Header {
background-image: linear-gradient(90deg, #5843e4, #5a0760); background-image: linear-gradient(90deg, #5843e4, #5a0760);
/* background-color: blue; */
height: 80px; height: 80px;
display: flex; display: flex;
/* justify-content: start; */
align-items: center; align-items: center;
} }
@ -25,10 +22,6 @@
top: 0; top: 0;
left: 0; left: 0;
transition: 350ms; transition: 350ms;
/* margin-top: 10px; */
/* left: -100%; */
/* transition: 850ms; */
} }
.nav-menu.active { .nav-menu.active {
@ -38,10 +31,8 @@
.nav-text { .nav-text {
display: flex; display: flex;
/* justify-content: start; */
align-items: center; align-items: center;
padding: 8px 0px 8px 16px; padding: 8px 0px 8px 16px;
list-style: none; list-style: none;
height: 60px; height: 60px;
} }
@ -54,9 +45,7 @@
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
/* padding: 0 16px; */
padding: 8px 8px 8px 8px; padding: 8px 8px 8px 8px;
border-radius: 20px; border-radius: 20px;
} }
@ -73,7 +62,6 @@
width: 100%; width: 100%;
height: 80px; height: 80px;
display: flex; display: flex;
/* justify-content: start; */
align-items: center; align-items: center;
} }
@ -92,17 +80,12 @@ span {
.success { .success {
height: 2%; height: 2%;
width: 2%; width: 2%;
/* border: solid; */
margin-top: 1%; margin-top: 1%;
margin: 3vh; margin: 3vh;
/* margin-bottom: -12vh; */
/* border-color: black; */
/* border-radius: 50%; */
} }
.header-pic{ .header-pic{
text-align: end; text-align: end;
/* id: right; */
} }
.footer { .footer {
@ -122,7 +105,6 @@ span {
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
/* background: #000000e1; */
backdrop-filter: blur(1.5rem); backdrop-filter: blur(1.5rem);
display: flex; display: flex;
align-items: center; align-items: center;

38
containers/react/src/styles/Messages.css
View File

@ -56,18 +56,13 @@ select{
width: 30%; width: 30%;
overflow: scroll; overflow: scroll;
border-radius: 0px 0px 0px 10px; border-radius: 0px 0px 0px 10px;
/* width: 2rem; */
/* height: 4rem; */
} }
.messages_box{ .messages_box{
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
/* height: 90vh; */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* position:relative; */
} }
.container{ .container{
@ -96,11 +91,8 @@ select{
} }
.navbar{ .navbar{
/* width: clamp(50%, 500px, 20%); */
/* height: min(50%, 100px); */
display: flex; display: flex;
align-items: center; align-items: center;
/* background-color: yellow; */
background-image: linear-gradient(90deg, #5843e4, #5a0760); background-image: linear-gradient(90deg, #5843e4, #5a0760);
color: white; color: white;
padding: 3px; padding: 3px;
@ -109,11 +101,8 @@ select{
} }
.navbarSocial{ .navbarSocial{
/* width: clamp(50%, 500px, 20%); */
/* height: min(50%, 100px); */
display: flex; display: flex;
align-items: center; align-items: center;
/* background-color: yellow; */
margin: 10px; margin: 10px;
background-image: linear-gradient(90deg, #5843e4, #5a0760); background-image: linear-gradient(90deg, #5843e4, #5a0760);
color: white; color: white;
@ -142,14 +131,10 @@ select{
width: 50px; width: 50px;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
/* margin-right: 10px; */
} }
.messages{ .messages{
/* background-color: rgb(26, 26, 26); */
/* height: calc(100% - 118px); */
width: 70%; width: 70%;
/* height: 300px; */
border-radius: 0px 0px 10px 0px; border-radius: 0px 0px 10px 0px;
overflow: scroll; overflow: scroll;
} }
@ -247,8 +232,6 @@ p {
.div_submit { .div_submit {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
/* margin-left: 4px;
margin-right: 4px; */
} }
.lookForFriends{ .lookForFriends{
@ -268,7 +251,6 @@ p {
margin: auto; margin: auto;
padding: 1rem; padding: 1rem;
border-radius: 12px; border-radius: 12px;
/* display: flex; */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
background-color: rgba(0, 86, 27, 0.7); background-color: rgba(0, 86, 27, 0.7);
@ -276,21 +258,6 @@ p {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
/* .redAlert{
width: clamp(50%, 500px, 90%);
height: min(50%, 100px);
margin: auto;
padding: 1rem;
border-radius: 12px;
flex-direction: row;
align-items: center;
text-align: center;
background-color: rgba(133, 6, 6, 0.7);
font-size: 25px;
color: rgba(255, 255, 255, 1);
} */
.redAlert{ .redAlert{
width: clamp(50%, 500px, 90%); width: clamp(50%, 500px, 90%);
height: min(50%, 100px); height: min(50%, 100px);
@ -300,7 +267,6 @@ p {
border-radius: 12px; border-radius: 12px;
flex-direction: row; flex-direction: row;
text-align: center; text-align: center;
/* align-items: center; */
background-color: rgba(133, 6, 6, 0.7); background-color: rgba(133, 6, 6, 0.7);
font-size: 25px; font-size: 25px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
@ -335,8 +301,6 @@ p {
padding: 2rem; padding: 2rem;
border-radius: 12px; border-radius: 12px;
display: flex; display: flex;
/* flex-direction: column; */
/* align-items: center; */
background-color: #3e3c61; background-color: #3e3c61;
overflow: scroll; overflow: scroll;
} }
@ -354,8 +318,6 @@ p {
.settingSecondPart{ .settingSecondPart{
margin-top: 10%; margin-top: 10%;
margin-left: 5%; margin-left: 5%;
/* margin-left: 20%; */
} }
.checkbox{ .checkbox{

13
containers/react/src/styles/Profile.css
View File

@ -1,10 +1,6 @@
/* Container style */ .file-upload-container {
.file-upload-container {
margin-left: 2rem; margin-left: 2rem;
font-size: 1.7rem; font-size: 1.7rem;
/* background: #5843e4; */
/* color:#f5f5f5; */
margin: 0 16px; margin: 0 16px;
text-decoration: none; text-decoration: none;
padding: 10px 16px; padding: 10px 16px;
@ -15,11 +11,8 @@
gap: 10px; gap: 10px;
} }
/* File input style */ .file-input {
.file-input { display: none;
/* background: #5843e4; */
/* color:#f5f5f5; */
display: none; /* Hide the default file input */
} }
.file-label { .file-label {

18
containers/react/src/styles/Win_Loss.css
View File

@ -1,17 +1,8 @@
.tab{ .tab{
/* display: flex; */
/* flex-direction: column; */
/* background-color: red; */
height: 60vh; height: 60vh;
/* padding: 15px; */
/* overflow: scroll; */
} }
.scroll { .scroll {
/* border:3px; */
/* background-color: #5843e4; */
/* border-color: white; */
overflow: scroll; overflow: scroll;
} }
@ -20,26 +11,20 @@
} }
.elements { .elements {
/* display: flex; */
border-width:1px; border-width:1px;
border-style:solid; border-style:solid;
/* background-color: #5843e4; */
border-color: grey; border-color: grey;
/* overflow: scroll; */
} }
.title { .title {
color: #5843e4; color: #5843e4;
/* font-size: 22px; */
font-weight: bold; font-weight: bold;
margin-bottom: 25px; margin-bottom: 25px;
} }
.content { .content {
color: white; color: white;
/* font-size: 22px; */
font-weight: bold; font-weight: bold;
/* display: flex; */
flex-direction: column; flex-direction: column;
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -48,11 +33,8 @@
display:inline; display:inline;
flex-direction: row; flex-direction: row;
color: white; color: white;
/* font-size: 22px; */
font-weight: bold; font-weight: bold;
flex-direction: row; flex-direction: row;
/* text-align: justify; */
/* margin-bottom: 5px; */
} }
.me { .me {

10
containers/react/src/styles/chat.css
View File

@ -157,13 +157,3 @@
font-size: 13px; font-size: 13px;
font-style: italic; font-style: italic;
} }
/* Messages.css */
/* import '../../styles/Messages.css' */
/* General styles */
/* Messages.css */
/* import '../../styles/Messages.css' */
/* General styles

37
containers/react/src/styles/field.css
View File

@ -18,32 +18,22 @@
.field { .field {
background-color: rgb(249, 249, 249); background-color: rgb(249, 249, 249);
/* border-radius: 5vh; */
/* color: rgb(100, 42, 42); */
display: block; display: block;
margin: auto; margin: auto;
margin-top: 5vh; margin-top: 5vh;
/* padding: 2vh 5vw; */
height: 80%; height: 80%;
width: 80%; width: 80%;
/* font-size: 300%; */
} }
.clicked{ .clicked{
/* justify-content: center; */
/* display: flex;
justify-content: center; */
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
width: 70vw; width: 70vw;
/* height: 70vh; */
margin:auto; margin:auto;
margin-right: 15vw; margin-right: 15vw;
margin-left: 15vw; margin-left: 15vw;
margin-top: 10vh; margin-top: 10vh;
position: relative; position: relative;
padding-top: 35%; padding-top: 35%;
/* padding-top: 25; */
/* padding-top: 177.77% */
} }
@media screen and (max-width: 900px){ @media screen and (max-width: 900px){
.playButton{ .playButton{
@ -74,36 +64,9 @@
flex-direction: column; flex-direction: column;
} }
/* @media screen and (max-width: 350px){
.responsive{
display:list-item;
flex-direction: column;
}
} */
#myCanvas { #myCanvas {
background-color: rgb(124, 47, 47); background-color: rgb(124, 47, 47);
/* position: absolute; */
/* top: 0; */
/* left: 0; */
/* cursor: none; */
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
/* @media screen and (max-width: 768px) { */
/* #canvas_container { */
/* width: 50%; */
/* transform: rotate(90deg);
transform-origin: top right;
position: relative;
/* margin-right: 100vw; */
/* height: 100vw; */
/* width: 100vh; */
/* } */
/* #myCanvas {
height: 100%;
width: 100%;
} */
/* } */

1
containers/react/src/styles/index.css
View File

@ -5,7 +5,6 @@ body {
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
/* height: 100%; */
} }
code { code {

6
containers/react/src/styles/old.css
View File

@ -1,5 +1,4 @@
body { body {
/* display: flex; */
margin: 0%; margin: 0%;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@ -20,7 +19,6 @@ footer {
width: 7vw; width: 7vw;
max-height: 7vh; max-height: 7vh;
max-width: 7vh; max-width: 7vh;
/* max-width: ; */
border-radius: 50%; border-radius: 50%;
border: 5px solid rgb(255, 255, 255); border: 5px solid rgb(255, 255, 255);
} }
@ -66,7 +64,6 @@ input{
} }
.username { .username {
/* justify-content: center; */
margin-right: 1vw; margin-right: 1vw;
display: flex; display: flex;
align-items: center; align-items: center;
@ -90,7 +87,6 @@ input{
.menu { .menu {
margin-left: 2vw; margin-left: 2vw;
color: aqua; color: aqua;
/* font-size: 4vh; */
font-size: 2vw; font-size: 2vw;
text-decoration: none; text-decoration: none;
} }
@ -111,9 +107,7 @@ input{
display:flex; display:flex;
max-width: 33%; max-width: 33%;
height: 100%; height: 100%;
/* font-size: 50px; */
color:blueviolet; color:blueviolet;
/* font-size: 10vw; */
font-size: min(10vw, 10vh); font-size: min(10vw, 10vh);
justify-content: center; justify-content: center;
} }