Fin du cours du 15.12.2023

css/style.css

@@ -1,5 +1,5 @@
+/* Copyright © 2023 Entreprise SpaceTarders */
 canvas {
-    width: 50%;
+    border: 2px solid rgb(7, 18, 41);
-    border: 2px solid black;
     border-radius: 5px;
 }

css/styleindex.css

@@ -0,0 +1,40 @@
+/* Copyright © 2023 Entreprise SpaceTarders */
+html{
+    background-color: rgb(7, 18, 41);
+    cursor: crosshair;
+}
+main{
+    display: flex;
+    justify-content: center;
+}
+#title{
+    font-family: M42;
+    font-size:15px;
+    margin-left: 10px;
+    margin-top: 10px;
+    color: white;
+    display: flex;
+    justify-content: left;
+}
+
+#menu {
+    display: flex;
+    justify-content: center;
+    justify-content: space-between;
+}
+#menu button{
+    margin-top: 15px;
+    font-family: M42;
+    color: white;
+    font-size: 11px;
+    background-color: rgb(20, 20, 32); 
+    cursor: pointer;
+}
+#canvas {
+    border: 2px solid rgb(7, 18, 41);
+    border-radius: 5px;
+}
+@font-face {
+    font-family: M42;
+    src: url(/fonts/m42.TTF);
+  }

css/stylelogin.css

@@ -0,0 +1,50 @@
+/* Copyright © 2023 Entreprise SpaceTarders */
+html{
+    background-color: rgb(7, 18, 41);
+}
+img{
+    width: 10%;
+    margin-right: 30px;
+}
+.text{
+    font-size:8px;
+    font-family: M42;
+    color: white;
+}
+header p{
+    display: flex;
+    justify-content: center;
+}
+#title{
+    font-family: M42;
+    font-size:20px;
+    margin-left: 10px;
+    margin-top: 50px;
+    color: white;
+    display: flex;
+    justify-content: center;
+}
+#menu {
+    display: flex;
+    justify-content: center;
+    justify-content: space-between;
+}
+#menu button{
+    margin-top: 15px;
+    font-family: M42;
+    color: white;
+    font-size: 15px;
+    background-color: rgb(20, 20, 32); 
+}
+footer p{
+    position: fixed;
+    bottom: 0;
+}
+canvas {
+    border: 2px solid rgb(7, 18, 41);
+    border-radius: 5px;
+}
+@font-face {
+    font-family: M42;
+    src: url(/fonts/m42.TTF);
+  }

js/TEST_F.JS

@@ -0,0 +1,118 @@
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUEVVU0RPU0FDSEEiLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDI1Mzk4NjUsInN1YiI6ImFnZW50LXRva2VuIn0.QL4rSruHd8pjNczeZQ3S7gof7TRnwZKqQBvkojUXgmzRrWiDZVw65kt1UBns0zHAhZF-m-bvxfUBik01uIzc-_jSO63ZndquPFmv_UY3HBkVK7UKoSaxAp_NveJsE1TOpTotUChlMd1Sv7RuyeR9fso2eN3-mBEoE5ukWmGVDfnOYefuWORhisqIkh4ti3QpaV-obycZ4XGV2ukqkiNdHqR3MQJR99e2nCEZEsarNKTgm6mgn-qCCNv4xQUGwhNbD5_p-jPqQ088vuFCeZi8j6kf7-fmT5sysBxEA5nvNPDIEL1XMuzs7N66WpiP1uc7I1Ph164m2epV9vmEvzthCw";
+//décalage
+let offset = {
+    x: 2,
+    y: 2
+};
+let max = 40;
+let min = 35;
+let w = 1260;
+let h = 830;
+
+const canvas = new fabric.Canvas("canvas",{
+    width: w,
+    height: h,
+    backgroundColor:"rgb(7, 18, 41)",
+    renderOnAddRemove: false,
+    defaultCursor :'crosshair',
+    hoverCursor :'pointer'
+});
+canvas.renderAll();
+let planets = [];
+
+function getAgent() {
+    const settings = {
+        async: true,
+        crossDomain: true,
+        url: 'https://api.spacetraders.io/v2/my/agent',
+        method: 'GET',
+        headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${token}`
+        }
+    };
+    $.ajax(settings).done(function (reponse) {
+        let metaSystem = reponse.data.headquarters.split("-");
+        getSystem(metaSystem[0] + "-" + metaSystem[1]);
+    });
+}
+
+function getSystem(system) {
+    const settings = {
+        async: true,
+        crossDomain: true,
+        url: `https://api.spacetraders.io/v2/systems/${system}`,
+        method: 'GET',
+        headers: {
+            Accept: 'application/json'
+        }
+    };
+
+    $.ajax(settings).done(function (response) {
+        offsetOrbits(response.data.waypoints);
+        drawSystem(response.data.waypoints);
+    });
+}
+function offsetOrbits(waypoints){
+    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.orbitaldistance = {
+                x: x,
+                y: y
+            };
+            waypoint.rotation = 3;
+        }
+    });
+}
+function drawSystem(wayPoints) {
+    if(wayPoints) {
+        wayPoints.forEach(wayPoint => {
+            drawWaypoint(wayPoint);
+            //TestPlanetClicked(wayPoint);
+        });
+    }
+}
+function drawWaypoint(wayPoint) {
+    let shadow = new fabric.Shadow({
+        color: "white",
+        blur: 5,
+        offsetX: 0,
+        offsetY: 0,
+      });
+
+    fabric.Image.fromURL('http://127.0.0.1:5500/img/planets/planetproto.png', function(planet) {
+        //FABRICJS
+        planet.set({selectable: false});
+        planet.set({shadow: shadow});
+        //AJOUT DES PROPRIÉTÉS DES WAYPOINT SUR LES PLANETES
+        planet.set({left: wayPoint.x/offset.x + w/2});
+        planet.set({top: wayPoint.y/offset.y+ h/2});
+        planet.set({name: wayPoint.symbol});
+        planet.set({type: wayPoint.type});
+        canvas.add(planet);
+      });
+    planets.push(wayPoint);
+}
+function movePlanets() {
+    planets.forEach(waypoint => {
+        if(waypoint.rotation != 0){
+        }
+    });
+}
+getAgent();
+setTimeout(function animate() {
+    movePlanets();
+    canvas.renderAll();
+    setTimeout(animate, 1000);
+}, 10);
+
+canvas.on('mouse:up', function (e) {
+    if(e.target.shadow.color == "red"){
+        e.target.shadow.color = "white"
+    }
+    else{
+        e.target.shadow.color = "red"
+    }
+})

js/index.js

@@ -0,0 +1,6 @@
+const canvas = new fabric.Canvas("canvas",{
+    width: 500,
+    height: 500,
+    backgroundColor:"black"
+});
+canvas.renderAll();

js/main.js

@@ -1,9 +1,33 @@
-let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQU5OTk5VTEFYMTIyNSIsInZlcnNpb24iOiJ2Mi4xLjEiLCJyZXNldF9kYXRlIjoiMjAyMy0xMS0wNCIsImlhdCI6MTcwMDIyNDU5MSwic3ViIjoiYWdlbnQtdG9rZW4ifQ.r05mWtD5FjC4s6Td-ycmHdzL7C2s75lz3q7OBmWeCqUUZ1ejPsRGQRWJDPmIh1kAqO4D9FFs3GCTPZUn1KsnQ-xmDvsIi_mqC1gJV-Q0irI7gwfsGXbfLaVCXo-Q98C_QWRh-O_xkrbhJkCcvnwdEhZm7FnZ3PL4XXKrG0XNa98JrnmG0qlz0cv8V9Q0sSIwXZbvA9BrhuV8PK7_YzPc6LZuNqgPeKiX_B-tSIHHl6Sr1EzuydnczmuS-xKQnbhmcqnpaCXzQmJr7tA8KLgu70KqpPCvA8AI6PLmBlvPWtZ20RdzezqlBh6S9SrBzQ9R0zr_9RyJxq28ws2jnHpVPw";
+//Copyright © 2023 Entreprise SpaceTarders
+//variables de rotation
+let msPrev = window.performance.now()
+const fps = 60
+const msPerFrame = 1000 / fps
+let frames = 0
+//variables de tailles de planète
+let xxl = 20
+let xl = 15
+let l = 10
+let m = 5
+let s = 4
+let xs = 3 
+let max = 40;
+let min = 35;
+//jeton d'agent
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUFJSUk9VVCIsInZlcnNpb24iOiJ2Mi4xLjQiLCJyZXNldF9kYXRlIjoiMjAyMy0xMi0wMiIsImlhdCI6MTcwMjAzODIwOCwic3ViIjoiYWdlbnQtdG9rZW4ifQ.iCm_0x9shooAE7028tBHw-p8NAXf8_EWBZl-wnqIpMIIRCe8A6rzEkaKnX-1OORBh31YQTekSOLdP5_FnA0AEP2KP00YzGEZWQBxSTndkpivtcS6X-arc4F6yJGvcLfT1m3ZD47LGylTELR3I-sXomX2Va8_13oN6kdDJyXpVWFe5OIC01bP_cwHpjztUTO-8ASPJ_8cLZH6GTSAzy5ozF1teTEdfq93s2i9oTPhynQKogdzaXAUIkAXv7hYv5XUbevorRaCfTl52CU7WK5__3org5ardHuITmbl0QyHYIWtkbpcZLcawfEGG0EK66iqwefdXIkTeWC3T1b_ERShMw";
+//décalage
 let offset = {
-    x: 10,
+    x: 2,
-    y: 10
+    y: 2
 };
-
+//Instanciation du canevas
+const canvas = document.getElementById("canvas");
+canvas.style="width:100%;height:100vh;"
+let w = canvas.width = canvas.offsetWidth;
+let h = canvas.height = canvas.offsetHeight; 
+const ctx = canvas.getContext("2d");
+let wayPoints = null
+//Initialisation du jeu
 function initGame() {
     const settings = {
         async: true,
@@ -22,7 +46,7 @@ function initGame() {
         console.log(response);
     });
 }
-
+//Récuperer l'agent
 function getAgent() {
     const settings = {
         async: true,
@@ -49,12 +73,12 @@ function getAgent() {
         getSystem(metaSystem[0] + "-" + metaSystem[1]);
     });
 }
-
+//Récuperer les planètes
 function getWayPoint(wayPoint) {
     const settings = {
         async: true,
         crossDomain: true,
-        url: `https://api.spacetraders.io/v2/systems/systemSymbol/waypoints/waypointSymbol`,
+        url: `https://api.spacetraders.io/v2/systems/systemSymbol/waypoints/${wayPoint}`,
         method: 'GET',
         headers: {
             Accept: 'application/json'
@@ -65,7 +89,7 @@ function getWayPoint(wayPoint) {
         console.log(response);
     });
 };
-
+//Récuperer le système
 function getSystem(system) {
     const settings = {
         async: true,
@@ -78,36 +102,125 @@ function getSystem(system) {
     };
 
     $.ajax(settings).done(function (response) {
-        drawSystem(response.data.waypoints);
+        response.data.waypoints.forEach((waypoint) => {
+            waypoint.rotation = 0
+            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;
+            }
+        })
+        wayPoints = response.data.waypoints;
     });
 }
+// function drawBackground(){
+//     // Create gradient
+//     var grd = ctx.createRadialGradient(650, 450, 5, 600, 450, 550);
+//     grd.addColorStop(0, "rgb(15, 38, 88)");
+//     grd.addColorStop(1, "rgb(13, 7, 46)");
+//     // Fill with gradient
+//     ctx.fillStyle = grd;
+//     ctx.fillRect(0, 0, w, h);
+//     ctx.clearRect(0, 0, w, h);
+// }
 
-function drawSystem(wayPoints) {
+//dessiner le système
-    const canvas = document.getElementById("canvas");
+function drawSystem() {
-    let w = canvas.width;
+    window.requestAnimationFrame(drawSystem)
-    let h = canvas.height; 
+    ctx.fillStyle = "rgb(0,0,0)"
-    const ctx = canvas.getContext("2d");
+    ctx.fillRect(0, 0, w, h);
+    const msNow = window.performance.now()
+    const msPassed = msNow - msPrev
+  
+    if (msPassed < msPerFrame) return
+  
+    const excessTime = msPassed % msPerFrame
+    msPrev = msNow - excessTime
+  
+    frames++
+    if(wayPoints) {
     wayPoints.forEach(wayPoint => {
             switch (wayPoint.type) {
+                //PLANÈTE
                 case "PLANET":
-                drawWaypoint(wayPoint, ctx, w/2, h/2, 'green');
+                    //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": 
+                    drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(255, 174, 0)', l); //orange clair
                     break;
+                //LUNE
+                case "MOON":
+                    drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 255, 255)', xs) //blanc
+                    break;
+                //STATION EN ORBITE
+                case "ORBITAL_STATION":
+                    drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(0, 153, 255)', 4, s) //bleu clair
+                    break;
+                //PORTAIL
+                case "JUMP_GATE":
+                    wayPoint.rotation += Math.PI / 50
+                    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, 'blue');
+                    wayPoint.rotation += Math.PI / 200
+                    drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(163, 163, 163)', 5, m) //bleu clair
                     break;
-            case "GAS_GIANT": 
+                case "ASTEROID_FIELD":
-                drawWaypoint(wayPoint, ctx, w/2, h/2, 'red');
+                case "ASTEROID_BASE":
+                case "ENGINEERED_ASTEROID":  
+                    drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 255)', m) //jaune
+                    break;
+                //NEBULEUSE
+                case "NEBULA": 
+                    drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', m) //violet fluo
+                    break; 
+                //CHAMP DE DÉBRIS
+                case "DEBRIS_FIELD":
+                    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":    
+                    drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb()') //
+                    break;
+                //STATION ESSENCE
+                case "FUEL_STATION":
+                    drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 0)', 4, m) //rouge
                     break;    
             }
-       
         });
     }
-
+}
-function drawWaypoint(wayPoint, ctx, w, h, color) {
+//dessiner un cercle
+function drawWaypointCircle(wayPoint, ctx, w, h, color, radius) {
     ctx.beginPath();
     ctx.fillStyle = color;
-    ctx.arc(wayPoint.x/offset.x + w, wayPoint.y/offset.y + h, 1, 0, 2 * Math.PI);
+    ctx.arc(wayPoint.x/offset.x + w, wayPoint.y/offset.y + h, radius, 0, 2 * Math.PI);
     ctx.fill()
 }
+//dessiner une forme polygonale
+function drawWaypointPolygone(wayPoint, ctx, w, h, color, nbCote, radius){
+    let numberOfSides = nbCote;
+   	let x = wayPoint.x/offset.x + w;
+    let y = wayPoint.y/offset.y + h;
+	let angle = 2*Math.PI/numberOfSides;
+    ctx.beginPath();
+    ctx.fillStyle = color;
+    ctx.moveTo (x +  radius*Math.cos(wayPoint.rotation + 0), y +  radius*Math.sin(wayPoint.rotation + 0));          
+ 		for (let i = 0; i < numberOfSides; i++) {
+			 ctx.lineTo (x + radius*Math.cos(wayPoint.rotation + (i * angle)), y + radius*Math.sin(wayPoint.rotation +(i * angle)));
+		}
+ 	ctx.fill();
+}
 
+drawSystem();
 getAgent();

templates/index.html

@@ -1,19 +1,32 @@
+<!-- Copyright © 2023 Entreprise SpaceTarders -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../css/style.css">
+    <link rel="stylesheet" href="../css/styleindex.css">
+    <link rel="icon" type="image/png" href="/img/spaceships/spaceship.png">
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
-    <script src="../js/main.js"></script>
+    <script src ="/js/fabric.min.js" defer></script>
-    <title>Space traders</title>
+    <script src="/js/TEST_F.JS" defer></script>
+    <title>Space Traders : by SKAMKRAFT</title>
 </head>
 <body>
+    <header>
+        <div id="title">SpaceTraders</div>
+    </header>
     <main class="main-window">
-        <input id="token" type="text">
         <br>
         <canvas id="canvas"></canvas>
     </main>
+    <footer>
+        <div id="menu">
+            <button id="agentbutton">Agent</button>
+            <button id="factionbutton">Faction</button>
+            <button id="shipbutton">Ships</button>
+            <button id="contractbutton">Contracts</button>
+        </div>
+    </footer>
 </body>
 </html>

templates/login.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/stylelogin.css">
+    <title>Login</title>
+</head>
+<body>
+    <header>
+        <div id="title">
+            <img src="/img/logo/logoblancnotext.png" alt="logo">
+            <h1>SpaceTraders</h1>
+        </div>
+        <p class="text">API loaded with SKAMKRAFT</p>
+    </header>
+    <main>
+
+    </main>
+    <footer>
+        <p class="text">Copyright 2023 Entreprise SKAMKRAFT</p>
+    </footer>
+</body>
+</html>

token

@@ -1 +1 @@
-eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQU5OTk5VTEFYMTIyNSIsInZlcnNpb24iOiJ2Mi4xLjEiLCJyZXNldF9kYXRlIjoiMjAyMy0xMS0wNCIsImlhdCI6MTcwMDIyNDU5MSwic3ViIjoiYWdlbnQtdG9rZW4ifQ.r05mWtD5FjC4s6Td-ycmHdzL7C2s75lz3q7OBmWeCqUUZ1ejPsRGQRWJDPmIh1kAqO4D9FFs3GCTPZUn1KsnQ-xmDvsIi_mqC1gJV-Q0irI7gwfsGXbfLaVCXo-Q98C_QWRh-O_xkrbhJkCcvnwdEhZm7FnZ3PL4XXKrG0XNa98JrnmG0qlz0cv8V9Q0sSIwXZbvA9BrhuV8PK7_YzPc6LZuNqgPeKiX_B-tSIHHl6Sr1EzuydnczmuS-xKQnbhmcqnpaCXzQmJr7tA8KLgu70KqpPCvA8AI6PLmBlvPWtZ20RdzezqlBh6S9SrBzQ9R0zr_9RyJxq28ws2jnHpVPw
+eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUEVVU0RPU0FDSEEiLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDI1Mzk4NjUsInN1YiI6ImFnZW50LXRva2VuIn0.QL4rSruHd8pjNczeZQ3S7gof7TRnwZKqQBvkojUXgmzRrWiDZVw65kt1UBns0zHAhZF-m-bvxfUBik01uIzc-_jSO63ZndquPFmv_UY3HBkVK7UKoSaxAp_NveJsE1TOpTotUChlMd1Sv7RuyeR9fso2eN3-mBEoE5ukWmGVDfnOYefuWORhisqIkh4ti3QpaV-obycZ4XGV2ukqkiNdHqR3MQJR99e2nCEZEsarNKTgm6mgn-qCCNv4xQUGwhNbD5_p-jPqQ088vuFCeZi8j6kf7-fmT5sysBxEA5nvNPDIEL1XMuzs7N66WpiP1uc7I1Ph164m2epV9vmEvzthCw