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

project work in 42

Browse Source
This commit is contained in:
Alexandre POMMIER 2023-06-23 15:47:57 +02:00
parent 9cb31f88de
commit 78c3c19de8
12 changed files with 35 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.env
View File

@ -14,22 +14,22 @@
NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf" NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf"
# BASE_URL=http://localhost # BASE_URL=http://localhost
BASE_URL=localhost BASE_URL=localhost:8080
REACT_APP_BASE_URL=localhost REACT_APP_BASE_URL=localhost:8080
REDIRECT_URI=http://localhost/api/auth/login REDIRECT_URI=http://localhost:8080/api/auth/login
#postgres var #postgres var
# POSTGRES_HOST=127.0.0.1 # POSTGRES_HOST=127.0.0.1
# DB_TYPE=postgres # DB_TYPE=postgres
POSTGRES_HOST=postgresql POSTGRES_HOST=postgresql
POSTGRES_USER=postgres POSTGRES_USER=postgres
POSTGRES_PASSWORD=pass POSTGRES_PASSWORD=postgres
POSTGRES_DATABASE=postgres POSTGRES_DATABASE=postgres
MODE=DEV MODE=DEV
#port #port
API_PORT=3000 API_PORT=3000
# REACT_PORT=3000 (current = 8080) # REACT_PORT=3000 (current = 8080)
NGINX_PORT=80 NGINX_PORT=8080
PONG_PORT=4000 PONG_PORT=4000
CHAT_PORT=4001 CHAT_PORT=4001
POSTGRES_PORT=5432 POSTGRES_PORT=5432

18
conf/nginx.conf
View File

@ -3,14 +3,14 @@ server {
# listen 80 ssl; # listen 80 ssl;
# listen 443 ssl; # listen 443 ssl;
# listen ${NGINX_PORT}; # listen ${NGINX_PORT};
listen 80; listen 8080;
location /{ location /{
proxy_set_header Host $host; proxy_set_header Host $host;
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:8080; proxy_pass http://react_app:8001;
} }
location /api { location /api {
@ -20,4 +20,18 @@ server {
proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://api:3000/api; proxy_pass http://api:3000/api;
} }
location /socket {
# Forward requests to socket server running on port 4001
if ($request_uri ~ ^/socket/4001) {
proxy_pass http://chat:4001;
break;
}
# Forward requests to socket server running on port 4000
if ($request_uri ~ ^/socket/4000) {
proxy_pass http://pong:4000;
break;
}
}
} }

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

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/04/09 14:53:49 by apommier #+# #+# */ /* Created: 2023/04/09 14:53:49 by apommier #+# #+# */
/* Updated: 2023/06/12 14:51:44 by apommier ### ########.fr */ /* Updated: 2023/06/22 20:42:32 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -17,7 +17,7 @@ export const getTypeOrmConfig = (): TypeOrmModuleOptions => ({
host: process.env.POSTGRES_HOST || 'postgresql', host: process.env.POSTGRES_HOST || 'postgresql',
port: parseInt(process.env.POSTGRES_PORT, 10) || 5432, port: parseInt(process.env.POSTGRES_PORT, 10) || 5432,
username: process.env.POSTGRES_USER || 'postgres', username: process.env.POSTGRES_USER || 'postgres',
password: process.env.POSTGRES_PASSWORD || 'pass', password: process.env.POSTGRES_PASSWORD || 'postgres',
database: process.env.POSTGRES_DATABASE || 'postgres', database: process.env.POSTGRES_DATABASE || 'postgres',
entities: ["dist/**/*.entity.js"], entities: ["dist/**/*.entity.js"],
// entities: [join(__dirname, '**', '*.entity.{ts,js}')] // entities: [join(__dirname, '**', '*.entity.{ts,js}')]

4
containers/api/src/model/chat.entity.ts
View File

@ -6,12 +6,12 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/17 01:00:20 by apommier #+# #+# */ /* Created: 2023/06/17 01:00:20 by apommier #+# #+# */
/* Updated: 2023/06/17 01:31:29 by apommier ### ########.fr */ /* Updated: 2023/06/23 15:18:19 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn, BaseEntity } from 'typeorm'; import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn, BaseEntity } from 'typeorm';
@Entity() @Entity()
export class Conv{ export class Conv{
@PrimaryGeneratedColumn() @PrimaryGeneratedColumn()

9
containers/pong/src/pong/pong.gateway.ts
View File

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/19 15:18:38 by apommier #+# #+# */ /* Created: 2023/06/19 15:18:38 by apommier #+# #+# */
/* Updated: 2023/06/21 00:59:39 by apommier ### ########.fr */ /* Updated: 2023/06/23 15:19:12 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -50,14 +50,7 @@ export class PongGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
handleDisconnect(client: Socket) handleDisconnect(client: Socket)
{ {
// console.log(`Client disconnected: ${client.id}`);
console.log(`Normal disconnected: ${client.id}`); console.log(`Normal disconnected: ${client.id}`);
// this.waitingClients.delete(client);
// this.waitingClients.forEach((waitingClient) => {
// if (waitingClient.client === client) {
// this.waitingClients.delete(waitingClient);
// }})
// delete this.clients[client.id];
this.waitingClients.forEach((item) => { this.waitingClients.forEach((item) => {
if (item.client === client) if (item.client === client)

2
containers/react/.env
View File

@ -1,4 +1,4 @@
REACT_APP_BASE_URL=localhost REACT_APP_BASE_URL=localhost:8080
REACT_APP_API_SECRET=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 REACT_APP_API_SECRET=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
REACT_APP_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41 REACT_APP_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41
# REACT_APP_BASE_URL=92.143.191.152 # REACT_APP_BASE_URL=92.143.191.152

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=8080 react-scripts start", "start": "HOST=0.0.0.0 PORT=8001 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",

9
containers/react/src/components/Game/Ranking.tsx
View File

@ -43,15 +43,6 @@ function Ranking(){
<div className='scroll'> <div className='scroll'>
{ranking.map((user, index) => ( {ranking.map((user, index) => (
<Rank user={user} index={index} key={user.username}/> <Rank user={user} index={index} key={user.username}/>
// return (
// <div className='rank_elements'>
// <div>
// <p>{index + 1}</p>
// <h4>{user.rank}: {user.nickname} <img className="profilePic" src={defaultpic}/></h4>
// </div>
// <h4 className='content'>{user.opponent}</h4>
// </div>
// )
))} ))}
</div> </div>
)} )}

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

@ -83,7 +83,7 @@ interface MessageProps {
} }
function Chats(){ function Chats(){
const [isLoading, setIsLoading] = useState<boolean>(true); const [isLoading, setIsLoading] = useState<boolean>(true);
const [conversations, setConversation] = useState([]); const [conversations, setConversation] = useState([]);
const [partyInvite, setPartyInvite] = useState([]); const [partyInvite, setPartyInvite] = useState([]);
@ -94,7 +94,7 @@ function Chats(){
const [messages, setMessage] = useState<MessageProps[]>([]); const [messages, setMessage] = useState<MessageProps[]>([]);
const [newMessages, setNewMessage] = useState(""); const [newMessages, setNewMessage] = useState("");
const [incomingMessage, setIncomingMessage] = useState<MessageProps>(); const [incomingMessage, setIncomingMessage] = useState<MessageProps>();
// let socket: Socket; // let socket: Socket;
const socket = useRef<Socket | null>(null); const socket = useRef<Socket | null>(null);
// const socket = Socket<DefaultEventsMap, DefaultEventsMap> | null // const socket = Socket<DefaultEventsMap, DefaultEventsMap> | null
@ -114,8 +114,9 @@ function Chats(){
setPartyInvite(tmpInvite.data); setPartyInvite(tmpInvite.data);
setUser(tmpUser.data); setUser(tmpUser.data);
setConversation(convs.data); setConversation(convs.data);
// console.log(`connection....`); console.log(`connection....`);
socket.current = io('http://' + process.env.REACT_APP_BASE_URL + ':4001', { transports: ['polling'] }); socket.current = io('http://localhost:4001', { transports: ['polling'] });
console.log(`connection done`);
socket.current.emit('connection', {username: tmpUser.data.username}) socket.current.emit('connection', {username: tmpUser.data.username})
socket.current.on('message', (data) => { //data should be a message ?) socket.current.on('message', (data) => { //data should be a message ?)
setIncomingMessage(data); setIncomingMessage(data);

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

@ -109,8 +109,6 @@ const Modal = ({handleClose}) => {
animate="visible" animate="visible"
exit="exit" exit="exit"
> >
{/* <p>New Conversation</p> */}
{selectTags.map((selectTag) => ( {selectTags.map((selectTag) => (
<div key={selectTag.id}> <div key={selectTag.id}>
<select <select

55
containers/react/src/pages/Field.tsx
View File

@ -62,64 +62,11 @@ function Field()
}; };
}, []); }, []);
// const [buttonClicked, setButtonClicked] = useState(false);
// const handleButtonClick = () => {
// drawCanvas();
// setButtonClicked(true);
// };
return ( return (
<div className="field" id="canvas_container"> <div className="field" id="canvas_container">
<canvas id="myCanvas"></canvas> <canvas id="myCanvas"></canvas>
{/* <button onClick={handleButtonClick}>Draw on Canvas</button> */}
{/* {buttonClicked && <canvas id="myCanvas"></canvas>}
{!buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button>} */}
</div> </div>
); );
} }
export default Field; export default Field;
// export default withRouter(Field);
// function Field() {
// const [buttonClicked, setButtonClicked] = useState(false);
// const handleButtonClick = () => {
// const canvas = document.createElement('canvas');
// canvas.id = 'myCanvas';
// console.log("button clicked")
// document.getElementById('canvas_container').appendChild(canvas);
// setButtonClicked(true);
// drawCanvas(canvas);
// };
// setButtonClicked(true);
// return (
// // <div className="field" id="canvas_container">
// <div className={`notClicked ${buttonClicked ? 'clicked' : ''}`} id="canvas_container">
// {!buttonClicked && <button className="playButton" onClick={handleButtonClick}>Play</button>}
// </div>
// );
// }
// export default Field;
// function draw() {
// // Effacer le canvas
// ctx.clearRect(0, 0, canvas.width, canvas.height);
// // Dessiner la raquette
// ctx.fillRect(canvas.width - paddleWidth, paddleY, paddleWidth, paddleHeight);
// // Appeler la fonction draw à chaque frame
// requestAnimationFrame(draw);
// }
// draw(); // Appeler la fonction draw pour la première fois
// const canvas = document.getElementById('myCanvas');
// canvas.width = 500;
// canvas.height = 500;
// const ctx = canvas.getContext('2d');
// ctx.fillRect(50, 50, 1000, 1000);

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

@ -61,7 +61,7 @@ function DrawCanvas(option: number, gameParam: GameProps) {
if(!ctx) if(!ctx)
return ; return ;
const socket = io('http://' + process.env.REACT_APP_BASE_URL + ':4000', { transports: ['polling'] }); const socket = io('http://localhost:4000', { transports: ['polling'] });
// useEffect(() => { // useEffect(() => {
// console.log("useeffect?????????????????") // console.log("useeffect?????????????????")
// return () => { // return () => {
@ -576,11 +576,6 @@ async function draw(timestamp: number)
ballY = ballRadius + 2 ballY = ballRadius + 2
// send_info(); // send_info();
} }
// else if (ballX + ballRadius + 2 >= canvas.width) //touch right wall
// {
// vX = -vX;
// // send_info();
// }
} }
function is_out() function is_out()
@ -635,19 +630,6 @@ async function draw(timestamp: number)
//======================================================================================================== //========================================================================================================
//======================================================================================================== //========================================================================================================
// interface sizeProps {
// clientWidth: number,
// clientHeight: number
// }
// document.addEventListener('resize', event => {
// // event.height
// // event.width
// const { clientWidth, clientHeight } = canvas.parentElement;
// // const { clientWidth, clientHeight } = canvas.parentElement!;
// console.log(`resize detected widht= ${clientWidth} height= ${clientHeight}`)
// });
document.addEventListener('mousemove', event => { document.addEventListener('mousemove', event => {
const mouseY = event.clientY; const mouseY = event.clientY;