Ajout du menu, de la page login et register

css/auth.css

@@ -0,0 +1,27 @@
+.auth-container {
+    height: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.auth{
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--main-color);
+    padding: 30px;
+    border-radius: 5px;
+}
+
+.auth-grp-label {
+    font-size: 20px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.errors {
+    color: red;
+}

css/global.css

@@ -0,0 +1,129 @@
+@font-face {
+    font-family: pixellari;
+    src: url("/assets/fonts/Pixellari.ttf");
+}
+
+:root {
+    --text-color: white;
+    --text-familly: pixellari;
+    --main-color: black;
+    --sec-color: rgba(69, 128, 255, 0.842);
+}
+
+body{
+    background-image: url("/assets/img/background.png"); 
+    background-repeat: no-repeat;
+    background-size: 100%;
+    overflow-x: hidden;
+    font-family: var(--text-familly);
+    color: var(--text-color);
+    margin: 0;
+    padding: 0;
+}
+
+button{
+    font-family: var(--text-familly);
+    color: var(--text-color);
+}
+
+input{
+    font-family: var(--text-familly);
+    color: var(--text-color);
+}
+
+select {
+    font-family: var(--text-familly);
+    color: var(--text-color);
+}
+
+#block-content{
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100vh;
+}
+
+.modal-disable::backdrop {
+    background-color: rgba(0, 0, 0, 0.493);
+}
+
+.ext-modal[open] {
+    animation: myFadeIn 0.5s ease normal;
+  }
+    
+  @keyframes myFadeIn{
+    from {
+        bottom: 100%;
+    }
+    to {
+        bottom: 0%;
+    }
+}
+
+.languettes {
+    right: -30px;
+    top: 25%;
+    width: 80px;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items:flex-end;
+}
+.languettes input{
+    width: 100%;
+}
+.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;}
+}
+
+.title{
+    font-size: 50px;
+}
+
+::placeholder {
+    color: var(--text-color);
+  }
+
+.base-input{
+    margin: 5px;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: var(--sec-color);
+    font-size: 20px;
+}
+.base-input:active{
+    background-color: var(--sec-color);
+    font-size: 20px;
+}
+
+.base-btn{
+    margin: 2px;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: var(--sec-color);
+    font-size: 20px;
+}
+
+.base-btn:hover{
+    box-shadow: 1px 1px 1px 0px rgba(88, 88, 252, 0.842);
+}
+
+.base-select {
+    margin: 5px;
+    padding: 10px;
+    border: none;
+    border-radius: 3px;
+    background-color: var(--sec-color);
+    font-size: 15px;
+}

html/template.html

@@ -1,16 +1,11 @@
 <audio id="audio" controls loop style="display:none" crossorigin="anonymous">
-    <source src="/assets/sounds/skamkraft_main_theme.mp3" type="audio/mpeg">
+    <!-- <source src="/assets/sounds/skamkraft_main_theme.mp3" type="audio/mpeg"> -->
 </audio>
 <script>
-    document.getElementById('audio').play();
+    // document.getElementById('audio').play();
 </script>
-<div class="languettes">
+<div id="links" class="languettes">
-    <input type="image" alt="languette1" id="home-link" src="/assets/menu/home.png"/>
+
-    <input type="image" alt="languette2" src="/assets/menu/contracts.png"/>
-    <input type="image" alt="languette3" src="/assets/menu/ships.png"/>
-    <input type="image" alt="languette4" src="/assets/menu/info.png"/>
-    <input type="image" alt="languette5" src="/assets/menu/leaderboard.png"/>
 </div>
 <div id="block-content">
-
 </div>

html/templates/auth/login.html

@@ -0,0 +1,19 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<div class="auth-container">
+    <div class="auth">
+        <p class="title">Login</p>
+        <input type="text" placeholder="Agent token" class="base-input" id="in-token">
+        <div class="auth-grp-label">
+            <p>Remember me ?</p>
+            <input type="checkbox" class="base-input" id="in-remember">
+        </div>
+        <div>
+            <button class="base-btn" id="btn-login">Validate</button>
+            <button class="base-btn" id="btn-cancel">Cancel</button>
+        </div>
+        <div>
+            <button class="base-btn" id="btn-register">New agent</button>
+        </div>
+        <div class="errors"></div>
+    </div>
+</div>

html/templates/auth/register.html

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

html/templates/home.html

@@ -0,0 +1,3 @@
+<div>
+    <p class="title">Home</p>
+</div>

html/templates/modal_profile.html

@@ -0,0 +1,3 @@
+<div>
+    <p class="title">Profile</p>
+</div>

index.html

@@ -8,6 +8,8 @@
     <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>
+    <link rel="stylesheet" href="css/global.css">
+    <link rel="stylesheet" href="css/auth.css">
   </head>
   <body>
 

js/controllers/home.js

@@ -0,0 +1,6 @@
+import menu_mod from "./menu_mod.js";
+
+export default function home(temp_engine) {
+  temp_engine.after_render(menu_mod);
+  temp_engine.render("templates/home.html");
+}

js/controllers/login.js

@@ -1,7 +1,8 @@
 import { Auth } from "../skama_code/auth/auth.js";
-import { My } from "../skama_code/api/agent.js";
+import { My } from "../skama_code/commun/my.js";
 import home from "./home.js";
 import menu_mod from "./menu_mod.js";
+import register from "./register.js";
 
 export default function login(temp_engine) {
   const auth = new Auth();
@@ -20,6 +21,10 @@ export default function login(temp_engine) {
       $("#in-token").val("");
       $("#in-remember").prop("checked", false);
     });
+
+    temp_engine.add_event("#btn-register", "click", () => {
+      register(temp_engine);
+    });
   });
 
   auth.done((agent) => {
@@ -34,5 +39,5 @@ export default function login(temp_engine) {
     });
   });
 
-  temp_engine.render(`templates/auth/login.html`);
+  temp_engine.render("templates/auth/login.html");
 }

js/controllers/menu_mod.js

@@ -1,27 +1,20 @@
-import { My } from "../skama_code/api/agent.js";
+import { My } from "../skama_code/commun/my.js";
 import login from "./login.js";
+import profile from "./profile.js";
 
-function init_menu(temp_engine) {
+function loged_links(temp_engine) {
-  temp_engine.add_event("#login-link", "click", () => {
-    login(temp_engine);
-  });
-}
-
-function loged_links() {
   $("#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="profile" id="profile-link" src="/assets/menu/info.png"/>
-        <input type="image" alt="leaderboard" src="/assets/menu/leaderboard.png"/>
+        <input type="image" alt="leaderboard" id="leaderboard-link" src="/assets/menu/leaderboard.png"/>
   `);
+  temp_engine.add_event("#profile-link", "click", () => {
+    profile(temp_engine);
+  });
 }
 
-export default function menu_mod(temp_engine) {
+export default (temp_engine) => {
-  init_menu(temp_engine);
+  if(My.agent) loged_links(temp_engine);
-  if (My.agent) {
-    loged_links();
-  } else {
-    unloged_links();
-  }
 }

js/controllers/profile.js

@@ -0,0 +1,9 @@
+import { Modal } from "../skama_code/ui/modal.js"
+
+export default function profile(temp_engine) {
+    let modal = new Modal("profile-modal", temp_engine);
+    modal.load("templates/modal_profile.html");
+    modal.after_load((temp_engine) => {
+        modal.show();
+    });
+}

js/controllers/register.js

@@ -0,0 +1,58 @@
+import { Auth } from "../skama_code/auth/auth.js";
+import { My } from "../skama_code/commun/my.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 register(temp_engine) {
+  let auth = new Auth();
+
+  temp_engine.after_render((temp_engine) => {
+    menu_mod(temp_engine);
+
+    Faction.list_all((factions) => {
+        factions.forEach((faction) => {
+            let option;
+            if (faction.isRecruiting) {
+            option = `<option>${faction.symbol}</option>`;
+            } else {
+            option = `<option disabled>${faction.symbol}</option>`;
+            }
+
+            $("#group-faction").append(option);
+        });
+    });
+
+    temp_engine.add_event("#btn-register", "click", () => {
+        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", () => {
+        $("#in-name").val("");
+        $("#in-remember").prop("checked", false);
+    });
+
+    temp_engine.add_event("#btn-log", "click", () => {
+        login(temp_engine);
+    });
+  });
+
+  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/register.html`);
+}