anulax
/
skamkraft.anulax.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

ajout de slide page ship

Browse Source
Daniel-alias-la-puissance
Melro Serdoura Daniel ago%!(EXTRA string=1 year)
parent 7f09eb8e04
commit 9f559a31f6
5 changed files with 85 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      assets/spaceships/spaceship.png
  2. 55
      css/ship.css
  3. 10
      html/templates/ship/ship.html
  4. 16
      js/controllers/ships.js
  5. 21
      js/test/jsShip.js

BIN
assets/spaceships/spaceship.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 729 B

After

Width:  |  Height:  |  Size: 5.7 KiB

55
css/ship.css
Unescape View File

@ -7,16 +7,14 @@
} }
.block-ships{ .block-ships{
display:flex; display:flex;
justify-content: center; flex-direction: column;
align-items: center;
color: white; color: white;
font-size:large; font-size:large;
}
.ships{
display: flex;
flex-direction: column;
flex-wrap: wrap;
text-align: center; text-align: center;
padding-top: 80px;
max-width: 1000px;
position: relative;
margin: auto;
} }
button{ button{
color: white; color: white;
@ -34,6 +32,7 @@ button:hover{
background-color:aqua ; background-color:aqua ;
transition: 1s; transition: 1s;
} }
.ships>*{ .ships>*{
flex: 100px; flex: 100px;
} }
@ -43,4 +42,46 @@ button:hover{
body{ body{
background-image: url("/assets/spaceships/hangar.png"); background-image: url("/assets/spaceships/hangar.png");
background-size: cover; 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}
} }

10
html/templates/ship/ship.html
Unescape View File

@ -4,14 +4,16 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/ship.css"> <link rel="stylesheet" href="css/ship.css">
<script src="/js/test/jsShip.js"></script>
<title>Ship</title> <title>Ship</title>
</head> </head>
<body class="test"> <body class="test">
<div class="block-ships"> <div class="block-ships">
<div class="ships"> <a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div> </div>
</body> </body>
</html> </html>

16
js/controllers/ships.js
Unescape View File

@ -1,7 +1,7 @@
import menu_mod from "./menu_mod.js"; import menu_mod from "./menu_mod.js";
import { Modal } from "../skama_code/ui/modal.js"; import { Modal } from "../skama_code/ui/modal.js";
import { Ship } from "../skama_code/api/ship.js"; import { Ship } from "../skama_code/api/ship.js";
import system from "./system.js";
export default (temp_engine) => { export default (temp_engine) => {
let modal = new Modal("ship-modal", temp_engine); let modal = new Modal("ship-modal", temp_engine);
@ -12,17 +12,22 @@ export default (temp_engine) => {
Ship.list((ships) => { Ship.list((ships) => {
ships.forEach(ship => { 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> <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="reg" data-symbol="${ship.symbol}">Name</button>
<button class="nav" data-symbol="${ship.symbol}">Navigation</button> <button class="nav" data-symbol="${ship.symbol}">Navigation</button>
<button class="crew" data-symbol="${ship.symbol}">Crew</button> <button class="crew" data-symbol="${ship.symbol}">Crew</button>
<button class="frame" data-symbol="${ship.symbol}">Frame</button> <button class="frame" data-symbol="${ship.symbol}">Frame</button>
<button class="react" data-symbol="${ship.symbol}">Reactor</button> <button class="react" data-symbol="${ship.symbol}">Reactor</button>
<button class="fuel" data-symbol="${ship.symbol}">Fuel</button> <button class="fuel" data-symbol="${ship.symbol}">Fuel</button>
</div>
</div> </div>
` `
) )
@ -146,7 +151,6 @@ export default (temp_engine) => {
modal.close(); modal.close();
}); });
}); });
temp_engine.render("templates/ship/ship.html"); temp_engine.render("templates/ship/ship.html");
}; };

21
js/test/jsShip.js
Unescape View File

@ -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";
}
Write Preview
Loading…
Cancel
Save