Merge branch 'dev' of https://git.etud.insa-toulouse.fr/rebillar/GrandTabernacleAutoVI into dev

class.js

@@ -1,7 +1,8 @@
 const mapWidth = 210.;
 const mapHeith = 100.;
-const playerSize = 10.;
-
+const playerSize = 50.;
+const playerSpeed=5.;
+const halfSqrtTwo=0.70710678118;
 class Player
 {
     constructor (id,x,y,name)
@@ -34,7 +35,60 @@ class Player
         }
     }
 
+    retrieveServerInfo(id,x,y,dir)
+    {
+        if(this.id==id)
+        {
+            this.x=x;
+            this.y=y;
+            this.dir=dir;
+            if(dir!=0)
+                this.visibleDir=dir;
+        }
+    }
 
+    update(squares,circles)//update position
+    {
+        if(this.dir==0)
+            return;
+
+        let dx,dy;
+        switch(this.dir)
+        {
+            case 1: dx=0.;dy=-playerSpeed;break;
+            case 2: dx=halfSqrtTwo*playerSpeed;dy=-halfSqrtTwo*playerSpeed;break;
+            case 3: dx=1.;dy=0.;break;
+            case 4: dx=halfSqrtTwo*playerSpeed;dy=halfSqrtTwo*playerSpeed;break;
+            case 5: dx=0.;dy=playerSpeed;break;
+            case 6: dx=-halfSqrtTwo*playerSpeed;dy=halfSqrtTwo*playerSpeed;break;
+            case 7: dx=-playerSpeed;dy=0.;break;
+            case 8: dx=-halfSqrtTwo*playerSpeed;dy=-halfSqrtTwo*playerSpeed;break;
+            default:
+        }
+        this.x += dx;
+        this.y += dy;
+
+        for(let square in squares)
+        {
+            if(square.collide(this))
+            {
+                this.x-=dx;
+                this.y-=dy;
+                this.dir=0;
+                return;
+            }
+        }
+        for(let circle in circles)
+        {
+            if(circle.collide(this))
+            {
+                this.x-=dx;
+                this.y-=dy;
+                this.dir=0;
+                return;
+            }
+        }
+    }
 
     get angle()
     {

game.js

@@ -1,9 +1,27 @@
+Renderer = new Render("canvas");
+
+let rubiks = new Player(1, 100, 50, "rubiks");
+let atsuyo = new Player(2, 500, 70, "atsuyo");
+let vincent = new Player(3, 600, 70, "atsuyo");
+let migliore = new Player(4, 700, 70, "atsuyo");
+let leroux = new Player(5, 200, 30, "atsuyo");
+let lele = new Player(6, 700, 700, "atsuyo");
+
+rubiks.visibleDir=3;
+
+Renderer.AddPlayer(rubiks);
+Renderer.AddPlayer(atsuyo);
+Renderer.AddPlayer(vincent);
+Renderer.AddPlayer(migliore);
+Renderer.AddPlayer(leroux);
+Renderer.AddPlayer(lele);
+
+
 setInterval(game);
 
 function game() {
-	Renderer = new Render("canvas")
-
-	let rubiks = new Player(1, 100, 50, "rubiks")
-	console.log(rubiks)
-	Renderer.AddPlayer(rubiks)
+	rubiks.visibleDir=rubiks.visibleDir+0.03;
+	atsuyo.visibleDir=atsuyo.visibleDir-0.1;
+	migliore.x=migliore.x-0.1;
+	Renderer.ReloadAff();
 }

render.js

@@ -1,29 +1,31 @@
 class Render {
 	constructor(id) {
-		this.canvas = document.getElementById(id)
-		this.ctx = canvas.getContext("2d")
-		this.players = []
-		this.ReloadAff()
+		this.canvas = document.getElementById(id);
+		this.ctx = canvas.getContext("2d");
+		this.players = [];
+		this.ReloadAff();
 	}
 
-	AddPlayer(id, pseudo, x, y, angle) {
-		this.players[id] = (id, pseudo, x, y, angle)
+	AddPlayer(player) {
+		this.players[player.id] = player;
+	}
+
+	RenderPlayer(player) {
+		const img = new Image();
+		img.src = "./assets/body.png";
+	    this.ctx.save();
+	    this.ctx.translate(player.x, player.y);
+	    this.ctx.rotate(player.angle);
+	    this.ctx.drawImage(img, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
+	    this.ctx.restore();
 	}
 
 	ReloadAff() {
-		this.ctx.fillStyle = "red"
+		this.ctx.fillStyle = "red";
    		this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
 
-		/*this.ctx.stokeStyle = "black"
-	    this.ctx.lineWidth   = 1;
-		ctx.beginPath();
-		ctx.moveTo(point1[0], point1[1]);
-		ctx.lineTo(point2[0], point2[1]);
-		ctx.lineTo(point3[0], point3[1]);
-		ctx.lineTo(point1[0], point1[1]);
-		ctx.stroke()
-		ctx.fill();*/
-		this.ctx.closePath();
-		this.ctx
+   		this.players.forEach((player) => {
+   			this.RenderPlayer(player);
+   		})
 	}
 }