added track switching

.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

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 @@
+# Skamkraft
+
+## Start 
+* Start with live server in VsCode to get full functionnality.
+* Start with php : 
+``` bash
+    cd /.../Skamkraft
+    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,32 @@
+/* Copyright © 2023 Entreprise SkamKraft */
+
+.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;
+  }
+}
+
+.ext-modal[open] {
+  animation: myFadeIn 0.5s ease normal;
+}
+  
+@keyframes myFadeIn{
+    from {
+      bottom: 100%;
+    }
+    to {
+      bottom: 0%;
+    }
+}

css/auth.css

@@ -0,0 +1,48 @@
+.auth-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.863);
+    padding: 30px;
+    border-radius: 5px;
+}
+
+.auth-input {
+    border-radius: 2px;
+    padding: 5px;
+}
+
+.auth-grp-label {
+    display: flex;
+    justify-content: space-between;
+}
+
+.auth-btn {
+    margin: 3px;
+    padding: 4px;
+    font-size: 20px;
+    color: white;
+    border-radius: 5px;
+}
+
+.auth-btn-val {
+    background-color: blue;
+}
+
+.auth-btn-can {
+    background-color: red;
+}
+
+.auth-btn-other {
+    background-color: darkgreen;
+}
+
+.auth-select {
+    margin-top: 1vh;
+    border-radius: 3px;
+}
+
+.errors {
+    color: red;
+}

css/contract.css

@@ -0,0 +1,83 @@
+/* Copyright © 2023 Entreprise SkamCraft */
+
+
+
+body,
+html {
+  height: 100%;
+}
+
+
+
+.btn-infos {
+  margin: 2px;
+  /* color: black; */
+  background-color: transparent;
+  border: 5px solid #0018e8;
+  border-radius: 10px;
+}
+
+.btn-infos:hover {
+  border-color: #0018e8;
+  background-color: #0018e8;
+  ;
+}
+
+.btn-accept {
+  margin: 2px;
+  /* color: black; */
+  background-color: transparent;
+  border: 5px solid #0018e8;
+  border-radius: 10px;
+}
+
+.btn-accept:hover {
+  border-color: rgb(33, 196, 0);
+  background-color: rgb(33, 196, 0);
+}
+
+.card {
+  margin-bottom: 30px;
+}
+
+.contract-screen {
+  display: flex;
+  justify-content: center;
+  background-image: url("/assets/contracts/contractscreen.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 100vh;
+
+}
+
+.card-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-left: 200px;
+  margin-top: -160px;
+  width: 100%;
+}
+
+.card-body button {
+  margin-top: 50px;
+  margin-right: 29px;
+  margin-left: -11px;
+  width: 240px;
+}
+
+.contracts {
+  margin-left: 240px;
+  margin-top: 250px;
+  height: 100vh;
+  width: 100vh;
+}
+
+/* Modal */
+
+.status-onhold {
+  color: orange;
+}
+
+.status-accepted {
+  color: greenyellow;
+}

css/global.css

@@ -0,0 +1,45 @@
+/* Copyright © 2023 Entreprise SkamCraft */
+
+:root {
+  --text-color: white;
+}
+
+@font-face {
+  font-family: pixellari;
+  src: url("../assets/fonts/Pixellari.ttf");
+}
+
+body {
+  background-image: url(/assets/img/backgroundfinal.png); 
+  background-repeat: no-repeat;
+  background-size: 100%;
+  overflow-x: hidden;
+}
+
+input {
+  border: none;
+  font-family: pixellari;
+}
+
+
+button {
+  border: none;
+  font-family: pixellari;
+}
+
+select {
+  border: none;
+  font-family: pixellari;
+}
+
+.languettes {
+  display: flex;
+  flex-direction: column;
+  align-items:flex-end;
+  margin: 250px -50px 0px 0px ;  
+}
+
+.languettes input{
+  width: 5%;
+}
+

css/ship.css

@@ -0,0 +1,85 @@
+* {
+    box-sizing: border-box;
+}
+@font-face {
+    font-family: M42;
+    src: url("/assets/fonts/m42.TTF");
+}
+.block-ships{
+    display:flex;
+    flex-direction: column;
+    color: white;
+    font-size:large;
+    text-align: center;
+    padding-top: 80px;
+    max-width: 1000px;
+    position: relative;
+    margin: auto;
+}
+button{
+    color: white;
+    font-family: 'M42';
+    background-color: black;
+    font-size:x-small;
+    box-shadow: 3px 2px white;
+    border: 4px solid white;
+    border-radius: 10px;
+    padding: 10px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+button:hover{
+    background-color:aqua ;
+    transition: 1s;
+}
+
+
+.my-modal{
+    font-size:small;
+}
+body{
+    background-image: url("/assets/spaceships/hangar.png");
+    background-size: cover;
+}
+
+.ships-list {
+    display: none;
+}
+
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  margin-top: -22px;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover, .next:hover {
+  background-color: rgba(0,0,0,0.8);
+}
+
+/* Fading animation */
+.fade {
+  animation-name: fade;
+  animation-duration: 1.5s;
+}
+
+@keyframes fade {
+  from {opacity: .4}
+  to {opacity: 1}
+}

css/style.css

@@ -1,5 +0,0 @@
-canvas {
-    width: 50%;
-    border: 2px solid black;
-    border-radius: 5px;
-}

css/ui.css

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

html/template.html

@@ -0,0 +1,68 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<main>
+    <audio id="audio1" controls loop style="display:none" crossorigin="anonymous">
+        <source src="/assets/sounds/skamkraft_main_theme.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="audio2" controls loop style="display:none" crossorigin="anonymous">
+        <source src="/assets/sounds/goofy ahh song.mp3" type="audio/mpeg">
+    </audio>
+    <body>
+        <audio id="audio1" src="1o.mp3"></audio>
+        <audio id="audio2" src="2o.mp3"></audio>
+        <div>Track one: <span id="playStatus1">stopped</span></div>
+        <div>Track two: <span id="playStatus2">stopped</span></div>
+        <div>Listening to: <span id="currTrack">nothing</span></div>
+        <button id="start">Start the tracks rolling</button>
+        <button id="toggle" disabled>Toggle</button>
+    
+       <script>
+         var startButton = document.getElementById("start");
+         var toggleButton = document.getElementById("toggle");
+         var track1 = document.getElementById("audio1");
+         var track2 = document.getElementById("audio2");
+         var status1 = document.getElementById("playStatus1");
+         var status2 = document.getElementById("playStatus2");
+         var currTrack = document.getElementById("currTrack");
+    
+         function updatePlayStatus(track, status, t){
+           if (track.paused == true){
+             status.innerHTML = "stopped";
+             clearInterval(t);
+             startButton.disabled = false;
+             toggleButton.disabled = true;
+             currTrack.innerHTML = "nothing";
+           }
+         }
+    
+         startButton.onclick = function(){
+           this.disabled = true;
+           track1.play();
+           track2.play();
+           track2.muted = true;
+           status1.innerHTML = "playing";
+           status2.innerHTML = "playing";
+           currTrack.innerHTML = "Track 1";
+           toggleButton.disabled = false;
+    
+           var t1 = window.setInterval(function() { updatePlayStatus(track1, status1, t1) }, 500);
+           var t2 = window.setInterval(function() { updatePlayStatus(track2, status2, t2) }, 500);
+         }
+    
+         toggleButton.onclick = function(){
+            track1.currentTime = 0;
+            track2.currentTime = 0;
+           if (track1.muted == true){
+             track1.muted = false;
+             track2.muted = true;
+             currTrack.innerHTML = "Track 1";
+           } else {
+             track2.muted = false;
+             track1.muted = true;
+             currTrack.innerHTML = "Track 2";
+           }
+         }
+       </script>
+      </body>
+    <main id="block-content"></main>
+    <div class="languettes" id="links"></div>
+</main>

html/templates/auth/login.html

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

html/templates/auth/reg.html

@@ -0,0 +1,24 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<div class="container">
+    <div class="auth-container">
+        <p class="title">New Agent</p>
+        <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>
+        </select>
+        <div class="auth-grp-label">
+            <p>Remember me ?</p>
+            <input type="checkbox" class="auth-input" id="in-remember">
+        </div>
+        <div>
+            <button class="auth-btn auth-btn-val" id="btn-register">Validate</button>
+            <button class="auth-btn auth-btn-can" id="btn-cancel">Cancel</button>
+        </div>
+        <div>
+            <button class="auth-btn auth-btn-other" id="btn-log">Login</button>
+        </div>
+        <div class="errors"></div>
+    </div>
+</div>

html/templates/contracts/contracts.html

@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="css/global.css">
+<div class="contract-screen">
+    <div class="contracts"></div>
+</div>

html/templates/contracts/contracts_modal.html

@@ -0,0 +1,16 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<div class="my-modal">
+    <p class="modal-title">Contract</p>
+    <p class="contract-id"></p>
+    <p class="contract-faction"></p>
+    <p class="contract-type"></p>
+    <p class="contract-expiration"></p>
+    <p class="contract-payment-accepted"></p>
+    <p class="contract-payment-fulfill"></p>
+    <p class="contract-tradeSymbol"></p>
+    <p class="contract-destinationSymbol"></p>
+    <div>
+        <button class="btn btn-val btn-close">Close</button>
+    </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/ship/ship.html

@@ -0,0 +1,17 @@
+<!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/ship.css">
+
+
+    <title>Ship</title>
+  </head>
+  <body class="test">
+    <div class="block-ships">
+      <a class="prev">❮</a>
+      <a class="next">❯</a> 
+    </div>
+  </body>
+</html>

html/templates/ship/ship_modal.html

@@ -0,0 +1,9 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<div class="my-modal">
+    <div class="infos">
+  
+    </div>
+    <div>
+        <button class="btn btn-val btn-close">Close</button>
+    </div>
+  </div>

html/templates/systems/systems.html

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

index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Skamkraft</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="height=device-height, initial-scale=1.0">
+    <link rel="stylesheet" href="css/global.css">
+    <link rel="stylesheet" href="css/auth.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/contracts.js

@@ -0,0 +1,133 @@
+// Copyright © 2023 Entreprise SkamKraft
+"use strict";
+
+import { SpaceTraders } from "../skama_code/api/config.js";
+
+import menu_mod from "./menu_mod.js";
+import { My } from "../skama_code/api/agent.js";
+import { Contract } from "../skama_code/api/contract.js";
+import { Modal } from "../skama_code/ui/modal.js";
+
+
+export default (temp_engine) => {
+
+
+  let modal = new Modal("contract-modal", temp_engine);
+
+  temp_engine.after_render((temp_engine) => {
+
+    modal.load("templates/contracts/contracts_modal.html");
+
+    Contract.list(10, 1, (contracts) => {
+
+      //Evenements
+      temp_engine.add_event(".btn-accept", "click", (e) => {
+        contracts.forEach((contract) => {
+          if ($(e.target).attr("data-id") == contract.id) {
+            contract.accept(() => {
+              $(e.target).parent().children(".status-onhold").html("Status : accepté");
+              $(e.target).parent().children(".status-onhold").attr("class", 'status-accepted');
+              $(e.target).html("Contract accepted")
+              // $(e.target).remove();
+
+            });
+          }
+        });
+      });
+
+      temp_engine.add_event(".btn-infos", "click", (e) => {
+        contracts.forEach((contract) => {
+
+          const id_contract = $(e.target).attr("data-id");
+
+          $(".contract-id").text("ID : " + contract.id);
+          $(".contract-faction").text("Faction : " + contract.faction);
+          $(".contract-type").text("Type : " + contract.type);
+          $(".contract-expiration").text("Expiration : " + contract.expiration);
+          $(".contract-payment-accepted").text("Payment : " + contract.paymentAccepted + " $");
+          $(".contract-payment-fulfill").text("Payment fulfill : " + contract.paymentFulfill + " $");
+          $(".contract-tradeSymbol").text("Trade Symbol : " + contract.tradeSymbol);
+          $(".contract-destinationSymbol").text("Destination : " + contract.destination);
+
+          modal.show();
+
+        });
+
+      });
+
+      contracts.forEach(contract => {
+        let img
+        let status
+        let card
+
+
+
+        if (contract.type = "PROCUREMENT") {
+          img = "/assets/contracts/procurement.png"
+        }
+        else if (contract.type = "TRANSPORT") {
+          img = "/assets/contracts/transportation.png"
+        }
+        else {
+          img = "/assets/contracts/shuttle.png"
+        }
+
+        if (contract.accepted) {
+          status = "accepted"
+          card =
+            `                            
+                    <div class="card" style="width: 20rem;">
+                      <img src="${img}" class="card-img-top" alt="">
+                      <div class="card-body">
+                        <h5 style="color:white" class="card-title">${contract.faction}</h5>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p class="card-text status-accepted">Status : ${status}</p>
+                        <button data-id="${contract.id}" type="button" class="btn btn-primary btn-infos" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>                      
+                      </div>
+                    </div>
+            `
+        }
+
+        else {
+          status = "on hold"
+          card =
+            `                            
+                    <div class="card" style="width: 20rem;">
+                      <img src="${img}" class="card-img-top" alt="">
+                      <div class="card-body">
+                        <h5 style="color:white" class="card-title">${contract.faction}</h5>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p class="card-text status-onhold">Status : ${status}</p>
+                        <p style="color:white" class="card-text revenu">Revenu : ${contract.paymentAccepted} $</p>
+                        <p></p>
+                        <button type="button" class="btn btn-primary btn-infos" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
+                        <button data-id="${contract.id}" class="btn-modify btn btn-primary btn-accept" data-toggle="modal" data-target="#Modify" >Accepter</button>                       
+                      </div>
+                    </div>
+                  `
+        }
+
+        $('.contracts').append(card);
+        $('.contracts').append(card);
+
+
+      });
+
+    })
+
+    temp_engine.add_event(".btn-close", "click", () => {
+      modal.close();
+    });
+
+    menu_mod(temp_engine);
+  });
+
+  temp_engine.render("templates/contracts/contracts.html")
+}

js/controllers/home.js

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

js/controllers/login.js

@@ -0,0 +1,43 @@
+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";
+import reg from "./reg.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 = $("#in-remember").is(":checked");
+            const token = $("#in-token").val();
+            auth.store = is_checked;
+            auth.login(token)
+        });
+
+        temp_engine.add_event("#btn-cancel", "click", () => {
+            $("#in-token").val("");
+            $("#in-remember").prop("checked", false);
+        });
+
+        temp_engine.add_event("#btn-reg", "click", () => {
+            reg(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/login.html`);
+}

js/controllers/menu_mod.js

@@ -0,0 +1,56 @@
+import { My } from "../skama_code/api/agent.js";
+import home from "./home.js";
+import login from "./login.js";
+import reg from "./reg.js";
+import systems from "./systems.js";
+import contract from "./contracts.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", () => {
+    systems(temp_engine);
+  });
+  temp_engine.add_event("#home-link", "click", () => {
+    home(temp_engine);
+  });
+  temp_engine.add_event("#logout-link", "click", () => {
+    My.agent = null;
+    localStorage.removeItem("token");
+    login(temp_engine);
+  });
+  temp_engine.add_event("#contracts-link", "click", () => {
+    contract(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="leaderboard" src="/assets/menu/leaderboard.png"/>
+    `);
+}
+
+function unloged_links() {
+  // $(".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>
+  //   `);
+}
+
+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,58 @@
+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) {
+  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.isRecruting) {
+          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/reg.html`);
+}

js/controllers/ships.js

@@ -0,0 +1,181 @@
+import menu_mod from "./menu_mod.js";
+import { Modal } from "../skama_code/ui/modal.js";
+import { Ship } from "../skama_code/api/ship.js";
+
+
+export default (temp_engine) => {
+  let modal = new Modal("ship-modal", temp_engine);
+  let slideIndex = 1;
+
+  temp_engine.after_render((temp_engine) => {
+    menu_mod(temp_engine);
+    modal.load("templates/ship/ship_modal.html");
+
+    Ship.list((ships) => {
+      ships.forEach(ship => {
+        $(".block-ships").append(
+          `
+            <div class="ships-list fade" data-id="${ship.symbol}">
+              <h5>${ship.symbol}</h5>
+              <img 
+                id="imgShip" 
+                src="/assets/spaceships/spaceship.png" 
+                alt="" />
+                <div class="buttonShip">
+              <button class="reg" data-symbol="${ship.symbol}">Name</button>
+              <button class="nav" data-symbol="${ship.symbol}">Navigation</button>
+              <button class="crew" data-symbol="${ship.symbol}">Crew</button>
+              <button class="frame" data-symbol="${ship.symbol}">Frame</button>
+              <button class="react" data-symbol="${ship.symbol}">Reactor</button>
+              <button class="fuel" data-symbol="${ship.symbol}">Fuel</button>
+              </div>
+            </div>
+          `
+          )
+      });
+      showSlides(1)
+
+      temp_engine.add_event(".reg", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>Name : ${ship.registration.name}</p>`);
+            $(".infos").append(`<p>Faction : ${ship.registration.factionSymbol}</p>`);
+            $(".infos").append(`<p>Role : ${ship.registration.role}</p>`);
+          }
+        })
+        modal.show();
+      });
+      temp_engine.add_event(".nav", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>Current system : ${ship.nav.systemSymbol}</p>`);
+            $(".infos").append(`<p>Current waypoint : ${ship.nav.waypointSymbol}</p>`);
+            $(".infos").append(`<p>Current status : ${ship.nav.status}</p>`);
+            $(".infos").append(`<p>Flight mode : ${ship.nav.flightMode}</p>`);
+          }
+        })
+        modal.show();
+      });
+      temp_engine.add_event(".crew", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>Current member : ${ship.crew.current}</p>`);
+            $(".infos").append(`<p>Capacity : ${ship.crew.capacity}</p>`);
+            $(".infos").append(`<p>required member : ${ship.crew.required}</p>`);
+            $(".infos").append(`<p>Moral : ${ship.crew.morale}</p>`);
+          }
+        })
+        modal.show();
+      });
+      temp_engine.add_event(".frame", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>Name : ${ship.frame.name}</p>`);
+            $(".infos").append(`<p>Description : ${ship.frame.description}</p>`);
+            $(".infos").append(`<p>Fuel capacity : ${ship.frame.fuelCapacity}</p>`);
+            $(".infos").append(`<p>Condition : ${ship.frame.condition}</p>`);
+            $(".infos").append(`<p>Power : ${ship.frame.requirements.power}</p>`);
+            $(".infos").append(`<p>Crew : ${ship.frame.requirements.crew}</p>`);
+
+          }
+        })
+        modal.show();
+      });
+      temp_engine.add_event(".react", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>Name : ${ship.reactor.name}</p>`);
+            $(".infos").append(`<p>Description : ${ship.reactor.description}</p>`);
+            $(".infos").append(`<p>Condition : ${ship.reactor.condition}</p>`);
+            $(".infos").append(`<p>Power : ${ship.reactor.powerOutput}</p>`);
+            $(".infos").append(`<p>Crew : ${ship.reactor.requirements.crew}</p>`);
+          }
+        })
+        modal.show();
+      });
+      temp_engine.add_event(".engine", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>Name : ${ship.engine.name}</p>`);
+            $(".infos").append(`<p>Description : ${ship.engine.description}</p>`);
+            $(".infos").append(`<p>Condition : ${ship.engine.condition}</p>`);
+            $(".infos").append(`<p>Speed : ${ship.engine.speed}</p>`);
+            $(".infos").append(`<p>Crew : ${ship.engine.requirements.crew}</p>`);
+            $(".infos").append(`<p>Power : ${ship.engine.requirements.power}</p>`);
+          }
+        })
+        modal.show();
+      });
+      temp_engine.add_event(".fuel", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>current fuel : ${ship.fuel.current}</p>`);
+            $(".infos").append(`<p>Description : ${ship.fuel.capacity}</p>`);
+            $(".infos").append(`<p>Condition : ${ship.fuel.consumed.amount}</p>`);
+            $(".infos").append(`<p>Speed : ${ship.fuel.consumed.timestamp}</p>`);
+          }
+        })
+        modal.show();
+      });
+      $(".ships-list").on("click", (e) => {
+        const id_ship = $(e.target).attr("data-id");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+          }
+        })
+
+      });
+    });
+
+    temp_engine.add_event(".btn-close", "click", () => {
+      modal.close();
+    });
+      function plusSlides(n) {
+        showSlides(slideIndex += n);
+      }
+
+      temp_engine.add_event(".prev", "click", () => {
+        plusSlides(-1);      
+      });
+      temp_engine.add_event(".next", "click", () => {
+        plusSlides(1);     
+      });
+      
+      function showSlides(n) {
+        let i;
+        let slides = document.getElementsByClassName("ships-list");
+        if (n > slides.length) {slideIndex = 1}    
+        if (n < 1) {slideIndex = slides.length}
+        for (i = 0; i < slides.length; i++) {
+          slides[i].style.display = "none";  
+        }
+        slides[slideIndex-1].style.display = "block";  
+      }
+
+  });
+  
+  temp_engine.render("templates/ship/ship.html");
+
+};

js/controllers/systems.js

@@ -0,0 +1,43 @@
+import { CanvasRenderer } from "../skama_code/ui/canvas_render.js";
+import menu_mod from "./menu_mod.js";
+import { My } from "../skama_code/api/agent.js";
+import { SystemBuilder } from "../skama_code/api/system.js";
+
+export default (temp_engine) => {
+  temp_engine.after_render((temp_engine) => {
+    menu_mod(temp_engine);
+    //create canvas
+    const size = getSize();
+    const canvas = new CanvasRenderer("canvas", size.width, size.height);
+
+    //auto resize canvas
+    window.addEventListener("resize", () => {
+      const size = getSize();
+      canvas.resize(size.width, size.height);
+    });
+
+    //display planets
+    SystemBuilder.get(getAgentSystem(), (system) => {
+      system.list_all_planets((planets) => {
+        planets.forEach(planet => {
+          canvas.obj_from_img('../../assets/planets/planetproto.png', planet.position);
+        });
+      });
+    });
+  });
+
+  temp_engine.render("templates/systems/systems.html");
+};
+
+function getSize() {
+  return {
+    width: $("#canvas-container").width(),
+    height: window.innerHeight,
+  };
+}
+
+function getAgentSystem(){
+  const hq = My.agent.hq;
+  const systemName = hq.split('-');
+  return systemName[0] + '-' + systemName[1];
+}

js/index.js

@@ -0,0 +1,9 @@
+// Copyright © 2023 Entreprise SkamKraft
+'use strict';
+import { TemplateEngine } from "./skama_code/ui/templeting_engine.js";
+import login from "./controllers/login.js";
+
+let temp_engine = new TemplateEngine("html");
+login(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 1e036220813ade9e4114fa6723a3ec90db0c4c31

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