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

Fichiers ajouter

Browse Source
ruben
Tomé Rúben ago%!(EXTRA string=2 years)
parent e58bb9b956 f2e3a38625
commit bf774f69f5
4 changed files with 454 additions and 13 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. 115
      css/global.css
  2. 29
      index.html
  3. 157
      scripts/api.js
  4. 166
      scripts/main.js

115
css/global.css
Unescape View File

@ -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
}

29
index.html
Unescape View File

@ -1,15 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<title></title> <head>
<link rel="stylesheet" href="css/style.css"> <title></title>
<link rel="stylesheet" href="css/ui.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animation.css"> <link rel="stylesheet" href="css/ui.css">
<script src="js/lib/fabric.js"></script> <link rel="stylesheet" href="css/animation.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="js/lib/fabric.js"></script>
<script type="module" src="js/index.js" defer></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head> <script type="module" src="js/index.js" defer></script>
<body> </head>
</body> <body>
</html>
</body>
</html>

157
scripts/api.js
Unescape View File

@ -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);
}
},
};

166
scripts/main.js
Unescape View File

@ -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 = `<option>${faction.symbol}</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 =
`
<div class="card spacer" style="width: 20rem;">
<img src="${img}" class="card-img-top" alt="">
<div class="card-body">
<h5 style="color:white" class="card-title">${contrat.factionSymbol}</h5>
<p style="color:white" class="card-text">${contrat.deadlineToAccept}</p>
<p id="status-accepted" class="card-text">Status : ${status}</p>
<button id="btn-infos" contratID="${contrat.id}" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
</div>
</div>
`
}
else {
status = "on hold"
card =
`
<div class="card spacer" style="width: 20rem;">
<img src="${img}" class="card-img-top" alt="">
<div class="card-body">
<h5 style="color:white" class="card-title">${contrat.factionSymbol}</h5>
<p style="color:white" class="card-text">${contrat.deadlineToAccept}</p>
<p id="status-onhold" class="card-text">Status : ${status}</p>
<p id="revenu" class="card-text">Revenu : ${contrat.terms.payment.onAccepted} $</p>
<button id="btn-infos" contratID="${contrat.id}" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
<button id="btn-accept" contratID="${contrat.id}" class="btn-modify btn btn-primary" data-toggle="modal" data-target="#Modify" >Accepter</button>
</div>
</div>
`
}
$('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 = `
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="title-modal">Informations</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Contrat ID : ${contrat.id} <br>
Type : ${contrat.type} <br>
Faction : ${contrat.factionSymbol} <br>
DeadLine : ${contrat.deadlineToAccept}
</div>
<div class="modal-footer" id="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`
$('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();
})
})
}
Write Preview
Loading…
Cancel
Save