Add spaceship

css/style.css

@@ -1,5 +1,5 @@
 canvas {
-    width: 50%;
+    background-color: rgb(0, 0, 43);
     border: 2px solid black;
     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/Render/renderer.js

@@ -1,41 +0,0 @@
-class renderer {
-    constructor(canvas) {
-        this.canvas = canvas;
-        this.ctx = canvas.getContext("2d");
-        this.waypoints = [];
-        this.ships = [];
-    }
-    
-    drawSystem() {
-        const canvas = document.getElementById("canvas");
-        let w = canvas.width;
-        let h = canvas.height; 
-        const ctx = canvas.getContext("2d");
-
-        this.waypoints.forEach(waypoint => {
-            switch (waypoint.type) {
-                case "PLANET": 
-                    drawWaypoint(waypoint, ctx, w/2, h/2, 'green');
-                    break;
-                case "ASTEROID": 
-                    drawWaypoint(waypoint, ctx, w/2, h/2, 'blue');
-                    break;
-                case "GAS_GIANT": 
-                    drawWaypoint(waypoint, ctx, w/2, h/2, 'red');
-                    break;    
-            }
-        
-        });
-    }
-
-    drawShips() {
-
-    }
-
-    drawWaypoint(wayPoint, ctx, w, h, color) {
-        ctx.beginPath();
-        ctx.fillStyle = color;
-        ctx.arc(wayPoint.x/offset.x + w, wayPoint.y/offset.y + h, 1, 0, 2 * Math.PI);
-        ctx.fill();
-    }
-}

js/TEST_F.JS

@@ -0,0 +1,154 @@
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQ0hBRE9XIiwidmVyc2lvbiI6InYyLjEuNSIsInJlc2V0X2RhdGUiOiIyMDI0LTAxLTEzIiwiaWF0IjoxNzA2MjU0MjAzLCJzdWIiOiJhZ2VudC10b2tlbiJ9.ceCEMlAUIr4dxU1BWlpQwzyh8GxaphPM5qyFhV0qE5YX-p26x0AZ7BHdJKVpbIYENSIMks3sTDLfDu7bcHAOzCxSpR9XhNmJ1s3g84J4Sn6NaVHVPFalJiW8K3Cg3t7H6CPNG5FMpwjzGzn0M0EjSMS6EabIDC2wpPXvfktHMR3Z-ISflobnkkCwaNTmQJtumSZfDuwdkUnH_zwfedfqVGpBCAUIzlNcwB1ha19QXfx5h4lVt7aefPU2znEIMwBtsr1vx1uad0TqhOXF8x2BI_lWAQIeGT_dnPbhhoF0jBQEy9zNQXkZSeS0682j_D_yiVwnNlByZoI3VF0KesKB3A";
+//décalage
+let offset = {
+    x: 2,
+    y: 2
+};
+let max = 40;
+let min = 35;
+let w = 1260;
+let h = 870;
+const canvas = new fabric.Canvas("canvas",{
+    width: w,
+    height: h,
+    backgroundColor:"rgb(7, 18, 41)",
+    renderOnAddRemove: false 
+});
+
+canvas.renderAll();
+let planets = [];
+
+function getAgent() {
+    const settings = {
+        async: true,
+        crossDomain: true,
+        url: 'https://api.spacetraders.io/v2/my/agent',
+        method: 'GET',
+        headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${token}`
+        }
+    };
+    $.ajax(settings).done(function (reponse) {
+        let metaSystem = reponse.data.headquarters.split("-");
+        getSystem(metaSystem[0] + "-" + metaSystem[1]);
+    });
+}
+
+function getSystem(system) {
+    const settings = {
+        async: true,
+        crossDomain: true,
+        url: `https://api.spacetraders.io/v2/systems/${system}`,
+        method: 'GET',
+        headers: {
+            Accept: 'application/json'
+        }
+    };
+
+    $.ajax(settings).done(function (response) {
+        offsetOrbits(response.data.waypoints);
+        drawSystem(response.data.waypoints);
+    });
+}
+function offsetOrbits(waypoints){
+    waypoints.forEach((waypoint) => {
+        if (waypoint.orbits) {
+            let x = Math.floor(Math.random() * max - Math.random() * max);
+            let y =  Math.floor(Math.random() * max - Math.random() * max);
+            waypoint.orbitaldistance = {
+                x: x,
+                y: y
+            };
+            waypoint.rotation = 3;
+        }
+    });
+}
+let ring = [];
+
+function drawSystem(wayPoints) {
+    if(wayPoints) {
+        wayPoints.forEach(wayPoint => {
+            drawRingWaypoint(wayPoint);
+        });
+        wayPoints.forEach(wayPoint => {
+            drawWaypoint(wayPoint);
+        })
+    }
+}
+
+function drawRingWaypoint(wayPoint)
+{
+    let distanceX = wayPoint.x / offset.x;
+    let distanceY = wayPoint.y / offset.y;
+    let pythagoreX = distanceX * distanceX;
+    let pythagoreY = Math.pow(distanceY, 2);
+    console.log(pythagoreX, pythagoreY)
+    //pythagoreX = pythagoreX/offset.x;
+    //pythagoreY = pythagoreY/offset.y;
+    let pythagorePlanet = Math.sqrt(pythagoreX + pythagoreY);
+    console.log(pythagorePlanet);
+
+    let circle = new fabric.Circle({
+        radius: pythagorePlanet, fill: 'transparent', left: (canvas.width/2) - pythagorePlanet, top: (canvas.height/2)-pythagorePlanet
+    });
+    circle.set({ strokeWidth: 0.5, stroke: 'rgba(10,53,66,2)', selectable: false });
+    
+    canvas.add(circle);
+}
+
+function drawRing()
+{
+    for(let i = 0; i < 4; i++){
+        let random = Math.random() * (250 - 100) + 100;
+        // create a circle
+        console.log(canvas.width)
+        let circle = new fabric.Circle({
+            radius: random, fill: 'transparent', left: (canvas.width/2)-random, top: (canvas.height/2)-random
+        });
+        circle.set({ strokeWidth: 3, stroke: 'rgba(10,53,66,2)' });
+        
+        canvas.add(circle);
+    }
+    for(let i = 0; i < 4; i++){
+        let random = Math.random() * (400 - 250) + 250;
+        // create a circle
+        let circle = new fabric.Circle({
+            radius: random, fill: 'transparent', left: (canvas.width/2)-random, top: (canvas.height/2)-random
+        });
+        circle.set({ strokeWidth: 3, stroke: 'rgba(10,53,66,2)' });
+        
+        canvas.add(circle);
+    }
+    for(let i = 0; i < 4; i++){
+        let random = Math.random() * (550 - 400) + 400;
+        // create a circle
+        let circle = new fabric.Circle({
+            radius: random, fill: 'transparent', left: (canvas.width/2)-random, top: (canvas.height/2)-random
+        });
+        circle.set({ strokeWidth: 3, stroke: 'rgba(10,53,66,2)' });
+        
+        canvas.add(circle);
+    }
+}
+
+function drawWaypoint(wayPoint) {
+    let radius = 5;
+    let circle = new fabric.Circle({
+        radius: radius, fill: 'white', left: (wayPoint.x/2 + canvas.width/2) -radius, top: (wayPoint.y/2 + canvas.height/2)-radius
+    });
+    circle.set({ strokeWidth: 0.5, stroke: 'rgba(255,255,255,255)', selectable: false});
+    canvas.add(circle);
+}
+function movePlanets() {
+    planets.forEach(waypoint => {
+        if(waypoint.rotation != 0){
+        }
+    });
+}
+getAgent();
+setTimeout(function animate() {
+    movePlanets();
+    canvas.renderAll();
+    setTimeout(animate, 1000);
+}, 10);

js/index.js

@@ -0,0 +1,6 @@
+const canvas = new fabric.Canvas("canvas",{
+    width: 500,
+    height: 500,
+    backgroundColor:"black"
+});
+canvas.renderAll();

js/main.js

@@ -1,9 +1,33 @@
-let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQU5OTk5VTEFYMTIyNSIsInZlcnNpb24iOiJ2Mi4xLjEiLCJyZXNldF9kYXRlIjoiMjAyMy0xMS0wNCIsImlhdCI6MTcwMDIyNDU5MSwic3ViIjoiYWdlbnQtdG9rZW4ifQ.r05mWtD5FjC4s6Td-ycmHdzL7C2s75lz3q7OBmWeCqUUZ1ejPsRGQRWJDPmIh1kAqO4D9FFs3GCTPZUn1KsnQ-xmDvsIi_mqC1gJV-Q0irI7gwfsGXbfLaVCXo-Q98C_QWRh-O_xkrbhJkCcvnwdEhZm7FnZ3PL4XXKrG0XNa98JrnmG0qlz0cv8V9Q0sSIwXZbvA9BrhuV8PK7_YzPc6LZuNqgPeKiX_B-tSIHHl6Sr1EzuydnczmuS-xKQnbhmcqnpaCXzQmJr7tA8KLgu70KqpPCvA8AI6PLmBlvPWtZ20RdzezqlBh6S9SrBzQ9R0zr_9RyJxq28ws2jnHpVPw";
+//Copyright © 2023 Entreprise SpaceTarders
+//variables de rotation
+let msPrev = window.performance.now()
+const fps = 60
+const msPerFrame = 1000 / fps
+let frames = 0
+//variables de tailles de planète
+let xxl = 20
+let xl = 15
+let l = 10
+let m = 5
+let s = 4
+let xs = 3 
+let max = 40;
+let min = 35;
+//jeton d'agent
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQ0hBRE9XIiwidmVyc2lvbiI6InYyLjEuNSIsInJlc2V0X2RhdGUiOiIyMDI0LTAxLTEzIiwiaWF0IjoxNzA2MjU0MjAzLCJzdWIiOiJhZ2VudC10b2tlbiJ9.ceCEMlAUIr4dxU1BWlpQwzyh8GxaphPM5qyFhV0qE5YX-p26x0AZ7BHdJKVpbIYENSIMks3sTDLfDu7bcHAOzCxSpR9XhNmJ1s3g84J4Sn6NaVHVPFalJiW8K3Cg3t7H6CPNG5FMpwjzGzn0M0EjSMS6EabIDC2wpPXvfktHMR3Z-ISflobnkkCwaNTmQJtumSZfDuwdkUnH_zwfedfqVGpBCAUIzlNcwB1ha19QXfx5h4lVt7aefPU2znEIMwBtsr1vx1uad0TqhOXF8x2BI_lWAQIeGT_dnPbhhoF0jBQEy9zNQXkZSeS0682j_D_yiVwnNlByZoI3VF0KesKB3A";
+//décalage
 let offset = {
-    x: 10,
+    x: 2,
-    y: 10
+    y: 2
 };
-
+//Instanciation du canevas
+const canvas = document.getElementById("canvas");
+canvas.style="width:100%;height:100vh;"
+let w = canvas.width = canvas.offsetWidth;
+let h = canvas.height = canvas.offsetHeight; 
+const ctx = canvas.getContext("2d");
+let wayPoints = null
+//Initialisation du jeu
 function initGame() {
     const settings = {
         async: true,
@@ -22,7 +46,7 @@ function initGame() {
         console.log(response);
     });
 }
-
+//Récuperer l'agent
 function getAgent() {
     const settings = {
         async: true,
@@ -49,12 +73,12 @@ function getAgent() {
         getSystem(metaSystem[0] + "-" + metaSystem[1]);
     });
 }
-
+//Récuperer les planètes
 function getWayPoint(wayPoint) {
     const settings = {
         async: true,
         crossDomain: true,
-        url: `https://api.spacetraders.io/v2/systems/systemSymbol/waypoints/waypointSymbol`,
+        url: `https://api.spacetraders.io/v2/systems/systemSymbol/waypoints/${wayPoint}`,
         method: 'GET',
         headers: {
             Accept: 'application/json'
@@ -65,7 +89,7 @@ function getWayPoint(wayPoint) {
         console.log(response);
     });
 };
-
+//Récuperer le système
 function getSystem(system) {
     const settings = {
         async: true,
@@ -76,10 +100,127 @@ function getSystem(system) {
             Accept: 'application/json'
         }
     };
-      
+
     $.ajax(settings).done(function (response) {
-        drawSystem(response.data.waypoints);
+        response.data.waypoints.forEach((waypoint) => {
+            waypoint.rotation = 0
+            if (waypoint.orbits) {
+                let x = Math.floor(Math.random() * max - Math.random() * max);
+                let y =  Math.floor(Math.random() * max - Math.random() * max);
+                waypoint.x += x > 0 ? x + min : x - min;
+                waypoint.y += y > 0 ? y + min : y - min;
+            }
+        })
+        wayPoints = response.data.waypoints;
     });
 }
+// function drawBackground(){
+//     // Create gradient
+//     var grd = ctx.createRadialGradient(650, 450, 5, 600, 450, 550);
+//     grd.addColorStop(0, "rgb(15, 38, 88)");
+//     grd.addColorStop(1, "rgb(13, 7, 46)");
+//     // Fill with gradient
+//     ctx.fillStyle = grd;
+//     ctx.fillRect(0, 0, w, h);
+//     ctx.clearRect(0, 0, w, h);
+// }
+
+//dessiner le système
+function drawSystem() {
+    window.requestAnimationFrame(drawSystem)
+    ctx.fillStyle = "rgb(0,0,0)"
+    ctx.fillRect(0, 0, w, h);
+    const msNow = window.performance.now()
+    const msPassed = msNow - msPrev
+  
+    if (msPassed < msPerFrame) return
+  
+    const excessTime = msPassed % msPerFrame
+    msPrev = msNow - excessTime
+  
+    frames++
+    if(wayPoints) {
+    wayPoints.forEach(wayPoint => {
+            switch (wayPoint.type) {
+                //PLANÈTE
+                case "PLANET":
+                    //QG
+                    if(wayPoint.x/offset.x + w  == 0 && wayPoint.y/offset.y + h == 0){
+                        drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(255, 255, 0)', xxl); //jaune clair
+                    }
+                    else{
+                        drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(6, 218, 52)', m); //vert clair
+                    }
+                    break;
+                //PLANÈTE GAZEUSE
+                case "GAS_GIANT": 
+                    drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(255, 174, 0)', l); //orange clair
+                    break;
+                //LUNE
+                case "MOON":
+                    drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 255, 255)', xs) //blanc
+                    break;
+                //STATION EN ORBITE
+                case "ORBITAL_STATION":
+                    drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(0, 153, 255)', 4, s) //bleu clair
+                    break;
+                //PORTAIL
+                case "JUMP_GATE":
+                    wayPoint.rotation += Math.PI / 50
+                    drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', 5, xl) //violet
+                    break;
+                //ASTÉROÏDE
+                case "ASTEROID":
+                    wayPoint.rotation += Math.PI / 200
+                    drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(163, 163, 163)', 5, m) //bleu clair
+                    break;
+                case "ASTEROID_FIELD":
+                case "ASTEROID_BASE":
+                case "ENGINEERED_ASTEROID":  
+                    drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 255)', m) //jaune
+                    break;
+                //NEBULEUSE
+                case "NEBULA": 
+                    drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', m) //violet fluo
+                    break; 
+                //CHAMP DE DÉBRIS
+                case "DEBRIS_FIELD":
+                    drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(107, 106, 143)', m) //gris/bleu 
+                    break;
+                //PUIT DE GRAVITÉ
+                case "GRAVITY_WELL":
+                case "ARTIFICIAL_GRAVITY_WELL":    
+                    drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb()') //
+                    break;
+                //STATION ESSENCE
+                case "FUEL_STATION":
+                    drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 0)', 4, m) //rouge
+                    break;    
+            }
+        });
+    }
+}
+//dessiner un cercle
+function drawWaypointCircle(wayPoint, ctx, w, h, color, radius) {
+    ctx.beginPath();
+    ctx.fillStyle = color;
+    ctx.arc(wayPoint.x/offset.x + w, wayPoint.y/offset.y + h, radius, 0, 2 * Math.PI);
+    ctx.fill()
+}
+//dessiner une forme polygonale
+function drawWaypointPolygone(wayPoint, ctx, w, h, color, nbCote, radius){
+    let numberOfSides = nbCote;
+   	let x = wayPoint.x/offset.x + w;
+    let y = wayPoint.y/offset.y + h;
+	let angle = 2*Math.PI/numberOfSides;
+    ctx.beginPath();
+    ctx.fillStyle = color;
+    ctx.moveTo (x +  radius*Math.cos(wayPoint.rotation + 0), y +  radius*Math.sin(wayPoint.rotation + 0));          
+ 		for (let i = 0; i < numberOfSides; i++) {
+			 ctx.lineTo (x + radius*Math.cos(wayPoint.rotation + (i * angle)), y + radius*Math.sin(wayPoint.rotation +(i * angle)));
+		}
+ 	ctx.fill();
+}
 
-getAgent();
+drawSystem();
+getAgent();

js/test.js

@@ -0,0 +1,16 @@
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQ0hBRE9XIiwidmVyc2lvbiI6InYyLjEuNSIsInJlc2V0X2RhdGUiOiIyMDI0LTAxLTEzIiwiaWF0IjoxNzA2MjU0MjAzLCJzdWIiOiJhZ2VudC10b2tlbiJ9.ceCEMlAUIr4dxU1BWlpQwzyh8GxaphPM5qyFhV0qE5YX-p26x0AZ7BHdJKVpbIYENSIMks3sTDLfDu7bcHAOzCxSpR9XhNmJ1s3g84J4Sn6NaVHVPFalJiW8K3Cg3t7H6CPNG5FMpwjzGzn0M0EjSMS6EabIDC2wpPXvfktHMR3Z-ISflobnkkCwaNTmQJtumSZfDuwdkUnH_zwfedfqVGpBCAUIzlNcwB1ha19QXfx5h4lVt7aefPU2znEIMwBtsr1vx1uad0TqhOXF8x2BI_lWAQIeGT_dnPbhhoF0jBQEy9zNQXkZSeS0682j_D_yiVwnNlByZoI3VF0KesKB3A";
+
+// create a wrapper around native canvas element (with id="c")
+var canvas = new fabric.Canvas('test');
+
+// create a rectangle object
+var rect = new fabric.Rect({
+    left: 100,
+    top: 100,
+    fill: 'red',
+    width: 100,
+    height: 100
+});
+      
+// "add" rectangle onto canvas
+canvas.add(rect);

templates/index.html

@@ -1,19 +1,31 @@
+<!-- Copyright © 2023 Entreprise SpaceTarders -->
 <!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">
+    <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/main.js"></script>
+    <script src ="/js/fabric.min.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>

templates/text.html

@@ -0,0 +1,31 @@
+<!-- Copyright © 2023 Entreprise SpaceTarders -->
+<!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/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/TEST_F.JS" defer></script>
+    <title>Space Traders : by SKAMKRAFT</title>
+</head>
+<body>
+    <header>
+        <div id="title">SpaceTraders</div>
+    </header>
+    <main class="main-window">
+        <br>
+        <canvas id="test"></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>

token

@@ -1 +1 @@
-eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQU5OTk5VTEFYMTIyNSIsInZlcnNpb24iOiJ2Mi4xLjEiLCJyZXNldF9kYXRlIjoiMjAyMy0xMS0wNCIsImlhdCI6MTcwMDIyNDU5MSwic3ViIjoiYWdlbnQtdG9rZW4ifQ.r05mWtD5FjC4s6Td-ycmHdzL7C2s75lz3q7OBmWeCqUUZ1ejPsRGQRWJDPmIh1kAqO4D9FFs3GCTPZUn1KsnQ-xmDvsIi_mqC1gJV-Q0irI7gwfsGXbfLaVCXo-Q98C_QWRh-O_xkrbhJkCcvnwdEhZm7FnZ3PL4XXKrG0XNa98JrnmG0qlz0cv8V9Q0sSIwXZbvA9BrhuV8PK7_YzPc6LZuNqgPeKiX_B-tSIHHl6Sr1EzuydnczmuS-xKQnbhmcqnpaCXzQmJr7tA8KLgu70KqpPCvA8AI6PLmBlvPWtZ20RdzezqlBh6S9SrBzQ9R0zr_9RyJxq28ws2jnHpVPw
+eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUEVVU0RPU0FDSEEiLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDI1Mzk4NjUsInN1YiI6ImFnZW50LXRva2VuIn0.QL4rSruHd8pjNczeZQ3S7gof7TRnwZKqQBvkojUXgmzRrWiDZVw65kt1UBns0zHAhZF-m-bvxfUBik01uIzc-_jSO63ZndquPFmv_UY3HBkVK7UKoSaxAp_NveJsE1TOpTotUChlMd1Sv7RuyeR9fso2eN3-mBEoE5ukWmGVDfnOYefuWORhisqIkh4ti3QpaV-obycZ4XGV2ukqkiNdHqR3MQJR99e2nCEZEsarNKTgm6mgn-qCCNv4xQUGwhNbD5_p-jPqQ088vuFCeZi8j6kf7-fmT5sysBxEA5nvNPDIEL1XMuzs7N66WpiP1uc7I1Ph164m2epV9vmEvzthCw