commit de fin de journé

ago%!(EXTRA string=2 years) · f1dca8ca5c
parent c8d3ab665f
commit f1dca8ca5c
14 changed files with 837 additions and 227 deletions
--- a/css/auth.css
+++ b/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;
 }
--- a/css/global.css
+++ b/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;
 }
--- a/css/style.css
+++ b/css/style.css
@ -1,6 +0,0 @@
 canvas {
    width: 100%;
    height: 600px;
    border: 2px solid black;
    border-radius: 5px;
 }
--- a/fonts/m42.TTF
+++ b/fonts/m42.TTF
--- a/img/Skamkraft.png
+++ b/img/Skamkraft.png
--- a/index.html
+++ b/index.html
@ -1,25 +1,68 @@
 <!-- Copyright © 2023 Entreprise SkamKraft -->
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr" class="html-index">
-<head>
+  <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <link
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap"
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+      rel="stylesheet"
-    <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>
+    <link
-    <title>Document</title>
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
-</head>
+      rel="stylesheet"
-<body>
+      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
-    <main class="main-window">
+      crossorigin="anonymous"
-        
+    />
-        <canvas id="canvas"></canvas>
+    <script
-        <div id="ships">
+      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>
--- a/js/api.js
+++ b/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);
    },
  },
 };
--- a/js/auth.js
+++ b/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;
    }
  },
 };
--- a/js/main.js
+++ b/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);
    });
  });
 }
--- a/js/test.js
+++ b/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é.');
      }
    }
  });
 }
--- a/login.html
+++ b/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>
--- a/register.html
+++ b/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>
--- a/templates/contract.html
+++ b/templates/contract.html
@ -0,0 +1 @@
 <div class="contrats"></div>
--- a/templates/faction.html
+++ b/templates/faction.html
@ -0,0 +1 @@
 <div id="faction" class="page-faction"></div>
		`@ -0,0 +1 @@`
							`<div id="faction" class="page-faction"></div>`