Adding new features

css/style.css

@@ -0,0 +1,75 @@
+: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-color: var(--main-back-color);
+    font-family: 'M42';
+    font-size: 7px;
+    margin: 0px;
+    padding: 0px;
+}
+
+/*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(0,0,0);
+    --links-backcolor: rgb(255, 123, 71);
+    --links-border-color: rgb(255, 173, 118);
+    height: 70%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.smooth {
+    padding: 5px;
+    border-radius: 10px;
+}
+
+.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;
+}

html/template.html

@@ -1,14 +1,16 @@
-<nav>
+<nav class="nav-nav">
-  <div class=".nav-brand">
+  <div class="nav-brand">
-    <img src="assets/" />
+    <img src="assets/logo/logoblancnotext.png" />
   </div>
   <ul class="nav-links">
-    <li class="nav-link">Contracts</li>
+    <li class="nav-link smooth">Contracts</li>
-    <li class="nav-link">System</li>
+    <li class="nav-link smooth">System</li>
-    <li class="nav-link">Ships</li>
+    <li class="nav-link smooth">Ships</li>
-    <li class="nav-link">Profile</li>
+    <li class="nav-link smooth">Sign in</li>
-    <li class="nav-link">Ships</li>
+    <li class="nav-link smooth">Sigh up</li>
   </ul>
 </nav>
 <main id="block-content"></main>
-<footer></footer>
+<footer>
+  <p>Skamcraft Sarl</p>
+</footer>

html/templates/test.html

@@ -1,2 +0,0 @@
-<p>Coucou</p>
-<button id="btn1">Btn 1</button>

html/templates/test2.html

@@ -1,2 +0,0 @@
-<p>Hello</p>
-<button id="btn2">Btn 2</button>

js/api/agent.js

@@ -1,5 +1,5 @@
 'use strict';
-import { SpaceTraders } from "../config.js"
+import { SpaceTraders } from "./config.js"
 
 export class Agent {
   constructor(agent, token = "") {
@@ -49,7 +49,7 @@ export class AgentBuilder {
     });
   }
 
-  static async getPublic(symbol, callback) {
+  static async get_public(symbol, callback) {
     const url = `${SpaceTraders.host}agents/${symbol}`;
     const headers = { Accept: "application/json" };
     await $.ajax({
@@ -81,7 +81,7 @@ export class AgentBuilder {
     });
   }
 
-  static async listAll(callback) {
+  static async list_all(callback) {
     await this.list(1,1, (agents, meta) => {
       let maxPage = meta.total / 20;
       this.r_listing(1, maxPage, [], callback);

js/auth/auth.js

@@ -0,0 +1,66 @@
+import { AgentBuilder } from '../api/agent.js'
+import Strategie from '../commun/strategie.js';
+
+export class Auth {
+    constructor(store = false) {
+        this.store = store;
+        this.validated = () => {};
+        this.error_handler = () => {};
+        this.strategies = {
+            register: [
+                {
+                    name: "symbol",
+                    validations: [
+                        "required",
+                        "max_lenght|14"
+                    ]
+                },
+                {
+                    name: "faction",
+                    validations: [
+                        "required"
+                    ]
+                }
+            ],
+            login: [
+                {
+                    name: "token",
+                    validations: [
+                        "required"
+                    ]
+                }
+            ]
+        }
+    }
+
+    done(validated) {
+        this.validated = validated;
+        return this;
+    }
+    
+    fail(error_handler) {
+        this.error_handler = error_handler;
+        return this;
+    }
+
+    login(token) {
+        let validateur = new Strategie(this.strategies.login);
+        validateur.validate("token", token);
+        if (validateur.errors) this.error_handler(validateur.errors);
+        else {
+            if (store) localStorage.setItem("token", token);
+            AgentBuilder.get(token, this.validated);
+        }
+    }
+
+    register(new_agent) {
+        let validateur = new Strategie(this.strategies.register);
+        validateur.validate("symbol", new_agent.symbol);
+        validateur.validate("faction", new_agent.faction);
+        if (validateur.errors) this.error_handler(validateur.errors);
+        else {
+            if (store) localStorage.setItem("token", token);
+            AgentBuilder.create(new_agent.symbol, new_agent.faction, this.validated);
+        }
+    }
+}

js/commun/strategie.js

@@ -0,0 +1,49 @@
+export default class Strategie {
+    constructor(strategie) {
+        this.strategie = strategie;
+        this.errors = [];
+    }
+
+    validate(name, input) {
+        this.errors = [];
+        this.strategie.forEach(input_strat => {
+            if(input_strat.name === name) input_strat.validations.forEach((validation) => {
+                let args = validation.split("|");
+                switch (args[0]) {
+                    case "required": 
+                        this.test(this.required(input), `${name} is required.`);
+                        break;
+                    case "max_lenght":
+                        this.test(this.max_lenght(input, args[1]), `${name} must have a max lenght of ${args[1]}.`);
+                        break;
+                    case "min_lenght":
+                        this.test(this.min_lenght(input, args[1]), `${name} must have a min lenght of ${args[1]}`);
+                        break;
+                }
+            });
+        });
+    }
+
+    test(test, error) {
+        if(!test) this.errors.push(error); 
+    }
+
+    valide_email(input) {
+
+    }
+
+    min_lenght(input, lenght) {
+        if(input.lenght < lenght) return false;
+        return true;
+    }
+
+    max_lenght(input, lenght) {
+        if(input.lenght > args[0]) return false;
+        return true;
+    }
+
+    required(input) {
+        if (input === undefined || input === null || input === "") return false;
+        return true;
+    }
+}

js/index.js

@@ -1,17 +1,9 @@
 import {UIRenderer} from "./ui/templeting_engine.js";
-import { Agent, AgentBuilder } from "./api/agent/agent.js";
-
-AgentBuilder.listAll((agents) => {
-    console.log(agents);
-});
-
-AgentBuilder.create("ZEUslkdjlka", "COSMIC", (agent) => {
-    console.log(agent);
-});
 
 let UI = new UIRenderer("html");
 
-UI.render("templates/test.html");
+
+UI.render("templates/home.html");
 
 UI.add_event("#btn1", "click", () => {
     UI.render("templates/test2.html");