Ajout menu

css/auth.css

@@ -38,4 +38,11 @@
     background-color: darkgreen;
 }
 
-.auth-select {}
+.auth-select {
+    margin-top: 1vh;
+    border-radius: 3px;
+}
+
+.errors {
+    color: red;
+}

css/global.css

@@ -12,6 +12,8 @@
 body {
   margin: 0;
   background-image: url("../assets/img/background.png");
+  background-repeat: no-repeat;
+  overflow-x: hidden;
   font-family: pixellari;
   color: var(--text-color);
 }
@@ -44,4 +46,28 @@ select {
 
 .title {
   font-size: 40px;
+}
+
+.languettes {
+  display: flex;
+  flex-direction: column;
+  align-items:flex-end;
+  margin: 250px -50px 0px 0px ;  
+}
+
+.languettes input{
+  width: 5%;
+}
+
+.languettes input:hover{
+  animation: slide-left;
+  position: relative;
+  animation-timing-function: ease;
+  animation-fill-mode: forwards;
+  animation-duration: 1s;
+}
+
+@keyframes slide-left {
+  0%   {right: 0px; top: 0px;}
+100%  {right: 25px; top: 0px;}
 }

html/template.html

@@ -1,2 +1,5 @@
 <!-- Copyright © 2023 Entreprise SkamKraft -->
-<main id="block-content"></main>
+<main>
+    <main id="block-content"></main>
+    <div class="languettes" id="links"></div>
+</main>

html/templates/auth/reg.html

@@ -3,10 +3,10 @@
 <div class="container">
     <div class="auth-container">
         <p class="title">New Agent</p>
-        <input type="text" placeholder="Name" id="in-name">
+        <input type="text" placeholder="Name" class="auth-input" id="in-name">
         <select class="auth-select" id="in-faction">
             <option value="" disabled selected>Factions</option>
-            <optgroup id="group-faction" label="---------"></optgroup>
+            <optgroup id="group-faction" label="--------------"></optgroup>
         </select>
         <div class="auth-grp-label">
             <p>Remember me ?</p>

js/controllers/menu_mod.js

@@ -29,19 +29,20 @@ function init_menu(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>
+  $("#links").html(`
+        <input type="image" alt="home" id="systems-link" src="/assets/menu/home.png"/>
+        <input type="image" alt="contracts" id="contracts-link" src="/assets/menu/contracts.png"/>
+        <input type="image" alt="ships" id="ships-link" src="/assets/menu/ships.png"/>
+        <input type="image" alt="info" src="/assets/menu/info.png"/>
+        <input type="image" alt="leaderboard" src="/assets/menu/leaderboard.png"/>
     `);
 }
 
 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>
-    `);
+  // $(".menu-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() {

js/controllers/reg.js

@@ -2,6 +2,7 @@ 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 login from "./login.js";
 import menu_mod from "./menu_mod.js";
 
 export default function reg(temp_engine) {
@@ -18,17 +19,21 @@ export default function reg(temp_engine) {
         });
 
         temp_engine.add_event("#btn-register", "click", () => {
-            const is_checked = $("#box-remember").is(":checked");
-            const symbol = $("#input-name").val();
-            const faction = $("#input-faction").val();
+            const is_checked = $("#in-remember").is(":checked");
+            const symbol = $("#in-name").val();
+            const faction = $("#in-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);
+            $("#in-name").val("");
+            $("#in-remember").prop("checked", false);
         });
+
+        temp_engine.add_event("#btn-log", "click", () => {
+            login(temp_engine);
+        })
     });
 
     auth.done((agent) => {

js/index.js

@@ -2,8 +2,23 @@
 'use strict';
 import { TemplateEngine } from "./skama_code/ui/templeting_engine.js";
 import login from "./controllers/login.js";
+import home from "./controllers/home.js";
+import { Auth } from "./skama_code/auth/auth.js";
+import { AgentBuilder } from "./skama_code/api/agent.js";
+import { My } from "./skama_code/api/agent.js";
 
 let temp_engine = new TemplateEngine("html");
+
+//Auto login
+const auth = new Auth();
+
+if (auth.relog()) {
+AgentBuilder.get(localStorage.getItem("token"), (agent) => {
+    My.agent = agent;
+    home(temp_engine);
+});
+}
+
 login(temp_engine);