From 773d9966271938692fe9f4e3b32d88b7055e01f7 Mon Sep 17 00:00:00 2001
From: Kum1ta <eddydhj@gmail.com>
Date: Thu, 29 Aug 2024 18:43:23 +0200
Subject: [PATCH] Game     - Starting solo game with physics

---
 site/real_game/class/SoloGame.js       | 11 ++--
 site/real_game/class/soloClass/Ball.js | 87 ++------------------------
 site/real_game/class/soloClass/Map.js  | 77 +++++++++++++++++++----
 site/real_game/package-lock.json       | 43 +++++++++++++
 site/real_game/package.json            |  4 ++
 5 files changed, 121 insertions(+), 101 deletions(-)

diff --git a/site/real_game/class/SoloGame.js b/site/real_game/class/SoloGame.js
index a61d1e2..377c2df 100644
--- a/site/real_game/class/SoloGame.js
+++ b/site/real_game/class/SoloGame.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/28 12:07:39 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/29 00:19:01 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/29 13:58:06 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -32,6 +32,7 @@ class SoloGame
 		renderer = new THREE.WebGLRenderer({antialias: true});
 		renderer.shadowMap.enabled = true;
 		renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+		Ball.create(scene);
 		Map.create(scene);
 		camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight);
 		camera.rotation.x = -Math.PI / 2;
@@ -39,15 +40,11 @@ class SoloGame
 		scene.background = new THREE.Color(0x252525);
 		document.body.appendChild(renderer.domElement);
 		Players.create(scene);
-		Ball.create(scene);
 
 		controls = new OrbitControls(camera, renderer.domElement);
 		camera.position.set(0, 20, 0);
+		// camera.position.set(20, 5, 20);
 		renderer.setAnimationLoop(loop);
-
-		setTimeout(() => {
-			Ball.moveBall();
-		}, 1000);
 	}
 
 	static dispose()
@@ -78,6 +75,8 @@ function loop()
 {
 	stats.begin();
 	controls.update();
+	Ball.update();
+	Map.update();
 	Players.update();
 	renderer.render(scene, camera);
 	stats.end();
diff --git a/site/real_game/class/soloClass/Ball.js b/site/real_game/class/soloClass/Ball.js
index 5bab16d..a5de6ff 100644
--- a/site/real_game/class/soloClass/Ball.js
+++ b/site/real_game/class/soloClass/Ball.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/28 15:58:03 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/29 00:44:26 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/29 13:45:02 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -23,12 +23,10 @@ class Ball
 {
 	static create(scene)
 	{
-
 		ball = createBall();
 
 		scene.add(ball);
-		ball.rotateY(0.8);
-		
+		ball.rotateY(2.39);	
 	}
 
 	static dispose()
@@ -36,36 +34,10 @@ class Ball
 		ball = null;
 	}
 
-	static moveBall()
+	static update()
 	{
-		createInterval();
 	}
 
-
-	static stopBall()
-	{
-		if (interval)
-			clearInterval(interval);
-	}
-}
-
-function createInterval()
-{
-	interval = setInterval(() => {
-		console.log(ball.position);
-		moveForward();
-		bounceWallTop();
-		bounceWallTBottom();
-		bouncePlayer1();
-	}, 16);
-}
-
-function moveForward()
-{
-	const direction = new THREE.Vector3(0, 0, dir);
-	direction.applyQuaternion(ball.quaternion);
-	
-	ball.position.add(direction.multiplyScalar(speed));
 }
 
 function createBall()
@@ -81,55 +53,4 @@ function createBall()
 	return (mesh);
 }
 
-function bounceWallTop()
-{
-	const origin = new THREE.Vector3(ball.position.x, ball.position.y, ball.position.z);
-	const direction = new THREE.Vector3(ball.position.x, ball.position.y, ball.position.z - 1);
-
-	direction.normalize();
-	const raycaster = new THREE.Raycaster(origin, direction);
-	const objects = [ wallTop ];
-	const intersects = raycaster.intersectObjects(objects);
-
-	if (intersects.length > 0)
-	{
-		if (intersects[0].distance <= 0.5)
-			ball.rotation.y = Math.PI - ball.rotation.y
-	}
-}
-
-function bounceWallTBottom()
-{
-	const origin = new THREE.Vector3(ball.position.x, ball.position.y, ball.position.z);
-	const direction = new THREE.Vector3(ball.position.x, ball.position.y, ball.position.z + 1);
-
-	direction.normalize();
-	const raycaster = new THREE.Raycaster(origin, direction);
-	const objects = [ wallBottom ];
-	const intersects = raycaster.intersectObjects(objects);
-
-	if (intersects.length > 0)
-	{
-		if (intersects[0].distance <= 0.4)
-			ball.rotation.y = Math.PI - ball.rotation.y;
-	}
-}
-
-function bouncePlayer1()
-{
-	const origin = new THREE.Vector3(ball.position.x, ball.position.y, ball.position.z);
-	const direction = new THREE.Vector3(ball.position.x - 1, ball.position.y, ball.position.z);
-
-	direction.normalize();
-	const raycaster = new THREE.Raycaster(origin, direction);
-	const objects = [ player1 ];
-	const intersects = raycaster.intersectObjects(objects);
-
-	if (intersects.length > 0)
-	{
-		if (intersects[0].distance <= 0.4)
-			ball.rotation.y = Math.PI - ball.rotation.y;
-	}
-}
-
-export { Ball };
\ No newline at end of file
+export { Ball, ball };
\ No newline at end of file
diff --git a/site/real_game/class/soloClass/Map.js b/site/real_game/class/soloClass/Map.js
index 0e221c8..dc1aa74 100644
--- a/site/real_game/class/soloClass/Map.js
+++ b/site/real_game/class/soloClass/Map.js
@@ -6,23 +6,35 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/28 12:23:48 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/28 17:01:17 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/29 18:42:55 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+import * as CANNON from 'cannon-es';
 import * as THREE from 'three';
+import { ball } from './Ball.js'
 
-const	width		=	25;
-const	height		=	12.5;
-let		spotLight	=	null;
-let		wallTop		=	null;
-let		wallBottom	=	null;
+const	width			=	25;
+const	height			=	12.5;
+let		ground			=	null;
+let		spotLight		=	null;
+let		wallTop			=	null;
+let		wallBottom		=	null;
+let		world			=	null;
+const	timeStep		=	1 / 60;
+let		groundBody		=	null;
+let		wallTopBody		=	null;
+let		wallBottomBody	=	null;
+let		ballBody		=	null;
 
 class Map
 {
 	static create(scene)
 	{
-		createGround(scene);
+		world = new CANNON.World({
+			gravity: new CANNON.Vec3(0, -9.81, 0),
+		});
+		ground = createGround(scene);
 		wallBottom = createWall(false);
 		wallTop = createWall(true);
 		spotLight = new THREE.SpotLight({color: 0xffffff});
@@ -33,6 +45,33 @@ class Map
 		scene.add(wallTop);
 		scene.add(wallBottom);
 		scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+		wallTopBody = new CANNON.Body({
+			shape: new CANNON.Box(new CANNON.Vec3(width, 0.7, 0.2)),
+			type: CANNON.Body.STATIC,
+		})
+		wallTopBody.position.z = -6.15;
+		wallTopBody.position.y += 0.35;
+		world.addBody(wallTopBody);
+		wallBottomBody = new CANNON.Body({
+			shape: new CANNON.Box(new CANNON.Vec3(width, 0.7, 0.2)),
+			type: CANNON.Body.STATIC,
+		})
+		wallBottomBody.position.z = 6.15;
+		wallBottomBody.position.y += 0.35;
+		world.addBody(wallBottomBody);
+		groundBody = new CANNON.Body({
+			shape: new CANNON.Plane(),
+			type: CANNON.Body.STATIC,
+		});
+		groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
+		world.addBody(groundBody);
+		ballBody = new CANNON.Body({
+			shape: new CANNON.Sphere(0.3),
+			mass: 1
+		});
+		ballBody.position.set(0, 2, 0);
+		ballBody.velocity.set(0, 0, 0);
+		world.addBody(ballBody);
 	}
 
 	static dispose()
@@ -41,6 +80,19 @@ class Map
 			spotLight.dispose();
 		spotLight = null;
 	}
+
+	static update()
+	{
+		world.step(timeStep);
+		ground.position.copy(groundBody.position);
+		ground.quaternion.copy(groundBody.quaternion);
+		ball.position.copy(ballBody.position);
+		ball.quaternion.copy(ballBody.quaternion);
+		wallBottom.position.copy(wallBottomBody.position);
+		wallBottom.quaternion.copy(wallBottomBody.quaternion);
+		wallTop.position.copy(wallTopBody.position);
+		wallTop.quaternion.copy(wallTopBody.quaternion);
+	}
 }
 
 function createGround(scene)
@@ -52,6 +104,7 @@ function createGround(scene)
 	mesh.rotateX(-Math.PI / 2);
 	mesh.position.set(0, 0, 0);
 	scene.add(mesh);
+	return (mesh);
 }
 
 function createWall(onTop)
@@ -60,11 +113,11 @@ function createWall(onTop)
 	const	material	=	new THREE.MeshPhysicalMaterial({color: 0x333333});
 	const	mesh		=	new THREE.Mesh(geometry, material);
 
-	if (onTop)
-		mesh.position.z = -6.15;
-	else
-		mesh.position.z = 6.15;
-	mesh.position.y += 0.35;
+	// if (onTop)
+	// 	mesh.position.z = -6.15;
+	// else
+	// 	mesh.position.z = 6.15;
+	// mesh.position.y += 0.35;
 	return (mesh);
 }
 
diff --git a/site/real_game/package-lock.json b/site/real_game/package-lock.json
index a6a2112..d0ed590 100644
--- a/site/real_game/package-lock.json
+++ b/site/real_game/package-lock.json
@@ -6,7 +6,11 @@
     "": {
       "dependencies": {
         "@rollup/rollup-darwin-arm64": "^4.21.0",
+        "cannon-es": "^0.20.0",
         "rollup": "^4.21.0",
+        "stats": "^1.0.0",
+        "stats-js": "^1.0.1",
+        "statsjs": "^1.0.7",
         "three": "^0.167.1",
         "vite": "^5.4.1"
       }
@@ -592,6 +596,20 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "license": "MIT"
     },
+    "node_modules/cannon-es": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/cannon-es/-/cannon-es-0.20.0.tgz",
+      "integrity": "sha512-eZhWTZIkFOnMAJOgfXJa9+b3kVlvG+FX4mdkpePev/w/rP5V8NRquGyEozcjPfEoXUlb+p7d9SUcmDSn14prOA==",
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-0.5.2.tgz",
+      "integrity": "sha512-/IKo89++b1UhClEhWvKk00gKgw6iwvwD8TOPTqqN9AyvjgPCnf9OrjnDNY3dPDOj+K+OhN9SRjYQH0AfX0bROw==",
+      "engines": {
+        "node": ">= 0.4.x"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -740,6 +758,31 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stats": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stats/-/stats-1.0.0.tgz",
+      "integrity": "sha512-YmKiMSrDaYA8Iu8/mPbZQmQLfzUrCstea60zPLkBMjpUveRh89GLipU/7AuMRAAX3aMmnseSuJtkgpPv29VoqA==",
+      "dependencies": {
+        "commander": "0.5.2"
+      },
+      "bin": {
+        "stats": "bin/stats"
+      },
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
+    "node_modules/stats-js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stats-js/-/stats-js-1.0.1.tgz",
+      "integrity": "sha512-EAwEFghGNv8mlYC4CZzI5kWghsnP8uBKXw6VLRHtXkOk5xySfUKLTqTkjgJFfDluIkf/O7eZwi5MXP50VeTbUg==",
+      "license": "MIT"
+    },
+    "node_modules/statsjs": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/statsjs/-/statsjs-1.0.7.tgz",
+      "integrity": "sha512-fch+88pDPk8y4BwFwStMQR52vgJnrTHPtY15UBSkR8QAAjVBkntrFIiuDTRdknoIabfMEF7qaGhOBI+V4RtMkA=="
+    },
     "node_modules/three": {
       "version": "0.167.1",
       "resolved": "https://registry.npmjs.org/three/-/three-0.167.1.tgz",
diff --git a/site/real_game/package.json b/site/real_game/package.json
index fe9ee82..63c0882 100644
--- a/site/real_game/package.json
+++ b/site/real_game/package.json
@@ -4,7 +4,11 @@
   },
   "dependencies": {
     "@rollup/rollup-darwin-arm64": "^4.21.0",
+    "cannon-es": "^0.20.0",
     "rollup": "^4.21.0",
+    "stats": "^1.0.0",
+    "stats-js": "^1.0.1",
+    "statsjs": "^1.0.7",
     "three": "^0.167.1",
     "vite": "^5.4.1"
   }