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

added track switching

Browse Source
fusion
AmorimDSJM ago%!(EXTRA string=1 year)
parent 239fedaf43 b5f384781b
commit 2de4aafa29
3 changed files with 94 additions and 21 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. 63
      css/ship.css
  2. 11
      html/templates/ship/ship.html
  3. 39
      js/controllers/ships.js

63
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,9 +32,54 @@ button:hover{
background-color:aqua ; background-color:aqua ;
transition: 1s; transition: 1s;
} }
.ships>*{
flex: 100px;
}
.my-modal{ .my-modal{
font-size:small; 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}
}

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

@ -3,14 +3,15 @@
<head> <head>
<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">
<title>Ship</title> <title>Ship</title>
</head> </head>
<body> <body class="test">
<div class="block-ships"> <div class="block-ships">
<div class="ships"> <a class="prev">❮</a>
<a class="next">❯</a>
</div>
</div> </div>
</body> </body>
</html> </html>

39
js/controllers/ships.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save