diff --git a/site/real_game/class/Ball.js b/site/real_game/class/Ball.js
index e85045d..535e030 100644
--- a/site/real_game/class/Ball.js
+++ b/site/real_game/class/Ball.js
@@ -6,26 +6,31 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 17:02:47 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/20 17:23:41 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/21 00:57:42 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import * as THREE from 'three';
 
-const centerPos = {
-	x: 0,
-	y: 0.3,
-	z: -0.1
-}
+/*
+	Todo (Eddy) :
+		- Ajouter fonction pour changer la gravité de la balle
+*/
 
 class Ball
 {
-	object = null;
+	object		= null;
+	centerPos	= {};
+	limits		= {};
+	interval	= null;
 
-	constructor(scene)
+	constructor(scene, map)
 	{
 		this.object = this.#createBall();
-
+		this.centerPos = map.centerPos;
+		this.centerPos.y += this.object.geometry.parameters.radius;
+		this.limits = map.playerLimits;
+		this.resetPosBall();
 		scene.add(this.object);
 	}
 
@@ -37,9 +42,66 @@ class Ball
 
 		mesh.receiveShadow = true;
 		mesh.castShadow = true;
-		mesh.position.set(centerPos.x, centerPos.y, centerPos.z);
+		mesh.position.set(this.centerPos.x, this.centerPos.y, this.centerPos.z);
 		return (mesh);
 	}
+
+	resetPosBall()
+	{
+		this.setPosition(this.centerPos.x, this.centerPos.y, this.centerPos.z);
+	}
+
+	setPosition(x, y, z)
+	{
+		this.object.position.set(x, y, z);
+	}
+
+	changeGravity()
+	{
+		let	diffTop	= this.limits.up - this.object.position.y;
+		let	diffBot	= this.object.position.y - this.limits.down;
+		let	speed	= 0.1; 
+
+		if (diffBot > diffTop)
+			speed *= -1;
+		if (this.interval)
+			clearInterval(this.interval);
+		this.interval = setInterval(() => {
+			this.object.position.y += speed;
+			if ((speed > 0 && this.object.position.y >= this.limits.up)
+				|| (speed < 0 && this.object.position.y <= this.limits.down))
+			{
+				clearInterval(this.interval);
+				this.interval = null;
+				if (speed > 0)
+					this.setPosition(this.object.position.x, this.limits.up, this.object.position.z);
+				else
+					this.setPosition(this.object.position.x, this.limits.down, this.object.position.z);
+			}
+		}, 10);
+	}
+
+	/*---------------- FUNCTION FOR TEST ----------------*/
+	initMoveBallTmp()
+	{
+		console.warn("Don't forget to remove function initMoveBallTmp");
+		const	speedBallTmp	=	0.1;
+		
+		document.addEventListener('keypress', (e) => {
+			if (e.key == '4')
+				this.object.position.x -= speedBallTmp;
+			if (e.key == '6')
+				this.object.position.x += speedBallTmp;
+			if (e.key == '8')
+				this.object.position.z -= speedBallTmp;
+			if (e.key == '2')
+				this.object.position.z += speedBallTmp;
+			if (e.key == '9')
+				this.changeGravity();
+		});
+	}
+	/*---------------------------------------------------*/
 }
 
+
 export { Ball };
\ No newline at end of file
diff --git a/site/real_game/class/Map.js b/site/real_game/class/Map.js
index 8421c22..0d4fb3b 100644
--- a/site/real_game/class/Map.js
+++ b/site/real_game/class/Map.js
@@ -3,29 +3,43 @@
 /*                                                        :::      ::::::::   */
 /*   Map.js                                             :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 14:52:55 by hubourge          #+#    #+#             */
-/*   Updated: 2024/08/20 18:29:17 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/08/21 00:59:01 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import * as THREE from 'three';
 
-
+/*
+	Todo (Eddy) :
+		- Ajouter la transparence sur les murs sur la distance de la balle (OK)
+		- Ajouter des textures selon le type : number pour couleur, string pour img (OK)
+*/
 
 class Map
 {
 	scene = null;
 	arrObject = [];
-	centerPos = {x:-1,y:-1,z:-1}
+	centerPos = {
+		x: -1,
+		y: -1,
+		z:-1
+	};
+	playerLimits = {
+		up : 3,
+		down: 0.3,
+		left: -3,
+		right: 3,
+	};
 	mapLength = 0;
 
 	constructor(scene, length)
 	{
 		this.scene = scene;
-		scene.add(this.#createPlanes(7.5, length, -(Math.PI / 2), "planeBottom", true));
-		scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false));
+		scene.add(this.#createPlanes(7.5, length, -(Math.PI / 2), "planeBottom", true, 0xaaffff));
+		scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false, '/textures/testTmp.jpg'));
 		scene.add(this.#createWall(-3.5, 0.4, -length/2, "wallLeft"));
 		scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight"));
 		this.centerPos.x = 0;
@@ -34,22 +48,36 @@ class Map
 		this.mapLength = length;
 	};
 
-	#createPlanes(x, y, rot, name, isBottom) // passer un materiel
+	#createPlanes(x, y, rot, name, isBottom, visual) // passer un materiel
 	{
 		for (let i = 0; i < this.arrObject.length; i++)
 		{
 			if (this.arrObject[i].name == name)
 				throw Error("Name already exist.");
 		}
-		const geometry	= new THREE.PlaneGeometry(x, y);
-		const material	= new THREE.MeshPhysicalMaterial()
-		const mesh		= new THREE.Mesh(geometry, material);
+		const	geometry	= new THREE.PlaneGeometry(x, y);
+		let		material	= null;
+		let		mesh		= null;
 
+		if (typeof(visual) == 'string')
+		{
+			const textureLoader = new THREE.TextureLoader();
+			const texture = textureLoader.load(visual);
+			material = new THREE.MeshPhysicalMaterial({ map: texture });
+		}
+		else if (typeof(visual) == 'number')
+			material = new THREE.MeshPhysicalMaterial({ color: visual });
+		else
+		{
+			console.log("kjdsjksd");
+			material = new THREE.MeshPhysicalMaterial();
+		}
+		mesh = new THREE.Mesh(geometry, material);
 		mesh.rotateX(rot);
 		if (isBottom)
 			mesh.position.set(0, 0.15, -6);
 		else
-			mesh.position.set(0, 3.05, -6);
+			mesh.position.set(0, 3.15, -6);
 		this.arrObject.push({mesh: mesh, name: name});
 		mesh.receiveShadow = true;
 		return (mesh);
@@ -67,6 +95,8 @@ class Map
 		const mesh		= new THREE.Mesh(geometry, material);
 
 		mesh.position.set(x, y, z);
+		mesh.material.transparent = true;
+		mesh.material.opacity = 0.5;
 		this.arrObject.push({mesh: mesh, name: name});
 		return (mesh);
 	};
@@ -87,6 +117,24 @@ class Map
 					this.arrObject[i].mesh.position.z = ball.position.z;
 				this.arrObject[i].mesh.position.y = ball.position.y;
 			}
+			if (this.arrObject[i].name == "wallLeft")
+			{
+				let	diff = ball.position.x - this.arrObject[i].mesh.position.x - 0.1;
+
+				if (diff > 2)
+					this.arrObject[i].mesh.material.opacity = 0;
+				else
+					this.arrObject[i].mesh.material.opacity = 1 - (diff / 2);
+			}
+			if (this.arrObject[i].name == "wallRight")
+				{
+					let	diff = this.arrObject[i].mesh.position.x - ball.position.x - 0.1;
+	
+					if (diff > 2)
+						this.arrObject[i].mesh.material.opacity = 0;
+					else
+						this.arrObject[i].mesh.material.opacity = 1 - (diff / 2);
+				}
 		}
 	}
 };
diff --git a/site/real_game/class/Player.js b/site/real_game/class/Player.js
index 67a5138..77dfba5 100644
--- a/site/real_game/class/Player.js
+++ b/site/real_game/class/Player.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:30:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/20 17:01:01 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/21 00:27:01 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -28,11 +28,6 @@ import * as THREE from 'three';
 		- La variable "limits" sert à délimiter les mouvements de la barre
 */
 
-/*
-	Information :
-		- La map devra faire maximum 8 largueur car ça pose des problèmes avec la caméra fixe
-
-
 /*
 	Todo (Eddy) :
 		- Ajouter une camera sur l'object (OK)
@@ -48,12 +43,6 @@ import * as THREE from 'three';
 */
 
 let playerExist = false;
-const limits = {
-	up : 3,
-	down: 0.2,
-	left: -3,
-	right: 3,
-}
 
 class Player
 {
@@ -64,19 +53,22 @@ class Player
 	cameraFixed		= false;
 	interval		= null;
 	isOnPointAnim	= false;
+	limits			= {};
 
-	constructor (object)
+	constructor (object, map)
 	{
 		if (playerExist)
 			throw Error("Player is already init.");
 		playerExist = true;
 		this.object = object;
-		this.camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 10000);
+		this.limits = map.playerLimits;
+		this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000);
 		this.setCameraPosition(
 			this.object.position.x,
 			this.object.position.y + 0.7,
-			this.object.position.z + 1
+			this.object.position.z + 2
 		);
+		this.object.position.set(this.object.position.x, this.limits.down, this.object.position.z);
 		this.cleanup = new FinalizationRegistry((heldValue) => {
 			playerExist = false;
 		})
@@ -110,20 +102,20 @@ class Player
 				{
 					this.setCameraPosition(
 						this.object.position.x,
-						this.object.position.y - (this.object.position.y >= limits.up ? 0.7 : -0.7),
-						this.object.position.z + 1
+						this.object.position.y - (this.object.position.y >= this.limits.up ? 0.7 : -0.7),
+						this.object.position.z + 2
 					);
 					this.camera.rotation.set(0, 0, 0);
 				}
 				else
-					this.setCameraPosition(0, 1.5, 2.6);
+					this.setCameraPosition(0, 1.5, 4);
 			}				
 		});
 	}
 
 	pointAnimation(scene)
 	{
-		const	tmpCamera	= new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 10000);
+		const	tmpCamera	= new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
 		const	tmp			= this.camera;
 		let		interval	= null;
 		const	startColor	= this.object.material.color.clone();
@@ -136,7 +128,7 @@ class Player
 			document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
 		}, 300)
 		setTimeout(() => {
-			tmpCamera.position.set(-3, 3, -3);
+			tmpCamera.position.set(-3, this.limits.up / 2 + 0.5, -3);
 			this.isOnPointAnim = true;
 			this.camera = tmpCamera;
 			interval = setInterval(() => {
@@ -161,17 +153,13 @@ class Player
 					{
 						this.setCameraPosition(
 							this.object.position.x,
-							this.object.position.y - (this.object.position.y >= limits.up ? 0.7 : -0.7),
-							this.object.position.z + 1
+							this.object.position.y - (this.object.position.y >= this.limits.up ? 0.7 : -0.7),
+							this.object.position.z + 2
 						);
 					}
 					document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
 					document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
 				}, 200);
-				// document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)';
-				// setTimeout(() => {
-				// 	document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
-				// }, 300)
 			}, 4000);
 		}, 200)
 	}
@@ -183,7 +171,7 @@ class Player
 		i = 0;
 		while (i < this.pressedButton.length)
 		{
-			if (this.pressedButton[i] == 'w' && this.object.position.y < limits.up)
+			if (this.pressedButton[i] == 'w' && this.object.position.y < this.limits.up)
 			{
 				if (this.interval)
 					clearInterval(this.interval);
@@ -191,14 +179,14 @@ class Player
 					this.object.position.y += this.speed;
 					if (!this.cameraFixed && !this.isOnPointAnim)
 						this.camera.position.y += (this.speed / 2);
-					if (this.object.position.y >= limits.up)
+					if (this.object.position.y >= this.limits.up)
 					{
 						clearInterval(this.interval);
 						this.interval = null;
 					}
 				}, 5);
 			}
-			if (this.pressedButton[i] == 's' && this.object.position.y > limits.down)
+			if (this.pressedButton[i] == 's' && this.object.position.y > this.limits.down)
 			{
 				if (this.interval)
 					clearInterval(this.interval);
@@ -206,20 +194,20 @@ class Player
 					this.object.position.y -= this.speed;
 					if (!this.cameraFixed && !this.isOnPointAnim)
 						this.camera.position.y -= (this.speed / 2);
-					if (this.object.position.y <= limits.down)
+					if (this.object.position.y <= this.limits.down)
 					{
 						clearInterval(this.interval);
 						this.interval = null;
 					}
 				}, 5);
 			}
-			if (this.pressedButton[i] == 'd' && this.object.position.x < limits.right)
+			if (this.pressedButton[i] == 'd' && this.object.position.x < this.limits.right)
 			{
 				this.object.position.x += this.speed;
 				if (!this.cameraFixed && !this.isOnPointAnim)
 					this.camera.position.x += this.speed;
 			}
-			if (this.pressedButton[i] == 'a' && this.object.position.x > limits.left)
+			if (this.pressedButton[i] == 'a' && this.object.position.x > this.limits.left)
 			{
 				this.object.position.x -= this.speed;
 				if (!this.cameraFixed && !this.isOnPointAnim)
diff --git a/site/real_game/main.js b/site/real_game/main.js
index 2bdf64d..7cbd98b 100644
--- a/site/real_game/main.js
+++ b/site/real_game/main.js
@@ -6,15 +6,14 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:53:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/20 17:55:31 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/21 00:10:46 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import * as THREE from 'three';
 import { Player } from './class/Player'
 import { Map } from './class/Map'
-import { OrbitControls } from 'three/examples/jsm/Addons.js';
-import { update } from 'three/examples/jsm/libs/tween.module.js';
+import { Ball } from './class/Ball'
 
 function createBarPlayer(color)
 {
@@ -23,15 +22,16 @@ function createBarPlayer(color)
 	const mesh		= new THREE.Mesh(geometry, material);
 
 	mesh.position.set(0, 0.2, 0);
+	mesh.castShadow = true;
 	return (mesh);
 }
 
 function loop()
 {
 	player.update();
+	map.update(ball.object);
 	renderer.render(scene, player.camera);
 	
-	// ===== test ball =====
 }
 
 const scene			= new THREE.Scene();
@@ -40,40 +40,12 @@ const bar			= createBarPlayer(0xed56ea);
 const renderer		= new THREE.WebGLRenderer({antialias: true});
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-const player		= new Player(bar);
+const player		= new Player(bar, map);
 const spotLight		= new THREE.SpotLight(0xffffff, 10000, 0, 0.2);
-
-const ambiantLight	= new THREE.AmbientLight(0xffffff, 0.5);
-
-// ===== test ball =====
-const geometryBall = new THREE.SphereGeometry(0.15, 32, 32);
-const materialBall = new THREE.MeshPhysicalMaterial({color: 0xff0000});
-const ball = new THREE.Mesh(geometryBall, materialBall);
-ball.position.x = map.centerPos.x;
-ball.position.y = map.centerPos.y + 0.15;
-ball.position.z = map.centerPos.z;
-ball.receiveShadow = true;
-ball.castShadow = true;
-scene.add(ball);
-
 spotLight.castShadow = true;
+const ambiantLight	= new THREE.AmbientLight(0xffffff, 0.5);
+const ball			= new Ball(scene, map)
 
-let speed			= 0.1;
-const limits = {
-	up : 3,
-	down: 0.2,
-	left: -3,
-	right: 3,
-}
-
-document.addEventListener('keypress', (e) => {
-	if (e.key == '9')
-	{
-			ball.position.z += speed;
-			console.log(e.key);
-	}
-});
-// =====================
 
 scene.add(player.object);
 scene.add(ambiantLight);
@@ -82,6 +54,7 @@ scene.add(spotLight);
 scene.background = new THREE.Color(0x1a1a1a);
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
+ball.initMoveBallTmp();
 
 document.addEventListener('keypress', (e) => {
 	if (e.key == 'g')
diff --git a/site/real_game/node_modules/.vite/deps/_metadata.json b/site/real_game/node_modules/.vite/deps/_metadata.json
index 136e9ca..788e3b5 100644
--- a/site/real_game/node_modules/.vite/deps/_metadata.json
+++ b/site/real_game/node_modules/.vite/deps/_metadata.json
@@ -1,25 +1,25 @@
 {
-  "hash": "b5ed7c4e",
-  "configHash": "4027b9ee",
+  "hash": "aeb97021",
+  "configHash": "0b4c6e74",
   "lockfileHash": "cd36b699",
-  "browserHash": "c12de373",
+  "browserHash": "84f752d1",
   "optimized": {
     "three": {
       "src": "../../three/build/three.module.js",
       "file": "three.js",
-      "fileHash": "2e49ea84",
+      "fileHash": "a5c835fb",
       "needsInterop": false
     },
     "three/examples/jsm/Addons.js": {
       "src": "../../three/examples/jsm/Addons.js",
       "file": "three_examples_jsm_Addons__js.js",
-      "fileHash": "a119f2f8",
+      "fileHash": "aa17f873",
       "needsInterop": false
     },
     "three/examples/jsm/libs/tween.module.js": {
       "src": "../../three/examples/jsm/libs/tween.module.js",
       "file": "three_examples_jsm_libs_tween__module__js.js",
-      "fileHash": "4f2aca7a",
+      "fileHash": "b4479a8c",
       "needsInterop": false
     }
   },
diff --git a/site/real_game/textures/testTmp.jpg b/site/real_game/textures/testTmp.jpg
new file mode 100644
index 0000000..2034117
Binary files /dev/null and b/site/real_game/textures/testTmp.jpg differ