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,59 +1,50 @@
-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=standStill
-                   //1=North
-                   //2=North-East
-                   //3=East
-                   //4=South-East
-                   //5=South
-                   //6=South-West
-                   //7=West
-                   //8=North-West
+        this.dir=dir;//0=stand Still
+                     //1=North
+                     //2=North-East
+                     //3=East
+                     //4=South-East
+                     //5=South
+                     //6=South-West
+                     //7=West
+                     //8=North-West
        this.ammo=10;
        this.health=defaulthealth;
        this.kill=0;
        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=10;
+            this.health=defaulthealth;
+
+            net.died(this.id,killerId);
        }
    }

-    /*retrieveServerInfo(id,x,y,dir)
-    {
-        if(this.id==id)
-        {
-            this.x=x;
-            this.y=y;
-            this.dir=dir;
-            if(dir!=0)
-                this.visibleDir=dir;
-        }
-    }*/
-
    changeDirection(newDirection){
        this.dir = newDirection;
        if(this.dir!=0){
@ -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);
+            this.deleted=true;
+            return;
+        }
+        squares.forEach((square) => {
+            if(square.collide(this.x,this.y,this.z))
            {
-                player.takeDamage(1,this.parentId,network);
                this.deleted=true;
                return;
            }
-
-            squares.forEach((square) => {
-                if(square.collide(this))
-                {
-                    this.deleted=true;
-                    return;
-                }
-            });
-
-            circles.forEach((circle) => {
-                if(circle.collide(this))
-                {
-                    this.deleted=true;
-                    return;
-                }
-            });
-        }
+        });
+        circles.forEach((circle) => {
+            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()
-            this.drift=300;
+            driftSound.play()
+            this.drift=1000;
        }
-        return collide
+        return collide;
    }

-    Update()
+    Update(dt)
    {
-        if(this.tick==0) {
-            if(new Date().getSeconds()%20==this.spawn) {
-                this.tick=1
-            }
+        if(this.tick==0 && (new Date()).getSeconds()%20==this.spawn) {
+                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--
-        } else {  
-            this.Renderer.RenderCar(this.x,this.y, this.angle)
+            this.drift-=dt;
+        }else{
+            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() {
-    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 dt = 0;
 let currentTime = new Date();
 function game() {
-	if(playerId==null)
-	{
-		if (Net.playerId!=null)
+	if(player==null)
+		return;
+
+	player.update(squares, circles, dt);
+	for (let i = 0;i<players.length; i++) {
+		players[i].update(squares, circles, dt);
+	}
+
+	cars.forEach((c) => {
+		c.Update();
+		if(c.collide(player.x,player.y,player.z))
 		{
-			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);
+			net.died(player.id,-1);
+			player.z=-1;
+			player.deaths++;
+			players[0].kill++;
+			player.health=10;
 		}
-	}
-	else
-	{
-		update();
-		addPlayers();
-		remPlayers();
-		addBullets();
-		updateKills();
-		player.update(squares, circles, dt);
-		for (var i = players.length - 1; i >= 0; i--) {
-			players[i].update(squares, circles, dt);
-		}
-		Renderer.ReloadAff();
-		cars.forEach((c) => {
-			c.Update();
-			if(c.collide(player.x,player.y))
-			{
-				Net.died(player.id,-1);
-				player.x=-50;
-				player.deaths++;
-				player.health=10;
-			}
-		});
-		updateBullets(dt);
-		LB.ReloadAff(players, player);
-	}
+	});
+
+	PNJS.forEach((pnj)=>{
+		pnj.update(dt);
+	})
+
+	maps.forEach((m) => {m.update();});
+	
+	updateBullets(dt);
+	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.mouseY = 0
-
-        this.network = net
-
-        // Event listener pour la position de la souris
-        
-        this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
+        this.canvas = document.getElementById(idCanvas);

        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 dy = this.mouseY-this.player.y;
+            let bounds = this.canvas.getBoundingClientRect();
+
+            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);
-            this.renderer.addBullet(b);
-            this.network.newBullet(b.x,b.y,b.dx,b.dy,b.parentId);
+            let b = new Bullet(player.x,player.y,player.z,dx/norm,dy/norm,player.id);
+            bullets.push(b);
+            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);
-            this.network.update(this.player);
+            player.changeDirection(this.dir);
+            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) {
-		this.canvas = document.getElementById(id);
+	constructor(idCanvas) {
+		this.canvas = document.getElementById(idCanvas);
 		this.ctx = this.canvas.getContext("2d");
 		this.nbjoueur=0
+        this.px=10;
+        this.py=10;
 	}

-	ReloadAff(players, player) {
-		this.px=10
-		this.py=10
-		this.players=[]
+	ReloadAff() {
+		let LBplayers=[];
 		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.nbjoueur=0
+	    this.ctx.fillRect(this.px, this.py, this.px+240, this.py+100+LBplayers.length*20);
+	    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--) {
-					if(data.data.players[i].id==this.playerId)
-						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);
+				for (let i = 0; i<data.data.players.length; i++) {
+					let p = data.data.players[i];
+					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":
+
+				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
-		let tmp = this.playersToAdd;
-		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;
+	sendMessage(title, content){
+		this.socket.send(JSON.stringify({type: "message", data: {title: title, content: content}}));
 	}
 }
--- 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 = [];
-let circles = [];
-
-for (var i = objects.squares.length - 1; i >= 0; i--) {
+for (let i=0; i<objects.squares.length;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(id, mapsrc, map2src) {
-		this.canvas = document.getElementById(id);
+	constructor(idCanvas) {
+		let canvas = document.getElementById(idCanvas);
 		this.ctx = canvas.getContext("2d");
-		this.players = [];
-		this.bullets = [];
-		this.mapsrc=mapsrc;
-		this.map2src=map2src;
-		this.ReloadAff();
-		this.playerid=0;
-		this.map=0
+		this.ctx.imageSmoothingEnabled=false;//does not lerp pixels
 	}

-	SetPlayerId(id) {
-		this.playerid=id
-	}
+	RenderPlayer(p,isClient) {
+		if(p==null)
+			return;
+		let x=p.x
+		let y=p.y
 		
-	AddPlayer(player) {
-		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(p.z==player.z)
 		{
-			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);
-	        if(player.id==this.playerid) {
+	        this.ctx.fillText(p.name,x-p.name.length*10/3,y-playerSize/1.8);
+	        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) {
-		if(this.map==0) {
+	RenderCar(x,y,z,angle) {
+		if(z==player.z) {
 		    this.ctx.save();
 		    this.ctx.translate(x, y);
 		    this.ctx.rotate(angle);
@ -87,47 +63,87 @@ class Render {
 		}
 	}

-	RenderBullet(bullet) {
-		let x = bullet.x
-		let y = bullet.y
-		if(this.map==1) {
-			x = x-2000
-			y = y-2000
+	RenderBullet(x,y,z) {
+		if(z==player.z)
+	    {
+			this.ctx.save();
+	    	this.ctx.translate(x, y);
+	    	this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20);
+	    	this.ctx.restore();
 		}
-	    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();
-		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
-				}
-			}
-		})
+		let background;

-		if(this.map==0) {
-			fond.src = this.mapsrc;
-		} else {
-			fond.src = this.map2src;
+		if(player.z<=0)
+		{
+			let date = new Date();
+			if(date.getMinutes()%10>=5){
+				background = map;
+			}else{
+				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.drawImage(fond, 0, 0, mapWidth, mapHeith);
-   		this.players.forEach((player) => {
-   			this.RenderPlayer(player);
+		this.ctx.canvas.height = mapHeight;
+	    this.ctx.drawImage(background, 0, 0, mapWidth, mapHeight);
+		this.RenderPlayer(player,true);
+		
+        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) => {
-			this.RenderBullet(bullet);
+		bullets.forEach((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(){
-        this.shootSound = new Audio(this.assetsUrl + "shoot.mp3");
-        this.shootSound.type = "audio/mp3";
-        this.driftsound = new Audio(this.assetsUrl + "drift.mp3");
-        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()
+    play(){
+        //this.sound.pause()
+        this.sound.currentTime=0;
+        this.sound.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;
      }