From 9f559a31f6351dd22b0e10914b2fdc5df9ee9a2e Mon Sep 17 00:00:00 2001
From: Melro Serdoura Daniel <MelroSD1@s2.rpn.ch>
Date: Fri, 15 Mar 2024 12:14:34 +0100
Subject: [PATCH] ajout de slide page ship

---
 assets/spaceships/spaceship.png | Bin 729 -> 5825 bytes
 css/ship.css                    |  55 ++++++++++++++++++++++++++++----
 html/templates/ship/ship.html   |  10 +++---
 js/controllers/ships.js         |  16 ++++++----
 js/test/jsShip.js               |  21 ++++++++++++
 5 files changed, 85 insertions(+), 17 deletions(-)
 create mode 100644 js/test/jsShip.js

diff --git a/assets/spaceships/spaceship.png b/assets/spaceships/spaceship.png
index acc67df6f78345319c9dbe1a3143b93c62c298e9..304c9580180b022dfdee2d1f62421a19a9570d88 100644
GIT binary patch
literal 5825
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

delta 720
zcmV;>0x$i+E!hPjiBL{Q4GJ0x0000DNk~Le0000o0000e2nGNE0K9UkOpzfMe*%k1
zL_t(o3GG<1PQx$|O%W1;jR_%speqAX`#0@EXEy$Vxl{WSh>Z<35<gI>GpdmIflkHm
z$eDBGIBx8VI@D6?v+w-;o_%%*MR6*}wE_ceI{W<|Q_zp82d1b@d8UHug6`+@d4b0i
z7UV``X!Ri^1I>1blaTf`>Ni5?f8<pf%t5E~AtlXbGnEs6N-ep{KD)YheJ+(g%^k66
zwOlR>JSez^k#f|?_@gO=XhOi_%Uf~({BFf$<Zq$Wg<z)7?+ZJjmeGrlhnt-ie~X(%
zNNUdG$N<9>OYBf1SqNs&aDe$@=&U4JNX*LhaYoK#h@{4RY%dAoDitU&f4&zX*FPmu
z&^+=gsfBYh9*>FqWHKpsuTS*AMu878)X4OsB80i|+Z+N|1ov@Ft~yI<Z8jUr2P<8D
z4HEe}aR@>m-*o)#D={qC0ftvdwd+w^Kb=l#I@D4GbKsrewyar99Ye+hY+eHj@qUkh
z5Wq*HQ2;0G!m2lk2>HUOe}CSxEQ`fr;e6M4cLY+qiUG-(!f{Pvn=pJL5bNC$27ws1
zQMc`qBqwc&A^W8*W2DW*WuKE%l_Mxb4z4sg!q^Xi>-CzNa)m)uwh>V8V==?wkkW-Q
zW$hy_{jj~MRS!bjfKlc1@y_v~l`)byla_udAcn9UEA8kVk%O9Se-^~oFXHM#<PPB<
z5miaiKoD79h+WuVj43RrbDdR4XBHU-MxT+Cxj2P<XCwtzj#b~0)oMjAF60kvt&*Oc
z9%kk*0((uH_kc4;$mfBI?s6uH9@P?fxBY*Se%-n!Ipk}B4Z77*t1ckOB7;*+2)KpB
zgnSuv<%2LORLC@9CS>m8n){EgZW3^GL{kW9iu?t>+ai(#8|Z}q0000<MNUMnLSTYV
Ctx10X

diff --git a/css/ship.css b/css/ship.css
index a257d18..4015026 100644
--- a/css/ship.css
+++ b/css/ship.css
@@ -7,16 +7,14 @@
 }
 .block-ships{
     display:flex;
-    justify-content: center;
-    align-items: center;
+    flex-direction: column;
     color: white;
     font-size:large;
-}
-.ships{
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
     text-align: center;
+    padding-top: 80px;
+    max-width: 1000px;
+    position: relative;
+    margin: auto;
 }
 button{
     color: white;
@@ -34,6 +32,7 @@ button:hover{
     background-color:aqua ;
     transition: 1s;
 }
+
 .ships>*{
     flex: 100px;
 }
@@ -43,4 +42,46 @@ button:hover{
 body{
     background-image: url("/assets/spaceships/hangar.png");
     background-size: cover;
+}
+
+.ships-list {
+    display: none;
+}
+
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  margin-top: -22px;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover, .next:hover {
+  background-color: rgba(0,0,0,0.8);
+}
+
+/* Fading animation */
+.fade {
+  animation-name: fade;
+  animation-duration: 1.5s;
+}
+
+@keyframes fade {
+  from {opacity: .4}
+  to {opacity: 1}
 }
\ No newline at end of file
diff --git a/html/templates/ship/ship.html b/html/templates/ship/ship.html
index 98c2dec..1a406af 100644
--- a/html/templates/ship/ship.html
+++ b/html/templates/ship/ship.html
@@ -4,14 +4,16 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="css/ship.css">
+    <script src="/js/test/jsShip.js"></script>
+
+
     <title>Ship</title>
   </head>
   <body class="test">
     <div class="block-ships">
-      <div class="ships">
-    
-      </div>
+      <a class="prev" onclick="plusSlides(-1)">❮</a>
+      <a class="next" onclick="plusSlides(1)">❯</a>
     </div>
-   
+
   </body>
 </html>
\ No newline at end of file
diff --git a/js/controllers/ships.js b/js/controllers/ships.js
index 0358ca8..b6a0d3b 100644
--- a/js/controllers/ships.js
+++ b/js/controllers/ships.js
@@ -1,7 +1,7 @@
 import menu_mod from "./menu_mod.js";
 import { Modal } from "../skama_code/ui/modal.js";
 import { Ship } from "../skama_code/api/ship.js";
-import system from "./system.js";
+
 
 export default (temp_engine) => {
   let modal = new Modal("ship-modal", temp_engine);
@@ -12,17 +12,22 @@ export default (temp_engine) => {
 
     Ship.list((ships) => {
       ships.forEach(ship => {
-        $(".ships").append(
+        $(".block-ships").append(
           `
-            <div class="ships-list" data-id="${ship.symbol}">
+            <div class="ships-list fade" data-id="${ship.symbol}">
               <h5>${ship.symbol}</h5>
-                <p>fuel capacity: ${ship.fuel.capacity}</p>
+              <img 
+                id="imgShip" 
+                src="/assets/spaceships/spaceship.png" 
+                alt="" />
+                <div class="buttonShip">
               <button class="reg" data-symbol="${ship.symbol}">Name</button>
               <button class="nav" data-symbol="${ship.symbol}">Navigation</button>
               <button class="crew" data-symbol="${ship.symbol}">Crew</button>
               <button class="frame" data-symbol="${ship.symbol}">Frame</button>
               <button class="react" data-symbol="${ship.symbol}">Reactor</button>
               <button class="fuel" data-symbol="${ship.symbol}">Fuel</button>
+              </div>
             </div>
           `
           )
@@ -146,7 +151,6 @@ export default (temp_engine) => {
       modal.close();
     });
   });
-
+  
   temp_engine.render("templates/ship/ship.html");
-
 };
diff --git a/js/test/jsShip.js b/js/test/jsShip.js
new file mode 100644
index 0000000..22578d9
--- /dev/null
+++ b/js/test/jsShip.js
@@ -0,0 +1,21 @@
+let slideIndex = 1;
+showSlides(slideIndex);
+
+function plusSlides(n) {
+  showSlides(slideIndex += n);
+}
+
+function currentSlide(n) {
+  showSlides(slideIndex = n);
+}
+
+function showSlides(n) {
+  let i;
+  let slides = document.getElementsByClassName("ships-list");
+  if (n > slides.length) {slideIndex = 1}    
+  if (n < 1) {slideIndex = slides.length}
+  for (i = 0; i < slides.length; i++) {
+    slides[i].style.display = "none";  
+  }
+  slides[slideIndex-1].style.display = "block";  
+}
\ No newline at end of file