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

Merge remote-tracking branch 'origin/reborn' into apommier

Browse Source
This commit is contained in:
Alexandre POMMIER 2023-06-28 17:51:45 +02:00
commit c5371353f8
16 changed files with 7 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
containers/react/.env
View File

@ -1,13 +1,6 @@
REACT_APP_BASE_URL=paul-f5Ar4s4:8080 REACT_APP_BASE_URL=paul-f5Ar4s4:8080
REACT_APP_SOCKET_URL=paul-f5Ar4s4 REACT_APP_SOCKET_URL=paul-f5Ar4s4
REACT_APP_API_SECRET=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 REACT_APP_API_SECRET=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
REACT_APP_CLIENT_UID=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789 REACT_APP_CLIENT_UID=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789
# REACT_APP_BASE_URL=92.143.191.152
# REACT_APP_BASE_URL=192.168.1.19
REACT_APP_INTRA_URL="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789&redirect_uri=http%3A%2F%2Fpaul-f5Ar4s4%3A8080%2Fapi%2Fauth%2Flogin&response_type=code" REACT_APP_INTRA_URL="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789&redirect_uri=http%3A%2F%2Fpaul-f5Ar4s4%3A8080%2Fapi%2Fauth%2Flogin&response_type=code"
# REACT_APP_BASE_URL=92.143.191.152
# REACT_APP_BASE_URL=192.168.1.19

14
containers/react/src/components/Alert/GreenAlert.tsx
View File

@ -4,19 +4,6 @@ import { AiOutlineCheckCircle } from "react-icons/ai";
import '../../styles/Messages.css' import '../../styles/Messages.css'
import React from "react"; import React from "react";
const dropIn = {
hidden: {
y: "-100vh",
},
visible: {
y: "0",
},
exit: {
y: "-100vh",
},
};
interface AlertProps { interface AlertProps {
handleClose: Function, handleClose: Function,
text: string text: string
@ -30,7 +17,6 @@ function GreenAlert({ handleClose, text }: AlertProps) {
<motion.div <motion.div
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="greenAlert" className="greenAlert"
// variant={dropIn}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="exit" exit="exit"

13
containers/react/src/components/Alert/RedAlert.tsx
View File

@ -4,19 +4,6 @@ import { BiErrorCircle } from "react-icons/bi";
import '../../styles/Messages.css' import '../../styles/Messages.css'
import React from "react"; import React from "react";
const dropIn = {
hidden: {
y: "-100vh",
},
visible: {
y: "0",
},
exit: {
y: "-100vh",
},
};
interface AlertProps { interface AlertProps {
handleClose: Function, handleClose: Function,
text: string text: string

12
containers/react/src/components/Alert/YellowAlert.tsx
View File

@ -6,18 +6,6 @@ import React from "react";
import { MdQrCodeScanner } from "react-icons/md"; import { MdQrCodeScanner } from "react-icons/md";
import { GiCrownedSkull, GiWingedSword } from "react-icons/gi"; import { GiCrownedSkull, GiWingedSword } from "react-icons/gi";
const dropIn = {
hidden: {
y: "-100vh",
},
visible: {
y: "0",
},
exit: {
y: "-100vh",
},
};
interface AlertProps { interface AlertProps {
handleClose: Function, handleClose: Function,
text: string, text: string,

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

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/09 08:18:58 by apommier #+# #+# */ /* Created: 2023/06/09 08:18:58 by apommier #+# #+# */
/* Updated: 2023/06/28 17:46:36 by apommier ### ########.fr */ /* Updated: 2023/06/28 17:50:52 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */

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

@ -28,7 +28,7 @@ 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);
useEffect(() => { useEffect(() => {

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

@ -1,37 +1,16 @@
import api from '../../script/axiosApi.tsx'; import api from '../../script/axiosApi.tsx';
import React, { useState, useEffect} from "react"; import React, { useState, useEffect} from "react";
import styled from "styled-components";
import Friend from './Friend.tsx'; 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 {User} from "../../../interfaces.tsx" import {User} from "../../../interfaces.tsx"
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 ()=>{
@ -42,7 +21,6 @@ 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);
setIsLoading(false) setIsLoading(false)

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