start work on canvas

.gitignore

@@ -0,0 +1 @@
+/.vs/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "js/skama_code"]
+	path = js/skama_code
+	url = https://github.com/anulax1225/skama_code.git

LICENSE

@@ -0,0 +1,2 @@
+DO NOT USE THIS CODE OR LOOK AT IT IF YOU ARE NOT ALLOWED TO
+IF YOU DO YOU CAN USE OR TEACH THE KNOWLEAGE YOU ACQUEIRED.

README.md

@@ -0,0 +1,15 @@
+# Skamcraft
+
+## Start 
+* Start with live server in VsCode to get full functionnality.
+* Start with php : 
+``` bash
+    cd /.../Skamcraft
+    php -S 127.0.0.1:80
+```
+
+## Norm
+* ``` ; ``` at the end of each line.
+* snack_case for functions and variables.
+* UpperCamelCase for Classes.
+* all in english.

css/animation.css

@@ -0,0 +1,15 @@
+/* Copyright © 2023 Entreprise SkamKraft */
+
+
+.ext-modal[open] {
+    animation: myFadeIn 2.0s ease normal;
+}
+  
+@keyframes myFadeIn{
+    from {
+      bottom: 100%;
+    }
+    to {
+      bottom: 0%;
+    }
+}

css/style.css

@@ -1,5 +1,195 @@
-canvas {
+/* Copyright © 2023 Entreprise SkamKraft */
-    width: 50%;
+
-    border: 2px solid black;
+:root {
+    --main-back-color: rgb(143, 143, 143);
+    --second-back-color: black;
+}
+
+@font-face {
+    font-family: M42;
+    src: url("/assets/fonts/m42.TTF");
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background-image: url("/assets/img/background.png");
+    font-family: 'M42';
+    font-size: 7px;
+    margin: 0px;
+    padding: 0px;
+}
+
+/* Main */
+.container {
+    color: white;
+    background-color: rgba(0, 0, 0, 0.726);
+    display: flex;
+    margin: 10px;
+    width: fit-content;
+    margin: auto;
+    margin-top: 10px; margin-bottom: 30px;
+    flex-direction: column;
+    align-items: center;
+    border: 4px solid rgba(68, 68, 68, 0.575);
+}
+
+.max-container {
+    background-color: rgba(0, 0, 0, 0.726);
+    color: white;
+    display: flex;
+    margin: 10px;
+    width: 95%;
+    margin: auto;
+    margin-top: 10px; margin-bottom: 30px;
+    flex-direction: column;
+    align-items: center;
+    border: 4px solid rgba(68, 68, 68, 0.575);
+}
+
+.con-title {
+    font-size: 15px;
+    border-bottom: 2px solid black;
+}
+
+.btn {
+    padding: 10px;
+    font-size: 8px;
+    font-family: 'M42';
+    color: white;
+    border: none;
+    border-radius: 10px;
+}
+
+.btn-val {
+    background-color: rgba(0, 0, 255, 0.637);
+}
+
+.btn-cancel {
+    background-color: rgba(255, 0, 0, 0.699);
+}
+
+/*footer*/
+footer {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    background-color: var(--second-back-color);
+    color: white;
+}
+
+/*nav bar*/
+.nav-nav {
+    --nav-img-width: 100px;
+    background-color: var(--second-back-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.nav-nav .nav-brand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.nav-nav .nav-brand img {
+    width: var(--nav-img-width);
+}
+
+.nav-nav .nav-links {
+    --links-color: rgb(255, 255, 255);
+    --links-backcolor: rgb(0, 0, 0);
+    --links-border-color: rgb(255, 255, 255);
+    height: 70%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.nav-link {
+    margin-right: 10px;
+    background-color: var(--links-backcolor);
+    color: var(--links-color);
+    border: 4px solid var(--links-border-color); 
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 3px 2px white;
+}
+
+.stats {
+    color: white;
+}
+
+/* General */
+.smooth {
+    padding: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 5px;
+}
+
+.in-big {
+    font-family: 'M42';
+    font-size: 6px;
+    padding: 5px;
+    width: 100%;
+    margin-bottom: 10px;
     border-radius: 5px;
+    border: none;
+}
+
+.errors p {
+    background-color: rgba(255, 56, 56, 0.733);
+    border: 3px solid rgb(255, 111, 111);
+    padding: 10px;
+    color: white;
+    border-radius: 5px;
+    text-align: center;
+}
+
+/* Modal */
+.ext-modal {
+    background-color: rgba(255, 255, 255, 0.767);
+    border-radius: 10px;
+    padding: 50px;
+}
+
+.my-modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.modal-title {
+    font-size: 15px;
+    margin-bottom: 40px;
+}
+
+.show-token {
+    width: fit-content;
+    border: 2px solid black;
+    border-radius: 10px;
+    padding: 30px;
+    font-size: 5px;
+    white-space:pre-wrap;
+    word-break:break-word;
+}
+
+.my-modal #timer {
+    text-align: center;
+    border: 1px solid black;
+    border-radius: 10px;
+    width: 10%;
+    padding: 5px;
+    margin-bottom: 10px;
+}
+
+#canvas {
+    border-radius: 10px;
 }

css/ui.css

@@ -0,0 +1,11 @@
+/* Copyright © 2023 Entreprise SkamKraft */
+
+#block-content {
+    margin: 0;
+    padding: 0;
+}
+
+.modal-disable::backdrop {
+    background-color: rgba(0, 0, 0, 0.493);
+}
+

html/template.html

@@ -0,0 +1,13 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<nav class="nav-nav">
+  <div class="nav-brand">
+    <img src="assets/logo/logoblancnotext.png" />
+  </div>
+  <div class="stats"></div>
+  <ul class="nav-links">
+  </ul>
+</nav>
+<main id="block-content"></main>
+<footer>
+  <p>Skamcraft Sarl</p>
+</footer>

html/templates/auth/login.html

@@ -0,0 +1,12 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<div class="container smooth"> 
+    <p class="con-title">Login</p>
+    <input type="text" placeholder="Agent token" id="in-token" class="in-big">
+    <input type="checkbox" id="box-remember">Remember me ?</input>
+    <div class="grp-btn">
+        <button class="btn btn-val" id="btn-login">Validate</button>
+        <button class="btn btn-cancel" id="btn-cancel">Cancel</button>
+    </div>
+    <div class="errors"></div>
+</div>

html/templates/auth/reg.html

@@ -0,0 +1,16 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<div class="container smooth"> 
+    <p class="con-title">New Agent</p>
+    <input type="text" placeholder="Name" id="input-name" class="in-big">
+    <select id="input-faction" class="in-big">
+        <option value="" disabled selected>Factions</option>
+        <optgroup id="group-faction" label="---------"></optgroup>
+      </select>
+      <input type="checkbox" id="box-remember">Remember me ?</input>
+    <div class="grp-btn">
+        <button class="btn btn-val" id="btn-register">Validate</button>
+        <button class="btn btn-cancel" id="btn-cancel">Cancel</button>
+    </div>
+    <div class="errors"></div>
+</div>

html/templates/home.html

@@ -0,0 +1,5 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<div class="container smooth"> 
+    <p class="con-title">Bienvenue sur SkamCraft</p>
+    <p class="con-content">Application client pour l'API Space Tarders.</p>
+</div>

html/templates/systems/systems.html

@@ -0,0 +1,5 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<div class="max-container smooth"> 
+    <p class="con-title">Systems</p>
+    <canvas id="canvas"></canvas>
+</div>

index.html

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

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/controllers/home.js

@@ -0,0 +1,18 @@
+import menu_mod from "./menu_mod.js";
+import { My } from "../skama_code/api/agent.js";
+import { AgentBuilder } from "../skama_code/api/agent.js";
+import { Auth } from "../skama_code/auth/auth.js";
+
+export default function home(temp_engine) {
+  const auth = new Auth()
+
+  if (auth.relog()) {
+    AgentBuilder.get(localStorage.getItem("token"), (agent) => {
+      My.agent = agent;
+      menu_mod(temp_engine);
+    })
+  }
+  console.log("test");
+  temp_engine.after_render(menu_mod);
+  temp_engine.render("templates/home.html");
+}

js/controllers/login.js

@@ -0,0 +1,38 @@
+import { Auth } from "../skama_code/auth/auth.js";
+import { My } from "../skama_code/api/agent.js";
+import home from "./home.js";
+import menu_mod from "./menu_mod.js";
+
+export default function login(temp_engine) {
+    const auth = new Auth();
+
+    temp_engine.after_render((temp_engine) => {
+        menu_mod(temp_engine);
+
+        temp_engine.add_event("#btn-login", "click", () => {
+            const is_checked = $("#box-remember").is(":checked");
+            const token = $("#in-token").val();
+            auth.store = is_checked;
+            auth.login(token)
+        });
+
+        temp_engine.add_event("#btn-cancel", "click", () => {
+            $("#input-token").val("");
+            $("#box-remember").prop("checked", false);
+        });
+    });
+
+    auth.done((agent) => {
+        My.agent = agent;
+        home(temp_engine);
+    })
+
+    auth.fail((errors) => {
+        $(".errors").html("");
+        errors.forEach(error => {
+            $(".errors").append(`<p>${error}</p>`);
+        });
+    })
+
+    temp_engine.render(`templates/auth/login.html`);
+}

js/controllers/menu_mod.js

@@ -0,0 +1,61 @@
+import { My } from "../skama_code/api/agent.js";
+import login from "./login.js";
+import reg from "./reg.js";
+import home from "./home.js";
+import system from "./system.js";
+
+function init_menu(temp_engine) {
+    temp_engine.add_event("#reg-link", "click", () => {
+        reg(temp_engine);
+    });
+    temp_engine.add_event("#login-link", "click", () => {
+        login(temp_engine);
+    });
+    temp_engine.add_event("#systems-link", "click", () => {
+        system(temp_engine);
+    });
+    temp_engine.add_event(".nav-brand", "click", () => {
+        home(temp_engine);
+    });
+    temp_engine.add_event("#logout-link", "click", () => {
+        My.agent = null;
+        localStorage.removeItem("token");
+        home(temp_engine);
+    });
+}
+
+function loged_links() {
+    $(".nav-links").html(`
+        <li class="nav-link smooth" id="systems-link">Systems</li>
+        <li class="nav-link smooth" id="contracts-link">Contracts</li>
+        <li class="nav-link smooth" id="ships-link">Ships</li>
+        <li class="nav-link smooth" id="logout-link">logout</li>
+    `);
+}
+
+function unloged_links() {
+    $(".nav-links").html(`
+        <li class="nav-link smooth" id="login-link">Log in</li>
+        <li class="nav-link smooth" id="reg-link">New Agent</li>
+    `);
+}
+
+function show_stats() {
+    $(".stats").html(`
+        <p>Agent name : ${My.agent.name}</p>
+        <p>Credits : ${My.agent.credits}</p>
+        <p>Ships : ${My.agent.ships_cpt}</p>
+        <p>Faction : ${My.agent.faction}</p>
+        <p>HQ : ${My.agent.hq}</p>
+    `);
+}
+
+export default function menu_mod(temp_engine) {
+    init_menu(temp_engine);
+    if (My.agent) {
+        show_stats();
+        loged_links();
+    } else {
+        unloged_links();
+    }
+}

js/controllers/reg.js

@@ -0,0 +1,47 @@
+import { Auth } from "../skama_code/auth/auth.js";
+import { My } from "../skama_code/api/agent.js";
+import { Faction } from "../skama_code/api/faction.js"
+import home from "./home.js";
+import menu_mod from "./menu_mod.js";
+
+export default function reg(temp_engine) {
+    let auth = new Auth();
+
+    temp_engine.after_render((temp_engine) => {
+        menu_mod(temp_engine);
+
+        Faction.list_all((factions) => {
+            factions.forEach(faction => {
+                const option = `<option>${faction.symbol}</option>`;
+                $("#group-faction").append(option);
+            });
+        });
+
+        temp_engine.add_event("#btn-register", "click", () => {
+            const is_checked = $("#box-remember").is(":checked");
+            const symbol = $("#input-name").val();
+            const faction = $("#input-faction").val();
+            auth.store = is_checked;
+            auth.register({name: symbol, faction: faction});
+        });
+
+        temp_engine.add_event("#btn-cancel", "click", () => {
+            $("#input-name").val("");
+            $("#box-remember").prop("checked", false);
+        });
+    });
+
+    auth.done((agent) => {
+        My.agent = agent;
+        home(temp_engine);
+    });
+
+    auth.fail((errors) => {
+        $(".errors").html("");
+        errors.forEach(error => {
+            $(".errors").append(`<p>${error}</p>`);
+        });
+    })
+
+    temp_engine.render(`templates/auth/reg.html`);
+}

js/controllers/system.js

@@ -0,0 +1,12 @@
+import { CanvasRenderer } from "../skama_code/rendering/rendering/canvas_render.js";
+import menu_mod from "./menu_mod.js";
+
+export default function (temp_engine) {
+
+    temp_engine.after_render((temp_engine) => {
+        console.log("test");
+        menu_mod(temp_engine);
+    });
+
+    temp_engine.render(`templates/systems/systems.html`);
+}

js/index.js

@@ -0,0 +1,9 @@
+// Copyright © 2023 Entreprise SkamKraft
+'use strict';
+import { TemplateEngine } from "./skama_code/ui/templeting_engine.js";
+import home from "./controllers/home.js";
+
+let temp_engine = new TemplateEngine("html");
+home(temp_engine);
+
+

js/main.js

@@ -1,85 +0,0 @@
-let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQU5OTk5VTEFYMTIyNSIsInZlcnNpb24iOiJ2Mi4xLjEiLCJyZXNldF9kYXRlIjoiMjAyMy0xMS0wNCIsImlhdCI6MTcwMDIyNDU5MSwic3ViIjoiYWdlbnQtdG9rZW4ifQ.r05mWtD5FjC4s6Td-ycmHdzL7C2s75lz3q7OBmWeCqUUZ1ejPsRGQRWJDPmIh1kAqO4D9FFs3GCTPZUn1KsnQ-xmDvsIi_mqC1gJV-Q0irI7gwfsGXbfLaVCXo-Q98C_QWRh-O_xkrbhJkCcvnwdEhZm7FnZ3PL4XXKrG0XNa98JrnmG0qlz0cv8V9Q0sSIwXZbvA9BrhuV8PK7_YzPc6LZuNqgPeKiX_B-tSIHHl6Sr1EzuydnczmuS-xKQnbhmcqnpaCXzQmJr7tA8KLgu70KqpPCvA8AI6PLmBlvPWtZ20RdzezqlBh6S9SrBzQ9R0zr_9RyJxq28ws2jnHpVPw";
-let offset = {
-    x: 10,
-    y: 10
-};
-
-function initGame() {
-    const settings = {
-        async: true,
-        crossDomain: true,
-        url: 'https://api.spacetraders.io/v2/register',
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Accept: 'application/json'
-        },
-        processData: false,
-        data: '{\n  "faction": "COSMIC",\n  "symbol": "ANNNNulax1225",\n  "email": ""\n}'
-    };
-    
-    $.ajax(settings).done(function (response) {
-        console.log(response);
-    });
-}
-
-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) {
-        $('.main-window').prepend(`
-        <article class="agent-card">
-            <p class="account">${reponse.data.accountId}</p>
-            <p class="symbol">${reponse.data.symbol}</p>
-            <p class="headquarters">${reponse.data.headquarters}</p>
-            <p class="credits">${reponse.data.credits}</p>
-            <p class="startingFaction">${reponse.data.startingFaction}</p>
-            <p class="shipCount">${reponse.data.shipCount}</p>
-        </article>
-        `);
-        let metaSystem = reponse.data.headquarters.split("-");
-        getSystem(metaSystem[0] + "-" + metaSystem[1]);
-    });
-}
-
-function getWayPoint(wayPoint) {
-    const settings = {
-        async: true,
-        crossDomain: true,
-        url: `https://api.spacetraders.io/v2/systems/systemSymbol/waypoints/waypointSymbol`,
-        method: 'GET',
-        headers: {
-            Accept: 'application/json'
-        }
-    };
-      
-    $.ajax(settings).done(function (response) {
-        console.log(response);
-    });
-};
-
-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) {
-        drawSystem(response.data.waypoints);
-    });
-}
-
-getAgent();

js/skama_code

@@ -0,0 +1 @@
+Subproject commit cf01c29af1c540e20db39a09b682eb6dadf9f4ca

js/test/tests.js

@@ -0,0 +1,105 @@
+// Copyright © 2023 Entreprise SkamKraft
+'use strict';
+
+import { Timer } from "../skama_code/ui/timer.js";
+import { Modal } from "../skama_code/ui/modal.js";
+import { TemplateEngine } from "../skama_code/ui/templeting_engine.js";
+import { Initialzer } from "../skama_code/commun/initialzer.js ";
+import { AgentBuilder } from "../skama_code/api/agent.js";
+import { Auth } from "../skama_code/auth/auth.js";
+import { PlanetBuilder } from "../skama_code/api/planet.js";
+
+let temp_path = "html";
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiSEFSRElDSyIsInZlcnNpb24iOiJ2Mi4xLjQiLCJyZXNldF9kYXRlIjoiMjAyMy0xMi0wMiIsImlhdCI6MTcwMjY2Mjc2Mywic3ViIjoiYWdlbnQtdG9rZW4ifQ.PrvaOz3W79acq6RoxryMW53PRRz824_AM0VGLwfXCOsGCOCAIY-rn6-bZTOnLAtp4xPSDqEk4c38oWYAWW59p0iMDDLpur6ONnjT0RjjsQS9zr5BByfBpP36CT23IZSSzk3XxGrFolHJAyU3K1liYfNbsPuNTXlkHGNHq6yMqH4ZQUPFsXEsCkg9cUynkdLw3C39SvWhtJ89oblj_8tQp2k8dxhZemepuXtiI51eFMpv8A0WRAi7pVYo_ajJujY9QDLYn_m5hDZWTlQMIstjPaDl99p2IMweIMO2Q2G-0lKiWQ4sl6VW5tuVrz1HLYU6kyMjFQWNn6kFDE7LWMTrfw";
+
+let tests = {
+    timer: function() {
+        let timer = new Timer(1, 0.1666, "m");
+        timer.on("step", (time) => {
+            console.log(time);
+        })
+        timer.on("end", () => {
+            console.log("pattes fini");
+        });
+        timer.start();
+    },
+    render_template: function() {
+        let UI = new TemplateEngine(temp_path);
+        let initer = new Initialzer(UI);
+
+        UI.render("templates/home.html");
+        UI.frag_load("#test", "templates/login.html");
+
+        $(document).ready(() => {
+            initer.init_menu_link("#contracts-link", "contracts.html");
+            initer.init_menu_link("#ships-link", "ships.html");
+            initer.init_menu_link("#systems-link", "systems.html");
+            initer.init_menu_link("#signup-link", "register.html");
+            initer.init_menu_link("#signin-link", "login.html");
+            initer.init_menu_link(".nav-brand", "home.html");
+        });
+    },
+    authentication: function() {
+        let auth = new Auth(true);
+        auth.done((agent) => {
+            console.log(agent);
+        }).fail((errs) => {
+            errs.forEach(err => {
+                console.log(err);
+            });
+        });
+        auth.login(token);
+        auth.relog();
+
+        //auth.register({
+        //    symbol: "lkdsjfsjdlfjlk",
+        //    faction: "COSMIC"
+        //});
+    },
+    modal: function() {
+
+        let template_engine = new TemplateEngine(temp_path);
+        
+        let timer = new Timer(60, 1, "s");
+        timer.on("step", (time) => {
+            $("#timer").html(`
+                <p>${time}</p>
+            `);
+        });
+        template_engine.render("templates/login.html");
+
+        let modal = new Modal("test-modal", template_engine);
+        modal.add_class("ext-modal")
+
+        modal.load("templates/test_modal.html");
+
+        template_engine.add_event("#valid", "click", () => {
+            modal.show();
+            timer.start();
+        });
+
+        template_engine.add_event("#ok", "click", () => {
+            modal.close();
+            timer.stop();
+        });
+    },
+    get_planet: function() {
+        PlanetBuilder.get("X1-TT23-FF1E", (planet) => {
+            console.log(planet);
+        }, (err) => {
+            console.log(err);
+        });
+    },
+    get_all_planets: function() {
+        PlanetBuilder.list_all("X1-AG10", (planets) => {
+            console.log(planets);
+        });
+    },
+    get_all_agents: function() {
+        AgentBuilder.list_all((agents) => {
+            console.log(agents);
+        });
+    }
+}
+
+export default tests;

templates/index.html

@@ -1,19 +0,0 @@
-<!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="../js/main.js"></script>
-    <title>Space traders</title>
-</head>
-<body>
-    <main class="main-window">
-        <input id="token" type="text">
-        <br>
-        <canvas id="canvas"></canvas>
-    </main>
-</body>
-</html>

token

@@ -1 +0,0 @@
-eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQU5OTk5VTEFYMTIyNSIsInZlcnNpb24iOiJ2Mi4xLjEiLCJyZXNldF9kYXRlIjoiMjAyMy0xMS0wNCIsImlhdCI6MTcwMDIyNDU5MSwic3ViIjoiYWdlbnQtdG9rZW4ifQ.r05mWtD5FjC4s6Td-ycmHdzL7C2s75lz3q7OBmWeCqUUZ1ejPsRGQRWJDPmIh1kAqO4D9FFs3GCTPZUn1KsnQ-xmDvsIi_mqC1gJV-Q0irI7gwfsGXbfLaVCXo-Q98C_QWRh-O_xkrbhJkCcvnwdEhZm7FnZ3PL4XXKrG0XNa98JrnmG0qlz0cv8V9Q0sSIwXZbvA9BrhuV8PK7_YzPc6LZuNqgPeKiX_B-tSIHHl6Sr1EzuydnczmuS-xKQnbhmcqnpaCXzQmJr7tA8KLgu70KqpPCvA8AI6PLmBlvPWtZ20RdzezqlBh6S9SrBzQ9R0zr_9RyJxq28ws2jnHpVPw