From c294b9dd2d7a6591142e56e28a8ced2b551e6528 Mon Sep 17 00:00:00 2001 From: Daniel Serdoura Date: Wed, 19 Jun 2024 09:42:24 +0200 Subject: [PATCH] asdd css modal-ships / modif style contract.js --- css/global.css | 1 + css/modal-ships.css | 34 ++++++++ css/ships.css | 3 + html/templates/ships/ships.html | 1 - html/templates/ships/ships_modal.html | 6 +- index.html | 1 + js/controllers/contracts.js | 4 +- js/controllers/ships.js | 113 +++++++++++--------------- 8 files changed, 91 insertions(+), 72 deletions(-) create mode 100644 css/modal-ships.css diff --git a/css/global.css b/css/global.css index 7809461..0ceeaa4 100644 --- a/css/global.css +++ b/css/global.css @@ -122,6 +122,7 @@ select { font-size: 20px; } */ button, .button { + font-family: var(--text-familly); background-color: #1a1a1a; color: #ffffff; border: 2px solid #ffffff; diff --git a/css/modal-ships.css b/css/modal-ships.css new file mode 100644 index 0000000..65381d3 --- /dev/null +++ b/css/modal-ships.css @@ -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); +} diff --git a/css/ships.css b/css/ships.css index c3be5f8..d6e7f40 100644 --- a/css/ships.css +++ b/css/ships.css @@ -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; } \ No newline at end of file diff --git a/html/templates/ships/ships.html b/html/templates/ships/ships.html index 4c1444c..57784b2 100644 --- a/html/templates/ships/ships.html +++ b/html/templates/ships/ships.html @@ -2,5 +2,4 @@
-
\ No newline at end of file diff --git a/html/templates/ships/ships_modal.html b/html/templates/ships/ships_modal.html index a5a542c..0ab65fb 100644 --- a/html/templates/ships/ships_modal.html +++ b/html/templates/ships/ships_modal.html @@ -1,9 +1,9 @@ -
-
+
+
- +
\ No newline at end of file diff --git a/index.html b/index.html index 05afb31..1fcae98 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@ + diff --git a/js/controllers/contracts.js b/js/controllers/contracts.js index 4272471..dd1ddc6 100644 --- a/js/controllers/contracts.js +++ b/js/controllers/contracts.js @@ -61,7 +61,7 @@ export default function contracts(temp_engine) { status = "accepted" card = ` -
+
${contract.faction}
@@ -84,7 +84,7 @@ export default function contracts(temp_engine) { status = "on hold" card = ` -
+
${contract.faction}
diff --git a/js/controllers/ships.js b/js/controllers/ships.js index 6ec106f..9c82920 100644 --- a/js/controllers/ships.js +++ b/js/controllers/ships.js @@ -23,12 +23,12 @@ export default (temp_engine) => { src="/assets/spaceships/b_spaceships.png" alt="" />
- - - - - - + + + + + +
@@ -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(`

Name : ${ship.registration.name}

`); - $(".infos").append(`

Faction : ${ship.registration.factionSymbol}

`); - $(".infos").append(`

Role : ${ship.registration.role}

`); + $(".infos-ships").html(""); + $(".infos-ships").append(`

Name : ${ship.registration.name}

`); + $(".infos-ships").append(`

Faction : ${ship.registration.factionSymbol}

`); + $(".infos-ships").append(`

Role : ${ship.registration.role}

`); } }) modal.show(); @@ -56,11 +55,11 @@ export default (temp_engine) => { ships.forEach(ship =>{ if(ship.symbol==id_ship) { - $(".infos").html(""); - $(".infos").append(`

Current system : ${ship.nav.systemSymbol}

`); - $(".infos").append(`

Current waypoint : ${ship.nav.waypointSymbol}

`); - $(".infos").append(`

Current status : ${ship.nav.status}

`); - $(".infos").append(`

Flight mode : ${ship.nav.flightMode}

`); + $(".infos-ships").html(""); + $(".infos-ships").append(`

Current system : ${ship.nav.systemSymbol}

`); + $(".infos-ships").append(`

Current waypoint : ${ship.nav.waypointSymbol}

`); + $(".infos-ships").append(`

Current status : ${ship.nav.status}

`); + $(".infos-ships").append(`

Flight mode : ${ship.nav.flightMode}

`); } }) modal.show(); @@ -70,11 +69,11 @@ export default (temp_engine) => { ships.forEach(ship =>{ if(ship.symbol==id_ship) { - $(".infos").html(""); - $(".infos").append(`

Current member : ${ship.crew.current}

`); - $(".infos").append(`

Capacity : ${ship.crew.capacity}

`); - $(".infos").append(`

required member : ${ship.crew.required}

`); - $(".infos").append(`

Moral : ${ship.crew.morale}

`); + $(".infos-ships").html(""); + $(".infos-ships").append(`

Current member : ${ship.crew.current}

`); + $(".infos-ships").append(`

Capacity : ${ship.crew.capacity}

`); + $(".infos-ships").append(`

required member : ${ship.crew.required}

`); + $(".infos-ships").append(`

Moral : ${ship.crew.morale}

`); } }) modal.show(); @@ -84,13 +83,13 @@ export default (temp_engine) => { ships.forEach(ship =>{ if(ship.symbol==id_ship) { - $(".infos").html(""); - $(".infos").append(`

Name : ${ship.frame.name}

`); - $(".infos").append(`

Description : ${ship.frame.description}

`); - $(".infos").append(`

Fuel capacity : ${ship.frame.fuelCapacity}

`); - $(".infos").append(`

Condition : ${ship.frame.condition}

`); - $(".infos").append(`

Power : ${ship.frame.requirements.power}

`); - $(".infos").append(`

Crew : ${ship.frame.requirements.crew}

`); + $(".infos-ships").html(""); + $(".infos-ships").append(`

Name : ${ship.frame.name}

`); + $(".infos-ships").append(`

Description : ${ship.frame.description}

`); + $(".infos-ships").append(`

Fuel capacity : ${ship.frame.fuelCapacity}

`); + $(".infos-ships").append(`

Condition : ${ship.frame.condition}

`); + $(".infos-ships").append(`

Power : ${ship.frame.requirements.power}

`); + $(".infos-ships").append(`

Crew : ${ship.frame.requirements.crew}

`); } }) @@ -101,12 +100,12 @@ export default (temp_engine) => { ships.forEach(ship =>{ if(ship.symbol==id_ship) { - $(".infos").html(""); - $(".infos").append(`

Name : ${ship.reactor.name}

`); - $(".infos").append(`

Description : ${ship.reactor.description}

`); - $(".infos").append(`

Condition : ${ship.reactor.condition}

`); - $(".infos").append(`

Power : ${ship.reactor.powerOutput}

`); - $(".infos").append(`

Crew : ${ship.reactor.requirements.crew}

`); + $(".infos-ships").html(""); + $(".infos-ships").append(`

Name : ${ship.reactor.name}

`); + $(".infos-ships").append(`

Description : ${ship.reactor.description}

`); + $(".infos-ships").append(`

Condition : ${ship.reactor.condition}

`); + $(".infos-ships").append(`

Power : ${ship.reactor.powerOutput}

`); + $(".infos-ships").append(`

Crew : ${ship.reactor.requirements.crew}

`); } }) modal.show(); @@ -116,13 +115,13 @@ export default (temp_engine) => { ships.forEach(ship =>{ if(ship.symbol==id_ship) { - $(".infos").html(""); - $(".infos").append(`

Name : ${ship.engine.name}

`); - $(".infos").append(`

Description : ${ship.engine.description}

`); - $(".infos").append(`

Condition : ${ship.engine.condition}

`); - $(".infos").append(`

Speed : ${ship.engine.speed}

`); - $(".infos").append(`

Crew : ${ship.engine.requirements.crew}

`); - $(".infos").append(`

Power : ${ship.engine.requirements.power}

`); + $(".infos-ships").html(""); + $(".infos-ships").append(`

Name : ${ship.engine.name}

`); + $(".infos-ships").append(`

Description : ${ship.engine.description}

`); + $(".infos-ships").append(`

Condition : ${ship.engine.condition}

`); + $(".infos-ships").append(`

Speed : ${ship.engine.speed}

`); + $(".infos-ships").append(`

Crew : ${ship.engine.requirements.crew}

`); + $(".infos-ships").append(`

Power : ${ship.engine.requirements.power}

`); } }) modal.show(); @@ -132,24 +131,16 @@ export default (temp_engine) => { ships.forEach(ship =>{ if(ship.symbol==id_ship) { - $(".infos").html(""); - $(".infos").append(`

current fuel : ${ship.fuel.current}

`); - $(".infos").append(`

Description : ${ship.fuel.capacity}

`); - $(".infos").append(`

Condition : ${ship.fuel.consumed.amount}

`); - $(".infos").append(`

Speed : ${ship.fuel.consumed.timestamp}

`); + $(".infos-ships").html(""); + $(".infos-ships").append(`

current fuel : ${ship.fuel.current}

`); + $(".infos-ships").append(`

Description : ${ship.fuel.capacity}

`); + $(".infos-ships").append(`

Condition : ${ship.fuel.consumed.amount}

`); + $(".infos-ships").append(`

Speed : ${ship.fuel.consumed.timestamp}

`); } }) 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", () => {