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

asdd css modal-ships / modif style contract.js

Browse Source
main
Daniel Serdoura ago%!(EXTRA string=10 months)
parent 20a1e1f6b9
commit c294b9dd2d
8 changed files with 91 additions and 72 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. 1
      css/global.css
  2. 34
      css/modal-ships.css
  3. 3
      css/ships.css
  4. 1
      html/templates/ships/ships.html
  5. 6
      html/templates/ships/ships_modal.html
  6. 1
      index.html
  7. 4
      js/controllers/contracts.js
  8. 113
      js/controllers/ships.js

1
css/global.css
Unescape View File

@ -122,6 +122,7 @@ select {
font-size: 20px;
} */
button, .button {
font-family: var(--text-familly);
background-color: #1a1a1a;
color: #ffffff;
border: 2px solid #ffffff;

34
css/modal-ships.css
Unescape View File

@ -0,0 +1,34 @@
.modal-ships {
background-image: url("/assets/spaceships/blueprint.png");
background-size: cover;
font-size: 25px;
width: 1000px; /* Set the width to the image width */
height: 560px; /* Set the height to the image height */
position: relative;
margin: auto;
padding: 40px;
color: yellow;
}
.infos-ships {
padding: 20px;
margin-bottom: 20px; /* Space below the info box */
}
.btn-close-ships {
position: absolute;
font-size:x-large;
bottom: 20px;
left: 20px;
background-color: rgba(255, 255, 255, 0.8);
border: none;
color: yellow;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.btn-close-ships:hover {
background-color: rgba(255, 255, 255, 1);
}

3
css/ships.css
Unescape View File

@ -53,4 +53,7 @@
/* 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);
}
.btn-ships{
font-size:x-large;
}

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

@ -2,5 +2,4 @@
<div class="block-ships">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>

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

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

1
index.html
Unescape View File

@ -13,6 +13,7 @@
<link rel="stylesheet" href="css/profile.css">
<link rel="stylesheet" href="css/contracts.css">
<link rel="stylesheet" href="css/ships.css">
<link rel="stylesheet" href="css/modal-ships.css">
</head>
<body>

4
js/controllers/contracts.js
Unescape View File

@ -61,7 +61,7 @@ export default function contracts(temp_engine) {
status = "accepted"
card =
`
<div class="card" style="width: 20rem;">
<div class="card">
<img src="${img}" class="card-img-top" alt="">
<div class="card-body">
<h5 style="color:white" class="card-title">${contract.faction}</h5>
@ -84,7 +84,7 @@ export default function contracts(temp_engine) {
status = "on hold"
card =
`
<div class="card" style="width: 20rem;">
<div class="card">
<img src="${img}" class="card-img-top" alt="">
<div class="card-body">
<h5 style="color:white" class="card-title">${contract.faction}</h5>

113
js/controllers/ships.js
Unescape View File

@ -23,12 +23,12 @@ export default (temp_engine) => {
src="/assets/spaceships/b_spaceships.png"
alt="" />
<div class="buttonShip">
<button id="" class="reg base-btn" data-symbol="${ship.symbol}">Name</button>
<button id="" class="nav base-btn" data-symbol="${ship.symbol}">Navigation</button>
<button id="" class="crew base-btn" data-symbol="${ship.symbol}">Crew</button>
<button id="" class="frame base-btn" data-symbol="${ship.symbol}">Frame</button>
<button id="" class="react base-btn" data-symbol="${ship.symbol}">Reactor</button>
<button id="" class="fuel base-btn" data-symbol="${ship.symbol}">Fuel</button>
<button id="" class="reg btn-ships" data-symbol="${ship.symbol}">Name</button>
<button id="" class="nav btn-ships" data-symbol="${ship.symbol}">Navigation</button>
<button id="" class="crew btn-ships" data-symbol="${ship.symbol}">Crew</button>
<button id="" class="frame btn-ships" data-symbol="${ship.symbol}">Frame</button>
<button id="" class="react btn-ships" data-symbol="${ship.symbol}">Reactor</button>
<button id="" class="fuel btn-ships" data-symbol="${ship.symbol}">Fuel</button>
</div>
</div>
@ -39,14 +39,13 @@ export default (temp_engine) => {
temp_engine.add_event(".reg", "click", (e) => {
const id_ship = $(e.target).attr("data-symbol");
console.log("test ")
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>`);
$(".infos-ships").html("");
$(".infos-ships").append(`<p>Name : ${ship.registration.name}</p>`);
$(".infos-ships").append(`<p>Faction : ${ship.registration.factionSymbol}</p>`);
$(".infos-ships").append(`<p>Role : ${ship.registration.role}</p>`);
}
})
modal.show();
@ -56,11 +55,11 @@ export default (temp_engine) => {
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>`);
$(".infos-ships").html("");
$(".infos-ships").append(`<p>Current system : ${ship.nav.systemSymbol}</p>`);
$(".infos-ships").append(`<p>Current waypoint : ${ship.nav.waypointSymbol}</p>`);
$(".infos-ships").append(`<p>Current status : ${ship.nav.status}</p>`);
$(".infos-ships").append(`<p>Flight mode : ${ship.nav.flightMode}</p>`);
}
})
modal.show();
@ -70,11 +69,11 @@ export default (temp_engine) => {
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>`);
$(".infos-ships").html("");
$(".infos-ships").append(`<p>Current member : ${ship.crew.current}</p>`);
$(".infos-ships").append(`<p>Capacity : ${ship.crew.capacity}</p>`);
$(".infos-ships").append(`<p>required member : ${ship.crew.required}</p>`);
$(".infos-ships").append(`<p>Moral : ${ship.crew.morale}</p>`);
}
})
modal.show();
@ -84,13 +83,13 @@ export default (temp_engine) => {
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>`);
$(".infos-ships").html("");
$(".infos-ships").append(`<p>Name : ${ship.frame.name}</p>`);
$(".infos-ships").append(`<p>Description : ${ship.frame.description}</p>`);
$(".infos-ships").append(`<p>Fuel capacity : ${ship.frame.fuelCapacity}</p>`);
$(".infos-ships").append(`<p>Condition : ${ship.frame.condition}</p>`);
$(".infos-ships").append(`<p>Power : ${ship.frame.requirements.power}</p>`);
$(".infos-ships").append(`<p>Crew : ${ship.frame.requirements.crew}</p>`);
}
})
@ -101,12 +100,12 @@ export default (temp_engine) => {
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>`);
$(".infos-ships").html("");
$(".infos-ships").append(`<p>Name : ${ship.reactor.name}</p>`);
$(".infos-ships").append(`<p>Description : ${ship.reactor.description}</p>`);
$(".infos-ships").append(`<p>Condition : ${ship.reactor.condition}</p>`);
$(".infos-ships").append(`<p>Power : ${ship.reactor.powerOutput}</p>`);
$(".infos-ships").append(`<p>Crew : ${ship.reactor.requirements.crew}</p>`);
}
})
modal.show();
@ -116,13 +115,13 @@ export default (temp_engine) => {
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>`);
$(".infos-ships").html("");
$(".infos-ships").append(`<p>Name : ${ship.engine.name}</p>`);
$(".infos-ships").append(`<p>Description : ${ship.engine.description}</p>`);
$(".infos-ships").append(`<p>Condition : ${ship.engine.condition}</p>`);
$(".infos-ships").append(`<p>Speed : ${ship.engine.speed}</p>`);
$(".infos-ships").append(`<p>Crew : ${ship.engine.requirements.crew}</p>`);
$(".infos-ships").append(`<p>Power : ${ship.engine.requirements.power}</p>`);
}
})
modal.show();
@ -132,24 +131,16 @@ export default (temp_engine) => {
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>`);
$(".infos-ships").html("");
$(".infos-ships").append(`<p>current fuel : ${ship.fuel.current}</p>`);
$(".infos-ships").append(`<p>Description : ${ship.fuel.capacity}</p>`);
$(".infos-ships").append(`<p>Condition : ${ship.fuel.consumed.amount}</p>`);
$(".infos-ships").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)
{
}
})
});
});
function showSlides(n) {
@ -162,19 +153,9 @@ export default (temp_engine) => {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
// let img = slideIndex[slideIndex - 1].children(".imgShip");
// if (n > 0)
// {
// img.animate({left: '250px'})
// }
// else
// {
// }
}
temp_engine.add_event(".btn-close", "click", () => {
temp_engine.add_event(".btn-close-ships", "click", () => {
modal.close();
});
temp_engine.add_event(".prev", "click", () => {

Write Preview
Loading…
Cancel
Save