Ajouts sur planète: test de clic, ombre changeante entre rouge et blanc, propriétés des waypoints ajoutées aux propriétés des planètes.

css/style.css

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

js/TEST_F.JS

@@ -7,7 +7,7 @@ let offset = {
 let max = 40;
 let min = 35;
 let w = 1260;
-let h = 870;
+let h = 830;
 const canvas = new fabric.Canvas("canvas",{
     width: w,
     height: h,
@@ -68,14 +68,27 @@ 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({selectable: false});
+        planet.set({name: wayPoint.symbol});
+        planet.set({type: wayPoint.type});
         canvas.add(planet);
       });
     planets.push(wayPoint);
@@ -91,4 +104,14 @@ setTimeout(function animate() {
     movePlanets();
     canvas.renderAll();
     setTimeout(animate, 1000);
-}, 10);
+}, 10);
+
+canvas.on('mouse:up', function (e) {
+    console.log(e.target)
+    if(e.target.shadow.color == "red"){
+        e.target.shadow.color = "white"
+    }
+    else{
+        e.target.shadow.color = "red"
+    }
+})

templates/index.html

@@ -6,6 +6,7 @@
     <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/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/fabric.min.js" defer></script>
     <script src="/js/TEST_F.JS" defer></script>
@@ -23,8 +24,8 @@
         <div id="menu">
             <button id="agentbutton">Agent</button>
             <button id="factionbutton">Faction</button>
-            <button id="shipbutton">Vaisseau</button>
-            <button id="contractbutton">Contrats</button>
+            <button id="shipbutton">Ships</button>
+            <button id="contractbutton">Contracts</button>
         </div>
     </footer>
 </body>