error git pong folder, mutiplayer pong work when two client are connected

backend/src/model/base.entity.ts

@@ -34,29 +34,6 @@
 import { PrimaryGeneratedColumn, Column, UpdateDateColumn, CreateDateColumn } from 'typeorm';
 
 export abstract class BaseEntity {
-    // @PrimaryGeneratedColumn('uuid')
-    // id: string;
-
-    // @Column({ type: 'boolean', default: true })
-    // isActive: boolean;
-
-    // @Column({ type: 'boolean', default: false })
-    // isArchived: boolean;
-
-    // @CreateDateColumn({ type: 'timestamptz', default: () => 'CURRENT_TIMESTAMP' })
-    // createDateTime: Date;
-
-    // @Column({ type: 'varchar', length: 300 })
-    // createdBy: string;
-
-    // @UpdateDateColumn({ type: 'timestamptz', default: () => 'CURRENT_TIMESTAMP' })
-    // lastChangedDateTime: Date;
-
-    // @Column({ type: 'varchar', length: 300 })
-    // lastChangedBy: string;
-
-    // @Column({ type: 'varchar', length: 300, nullable: true })
-    // internalComment: string | null;
 	@PrimaryGeneratedColumn()
 	id: number;
 

conf/init.sql

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

database/init.sh

@@ -1,9 +0,0 @@
-#!/bin/bash
-# ALTER USER kinou WITH PASSWORD 'pass';
-set -e
-
-psql -v ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" --password ""$POSTGRES_PASSWORD"" <<-EOSQL
-	CREATE USER kinou WITH PASSWORD 'pass';
-	CREATE DATABASE postgreDB;
-	GRANT ALL PRIVILEGES ON DATABASE postgreDB TO kinou;
-EOSQL

database/init.sql

@@ -1,24 +0,0 @@
-
-ALTER USER postgres WITH PASSWORD 'pass';
--- DROP DATABASE IF EXISTS test;
--- CREATE DATABASE postgreDB;
--- -- CREATE USER IF NOT EXISTS '$POSTGRES_USER'@'%' IDENTIFIED BY 'POSTGRES_PASSWORD';
--- CREATE USER "$POSTGRES_USER" WITH PASSWORD '$POSTGRES_PASSWORD';
--- CREATE USER root WITH PASSWORD '$POSTGRES_ROOT_PASSWORD';
-
--- -- GRANT ALL PRIVILEGES ON *.* TO '$POSTGRES_USER'@'%';
--- GRANT ALL PRIVILEGES ON DATABASE postgreDB TO "$POSTGRES_USER";
--- -- SET PASSWORD FOR 'root'@'$POSTGRES_HOST' = PASSWORD('$POSTGRES_ROOT_PASSWORD');
--- -- ALTER USER root WITH PASSWORD '$POSTGRES_ROOT_PASSWORD';
-
--- -- FLUSH PRIVILEGES;
--- CREATE TABLE users (
---     nickname        varchar(20),
---     user_password   varchar(20),
---     user_login      varchar(20)
--- );
-
--- CREATE TABLE score (
---     win     int,
---     loose   int
--- );

docker-compose.yml

@@ -12,32 +12,24 @@ services:
       - backend
     ports:
       - 80:80
-      # - 443:443
     volumes:
       - ./frontend:/var/www/html
-    # restart: unless-stopped
     networks:
       - pongNetwork
 
   react_app:
-    build:
-      context : ./
-      dockerfile: ./dockerfiles/Dockerfile.react
-    # image: node:latest
+    image: node:latest
     container_name: react_app
-    # env_file: .env
-    depends_on:
-      - nginx
+    working_dir: /app
+    # depends_on:
+    #   - nginx
     ports:
       - 8080:8080
-      # - 443:443
     volumes:
-      - ./frontend:/var/www/html
-      # - ./frontend/pong/my-app:/app
-    # restart: unless-stopped
+      - ./frontend/pong/my-app:/app
     networks:
       - pongNetwork
-    # entrypoint: ["sh", "-c" , "npm install && npm run start"]
+    entrypoint: ["sh", "-c" , "npm install && npm run start"]
 
   backend:
     image: node:latest
@@ -48,12 +40,8 @@ services:
     ports:
       - 3000:3000
     env_file: .env
-    # volumes:
-      # - ./backend:/usr/src/app/
     depends_on:
       - postgresql
-    # entrypoint: ["/bin/sh", "-c" , "npm install && npm run start:dev"]
-    # restart: unless-stopped
     networks:
       - pongNetwork
 
@@ -72,28 +60,18 @@ services:
     networks:
       - pongNetwork
 
-  # postgresql:
-  #   build: #./dockerfiles/Dockerfile.PostgreSQL
-  #     context : ./
-  #     dockerfile: ./dockerfiles/Dockerfile.PostgreSQL
-  #   container_name: postgreDB
-  #   #image: mariadb:homemade
-  #   ports:
-  #     - 5432:5432
-  #     # - ${POSTGRES_PORT}:${POSTGRES_PORT}
-  #   env_file: .env  
-  #   # environment:
-  #   #   - POSTGRES_USER:kinou
-  #   #   - POSTGRES_PASSWORD:pass
-  #   #   - POSTGRES_DB:postgreDB
-  #   #   - POSTGRES_ROOT_PASSWORD:pass
-  #   #   - POSTGRES_HOST:localhost
-  #     # - name:value
-  #   #volumes:
-  #   #  - dbdata:/var/lib/mysql
-  #   # networks:
-  #     # - pongNetwork
-  #   restart: unless-stopped
+  pong:
+    image: node:latest
+    container_name: pong
+    working_dir: /app
+    ports:
+      - 4000:4000
+    env_file: .env
+    networks:
+      - pongNetwork
+    volumes:
+      - ./pong:/app
+    entrypoint: ["sh", "-c" , "npm install && npm run start:dev"]
 
 networks:
   pongNetwork:
@@ -120,19 +98,3 @@ volumes:
         device: '/backend'
     db:
       driver: local
-
-# version: "3.3"
-# services:
-#     backend:
-#         build:
-#             context: ./dockerfiles
-#             dockerfile: Dockerfile.backEnd
-#         ports:
-#             - "3000:3000"
-#     nginx:
-#         restart: always
-#         build:
-#             context: ./dockerfiles
-#             dockerfile: Dockerfile.nginx
-#         ports:
-#             - "80:80"

dockerfiles/.dockerignore

@@ -1 +1,2 @@
 node_modules
+dist

dockerfiles/Dockerfile.PostgreSQL

@@ -6,12 +6,12 @@
 #    By: apommier <apommier@student.42.fr>          +#+  +:+       +#+         #
 #                                                 +#+#+#+#+#+   +#+            #
 #    Created: 2023/03/19 09:28:30 by apommier          #+#    #+#              #
-#    Updated: 2023/04/07 07:11:27 by apommier         ###   ########.fr        #
+#    Updated: 2023/04/12 23:40:10 by apommier         ###   ########.fr        #
 #                                                                              #
 # **************************************************************************** #
 
 FROM postgres:alpine
-COPY database/init.sql /docker-entrypoint-initdb.d/
+COPY conf/init.sql /docker-entrypoint-initdb.d/
 # COPY database/init.sh /docker-entrypoint-initdb.d//init-user-db.sh
 
 # RUN sed -i 's/bind-address/bind-address = 0.0.0.0 #/i' /etc/mysql/mariadb.conf.d/50-server.cnf

frontend/pong/my-app/package-lock.json

@@ -14,6 +14,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "socket.io-client": "^4.6.1",
         "web-vitals": "^2.1.4"
       }
     },
@@ -3195,6 +3196,11 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -6806,6 +6812,46 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.4.0.tgz",
+      "integrity": "sha512-GyKPDyoEha+XZ7iEqam49vz6auPnNJ9ZBfy89f+rMMas8AuiMWOZ9PVzu8xb9ZC6rafUqiGHSCfu22ih66E+1g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.11.0",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.6.tgz",
+      "integrity": "sha512-tjuoZDMAdEhVnSFleYPCtdL2GXwVTGtNjoeJd9IhIG3C1xs9uwxqRNEu5WpnDZCaozwVlK/nuQhpodhXSIMaxw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.12.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
@@ -15159,6 +15205,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.6.1.tgz",
+      "integrity": "sha512-5UswCV6hpaRsNg5kkEHVcbBIXEYoVbMQaHJBXJCyEQ+CiFPV1NIOY0XOFWG4XR4GZcB8Kn6AsRs/9cy9TbqVMQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.4.0",
+        "socket.io-parser": "~4.2.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.2.tgz",
+      "integrity": "sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -17207,6 +17279,14 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

frontend/pong/my-app/package.json

@@ -9,10 +9,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "socket.io-client": "^4.6.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "PORT=8080 react-scripts start",
+    "start": "HOST=0.0.0.0 PORT=8080 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

frontend/pong/my-app/src/components/Field.js

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { drawCanvas } from './canvas.js';
+import '../styles/field.css';
+
+function Field()
+{
+	useEffect(() => {
+		drawCanvas();
+	}, []);
+
+	return (
+		<div class="field" id="canvas_container">
+			<canvas id="myCanvas"></canvas>
+		</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);

frontend/pong/my-app/src/components/Header.js

@@ -0,0 +1,22 @@
+import '../styles/App.css';
+import '../styles/old.css';
+import logo from '../logo.svg';
+
+function Header()
+{
+	return (
+		<div class="header">
+        	<div class="box menu"> <p class="userTxt">Menu</p> </div>
+        	<div class="box headerName">
+        	    <p class="center pong">PONG</p>
+        	</div>
+        	<div class="box username"> 
+        	    <p class="userTxt">UserName</p> 
+        	    {/* <img class="pp center" src="../../public/logo192.png" alt="profile picture"> */}
+				<img src={logo} className="pp center" alt="logo" />
+        	</div>
+    	</div>
+	);
+}
+
+export default Header;

frontend/pong/my-app/src/components/canvas.js

@@ -0,0 +1,391 @@
+// import io from 'socket.io-client';
+
+import { useEffect } from 'react';
+import io from 'socket.io-client';
+const socket = io('http://localhost:4000');
+// const socket = io('http://192.168.1.14:4000');
+// const socket = io('http://86.209.110.20:4000');
+// const socket = io('http://172.29.113.91:4000');
+
+export function drawCanvas() {
+	const canvas = document.getElementById('myCanvas');
+	const ctx = canvas.getContext('2d');
+	
+//========================================================================================================
+//========================================================================================================
+//                                              Var Declaration			                                  
+//========================================================================================================
+//========================================================================================================
+
+	//socket
+	let myId = 0;
+
+	//general canvas
+	const scale = window.devicePixelRatio; 
+	canvas.width = canvas.offsetWidth;
+	canvas.height = canvas.offsetHeight;
+	
+	//paddle var
+	const paddleWidth = canvas.width * 0.01;
+	let paddleHeight = canvas.height * 0.25;
+	let paddleY = canvas.height / 2 - (paddleHeight / 2);
+	let paddleX = canvas.width / 40;
+	let paddleSpeed = canvas.height / 40;
+
+	//opponent var
+	let oPaddleY = paddleY;
+
+	//mouse and touch
+	let lastMouseY = 0;
+	let lastTouchY = 0;
+
+	//ball var
+	let ballX = canvas.width / 2;
+	let ballY = canvas.height / 2;
+
+	//ball display
+	let ballRadius = canvas.width * 0.01;
+	let circleRadius = ballRadius * 3;
+	ctx.lineWidth = (canvas.width / 300);
+
+	//ball vector
+	let vX = 0;
+	let vY = 0;
+
+	//score
+	let myScore = 0;
+	let hisScore = 0;
+	
+	let lastUpdateTime = performance.now();
+
+	let maxAngle = 50;
+	let maxBounceAngle = (maxAngle * Math.PI) / 180;
+
+//========================================================================================================
+//========================================================================================================
+//                                              Socket handler			                                  
+//========================================================================================================
+//========================================================================================================
+
+	socket.on('connect', () => {
+		console.log('Connected to NestJS server');
+	});
+
+	socket.on('pong:clientId', (data) => {
+		myId = data;
+	});
+
+	socket.on('pong:info', (data) => {
+		oPaddleY = (data.paddleY / data.height) * canvas.height//canvas.height - data.ballY;
+		ballX = canvas.width - (data.ballX * (canvas.width / data.width));//- data.ballX;
+		ballY = ((data.ballY / data.height) * canvas.height)//canvas.height - data.ballY;
+
+		vX = -data.vX;
+		vY = data.vY;
+	});
+
+	function send_info()
+	{
+		const info = {
+			id: myId,
+			width: canvas.width,
+			height: canvas.height,
+			paddleY: paddleY,
+			vX: vX,
+			vY: vY,
+			ballX: ballX,
+			ballY: ballY,
+		};
+		socket.emit('pong:message', info);
+	}
+
+	socket.on('pong:paddle', (data) => {
+		oPaddleY = (data.paddleY / data.height) * canvas.height
+	});
+
+	function send_point()
+	{
+		console.log("send point");
+		const info = {
+			id: myId,
+			point: hisScore,
+		}
+		socket.emit('pong:point', info);
+	}
+
+	socket.on('pong:point', (data) => {
+		// hisScore += 1;
+		console.log("gain point");
+		// if (vX != 0)
+		// {
+			// console.log("up point");
+		myScore = data.point;
+		// }
+		vX = 0;
+		vY = 0;
+		ballX = canvas.width / 2;
+		ballY = canvas.height / 2;
+	});
+
+	function send_paddle_info()
+	{
+		const info = {
+			id: myId,
+			paddleY: paddleY,
+			// width: canvas.width,
+			height: canvas.height,
+		};
+		socket.emit('pong:paddle', info);
+	}
+
+	function send_forced_info()
+	{
+		const info = {
+			width: canvas.width,
+			height: canvas.height,
+			id: myId,
+			paddleY: paddleY,
+			vX: vX,
+			vY: vY,
+			ballX: ballX,
+			ballY: ballY,
+		};
+		socket.emit('pong:forced', info);
+	}
+
+//========================================================================================================
+//========================================================================================================
+//                                                  Drawer
+//========================================================================================================
+//========================================================================================================
+
+	function drawcenter()
+	{
+		// ctx.restore();
+		ctx.fillStyle = 'white';
+		ctx.fillRect(canvas.width / 2 - ctx.lineWidth / 2, 0, canvas.width / 300, canvas.height);
+		
+		ctx.beginPath();
+		// ctx.lineWidth = 5;
+		ctx.arc(canvas.width / 2, canvas.height / 2, circleRadius, 0, 2 * Math.PI);
+		ctx.strokeStyle = 'white'; // couleur de dessin
+		ctx.stroke(); // dessin du contour
+
+		ctx.font = canvas.width * 0.1 + "px Arial";
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		ctx.fillText(myScore, canvas.width/4, canvas.height/8);
+		ctx.fillText(hisScore, canvas.width/1.25, canvas.height/8);
+	}
+
+	function drawPaddle() {
+		ctx.fillStyle = 'white';
+		ctx.fillRect(paddleX, paddleY, paddleWidth, paddleHeight);
+		ctx.fillRect(canvas.width - paddleX - paddleWidth, oPaddleY, paddleWidth, paddleHeight);
+	}
+
+	function drawball()
+	{
+		ctx.beginPath();
+		ctx.arc(ballX, ballY, ballRadius, 0, 2 * Math.PI);
+		// ctx.lineWidth = 2;
+		ctx.fillStyle = 'red ';
+		ctx.fill();
+	}
+
+
+//========================================================================================================
+//========================================================================================================
+//                                                  Loop
+//========================================================================================================
+//========================================================================================================
+
+function draw(timestamp)
+{
+		const deltaTime = timestamp - lastUpdateTime;
+		lastUpdateTime = timestamp;
+
+		ballX += vX * deltaTime * canvas.width;
+		ballY += vY * deltaTime * canvas.width;
+
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		drawPaddle();
+		drawcenter();
+		drawball();
+		is_collision();
+		is_out();
+		requestAnimationFrame(draw);
+}
+requestAnimationFrame(draw);
+
+//========================================================================================================
+//========================================================================================================
+//                                             Logical Part
+//========================================================================================================
+//========================================================================================================
+
+	function updateVector()
+	{
+		const relativeBallY = ballY - (paddleY + paddleHeight / 2);
+		const normalizedRelativeBallY = relativeBallY / (paddleHeight / 2);
+		const bounceAngle = normalizedRelativeBallY * maxBounceAngle;
+
+		vY = vX * Math.sin(-bounceAngle);
+		if (vX < 0)
+			vX = -vX; 
+	}
+
+
+	function updatePaddlePosition(newY)
+	{
+		if (newY >= 0 && newY <= canvas.height - paddleHeight)
+			paddleY = newY;
+	}
+
+	function is_collision()
+	{
+		if (ballX <= paddleX + paddleWidth + ballRadius)
+		{
+			if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius)//touch paddle
+			{
+				if (ballX +  ballRadius > paddleX && ballX - ballRadius < paddleX + paddleWidth)
+				{
+					console.log("hehe here")
+					ballX = paddleX + paddleWidth + ballRadius;
+				}
+				updateVector();
+			}
+			send_info();
+			return ;
+		}
+		if (ballY - ballRadius - 2 <= 0 || ballY + ballRadius + 2 >= canvas.height) //touch up or down wall
+		{
+			vY = -vY;
+			// send_info();
+		}
+		else if (ballX + ballRadius + 2 >= canvas.width) //touch right wall
+		{
+			vX = -vX;
+			// send_info();
+		}
+	}
+
+	function is_out()
+	{
+		if (ballX < 0)
+		{
+			if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius)
+			{
+				console.log('true hehe');
+				ballX = paddleX + paddleWidth + ballRadius;
+				updateVector();
+				return ;
+			}
+			ballX = canvas.width / 2;
+			ballY = canvas.height / 2;
+			vX = 0;
+			vY = 0;
+			hisScore += 1;
+			send_point();
+			// send_forced_info();
+		}
+
+	}
+
+
+
+//========================================================================================================
+//========================================================================================================
+//                                                  Listener
+//========================================================================================================
+//========================================================================================================
+
+
+    document.addEventListener('mousemove', event => {
+        const mouseY = event.clientY;
+
+        if (!lastMouseY)
+		{
+            lastMouseY = mouseY;
+            return;
+        }
+        const newY = mouseY > lastMouseY ? paddleY - (lastMouseY - mouseY) : paddleY + (mouseY - lastMouseY);
+        updatePaddlePosition(newY);
+        lastMouseY = mouseY;
+		send_paddle_info();
+    });
+
+    document.addEventListener("touchmove", event => {
+        const touchY = event.touches[0].pageY;
+
+        // if (!lastTouchY)
+		// {
+		// 	vX = -0.01;
+        //     lastTouchY = touchY;
+        //     return;
+        // }
+        const newY = touchY > lastTouchY ? paddleY - (lastTouchY - touchY) : paddleY + (touchY - lastTouchY);
+        updatePaddlePosition(newY);
+        lastTouchY = touchY;
+		send_paddle_info();
+    });
+
+	document.addEventListener("keydown", event => {
+		// console.log(event.code);
+		if (event.code === "ArrowUp")
+		{
+			if ((paddleY - paddleSpeed) > 0)
+		  		paddleY -= paddleSpeed; // déplacer la raquette vers le haut
+			send_paddle_info();
+		}
+		else if (event.code === "ArrowDown")
+		{
+			if (paddleY + paddleSpeed < canvas.height - paddleHeight)
+				paddleY += paddleSpeed; // déplacer la raquette vers le bas
+			send_paddle_info();
+		}
+		else if (event.code === "Space")//space
+		{
+			console.log('vx change to -1');
+			vX = -0.0001;
+
+			// ballSpeed = 0.0001;
+			vY = 0;
+			send_forced_info();
+			// vX = 0.0001;
+		}
+		else if (event.code === "KeyE")
+		{
+			// console.log('vx change to -1');
+			vX = 0;
+			vY = 0;
+			ballX = canvas.width / 2;
+			ballY = canvas.height / 2;
+			send_forced_info();
+		}
+		else if (event.code === "KeyQ" )
+		{
+			if (vX < 0.003 * canvas.width && vX > -0.003 * canvas.width)
+			{
+				if (vX > 0)
+					vX += 0.0001;
+				else
+					vX -= 0.0001;
+			}
+			send_forced_info();
+			// console.log(`vx = ${vX}`);
+		}
+		else if (event.code === "KeyR")
+		{
+			paddleY = 0;
+			paddleHeight = canvas.height;
+			setTimeout(() => {
+				// code à exécuter après 5 secondes
+				paddleHeight = canvas.height * 0.25;
+				paddleY = canvas.height / 2 - paddleHeight / 2;
+				console.log('Cinq secondes se sont écoulées.');
+			  }, 5000);
+		}
+	});
+
+}

frontend/pong/my-app/src/components/pong_files/listener.js

@@ -0,0 +1,72 @@
+export function initializeListeners({canvas, paddleY, paddleHeight, paddleSpeed, lastMouseY, lastTouchY, vX, vY, ballX, ballY}) {
+
+function updatePaddlePosition(newY) {
+    if (newY >= 0 && newY <= canvas.height - paddleHeight) {
+        paddleY = newY;
+    }
+}
+
+document.addEventListener('mousemove', event => {
+	const mouseY = event.clientY;
+
+	if (!lastMouseY)
+	{
+		lastMouseY = mouseY;
+		return;
+	}
+	const newY = mouseY > lastMouseY ? paddleY - (lastMouseY - mouseY) : paddleY + (mouseY - lastMouseY);
+	updatePaddlePosition(newY);
+	lastMouseY = mouseY;
+});
+
+document.addEventListener("touchmove", event => {
+	const touchY = event.touches[0].pageY;
+
+	if (!lastTouchY)
+	{
+		lastTouchY = touchY;
+		return;
+	}
+	const newY = touchY > lastTouchY ? paddleY - (lastTouchY - touchY) : paddleY + (touchY - lastTouchY);
+	updatePaddlePosition(newY);
+	lastTouchY = touchY;
+});
+
+document.addEventListener("keydown", event => {
+	console.log(event.code);
+	if (event.code === "ArrowUp")
+	{
+		if ((paddleY - paddleSpeed) > 0)
+			  paddleY -= paddleSpeed; // déplacer la raquette vers le haut
+	}
+	else if (event.code === "ArrowDown")
+	{
+		if (paddleY + paddleSpeed < canvas.height - paddleHeight)
+			paddleY += paddleSpeed; // déplacer la raquette vers le bas
+	}
+	else if (event.code === "Space")//space
+	{
+		console.log('vx change to -1');
+		vX = -0.2;
+		vY = 0; 
+	}
+	else if (event.code === "KeyE")
+	{
+		// console.log('vx change to -1');
+		vX = 0;
+		vY = 0;
+		ballX = canvas.width / 2;
+		ballY = canvas.height / 2;
+	}
+	else if (event.code === "KeyQ")
+	{
+		if (vX > 0)
+			// vX += 0.01;
+			vX += 0.01;
+		else
+			// vX -= 0.01;
+			vX -= 0.01;
+	}
+});
+
+}//end of initializeListeners

frontend/pong/my-app/src/index.js

@@ -2,12 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './styles/index.css';
 import App from './components/App';
+import Header from './components/Header';
+import Field from './components/Field';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <Header />
+	<Field />
+	{/* <App /> */}
   </React.StrictMode>
 );
 

frontend/pong/my-app/src/styles/App.css

@@ -14,7 +14,7 @@
 }
 
 .App-header {
-  background-color: #000000;
+  background-color: #1f1919;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

frontend/pong/my-app/src/styles/field.css

@@ -0,0 +1,41 @@
+.field{
+	/* 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% */
+}
+
+#myCanvas {
+	background-color: rgb(75, 33, 33);
+	position: absolute;
+	top: 0;
+	left: 0;
+	cursor: none;
+	width: 100%;
+	height: 100%;
+}
+
+@media screen and (max-width: 768px) {
+	#canvas_container {
+	  transform: rotate(90deg);
+	  transform-origin: top right;
+	  position: relative;
+	  /* margin-right: 100vw; */
+	  /* height: 100vw; */
+	  width: 100vh;
+	}
+	/* #myCanvas {
+	  height: 100%;
+	  width: 100%;
+	} */
+  }

frontend/pong/my-app/src/styles/old.css

@@ -0,0 +1,135 @@
+body {
+	/* display: flex; */
+	margin: 0%;
+	width: 100vw;
+	height: 100vh;
+	background-color: rgb(71, 71, 71);
+	color: white;	
+}
+
+footer {
+	text-align: center;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	background-color: rgb(0, 0, 0);
+}
+
+.pp {
+	height: 7vw;
+	width: 7vw;
+	max-height: 7vh;
+	max-width: 7vh;
+	/* max-width: ; */
+	border-radius: 50%;
+	border: 5px solid rgb(255, 255, 255);
+}
+
+.loginHere{
+	font-size: 5vh;
+	font-family: 'Rubik Iso';
+	text-align: center;
+	margin-top: 10vh;
+}
+
+::placeholder {
+	font-size: 3vh;
+	text-align: center;
+	align-items: center;
+	margin:auto;
+}
+
+.submit{
+	height: 5vh;
+	border-radius: 100vh;
+}
+
+.submit:hover {
+	background-color: blueviolet;
+}
+
+input{
+	height: 5vh;
+	border-radius: 100vh;
+}
+
+.pp:hover {
+	border: 5px solid rgb(100, 0, 0);
+}
+
+.userTxt:hover {
+	color:blueviolet;;
+}
+
+.userTxt {
+	margin-right: 5%;
+}
+
+.username {
+	/* justify-content: center; */
+	margin-right: 1vw;
+	display: flex;
+	align-items: center;
+	font-size: 2vw;
+	max-width: 33%;
+	color: aqua;
+	justify-content: right;
+}
+
+label{
+}
+
+.login {
+}
+
+.loginForm {
+	align-items: center;
+	height: 50vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+}
+
+
+.menu {
+	margin-left: 2vw;
+	color: aqua;
+	/* font-size: 4vh; */
+	font-size: 2vw;
+}
+
+.pong{
+	font-family:'Rubik Iso';
+}
+
+.box {
+	width: 33%;
+}
+
+.center {
+	align-self: center;
+}
+
+.headerName {
+	display:flex;
+	max-width: 33%;
+	height: 100%;
+	/* font-size: 50px; */
+	color:blueviolet;
+	/* font-size: 10vw; */
+	font-size: min(10vw, 10vh);
+	justify-content: center;
+}
+
+.header {
+	display: flex;
+	margin: 0;
+	height: 10vw;
+	max-height: 10vh;
+	align-items: center;
+	background-color: rgb(0, 0, 0);
+}
+
+h1 {
+	color:blueviolet
+}