error git pong folder, mutiplayer pong work when two client are connected
This commit is contained in:
parent
ae5acb287b
commit
c1b5b90d7f
@ -34,29 +34,6 @@
|
|||||||
import { PrimaryGeneratedColumn, Column, UpdateDateColumn, CreateDateColumn } from 'typeorm';
|
import { PrimaryGeneratedColumn, Column, UpdateDateColumn, CreateDateColumn } from 'typeorm';
|
||||||
|
|
||||||
export abstract class BaseEntity {
|
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()
|
@PrimaryGeneratedColumn()
|
||||||
id: number;
|
id: number;
|
||||||
|
|
||||||
|
|||||||
1
conf/init.sql
Normal file
1
conf/init.sql
Normal file
@ -0,0 +1 @@
|
|||||||
|
ALTER USER postgres WITH PASSWORD 'pass';
|
||||||
@ -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
|
|
||||||
@ -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
|
|
||||||
-- );
|
|
||||||
@ -12,32 +12,24 @@ services:
|
|||||||
- backend
|
- backend
|
||||||
ports:
|
ports:
|
||||||
- 80:80
|
- 80:80
|
||||||
# - 443:443
|
|
||||||
volumes:
|
volumes:
|
||||||
- ./frontend:/var/www/html
|
- ./frontend:/var/www/html
|
||||||
# restart: unless-stopped
|
|
||||||
networks:
|
networks:
|
||||||
- pongNetwork
|
- pongNetwork
|
||||||
|
|
||||||
react_app:
|
react_app:
|
||||||
build:
|
image: node:latest
|
||||||
context : ./
|
|
||||||
dockerfile: ./dockerfiles/Dockerfile.react
|
|
||||||
# image: node:latest
|
|
||||||
container_name: react_app
|
container_name: react_app
|
||||||
# env_file: .env
|
working_dir: /app
|
||||||
depends_on:
|
# depends_on:
|
||||||
- nginx
|
# - nginx
|
||||||
ports:
|
ports:
|
||||||
- 8080:8080
|
- 8080:8080
|
||||||
# - 443:443
|
|
||||||
volumes:
|
volumes:
|
||||||
- ./frontend:/var/www/html
|
- ./frontend/pong/my-app:/app
|
||||||
# - ./frontend/pong/my-app:/app
|
|
||||||
# restart: unless-stopped
|
|
||||||
networks:
|
networks:
|
||||||
- pongNetwork
|
- pongNetwork
|
||||||
# entrypoint: ["sh", "-c" , "npm install && npm run start"]
|
entrypoint: ["sh", "-c" , "npm install && npm run start"]
|
||||||
|
|
||||||
backend:
|
backend:
|
||||||
image: node:latest
|
image: node:latest
|
||||||
@ -48,12 +40,8 @@ services:
|
|||||||
ports:
|
ports:
|
||||||
- 3000:3000
|
- 3000:3000
|
||||||
env_file: .env
|
env_file: .env
|
||||||
# volumes:
|
|
||||||
# - ./backend:/usr/src/app/
|
|
||||||
depends_on:
|
depends_on:
|
||||||
- postgresql
|
- postgresql
|
||||||
# entrypoint: ["/bin/sh", "-c" , "npm install && npm run start:dev"]
|
|
||||||
# restart: unless-stopped
|
|
||||||
networks:
|
networks:
|
||||||
- pongNetwork
|
- pongNetwork
|
||||||
|
|
||||||
@ -72,28 +60,18 @@ services:
|
|||||||
networks:
|
networks:
|
||||||
- pongNetwork
|
- pongNetwork
|
||||||
|
|
||||||
# postgresql:
|
pong:
|
||||||
# build: #./dockerfiles/Dockerfile.PostgreSQL
|
image: node:latest
|
||||||
# context : ./
|
container_name: pong
|
||||||
# dockerfile: ./dockerfiles/Dockerfile.PostgreSQL
|
working_dir: /app
|
||||||
# container_name: postgreDB
|
ports:
|
||||||
# #image: mariadb:homemade
|
- 4000:4000
|
||||||
# ports:
|
env_file: .env
|
||||||
# - 5432:5432
|
networks:
|
||||||
# # - ${POSTGRES_PORT}:${POSTGRES_PORT}
|
- pongNetwork
|
||||||
# env_file: .env
|
volumes:
|
||||||
# # environment:
|
- ./pong:/app
|
||||||
# # - POSTGRES_USER:kinou
|
entrypoint: ["sh", "-c" , "npm install && npm run start:dev"]
|
||||||
# # - 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
|
|
||||||
|
|
||||||
networks:
|
networks:
|
||||||
pongNetwork:
|
pongNetwork:
|
||||||
@ -120,19 +98,3 @@ volumes:
|
|||||||
device: '/backend'
|
device: '/backend'
|
||||||
db:
|
db:
|
||||||
driver: local
|
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"
|
|
||||||
@ -1 +1,2 @@
|
|||||||
node_modules
|
node_modules
|
||||||
|
dist
|
||||||
|
|||||||
@ -6,12 +6,12 @@
|
|||||||
# By: apommier <apommier@student.42.fr> +#+ +:+ +#+ #
|
# By: apommier <apommier@student.42.fr> +#+ +:+ +#+ #
|
||||||
# +#+#+#+#+#+ +#+ #
|
# +#+#+#+#+#+ +#+ #
|
||||||
# Created: 2023/03/19 09:28:30 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
|
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
|
# 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
|
# RUN sed -i 's/bind-address/bind-address = 0.0.0.0 #/i' /etc/mysql/mariadb.conf.d/50-server.cnf
|
||||||
|
|||||||
80
frontend/pong/my-app/package-lock.json
generated
80
frontend/pong/my-app/package-lock.json
generated
@ -14,6 +14,7 @@
|
|||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
"socket.io-client": "^4.6.1",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -3195,6 +3196,11 @@
|
|||||||
"@sinonjs/commons": "^1.7.0"
|
"@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": {
|
"node_modules/@surma/rollup-plugin-off-main-thread": {
|
||||||
"version": "2.2.3",
|
"version": "2.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
|
"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": ">= 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": {
|
"node_modules/enhanced-resolve": {
|
||||||
"version": "5.12.0",
|
"version": "5.12.0",
|
||||||
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
|
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
|
||||||
@ -15159,6 +15205,32 @@
|
|||||||
"node": ">=8"
|
"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": {
|
"node_modules/sockjs": {
|
||||||
"version": "0.3.24",
|
"version": "0.3.24",
|
||||||
"resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
|
||||||
"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
|
"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": {
|
"node_modules/y18n": {
|
||||||
"version": "5.0.8",
|
"version": "5.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
|
||||||
|
|||||||
@ -9,10 +9,11 @@
|
|||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
"socket.io-client": "^4.6.1",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "PORT=8080 react-scripts start",
|
"start": "HOST=0.0.0.0 PORT=8080 react-scripts start",
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
"test": "react-scripts test",
|
"test": "react-scripts test",
|
||||||
"eject": "react-scripts eject"
|
"eject": "react-scripts eject"
|
||||||
|
|||||||
38
frontend/pong/my-app/src/components/Field.js
Normal file
38
frontend/pong/my-app/src/components/Field.js
Normal file
@ -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);
|
||||||
22
frontend/pong/my-app/src/components/Header.js
Normal file
22
frontend/pong/my-app/src/components/Header.js
Normal file
@ -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;
|
||||||
391
frontend/pong/my-app/src/components/canvas.js
Normal file
391
frontend/pong/my-app/src/components/canvas.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
72
frontend/pong/my-app/src/components/pong_files/listener.js
Normal file
72
frontend/pong/my-app/src/components/pong_files/listener.js
Normal file
@ -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
|
||||||
@ -2,12 +2,16 @@ import React from 'react';
|
|||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
import './styles/index.css';
|
import './styles/index.css';
|
||||||
import App from './components/App';
|
import App from './components/App';
|
||||||
|
import Header from './components/Header';
|
||||||
|
import Field from './components/Field';
|
||||||
import reportWebVitals from './reportWebVitals';
|
import reportWebVitals from './reportWebVitals';
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
root.render(
|
root.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<Header />
|
||||||
|
<Field />
|
||||||
|
{/* <App /> */}
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -14,7 +14,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.App-header {
|
.App-header {
|
||||||
background-color: #000000;
|
background-color: #1f1919;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
41
frontend/pong/my-app/src/styles/field.css
Normal file
41
frontend/pong/my-app/src/styles/field.css
Normal file
@ -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%;
|
||||||
|
} */
|
||||||
|
}
|
||||||
135
frontend/pong/my-app/src/styles/old.css
Normal file
135
frontend/pong/my-app/src/styles/old.css
Normal file
@ -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
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user