diff --git a/css/global.css b/css/global.css new file mode 100644 index 0000000..b5b416d --- /dev/null +++ b/css/global.css @@ -0,0 +1,115 @@ +/* Copyright © 2023 Entreprise SkamCraft */ + +* { + font-family: "Inter", sans-serif; + box-sizing: border-box; + overflow: hidden; + background-color: #272727; +} + +body, +html { + height: 100%; + display: flex; + flex-direction: column; +} + +/* Menu */ +.menu { + display: flex; + align-items: center; + justify-content: space-between; +} + +.title-section { + color: white; + display: flex; + align-items: center; + padding-left: 10px; +} + +.title-section img { + max-width: 80px; + max-height: 50px; +} + +.page-change-button { + padding-left: 10px; +} + +button { + margin: 2px; + color: black; + background-color: white; + border: 2px solid white; + border-radius: 10px; +} + +button:hover { + border-color: #eab308; + background-color: #eab308; + transition: all 1s; +} + +main { + + flex: 1; + overflow-y: scroll; + display: flex; + justify-content: left; + flex-wrap: wrap; + padding-left: 30px; +} + + +.spacer { + margin-bottom: 35px; + margin-left: 100px; + margin-right: 100px; +} + +#credits { + background-color: white; + border: 2px solid white; + border-radius: 10px; + color: black; +} + +/* Footer */ +footer { + color: white; +} + +footer p { + display: flex; + justify-content: center; + margin-bottom: 0px; +} + +/* Modal */ +.modal-content { + color: white; +} + +#exampleModal { + color: white; + background-color: rgba(255, 255, 255, 0.1) +} + +#modal-footer { + background-color: #272727; +} + +#status-onhold { + color: orange; +} + +#status-accepted{ + color: greenyellow; +} +#revenu { + color: white +} + + + diff --git a/index.html b/index.html index bd71585..40ec7a5 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,18 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/scripts/api.js b/scripts/api.js new file mode 100644 index 0000000..28ff322 --- /dev/null +++ b/scripts/api.js @@ -0,0 +1,157 @@ +// Copyright © 2023 Entreprise SkamKraft + +"use strict"; + +const spacetradersApiUrl = "https://api.spacetraders.io/v2/"; + +const REQUEST = async (url, method, headers, data) => { + try { + const response = await $.ajax(url, { + method, + headers, + data, + }); + + return response.data; + } catch (error) { + return error; + } +}; + +export default { + Agent: { + create: (symbol, faction) => { + const url = `${spacetradersApiUrl}register`; + const headers = { "Content-Type": "application/json" }; + const data = JSON.stringify({ symbol, faction }); + + return REQUEST(url, "POST", headers, data); + }, + + get: (token) => { + const url = `${spacetradersApiUrl}my/agent`; + const headers = { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }; + + return REQUEST(url, "GET", headers); + }, + + getPublic: (symbol) => { + const url = `${spacetradersApiUrl}agents/${symbol}`; + const headers = { Accept: "application/json" }; + + return REQUEST(url, "GET", headers); + }, + + list: (limit, page) => { + const url = `${spacetradersApiUrl}agents`; + const headers = { Accept: "application/json" }; + const data = { limit, page }; + + return REQUEST(url, "GET", headers, data); + }, + }, + + Faction: { + list: (limit, page) => { + const url = `${spacetradersApiUrl}factions`; + const headers = { Accept: "application/json" }; + const data = { limit, page }; + + return REQUEST(url, "GET", headers, data); + }, + }, + + System: { + list: (limit, page) => { + const url = `${spacetradersApiUrl}systems/`; + const headers = { Accept: "application/json" }; + const data = { limit, page }; + + return REQUEST(url, "GET", headers, data); + }, + + get: (symbol) => { + const url = `${spacetradersApiUrl}systems/${symbol}`; + const headers = { Accept: "application/json" }; + + return REQUEST(url, "GET", headers); + }, + }, + + Waypoint: { + list: (limit, page, systemSymbol) => { + const url = `${spacetradersApiUrl}systems/${systemSymbol}/waypoints`; + const headers = { Accept: "application/json" }; + const data = { limit, page }; + + return REQUEST(url, "GET", headers, data); + }, + + get: (systemSymbol, waypointSymbol, token) => { + const url = `${spacetradersApiUrl}systems/${systemSymbol}/waypoints/${waypointSymbol}/market`; + const headers = { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }; + + return REQUEST(url, "GET", headers); + }, + }, + + Contract: { + list: (token) => { + const url = `${spacetradersApiUrl}my/contracts/`; + const headers = { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }; + + return REQUEST(url, "GET", headers); + }, + + get: async (contratId, token) => { + const url = `${spacetradersApiUrl}my/contracts/${contratId}`; + const headers = { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }; + + return REQUEST(url, "GET", headers); + }, + + accept: async (contratId, token) => { + const url = `${spacetradersApiUrl}my/contracts/${contratId}/accept`; + const headers = { + 'Content-Type': 'application/json', + Accept: "application/json", + Authorization: `Bearer ${token}`, + }; + + return REQUEST(url, "POST", headers); + }, + + deliver : async(contratId, token)=>{ + const url = `${spacetradersApiUrl}my/contracts/${contratId}/deliver`; + const headers = { + 'Content-Type': 'application/json', + Accept: "application/json", + Authorization: `Bearer ${token}`, + }; + + return REQUEST(url, "POST", headers); + }, + fulfill: async (contratId, token) =>{ + const url = `${spacetradersApiUrl}my/contracts/${contratId}/fulfill`; + const headers = { + 'Content-Type': 'application/json', + Accept: "application/json", + Authorization: `Bearer ${token}`, + }; + + return REQUEST(url, "POST", headers); + } + }, +}; diff --git a/scripts/main.js b/scripts/main.js new file mode 100644 index 0000000..44da34d --- /dev/null +++ b/scripts/main.js @@ -0,0 +1,166 @@ +// Copyright © 2023 Entreprise SkamCraft + +"use strict"; + +import AUTH from "./auth.js"; +import SpaceTraders from "./api.js"; + +$(document).ready(async function () { + //Auth + if (document.URL.includes("login.html")) { + $("#btn-login").on("click", () => { + AUTH.login(); + }); + return; + } + + if (document.URL.includes("register.html")) { + const factions = await SpaceTraders.Faction.list(10, 1); + factions.forEach((faction) => { + const option = ``; + $("#group-faction").append(option); + }); + + $("#btn-register").on("click", () => { + AUTH.register(); + }); + return; + } + + if (!(await AUTH.isLogin())) window.location.href = "login.html"; + + agent(); + + //Buttons + $("#btn-contract").on("click", () => { + contract(); + }); + $("#btn-faction").on("click", () => { }); + $("#btn-ship").on("click", () => { }); + $("#btn-system").on("click", () => { }); + $("#btn-logout").on("click", () => { + logout(); + }); +}); + +function loadPage(page) { + $("main").load(`templates/${page}.html`); +} + +function logout() { + localStorage.removeItem("token"); + window.location.href = "login.html"; +} + +async function agent() { + let token = localStorage.getItem("token"); + let agent = await SpaceTraders.Agent.get(token); + + $("#credits").text(agent.credits.toLocaleString() + " $"); +} + +async function contract() { + + const token = localStorage.getItem("token"); + const contracts = await SpaceTraders.Contract.list(token); + + $('main').empty() + + contracts.forEach(contrat => { + let img + let status + let card + console.log(contrat) + if (contrat.type = "PROCUREMENT") { + img = "/img/procurement.png" + } + else if (contrat.type = "TRANSPORT") { + img = "/img/transportation.png" + } + else { + img = "/img/shuttle.png" + } + if (contrat.accepted) { + status = "accepted" + card = + ` +
+ +
+
${contrat.factionSymbol}
+

${contrat.deadlineToAccept}

+

Status : ${status}

+ +
+
+ ` + } + else { + status = "on hold" + card = + ` +
+ +
+
${contrat.factionSymbol}
+

${contrat.deadlineToAccept}

+

Status : ${status}

+

Revenu : ${contrat.terms.payment.onAccepted} $

+ + +
+
+ ` + } + + + + $('main').append(card) + $('main').append(card) + $('main').append(card) + $('main').append(card) + $('main').append(card) + $('main').append(card) + $('main').append(card) + + + + + + $('#btn-infos').on('click', async function () { + const token = localStorage.getItem("token"); + const contrat = await SpaceTraders.Contract.get($(this).attr('contratID'), token); + const modal = ` + ` + $('main').append(modal) + }) + + $('#btn-accept').on('click', async function () { + const token = localStorage.getItem("token"); + await SpaceTraders.Contract.accept($(this).attr('contratID'), token); + $("#status-onhold").html("Status : accepté"); + document.getElementById("status-onhold").id = "status-accepted"; + agent(); + this.remove(); + }) + + }) +}