commit de fin de journe

css/global.css

@@ -52,7 +52,20 @@ button:hover {
 }
 
 main {
+
   flex: 1;
+  overflow-y: scroll;
+  display: flex;
+  justify-content: left;
+  flex-wrap: wrap;
+  padding-left: 30px;
+}
+
+
+.spacer {
+  margin-bottom: 35px;
+  margin-left: 100px;
+  margin-right: 100px;
 }
 
 #credits {
@@ -80,15 +93,20 @@ footer p {
 
 #exampleModal {
   color: white;
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.1)
 }
 
 #modal-footer {
   background-color: #272727;
 }
-canvas {
+
-  width: 100%;
+#status-onhold {
-  height: 600px;
+  color: orange;
-  border: 2px solid black;
+}
-  border-radius: 5px;
+
+#status-accepted{
+  color: greenyellow;
+}
+#revenu {
+  color: white
 }

js/main.js

@@ -79,17 +79,18 @@ async function contract() {
 async function ship() {
   const token = localStorage.getItem("token");
   const ships = await SpaceTraders.Ships.list(token);
+  console.log(ships)
   $("main").empty();
   ships.forEach((ship) => {
     let img = "/img/Skamkraft.png";
     const card = `                            
-    <div class="card" style="width: 20rem;">
+    <div class="card spacer" style="width: 20rem;">
       <img src="${img}" class="card-img-top" alt="">
         <div class="card-body">
-          <h5 style="color:white" class="card-title">${ship}</h5>
+          <h5 style="color:white" class="card-title">${ship.symbol}</h5>
           <p style="color:white" class="card-text">Location : ${ship.nav.waypointSymbol}</p>
           <p style="color:white" id="status" class="card-text">Status : ${ship.nav.status}</p>
-          <button id="btn-infos" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>                      
+          <button id="btn-infos" type="button" data-ships-id="${ship.symbol}" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>                      
         </div>
     </div>
   `;
@@ -97,29 +98,32 @@ async function ship() {
 
     $("#btn-infos").on("click", async function () {
       const token = localStorage.getItem("token");
-      const contrat = await SpaceTraders.Contract.get(
+      const ships = await SpaceTraders.Ships.get(token,$(this).attr('data-ships-id'));
-        $(this).attr("contratID"),
+    console.log("info")
-        token
-      );
       const modal = `
-      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
         <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
-              <h1 class="modal-title fs-5" id="title-modal">${contrat.id}</h1>
+              <h1 class="modal-title fs-5">${ships.symbol}</h1>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
-              Type : ${contrat.type} <br>
+              fuel current ammount : ${ships.fuel.current} <br>
-              Faction : ${contrat.factionSymbol} <br>
+              fuel capacity : ${ships.fuel.capacity} <br>
-              DeadLine : ${contrat.deadlineToAccept}
+              crew current ammount : ${ships.crew.current} <br>
+              crew capacity : ${ships.crew.capacity} <br>
+              crew moral : ${ships.crew.morale}/100 <br>
+              frame : ${ships.frame.description} <br>
+              reactor : ${ships.reactor.description} <br>
+              engine : ${ships.engine.description} 
             </div>
-            <div class="modal-footer" id="modal-footer">
+            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
             </div>
           </div>
         </div>
-      </div>`;
+      </div>`
       $("main").append(modal);
     });
   });