From b609c7a9d79d69b82d079b665cab0a2268ecb624 Mon Sep 17 00:00:00 2001 From: Elisee ADJIGUIDI Date: Wed, 28 Jun 2023 17:23:01 +0200 Subject: [PATCH 1/2] no comment --- .../react/src/components/Social/Friend.tsx | 29 +---------- .../src/components/Social/FriendRequest.tsx | 23 +-------- .../react/src/components/Social/Social.tsx | 49 ------------------- containers/react/src/styles/Game.css | 5 -- containers/react/src/styles/Header.css | 18 ------- containers/react/src/styles/Messages.css | 38 -------------- containers/react/src/styles/Profile.css | 13 ++--- containers/react/src/styles/Win_Loss.css | 18 ------- containers/react/src/styles/chat.css | 12 +---- containers/react/src/styles/field.css | 39 +-------------- containers/react/src/styles/index.css | 1 - containers/react/src/styles/old.css | 6 --- 12 files changed, 9 insertions(+), 242 deletions(-) diff --git a/containers/react/src/components/Social/Friend.tsx b/containers/react/src/components/Social/Friend.tsx index 8774b814..937bace9 100644 --- a/containers/react/src/components/Social/Friend.tsx +++ b/containers/react/src/components/Social/Friend.tsx @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* Friend.tsx :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: apommier +#+ +:+ +#+ */ +/* By: sadjigui +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* 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 { RxCircle } from "react-icons/rx"; -import { CgFontSpacing } from "react-icons/cg"; import React from "react"; 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 { currentUser: User } -// export default function Friend({currentUser}) export default function Friend({currentUser}: UserProps) { const [profilePicture, setProfilePicture] = useState(''); @@ -51,10 +44,7 @@ export default function Friend({currentUser}: UserProps) useEffect(() => { const fetchProfilePicture = async () => { try { - // const user = await api.get("/profile"); 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); } catch (error) { console.error('Error fetching profile picture:', error); @@ -80,17 +70,8 @@ export default function Friend({currentUser}: UserProps) 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) => { 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.location.reload(); }; @@ -111,9 +92,3 @@ export default function Friend({currentUser}: UserProps) ) } -// spectate visible -// {getStatus(currentUser) !== 'blue' ? ( -// <> -// ) : ( -// -// )} diff --git a/containers/react/src/components/Social/FriendRequest.tsx b/containers/react/src/components/Social/FriendRequest.tsx index bf83fd03..4d57a0ca 100644 --- a/containers/react/src/components/Social/FriendRequest.tsx +++ b/containers/react/src/components/Social/FriendRequest.tsx @@ -21,12 +21,6 @@ const UserChat = styled.div ` } ` -const SideP = styled.p` - font-size: 14px; - color: lightgray; - margin-left: 15px; -` - interface UserProps { currentUser: User } @@ -34,21 +28,15 @@ interface UserProps { export default function Friend({currentUser}: UserProps) { const [profilePicture, setProfilePicture] = useState(''); - const [request, setRequest] = useState(); //user who invite + const [request, setRequest] = useState(); const [clickEvent, setClickEvent] = useState(false); - // const [user, setUser] = useState(null); useEffect(() => { const fetchProfilePicture = async () => { try { - // const user = await api.get("/profile");\ - // const tmpUser = await api.get("/profile") const pic = await api.post("/getPicture", {username: currentUser.username}) const tmpRequest = await api.post("/user", {username: currentUser.username}) - // setUser(tmpUser.data); setRequest(tmpRequest.data); - // console.log(`user naem profile pic222= ${currentUser.username}`) - // console.log(` profile pic222= ${pic.data}`) setProfilePicture(pic.data); } catch (error) { console.error('Error fetching profile picture:', error); @@ -60,8 +48,6 @@ export default function Friend({currentUser}: UserProps) const handleButtonClick = (user: User) => { 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.location.reload(); }; @@ -73,8 +59,6 @@ export default function Friend({currentUser}: UserProps) } catch(err) { console.log(err); } - console.log("accept") - console.log(`request = ${request}`) } const Refuse = async (request: User) => { @@ -84,13 +68,10 @@ export default function Friend({currentUser}: UserProps) } catch(err) { console.log(err); } - console.log("refuse") - console.log(`request = ${request}`) } - // Vérifier si le contenu doit être caché if (clickEvent) { - return null; // Rendre null pour ne pas afficher le contenu + return null; } return ( diff --git a/containers/react/src/components/Social/Social.tsx b/containers/react/src/components/Social/Social.tsx index 53a2c9d4..57e26a81 100644 --- a/containers/react/src/components/Social/Social.tsx +++ b/containers/react/src/components/Social/Social.tsx @@ -1,4 +1,3 @@ -import DefaultPicture from '../../assets/profile.jpg' import api from '../../script/axiosApi.tsx'; import React, { useState, useEffect, useRef } from "react"; import styled from "styled-components"; @@ -8,37 +7,14 @@ import Friend from './Friend.tsx'; import FriendRequest from './FriendRequest.tsx'; import {IoMdPeople} from 'react-icons/io' -import { ImBlocked } from 'react-icons/im'; -import { MdOutlineGroupAdd } from 'react-icons/md'; 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 (){ const [friends, setFriends] = useState([]); const [invite, setInvite] = useState([]); const [isLoading, setIsLoading] = useState(true); const [user, setUser] = useState(); - const [profilePicture, setProfilePicture] = useState(''); useEffect(()=> { const getFriend = async ()=>{ @@ -49,10 +25,8 @@ function Social (){ const pic = await api.post("/getPicture", {username: tmpUser.data.username}) setInvite(tmpInv.data); - setProfilePicture(pic.data); setUser(tmpUser.data); setFriends(tmpFriends.data); - // return tmpUser; console.log(`user= ${tmpUser.data.username}`); 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 (
- {/* profile */} {isLoading || !user ? ( @@ -100,8 +53,6 @@ function Social (){
-{/* map with fiend request */} - {invite.map(c=> ( ))} diff --git a/containers/react/src/styles/Game.css b/containers/react/src/styles/Game.css index f2a2f498..1f0c7baa 100644 --- a/containers/react/src/styles/Game.css +++ b/containers/react/src/styles/Game.css @@ -7,7 +7,6 @@ .rank_elements { border-width:1px; border-style:solid; - /* background-color: #5843e4; */ border-color: grey; /* overflow: scroll; */ padding: 5px 100px; @@ -15,16 +14,12 @@ } .scroll { - /* border:3px; */ - /* background-color: #5843e4; */ - /* border-color: white; */ overflow: scroll; height: 68vh; } .profilePic{ margin-left: 10px; - /* margin-top: 10px; */ height: 30px; width: 30px; border-radius: 50%; diff --git a/containers/react/src/styles/Header.css b/containers/react/src/styles/Header.css index 531e5f06..fdc368ce 100644 --- a/containers/react/src/styles/Header.css +++ b/containers/react/src/styles/Header.css @@ -1,10 +1,7 @@ .Header { background-image: linear-gradient(90deg, #5843e4, #5a0760); - /* background-color: blue; */ - height: 80px; display: flex; - /* justify-content: start; */ align-items: center; } @@ -25,10 +22,6 @@ top: 0; left: 0; transition: 350ms; - /* margin-top: 10px; */ - - /* left: -100%; */ - /* transition: 850ms; */ } .nav-menu.active { @@ -38,10 +31,8 @@ .nav-text { display: flex; - /* justify-content: start; */ align-items: center; padding: 8px 0px 8px 16px; - list-style: none; height: 60px; } @@ -54,9 +45,7 @@ height: 100%; display: flex; align-items: center; - /* padding: 0 16px; */ padding: 8px 8px 8px 8px; - border-radius: 20px; } @@ -73,7 +62,6 @@ width: 100%; height: 80px; display: flex; - /* justify-content: start; */ align-items: center; } @@ -92,17 +80,12 @@ span { .success { height: 2%; width: 2%; - /* border: solid; */ margin-top: 1%; margin: 3vh; - /* margin-bottom: -12vh; */ - /* border-color: black; */ - /* border-radius: 50%; */ } .header-pic{ text-align: end; - /* id: right; */ } .footer { @@ -122,7 +105,6 @@ span { left: 0; height: 100%; width: 100%; - /* background: #000000e1; */ backdrop-filter: blur(1.5rem); display: flex; align-items: center; diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css index cd112256..7ce6d03f 100644 --- a/containers/react/src/styles/Messages.css +++ b/containers/react/src/styles/Messages.css @@ -56,18 +56,13 @@ select{ width: 30%; overflow: scroll; border-radius: 0px 0px 0px 10px; - /* width: 2rem; */ - /* height: 4rem; */ } .messages_box{ background-color: rgb(0, 0, 0); - /* height: 90vh; */ display: flex; align-items: center; justify-content: center; - /* position:relative; */ - } .container{ @@ -96,11 +91,8 @@ select{ } .navbar{ - /* width: clamp(50%, 500px, 20%); */ - /* height: min(50%, 100px); */ display: flex; align-items: center; - /* background-color: yellow; */ background-image: linear-gradient(90deg, #5843e4, #5a0760); color: white; padding: 3px; @@ -109,11 +101,8 @@ select{ } .navbarSocial{ - /* width: clamp(50%, 500px, 20%); */ - /* height: min(50%, 100px); */ display: flex; align-items: center; - /* background-color: yellow; */ margin: 10px; background-image: linear-gradient(90deg, #5843e4, #5a0760); color: white; @@ -142,14 +131,10 @@ select{ width: 50px; border-radius: 50%; object-fit: cover; - /* margin-right: 10px; */ } .messages{ - /* background-color: rgb(26, 26, 26); */ - /* height: calc(100% - 118px); */ width: 70%; - /* height: 300px; */ border-radius: 0px 0px 10px 0px; overflow: scroll; } @@ -247,8 +232,6 @@ p { .div_submit { flex-direction: row; align-items: center; - /* margin-left: 4px; - margin-right: 4px; */ } .lookForFriends{ @@ -268,7 +251,6 @@ p { margin: auto; padding: 1rem; border-radius: 12px; - /* display: flex; */ flex-direction: row; align-items: center; background-color: rgba(0, 86, 27, 0.7); @@ -276,21 +258,6 @@ p { 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{ width: clamp(50%, 500px, 90%); height: min(50%, 100px); @@ -300,7 +267,6 @@ p { border-radius: 12px; flex-direction: row; text-align: center; - /* align-items: center; */ background-color: rgba(133, 6, 6, 0.7); font-size: 25px; color: rgba(255, 255, 255, 1); @@ -335,8 +301,6 @@ p { padding: 2rem; border-radius: 12px; display: flex; - /* flex-direction: column; */ - /* align-items: center; */ background-color: #3e3c61; overflow: scroll; } @@ -354,8 +318,6 @@ p { .settingSecondPart{ margin-top: 10%; margin-left: 5%; - - /* margin-left: 20%; */ } .checkbox{ diff --git a/containers/react/src/styles/Profile.css b/containers/react/src/styles/Profile.css index aaa20ee4..90d5dc07 100644 --- a/containers/react/src/styles/Profile.css +++ b/containers/react/src/styles/Profile.css @@ -1,10 +1,6 @@ - /* Container style */ - .file-upload-container { - +.file-upload-container { margin-left: 2rem; font-size: 1.7rem; - /* background: #5843e4; */ - /* color:#f5f5f5; */ margin: 0 16px; text-decoration: none; padding: 10px 16px; @@ -15,11 +11,8 @@ gap: 10px; } - /* File input style */ - .file-input { - /* background: #5843e4; */ - /* color:#f5f5f5; */ - display: none; /* Hide the default file input */ +.file-input { + display: none; } .file-label { diff --git a/containers/react/src/styles/Win_Loss.css b/containers/react/src/styles/Win_Loss.css index 1677e6bd..6b1b9252 100644 --- a/containers/react/src/styles/Win_Loss.css +++ b/containers/react/src/styles/Win_Loss.css @@ -1,17 +1,8 @@ .tab{ - /* display: flex; */ - /* flex-direction: column; */ - /* background-color: red; */ height: 60vh; - /* padding: 15px; */ - /* overflow: scroll; */ - } .scroll { - /* border:3px; */ - /* background-color: #5843e4; */ - /* border-color: white; */ overflow: scroll; } @@ -20,26 +11,20 @@ } .elements { - /* display: flex; */ border-width:1px; border-style:solid; - /* background-color: #5843e4; */ border-color: grey; - /* overflow: scroll; */ } .title { color: #5843e4; - /* font-size: 22px; */ font-weight: bold; margin-bottom: 25px; } .content { color: white; - /* font-size: 22px; */ font-weight: bold; - /* display: flex; */ flex-direction: column; margin-bottom: 5px; } @@ -48,11 +33,8 @@ display:inline; flex-direction: row; color: white; - /* font-size: 22px; */ font-weight: bold; flex-direction: row; - /* text-align: justify; */ - /* margin-bottom: 5px; */ } .me { diff --git a/containers/react/src/styles/chat.css b/containers/react/src/styles/chat.css index 1a5681b2..2d2e358f 100644 --- a/containers/react/src/styles/chat.css +++ b/containers/react/src/styles/chat.css @@ -156,14 +156,4 @@ bottom: 50px; font-size: 13px; font-style: italic; -} - - -/* Messages.css */ -/* import '../../styles/Messages.css' */ - -/* General styles */ -/* Messages.css */ -/* import '../../styles/Messages.css' */ - -/* General styles \ No newline at end of file +} \ No newline at end of file diff --git a/containers/react/src/styles/field.css b/containers/react/src/styles/field.css index 0ff5ad5f..cd723141 100644 --- a/containers/react/src/styles/field.css +++ b/containers/react/src/styles/field.css @@ -18,32 +18,22 @@ .field { background-color: rgb(249, 249, 249); - /* border-radius: 5vh; */ - /* color: rgb(100, 42, 42); */ display: block; margin: auto; margin-top: 5vh; - /* padding: 2vh 5vw; */ height: 80%; width: 80%; - /* font-size: 300%; */ } .clicked{ - /* justify-content: center; */ - /* display: flex; - justify-content: center; */ background-color: rgb(0, 0, 0); width: 70vw; - /* height: 70vh; */ margin:auto; margin-right: 15vw; margin-left: 15vw; margin-top: 10vh; position: relative; padding-top: 35%; - /* padding-top: 25; */ - /* padding-top: 177.77% */ } @media screen and (max-width: 900px){ .playButton{ @@ -74,36 +64,9 @@ flex-direction: column; } -/* @media screen and (max-width: 350px){ - .responsive{ - display:list-item; - flex-direction: column; - } - } */ - #myCanvas { background-color: rgb(124, 47, 47); - /* position: absolute; */ - /* top: 0; */ - /* left: 0; */ - /* cursor: none; */ width: 100%; height: 100%; 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%; - } */ - /* } */ \ No newline at end of file +} \ No newline at end of file diff --git a/containers/react/src/styles/index.css b/containers/react/src/styles/index.css index 3bb1f2af..ec2585e8 100644 --- a/containers/react/src/styles/index.css +++ b/containers/react/src/styles/index.css @@ -5,7 +5,6 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - /* height: 100%; */ } code { diff --git a/containers/react/src/styles/old.css b/containers/react/src/styles/old.css index 7e15c34d..93a50327 100644 --- a/containers/react/src/styles/old.css +++ b/containers/react/src/styles/old.css @@ -1,5 +1,4 @@ body { - /* display: flex; */ margin: 0%; width: 100vw; height: 100vh; @@ -20,7 +19,6 @@ footer { width: 7vw; max-height: 7vh; max-width: 7vh; - /* max-width: ; */ border-radius: 50%; border: 5px solid rgb(255, 255, 255); } @@ -66,7 +64,6 @@ input{ } .username { - /* justify-content: center; */ margin-right: 1vw; display: flex; align-items: center; @@ -90,7 +87,6 @@ input{ .menu { margin-left: 2vw; color: aqua; - /* font-size: 4vh; */ font-size: 2vw; text-decoration: none; } @@ -111,9 +107,7 @@ input{ display:flex; max-width: 33%; height: 100%; - /* font-size: 50px; */ color:blueviolet; - /* font-size: 10vw; */ font-size: min(10vw, 10vh); justify-content: center; } From 02ecea7d52fde5c9a94f8482410d984de86309bb Mon Sep 17 00:00:00 2001 From: Elisee ADJIGUIDI Date: Wed, 28 Jun 2023 17:48:14 +0200 Subject: [PATCH 2/2] no dropIn in alert --- .../react/src/components/Alert/GreenAlert.tsx | 14 -------------- containers/react/src/components/Alert/RedAlert.tsx | 13 ------------- .../react/src/components/Alert/YellowAlert.tsx | 12 ------------ 3 files changed, 39 deletions(-) diff --git a/containers/react/src/components/Alert/GreenAlert.tsx b/containers/react/src/components/Alert/GreenAlert.tsx index a226c57f..a436c81e 100644 --- a/containers/react/src/components/Alert/GreenAlert.tsx +++ b/containers/react/src/components/Alert/GreenAlert.tsx @@ -4,19 +4,6 @@ import { AiOutlineCheckCircle } from "react-icons/ai"; import '../../styles/Messages.css' import React from "react"; - -const dropIn = { - hidden: { - y: "-100vh", - }, - visible: { - y: "0", - }, - exit: { - y: "-100vh", - }, -}; - interface AlertProps { handleClose: Function, text: string @@ -30,7 +17,6 @@ function GreenAlert({ handleClose, text }: AlertProps) { e.stopPropagation()} className="greenAlert" - // variant={dropIn} initial="hidden" animate="visible" exit="exit" diff --git a/containers/react/src/components/Alert/RedAlert.tsx b/containers/react/src/components/Alert/RedAlert.tsx index 28264f64..ff5ad191 100644 --- a/containers/react/src/components/Alert/RedAlert.tsx +++ b/containers/react/src/components/Alert/RedAlert.tsx @@ -4,19 +4,6 @@ import { BiErrorCircle } from "react-icons/bi"; import '../../styles/Messages.css' import React from "react"; - -const dropIn = { - hidden: { - y: "-100vh", - }, - visible: { - y: "0", - }, - exit: { - y: "-100vh", - }, -}; - interface AlertProps { handleClose: Function, text: string diff --git a/containers/react/src/components/Alert/YellowAlert.tsx b/containers/react/src/components/Alert/YellowAlert.tsx index 0d382905..5fe8a638 100644 --- a/containers/react/src/components/Alert/YellowAlert.tsx +++ b/containers/react/src/components/Alert/YellowAlert.tsx @@ -6,18 +6,6 @@ import React from "react"; import { MdQrCodeScanner } from "react-icons/md"; import { GiCrownedSkull, GiWingedSword } from "react-icons/gi"; -const dropIn = { - hidden: { - y: "-100vh", - }, - visible: { - y: "0", - }, - exit: { - y: "-100vh", - }, -}; - interface AlertProps { handleClose: Function, text: string,