Calcul de polygones pour créer des formes pour les planètes

js/main.js

@@ -1,9 +1,8 @@
-let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQU5OTk5VTEFYMTIyNSIsInZlcnNpb24iOiJ2Mi4xLjEiLCJyZXNldF9kYXRlIjoiMjAyMy0xMS0wNCIsImlhdCI6MTcwMDIyNDU5MSwic3ViIjoiYWdlbnQtdG9rZW4ifQ.r05mWtD5FjC4s6Td-ycmHdzL7C2s75lz3q7OBmWeCqUUZ1ejPsRGQRWJDPmIh1kAqO4D9FFs3GCTPZUn1KsnQ-xmDvsIi_mqC1gJV-Q0irI7gwfsGXbfLaVCXo-Q98C_QWRh-O_xkrbhJkCcvnwdEhZm7FnZ3PL4XXKrG0XNa98JrnmG0qlz0cv8V9Q0sSIwXZbvA9BrhuV8PK7_YzPc6LZuNqgPeKiX_B-tSIHHl6Sr1EzuydnczmuS-xKQnbhmcqnpaCXzQmJr7tA8KLgu70KqpPCvA8AI6PLmBlvPWtZ20RdzezqlBh6S9SrBzQ9R0zr_9RyJxq28ws2jnHpVPw";
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQk9VRkZPTjM4IiwidmVyc2lvbiI6InYyLjEuMiIsInJlc2V0X2RhdGUiOiIyMDIzLTExLTE4IiwiaWF0IjoxNzAwODI5NjE2LCJzdWIiOiJhZ2VudC10b2tlbiJ9.Oh-ecWSm0hOcSHfsngFdPN6C20OkHzqIfhOS3fSb2NXIy6v3ZqlN1C6BDVbz6080FaYv3zcmPVXwpa7igfqC05iVGNvcP3XitzcrmtUlxNUd2g1ohndSir8RduI0qso9ZSNOYaMGm7HEp4lH7OVU7cr45Msx92SinpjFi802X0CGmZtT5eli1szHcrol6Lw6KgN_rBJ-TmJayLylpDVL5I7koxsXLj8IhWTryExF4euiTIS_flDSiEpomPA3iWK-ytyjAj8URaLm9vAZQa-IxjuznS2N5F6WM0Wzi1l6JW47k8MM13spKwXLqAWhTRDoo-jdjLmH8faMPDgCxO3yfw";
 let offset = {
     x: 2,
     y: 2
 };
-
 function initGame() {
     const settings = {
         async: true,
@@ -77,6 +76,7 @@ function getSystem(system) {
         }
     };
     
+      
     $.ajax(settings).done(function (response) {
         drawSystem(response.data.waypoints);
     });
@@ -87,78 +87,101 @@ function drawSystem(wayPoints) {
     canvas.style="width:100%;height:100vh;"
     let w = canvas.width = canvas.offsetWidth;
     let h = canvas.height = canvas.offsetHeight; 
+    let xxl = 20
+    let xl = 15
+    let l = 10
+    let m = 5
+    let s = 4
+    let xs = 3 
+    let max = 40;
+    let min = 35;
     const ctx = canvas.getContext("2d");
     wayPoints.forEach(wayPoint => {
+        if (wayPoint.orbits) {
+            let x = Math.floor(Math.random() * max - Math.random() * max);
+            let y =  Math.floor(Math.random() * max - Math.random() * max);
+            wayPoint.x += x > 0 ? x + min : x - min;
+            wayPoint.y += y > 0 ? y + min : y - min;
+        }
         switch (wayPoint.type) {
             //PLANÈTE
             case "PLANET":
-                drawWaypoint(wayPoint, ctx, w/2, h/2, 'rgb(6, 218, 52)'); //vert clair
+                //QG
+                if(wayPoint.x/offset.x + w  == 0 && wayPoint.y/offset.y + h == 0){
+                    drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(255, 255, 0)', xxl); //jaune clair
+                }
+                else{
+                    drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(6, 218, 52)', m); //vert clair
+                }
                 break;
             //PLANÈTE GAZEUSE
             case "GAS_GIANT": 
-                drawWaypoint(wayPoint, ctx, w/2, h/2, 'rgb(255, 174, 0)'); //orange clair
+                drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(255, 174, 0)', l); //orange clair
                 break;
             //LUNE
             case "MOON":
-                drawWaypoint(wayPoint,ctx, w/2, h/2, 'rgb(255, 255, 255)') //blanc
+                drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 255, 255)', xs) //blanc
                 break;
             //STATION EN ORBITE
             case "ORBITAL_STATION":
-                drawWaypoint(wayPoint,ctx, w/2, h/2, 'rgb(0, 153, 255)') //bleu clair
+                drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(0, 153, 255)', 4, s) //bleu clair
                 break;
             //PORTAIL
             case "JUMP_GATE":
-                drawWaypoint(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 255)') //rose fluo
+                drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', 5, xl) //violet
                 break;
             //ASTÉROÏDE
             case "ASTEROID":
-                drawWaypoint(wayPoint,ctx, w/2, h/2, 'rgb(255, 196, 0)') //jaune
+                drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(163, 163, 163)', 5, m) //bleu clair
                 break;
             case "ASTEROID_FIELD":
             case "ASTEROID_BASE":
             case "ENGINEERED_ASTEROID":     
-                drawWaypoint(wayPoint,ctx, w/2, h/2, 'rgb(255, 196, 0)') //jaune
+                drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 255)', m) //jaune
                 break;
             //NEBULEUSE
             case "NEBULA": 
-                drawWaypoint(wayPoint,ctx, w/2, h/2, 'rgb(119, 0, 255)') //violet fluo
+                drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', m) //violet fluo
                 break; 
             //CHAMP DE DÉBRIS
             case "DEBRIS_FIELD":
-                drawWaypoint(wayPoint,ctx, w/2, h/2, 'rgb(107, 106, 143)') //gris/bleu 
+                drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(107, 106, 143)', m) //gris/bleu 
                 break;
             //PUIT DE GRAVITÉ
             case "GRAVITY_WELL":
             case "ARTIFICIAL_GRAVITY_WELL":    
-                drawWaypoint(wayPoint,ctx, w/2, h/2, 'rgb()') //
+                drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb()') //
                 break;
             //STATION ESSENCE
             case "FUEL_STATION":
-                drawWaypoint(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 0)') //rouge
+                drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 0)', 4, m) //rouge
                 break;    
         }
     });
 }
-
+function drawWaypointCircle(wayPoint, ctx, w, h, color, radius) {
-function drawWaypoint(wayPoint, ctx, w, h, color) {
     ctx.beginPath();
     ctx.fillStyle = color;
-    ctx.arc(wayPoint.x/offset.x + w, wayPoint.y/offset.y + h, 3, 0, 2 * Math.PI);
+    ctx.arc(wayPoint.x/offset.x + w, wayPoint.y/offset.y + h, radius, 0, 2 * Math.PI);
     ctx.fill()
 }
-// function drawWaypointPentagon(wayPoint, ctx, w, h, color){
+function drawWaypointPolygone(wayPoint, ctx, w, h, color, nbCote, radius){
-//     var numberOfSides = 5;
+    let numberOfSides = nbCote;
-//     var radius=100;
+   	let x = wayPoint.x/offset.x + w;
-//     var x = 125;
+    let y = wayPoint.y/offset.y + h;
-//     var y = 125;
+	let angle = 2*Math.PI/numberOfSides;
-//     var angle = 2*Math.PI/numberOfSides;
+    ctx.beginPath();
-//     ctx.beginPath();
+    ctx.fillStyle = color;
-//     ctx.translate(x, y);
+    ctx.moveTo (x +  radius*Math.cos(0), y +  radius*Math.sin(0));          
-//     ctx.moveTo(radius, 0);          
+ 		for (let i = 1; i <= numberOfSides; i++) {
-//     for (var i=1; i<=numberOfSides; i++) {
+			 ctx.lineTo (x + radius*Math.cos(i * angle), y + radius*Math.sin(i * angle));
-//             ctx.lineTo(radius*Math.cos(i * angle), radius*Math.sin(i * angle));
+		}
+ 	ctx.fill();
+}
+// function rotationAnimation(ctx){
+//     while(true){
+//         ctx.rotate(80*Math.PI /180)
+
 //     }
-//     ctx.stroke();
 // }
-
 getAgent();

token

@@ -1 +1 @@
-eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQU5OTk5VTEFYMTIyNSIsInZlcnNpb24iOiJ2Mi4xLjEiLCJyZXNldF9kYXRlIjoiMjAyMy0xMS0wNCIsImlhdCI6MTcwMDIyNDU5MSwic3ViIjoiYWdlbnQtdG9rZW4ifQ.r05mWtD5FjC4s6Td-ycmHdzL7C2s75lz3q7OBmWeCqUUZ1ejPsRGQRWJDPmIh1kAqO4D9FFs3GCTPZUn1KsnQ-xmDvsIi_mqC1gJV-Q0irI7gwfsGXbfLaVCXo-Q98C_QWRh-O_xkrbhJkCcvnwdEhZm7FnZ3PL4XXKrG0XNa98JrnmG0qlz0cv8V9Q0sSIwXZbvA9BrhuV8PK7_YzPc6LZuNqgPeKiX_B-tSIHHl6Sr1EzuydnczmuS-xKQnbhmcqnpaCXzQmJr7tA8KLgu70KqpPCvA8AI6PLmBlvPWtZ20RdzezqlBh6S9SrBzQ9R0zr_9RyJxq28ws2jnHpVPw
+eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQk9VRkZPTjM4IiwidmVyc2lvbiI6InYyLjEuMiIsInJlc2V0X2RhdGUiOiIyMDIzLTExLTE4IiwiaWF0IjoxNzAwODI5NjE2LCJzdWIiOiJhZ2VudC10b2tlbiJ9.Oh-ecWSm0hOcSHfsngFdPN6C20OkHzqIfhOS3fSb2NXIy6v3ZqlN1C6BDVbz6080FaYv3zcmPVXwpa7igfqC05iVGNvcP3XitzcrmtUlxNUd2g1ohndSir8RduI0qso9ZSNOYaMGm7HEp4lH7OVU7cr45Msx92SinpjFi802X0CGmZtT5eli1szHcrol6Lw6KgN_rBJ-TmJayLylpDVL5I7koxsXLj8IhWTryExF4euiTIS_flDSiEpomPA3iWK-ytyjAj8URaLm9vAZQa-IxjuznS2N5F6WM0Wzi1l6JW47k8MM13spKwXLqAWhTRDoo-jdjLmH8faMPDgCxO3yfw