added track switching

ago%!(EXTRA string=2 years) · 2de4aafa29
parent 239fedaf43 b5f384781b
commit 2de4aafa29
3 changed files with 94 additions and 21 deletions
--- 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,9 +32,54 @@ button:hover{
    background-color:aqua ;
    transition: 1s;
 }
-.ships>*{
-    flex: 100px;
-}
+
+
 .my-modal{
    font-size:small;
 }
+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
@ -3,14 +3,15 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="css/ship.css">
+
+
    <title>Ship</title>
  </head>
-  <body>
+  <body class="test">
    <div class="block-ships">
-      <div class="ships">
-    
-      </div>
+      <a class="prev">❮</a>
+      <a class="next">❯</a> 
    </div>
-   
  </body>
 </html>
--- a/js/controllers/ships.js
+++ b/js/controllers/ships.js
@ -1,10 +1,11 @@
 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);
+  let slideIndex = 1;

  temp_engine.after_render((temp_engine) => {
    menu_mod(temp_engine);
@ -12,21 +13,28 @@ 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>
          `
          )
      });
+      showSlides(1)
+
      temp_engine.add_event(".reg", "click", (e) => {
        const id_ship = $(e.target).attr("data-symbol");
        ships.forEach(ship =>{
@ -135,7 +143,6 @@ export default (temp_engine) => {
        ships.forEach(ship =>{
          if(ship.symbol==id_ship)
          {
-            console.log("ok")
          }
        })

@ -145,8 +152,30 @@ export default (temp_engine) => {
    temp_engine.add_event(".btn-close", "click", () => {
      modal.close();
    });
-  });
+      function plusSlides(n) {
+        showSlides(slideIndex += n);
+      }

+      temp_engine.add_event(".prev", "click", () => {
+        plusSlides(-1);      
+      });
+      temp_engine.add_event(".next", "click", () => {
+        plusSlides(1);     
+      });
+      
+      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";  
+      }
+
+  });
+  
  temp_engine.render("templates/ship/ship.html");

 };