db can lauch alone, no need to aditional cmd before launching

.dockerignore

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

backend/package.json

@@ -1,19 +1,15 @@
 {
-  "name": "test_nest",
+	"name": "pong",
 	"version": "0.0.1",
 	"description": "",
-  "type": "module",
 	"author": "",
 	"private": true,
 	"license": "UNLICENSED",
 	"scripts": {
-    "build": "nest build",
+	  "build": "nest build --webpack",
 	  "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
 	  "start": "nest start",
 	  "start:dev": "nest start --watch",
-	
-	"start:build": "npm run build && npm run start:nodemon && rm -rf *.ts",
-	"start:nodemon": "nodemon --config nodemon.json",
 	  "start:debug": "nest start --debug --watch",
 	  "start:prod": "node dist/main",
 	  "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
@@ -32,7 +28,8 @@
     "pg": "^8.10.0",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.2.0",
-    "typeorm": "^0.3.13"
+    "typeorm": "^0.3.15",
+    "webpack": "^5.79.0"
   },
   "devDependencies": {
     "@nestjs/cli": "^9.0.0",

backend/src/app.controller.spec.ts

@@ -1,6 +1,6 @@
 import { Test, TestingModule } from '@nestjs/testing';
-import { AppController } from './app.controller.js';
-import { AppService } from './app.service.js';
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
 
 describe('AppController', () => {
   let appController: AppController;

backend/src/app.controller.ts

@@ -1,7 +1,7 @@
 import { Body, Controller, Get, Post } from '@nestjs/common';
 // import { AppService } from './app.service.js';
-import { UsersService } from './app.service.js';
-import { User } from './model/item.entity.js';
+import { UsersService } from './app.service';
+import { User } from './model/item.entity';
 
 
 @Controller()

backend/src/app.module.ts

@@ -12,11 +12,11 @@
 
 
 import { Module } from '@nestjs/common';
-import { AppController } from './app.controller.js';
-import { AppService, UsersService } from './app.service.js';
-import { User } from './model/item.entity.js';
+import { AppController } from './app.controller';
+import { AppService, UsersService } from './app.service';
+import { User } from './model/item.entity';
 import { TypeOrmModule } from '@nestjs/typeorm';
-import { getTypeOrmConfig } from './config/config.service.js';
+import { getTypeOrmConfig } from './config/config.service';
 
 @Module({
   imports: [

backend/src/app.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
-import { User } from './model/item.entity.js';
+import { User } from './model/item.entity';
 // import { User } from './entity/user.entity';
 
 

backend/src/main.ts

@@ -1,5 +1,5 @@
 import { NestFactory } from '@nestjs/core';
-import { AppModule } from './app.module.js';
+import { AppModule } from './app.module';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);

backend/src/model/base.entity.ts

@@ -34,6 +34,29 @@
 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;
 

backend/src/model/item.entity.ts

@@ -1,6 +1,6 @@
 // item.entity.ts
 import { Entity, Column } from 'typeorm';
-import { BaseEntity } from './base.entity.js';
+import { BaseEntity } from './base.entity';
 
 @Entity({ name: 'user' })
 export class User extends BaseEntity {

backend/tsconfig.json

@@ -1,8 +1,6 @@
 {
 	"compilerOptions": {
-    // "module": "commonjs",
-	"module": "esnext",
-	"moduleResolution": "node",
+	  "module": "commonjs",
 	  "declaration": true,
 	  "removeComments": true,
 	  "emitDecoratorMetadata": true,
@@ -19,9 +17,5 @@
 	  "strictBindCallApply": false,
 	  "forceConsistentCasingInFileNames": false,
 	  "noFallthroughCasesInSwitch": false
-  },
-  "exclude": [
-    "**/*",
-    "!/usr/src/app/dist/**/*"
-  ]
-}
+	}
+  }

conf/nginx.conf

@@ -30,13 +30,15 @@ server {
     #     index index.html;
     # }
 
-	# location /pong {
+	# location / {
     #     # root /var/www/html;
-    #     index pong/pong.html;
+	# 	index /var/www/html/index.html;
+    #     # index pong/pong.html;
 	# 	autoindex on;
 	# 	# try_files /pong/pong.html;
     # }
-    location / {
+    location /{
+		# index /
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

docker-compose.yml

@@ -14,9 +14,11 @@ services:
       - 80:80
     volumes:
       - ./frontend:/var/www/html
+      # - ./conf/nginx.conf /etc/nginx/conf.d/default.conf
     networks:
       - pongNetwork
 
+
   react_app:
     image: node:latest
     container_name: react_app
@@ -29,10 +31,11 @@ services:
       - ./frontend/pong/my-app:/app
     networks:
       - pongNetwork
-    entrypoint: ["sh", "-c" , "npm install && npm run start"]
+    entrypoint: ["sh", "-c" , "npm install && npm run start:dev"]
+
 
   backend:
-    image: node:latest
+    # image: node:latest
     build:
       context : ./
       dockerfile: ./dockerfiles/Dockerfile.backEnd
@@ -44,6 +47,12 @@ services:
       - postgresql
     networks:
       - pongNetwork
+    # working_dir: /app
+    # volumes:
+      # - ./backend:/app
+    # entrypoint: ["sh", "-c" , "npm install && ls && ls dist && npm run build && npm run start"]
+    # entrypoint: ["/bin/sh", "-c" , "npm install && npm run start:dev "]
+
 
   postgresql:
     image: postgres:14.1-alpine
@@ -56,7 +65,7 @@ services:
       - 5432:5432
     volumes:
       - db:/var/lib/postgresql/data
-      - ./database/init.sql:/docker-entrypoint-initdb.d/create_tables.sql
+      - ./conf/init.sql:/docker-entrypoint-initdb.d/create_tables.sql
     networks:
       - pongNetwork
 

dockerfiles/.dockerignore

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

dockerfiles/Dockerfile.backEnd

@@ -6,95 +6,23 @@
 #    By: apommier <apommier@student.42.fr>          +#+  +:+       +#+         #
 #                                                 +#+#+#+#+#+   +#+            #
 #    Created: 2023/03/19 09:28:33 by apommier          #+#    #+#              #
-#    Updated: 2023/04/12 14:56:14 by apommier         ###   ########.fr        #
+#    Updated: 2023/04/17 05:22:39 by apommier         ###   ########.fr        #
 #                                                                              #
 # **************************************************************************** #
 
-# FROM node:latest
-# # RUN npm install
-# # RUN apt install -y npm 
-# # RUN npm install express --save
-# EXPOSE 8080
-# WORKDIR /home/node/app
-# COPY /backend/package*.json ./
-# # RUN ls
-# RUN npm install
-# # RUN npm install express && npm install  
-# CMD [ "node", "server.js" ]
-
-# FROM node:latest
-# FROM node:alpine
-# WORKDIR /usr/src/app
-# # COPY /backend/* ./
-# RUN npm install
-# #npm install body-parser
-# COPY /backend/ .
-# COPY ./.env .
-# # RUN rm -rf node_modules
-# # EXPOSE 3000
-# # RUN curl -o /usr/wait-for-it.sh https://raw.githubusercontent.com/vishnubob/wait-for-it/master/wait-for-it.sh
-# # CMD ["/usr/wait-for-it.sh", "postgresql:5432", "--", "node", "server.js"]
-# CMD ["npm", "start"]
-# # CMD dockerize -wait tcp://postgresql:5432 -timeout 60s
-# # CMD ["node", "app.js"]
-
-# FROM node:alpine
-
 FROM node:latest
-RUN apt-get update -y
-RUN apt-get install -y postgresql-client
 
-WORKDIR /usr/src/app
+WORKDIR /app
 COPY /backend/package*.json ./
 RUN npm install
+
 COPY ./.env .
-#npm install body-parser
 COPY /backend/tsconfig*.json ./
+COPY /backend/src ./src
 
-
-# COPY /backend/src ./
-
-
-
-COPY /backend/dist /usr/src/app/dist  
 EXPOSE 3000
-# CMD ["npm", "start"]
-# CMD ["nest", "start", "--watch"]
-# CMD ["node", "server.js"]
 
-# RUN npm run build
+RUN npm run build
+RUN rm -rf ./src
 
-
-# WORKDIR /usr/src/app/dist
-# CMD ["tail", "-f", "/dev/null"]
-CMD ["npm", "run", "start:build"]
-# CMD ["npm", "run", "start"]
-
-
-
-# FROM node:latest
-
-# RUN apt-get update -y
-# RUN apt-get install -y postgresql-client
-
-# WORKDIR /usr/src/app
-
-# COPY /backend/package*.json ./
-# RUN npm install
-
-# COPY /backend .
-# RUN npm run build
-# # RUN rm -rf src
-
-# EXPOSE 3000
-
-# RUN	rm -rf src
-# COPY /backend/package*.json ./dist/
-# WORKDIR /usr/src/app/dist
-# # RUN ls
-# # CMD ["npm", "run", "start"]
-# # CMD ["nest", "start"]
-# # CMD ["npm", "run", "--prefix", "dist", "start:dev"]
-# # CMD ["npm", "run", "start", "&&", "rm", "-rf", "/usr/src/app/src"]
-# CMD ["tail", "-f", "/dev/null"]
-# # RUN rm -rf /usr/src/app/src
+CMD ["npm", "run", "start"]

frontend/index.html

@@ -25,6 +25,7 @@
             <input type="text" name="password" placeholder="password">
             <button class="submit" onclick="login()">LOGIN</button>
         </form>
+		<button></button>
     </div>
     <footer>
         <p>@apommier | apommier@student.42.fr</p>

frontend/pong/my-app/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
     "socket.io-client": "^4.6.1",
     "web-vitals": "^2.1.4"

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

@@ -0,0 +1,12 @@
+import '../styles/old.css';
+
+function Footer()
+{
+	return (
+		<footer>
+        	<p>@apommier | apommier@student.42.fr</p>
+    	</footer>
+	);
+}
+
+export default Footer;

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

@@ -0,0 +1,16 @@
+function Head()
+{
+	return (
+		<head>
+    		<meta charset="utf-8"></meta>
+    		<link href="./css/header.css" rel="stylesheet"></link>
+			<title>BEST PONG EVER</title>
+    		{/* <script src="./script/login.js"></script> */}
+			<link rel="preconnect" href="https://fonts.googleapis.com"></link>
+			<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin></link>
+			<link href="https://fonts.googleapis.com/css2?family=Rubik+Iso&display=swap" rel="stylesheet"></link>
+		</head>
+	);
+}
+
+export default Head;

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

@@ -6,15 +6,15 @@ function Header()
 {
 	return (
 		<div class="header">
-        	<div class="box menu"> <p class="userTxt">Menu</p> </div>
+        	<a href="http://localhost" class="box menu"> <p class="userTxt">Menu</p> </a>
         	<div class="box headerName">
         	    <p class="center pong">PONG</p>
         	</div>
-        	<div class="box username"> 
-        	    <p class="userTxt">UserName</p> 
+        	<a href="http://localhost/pong" class="box username"> 
+        	    <p class="userTxt">Play</p> 
         	    {/* <img class="pp center" src="../../public/logo192.png" alt="profile picture"> */}
 				<img src={logo} className="pp center" alt="logo" />
-        	</div>
+        	</a>
     	</div>
 	);
 }

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

@@ -0,0 +1,20 @@
+import '../styles/old.css';
+import { login } from '../script/login.js'
+
+
+function Home()
+{
+	return (
+		<div class ="login">
+         	<form id="loginForm" method="post" name="login" action="http://localhost/api/login" class ="loginForm">
+         	    <p class="loginHere">Login Here</p>
+         	    <input type="text" name="nickname" placeholder="login"></input>
+         	    <input type="text" name="password" placeholder="password"></input>
+         	    <button class="submit" onClick={login}>LOGIN</button>
+         	</form>
+		 	<button></button>
+    	</div>
+	);
+}
+
+export default Home;

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

@@ -1,72 +0,0 @@
-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

@@ -1,17 +1,42 @@
 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 Home from './components/Home';
+import Head from './components/Head';
 import Field from './components/Field';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter, Route, Routes} from 'react-router-dom'
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+	{/* <Router>
+		<Route exact path="/">
     		<Header />
 			<Field />
-	{/* <App /> */}
+		</Route>
+		<Route exact path="/pong">
+    		<Header />
+			<Field />
+		</Route>
+	</Router> */}
+	<Head />
+	<Header />
+	<BrowserRouter>
+    	<Routes>
+			<Route exact path="/" element={<Home/>}/>
+    			{/* <Header />
+				<Field />
+			</Route> */}
+			<Route exact path="/pong" element={<Field />}/>
+    			{/* <Header />
+				<Field />
+			</Route> */}
+    	</Routes>
+  	</BrowserRouter>,
   </React.StrictMode>
 );
 

frontend/pong/my-app/src/script/login.js

@@ -0,0 +1,13 @@
+// export const login()
+// {
+//     alert("Le bouton a été cliqué !");
+//     var formulaire = document.getElementById("loginForm");
+//     formulaire.submit();
+// }
+
+export const login = () => {
+	console.log('Hello from myFunction');
+    // alert("Le bouton a été cliqué !");
+    var formulaire = document.getElementById("loginForm");
+    formulaire.submit();
+  }

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

@@ -74,6 +74,7 @@ input{
 	max-width: 33%;
 	color: aqua;
 	justify-content: right;
+	text-decoration: none;
 }
 
 label{
@@ -96,6 +97,7 @@ label{
 	color: aqua;
 	/* font-size: 4vh; */
 	font-size: 2vw;
+	text-decoration: none;
 }
 
 .pong{