From b5f384781b894b436cacd21975f378ecdad34ce2 Mon Sep 17 00:00:00 2001 From: Melro Serdoura Daniel Date: Fri, 26 Apr 2024 11:23:55 +0200 Subject: [PATCH] bug slide regle page ship pas mal --- css/ship.css | 63 +++++++++++++++++++++++++++++------ html/templates/ship/ship.html | 11 +++--- js/controllers/ships.js | 41 +++++++++++++++++++---- 3 files changed, 94 insertions(+), 21 deletions(-) diff --git a/css/ship.css b/css/ship.css index b842d69..c5e5834 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,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} +} \ No newline at end of file diff --git a/html/templates/ship/ship.html b/html/templates/ship/ship.html index 15fda81..2fd8bde 100644 --- a/html/templates/ship/ship.html +++ b/html/templates/ship/ship.html @@ -3,14 +3,15 @@ + + + Ship - +
-
- -
+ +
- \ No newline at end of file diff --git a/js/controllers/ships.js b/js/controllers/ships.js index 0358ca8..95b600d 100644 --- 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( ` -
+
${ship.symbol}
-

fuel capacity: ${ship.fuel.capacity}

+ +
+
` ) }); + 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"); };