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

merge

Browse Source
This commit is contained in:
Alexandre POMMIER 2023-06-24 16:17:16 +02:00
commit fc280662b9
15 changed files with 148 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,4 +1,5 @@
#.env .env
containers/react/.env
backend/node_modules/ backend/node_modules/
containers/backend/dist/ containers/backend/dist/

2
conf/init.sql
View File

@ -1 +1 @@
ALTER USER postgres WITH PASSWORD 'pass'; ALTER USER postgres WITH PASSWORD 'postgres';

2
conf/nginx.conf
View File

@ -10,7 +10,7 @@ server {
proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://react_app:8001; proxy_pass http://react_app:8081;
} }
location /api { location /api {

4
containers/api/src/config/config.service.ts
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* config.service.ts :+: :+: :+: */ /* config.service.ts :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/04/09 14:53:49 by apommier #+# #+# */ /* Created: 2023/04/09 14:53:49 by apommier #+# #+# */
/* Updated: 2023/06/22 20:42:32 by apommier ### ########.fr */ /* Updated: 2023/06/24 15:09:20 by sadjigui ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */

2
containers/react/package.json
View File

@ -22,7 +22,7 @@
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
"start": "HOST=0.0.0.0 PORT=8001 react-scripts start", "start": "HOST=0.0.0.0 PORT=8081 react-scripts start",
"start:dev": "npm run start --watch", "start:dev": "npm run start --watch",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",

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

@ -32,11 +32,11 @@ function RedAlert ({handleClose, text}: AlertProps) {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="exit" exit="exit"
> >
<BiErrorCircle/> <BiErrorCircle/>
<p>{text}</p> <p>{text}</p>
</motion.div> </motion.div>
{setTimeout(handleClose, 1500)} {setTimeout(handleClose, 1500)}
</Backdrop> </Backdrop>
) )
} }

6
containers/react/src/components/Game/PlayButton.tsx
View File

@ -40,9 +40,9 @@ function PlayButton() {
<button onClick={handleButtonClick} className="playButton">Play</button> <button onClick={handleButtonClick} className="playButton">Play</button>
{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */} {/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
<div className='checkbox'> <div className='checkbox'>
<p><input type="checkbox" value="superpower"/> Super Power </p> <p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power </p>
<p><input type="checkbox" value="obstacle"/> Obstacle </p> <p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </p>
<p><input type="checkbox" value="speed"/> Faster and Faster </p> <p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>
</div> </div>
</div> </div>
); );

10
containers/react/src/components/Messages/Chats.tsx
View File

@ -27,6 +27,7 @@ import PartyInvite from "./PartyInvite.tsx";
// import {User, Conv, Message} from "../../../interfaces.tsx" // import {User, Conv, Message} from "../../../interfaces.tsx"
import {User, Conv} from "../../../interfaces.tsx" import {User, Conv} from "../../../interfaces.tsx"
import { IoLogoOctocat } from "react-icons/io5";
const TouchDiv = styled.div` const TouchDiv = styled.div`
margin-left: 10px; margin-left: 10px;
@ -370,12 +371,13 @@ function Chats(){
<div className="chat"> <div className="chat">
<div className='navbar'> <div className='navbar'>
<img src={DefaultPic} alt="profile" className="pic"/> {/* <img src={DefaultPic} alt="profile" className="pic"/> */}
<IoLogoOctocat className="catchat"/>
<span> <span>
{isLoading || !user ? ( {isLoading || !user ? (
<h4>Loading...</h4> <h4>Loading...</h4>
) : ( ) : (
<h4>{user.nickname}</h4> <h2>Chat</h2>
)} )}
</span> </span>
{/* <div className="end"> {/* <div className="end">
@ -444,7 +446,7 @@ function Chats(){
))} ))}
<TouchDiv> <TouchDiv>
<motion.div onClick={handleAddFriend}> <motion.div onClick={handleAddFriend}>
<MdOutlineGroupAdd /> <MdOutlineGroupAdd className="catchat"/>
</motion.div> </motion.div>
<AnimatePresence initial={false} onExitComplete={() => null}> <AnimatePresence initial={false} onExitComplete={() => null}>
{showAddFriendAlert && addFriend && ( {showAddFriendAlert && addFriend && (
@ -457,7 +459,7 @@ function Chats(){
</TouchDiv> </TouchDiv>
<TouchDiv> <TouchDiv>
<motion.div onClick={handleBlockFriend}> <motion.div onClick={handleBlockFriend}>
<ImBlocked /> <ImBlocked className="block"/>
</motion.div> </motion.div>
<AnimatePresence initial={false} onExitComplete={() => null}> <AnimatePresence initial={false} onExitComplete={() => null}>
{showBlockAlert && block && ( {showBlockAlert && block && (

2
containers/react/src/components/Messages/Message.tsx
View File

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/01 18:24:46 by apommier #+# #+# */ /* Created: 2023/06/01 18:24:46 by apommier #+# #+# */
/* Updated: 2023/06/24 15:36:48 by apommier ### ########.fr */ /* Updated: 2023/06/24 16:00:48 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */

106
containers/react/src/components/Profile/EditName.tsx
View File

@ -1,12 +1,13 @@
import {motion} from "framer-motion" import { AnimatePresence, motion } from "framer-motion"
// import Backdrop from "../Sidebar/Backdrop" // import Backdrop from "../Sidebar/Backdrop"
import {Link} from 'react-router-dom'; import { Link } from 'react-router-dom';
import { UserProfile } from "../../DataBase/DataUserProfile"; // import { UserProfile } from "../../DataBase/DataUserProfile";
import {useState} from 'react'; import { useState } from 'react';
import "../../styles/Profile.css" import "../../styles/Profile.css"
import api from '../../script/axiosApi.tsx'; import api from '../../script/axiosApi.tsx';
import React from "react"; import React from "react";
import RedAlert from "../Alert/RedAlert.tsx";
const dropIn = { const dropIn = {
hidden: { hidden: {
@ -26,37 +27,55 @@ const dropIn = {
// ) // )
// } // }
const ModalEdit = ( handleClose ) => { const ModalEdit = (handleClose) => {
// let new_name = ""; // let new_name = "";
const [nickname, setNickname] = useState(""); const [nickname, setNickname] = useState("");
const [errTaken, setErrTaken] = useState(false);
const closeTaken = () => setErrTaken(false);
const [errTooShort, setErrTooShort] = useState(false);
const closeTooShort = () => setErrTooShort(false);
const handler = e => const handler = e => {
{
setNickname(e.target.value); setNickname(e.target.value);
console.log("testeeeee") console.log("testeeeee")
const postNickname = async ()=>{ const postNickname = async () => {
try{ // try{
await api.post("/nickname", {nickname: nickname}) // await api.post("/nickname", {nickname: nickname})
// setUser(tmpUser.data); // // setUser(tmpUser.data);
// setIsLoading(false) // // setIsLoading(false)
} // }
catch(err){ // catch(err){
console.log(err); // console.log(err);
} // }
}; };
postNickname(); postNickname();
} }
const handlePostNickname = async () => const handlePostNickname = async () => {
{ console.log("nickname=", nickname)
console.log("nickname=" ,nickname) try {
try{ const ret = await api.post("/nickname", { nickname: nickname });
await api.post("/nickname", {nickname: nickname}) // console.log("cest ici = ",ret);
window.location.reload(); // if (!ret)
console.log("test ret =", ret.data);
if (nickname.length < 3) {
setErrTooShort(true);
}
else if (ret.data) {
console.log("ici error = ", ret.data);
window.location.reload();
}
else {
console.log("nickname already set = ", ret.data);
setErrTaken(true);
}
// setUser(tmpUser.data); // setUser(tmpUser.data);
// setIsLoading(false) // setIsLoading(false)
} }
catch(err){ catch (err) {
console.log(err); console.log(err);
} }
} }
@ -66,23 +85,34 @@ const ModalEdit = ( handleClose ) => {
// //do nothing // //do nothing
// } // }
return ( return (
<motion.div <motion.div
className="modal" className="modal"
variants={dropIn} variants={dropIn}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="exit"> exit="exit">
<h2>Type your new name</h2> <h2>Type your new name</h2>
<input className="text" maxLength="10" type="text" value={nickname} onChange={handler} handleClose/> <input className="text" minLength={2} maxLength={10} type="text" value={nickname} onChange={handler} />
<div> <div>
<div className="button" onClick={ () => handlePostNickname()}> <div className="button" onClick={handlePostNickname}>
change change
{/* <Link className="button" to={""}>change</Link> */} {/* <Link className="button" to={""}>change</Link> */}
</div>
</div> </div>
</motion.div> <AnimatePresence initial={false} onExitComplete={() => null}>
{
errTaken ? (
<RedAlert handleClose={closeTaken} text="Error: Nickname already taken" />
) : ("")
}
{
errTooShort ? (
<RedAlert handleClose={closeTooShort} text="Error: Nickname it too short" />
) : ("")
}
</AnimatePresence>
</div>
</motion.div>
) )
} }

8
containers/react/src/pages/Home.tsx
View File

@ -3,7 +3,7 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Home.tsx :+: :+: :+: */ /* Home.tsx :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/09 08:19:04 by apommier #+# #+# */ /* Created: 2023/06/09 08:19:04 by apommier #+# #+# */
/* Updated: 2023/06/23 22:11:28 by apommier ### ########.fr */ /* Updated: 2023/06/23 22:11:28 by apommier ### ########.fr */
@ -20,7 +20,7 @@ import { motion, AnimatePresence } from 'framer-motion'
// import { GrClose } from 'react-icons/gr' // import { GrClose } from 'react-icons/gr'
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import ModalEdit from "../components/Profile/EditName.tsx"; import ModalEdit from "../components/Profile/EditName.tsx";
import {AiOutlineHistory} from 'react-icons/ai' import {AiOutlineCloseCircle, AiOutlineHistory} from 'react-icons/ai'
import { MdQrCodeScanner, MdOutlinePhotoLibrary } from 'react-icons/md'; import { MdQrCodeScanner, MdOutlinePhotoLibrary } from 'react-icons/md';
import { GiWingedSword, GiCrownedSkull } from 'react-icons/gi'; import { GiWingedSword, GiCrownedSkull } from 'react-icons/gi';
@ -130,7 +130,7 @@ function Profile () {
{isLoading || !user ? ( {isLoading || !user ? (
<h1>Loading...</h1> <h1>Loading...</h1>
) : ( ) : (
<h1>{user.nickname}</h1> <h1 className='user_name'>{user.nickname}</h1>
)} )}
</span> </span>
@ -236,7 +236,7 @@ function Home () {
className="div_history" className="div_history"
// className="history" // className="history"
onClick={ () => setmove(!move)}> onClick={ () => setmove(!move)}>
<Link to="#" className="history"><AiOutlineHistory/> Match History</Link> <Link to="#" className="history"> {move ? (<AiOutlineCloseCircle/>):(<AiOutlineHistory/>)} Match History</Link>
</motion.div> </motion.div>
<AnimatePresence initial={false} onExitComplete={() => null}> <AnimatePresence initial={false} onExitComplete={() => null}>
{successQr ? ( {successQr ? (

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

@ -3,6 +3,7 @@
margin: 50px; margin: 50px;
} }
.rank_elements { .rank_elements {
border-width:1px; border-width:1px;
border-style:solid; border-style:solid;
@ -26,3 +27,13 @@
width: 30px; width: 30px;
border-radius: 50%; border-radius: 50%;
} }
@media screen and (max-width: 755px){
.game{
display: grid;
height: 20vh;
}
.scroll{
height: 20vh;
}
}

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

@ -375,3 +375,13 @@ input.in_howLong{
width: auto; width: auto;
margin-left: 10px; margin-left: 10px;
} }
.catchat{
font-size: 30px;
margin-left: 12px;
}
.block{
font-size: 25px;
margin-left: 12px;
}

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

@ -154,6 +154,13 @@
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
} }
.user_name{
/* background-image: linear-gradient(90deg, #5843e4, #5a0760); */
background: -webkit-linear-gradient(60deg, #5843e4, #5a0760);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* canvas { /* canvas {
margin-top: 20px; margin-top: 20px;
border: solid 0px #ccc; border: solid 0px #ccc;

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

@ -11,6 +11,10 @@
font-size: 300%; font-size: 300%;
} }
.inside_checkbox{
height : 70%;
width: 70%;
}
.field { .field {
background-color: rgb(249, 249, 249); background-color: rgb(249, 249, 249);
@ -65,6 +69,18 @@
} }
} }
.responsive{
display: flex;
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; */ /* position: absolute; */