commit de fin de journé

css/auth.css

@@ -0,0 +1,165 @@
+/* Copyright © 2023 Entreprise SkamCraft */
+
+/* @font-face {
+  font-family: M42;
+  src: url(/fonts/m42.TTF);
+} */
+
+* {
+  font-family: "Montserrat", sans-serif;
+  font-size: 16px;
+  color: #ffffff;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  list-style: none;
+}
+
+body {
+  background-color: #212121;
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo img {
+  width: 80px;
+  padding: 20px;
+}
+
+.logo h4 {
+  font-size: 30px;
+}
+
+.form {
+  --input-focus: #a37b03;
+  --font-color: #323232;
+  --font-color-sub: #666666;
+  --bg-color: beige;
+  --main-color: black;
+  padding: 20px;
+  background: #eab308;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 20px;
+  border-radius: 20px;
+  border: 2px solid var(--main-color);
+  box-shadow: 4px 4px var(--main-color);
+  width: 20%;
+  margin: auto;
+  margin-top: 10%;
+}
+
+.title {
+  color: var(--font-color);
+  font-weight: 900;
+  font-size: 20px;
+}
+
+.title span {
+  color: var(--font-color-sub);
+  font-weight: 600;
+  font-size: 17px;
+}
+
+.input {
+  width: 250px;
+  height: 40px;
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  background-color: var(--bg-color);
+  box-shadow: 4px 4px var(--main-color);
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--font-color);
+  padding: 5px 10px;
+  outline: none;
+}
+
+.input::placeholder {
+  color: var(--font-color-sub);
+  opacity: 0.8;
+}
+
+.input:focus {
+  border: 2px solid var(--input-focus);
+}
+
+.select * {
+  color: var(--main-color);
+}
+
+.button-confirm {
+  width: 120px;
+  height: 40px;
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  background-color: var(--bg-color);
+  box-shadow: 4px 4px var(--main-color);
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--font-color);
+  cursor: pointer;
+}
+
+.button-confirm:active {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.link-connection {
+  position: relative;
+  display: inline-block;
+}
+
+.link-connection:hover {
+  cursor: pointer;
+  text-underline-offset: 2px;
+  text-decoration: underline;
+  transform: scale(1.1);
+  transition: 0.3s;
+}
+
+.alert {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 10%;
+  border-radius: 0.5rem;
+  border-width: 0.25rem;
+  border-color: #ef4444;
+  background-color: #fee2e2;
+  padding: 1rem;
+  width: 300px;
+  max-width: 90%;
+  text-align: center;
+}
+
+.alert-inner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #ef4444;
+}
+
+.icon {
+  height: 1.25rem;
+  width: 1.25rem;
+  fill: #d94848;
+}
+
+.message {
+  color: #d94848;
+  font-weight: 500;
+}
+
+.content {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: #d94848;
+}

css/global.css

@@ -0,0 +1,94 @@
+/* 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;
+}
+
+#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;
+}
+canvas {
+  width: 100%;
+  height: 600px;
+  border: 2px solid black;
+  border-radius: 5px;
+}

css/style.css

@@ -1,6 +0,0 @@
-canvas {
-    width: 100%;
-    height: 600px;
-    border: 2px solid black;
-    border-radius: 5px;
-}

index.html

@@ -1,25 +1,68 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css/style.css">
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
-    <script src="js/test.js" defer></script>
-    <title>Document</title>
-</head>
-<body>
-    <main class="main-window">
-        
-        <canvas id="canvas"></canvas>
-        <div id="ships">
+<html lang="fr" class="html-index">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.min.js"
+      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+      crossorigin="anonymous"
+    ></script>
+    <script type="module" src="js/main.js" defer></script>
+    <link rel="stylesheet" href="/css/global.css" />
+    <link rel="icon" href="img/logo.png" />
+    <title>SkamCraft</title>
+  </head>
 
+  <body>
+    <header id="header">
+      <div class="menu">
+        <div class="title-section">
+          <img src="img/Skamkraft.png" alt="Logo AppleTech.svg" />
+          <p>SkamCraft</p>
+          <div class="page-change-button">
+            <button id="btn-contract">Mes contracts</button>
+            <button id="btn-faction">Ma faction</button>
+            <button id="btn-ship">Mes vaisseaux</button>
+            <button id="btn-system">Systeme</button>
+          </div>
+        </div>
+        <div class="title-section">
+          <p id="credits">N/A Credtis</p>
+          <button id="btn-logout">Se deconnecter</button>
         </div>
+      </div>
+      <hr />
+    </header>
+
+    <main>
+      <canvas id="canvas"></canvas>
+      <div id="ships"></div>
     </main>
-</body>
-</html>
+
+    <footer id="footer">
+      <hr />
+      <p>SkamKraft &copy; 2023</p>
+    </footer>
+  </body>
+</html>

js/api.js

@@ -0,0 +1,170 @@
+// 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) {
+    console.log(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);
+    },
+  },
+
+  Ships: {
+    list: (token) => {
+      const url = `${spacetradersApiUrl}my/ships`;
+      const headers = {
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      };
+
+      return REQUEST(url, "GET", headers);
+    },
+
+    get: (token, symbol) => {
+      const url = `${spacetradersApiUrl}my/ships/${symbol}`;
+      const headers = {
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      };
+
+      return REQUEST(url, "GET", headers);
+    },
+
+    getPosition: (token, symbol) => {
+      const url = `${spacetradersApiUrl}my/ships/${symbol}/nav`;
+      const headers = {
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      };
+
+      return REQUEST(url, "GET", headers);
+    },
+
+    travel: (token, shipSymbol, waypointSymbol) => {
+      const url = `${spacetradersApiUrl}my/ships/${shipSymbol}/navigate`;
+      const headers = {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      };
+      const data = JSON.stringify({ waypointSymbol });
+
+      return REQUEST(url, "POST", headers, data);
+    },
+  },
+
+  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);
+    },
+  },
+};

js/auth.js

@@ -0,0 +1,83 @@
+// Copyright © 2023 Entreprise SkamCraft
+
+"use strict";
+
+import SpaceTraders from "./api.js";
+
+const $inputToken = $("#input-token");
+const $inputSymbol = $("#input-symbol");
+const $inputFaction = $("#input-faction");
+const $alert = document.querySelector("#box-alert");
+const $error = $("#error-message");
+
+const showError = (message) => {
+  $alert.removeAttribute("hidden");
+  $error.text(message);
+};
+
+const redirectToIndex = () => {
+  window.location.href = "/index.html";
+};
+
+export default {
+  login: async () => {
+    const token = $inputToken.val();
+
+    if (!token) {
+      showError("Token manquant");
+      return;
+    }
+
+    try {
+      await SpaceTraders.Agent.get(token);
+      localStorage.setItem("token", token);
+      redirectToIndex();
+    } catch {
+      showError("Token invalide");
+    }
+  },
+
+  register: async () => {
+    const symbol = $inputSymbol.val();
+
+    if (!symbol) {
+      showError("Symbol manquant");
+      return;
+    }
+
+    const faction = $inputFaction.val();
+
+    console.log(faction);
+
+    if (!faction) {
+      showError("Faction manquante");
+      return;
+    }
+
+    try {
+      const agent = await SpaceTraders.Agent.create(symbol, faction);
+
+      if (agent.token !== undefined) {
+        localStorage.setItem("token", agent.token);
+        redirectToIndex();
+      } else {
+        showError("Symbol ou faction invalide");
+      }
+    } catch {
+      showError("Erreur lors de l'inscription");
+    }
+  },
+
+  isLogin: async () => {
+    const token = localStorage.getItem("token");
+
+    if (!token) return false;
+
+    try {
+      await SpaceTraders.Agent.get(token);
+      return true;
+    } catch {
+      return false;
+    }
+  },
+};

js/main.js

@@ -0,0 +1,126 @@
+// 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", () => {
+    ship();
+  });
+  $("#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((contract) => {
+    let card = `<div class="card">
+      <div class="card-title">
+        <h1>${contract.id}</h1>
+      </div>
+    </div>;`;
+    $("main").append(card);
+  });
+}
+
+async function ship() {
+  const token = localStorage.getItem("token");
+  const ships = await SpaceTraders.Ships.list(token);
+  $("main").empty();
+  ships.forEach((ship) => {
+    let img = "/img/Skamkraft.png";
+    const card = `                            
+    <div class="card" style="width: 20rem;">
+      <img src="${img}" class="card-img-top" alt="">
+        <div class="card-body">
+          <h5 style="color:white" class="card-title">${ship}</h5>
+          <p style="color:white" class="card-text">Location : ${ship.nav.waypointSymbol}</p>
+          <p style="color:white" id="status" class="card-text">Status : ${ship.nav.status}</p>
+          <button id="btn-infos" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>                      
+        </div>
+    </div>
+  `;
+    $("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">${contrat.id}</h1>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+              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);
+    });
+  });
+}

js/test.js

@@ -1,200 +0,0 @@
-//Copyright © space tarders 2023
-
-'use strict'
-
-const canvas = document.getElementById("canvas");
-let w = canvas.width = canvas.offsetWidth;
-let h = canvas.height = canvas.offsetHeight;
-const widhtRect = 6;
-const heightRect = 6;
-const ctx = canvas.getContext("2d"); 
-let planets = [];
-let ships=[];
-let focusShips;
-//lister vaisseau
-const token="Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiREFOSUVMIiwidmVyc2lvbiI6InYyLjEuNCIsInJlc2V0X2RhdGUiOiIyMDIzLTEyLTAyIiwiaWF0IjoxNzAyMDM4NTcwLCJzdWIiOiJhZ2VudC10b2tlbiJ9.cSeOMFA6by3J3mElGL1xKg0p--C7Dcir6VARIs27QmHqTy2hM-pkJosADSLuo-bXHhXSESLlCcmSzS3BIa4T4v6HI0PH4QFpVNjHBSg7-lt1Hjhm4KkRUnmXdBEAeAXq18cbd6xScfRq0rpRNFzJZg5dRit3fjBZ3MSdmlRVroUs4hJaeSu0HLxD3GGRxXRFtvvHgMuFu6vqE1rq0PxTYQksuhu-GGpheCcIuQHNNIGnd0E2z-xzRAJYrRBjdctMDMv_u-RUeM4A6OwAFEczMYM3yDkZJP4qpVKAtriRUxJVkRsqHFLfEzWx7VikwLijN72gbhVzoIJzKh75-1kcyg"
-// Fonction pour obtenir la position de la souris par rapport au centre du canvas
-function getMousePosition(e, canvas) {
-  let rect = canvas.offset();
-  return {
-    x: e.clientX - rect.left,
-    y: e.clientY - rect.top
-  };
-}
-$('#ships').on('click',".btn",function(e){
-  focusShips = $(e.target).attr("data-id");
-  getShipPosition();
-})
-
-const ListMyShips = {
-    async: true,
-    crossDomain: true,
-    url: 'https://api.spacetraders.io/v2/my/ships',
-    method: 'GET',
-    headers: {
-      Accept: 'application/json',
-      Authorization: token
-    },
-  };
-  $.ajax(ListMyShips).done(function (response) {
-    ships.push(response);
-    response.data.forEach(data =>{
-      const card=`<button type="button" class="btn btn-primary btn-lg btn-block" data-id="${data.symbol}">${data.symbol}</button>`
-      $("#ships").append(card)
-    })
-  });
-
-//recuperer le systeme ou on est
-function getShipPosition(){
-  const settings = {
-    async: true,
-    crossDomain: true,
-    url: `https://api.spacetraders.io/v2/my/ships/${focusShips}/nav`,
-    method: 'GET',
-    headers: {
-      Accept: 'application/json',
-      Authorization:token
-    }
-  };
-  
- $.ajax(settings).done(function (response) {
-  console.log(ships)
-    planets.forEach(planet => {
-      if(planet.symbol == response.data.waypointSymbol)
-      {
-        let xPlanet=planet.x
-        let yPlanet=planet.y
-        drawShip(xPlanet,yPlanet)
-      }
-    })
-  });
-}
-
-
-function drawShip(x,y){
-  ctx.fillStyle = "rgb(3,67,210)";
-  ctx.fillRect(x / 3 + w / 2, y / 3 + h / 2, 10, 10);
-}                                       
-function getListWaypoint(system, page) {
-  return new Promise((resolve, reject) => {
-    const settings = {
-      async: true,
-      crossDomain: true,
-      url: `https://api.spacetraders.io/v2/systems/${system}/waypoints`,
-      method: 'GET',
-      headers: {
-        Accept: 'application/json'
-      },
-      data: {
-        limit: 20,
-        page: page
-      }
-    };
-
-    $.ajax(settings).done(function (response) {
-      const waypoints = response.data;
-
-      waypoints.forEach(waypoint => {
-        ctx.fillStyle = "rgb(0,0,0)";
-        ctx.fillRect(waypoint.x / 3 + w / 2, waypoint.y / 3 + h / 2, widhtRect, heightRect);
-      });
-
-      resolve(waypoints);
-    }).fail(function (error) {
-      reject(error);
-    });
-  });
-}
-
-function getAllWaypoints(system) {
-  const promises = [];
-
-  for (let i = 1; i < 5; i++) {
-    promises.push(getListWaypoint(system, i));
-  }
-  return Promise.all(promises);
-}
-
-function getSystem() {
-  const settings = {
-    async: true,
-    crossDomain: true,
-    url: 'https://api.spacetraders.io/v2/my/agent',
-    method: 'GET',
-    headers: {
-      Accept: 'application/json',
-      Authorization: token
-    }
-  };
-
-  $.ajax(settings).done(function (reponse) {
-    let metaSystem = reponse.data.headquarters.split("-");
-    getAllWaypoints(metaSystem[0] + "-" + metaSystem[1])
-      .then(waypointsArray => {
-        planets = [].concat(...waypointsArray);
-        console.log('Planets:', planets);
-        
-      })
-      .catch(error => {
-        console.error(error);
-      });
-  });
-}
-
-getSystem();
-
-
-
-function travelToPlanet(planet) {
-  const travelShip = {
-    async: true,
-    crossDomain: true,
-    url: `https://api.spacetraders.io/v2/my/ships/${focusShips}/navigate`,
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Accept: 'application/json',
-      Authorization: token
-    },
-    processData: false,
-    data: JSON.stringify({
-      waypointSymbol: planet.symbol
-    })
-  };
-
-  $.ajax(travelShip).done(function (response) {
-    alert(`Voyage vers ${planet.symbol} en cours...`);
-  }).fail(function (error) {
-    alert(error.responseJSON.error.message);
-  });
-}
-
-// Événement de clic sur le canvas
-$('#canvas').on('click', function (e) {
-  const mousePosition = getMousePosition(e, $('#canvas'));
-  checkClickedPlanet(mousePosition);
-});
-
- // Fonction pour vérifier si une planète a été cliquée
-function checkClickedPlanet(mousePosition) {
-  console.log(mousePosition.x)
-  planets.forEach(waypoint => {
-    // Vérifier si la position de la souris est à l'intérieur de la zone de la planète
-    if (
-      mousePosition.x >= waypoint.x / 3 + w / 2 &&
-      mousePosition.x <= waypoint.x / 3 + w / 2 + widhtRect &&
-      mousePosition.y >= waypoint.y / 3 + h / 2 &&
-      mousePosition.y <= waypoint.y / 3 + h / 2 + heightRect
-
-    ) {
-      const confirmation = confirm(`Voulez-vous voyager vers ${waypoint.symbol}?`);
-      if (confirmation) {
-          travelToPlanet(waypoint);
-      } else {
-        alert('Voyage annulé.');
-      }
-    }
-  });
-}
-
-

login.html

@@ -0,0 +1,65 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Skamkraft</title>
+    <link rel="icon" type="image/png" href="/img/Skamkraft.png" />
+
+    <link rel="stylesheet" href="/css/auth.css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500&display=swap"
+      rel="stylesheet"
+    />
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.min.js"
+      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+      crossorigin="anonymous"
+    ></script>
+    <script type="module" src="js/main.js" defer></script>
+  </head>
+  <body>
+    <div class="logo">
+      <img src="/img/Skamkraft.png" />
+      <h4>Skamkraft</h4>
+    </div>
+
+    <div class="form" aria-setsize="19">
+      <div class="title">
+        Bienvenue sur Skamkraft,<br /><span
+          >Entrez votre token pour continuer</span
+        >
+      </div>
+      <input id="input-token" class="input" placeholder="Token" type="text" />
+      <button id="btn-login" class="button-confirm">Continuer →</button>
+      <div class="link-connection">
+        <a class="animation-underline" href="register.html">Sign Up</a>
+      </div>
+    </div>
+
+    <div id="box-alert" class="alert" hidden>
+      <div class="alert-inner">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="icon"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+
+        <strong class="message"> Quelque chose s'est mal passé</strong>
+      </div>
+
+      <p id="error-message" class="content"></p>
+    </div>
+  </body>
+</html>

register.html

@@ -0,0 +1,68 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Skamkraft</title>
+    <link rel="icon" type="image/png" href="/img/Skamkraft.png" />
+
+    <link rel="stylesheet" href="/css/auth.css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500&display=swap"
+      rel="stylesheet"
+    />
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.min.js"
+      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+      crossorigin="anonymous"
+    ></script>
+    <script type="module" src="js/main.js" defer></script>
+  </head>
+  <body>
+    <div class="logo">
+      <img src="/img/Skamkraft.png" />
+      <h4>Skamkraft</h4>
+    </div>
+
+    <div class="form" aria-setsize="19">
+      <div class="title">
+        Bienvenue sur Skamkraft,<br />
+        <span>Entrez votre symbol pour continuer</span>
+      </div>
+      <input id="input-symbol" class="input" placeholder="Symbol" type="text" />
+      <select id="input-faction" class="input select">
+        <option value="" disabled selected>Faction</option>
+        <optgroup id="group-faction" label="---------"></optgroup>
+      </select>
+      <button id="btn-register" class="button-confirm">Continuer →</button>
+      <div class="link-connection">
+        <a class="animation-underline" href="login.html">Login</a>
+      </div>
+    </div>
+
+    <div id="box-alert" class="alert" hidden>
+      <div class="alert-inner">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="icon"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+
+        <strong class="message"> Quelque chose s'est mal passé</strong>
+      </div>
+
+      <p id="error-message" class="content"></p>
+    </div>
+  </body>
+</html>

templates/contract.html

@@ -0,0 +1 @@
+<div class="contrats"></div>

templates/faction.html

@@ -0,0 +1 @@
+<div id="faction" class="page-faction"></div>