gawk sacha home

.gitignore

@@ -1 +1,2 @@
 /.vs/
+/js/skama_code

.gitmodules

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

LICENSE

@@ -1,2 +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.
+IF YOU DO YOU CAN'T USE OR TEACH THE KNOWLEAGE YOU ACQUEIRED.

README.md

@@ -1,15 +0,0 @@
-# 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

@@ -1,32 +0,0 @@
-/* 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

@@ -1,48 +1,32 @@
 .auth-container {
+    height: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.auth-title 
+{
+    font-size: 50px;
+}
+
+.auth{
+    width: 300px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background-color: rgba(0, 0, 0, 0.863);
+    background-color: var(--main-color);
     padding: 30px;
     border-radius: 5px;
 }
 
-.auth-input {
-    border-radius: 2px;
-    padding: 5px;
-}
-
 .auth-grp-label {
+    font-size: 20px;
     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

@@ -1,83 +0,0 @@
-/* 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/contracts.css

@@ -0,0 +1,72 @@
+.card{
+  display: grid;
+  margin-top: 15px;
+  grid-template-columns: 1fr 1fr;
+}
+.contracts
+{
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 50%;
+  width: 50%;
+  overflow-y: scroll;
+}
+
+.contract-screen
+{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+.screen-img {
+  z-index: -1;
+  position: absolute;
+  top: 10%;
+  height: 80%;
+  bottom: 1%;
+  right: 20%;
+  left: 20%;
+  width: 60%;
+}
+.card-body{
+  margin-left: 50px;
+}
+.card-button{
+  margin-top: 10px;
+}
+
+.img
+{
+  position: absolute;
+  top: 10%;
+  left: 25%;
+  z-index: -1;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  
+}
+
+#contracts-modal
+{
+  background-color: rgba(0, 0, 255, 0.5);
+  border: none;
+  border-radius: 10px;
+  padding: 40px;
+  color: white;
+}
+
+/* Modal */
+
+.status-onhold {
+  color: orange;
+}
+
+.status-accepted {
+  color: greenyellow;
+}

css/global.css

@@ -1,45 +1,192 @@
-/* Copyright © 2023 Entreprise SkamCraft */
+@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);
 }
 
-@font-face {
-  font-family: pixellari;
-  src: url("../assets/fonts/Pixellari.ttf");
+::-webkit-scrollbar {
+    width: 0 !important
 }
 
 body{
-  background-image: url(/assets/img/backgroundfinal.png); 
+    background-image: url("/assets/img/background.png"); 
     background-repeat: no-repeat;
-  background-size: 100%;
-  overflow-x: hidden;
+    background-size: cover;
+    overflow: 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{
-  border: none;
-  font-family: pixellari;
+    font-family: var(--text-familly);
+    color: var(--text-color);
 }
 
+#block-content{
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100vh;
+}
 
-button {
-  border: none;
-  font-family: pixellari;
+.modal-disable::backdrop {
+    background-color: rgba(0, 0, 0, 0.493);
 }
 
-select {
-  border: none;
-  font-family: pixellari;
+.ext-modal[open] {
+    animation: myFadeIn 0.5s ease normal;
+  }
+    
+  @keyframes myFadeIn{
+    from {
+        bottom: 100%;
+    }
+    to {
+        bottom: 0%;
+    }
+}
+
+.home-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-shadow: 4px 2px black;
 }
 
 .languettes {
+    z-index: 1;
+    right: -30px;
+    top: 25%;
+    width: 80px;
+    position: absolute;
     display: flex;
     flex-direction: column;
     align-items:flex-end;
-  margin: 250px -50px 0px 0px ;  
 }
-
 .languettes input{
-  width: 5%;
+    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{
+    position: absolute;
+    font-size: 50px;
+    margin-left: 50px;
+    background-color: rgba(0, 0, 0, 0.363);
+    border-radius: 5px;
+    width: fit-content;
+    padding: 10px;
+}
+
+.cont-center {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.title{
+    font-size: 50px;
+    margin-left: 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;
+} */
+button, .button {
+    margin: 2px;
+    font-family: var(--text-familly);
+    background-color: #0000008f; 
+    color: #ffffff; 
+    border: 2px solid #ffffff;
+    padding: 10px; 
+    font-size: 13px; 
+    cursor: pointer; 
+    border-radius: 5px; 
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s; 
+}
+
+button:hover, .button:hover {
+    background-color: #ffffff; 
+    color: #1a1a1a; 
+    border-color: #1a1a1a; 
+}
+
+button:active, .button:active {
+    background-color: #333333; 
+    color: #ffffff; 
+    border-color: #ffffff; 
+}
+
+button:disabled, .button:disabled {
+    background-color: #555555; 
+    color: #b3b3b3; 
+    border-color: #b3b3b3; 
+    cursor: not-allowed; 
+    opacity: 0.6; 
+}
+
+/* .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;
+    font-family: var(--text-familly);
+    color: var(--text-color);
+}

css/leaderboard.css

@@ -0,0 +1,56 @@
+.container-ldb {
+    width: 100%;
+}
+#myVideo {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    min-width: 100%;
+    min-height: 100%;
+    z-index: -1;
+}
+.head-board {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    margin: auto;
+    width: 60%;
+    padding: 20px;
+    font-size:x-large;
+    border : 1px solid white;
+    border-bottom-color: white;
+    border-bottom-width: 1px;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.leaderboard {
+    display: flex;
+    margin: auto;
+    align-items: center;
+    flex-direction: column;
+    border : 1px solid white;
+    width: 60%;
+    height: 350px;
+    overflow-y: scroll;
+    overflow-x: visible;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+    scrollbar-width: none;
+}
+
+.player {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    border-bottom: 1px solid rgb(255, 255, 255);
+}
+
+.player p {
+    padding: 5px;
+    color: white;
+    font-size: large;
+    text-align: start;
+}

css/modal-ships.css

@@ -0,0 +1,41 @@
+.modal-ships {
+    background-image: url("/assets/spaceships/blueprint.png");
+    background-size: cover;
+    font-size: 25px;
+    width: 1000px;  /* Set the width to the image width */
+    height: 560px; /* Set the height to the image height */
+    position: relative;
+    margin: auto;
+    padding: 40px;
+    color: rgb(255, 255, 255);
+}
+
+.infos-ships {
+    padding: 20px;
+    margin-bottom: 20px; /* Space below the info box */
+}
+
+.ship-info {
+    background-color: rgba(0, 0, 0, 0.363);
+    border-radius: 5px;
+    width: fit-content;
+    padding: 5px;
+}
+
+.btn-close-ships {
+    position: absolute;
+    font-size:x-large;
+    bottom: 20px;
+    left: 20px;
+    background-color: rgba(255, 255, 255, 0.8); 
+    border: none;
+    color: rgb(252, 252, 252);
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color 0.3s ease; 
+}
+
+.btn-close-ships:hover {
+    background-color: rgba(255, 255, 255, 1); 
+}  

css/profile.css

@@ -0,0 +1,101 @@
+.cont-profile
+{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+#myVideo {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    min-width: 100%;
+    min-height: 100%;
+    z-index: -1;
+}
+#profile
+{
+    width: 50%;
+    height: 90%;
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.637);
+    border: none;
+    border-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+    color: white;
+}
+
+.profile-header
+{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.profile-header p
+{
+    font-size: 60px;
+}
+
+.profile-header button
+{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+}
+
+.profile-header button p
+{
+    font-size: 25px;
+    padding: 0;
+    margin: 0;
+}
+
+.profile-content
+{
+    width: 80%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+    border: 1px solid white;
+    border-radius: 10px;
+    padding: 0;
+}
+
+.profile-content p
+{
+    text-align: center;
+}
+
+.tb-r
+{
+    border-right: 1px solid white;
+}
+
+.profile-footer
+{
+    display: flex;
+    align-items: center;
+    width: 80%;
+    padding: 5px;
+}
+
+#btn-logout
+{
+    width: 50px;
+    height: 50px;
+    padding: 0;
+    border: none;
+    background: none;
+}
+
+#btn-logout img
+{
+    width: 100%;
+    height: 100%;
+}

css/ship.css

@@ -1,85 +0,0 @@
-* {
-    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/ships.css

@@ -0,0 +1,55 @@
+.block-ships{
+    position: relative;
+    width: 50%;
+    display:flex;
+    flex-direction: column;
+    color: white;
+    font-size:large;
+    text-align: center;
+    margin: auto;
+}
+
+.ships-modal{
+    font-size:small;
+    background-image: url("/assets/spaceships/blueprint.png");
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.ships-list {
+    display: none;
+}
+
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  margin-top: -22px;
+  font-weight: bold;
+  font-size: 60px;
+  transition: 0.6s ease;
+}
+
+.imgShip {
+  left: 0;
+  margin-top: 50px;
+  width: 70%;
+}
+.ships-list h5 {
+  font-size:xx-large;
+  background-color: rgba(0, 0, 0, 0.363);
+  border-radius: 5px;
+  width: fit-content;
+  padding: 10px;
+  margin:auto;
+}
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.btn-ships{
+  font-size:x-large;
+}

css/system.css

@@ -0,0 +1,17 @@
+.cont-canvas
+{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: -1;
+}
+
+#sys-canvas
+{
+    z-index: -1;
+    border: 1px solid black;
+    border-radius: 10px;
+    background-color: rgba(11, 1, 37, 0.842);
+}

css/ui.css

@@ -1,12 +0,0 @@
-/* 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

@@ -1,68 +1,8 @@
-<!-- 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";
-           }
-         }
+    // document.getElementById('audio').play();
 </script>
-      </body>
-    <main id="block-content"></main>
-    <div class="languettes" id="links"></div>
-</main>
+<div id="links" class="languettes">
+
+</div>
+<div id="block-content">
+</div>

html/templates/auth/login.html

@@ -1,19 +1,18 @@
 <!-- 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">
+        <p class="auth-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="auth-input" id="in-remember">
+            <input type="checkbox" class="base-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>
+            <button class="base-btn" id="btn-login">Validate</button>
+            <button class="base-btn" id="btn-cancel">Cancel</button>
         </div>
         <div>
-            <button class="auth-btn auth-btn-other" id="btn-reg">New agent</button>
+            <button class="base-btn" id="btn-register">New agent</button>
         </div>
         <div class="errors"></div>
     </div>

html/templates/auth/reg.html

@@ -1,24 +0,0 @@
-<!-- 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/auth/register.html

@@ -0,0 +1,23 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<div class="auth-container">
+    <div class="auth">
+        <p class="auth-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/contracts/contracts.html

@@ -1,4 +1,6 @@
-<link rel="stylesheet" href="css/global.css">
+<p class="Title">CONTRACTS</p>
 <div class="contract-screen">
-    <div class="contracts"></div>
+    <img class="screen-img" src="/assets/contracts/screen.png">
+    <div class="contracts">
+    </div>
 </div>

html/templates/contracts/contracts_modal.html

@@ -1,6 +1,6 @@
 <!-- Copyright © 2023 Entreprise SkamKraft -->
 
-<div class="my-modal">
+<div>
     <p class="modal-title">Contract</p>
     <p class="contract-id"></p>
     <p class="contract-faction"></p>

html/templates/home.html

@@ -1,5 +1,6 @@
-<!-- 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>
+<p class="Title">HOME</p>
+<div class="home-container">
+    <h1>WELCOME TO</h1>
+    <img src="/assets/logo/spacetradertitle.png" alt="" width="60%">
+    <p>Skamkraft is based on the SpaceTraders API</p>
 </div>

html/templates/leaderboard/leaderboard.html

@@ -0,0 +1,21 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<p class="Title">LEADERBOARD</p>
+<video autoplay muted loop id="myVideo">
+    <source src="/assets/leaderboard/trophee.mp4" type="video/mp4">
+</video>
+<div class="cont-center">
+    <div class="container-ldb">
+        <div class="head-board">
+            <p class="num">Rank</p>
+            <p class="symbol">Name</p>
+            <p class="credits">Credits</p>
+            <p class="headquarters">Headquarters</p>
+            <p class="faction">Faction</p>
+            <p class="ships">Ships</p>
+        </div>
+        <div class="leaderboard"></div>
+        <div>
+            <!--- leaderboard content -->
+        </div>
+    </div>
+</div>

html/templates/profile/profile.html

@@ -0,0 +1,24 @@
+<div class="cont-profile">
+    <div id="profile">
+        <div class="profile-header">
+            <p class="">PROFILE</p>
+        </div>  
+        <video autoplay muted loop id="myVideo">
+            <source src="/assets/profile/background.mp4" type="video/mp4">
+          </video>
+        <div class="profile-content">
+            <p class="tb-r">Name</p><p id="name"></p>
+            <p class="tb-r">Faction</p><p id="faction"></p>
+            <p class="tb-r">Credits</p><p id="credit"></p>
+            <p class="tb-r">Head Quaters</p><p id="hq"></p>
+            <p class="tb-r">Number of ships</p><p id="shipcount"></p>
+        </div>
+        
+        <div class="profile-footer">
+            <button id="btn-logout">
+                <img src="/assets/menu/logout.png" alt="">
+            </button>
+            <button id="btn-token">COPY TOKEN</button>
+        </div>
+    </div>
+</div>

html/templates/ship/ship.html

@@ -1,17 +0,0 @@
-<!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

@@ -1,9 +0,0 @@
-<!-- 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/ships/ships.html

@@ -0,0 +1,7 @@
+<p class="Title">SHIPS</p>
+<div class="cont-center">
+  <div class="block-ships">
+    <button class="prev"><</a>
+    <button class="next">></a>
+  </div>
+</div>

html/templates/ships/ships_modal.html

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

html/templates/system/system.html

@@ -0,0 +1,3 @@
+<div class="cont-canvas">
+    <canvas id="sys-canvas"></canvas>
+</div>

html/templates/systems/systems.html

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

index.html

@@ -5,15 +5,21 @@
     <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>
+    <link rel="stylesheet" href="css/global.css">
+    <link rel="stylesheet" href="css/auth.css">
+    <link rel="stylesheet" href="css/profile.css">
+    <link rel="stylesheet" href="css/contracts.css">
+    <link rel="stylesheet" href="css/ships.css">
+    <link rel="stylesheet" href="css/modal-ships.css">
+    <link rel="stylesheet" href="css/leaderboard.css">
+    <link rel="stylesheet" href="css/system.css">
   </head>
   <body>
-
+  <audio id="audio" controls loop style="display:none" crossorigin="anonymous">
+    <source src="/assets/sounds/skamkraft_main_theme.mp3" type="audio/mpeg">
+  </audio>
   </body>
 </html>

js/controllers/contracts.js

@@ -1,26 +1,20 @@
-// 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 function contracts(temp_engine) {
+  temp_engine.after_render(menu_mod);
 
-export default (temp_engine) => {
-
-
-  let modal = new Modal("contract-modal", temp_engine);
+  let modal = new Modal("contracts-modal", temp_engine);
 
   temp_engine.after_render((temp_engine) => {
-
+    $("body").css("background-image", "url('/assets/contracts/screen_background.png')")
     modal.load("templates/contracts/contracts_modal.html");
 
     Contract.list(10, 1, (contracts) => {
-
-      //Evenements
+      //Evenements accepter
       temp_engine.add_event(".btn-accept", "click", (e) => {
         contracts.forEach((contract) => {
           if ($(e.target).attr("data-id") == contract.id) {
@@ -28,18 +22,14 @@ export default (temp_engine) => {
               $(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();
-
             });
           }
         });
       });
-
+      //Evenement infos
       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);
@@ -48,11 +38,8 @@ export default (temp_engine) => {
           $(".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 => {
@@ -60,8 +47,6 @@ export default (temp_engine) => {
         let status
         let card
 
-
-
         if (contract.type = "PROCUREMENT") {
           img = "/assets/contracts/procurement.png"
         }
@@ -76,17 +61,17 @@ export default (temp_engine) => {
           status = "accepted"
           card =
             `                            
-                    <div class="card" style="width: 20rem;">
+                    <div class="card">
                       <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>
+                        <p></p>                     
+                      </div>
+                      <div class="card-button">
                         <button data-id="${contract.id}" 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" >Contract accepted</button>  
                       </div>
                     </div>
             `
@@ -96,38 +81,30 @@ export default (temp_engine) => {
           status = "on hold"
           card =
             `                            
-                    <div class="card" style="width: 20rem;">
+                    <div class="card">
                       <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 class="card-button">
+                        <button type="button" class="btn-infos" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
+                        <button data-id="${contract.id}" class="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);
+    menu_mod(temp_engine, null);
   });
-
   temp_engine.render("templates/contracts/contracts.html")
 }

js/controllers/home.js

@@ -1,18 +1,9 @@
-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(() => {
+    $("body").css("background-image", "url('/assets/img/background.png')")
+    menu_mod(temp_engine, null);
   });
-  }
-
-  temp_engine.after_render(menu_mod);
   temp_engine.render("templates/home.html");
 }

js/controllers/leaderboard.js

@@ -0,0 +1,51 @@
+import menu_mod from "./menu_mod.js";
+import { AgentBuilder } from "../skama_code/api/agent.js";
+
+export default function ldb(temp_engine) {
+    temp_engine.after_render((temp_engine) => {
+        $("body").css("background-image", "url('/assets/img/background.png')")
+        let bagents = new AgentBuilder();
+        menu_mod(temp_engine, bagents);
+        bagents.list_all((agents) => {
+            drawAgents(agents, sortAgentByCredits);
+        });
+    });
+
+    temp_engine.render("templates/leaderboard/leaderboard.html");
+}
+
+function drawAgents(agents, funcSort) {
+    $(".leaderboard").html("");
+    agents.sort(funcSort);
+    agents.reverse();
+    let i = 1;
+    agents.forEach((agent) => {
+        $(".leaderboard").append(`
+      <article class="player">
+        <p class="elem num">${i}.</p>
+        <p class="elem symbol">${agent.name}</p>
+        <p class="elem credits">${agent.credits}</p>
+        <p class="elem headquarters">${agent.hq}</p>
+        <p class="elem faction">${agent.faction}</p>
+        <p class="elem ships">${agent.ships_cpt}</p>
+      </article>
+      `);
+        i++
+    });
+}
+
+function sortAgentByCredits(a1, a2) {
+    if (a1.credits < a2.credits)
+        return -1
+    if (a1.credits > a2.credits)
+        return 1
+    return 0
+}
+
+function sortAgentByShips(a1, a2) {
+    if (a1.shipCount < a2.shipCount)
+        return -1
+    if (a1.shipCount > a2.shipCount)
+        return 1
+    return 0
+}

js/controllers/login.js

@@ -1,20 +1,21 @@
 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 reg from "./reg.js"
+import register from "./register.js";
 
 export default function login(temp_engine) {
   const auth = new Auth();
 
   temp_engine.after_render((temp_engine) => {
-        menu_mod(temp_engine);
+    $("body").css("background-image", "url('/assets/img/background.png')")
+    menu_mod(temp_engine, null);
 
     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)
+      auth.login(token);
     });
 
     temp_engine.add_event("#btn-cancel", "click", () => {
@@ -22,22 +23,22 @@ export default function login(temp_engine) {
       $("#in-remember").prop("checked", false);
     });
 
-        temp_engine.add_event("#btn-reg", "click", () => {
-            reg(temp_engine);
+    temp_engine.add_event("#btn-register", "click", () => {
+      register(temp_engine);
     });
   });
 
   auth.done((agent) => {
     My.agent = agent;
     home(temp_engine);
-    })
+  });
 
   auth.fail((errors) => {
     $(".errors").html("");
-        errors.forEach(error => {
+    errors.forEach((error) => {
       $(".errors").append(`<p>${error}</p>`);
     }); 
-    })
+  });
 
-    temp_engine.render(`templates/auth/login.html`);
+  temp_engine.render("templates/auth/login.html");
 }

js/controllers/menu_mod.js

@@ -1,56 +1,52 @@
-import { My } from "../skama_code/api/agent.js";
+import { My } from "../skama_code/commun/my.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);
-  });
+import profile from "./profile.js";
+import contracts from "./contracts.js";
+import ships from "./ships.js";
+import leaderboard from "./leaderboard.js";
+import system from "./system.js";
+
+function loged_links(temp_engine, lister) {
+  $("#links").html(`
+        <input type="image" alt="home" id="home-link" src="/assets/menu/home.png"/>
+        <input type="image" alt="systems" id="systems-link" src="/assets/menu/systems.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="profile" id="profile-link" src="/assets/menu/info.png"/>
+        <input type="image" alt="leaderboard" id="leaderboard-link" src="/assets/menu/leaderboard.png"/>
+  `);
+
   temp_engine.add_event("#home-link", "click", () => {
+    if(lister) lister.stop();
     home(temp_engine);
   });
-  temp_engine.add_event("#logout-link", "click", () => {
-    My.agent = null;
-    localStorage.removeItem("token");
-    login(temp_engine);
+
+  temp_engine.add_event("#profile-link", "click", () => {
+    if(lister) lister.stop();
+    profile(temp_engine);
   });
+
   temp_engine.add_event("#contracts-link", "click", () => {
-    contract(temp_engine);
-  })
-}
+    if(lister) lister.stop();
+    contracts(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"/>
-    `);
-}
+  temp_engine.add_event("#ships-link", "click", () => {
+    if(lister) lister.stop();
+    ships(temp_engine);
+  });
 
-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>
-  //   `);
-}
+  temp_engine.add_event("#leaderboard-link", "click", () => {
+    if(lister) lister.stop();
+    leaderboard(temp_engine);
+  });
 
-export default function menu_mod(temp_engine) {
-  init_menu(temp_engine);
-  if (My.agent) {
-    show_stats();
-    loged_links();
-  } else {
-    unloged_links();
+  temp_engine.add_event("#systems-link", "click", () => {
+    if(lister) lister.stop();
+    system(temp_engine, My.agent.get_agent_system());
+  });
 }
+
+export default (temp_engine, lister) => {
+  if(My.agent) loged_links(temp_engine, lister);
 }

js/controllers/profile.js

@@ -0,0 +1,30 @@
+import menu_mod from "./menu_mod.js";
+import { Auth } from "../skama_code/auth/auth.js"
+import { My } from "../skama_code/commun/my.js"
+import login from "./login.js";
+
+export default function profile(temp_engine) {
+    temp_engine.after_render(() => {
+        $("body").css("background-image", "url('/assets/profile/background.png')")
+        $('#name').append(My.agent.name);
+        $('#faction').append(My.agent.faction);
+        $('#credit').append(My.agent.credits);
+        $('#hq').append(My.agent.hq);
+        $('#shipcount').append(My.agent.ships_cpt);
+
+        temp_engine.add_event('#btn-token', 'click', () => {
+            navigator.clipboard.writeText(My.agent.token);
+            alert('Token copied !');
+        });
+
+        temp_engine.add_event('#btn-logout', 'click', () => {
+            const auth = new Auth();
+            auth.unload_token();
+            My.agent = null;
+            login(temp_engine);
+        });
+
+        menu_mod(temp_engine, null);
+    });
+    temp_engine.render("/templates/profile/profile.html");
+}

js/controllers/reg.js

@@ -1,58 +0,0 @@
-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/register.js

@@ -0,0 +1,59 @@
+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) => {
+    $("body").css("background-image", "url('/assets/img/background.png')")
+    menu_mod(temp_engine, null);
+
+    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`);
+}

js/controllers/ships.js

@@ -8,28 +8,31 @@ export default (temp_engine) => {
   let slideIndex = 1;
 
   temp_engine.after_render((temp_engine) => {
-    menu_mod(temp_engine);
-    modal.load("templates/ship/ship_modal.html");
+    menu_mod(temp_engine, null);
+    $("body").css("background-image", "url('/assets/spaceships/hangar.png')")
+    modal.load("templates/ships/ships_modal.html");
 
     Ship.list((ships) => {
       ships.forEach(ship => {
-        $(".block-ships").append(
+        console.log(ship)
+        $(".block-ships").prepend(
           `
-            <div class="ships-list fade" data-id="${ship.symbol}">
+            <div class="ships-list" data-id="${ship.symbol}">
               <h5>${ship.symbol}</h5>
               <img 
-                id="imgShip" 
-                src="/assets/spaceships/spaceship.png" 
+                class="imgShip" 
+                src="/assets/spaceships/${ship.registration.role}.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>
+                  <button id="" class="reg btn-ships" data-symbol="${ship.symbol}">Name</button>
+                  <button id="" class="nav btn-ships" data-symbol="${ship.symbol}">Navigation</button>
+                  <button id="" class="crew btn-ships" data-symbol="${ship.symbol}">Crew</button>
+                  <button id="" class="frame btn-ships" data-symbol="${ship.symbol}">Frame</button>
+                  <button id="" class="react btn-ships" data-symbol="${ship.symbol}">Reactor</button>
+                  <button id="" class="fuel btn-ships" data-symbol="${ship.symbol}">Fuel</button>
               </div> 
             </div>
+            
           `
           )
       });
@@ -40,10 +43,10 @@ export default (temp_engine) => {
         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>`);
+            $(".infos-ships").html("");
+            $(".infos-ships").append(`<p class="ship-info">Name : ${ship.registration.name}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Faction : ${ship.registration.factionSymbol}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Role : ${ship.registration.role}</p>`);
           }
         })
         modal.show();
@@ -53,11 +56,11 @@ export default (temp_engine) => {
         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>`);
+            $(".infos-ships").html("");
+            $(".infos-ships").append(`<p class="ship-info">Current system : ${ship.nav.systemSymbol}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Current waypoint : ${ship.nav.waypointSymbol}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Current status : ${ship.nav.status}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Flight mode : ${ship.nav.flightMode}</p>`);
           }
         })
         modal.show();
@@ -67,11 +70,11 @@ export default (temp_engine) => {
         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>`);
+            $(".infos-ships").html("");
+            $(".infos-ships").append(`<p class="ship-info">Current member : ${ship.crew.current}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Capacity : ${ship.crew.capacity}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">required member : ${ship.crew.required}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Moral : ${ship.crew.morale}</p>`);
           }
         })
         modal.show();
@@ -81,13 +84,13 @@ export default (temp_engine) => {
         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>`);
+            $(".infos-ships").html("");
+            $(".infos-ships").append(`<p class="ship-info">Name : ${ship.frame.name}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Description : ${ship.frame.description}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Fuel capacity : ${ship.frame.fuelCapacity}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Condition : ${ship.frame.condition}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Power : ${ship.frame.requirements.power}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Crew : ${ship.frame.requirements.crew}</p>`);
 
           }
         })
@@ -98,28 +101,12 @@ export default (temp_engine) => {
         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>`);
+            $(".infos-ships").html("");
+            $(".infos-ships").append(`<p class="ship-info">Name : ${ship.reactor.name}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Description : ${ship.reactor.description}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Condition : ${ship.reactor.condition}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Power : ${ship.reactor.powerOutput}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Crew : ${ship.reactor.requirements.crew}</p>`);
           }
         })
         modal.show();
@@ -129,53 +116,41 @@ export default (temp_engine) => {
         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>`);
+            $(".infos-ships").html("");
+            $(".infos-ships").append(`<p class="ship-info">current fuel : ${ship.fuel.current}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Description : ${ship.fuel.capacity}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Condition : ${ship.fuel.consumed.amount}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">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}
+      slideIndex += n;
+      let slides = $(".ships-list");
+      if (slideIndex > slides.length) slideIndex = 1;    
+      if (slideIndex < 1) {slideIndex = slides.length}
       for (i = 0; i < slides.length; i++) {
         slides[i].style.display = "none";  
       }
       slides[slideIndex-1].style.display = "block";
     }
 
+    temp_engine.add_event(".btn-close-ships", "click", () => {
+      modal.close();
+    });
+    temp_engine.add_event(".prev", "click", () => {
+      showSlides(-1);      
+    });
+    temp_engine.add_event(".next", "click", () => {
+      showSlides(1);     
+    });
   });
   
-  temp_engine.render("templates/ship/ship.html");
+  temp_engine.render("templates/ships/ships.html");
 
 };

js/controllers/system.js

@@ -0,0 +1,103 @@
+import menu_mod from "./menu_mod.js";
+import home from "./home.js";
+import { CanvasRenderer } from "../skama_code/ui/canvas_render.js";
+import { SystemBuilder } from "../skama_code/api/system.js"
+import { Position } from "../skama_code/commun/position.js";
+
+
+function get_img_from_type(planet)
+{
+    switch(planet.type)
+    {
+        case "PLANET":
+            return ["PLANET.png"];
+        case "GAS_GIANT": 
+            return ["GAS_GIANT.png"];
+        case "MOON":
+            return ["MOON.png"];
+        case "ORBITAL_STATION":
+            return ["ORBITAL_STATION.png"];
+        case "JUMP_GATE":
+            return ["jumpgate.png"];
+        case "ASTEROID_FIELD":
+            return ["ASTEROID_FIELD.png"];
+        case "ASTEROID":
+            return ["asteroid1.png", "asteroid2.png", "asteroid3.png", "asteroid4.png"];
+        case "ENGINEERED_ASTEROID":
+            return ["ENGINEERED_ASTEROID.png"];
+        case "ASTEROID_BASE":
+            return ["ASTEROID_BASE.png"];
+        case "NEBULA":
+            return [];
+        case "DEBRIS_FIELD":
+            return [];
+        case "GRAVITY_WELL":
+            return ["GRAVITY_WELL.png"];
+        case "ARTIFICIAL_GRAVITY_WELL":
+            return ["ARTIFICAL_GRAVITY_WELL.png"];
+        case "FUEL_STATION":
+            return ["FUEL_STATION.png"];
+        case _:
+            return [];
+    }
+}
+
+export default function system(temp_engine, sys_name) {
+    temp_engine.after_render(() => {
+            $("body").css("background-image", "url('/assets/planets/backgroundcanvas.png')")
+            let canvas = new CanvasRenderer("sys-canvas", 1200, 700);
+            canvas.resize(window.innerWidth, window.innerHeight);
+            SystemBuilder.get(sys_name, (system) => {
+                system.list_all_planets((planets) => {
+                    canvas.clean();
+                    console.log(planets)
+                    planets.forEach((planet) => {
+                        let urls = get_img_from_type(planet);
+                        if(urls.length)
+                        {
+                            let url = urls[Math.floor(Math.random() * urls.length)];
+                            console.log(url)
+                            canvas.obj_from_img("assets/planets/" + url, canvas.canvas_pos(planet.position), {
+                                selectable: false,
+                                name: planet.name,
+                                update: null,
+                            });
+                        }
+                    });
+                });
+                canvas.zoom(new Position(0, 0), 0.5);
+                let zoom = 0;
+                canvas.on("mouse:wheel", (opt) => {
+                    if (opt.e.deltaY < 0 && zoom < 30)
+                    {
+                        zoom += 1;
+                        canvas.zoom(canvas.rel_pos(new Position(opt.e.clientX, opt.e.clientY)), 1.1)
+                        canvas.offset(new Position(2, 2))
+                    } else if (opt.e.deltaY > 0 && zoom > -5) {
+                        zoom -= 1;
+                        canvas.zoom(canvas.rel_pos(new Position(opt.e.clientX, opt.e.clientY)), 0.9090)
+                        canvas.offset(new Position(0.5, 0.5))
+                    }
+                });
+
+                canvas.on("mouse:over", (e) => {
+                    e.target.shadow.blur = 100;
+                });
+
+                
+                canvas.on("mouse:out", (e) => {
+                    e.target.shadow.blur = 1;
+                });
+
+                $(window).on("resize", () => {
+                    canvas.resize(window.innerWidth, window.innerHeight);
+                });
+
+                canvas.start();
+                menu_mod(temp_engine, system);
+            }, (err) => {
+                home(temp_engine);
+            });
+    });
+    temp_engine.render("templates/system/system.html");
+}

js/controllers/systems.js

@@ -1,43 +0,0 @@
-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

@@ -1,9 +1,26 @@
 // Copyright © 2023 Entreprise SkamKraft
-'use strict';
+"use strict";
 import { TemplateEngine } from "./skama_code/ui/templeting_engine.js";
-import login from "./controllers/login.js";
+import register from "./controllers/register.js";
+import { Auth } from "./skama_code/auth/auth.js";
+import { AgentBuilder } from "./skama_code/api/agent.js";
+import { My } from "./skama_code/commun/my.js";
+import home  from "./controllers/home.js";
 
 let temp_engine = new TemplateEngine("html");
-login(temp_engine);
-
 
+//Auth
+const auth = new Auth;
+if(auth.relog())
+{
+  AgentBuilder.get(localStorage.getItem('token'), (agent) => {
+    My.agent = agent;
+    home(temp_engine);
+  }, (err) => {
+    register(temp_engine);
+  });
+}
+else 
+{
+    register(temp_engine);
+}

js/skama_code

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

js/test/tests.js

@@ -1,105 +0,0 @@
-// 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;

setup.bat

@@ -0,0 +1,5 @@
+@echo off
+
+cd %~dp0
+
+git clone https://github.com/anulax1225/skama_code js/skama_code