new working branch

2023-12-18 13:33:08 +01:00 · 2023-12-18 13:33:08 +01:00 · 2d98ff1f58
commit 2d98ff1f58
parent 17357ee472 6b0e00d1f9
55 changed files with 857 additions and 499 deletions
--- a/public_html/assets/PNJS
+++ b/public_html/assets/PNJS
--- a/public_html/assets/blue_portal.webp
+++ b/public_html/assets/blue_portal.webp
--- a/public_html/assets/concord_images/carrey.jpg
+++ b/public_html/assets/concord_images/carrey.jpg
--- a/public_html/assets/concord_images/elon.jpg
+++ b/public_html/assets/concord_images/elon.jpg
--- a/public_html/assets/concord_images/esquirol.jpg
+++ b/public_html/assets/concord_images/esquirol.jpg
--- a/public_html/assets/concord_images/gournay.jpg
+++ b/public_html/assets/concord_images/gournay.jpg
--- a/public_html/assets/concord_images/jyf.jpg
+++ b/public_html/assets/concord_images/jyf.jpg
--- a/public_html/assets/concord_images/lepen.jpg
+++ b/public_html/assets/concord_images/lepen.jpg
--- a/public_html/assets/concord_images/macron.jpg
+++ b/public_html/assets/concord_images/macron.jpg
--- a/public_html/assets/concord_images/melanchon.jpg
+++ b/public_html/assets/concord_images/melanchon.jpg
--- a/public_html/assets/concord_images/melanchon.png
+++ b/public_html/assets/concord_images/melanchon.png
--- a/public_html/assets/concord_images/nicomette.jpg
+++ b/public_html/assets/concord_images/nicomette.jpg
--- a/public_html/assets/concord_images/patrickseb.jpg
+++ b/public_html/assets/concord_images/patrickseb.jpg
--- a/public_html/assets/concord_images/poutine.jpg
+++ b/public_html/assets/concord_images/poutine.jpg
--- a/public_html/assets/concord_images/raquet.jpg
+++ b/public_html/assets/concord_images/raquet.jpg
--- a/public_html/assets/concord_images/rebillard.jpg
+++ b/public_html/assets/concord_images/rebillard.jpg
--- a/public_html/assets/concord_images/trump.jpg
+++ b/public_html/assets/concord_images/trump.jpg
--- a/public_html/assets/concord_images/vieu.jpg
+++ b/public_html/assets/concord_images/vieu.jpg
--- a/public_html/assets/concord_images/zemmour.jpg
+++ b/public_html/assets/concord_images/zemmour.jpg
--- a/public_html/assets/map/map_principale_nuit.jpeg
+++ b/public_html/assets/map/map_principale_nuit.jpeg
--- a/public_html/assets/map/map_principale_nuit.png
+++ b/public_html/assets/map/map_principale_nuit.png
--- a/public_html/assets/map/map_principale_plage.png
+++ b/public_html/assets/map/map_principale_plage.png
--- a/public_html/assets/orange_portal.webp
+++ b/public_html/assets/orange_portal.webp
--- a/public_html/assets/phone.png
+++ b/public_html/assets/phone.png
--- a/public_html/assets/phone/concord.png
+++ b/public_html/assets/phone/concord.png
--- a/public_html/assets/phone/facebook.png
+++ b/public_html/assets/phone/facebook.png
--- a/public_html/assets/phone/fond_ecran.jpeg
+++ b/public_html/assets/phone/fond_ecran.jpeg
--- a/public_html/assets/phone/fond_ecran.jpg
+++ b/public_html/assets/phone/fond_ecran.jpg
--- a/public_html/assets/phone/vbucks.webp
+++ b/public_html/assets/phone/vbucks.webp
--- a/public_html/assets/phone/webview/fb.html
+++ b/public_html/assets/phone/webview/fb.html
@ -0,0 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>FakeBook</title>
 </head>
 <body>
 <img src="hairinsa.png" width="100%">
 </body>
 </html>
--- a/public_html/assets/phone/webview/free_vbucks.jpeg
+++ b/public_html/assets/phone/webview/free_vbucks.jpeg
--- a/public_html/assets/phone/webview/hairinsa.png
+++ b/public_html/assets/phone/webview/hairinsa.png
--- a/public_html/assets/phone/webview/rickroll.gif
+++ b/public_html/assets/phone/webview/rickroll.gif
--- a/public_html/assets/phone/webview/vbucks.html
+++ b/public_html/assets/phone/webview/vbucks.html
@ -0,0 +1,17 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Free Vbucks</title>
 </head>
 <body>
 <img src="free_vbucks.jpeg" width="100%" id="freevbucks">
 <img src="rickroll.gif" width="100%" id="rr" style="display:none">
 <script>
 	document.getElementById("freevbucks").addEventListener("click", (e) => {
 		document.getElementById("rr").style.display = "block"
    });
 </script>
 </body>
 </html>
--- a/public_html/assets/pnj.png
+++ b/public_html/assets/pnj.png
--- a/public_html/assets/pnj1.png
+++ b/public_html/assets/pnj1.png
--- a/public_html/assets/sounds/drift.mp3
+++ b/public_html/assets/sounds/drift.mp3
--- a/public_html/assets/sounds/shoot.mp3
+++ b/public_html/assets/sounds/shoot.mp3
--- a/public_html/assets/water_background.jpg
+++ b/public_html/assets/water_background.jpg
--- a/public_html/assets/water_background2.jpg
+++ b/public_html/assets/water_background2.jpg
--- a/public_html/css/game.css
+++ b/public_html/css/game.css
@ -0,0 +1,133 @@
 html, body{
 	margin: 0px;
 	padding: 0px;
 	background-color: #2b2c2e;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	overflow: hidden;
 	width: 100vw;
 	height: 100vh;
 }
 #canvas{
 	max-height: 100vh;
 	max-width: 100vw;
 }
 #phoneContainer.hidden{
 	position: absolute;
 	right: 20px;
 	top: 100%;
 }
 #phoneContainer.visible{
 	position: absolute;
 	right: 20px;
 	bottom: 5%;
 	user-select: none;
 }
 #phoneDiv{
 	position: relative;
 }
 #phone{
 	width: 200px;
 }
 #phoneScreen{
 	background-color: #322b2a;
 	position: absolute;
 	left: 7%;
 	top: 12%;
 	right: 7%;
 	bottom: 13%;
 }
 #chatHeader{
 	height: 10%;
 	width: 100%;
 	border-bottom: 1px solid black;
 	text-align: center;
 	color: white;
 	line-height: 7%;
 	padding: 0px;
 	overflow: hidden;
 	font-weight: bold;
 	background-color:  #232120  ;
 }
 #chatHeader > p{
 	line-height: 10%;
 }
 #chatMessages{
 	height: 80%;
 	width: 100%;
 	overflow-y: scroll;
 	overflow-x: hidden;
 }
 #chatMessages::-webkit-scrollbar{
 	display: none;
 }
 #chatInputDiv{
 	height: 10%;
 	width: 100%;
 	text-align: center;
 }
 #chatInput{
 	width: 90%;
 	box-sizing: border-box;
 	appearance: none;
 	background-color: transparent;
 	border-radius: 10px;
 	border: 1px solid black;
 	color: white;
 	padding-left: 10px;
 	height: 85%;
 	margin-bottom: 15%;
 	outline: none;
 }
 .message{
 	color: white;
 	font-family: sans-serif;
 	margin: 3%;
 }
 .messageTitle{
 	font-size: 75%;
 	margin: 0px;
 }
 .messageContent{
 	margin: 0px;
 	font-size: 60%;
 }
 .messageImage{
 	width: 100%;
 }
 #content {
 	height:90%;
 	width:100%;
 	background-image: url("../assets/phone/fond_ecran.jpeg");
 	background-size: cover;
 }
 .icon {
 	background-color: rgba(0,0,0, 0.7);
 	width: 40px;
 	height: 40px;
 	padding: 5px;
 	border-radius: 10px;
 	margin: 3.5px;
 	margin-right: 0;
 	display: inline-block;
 	cursor:pointer;
 }
--- a/public_html/game.html
+++ b/public_html/game.html
@ -2,16 +2,54 @@
 <html>
    <head>
        <script type="text/javascript" src="./js/sound.js"></script>
        <script type="text/javascript" src="./js/cookies.js"></script>
        <script type="text/javascript" src="./js/phone.js"></script>
        <script type="text/javascript" src="./js/class.js"></script>
        <script type="text/javascript" src="./js/objects.js"></script>
        <script type="text/javascript" src="./js/render.js"></script>
        <script type="text/javascript" src="./js/input.js"></script>
        <script type="text/javascript" src="./js/network.js"></script>
        <script type="text/javascript" src="./js/leaderboard.js"></script>
        <script type="text/javascript" src="./js/global.js" defer></script>
        <script type="text/javascript" src="./js/objects.js" defer></script>
        <script type="text/javascript" src="./js/game.js" defer></script>
        <link rel="stylesheet" type="text/css" href="css/game.css">
    </head>
    <body>
-        <canvas width="800" height="800" id="canvas" style="border: 1px;"></canvas>
+        <canvas width="800" height="800" id="canvas"></canvas>
        <div id="phoneContainer" class="hidden">
            <div id="phoneDiv">
                <map name="map_retour_menu">
                  <area
                    shape="circle"
                    coords="100,380,17"
                    style="cursor:pointer;"
                    id="retour_menu"
                    border="5px" />
                </map>
                <img id="phone" src="assets/phone.png" alt="Phone" usemap="#map_retour_menu">
                <div id="phoneScreen">
                    <div id="chatHeader">
                        <p id ="TitlePage"></p>
                    </div>
                    <div id="chatMessages">
                    </div>
                    <div id="content">
                        <img src="./assets/phone/concord.png" class="icon" id="appli-concord">
                        <img src="./assets/logo.png" class="icon" id="appli-gta6">
                        <img src="./assets/phone/vbucks.webp" class="icon" id="appli-vbuks">
                        <img src="./assets/phone/facebook.png" class="icon" id="appli-fb">
                    </div>
                    <iframe id="webview" sandbox="allow-same-origin allow-scripts allow-forms" style="overflow: hidden;"></iframe>
                    <div id="chatInputDiv">
                        <input type="text" placeholder="Ecrivez un message ici" id="chatInput" onkeydown="phone.keyPress(this)">
                    </div>
                </div>
            </div>
        </div>
    </body>
 </html>
--- a/public_html/js/class.js
+++ b/public_html/js/class.js
@ -1,19 +1,21 @@
 let mapWidth = 210.;
 let mapHeith = 100.;
 const playerSize = 50.;
 const carSize = 40.;
 const playerSpeed=.2;
 const PNJSpeed=.02;
 const bulletSpeed=playerSpeed*2;
 const halfSqrtTwo=0.70710678118;
-const defaulthealth=10.;
+const defaulthealth=10;
 const portalSize=40;
 const affPortal = true;
 class Player
 {
-    constructor (id,x,y,name, dir)
+    constructor (id,x,y,z,name,dir)
    {
        this.name=name;
        this.x=x;
        this.y=y;
        this.z=z;//correspond to the map. Ex: 0=>main; 1=>arena
        this.id=id;
        this.visibleDir=1;
        this.dir=dir;//0=stand Still
@ -31,28 +33,17 @@ class Player
        this.death=0;
    }
-    takeDamage(amount,killerId,network)
+    takeDamage(amount,killerId)
    {
        this.health-=amount;
        if(this.health<=0)
        {
            this.death++;
-            network.died(this.id,killerId);
+            this.health=defaulthealth;
            this.health=10;
        }
    }
-    /*retrieveServerInfo(id,x,y,dir)
+            net.died(this.id,killerId);
-    {
+        }
        if(this.id==id)
        {
            this.x=x;
            this.y=y;
            this.dir=dir;
            if(dir!=0)
                this.visibleDir=dir;
    }
    }*/
    changeDirection(newDirection){
        this.dir = newDirection;
@ -83,7 +74,7 @@ class Player
        this.y += dy*dt;
        squares.forEach(square => {
-            if(square.collide(this))
+            if(square.collide(this.x,this.y,this.z))
            {
                this.x-=dx*dt;
                this.y-=dy*dt;
@ -93,7 +84,7 @@ class Player
        });
        circles.forEach(circle => {
-            if(circle.collide(this))
+            if(circle.collide(this.x,this.y,this.z))
            {
                this.x-=dx*dt;
                this.y-=dy*dt;
@ -111,15 +102,17 @@ class Player
 class Bullet
 {
-    constructor (x,y,dx,dy,id, sound)
+    constructor (x,y,z,dx,dy,id)
    {
-        sound.shoot();
+        if(z==player.z)
            bulletSound.play();
        this.x=x;
        this.y=y;
        this.z=z;
        this.dx=dx;
        this.dy=dy;
        this.deleted=false;
-        this.parentId=id;
+        this.shooterId=id;
    }
    update(dt)
@ -131,76 +124,75 @@ class Bullet
        }
    }
-    checkCollisions(player,squares,circles,network)//only the client's player /!\
+    checkCollisions(squares,circles)//only the client's player /!\
    {
-        if(!this.deleted)
+        if(this.deleted)
            return;
        if(player!=null && player.z==this.z && player.id!=this.shooterId && Math.sqrt((player.x-this.x)**2+(player.y-this.y)**2)<playerSize/2)
        {
-            if(player!=null && player.id!=this.parentId && Math.sqrt((player.x-this.x)**2+(player.y-this.y)**2)<playerSize/2)
+            player.takeDamage(1,this.shooterId);
            {
                player.takeDamage(1,this.parentId,network);
            this.deleted=true;
            return;
        }
        squares.forEach((square) => {
-                if(square.collide(this))
+            if(square.collide(this.x,this.y,this.z))
            {
                this.deleted=true;
                return;
            }
        });
        circles.forEach((circle) => {
-                if(circle.collide(this))
+            if(circle.collide(this.x,this.y,this.z))
            {
                this.deleted=true;
                return;
            }
        });
    }
    }
 }
 class Square
 {
-    constructor(x,y,width,heigth)
+    constructor(x,y,z,width,heigth)
    {
        this.x=x;
        this.y=y;
        this.z=z;
        this.w=width;
        this.h=heigth;
    }
-    collide(point)
+    collide(x,y,z)
    {
-        return (this.x<=point.x && point.x<=this.x+this.w && this.y<=point.y && point.y<=this.y+this.h);
+        return this.z==z && this.x<=x && x<=this.x+this.w && this.y<=y && y<=this.y+this.h;
    }
 }
 class Circle
 {
-    constructor(x,y,radius)
+    constructor(x,y,z,radius)
    {
        this.x=x;
        this.y=y;
        this.z=z;
        this.r=radius;
    }
-    collide(point)
+    collide(x,y,z)
    {
-        return ((point.x-this.x)**2+(point.y-this.y)**2<=this.r**2);
+        return this.z==z && (x-this.x)**2+(y-this.y)**2 <= this.r**2;
    }
 }
 class Car
 {
-    constructor(Renderer, type, spawn, sound)
+    constructor(type, spawn)
    {
-        this.sound=sound
+        this.type=type; // 0 circule vers le haut
        this.type=type  // 0 circule vers le haut
                        // 1 circule vers le bas
-
+        this.z=0;
        if(this.type == 1)  { //vers le bas
            this.x=1247;
            this.y=-40;
@ -215,34 +207,37 @@ class Car
        this.drift=0;
-        this.spawn=spawn
+        this.spawn=spawn;
        this.tick=0;
        this.Renderer=Renderer;
        //1247,-40
        //947,1000
    }
-    collide(x,y)
+    collide(x,y,z)
    {
        if(this.z!=z) {
            return false;
        }
        let cx=this.x-carSize/2;
        let cy=this.y-carSize/2;
        let collide = (cx<=x && x<=cx+carSize && cy<=y && y<=cy+carSize);
        if(collide) {
-            this.sound.drift()
+            driftSound.play()
-            this.drift=300;
+            this.drift=1000;
        }
-        return collide
+        return collide;
    }
-    Update()
+    Update(dt)
    {
-        if(this.tick==0) {
+        if(this.tick==0 && (new Date()).getSeconds()%20==this.spawn) {
-            if(new Date().getSeconds()%20==this.spawn) {
+                this.tick=1;
                this.tick=1
        }
-        }
+
-        this.ChangeDirection()
+        if(this.tick==0)
            return;
        this.ChangeDirection();
        switch (this.dir) {
          case 1:
            this.x=this.x+this.tick
@ -258,10 +253,9 @@ class Car
            break;
        }
        if(this.drift > 0) {
-            this.Renderer.RenderCar(this.x,this.y, this.angle+90)
+            this.drift-=dt;
            this.drift--
        }else{
-            this.Renderer.RenderCar(this.x,this.y, this.angle)
+            this.drift = 0;
        }
    }
@ -327,7 +321,9 @@ class Car
                this.dir=4
                this.angle=Math.PI/2
            } else if(this.y>1000) {
-                //tp
+                if(this.drift > 0) {
                    this.drift--
                }     //tp
                this.x=1247
                this.y=-40
                this.tick=0;
@ -383,3 +379,103 @@ class Car
        }
    }
 }
 class PNJ{
    constructor(x, y, z){
        this.x=x;
        this.y=y;
        this.z=z;
        this.dir=1;
    }
    checkCollisions(){
        squares.forEach((square) => {
            if(square.collide(this.x,this.y,this.z))
            {
                return true;
            }
        });
        circles.forEach((circle) => {
            if(circle.collide(this.x,this.y,this.z))
            {
                return true;
            }
        });
        return false;
    }
    changeDirection(){
        let newDir = Math.floor(Math.random()*8);
        if(newDir == this.dir){
            newDir = (this.dir+3)%4+1;
        }
        this.dir = newDir;
    }
    update(dt)
    {
        if(this.z!=player.z){
            return;
        }
        let dx,dy;
        switch(this.dir)
        {
            case 1: dx=0.;dy=-PNJSpeed;break;
            case 2: dx=halfSqrtTwo*PNJSpeed;dy=-halfSqrtTwo*PNJSpeed;break;
            case 3: dx=PNJSpeed;dy=0.;break;
            case 4: dx=halfSqrtTwo*PNJSpeed;dy=halfSqrtTwo*PNJSpeed;break;
            case 5: dx=0.;dy=PNJSpeed;break;
            case 6: dx=-halfSqrtTwo*PNJSpeed;dy=halfSqrtTwo*PNJSpeed;break;
            case 7: dx=-PNJSpeed;dy=0.;break;
            case 8: dx=-halfSqrtTwo*PNJSpeed;dy=-halfSqrtTwo*PNJSpeed;break;
            default: dx=0;dy=0;break;
        }
        this.x+=dx*dt;
        this.y+=dy*dt;
        if(this.checkCollisions()){
            this.x -= dx*dt;
            this.y -= dy*dt;
            this.changeDirection();
        }
        if(Math.random()<=0.001){
            this.changeDirection();
        }
    }
 }
 class Portal
 {
    constructor(xIn,yIn,zIn,xOut,yOut,zOut)
    {
        this.in={x:xIn,y:yIn,z:zIn};
        this.out={x:xOut,y:yOut,z:zOut};
    }
    update()
    {
        if(player.z==this.in.z && player.x>this.in.x && player.x<this.in.x+portalSize && player.y>this.in.y && player.y<this.in.y+portalSize)
        {
            player.z=this.out.z;
            player.x=this.out.x;
            player.y=this.out.y;
            net.update(player);
        }
    }
 }
 class Map
 {
    constructor(portalsOut,z) // portalsIn/Out : portal teleport In/Out; z: idDimension
    {
        this.portalsOut=portalsOut;
        portalsOut.forEach((p) => {if(p.in.z!=z){console.log("WRONG PORTAL DEFINITION FOR MAP",z,", portal :",p);}});
        this.z=z;
    }
    update()
    {
        this.portalsOut.forEach((p)=>p.update());
    }
 }
--- a/public_html/js/cookies.js
+++ b/public_html/js/cookies.js
@ -0,0 +1,10 @@
 function getCookie(name) {//Code from OpenClassroom
    nom = name + "=";
    var liste = document.cookie.split (';');
    for (var i = 0; i < liste.length; i++) {
        var c = liste[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nom) == 0) return c.substring(nom.length, c.length);
    }
    return null;
 }
--- a/public_html/js/game.js
+++ b/public_html/js/game.js
@ -1,200 +1,42 @@
-function CookiePseudo() {
+let dt = 0;
    nom = "pseudo=";
    var liste = document. cookie. split (';');
    for (var i = 0; i < liste.length; i++) {
        var c = liste[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nom) == 0) return c.substring(nom.length, c.length);
    }
    return null;
 }
 Renderer = new Render("canvas", "./assets/map/map_principale.png", "./assets/map/map_secondaire.png");
 LB = new LeaderBoard("canvas");
 let sound = new Sound("./assets/sounds/");
 sound.loadSounds();
 cars = [new Car(Renderer, 0, 0, sound),
 		new Car(Renderer, 0, 7, sound),
 		new Car(Renderer, 1, 7, sound),
 		new Car(Renderer, 1, 13, sound),
 		new Car(Renderer, 1, 14, sound),
 		new Car(Renderer, 0, 15, sound)]
 let Net = new Network("wss://ws.gta6.insat.fr:8080?name="+CookiePseudo(), sound);
 let playerId = null; //id of client player
 let players = [];
 let bullets = [];
 let player = null;
 Inp = new Input("canvas", Net,Renderer, sound);
 playerId=Net.playerId;
 player=Net.clientPlayer;
 players=Net.getPlayersToAdd();
 let dt = 1;
 function update()
 {
 	if(player.y>470 && player.y<480 && player.x>237 && player.x<310) {
 		player.x=2510
 		player.y=2714
 	} else if (player.x>2588 && player.x<2687 && player.y>2129 && player.y<2180) {
 		player.x=270
 		player.y=250
 	}
 	let playerToUpdate = Net.getPlayersToUpdate();
 	for (let i = 0;i<playerToUpdate.length;i++)
 	{
 		if(playerToUpdate[i].id==player.id) {
 			player.x=playerToUpdate[i].x;
 			player.y=playerToUpdate[i].y;
 			player.dir=playerToUpdate[i].dir;
 			player.visibleDir=playerToUpdate[i].visibleDir;
 		} else {
 			for (let j = 0;j<players.length;j++)
 			{
 				if(players[j].id==playerToUpdate[i].id)
 				{	
 					players[j].x=playerToUpdate[i].x;
 					players[j].y=playerToUpdate[i].y;
 					players[j].dir=playerToUpdate[i].dir;
 					players[j].visibleDir=playerToUpdate[i].visibleDir;
 					break;
 				}
 			}
 		}
 	}
 }
 function addPlayers()
 {
 	let playersToAdd = Net.getPlayersToAdd();
 	playersToAdd.forEach((p) => {
 		console.log("New player: ",p.id);
 		players.push(p);
 		Renderer.AddPlayer(p);
 	});
 }
 function remPlayers()
 {
 	let playerToRemove = Net.getPlayersToRemove();
 	for(let i=0;i<playerToRemove.length;i++)
 	{
 		let id = playerToRemove[i];
 		Renderer.RemPlayer(id);
 		console.log("deleting Player ",id);
 		for(let i = 0;i<players.length;i++)
 		{
 			if (players[i].id==id)
 			{
 				players.splice(i,1);
 				break;
 			}
 		}
 	}
 }
 function addBullets()
 {
 	let bulletsToAdd = Net.getBulletsToAdd();
 	bulletsToAdd.forEach((b) => {
 		bullets.push(b);
 		Renderer.addBullet(b);
 	});
 }
 function updateBullets(dt)
 {
 	for(let i = bullets.length-1;i>=0;i--)
 	{
 		bullets[i].update(dt);
 		bullets[i].checkCollisions(player,squares,circles,Net);
 		if(bullets[i].deleted)
 		{
 			Renderer.remBullet(bullets[i]);
 			bullets.splice(i,1);
 		}
 	}
 }
 function updateKills()
 {
 	let deaths = Net.getDeathToAdd();
 	deaths.forEach((object) => {
 		let dead = object.id;
 		let killer = object.killerId;
 		if(player.id==killer)
 			player.kill++;
 		for(let i=0;i<players.length;i++)
 		{
 			if(players[i].id==dead)
 				players[i].death++;
 			if(players[i].id==killer)
 				players[i].kill++;
 		}
 	});
 }
 let currentTime = new Date();
 function game() {
-	if(playerId==null)
+	if(player==null)
-	{
+		return;
 		if (Net.playerId!=null)
 		{
 			playerId=Net.playerId;
 			player=Net.clientPlayer;
 			players=Net.getPlayersToAdd();
 			Renderer.AddPlayer(player)
 			Renderer.SetPlayerId(player.id)
 			console.log("Connected as id ",playerId);
 			Inp.player=player;
 			Inp.bullets=bullets;
 			players.forEach((p) => {
 				Renderer.AddPlayer(p)
 			});
 			players.push(new Player(-1,-50,-50,"VOITURE",0,null));
 			LB.ReloadAff(players, player);
 		}
 	}
 	else
 	{
 		update();
 		addPlayers();
 		remPlayers();
 		addBullets();
 		updateKills();
 	player.update(squares, circles, dt);
-		for (var i = players.length - 1; i >= 0; i--) {
+	for (let i = 0;i<players.length; i++) {
 		players[i].update(squares, circles, dt);
 	}
-		Renderer.ReloadAff();
+
 	cars.forEach((c) => {
 		c.Update();
-			if(c.collide(player.x,player.y))
+		if(c.collide(player.x,player.y,player.z))
 		{
-				Net.died(player.id,-1);
+			net.died(player.id,-1);
-				player.x=-50;
+			player.z=-1;
 			player.deaths++;
 			players[0].kill++;
 			player.health=10;
 		}
 	});
 	PNJS.forEach((pnj)=>{
 		pnj.update(dt);
 	})
 	maps.forEach((m) => {m.update();});
 	updateBullets(dt);
-		LB.ReloadAff(players, player);
+	renderer.ReloadAff();
-	}
+	LB.ReloadAff();
 	let newTime = new Date();
 	dt=newTime - currentTime;
 	currentTime=newTime;
 }
-Net.connect(); //connect to server, create a player, and retrieve all players info
+net.connect(); //connect to server, create a player, and retrieve all players info
-setInterval(game);
+setInterval(game, 16);
--- a/public_html/js/global.js
+++ b/public_html/js/global.js
@ -0,0 +1,106 @@
 let player = null;
 let players = [];
 let renderer = new Render("canvas");
 let LB = new LeaderBoard("canvas");
 let bulletSound = new Sound("./assets/sounds/shoot.mp3");
 let driftSound = new Sound("./assets/sounds/drift.mp3");
 let net = new Network("wss://ws.gta6.insat.fr:8080?name=" + getCookie("pseudo"));
 let inp = new Input("canvas");
 let phone = new Phone();
 let bullets = [];
 let circles = [];
 let squares = [];
 let PNJS = [new PNJ(500, 100,0),
    new PNJ(700, 100,0),
    new PNJ(500, 600,0),
    new PNJ(200, 700,0)];
 let cars = [new Car(0, 0),
        new Car(1, 7),
        new Car(1, 13),
        new Car(1, 14),
        new Car(0, 7),
        new Car(0, 15)];
 let portals = [new Portal(250,457,0,500,500,0),//O
    new Portal(344,758,0,500,500,0), // SO
    new Portal(1190,211,0,500,500,0),// NE
    new Portal(862,213,0,500,500,0), // N
    new Portal(1126,472,0,500,500,0),// E
    new Portal(1076,768,0,500,500,0),// SE
    new Portal(721,767,0,500,500,0), // S
    new Portal(970,476,0,500,500,0)];//Mid
 let maps = [new Map(portals.slice(0),0)];
 players.push(new Player(-1,-50,-50,-1,"VOITURES",0));
 function updatePlayer(data)
 {
    if(data.id==player.id)
    {
        player.x=data.x;
        player.y=data.y;
        player.z=data.z;
    }
    else
    {
        for(let i=0;i<players.length;i++)
        {
            if(data.id==players[i].id)
            {
                players[i].x=data.x;
                players[i].y=data.y;
                if(data.z==undefined)
                    data.z=0;
                players[i].z=data.z;
                players[i].dir=data.dir;
                players[i].visibleDir=data.visibleDir;
                break;
            }
        }
    }
 }
 function addPlayer(data)
 {
    let np = new Player(data.id, data.x, data.y, 0, data.name, data.dir);
    players.push(np);
 }
 function removePlayer(id)
 {
    for(let i=0;i<players.length;i++)
    {
        if(players[i].id==id)
        {
            players.splice(i,1);
            break;
        }
    }
 }
 function addKill(idKilled,idKiller)
 {
    if(player.id==idKiller)
        player.kill++;
    players.forEach((p) => {
        if(p.id==idKilled)
            p.death++;
        if(p.id==idKiller)
            p.kill++;
    });
 }
 function updateBullets(dt)
 {
    for(let i = bullets.length-1;i>=0;i--)
    {
        bullets[i].update(dt);
        bullets[i].checkCollisions(squares,circles);
        if(bullets[i].deleted)
        {
            bullets.splice(i,1);
        }
    }
 }
--- a/public_html/js/input.js
+++ b/public_html/js/input.js
@ -1,56 +1,62 @@
 class Input {
-    constructor(id, net,renderer, sound) {
+    constructor(idCanvas) {
        this.keysDown = new Set()
        this.dir = 0;
        this.player=null;
        this.bullets=null;
        this.canvas = document.getElementById(id);
        this.renderer=renderer;
-        this.mouseX = 0
+        this.canvas = document.getElementById(idCanvas);
        this.mouseY = 0
        this.network = net
        // Event listener pour la position de la souris
        this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
        this.canvas.addEventListener("click", (e) => {
-            if(this.player==null || this.bullets==null){
+            if(player==null || bullets==null){
                return;
            }
            if(this.player.x>=2000 && this.player.y>=2000 && this.mouseX<2000 && this.mouseY<2000) {
                this.mouseX=this.mouseX+2000;
                this.mouseY=this.mouseY+2000;
            }
-            let dx = this.mouseX-this.player.x;
+            let bounds = this.canvas.getBoundingClientRect();
-            let dy = this.mouseY-this.player.y;
+
            let mouseX = (e.clientX - bounds.x)*this.canvas.width/bounds.width;
            let mouseY = (e.clientY - bounds.y)*this.canvas.height/bounds.height;
            //console.log(Math.round(mouseX),",",Math.round(mouseY)); //for debug
            let dx = mouseX-player.x;
            let dy = mouseY-player.y;
            let norm = Math.sqrt(dx*dx+dy*dy);
            let b = new Bullet(this.player.x,this.player.y,dx/norm,dy/norm,this.player.id, sound);
-            this.bullets.push(b);
+            let b = new Bullet(player.x,player.y,player.z,dx/norm,dy/norm,player.id);
-            this.renderer.addBullet(b);
+            bullets.push(b);
-            this.network.newBullet(b.x,b.y,b.dx,b.dy,b.parentId);
+            net.newBullet(b.x,b.y,b.z,b.dx,b.dy,b.shooterId);
        });
        window.addEventListener("keydown", (e)=>{
            //blocks the action of the key (cf. Killian)
            if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.code)) {
                e.preventDefault();
            }
            this.keysDown.add(e.key.toLowerCase())
            this.updateDir();
        })
        document.getElementById("retour_menu").addEventListener("click", (e) => {
            phone.changeWindow(1)
        });
        window.addEventListener("keyup", (e)=>{
            this.keysDown.delete(e.key.toLowerCase())
            this.updateDir();
        })
        window.addEventListener("keypress", (e)=>{
            if(e.key.toLowerCase()=="p"){
                phone.changePosition();
            }
        })
    }
    updateDir(){
-        if(this.player==null)
+        if(player==null)
            return;
        let oldDir=this.dir;
        this.dir=0;
        if(this.keysDown.has('z') || this.keysDown.has('arrowup')){
            if(this.keysDown.has('d') || this.keysDown.has('arrowright')){
@ -71,7 +77,7 @@ class Input {
                this.dir = 3;
            }
        }else if(this.keysDown.has('s') || this.keysDown.has('arrowdown')){
-            if(this.keysDown.has('q') || this.keysDown.has('arrowLeft')){
+            if(this.keysDown.has('q') || this.keysDown.has('arrowleft')){
                this.dir = 6;
            }else{
                this.dir = 5;
@ -81,23 +87,14 @@ class Input {
        }
        if(oldDir!=this.dir)
        {
-            this.player.changeDirection(this.dir);
+            player.changeDirection(this.dir);
-            this.network.update(this.player);
+            net.update(player);
        }
    }
-    get getDirection() {
+    /*
        return this.dir;
    }
    handleMouseMove(event) {
        let mX = event.clientX - this.canvas.getBoundingClientRect().left;
        let mY = event.clientY - this.canvas.getBoundingClientRect().top;
        this.mouseX = mX;
        this.mouseY = mY;
    }
    calculateAngle(playerX, playerY) {
        return Math.atan2(this.mouseY - playerY, this.mouseX - playerX);
    }
    */
 }
--- a/public_html/js/leaderboard.js
+++ b/public_html/js/leaderboard.js
@ -1,29 +1,28 @@
 class LeaderBoard {
-	constructor(id) {
+	constructor(idCanvas) {
-		this.canvas = document.getElementById(id);
+		this.canvas = document.getElementById(idCanvas);
 		this.ctx = this.canvas.getContext("2d");
 		this.nbjoueur=0
        this.px=10;
        this.py=10;
 	}
-	ReloadAff(players, player) {
+	ReloadAff() {
-		this.px=10
+		let LBplayers=[];
 		this.py=10
 		this.players=[]
 		players.forEach((p) => {
 			if(p != null) {
-				this.players.push(p)
+				LBplayers.push(p);
 			}
 		})
-		this.players.push(player);
+		LBplayers.push(player);
-		this.players.sort(function (a, b) {
+		LBplayers.sort(function (a, b) {
 			return b.kill - a.kill;
 		});
 	    // tableau du leaderboard (le fonc "blanc")
 	    this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
-	    this.ctx.fillRect(this.px, this.py, this.px+240, this.py+100+this.nbjoueur*20);
+	    this.ctx.fillRect(this.px, this.py, this.px+240, this.py+100+LBplayers.length*20);
-	    this.nbjoueur=0
+	    this.nbjoueur=0;
 	    this.ctx.font = '20px Arial';
 	    this.ctx.fillStyle = '#000000';
 	    this.ctx.fillText('Leaderboard', this.px+80, this.py+30);
@ -38,7 +37,7 @@ class LeaderBoard {
 	    this.ctx.lineTo(this.px+250, this.py+100);
 	    this.ctx.stroke();
-	    //donné user
+	    //donnee user
 	    this.ctx.fillStyle = '#000000';
 	    this.ctx.font = '15px Arial';
 	    this.ctx.fillText('#', this.px+10, this.py+80);
@ -48,7 +47,7 @@ class LeaderBoard {
 	    this.ctx.fillText('K/D', this.px+220, this.py+80);
 	    this.ctx.font = '10px Arial';
-	    this.players.forEach((p) => {
+	    LBplayers.forEach((p) => {
 			if(p != null) {
 				this.ctx.fillText((this.nbjoueur+1), this.px+10, this.py+120+20*this.nbjoueur);
 	    		this.ctx.fillText(p.name, this.px+30, this.py+120+20*this.nbjoueur);
@ -56,7 +55,7 @@ class LeaderBoard {
 			    this.ctx.fillText(p.death, this.px+200, this.py+120+20*this.nbjoueur);
 			    this.ctx.fillText(Math.round(10*p.kill/p.death)/10, this.px+220, this.py+120+20*this.nbjoueur);
-				this.nbjoueur++
+				this.nbjoueur++;
 			}
 		});
--- a/public_html/js/network.js
+++ b/public_html/js/network.js
@ -1,49 +1,50 @@
 class Network{
-	constructor(adress, bulletsound){
+	constructor(adress){
 		this.adress = adress;
 		this.connected = false;
 		this.playerId = null;
 		this.clientPlayer=null;
 		this.playersToAdd = [];
 		this.playersToRemove = [];
 		this.playersToUpdate = [];
 		this.bulletsToAdd = [];
 		this.deathToAdd = [];
 		this.sound=bulletsound;
 	}
 	message(data){
 		switch(data.type){
 			case 'connect':
 				this.playerId = data.data.playerId;
-				for (var i = data.data.players.length - 1; i >= 0; i--) {
+				for (let i = 0; i<data.data.players.length; i++) {
-					if(data.data.players[i].id==this.playerId)
+					let p = data.data.players[i];
-						this.clientPlayer=new Player(data.data.players[i].id, data.data.players[i].x, data.data.players[i].y, data.data.players[i].name, data.data.players[i].dir);
+					if(p.id==this.playerId)
 						player=new Player(p.id,p.x,p.y,0,p.name,p.dir);
 					else
-						this.playersToAdd.push(new Player(data.data.players[i].id, data.data.players[i].x, data.data.players[i].y, data.data.players[i].name, data.data.players[i].dir))
+						players.push(new Player(p.id,p.x,p.y,0,p.name,p.dir));
 				}
 				break;
 			case 'update':
-				this.playersToUpdate.push(data.data);
+				updatePlayer(data.data);
 				break;
 			case "newplayer":
-				this.playersToAdd.push(new Player(data.data.id, data.data.x, data.data.y, data.data.name, data.data.dir));
+				players.push(new Player(data.data.id, data.data.x, data.data.y, 0, data.data.name, data.data.dir));
 				break;
 			case "removePlayer":
-				this.playersToRemove.push(data.data.id);
+				removePlayer(data.data.id);
 				break;
 			case "newBullet":
-				this.bulletsToAdd.push(new Bullet(data.data.x,data.data.y,data.data.dx,data.data.dy,data.data.id, this.sound));
+				bullets.push(new Bullet(data.data.x,data.data.y,data.data.z==undefined?0:data.data.z,data.data.dx,data.data.dy,data.data.id));
 				break;
 				case "died":
 				console.log("player",data.data.id,"was killed by",data.data.killerId);
-				this.deathToAdd.push(data.data);
+				addKill(data.data.id,data.data.killerId);
 				break;
 			case "message":
 				phone.addMessage(data.data);
 			default:
 				console.log("received unknown data:",data);
 				break;
 		}
 	}
@ -59,7 +60,6 @@ class Network{
 	}
 	died(id, killerId){
 		this.deathToAdd.push({id:id,killerId:killerId});
 		this.socket.send(JSON.stringify({type:"died",data:{id: id, killerId: killerId}}));
 	}
@ -70,39 +70,12 @@ class Network{
 		}));
 	}
-	newBullet(x,y,dx,dy,parentId)
+	newBullet(x,y,z,dx,dy,parentId)
 	{
-		this.socket.send(JSON.stringify({type:"newBullet",data:{x: x,y: y,dx: dx,dy: dy,id:parentId}}));
+		this.socket.send(JSON.stringify({type:"newBullet",data:{x: x,y: y,z: z,dx: dx,dy: dy,id:parentId}}));
 	}
-	getPlayersToAdd(){  //returns the list of new players
+	sendMessage(title, content){
-		let tmp = this.playersToAdd;
+		this.socket.send(JSON.stringify({type: "message", data: {title: title, content: content}}));
 		this.playersToAdd = [];
 		return tmp;
 	}
 	getBulletsToAdd(){  //returns the list of new players
 		let tmp = this.bulletsToAdd;
 		this.bulletsToAdd = [];
 		return tmp;
 	}
 	getPlayersToRemove(){ //returns the list of player who have left the game
 		let tmp = this.playersToRemove;
 		this.playersToRemove = [];
 		return tmp;
 	}
 	getPlayersToUpdate(){ //return a list of all updates recieved from the server
 		let tmp = this.playersToUpdate;
 		this.playersToUpdate = [];
 		return tmp;
 	}
 	getDeathToAdd()
 	{
 		let tmp = this.deathToAdd;
 		this.deathToAdd=[];
 		return tmp;
 	}
 }
--- a/public_html/js/objects.js
+++ b/public_html/js/objects.js
@ -1,14 +1,11 @@
-let objects = {"squares":[{"x":1162,"y":115,"w":144,"h":125},{"x":120,"y":906,"w":1228,"h":21},{"x":127,"y":0,"w":1225,"h":14},{"x":297,"y":114,"w":78,"h":93},{"x":169,"y":243,"w":62,"h":250},{"x":313,"y":243,"w":62,"h":253},{"x":228,"y":257,"w":96,"h":222},{"x":792,"y":113,"w":176,"h":126},{"x":1017,"y":113,"w":143,"h":81},{"x":1160,"y":241,"w":143,"h":-129},{"x":1065,"y":372,"w":127,"h":124},{"x":697,"y":372,"w":319,"h":126},{"x":697,"y":498,"w":159,"h":111},{"x":697,"y":628,"w":160,"h":158},{"x":1001,"y":628,"w":191,"h":158},{"x":281,"y":629,"w":175,"h":156},{"x":0,"y":0,"w":137,"h":616},{"x":0,"y":615,"w":136,"h":310},{"x":1337,"y":1,"w":130,"h":581},{"x":1337,"y":573,"w":131,"h":356},{"x":586,"y":153,"w":15,"h":24},{"x":651,"y":153,"w":12,"h":24},{"x":700,"y":187,"w":12,"h":22},{"x":1020,"y":194,"w":10,"h":47},{"x":1019,"y":227,"w":56,"h":14},{"x":1101,"y":227,"w":62,"h":13},{"x":654,"y":128,"w":105,"h":17},{"x":748,"y":129,"w":12,"h":49},{"x":748,"y":193,"w":12,"h":47},{"x":654,"y":223,"w":105,"h":16},{"x":521,"y":129,"w":106,"h":14},{"x":521,"y":140,"w":13,"h":38},{"x":521,"y":194,"w":13,"h":46},{"x":521,"y":225,"w":108,"h":16}],"circles":[{"x":552,"y":163,"r":13.601470508735444},{"x":608,"y":190,"r":20.248456731316587},{"x":569,"y":212,"r":11.704699910719626},{"x":680,"y":213,"r":12.041594578792296},{"x":727,"y":164,"r":14.212670403551895}]}
+let objects = {"squares":[{"x":1162,"y":115,"z":0,"w":144,"h":125},{"x":120,"y":906,"z":0,"w":1228,"h":21},{"x":127,"y":0,"z":0,"w":1225,"h":14},{"x":297,"y":114,"z":0,"w":78,"h":93},{"x":169,"y":243,"z":0,"w":62,"h":250},{"x":313,"y":243,"z":0,"w":62,"h":253},{"x":228,"y":257,"z":0,"w":96,"h":222},{"x":792,"y":113,"z":0,"w":176,"h":126},{"x":1017,"y":113,"z":0,"w":143,"h":81},{"x":1160,"y":241,"z":0,"w":143,"h":-129},{"x":1065,"y":372,"z":0,"w":127,"h":124},{"x":697,"y":372,"z":0,"w":319,"h":126},{"x":697,"y":498,"z":0,"w":159,"h":111},{"x":697,"y":628,"z":0,"w":160,"h":158},{"x":1001,"y":628,"z":0,"w":191,"h":158},{"x":281,"y":629,"z":0,"w":175,"h":156},{"x":0,"y":0,"z":0,"w":137,"h":616},{"x":0,"y":615,"z":0,"w":136,"h":310},{"x":1337,"y":1,"z":0,"w":130,"h":581},{"x":1337,"y":573,"z":0,"w":131,"h":356},{"x":586,"y":153,"z":0,"w":15,"h":24},{"x":651,"y":153,"z":0,"w":12,"h":24},{"x":700,"y":187,"z":0,"w":12,"h":22},{"x":1020,"y":194,"z":0,"w":10,"h":47},{"x":1019,"y":227,"z":0,"w":56,"h":14},{"x":1101,"y":227,"z":0,"w":62,"h":13},{"x":654,"y":128,"z":0,"w":105,"h":17},{"x":748,"y":129,"z":0,"w":12,"h":49},{"x":748,"y":193,"z":0,"w":12,"h":47},{"x":654,"y":223,"z":0,"w":105,"h":16},{"x":521,"y":129,"z":0,"w":106,"h":14},{"x":521,"y":140,"z":0,"w":13,"h":38},{"x":521,"y":194,"z":0,"w":13,"h":46},{"x":521,"y":225,"z":0,"w":108,"h":16}],"circles":[{"x":552,"y":163,"z":0,"r":13.601470508735444},{"x":608,"y":190,"z":0,"r":20.248456731316587},{"x":569,"y":212,"z":0,"r":11.704699910719626},{"x":680,"y":213,"z":0,"r":12.041594578792296},{"x":727,"y":164,"z":0,"r":14.212670403551895}]}
-let squares = [];
+for (let i=0; i<objects.squares.length;i++) {
 let circles = [];
 for (var i = objects.squares.length - 1; i >= 0; i--) {
 	let current = objects.squares[i]
-	squares.push(new Square(current.x, current.y, current.w, current.h));
+	squares.push(new Square(current.x, current.y, current.z, current.w, current.h));
 }
-for (var i = objects.circles.length - 1; i >= 0; i--) {
+for (let i=0; i<objects.circles.length; i++) {
 	let current = objects.circles[i]
-	circles.push(new Circle(current.x, current.y, current.r));
+	circles.push(new Circle(current.x, current.y, current.z, current.r));
 }
--- a/public_html/js/phone.js
+++ b/public_html/js/phone.js
@ -0,0 +1,127 @@
 class Phone{
 	constructor(){
 		this.position = 0;
 		this.messages = [];
 		this.name = document.getElementById("TitlePage");
 		this.content = document.getElementById("content");
 		this.contentmsg = document.getElementById("chatMessages");
 		this.inputDiv = document.getElementById("chatInputDiv");
 		this.webview = document.getElementById("webview");
 		this.webviewName = "Erreur"
 		this.chargeMainPage();
 		this.changeWindow(1)
 	}
 	chargeMainPage() {
 		document.getElementById("appli-concord").addEventListener("click", (e) => {
            this.changeWindow(2)
        });
 		document.getElementById("appli-gta6").addEventListener("click", (e) => {
            this.webviewName = "GTA 6"
            this.changeWindow("game.html")
        });
 		document.getElementById("appli-vbuks").addEventListener("click", (e) => {
            this.webviewName = "Free Vbucks"
            this.changeWindow("assets/phone/webview/vbucks.html")
        });
 		document.getElementById("appli-fb").addEventListener("click", (e) => {
            this.webviewName = "FakeBook"
            this.changeWindow("assets/phone/webview/fb.html")
        });
 	}
 	changeWindow(window) {
 		//1 main view phone.changeWindow(
 		//2 concorde
 		//other webview
 		this.content.style.display="none";
 		this.contentmsg.style.display="none";
 		this.inputDiv.style.display="none";
 		this.webview.style.display = "none";
 		this.webview.src="";
 		switch (window) {
 			case 1:
 				this.name.innerText = "Pear phone"
 				this.content.style.display="block";
 				break;
 			case 2:
 				this.name.innerText = "Concord"
 				this.contentmsg.style.display="block";
 				this.inputDiv.style.display="block";
 				break;
 			default:
 				this.name.innerText = this.webviewName
 				this.webview.style.display = "block";
 				this.webview.style.width="100%";
 				this.webview.style.height="90%";
 				this.webview.style.border="0";
 				this.webview.src=window;
 				break;
 		}
 	}
 	addMessage(message){
 		this.messages.push(message);
 		let msg = document.createElement("div");
 		msg.className = "message";
 		let h2 = document.createElement("h2");
 		h2.className = "messageTitle";
 		h2.innerText = message.title;
 		let p;
 		let match = message.content.match(/:(\w+):/);
 		if(match){
 			p = document.createElement("img");
 			p.className = "messageImage";
 			p.src = "assets/concord_images/" + match[1] + '.jpg';
 		}else{
 			p = document.createElement("p");
 			p.className = "messageContent";
 			p.innerText = message.content;
 		}
 		msg.appendChild(h2);
 		msg.appendChild(p);
 		this.contentmsg.appendChild(msg);
 		this.contentmsg.scrollTop = this.contentmsg.scrollHeight;
 	}
 	sendMessage(title, content){
 		let message = {
 			title: player.name,
 			content: content
 		}
 		this.addMessage(message);
 		net.sendMessage(title, content);
 	}
 	keyPress(input){
 		if(event.key=='Enter'){
 			if(input.value!=''){
 				this.sendMessage(player.name, input.value);
 				input.value = '';
 				input.blur()
 			}		
 		}
 	}
 	changePosition(){
 		if(!document.getElementById("phoneContainer").contains(document.activeElement)){
 			if(this.position == 0){
 				document.getElementById("phoneContainer").className = "visible";
 				this.position = 1;
 			}else{
 				document.getElementById("phoneContainer").className = "hidden";
 				this.position = 0;
 			}
 		}
 	}
 }
--- a/public_html/js/render.js
+++ b/public_html/js/render.js
@ -1,84 +1,60 @@
 const imgPlayer = new Image();
 const imgBullet = new Image();
 const imgCar = new Image();
 const imgPnj = new Image();
 const imgPnj2 = new Image();
 const map = new Image();
 const map_night = new Image();
 const map2 = new Image();
 const orange_portal = new Image();
 const blue_portal = new Image();
 imgPlayer.src = "./assets/body.png";
 imgBullet.src = "./assets/bullet.png";
 imgCar.src = "./assets/car.png";
 imgPnj.src = "./assets/pnj.png";
 imgPnj2.src = "./assets/pnj1.png";
 map.src = "./assets/map/map_principale.png"
 map_night.src = "./assets/map/map_principale_nuit.png"
 map2.src = "./assets/map/map_secondaire.png";
 orange_portal.src = "./assets/orange_portal.webp";
 blue_portal.src = "./assets/blue_portal.webp";
 const mapImages = [map,map2];
 class Render {
-
+	constructor(idCanvas) {
-	constructor(id, mapsrc, map2src) {
+		let canvas = document.getElementById(idCanvas);
 		this.canvas = document.getElementById(id);
 		this.ctx = canvas.getContext("2d");
-		this.players = [];
+		this.ctx.imageSmoothingEnabled=false;//does not lerp pixels
 		this.bullets = [];
 		this.mapsrc=mapsrc;
 		this.map2src=map2src;
 		this.ReloadAff();
 		this.playerid=0;
 		this.map=0
 	}
-	SetPlayerId(id) {
+	RenderPlayer(p,isClient) {
-		this.playerid=id
+		if(p==null)
-	}
+			return;
 		let x=p.x
 		let y=p.y
-	AddPlayer(player) {
+		if(p.z==player.z)
 		this.players.push(player);
 	}
 	addBullet(bullet) {
 		this.bullets.push(bullet);
 	}
 	remBullet(bullet) {
 		for(let i=0;i<this.bullets.length;i++) {
 			if(bullet==this.bullets[i]) {
 				this.bullets.splice(i,1);
 			}
 		}
 	}
 	RemPlayer(id) {
 		for(let i=0;i<this.players.length;i++)
 		{
 			if(this.players[i].id==id)
 			{
 				this.players.splice(i,1);
 				break;
 			}
 		}
 	}
 	RenderPlayer(player) {
 		let x=player.x
 		let y=player.y
 		if(x>=2000 && y>=2000 && this.map==1) {
 			x=player.x-2000
 			y=player.y-2000
 		}
 		//this.map==1 && (x<2000 || y<2000)
 		if((this.map==1 && player.x>=2000 && player.y>=2000) || (this.map==0 && x<2000 && y <2000)) {
 			this.ctx.save();
 		    this.ctx.translate(x, y);
-		    this.ctx.rotate(player.angle);
+		    this.ctx.rotate(p.angle);
 		    this.ctx.drawImage(imgPlayer, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
 		    this.ctx.restore();
 			this.ctx.fillStyle = 'white';
 	        this.ctx.font="10pt arial";
-	        this.ctx.fillText(player.name,x-name.length*10/3,y-playerSize/1.8);
+	        this.ctx.fillText(p.name,x-p.name.length*10/3,y-playerSize/1.8);
-	        if(player.id==this.playerid) {
+	        if(isClient) {
 				this.ctx.fillStyle = 'red';
 			    this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, playerSize+10, 5);
 				this.ctx.fillStyle = '#7AFF33';
-			    this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, player.health*(playerSize+10)/defaulthealth, 5);
+			    this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, p.health*(playerSize+10)/defaulthealth, 5);
 	        }
 		}
 	}
-	RenderCar(x,y,angle) {
+	RenderCar(x,y,z,angle) {
-		if(this.map==0) {
+		if(z==player.z) {
 		    this.ctx.save();
 		    this.ctx.translate(x, y);
 		    this.ctx.rotate(angle);
@ -87,47 +63,87 @@ class Render {
 		}
 	}
-	RenderBullet(bullet) {
+	RenderBullet(x,y,z) {
-		let x = bullet.x
+		if(z==player.z)
-		let y = bullet.y
+	    {
 		if(this.map==1) {
 			x = x-2000
 			y = y-2000
 		}
 			this.ctx.save();
 	    	this.ctx.translate(x, y);
 	    	this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20);
 	    	this.ctx.restore();
 		}
 	}
 	RenderPnj(x, y, z, angle, moving)
 	{
 		if(z==player.z)
 		{
 			this.ctx.save();
 	    	this.ctx.translate(x, y);
 	    	this.ctx.rotate(angle);
 			if(moving == false || (new Date().getMilliseconds())%1000>=500){
 	    		this.ctx.drawImage(imgPnj, -30 / 2, -30 / 2, 30, 30);
 	    	}else{
 	    		this.ctx.drawImage(imgPnj2, -30 / 2, -30 / 2, 30, 30);
 	    	}
 	    	this.ctx.restore();
 		}
 	}
 	RenderPortal(x,y,orange)
 	{
 		this.ctx.save();
 		this.ctx.translate(x,y);
 		if(orange)
 			this.ctx.drawImage(orange_portal,0,0,portalSize,portalSize);
 		else
 			this.ctx.drawImage(blue_portal,0,0,portalSize,portalSize);
 		this.ctx.restore();
 	}
 	ReloadAff() {
-		const fond = new Image();
+		let background;
 		this.players.forEach((p) => {
 			if(p.id==this.playerid) {
 				//console.log(p)
 				if(p.x >= 2000 && p.y >=2000) {
 					this.map=1
 				} else {
 					this.map=0
 				}
 			}
 		})
-		if(this.map==0) {
+		if(player.z<=0)
-			fond.src = this.mapsrc;
+		{
 			let date = new Date();
 			if(date.getMinutes()%10>=5){
 				background = map;
 			}else{
-			fond.src = this.map2src;
+				background = map_night;
 			}
-		mapWidth = fond.width;
+		}
-		mapHeith = fond.height;
+		else
 		{
 			background=mapImages[player.z];
 		}
 		let mapWidth = background.width;
 		let mapHeight = background.height;
 		this.ctx.canvas.width = mapWidth;
-		this.ctx.canvas.height = mapHeith;
+		this.ctx.canvas.height = mapHeight;
-	    this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeith);
+	    this.ctx.drawImage(background, 0, 0, mapWidth, mapHeight);
-   		this.players.forEach((player) => {
+		this.RenderPlayer(player,true);
-   			this.RenderPlayer(player);
+		
        cars.forEach((car) => {
            this.RenderCar(car.x,car.y,car.angle+(car.drift>0?car.drift/150:0));
        });
   		players.forEach((player) => {
   			this.RenderPlayer(player,false);
   		})
-		this.bullets.forEach((bullet) => {
+		bullets.forEach((bullet) => {
-			this.RenderBullet(bullet);
+			this.RenderBullet(bullet.x,bullet.y,bullet.z);
 		});
 		PNJS.forEach((pnj)=>{
 			this.RenderPnj(pnj.x, pnj.y, pnj.z, (pnj.dir-1)*Math.PI/4, pnj.dir!=0);
 		})
 		if(affPortal)
 		{
 			portals.forEach((portal) => {
 				if(portal.in.z==player.z)
 					this.RenderPortal(portal.in.x,portal.in.y,true);
 				if(portal.out.z==player.z)
 					this.RenderPortal(portal.out.x,portal.out.y,false);
 			});
 		}
 	}
 }
--- a/public_html/js/sound.js
+++ b/public_html/js/sound.js
@ -1,24 +1,12 @@
 class Sound{
    constructor(url){
-        this.assetsUrl = url;
+        this.sound = new Audio(url);
        this.sound.type = "audio/mp3";
    }
-    loadSounds(){
+    play(){
-        this.shootSound = new Audio(this.assetsUrl + "shoot.mp3");
+        //this.sound.pause()
-        this.shootSound.type = "audio/mp3";
+        this.sound.currentTime=0;
-        this.driftsound = new Audio(this.assetsUrl + "drift.mp3");
+        this.sound.play()
        this.driftsound.type = "audio/mp3";
    }
    shoot(){
        this.shootSound.pause()
        this.shootSound.currentTime=0;
        this.shootSound.play()
    }
    drift(){
        this.driftsound.pause()
        this.driftsound.currentTime=0;
        this.driftsound.play()
    }
 }
--- a/server/server.js
+++ b/server/server.js
@ -121,6 +121,10 @@ function deletePlayer(socket){
  connections.delete(socket);
 }
 function recievemessage(msg, socket){
  broadcast(JSON.stringify(msg), socket.id);
 }
 function broadcast(message, exceptId = -1) {
  connections.forEach((socket) => {
    if (socket.readyState === WebSocket.OPEN && socket.id != exceptId) {
@ -155,6 +159,10 @@ wss.on('connection', (socket, req) => {
          died(message, socket);
          break;
        case "message":
          recievemessage(message, socket);
          break;
        default:
          break;
      }