images de planètes pixelisées et interfaces login/index

css/style.css

@@ -1,5 +0,0 @@
-/* Copyright © 2023 Entreprise SpaceTarders */
-canvas {
-    border: 2px solid rgb(15, 38, 88);
-    border-radius: 5px;
-}

css/styleindex.css

@@ -0,0 +1,37 @@
+/* Copyright © 2023 Entreprise SpaceTarders */
+html{
+    background-color: rgb(7, 18, 41);
+}
+main{
+    display: flex;
+    justify-content: center;
+}
+#title{
+    font-family: M42;
+    font-size:15px;
+    margin-left: 10px;
+    margin-top: 10px;
+    color: white;
+    display: flex;
+    justify-content: left;
+}
+#menu {
+    display: flex;
+    justify-content: center;
+    justify-content: space-between;
+}
+#menu button{
+    margin-top: 15px;
+    font-family: M42;
+    color: white;
+    font-size: 11px;
+    background-color: rgb(20, 20, 32); 
+}
+canvas {
+    border: 2px solid rgb(7, 18, 41);
+    border-radius: 5px;
+}
+@font-face {
+    font-family: M42;
+    src: url(/fonts/m42.TTF);
+  }

css/stylelogin.css

@@ -0,0 +1,50 @@
+/* Copyright © 2023 Entreprise SpaceTarders */
+html{
+    background-color: rgb(7, 18, 41);
+}
+img{
+    width: 10%;
+    margin-right: 30px;
+}
+.text{
+    font-size:8px;
+    font-family: M42;
+    color: white;
+}
+header p{
+    display: flex;
+    justify-content: center;
+}
+#title{
+    font-family: M42;
+    font-size:20px;
+    margin-left: 10px;
+    margin-top: 50px;
+    color: white;
+    display: flex;
+    justify-content: center;
+}
+#menu {
+    display: flex;
+    justify-content: center;
+    justify-content: space-between;
+}
+#menu button{
+    margin-top: 15px;
+    font-family: M42;
+    color: white;
+    font-size: 15px;
+    background-color: rgb(20, 20, 32); 
+}
+footer p{
+    position: fixed;
+    bottom: 0;
+}
+canvas {
+    border: 2px solid rgb(7, 18, 41);
+    border-radius: 5px;
+}
+@font-face {
+    font-family: M42;
+    src: url(/fonts/m42.TTF);
+  }

js/TEST_F.JS

@@ -1,14 +1,13 @@
-let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUFJSUk9VVCIsInZlcnNpb24iOiJ2Mi4xLjQiLCJyZXNldF9kYXRlIjoiMjAyMy0xMi0wMiIsImlhdCI6MTcwMjAzODIwOCwic3ViIjoiYWdlbnQtdG9rZW4ifQ.iCm_0x9shooAE7028tBHw-p8NAXf8_EWBZl-wnqIpMIIRCe8A6rzEkaKnX-1OORBh31YQTekSOLdP5_FnA0AEP2KP00YzGEZWQBxSTndkpivtcS6X-arc4F6yJGvcLfT1m3ZD47LGylTELR3I-sXomX2Va8_13oN6kdDJyXpVWFe5OIC01bP_cwHpjztUTO-8ASPJ_8cLZH6GTSAzy5ozF1teTEdfq93s2i9oTPhynQKogdzaXAUIkAXv7hYv5XUbevorRaCfTl52CU7WK5__3org5ardHuITmbl0QyHYIWtkbpcZLcawfEGG0EK66iqwefdXIkTeWC3T1b_ERShMw";
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUEVVU0RPU0FDSEEiLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDI1Mzk4NjUsInN1YiI6ImFnZW50LXRva2VuIn0.QL4rSruHd8pjNczeZQ3S7gof7TRnwZKqQBvkojUXgmzRrWiDZVw65kt1UBns0zHAhZF-m-bvxfUBik01uIzc-_jSO63ZndquPFmv_UY3HBkVK7UKoSaxAp_NveJsE1TOpTotUChlMd1Sv7RuyeR9fso2eN3-mBEoE5ukWmGVDfnOYefuWORhisqIkh4ti3QpaV-obycZ4XGV2ukqkiNdHqR3MQJR99e2nCEZEsarNKTgm6mgn-qCCNv4xQUGwhNbD5_p-jPqQ088vuFCeZi8j6kf7-fmT5sysBxEA5nvNPDIEL1XMuzs7N66WpiP1uc7I1Ph164m2epV9vmEvzthCw";
 //décalage
 let offset = {
     x: 2,
     y: 2
 };
-
 let max = 40;
 let min = 35;
 let w = 1260;
-let h = 850;
+let h = 870;
 const canvas = new fabric.Canvas("canvas",{
     width: w,
     height: h,
@@ -65,31 +64,25 @@ function offsetOrbits(waypoints){
         }
     });
 }
-
 function drawSystem(wayPoints) {
     if(wayPoints) {
         wayPoints.forEach(wayPoint => {
-            drawWaypointCircle(wayPoint);
+            drawWaypoint(wayPoint);
         });
     }
 }
-
-function drawWaypointCircle(wayPoint) {
-    let rect = new fabric.Rect({
-        left: wayPoint.x/offset.x + w/2,
-        top: wayPoint.y/offset.y + h/2,
-        fill: 'white',
-        width: 2,
-        height: 2,
-    });
-    wayPoint.rect = rect;
+function drawWaypoint(wayPoint) {
+    fabric.Image.fromURL('http://127.0.0.1:5500/img/planets/planetproto.png', function(planet) {
+        planet.set({left: wayPoint.x/offset.x + w/2});
+        planet.set({top: wayPoint.y/offset.y+ h/2});
+        planet.set({selectable: false});
+        canvas.add(planet);
+      });
     planets.push(wayPoint);
-    canvas.add(rect);
 }
 function movePlanets() {
     planets.forEach(waypoint => {
         if(waypoint.rotation != 0){
-
         }
     });
 }

templates/index.html

@@ -5,20 +5,27 @@
     <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">
+    <link rel="stylesheet" href="../css/styleindex.css">
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
     <script src ="/js/fabric.min.js" defer></script>
-    <script src="/js/main.js" defer></script>
-    <title>Space traders</title>
+    <script src="/js/TEST_F.JS" defer></script>
+    <title>Space Traders : by SKAMKRAFT</title>
 </head>
 <body>
+    <header>
+        <div id="title">SpaceTraders</div>
+    </header>
     <main class="main-window">
-        <input id="token" type="text">
         <br>
         <canvas id="canvas"></canvas>
     </main>
     <footer>
-        
+        <div id="menu">
+            <button id="agentbutton">Agent</button>
+            <button id="factionbutton">Faction</button>
+            <button id="shipbutton">Vaisseau</button>
+            <button id="contractbutton">Contrats</button>
+        </div>
     </footer>
 </body>
 </html>

templates/login.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/stylelogin.css">
+    <title>Login</title>
+</head>
+<body>
+    <header>
+        <div id="title">
+            <img src="/img/logo/logoblancnotext.png" alt="logo">
+            <h1>SpaceTraders</h1>
+        </div>
+        <p class="text">API loaded with SKAMKRAFT</p>
+    </header>
+    <main>
+
+    </main>
+    <footer>
+        <p class="text">Copyright 2023 Entreprise SKAMKRAFT</p>
+    </footer>
+</body>
+</html>

token

@@ -1 +1 @@
-eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUFJSUk9VVCIsInZlcnNpb24iOiJ2Mi4xLjQiLCJyZXNldF9kYXRlIjoiMjAyMy0xMi0wMiIsImlhdCI6MTcwMjAzODIwOCwic3ViIjoiYWdlbnQtdG9rZW4ifQ.iCm_0x9shooAE7028tBHw-p8NAXf8_EWBZl-wnqIpMIIRCe8A6rzEkaKnX-1OORBh31YQTekSOLdP5_FnA0AEP2KP00YzGEZWQBxSTndkpivtcS6X-arc4F6yJGvcLfT1m3ZD47LGylTELR3I-sXomX2Va8_13oN6kdDJyXpVWFe5OIC01bP_cwHpjztUTO-8ASPJ_8cLZH6GTSAzy5ozF1teTEdfq93s2i9oTPhynQKogdzaXAUIkAXv7hYv5XUbevorRaCfTl52CU7WK5__3org5ardHuITmbl0QyHYIWtkbpcZLcawfEGG0EK66iqwefdXIkTeWC3T1b_ERShMw
+eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUEVVU0RPU0FDSEEiLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDI1Mzk4NjUsInN1YiI6ImFnZW50LXRva2VuIn0.QL4rSruHd8pjNczeZQ3S7gof7TRnwZKqQBvkojUXgmzRrWiDZVw65kt1UBns0zHAhZF-m-bvxfUBik01uIzc-_jSO63ZndquPFmv_UY3HBkVK7UKoSaxAp_NveJsE1TOpTotUChlMd1Sv7RuyeR9fso2eN3-mBEoE5ukWmGVDfnOYefuWORhisqIkh4ti3QpaV-obycZ4XGV2ukqkiNdHqR3MQJR99e2nCEZEsarNKTgm6mgn-qCCNv4xQUGwhNbD5_p-jPqQ088vuFCeZi8j6kf7-fmT5sysBxEA5nvNPDIEL1XMuzs7N66WpiP1uc7I1Ph164m2epV9vmEvzthCw