From c1b5b90d7f8984845566c6dd2aa45b5f0ce12e77 Mon Sep 17 00:00:00 2001 From: kinou-p Date: Sun, 16 Apr 2023 16:50:09 +0200 Subject: [PATCH] error git pong folder, mutiplayer pong work when two client are connected --- backend/src/model/base.entity.ts | 23 -- conf/init.sql | 1 + database/init.sh | 9 - database/init.sql | 24 -- docker-compose.yml | 76 +--- dockerfiles/.dockerignore | 1 + dockerfiles/Dockerfile.PostgreSQL | 4 +- frontend/pong/my-app/package-lock.json | 80 ++++ frontend/pong/my-app/package.json | 3 +- frontend/pong/my-app/src/components/Field.js | 38 ++ frontend/pong/my-app/src/components/Header.js | 22 + frontend/pong/my-app/src/components/canvas.js | 391 ++++++++++++++++++ .../src/components/pong_files/drawer.js | 0 .../src/components/pong_files/listener.js | 72 ++++ frontend/pong/my-app/src/index.js | 6 +- frontend/pong/my-app/src/styles/App.css | 2 +- frontend/pong/my-app/src/styles/field.css | 41 ++ frontend/pong/my-app/src/styles/old.css | 135 ++++++ 18 files changed, 810 insertions(+), 118 deletions(-) create mode 100644 conf/init.sql delete mode 100644 database/init.sh delete mode 100644 database/init.sql create mode 100644 frontend/pong/my-app/src/components/Field.js create mode 100644 frontend/pong/my-app/src/components/Header.js create mode 100644 frontend/pong/my-app/src/components/canvas.js create mode 100644 frontend/pong/my-app/src/components/pong_files/drawer.js create mode 100644 frontend/pong/my-app/src/components/pong_files/listener.js create mode 100644 frontend/pong/my-app/src/styles/field.css create mode 100644 frontend/pong/my-app/src/styles/old.css diff --git a/backend/src/model/base.entity.ts b/backend/src/model/base.entity.ts index f37abc67..6922f56a 100644 --- a/backend/src/model/base.entity.ts +++ b/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; diff --git a/conf/init.sql b/conf/init.sql new file mode 100644 index 00000000..468babfc --- /dev/null +++ b/conf/init.sql @@ -0,0 +1 @@ +ALTER USER postgres WITH PASSWORD 'pass'; \ No newline at end of file diff --git a/database/init.sh b/database/init.sh deleted file mode 100644 index e0eb3263..00000000 --- a/database/init.sh +++ /dev/null @@ -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 \ No newline at end of file diff --git a/database/init.sql b/database/init.sql deleted file mode 100644 index eb26f230..00000000 --- a/database/init.sql +++ /dev/null @@ -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 --- ); \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 5e17de4d..a39ed5ee 100644 --- a/docker-compose.yml +++ b/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: @@ -119,20 +97,4 @@ volumes: o: 'bind' 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" \ No newline at end of file + driver: local \ No newline at end of file diff --git a/dockerfiles/.dockerignore b/dockerfiles/.dockerignore index 3c3629e6..f06235c4 100644 --- a/dockerfiles/.dockerignore +++ b/dockerfiles/.dockerignore @@ -1 +1,2 @@ node_modules +dist diff --git a/dockerfiles/Dockerfile.PostgreSQL b/dockerfiles/Dockerfile.PostgreSQL index f10cdfc4..c9b144d9 100644 --- a/dockerfiles/Dockerfile.PostgreSQL +++ b/dockerfiles/Dockerfile.PostgreSQL @@ -6,12 +6,12 @@ # By: apommier +#+ +:+ +#+ # # +#+#+#+#+#+ +#+ # # 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 diff --git a/frontend/pong/my-app/package-lock.json b/frontend/pong/my-app/package-lock.json index 462974cb..d645cb77 100644 --- a/frontend/pong/my-app/package-lock.json +++ b/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", diff --git a/frontend/pong/my-app/package.json b/frontend/pong/my-app/package.json index 0a1c9757..36457369 100644 --- a/frontend/pong/my-app/package.json +++ b/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" diff --git a/frontend/pong/my-app/src/components/Field.js b/frontend/pong/my-app/src/components/Field.js new file mode 100644 index 00000000..83fe7677 --- /dev/null +++ b/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 ( +
+ +
+ ); +} + +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); \ No newline at end of file diff --git a/frontend/pong/my-app/src/components/Header.js b/frontend/pong/my-app/src/components/Header.js new file mode 100644 index 00000000..c75f1b7f --- /dev/null +++ b/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 ( +
+

Menu

+
+

PONG

+
+
+

UserName

+ {/* profile picture */} + logo +
+
+ ); +} + +export default Header; \ No newline at end of file diff --git a/frontend/pong/my-app/src/components/canvas.js b/frontend/pong/my-app/src/components/canvas.js new file mode 100644 index 00000000..b8bfec0f --- /dev/null +++ b/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); + } + }); + +} \ No newline at end of file diff --git a/frontend/pong/my-app/src/components/pong_files/drawer.js b/frontend/pong/my-app/src/components/pong_files/drawer.js new file mode 100644 index 00000000..e69de29b diff --git a/frontend/pong/my-app/src/components/pong_files/listener.js b/frontend/pong/my-app/src/components/pong_files/listener.js new file mode 100644 index 00000000..f82066cc --- /dev/null +++ b/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 \ No newline at end of file diff --git a/frontend/pong/my-app/src/index.js b/frontend/pong/my-app/src/index.js index 55678e9a..95d3e748 100644 --- a/frontend/pong/my-app/src/index.js +++ b/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( - +
+ + {/* */} ); diff --git a/frontend/pong/my-app/src/styles/App.css b/frontend/pong/my-app/src/styles/App.css index 0f8b8ae8..9a21114e 100644 --- a/frontend/pong/my-app/src/styles/App.css +++ b/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; diff --git a/frontend/pong/my-app/src/styles/field.css b/frontend/pong/my-app/src/styles/field.css new file mode 100644 index 00000000..e7fe6001 --- /dev/null +++ b/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%; + } */ + } \ No newline at end of file diff --git a/frontend/pong/my-app/src/styles/old.css b/frontend/pong/my-app/src/styles/old.css new file mode 100644 index 00000000..23bdf73f --- /dev/null +++ b/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 +}