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/
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-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://react_app:8001;
proxy_pass http://react_app:8081;
}
location /api {

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* config.service.ts :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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"
},
"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",
"build": "react-scripts build",
"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"
animate="visible"
exit="exit"
>
>
<BiErrorCircle/>
<p>{text}</p>
</motion.div>
{setTimeout(handleClose, 1500)}
{setTimeout(handleClose, 1500)}
</Backdrop>
)
}

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

@ -40,9 +40,9 @@ function PlayButton() {
<button onClick={handleButtonClick} className="playButton">Play</button>
{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
<div className='checkbox'>
<p><input type="checkbox" value="superpower"/> Super Power </p>
<p><input type="checkbox" value="obstacle"/> Obstacle </p>
<p><input type="checkbox" value="speed"/> Faster and Faster </p>
<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power </p>
<p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </p>
<p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>
</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} from "../../../interfaces.tsx"
import { IoLogoOctocat } from "react-icons/io5";
const TouchDiv = styled.div`
margin-left: 10px;
@ -370,12 +371,13 @@ function Chats(){
<div className="chat">
<div className='navbar'>
<img src={DefaultPic} alt="profile" className="pic"/>
{/* <img src={DefaultPic} alt="profile" className="pic"/> */}
<IoLogoOctocat className="catchat"/>
<span>
{isLoading || !user ? (
<h4>Loading...</h4>
) : (
<h4>{user.nickname}</h4>
<h2>Chat</h2>
)}
</span>
{/* <div className="end">
@ -444,7 +446,7 @@ function Chats(){
))}
<TouchDiv>
<motion.div onClick={handleAddFriend}>
<MdOutlineGroupAdd />
<MdOutlineGroupAdd className="catchat"/>
</motion.div>
<AnimatePresence initial={false} onExitComplete={() => null}>
{showAddFriendAlert && addFriend && (
@ -457,7 +459,7 @@ function Chats(){
</TouchDiv>
<TouchDiv>
<motion.div onClick={handleBlockFriend}>
<ImBlocked />
<ImBlocked className="block"/>
</motion.div>
<AnimatePresence initial={false} onExitComplete={() => null}>
{showBlockAlert && block && (

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

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 */
/* */
/* ************************************************************************** */
@ -34,11 +34,11 @@ interface MessageMeProps {
}
function MessageMe({message, own}: MessageMeProps){
const [profilePicture, setProfilePicture] = useState('');
const [sender, setSender] = useState<User>();
const [conv, setConv] = useState<Conv>();
const [user, setUser] = useState<User>();
const scrollRef = useRef<HTMLDivElement>(null);
@ -130,8 +130,8 @@ function MessageMe({message, own}: MessageMeProps){
<MeStyleP>{message.text}</MeStyleP>
</div>
</div>
)
}
export default MessageMe
export default MessageMe

110
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 {Link} from 'react-router-dom';
import { UserProfile } from "../../DataBase/DataUserProfile";
import {useState} from 'react';
import { Link } from 'react-router-dom';
// import { UserProfile } from "../../DataBase/DataUserProfile";
import { useState } from 'react';
import "../../styles/Profile.css"
import api from '../../script/axiosApi.tsx';
import React from "react";
import RedAlert from "../Alert/RedAlert.tsx";
const dropIn = {
hidden: {
@ -26,37 +27,55 @@ const dropIn = {
// )
// }
const ModalEdit = ( handleClose ) => {
const ModalEdit = (handleClose) => {
// let new_name = "";
const [nickname, setNickname] = useState("");
const handler = e =>
{
const [errTaken, setErrTaken] = useState(false);
const closeTaken = () => setErrTaken(false);
const [errTooShort, setErrTooShort] = useState(false);
const closeTooShort = () => setErrTooShort(false);
const handler = e => {
setNickname(e.target.value);
console.log("testeeeee")
const postNickname = async ()=>{
try{
await api.post("/nickname", {nickname: nickname})
// setUser(tmpUser.data);
// setIsLoading(false)
}
catch(err){
console.log(err);
}
const postNickname = async () => {
// try{
// await api.post("/nickname", {nickname: nickname})
// // setUser(tmpUser.data);
// // setIsLoading(false)
// }
// catch(err){
// console.log(err);
// }
};
postNickname();
}
const handlePostNickname = async () =>
{
console.log("nickname=" ,nickname)
try{
await api.post("/nickname", {nickname: nickname})
window.location.reload();
const handlePostNickname = async () => {
console.log("nickname=", nickname)
try {
const ret = await api.post("/nickname", { nickname: nickname });
// console.log("cest ici = ",ret);
// 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);
// setIsLoading(false)
}
catch(err){
catch (err) {
console.log(err);
}
}
@ -66,23 +85,34 @@ const ModalEdit = ( handleClose ) => {
// //do nothing
// }
return (
<motion.div
className="modal"
variants={dropIn}
initial="hidden"
animate="visible"
exit="exit">
<h2>Type your new name</h2>
<input className="text" maxLength="10" type="text" value={nickname} onChange={handler} handleClose/>
<div>
<div className="button" onClick={ () => handlePostNickname()}>
change
{/* <Link className="button" to={""}>change</Link> */}
</div>
<motion.div
className="modal"
variants={dropIn}
initial="hidden"
animate="visible"
exit="exit">
<h2>Type your new name</h2>
<input className="text" minLength={2} maxLength={10} type="text" value={nickname} onChange={handler} />
<div>
<div className="button" onClick={handlePostNickname}>
change
{/* <Link className="button" to={""}>change</Link> */}
</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>
)
}

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

@ -3,7 +3,7 @@
/* ::: :::::::: */
/* Home.tsx :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/09 08:19:04 by apommier #+# #+# */
/* 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 { Link } from "react-router-dom";
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 { GiWingedSword, GiCrownedSkull } from 'react-icons/gi';
@ -78,7 +78,7 @@ function Profile () {
} catch (error) {
console.error('Error uploading file:', error);
}
}
}
// }
};
@ -130,7 +130,7 @@ function Profile () {
{isLoading || !user ? (
<h1>Loading...</h1>
) : (
<h1>{user.nickname}</h1>
<h1 className='user_name'>{user.nickname}</h1>
)}
</span>
@ -149,7 +149,7 @@ function Profile () {
</>
)}
</motion.div>
{/* <div className="file-upload-container"> */}
{/* <button onClick={handleUpload} className="upload-button">Upload</button> */}
{/* <button onClick={handleUpload} className="upload-button">Upload</button> */}
@ -215,13 +215,13 @@ function Home () {
<div>
{user && user.otp_verified ? (
<MdQrCodeScanner className='success' onClick={() => setSuccessQr(true)}/>
):("")}
):("")}
{user && user.win >= 2 ? (
<GiWingedSword className="success" onClick={() => setSuccessSword(true)}/>
):("")}
{user && user.win >= 5 ? (
<GiCrownedSkull className="success" onClick={() => setSuccessCrown(true)}/>
):("")}
):("")}
</div>
<div className="home">
<motion.div animate={{x: move ? -200: 120}}
@ -236,7 +236,7 @@ function Home () {
className="div_history"
// className="history"
onClick={ () => setmove(!move)}>
<Link to="#" className="history"><AiOutlineHistory/> Match History</Link>
<Link to="#" className="history"> {move ? (<AiOutlineCloseCircle/>):(<AiOutlineHistory/>)} Match History</Link>
</motion.div>
<AnimatePresence initial={false} onExitComplete={() => null}>
{successQr ? (
@ -251,8 +251,8 @@ function Home () {
<YellowAlert handleClose={closeSword} text={"Success: 2 victory ? You won the noobi warrior success!"} icon={3}/>
) : ("")}
</AnimatePresence>
</motion.div>
</motion.div>
)
}
export default Home
export default Home

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

@ -3,6 +3,7 @@
margin: 50px;
}
.rank_elements {
border-width:1px;
border-style:solid;
@ -25,4 +26,14 @@
height: 30px;
width: 30px;
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;
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;
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 {
margin-top: 20px;
border: solid 0px #ccc;

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

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