From e49df1cbdef62c69be272f094bc7cdc4ff57272e Mon Sep 17 00:00:00 2001
From: Sacha Leone <Sacha.Leone@rpn.ch>
Date: Fri, 15 Dec 2023 15:37:52 +0100
Subject: [PATCH] =?UTF-8?q?Ajouts=20sur=20plan=C3=A8te:=20test=20de=20clic?=
 =?UTF-8?q?,=20ombre=20changeante=20entre=20rouge=20et=20blanc,=20propri?=
 =?UTF-8?q?=C3=A9t=C3=A9s=20des=20waypoints=20ajout=C3=A9es=20aux=20propri?=
 =?UTF-8?q?=C3=A9t=C3=A9s=20des=20plan=C3=A8tes.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css        |  5 +++++
 js/TEST_F.JS         | 29 ++++++++++++++++++++++++++---
 templates/index.html |  5 +++--
 3 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 css/style.css

diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..59ccbbf
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,5 @@
+/* Copyright © 2023 Entreprise SpaceTarders */
+canvas {
+    border: 2px solid rgb(7, 18, 41);
+    border-radius: 5px;
+}
\ No newline at end of file
diff --git a/js/TEST_F.JS b/js/TEST_F.JS
index ddb80b7..80ebd8f 100644
--- a/js/TEST_F.JS
+++ b/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);
\ No newline at end of file
+}, 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"
+    }
+})
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index af5a160..651b9f2 100644
--- a/templates/index.html
+++ b/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>