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

page ships(presque bien un peu trpo petit)

Browse Source
main
Daniel Serdoura ago%!(EXTRA string=11 months)
parent 9cf24755f5
commit 44c2e837bb
9 changed files with 298 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      assets/spaceships/blueprint.png
  2. BIN
      assets/spaceships/hangar.png
  3. 2
      css/global.css
  4. 85
      css/ships.css
  5. 2
      html/template.html
  6. 17
      html/templates/ships/ships.html
  7. 9
      html/templates/ships/ships_modal.html
  8. 4
      js/controllers/menu_mod.js
  9. 181
      js/controllers/ships.js

BIN
assets/spaceships/blueprint.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
assets/spaceships/hangar.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

2
css/global.css
Unescape View File

@ -36,7 +36,7 @@ select {
color: var(--text-color);
}
.block-content{
#block-content{
margin: 0;
padding: 0;
width: 100%;

85
css/ships.css
Unescape View File

@ -0,0 +1,85 @@
* {
box-sizing: border-box;
}
@font-face {
font-family: M42;
src: url("/assets/fonts/Pixellari.ttf");
}
.block-ships{
display:flex;
flex-direction: column;
color: white;
font-size:large;
text-align: center;
padding-top: 100px;
max-width: 1000px;
position: relative;
margin: auto;
}
button{
color: white;
font-family: 'M42';
background-color: black;
font-size:x-small;
box-shadow: 3px 2px white;
border: 4px solid white;
border-radius: 10px;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
}
button:hover{
background-color:aqua ;
transition: 1s;
}
.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}
}

2
html/template.html
Unescape View File

@ -7,5 +7,5 @@
<div id="links" class="languettes">
</div>
<div class="block-content">
<div id="block-content">
</div>

17
html/templates/ships/ships.html
Unescape View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/ships.css">
<title>Ship</title>
</head>
<body class="test">
<div class="block-ships">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</body>
</html>

9
html/templates/ships/ships_modal.html
Unescape View File

@ -0,0 +1,9 @@
<!-- Copyright © 2023 Entreprise SkamKraft -->
<div class="my-modal">
<div class="infos">
</div>
<div>
<button class="btn btn-val btn-close">Close</button>
</div>
</div>

4
js/controllers/menu_mod.js
Unescape View File

@ -1,6 +1,7 @@
import { My } from "../skama_code/commun/my.js";
import profile from "./profile.js";
import contracts from "./contracts.js";
import ships from "./ships.js";
function loged_links(temp_engine) {
$("#links").html(`
@ -16,6 +17,9 @@ function loged_links(temp_engine) {
temp_engine.add_event("#contracts-link", "click", () => {
contracts(temp_engine);
})
temp_engine.add_event("#ships-link", "click", () => {
ships(temp_engine);
})
}
export default (temp_engine) => {

181
js/controllers/ships.js
Unescape View File

@ -0,0 +1,181 @@
import menu_mod from "./menu_mod.js";
import { Modal } from "../skama_code/ui/modal.js";
import { Ship } from "../skama_code/api/ship.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);
modal.load("templates/ships/ships_modal.html");
Ship.list((ships) => {
ships.forEach(ship => {
$(".block-ships").append(
`
<div class="ships-list fade" data-id="${ship.symbol}">
<h5>${ship.symbol}</h5>
<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 =>{
if(ship.symbol==id_ship)
{
$(".infos").html("");
$(".infos").append(`<p>Name : ${ship.registration.name}</p>`);
$(".infos").append(`<p>Faction : ${ship.registration.factionSymbol}</p>`);
$(".infos").append(`<p>Role : ${ship.registration.role}</p>`);
}
})
modal.show();
});
temp_engine.add_event(".nav", "click", (e) => {
const id_ship = $(e.target).attr("data-symbol");
ships.forEach(ship =>{
if(ship.symbol==id_ship)
{
$(".infos").html("");
$(".infos").append(`<p>Current system : ${ship.nav.systemSymbol}</p>`);
$(".infos").append(`<p>Current waypoint : ${ship.nav.waypointSymbol}</p>`);
$(".infos").append(`<p>Current status : ${ship.nav.status}</p>`);
$(".infos").append(`<p>Flight mode : ${ship.nav.flightMode}</p>`);
}
})
modal.show();
});
temp_engine.add_event(".crew", "click", (e) => {
const id_ship = $(e.target).attr("data-symbol");
ships.forEach(ship =>{
if(ship.symbol==id_ship)
{
$(".infos").html("");
$(".infos").append(`<p>Current member : ${ship.crew.current}</p>`);
$(".infos").append(`<p>Capacity : ${ship.crew.capacity}</p>`);
$(".infos").append(`<p>required member : ${ship.crew.required}</p>`);
$(".infos").append(`<p>Moral : ${ship.crew.morale}</p>`);
}
})
modal.show();
});
temp_engine.add_event(".frame", "click", (e) => {
const id_ship = $(e.target).attr("data-symbol");
ships.forEach(ship =>{
if(ship.symbol==id_ship)
{
$(".infos").html("");
$(".infos").append(`<p>Name : ${ship.frame.name}</p>`);
$(".infos").append(`<p>Description : ${ship.frame.description}</p>`);
$(".infos").append(`<p>Fuel capacity : ${ship.frame.fuelCapacity}</p>`);
$(".infos").append(`<p>Condition : ${ship.frame.condition}</p>`);
$(".infos").append(`<p>Power : ${ship.frame.requirements.power}</p>`);
$(".infos").append(`<p>Crew : ${ship.frame.requirements.crew}</p>`);
}
})
modal.show();
});
temp_engine.add_event(".react", "click", (e) => {
const id_ship = $(e.target).attr("data-symbol");
ships.forEach(ship =>{
if(ship.symbol==id_ship)
{
$(".infos").html("");
$(".infos").append(`<p>Name : ${ship.reactor.name}</p>`);
$(".infos").append(`<p>Description : ${ship.reactor.description}</p>`);
$(".infos").append(`<p>Condition : ${ship.reactor.condition}</p>`);
$(".infos").append(`<p>Power : ${ship.reactor.powerOutput}</p>`);
$(".infos").append(`<p>Crew : ${ship.reactor.requirements.crew}</p>`);
}
})
modal.show();
});
temp_engine.add_event(".engine", "click", (e) => {
const id_ship = $(e.target).attr("data-symbol");
ships.forEach(ship =>{
if(ship.symbol==id_ship)
{
$(".infos").html("");
$(".infos").append(`<p>Name : ${ship.engine.name}</p>`);
$(".infos").append(`<p>Description : ${ship.engine.description}</p>`);
$(".infos").append(`<p>Condition : ${ship.engine.condition}</p>`);
$(".infos").append(`<p>Speed : ${ship.engine.speed}</p>`);
$(".infos").append(`<p>Crew : ${ship.engine.requirements.crew}</p>`);
$(".infos").append(`<p>Power : ${ship.engine.requirements.power}</p>`);
}
})
modal.show();
});
temp_engine.add_event(".fuel", "click", (e) => {
const id_ship = $(e.target).attr("data-symbol");
ships.forEach(ship =>{
if(ship.symbol==id_ship)
{
$(".infos").html("");
$(".infos").append(`<p>current fuel : ${ship.fuel.current}</p>`);
$(".infos").append(`<p>Description : ${ship.fuel.capacity}</p>`);
$(".infos").append(`<p>Condition : ${ship.fuel.consumed.amount}</p>`);
$(".infos").append(`<p>Speed : ${ship.fuel.consumed.timestamp}</p>`);
}
})
modal.show();
});
$(".ships-list").on("click", (e) => {
const id_ship = $(e.target).attr("data-id");
ships.forEach(ship =>{
if(ship.symbol==id_ship)
{
}
})
});
});
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/ships/ships.html");
};
Write Preview
Loading…
Cancel
Save