ajout de slide page ship

ago%!(EXTRA string=1 year) · 9f559a31f6
parent 7f09eb8e04
commit 9f559a31f6
5 changed files with 85 additions and 17 deletions
--- a/assets/spaceships/spaceship.png
+++ b/assets/spaceships/spaceship.png
--- 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}
 }
--- 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>
--- 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");
-
 };
--- a/js/test/jsShip.js
+++ 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";  
+}