Implemented new code (SkamaCode) and almost finished fixing differences

.gitignore

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

.gitmodules

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

README.md

@@ -0,0 +1,15 @@
+# Skamcraft
+
+## Start 
+* Start with Live Server in VSCode to get full functionnality.
+* Start with php : 
+``` bash
+    cd /.../Skamcraft
+    php -S 127.0.0.1:80
+```
+
+## Norm
+* ``` ; ``` at the end of each line.
+* snake_case for functions and variables.
+* UpperCamelCase for Classes.
+* Whole project in English.

css/animation.css

@@ -0,0 +1,15 @@
+/* Copyright © 2023 Entreprise SkamKraft */
+
+
+.ext-modal[open] {
+    animation: myFadeIn 2.0s ease normal;
+}
+  
+@keyframes myFadeIn{
+    from {
+      bottom: 100%;
+    }
+    to {
+      bottom: 0%;
+    }
+}

css/auth.css

@@ -1,32 +0,0 @@
-.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: var(--main-color);
-    padding: 30px;
-    border-radius: 5px;
-}
-
-.auth-grp-label {
-    font-size: 20px;
-    display: flex;
-    justify-content: space-between;
-}
-
-.errors {
-    color: red;
-}

css/contracts.css

@@ -1,72 +0,0 @@
-.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,192 +0,0 @@
-@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);
-}
-
-::-webkit-scrollbar {
-    width: 0 !important
-}
-
-body{
-    background-image: url("/assets/img/background.png"); 
-    background-repeat: no-repeat;
-    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{
-    font-family: var(--text-familly);
-    color: var(--text-color);
-}
-
-#block-content{
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100vh;
-}
-
-.modal-disable::backdrop {
-    background-color: rgba(0, 0, 0, 0.493);
-}
-
-.ext-modal[open] {
-    animation: myFadeIn 0.5s ease normal;
-  }
-    
-  @keyframes myFadeIn{
-    from {
-        bottom: 100%;
-    }
-    to {
-        bottom: 0%;
-    }
-}
-
-.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;
-}
-.languettes input{
-    width: 100%;
-}
-.languettes input:hover{
-    animation: slide-left;
-    position: relative;
-    animation-timing-function: ease;
-    animation-fill-mode: forwards;
-    animation-duration: 1s;
-}
-
-@keyframes slide-left {
-    0%   {right: 0px; top: 0px;}
-  100%  {right: 25px; top: 0px;}
-}
-
-.Title{
-    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

@@ -1,27 +1,41 @@
-.container-ldb {
+* {
+    font-family: M42;
+    font-size: 10px;
+}
+
+.deploy-bar {
+    display: flex;
+    flex-direction: column;
     width: 100%;
+    margin: auto;
+    margin-top: 40px;
 }
-#myVideo {
+
-    position: fixed;
+.btn-deploy {
-    right: 0;
+    margin: auto;
-    bottom: 0;
+    color: white;
-    min-width: 100%;
+    background-color: black;
-    min-height: 100%;
+    border-radius: 10px 10px 0px 0px;
-    z-index: -1;
+    width: 70%;
 }
+
+.container-ldb {
+    margin: auto;
+    width: 100%;
+}
+
 .head-board {
-    display: grid;
+    display: flex;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
     margin: auto;
-    width: 60%;
+    justify-content: space-between;
-    padding: 20px;
+    width: 70%;
-    font-size:x-large;
+    border: 0px solid black;
-    border : 1px solid white;
+    border-top-color: white;
     border-bottom-color: white;
     border-bottom-width: 1px;
-    border-top-right-radius: 5px;
+
-    border-top-left-radius: 5px;
+    background-color: black;
-    background-color: rgba(0, 0, 0, 0.5);
+
 }
 
 .leaderboard {
@@ -29,28 +43,98 @@
     margin: auto;
     align-items: center;
     flex-direction: column;
-    border : 1px solid white;
+    width: 70%;
-    width: 60%;
+    height: 50vh;
-    height: 350px;
     overflow-y: scroll;
     overflow-x: visible;
-    background-color: rgba(0, 0, 0, 0.5);
+
-    padding: 20px;
+    background-color: black;
-    border-bottom-right-radius: 5px;
-    border-bottom-left-radius: 5px;
     scrollbar-width: none;
+    /* Firefox */
+    -ms-overflow-style: none;
+}
+
+.leaderboard::-webkit-scrollbar {
+    width: 0 !important
 }
 
-.player {
+article {
     width: 100%;
-    display: grid;
+    display: flex;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    justify-content: space-between;
     border-bottom: 1px solid rgb(255, 255, 255);
 }
 
-.player p {
+p {
     padding: 5px;
-    color: white;
-    font-size: large;
     text-align: start;
 }
+
+.num {
+    font-size: larger;
+    color: rgb(255, 255, 255);
+}
+
+.faction {
+    color: rgb(0, 255, 115);
+}
+
+.headquarters {
+    color: rgb(86, 187, 255);
+}
+
+.symbol {
+    color: red;
+    text-decoration: underline;
+}
+
+.credits {
+    color: rgb(250, 204, 88);
+}
+
+.ships {
+    color: rgb(146, 146, 146);
+}
+
+.btn-cont {
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    width: 70%;
+}
+
+button:hover {
+    transition: ease-in-out;
+    color: black;
+    transition-duration: 0.3s;
+    background-color: white;
+}
+
+button {
+    padding: 15px;
+}
+
+.btn-cred {
+    background-color: black;
+    color: rgb(250, 204, 88);
+    width: 50%;
+    font-size: 11px;
+    border-left-color: black;
+    border: 3px none none 3px;
+    border-bottom: none;
+    border-top-color: white;
+    border-radius: 0px 0px 0px 10px;
+}
+
+.btn-ship {
+    background-color: black;
+    color: rgb(86, 187, 255);
+    width: 50%;
+    font-size: 11px;
+    border: 3px none none 3px;
+    border-bottom: none;
+    border-right-color: white;
+    border-left-color: black;
+    border-top-color: white;
+    border-radius: 0px 0px 10px 0px;
+}

css/modal-ships.css

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

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

@@ -1,55 +0,0 @@
-.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/style.css

@@ -0,0 +1,195 @@
+/* Copyright © 2023 Entreprise SkamKraft */
+
+:root {
+    --main-back-color: rgb(143, 143, 143);
+    --second-back-color: black;
+}
+
+@font-face {
+    font-family: M42;
+    src: url("/assets/fonts/m42.TTF");
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background-image: url("/assets/img/background.png");
+    font-family: 'M42';
+    font-size: 7px;
+    margin: 0px;
+    padding: 0px;
+}
+
+/* Main */
+.container {
+    color: white;
+    background-color: rgba(0, 0, 0, 0.726);
+    display: flex;
+    margin: 10px;
+    width: fit-content;
+    margin: auto;
+    margin-top: 10px; margin-bottom: 30px;
+    flex-direction: column;
+    align-items: center;
+    border: 4px solid rgba(68, 68, 68, 0.575);
+}
+
+.max-container {
+    background-color: rgba(0, 0, 0, 0.726);
+    color: white;
+    display: flex;
+    margin: 10px;
+    width: 95%;
+    margin: auto;
+    margin-top: 10px; margin-bottom: 30px;
+    flex-direction: column;
+    align-items: center;
+    border: 4px solid rgba(68, 68, 68, 0.575);
+}
+
+.con-title {
+    font-size: 15px;
+    border-bottom: 2px solid black;
+}
+
+.btn {
+    padding: 10px;
+    font-size: 8px;
+    font-family: 'M42';
+    color: white;
+    border: none;
+    border-radius: 10px;
+}
+
+.btn-val {
+    background-color: rgba(0, 0, 255, 0.637);
+}
+
+.btn-cancel {
+    background-color: rgba(255, 0, 0, 0.699);
+}
+
+/*footer*/
+footer {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    background-color: var(--second-back-color);
+    color: white;
+}
+
+/*nav bar*/
+.nav-nav {
+    --nav-img-width: 100px;
+    background-color: var(--second-back-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.nav-nav .nav-brand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.nav-nav .nav-brand img {
+    width: var(--nav-img-width);
+}
+
+.nav-nav .nav-links {
+    --links-color: rgb(255, 255, 255);
+    --links-backcolor: rgb(0, 0, 0);
+    --links-border-color: rgb(255, 255, 255);
+    height: 70%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.nav-link {
+    margin-right: 10px;
+    background-color: var(--links-backcolor);
+    color: var(--links-color);
+    border: 4px solid var(--links-border-color); 
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 3px 2px white;
+}
+
+.stats {
+    color: white;
+}
+
+/* General */
+.smooth {
+    padding: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 5px;
+}
+
+.in-big {
+    font-family: 'M42';
+    font-size: 6px;
+    padding: 5px;
+    width: 100%;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border: none;
+}
+
+.errors p {
+    background-color: rgba(255, 56, 56, 0.733);
+    border: 3px solid rgb(255, 111, 111);
+    padding: 10px;
+    color: white;
+    border-radius: 5px;
+    text-align: center;
+}
+
+/* Modal */
+.ext-modal {
+    background-color: rgba(255, 255, 255, 0.767);
+    border-radius: 10px;
+    padding: 50px;
+}
+
+.my-modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.modal-title {
+    font-size: 15px;
+    margin-bottom: 40px;
+}
+
+.show-token {
+    width: fit-content;
+    border: 2px solid black;
+    border-radius: 10px;
+    padding: 30px;
+    font-size: 5px;
+    white-space:pre-wrap;
+    word-break:break-word;
+}
+
+.my-modal #timer {
+    text-align: center;
+    border: 1px solid black;
+    border-radius: 10px;
+    width: 10%;
+    padding: 5px;
+    margin-bottom: 10px;
+}
+
+#canvas {
+    border-radius: 10px;
+}

css/system.css

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

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

html/template.html

@@ -1,8 +1,17 @@
-<script>
+<!-- Copyright © 2023 Entreprise SkamKraft -->
-    // document.getElementById('audio').play();
+<nav class="nav-nav">
-</script>
+  <div class="nav-brand">
-<div id="links" class="languettes">
+    <img src="assets/logo/logoblancnotext.png" />
-
+  </div>
-</div>
+  <div class="stats"></div>
-<div id="block-content">
+  <ul class="nav-links">
-</div>
+    <li class="nav-link smooth" id="ldb-link">Leaderboard</li>
+    <li class="nav-link smooth" id="systems-link">Systems</li>
+    <li class="nav-link smooth" id="login-link">Log in</li>
+    <li class="nav-link smooth" id="reg-link">New Agent</li>
+  </ul>
+</nav>
+<main id="block-content"></main>
+<footer>
+  <p>SkamKraft Sarl</p>
+</footer>

html/templates/auth/login.html

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

html/templates/auth/login_modal.html

@@ -0,0 +1,9 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<div class="my-modal">
+    <p class="modal-title">Login success</p>
+    <div>
+        <button id="ok" class="btn btn-val">Continue</button>
+        <button id="forget_login" class="btn btn-cancel">Forget Agent</button>
+    </div>
+</div>

html/templates/auth/reg.html

@@ -0,0 +1,12 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<div class="container smooth"> 
+    <p class="con-title">New Agent</p>
+    <input type="text" placeholder="Name" id="in-name" class="in-big">
+    <input type="text" placeholder="Faction" id="in-faction" class="in-big">
+    <div class="grp-btn">
+        <button class="btn btn-val" id="val">Validate</button>
+        <button class="btn btn-cancel" id="cancel">Cancel</button>
+    </div>
+    <div class="errors"></div>
+</div>

html/templates/auth/reg_modal.html

@@ -0,0 +1,10 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<div class="my-modal">
+    <p class="modal-title">Login success</p>
+    <p class="show-token"></p>
+    <div>
+        <button id="ok" class="btn btn-val">Continue</button>
+        <button id="forget_reg" class="btn btn-cancel">Forget Agent</button>
+    </div>
+</div>

html/templates/auth/register.html

@@ -1,23 +0,0 @@
-<!-- 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,6 +0,0 @@
-<p class="Title">CONTRACTS</p>
-<div class="contract-screen">
-    <img class="screen-img" src="/assets/contracts/screen.png">
-    <div class="contracts">
-    </div>
-</div>

html/templates/contracts/contracts_modal.html

@@ -1,16 +0,0 @@
-<!-- Copyright © 2023 Entreprise SkamKraft -->
-
-<div>
-    <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

@@ -1,6 +1,5 @@
-<p class="Title">HOME</p>
+<!-- Copyright © 2023 Entreprise SkamKraft -->
-<div class="home-container">
+<div class="container smooth">
-    <h1>WELCOME TO</h1>
+    <p class="con-title">Welcome to SkamKraft</p>
-    <img src="/assets/logo/spacetradertitle.png" alt="" width="60%">
+    <p class="con-content">Web App for SpaceTraders API</p>
-    <p>Skamkraft is based on the SpaceTraders API</p>
+</div>
-</div>

html/templates/leaderboard.html

@@ -0,0 +1,22 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<div class="deploy-bar">
+    <button class="btn-deploy">Click to deploy Leaderboard</button>
+    <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 class="btn-cont">
+            <button class="btn-cred">Sort by credits</button>
+            <button class="btn-ship">Sort by ships</button>
+        </div>
+    </div>
+</div>

html/templates/leaderboard/leaderboard.html

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

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

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

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

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

html/templates/systems/system.html

@@ -0,0 +1,5 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<div class="max-container smooth"> 
+    <p class="con-title" id="sys-name"></p>
+    <canvas id="canvas"></canvas>
+</div>

html/templates/systems/systems.html

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

index.html

@@ -1,25 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
-    <title>Skamkraft</title>
+<head>
-    <meta charset="UTF-8">
+  <title></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/style.css">
-    <meta name="viewport" content="height=device-height, initial-scale=1.0">
+  <link rel="stylesheet" href="css/ui.css">
-    <script src="js/lib/fabric.js"></script>
+  <link rel="stylesheet" href="css/animation.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+  <link rel="stylesheet" href="css/leaderboard.css">
-    <script type="module" src="js/index.js" defer></script>
+  <script src="js/lib/fabric.js"></script>
-    <link rel="stylesheet" href="css/global.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-    <link rel="stylesheet" href="css/auth.css">
+  <script type="module" src="js/index.js" defer></script>
-    <link rel="stylesheet" href="css/profile.css">
+</head>
-    <link rel="stylesheet" href="css/contracts.css">
+
-    <link rel="stylesheet" href="css/ships.css">
+<body>
-    <link rel="stylesheet" href="css/modal-ships.css">
+
-    <link rel="stylesheet" href="css/leaderboard.css">
+</body>
-    <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,110 +0,0 @@
-"use strict";
-
-import menu_mod from "./menu_mod.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);
-
-  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 accepter
-      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")
-            });
-          }
-        });
-      });
-      //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);
-          $(".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">
-                      <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 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>
-            `
-        }
-
-        else {
-          status = "on hold"
-          card =
-            `                            
-                    <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 class="card-text status-onhold">Status : ${status}</p>                                        
-                          <p></p>                        
-                      </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);
-        
-      });
-
-    })
-    temp_engine.add_event(".btn-close", "click", () => {
-      modal.close();
-    });
-    menu_mod(temp_engine, null);
-  });
-  temp_engine.render("templates/contracts/contracts.html")
-}

js/controllers/home.js

@@ -1,9 +1,10 @@
 import menu_mod from "./menu_mod.js";
 
 export default function home(temp_engine) {
-  temp_engine.after_render(() => {
+    console.log("test");
-    $("body").css("background-image", "url('/assets/img/background.png')")
+    temp_engine.after_render(menu_mod);
-    menu_mod(temp_engine, null);
+    temp_engine.render("templates/home.html");
-  });
-  temp_engine.render("templates/home.html");
 }
+
+
+

js/controllers/leaderboard.js

@@ -3,15 +3,24 @@ 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')")
+        menu_mod(temp_engine);
-        let bagents = new AgentBuilder();
+
-        menu_mod(temp_engine, bagents);
+        AgentBuilder.list_all((agents) => {
-        bagents.list_all((agents) => {
+            $(".btn-cred").on("click", () => {
-            drawAgents(agents, sortAgentByCredits);
+                drawAgents(agents, sortAgentByCredits);
+            });
+
+            $(".btn-ship").on("click", () => {
+                drawAgents(agents, sortAgentByShips);
+            });
         });
+        $('.container-ldb').hide()
+        $('.btn-deploy').on('click', () => {
+            $('.container-ldb').slideToggle()
+        })
     });
 
-    temp_engine.render("templates/leaderboard/leaderboard.html");
+    temp_engine.render("templates/leaderboard.html");
 }
 
 function drawAgents(agents, funcSort) {
@@ -21,9 +30,9 @@ function drawAgents(agents, funcSort) {
     let i = 1;
     agents.forEach((agent) => {
         $(".leaderboard").append(`
-      <article class="player">
+      <article>
         <p class="elem num">${i}.</p>
-        <p class="elem symbol">${agent.name}</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>
@@ -48,4 +57,4 @@ function sortAgentByShips(a1, a2) {
     if (a1.shipCount > a2.shipCount)
         return 1
     return 0
-}
+}

js/controllers/login.js

@@ -1,44 +1,51 @@
+import { Modal } from "../skama_code/ui/modal.js";
 import { Auth } from "../skama_code/auth/auth.js";
-import { My } from "../skama_code/commun/my.js";
+import { My } from "../skama_code/api/agent.js";
 import home from "./home.js";
 import menu_mod from "./menu_mod.js";
-import register from "./register.js";
 
 export default function login(temp_engine) {
-  const auth = new Auth();
+    let auth = new Auth(true);
-
+    let modal = new Modal("login-modal", temp_engine);
-  temp_engine.after_render((temp_engine) => {
+
-    $("body").css("background-image", "url('/assets/img/background.png')")
+    modal.add_class("ext-modal");
-    menu_mod(temp_engine, null);
+    temp_engine.after_render((temp_engine) => {
-
+        modal.load("templates/auth/login_modal.html")
-    temp_engine.add_event("#btn-login", "click", () => {
+        menu_mod(temp_engine);
-      const is_checked = $("#in-remember").is(":checked");
+        temp_engine.add_event("#ok", "click", () => {
-      const token = $("#in-token").val();
+            home(temp_engine);
-      auth.store = is_checked;
+        });
-      auth.login(token);
+    
-    });
+        temp_engine.add_event("#forget_login", "click", () => {
-
+            My.agent = null;
-    temp_engine.add_event("#btn-cancel", "click", () => {
+            auth.unload_token();
-      $("#in-token").val("");
+            modal.close();
-      $("#in-remember").prop("checked", false);
+            render_login();
+        });
+    
+        temp_engine.add_event("#val", "click", () => {
+            let token = $("#in-token").val();
+            auth.login(token);
+        });
+    
+        temp_engine.add_event("#cancel", "click", () => {
+            $("#in-token").val("");
+        });
     });
 
-    temp_engine.add_event("#btn-register", "click", () => {
+    temp_engine.render(`templates/auth/login.html`);
-      register(temp_engine);
+
+    auth.done((agent) => {
+        modal.show();
+        My.agent = agent;
+    }).fail((errs) => {
+        $(".errors").html("");
+        errs.forEach(err => {
+            $(".errors").append(`
+                <p>${err}</p>
+            `);
+        });
     });
-  });
-
-  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");
+    auth.relog();
-}
+}

js/controllers/menu_mod.js

@@ -1,52 +1,49 @@
-import { My } from "../skama_code/commun/my.js";
+import { My } from "../skama_code/api/agent.js";
+import login from "./login.js";
+import ldb from "./leaderboard.js";
+import reg from "./reg.js";
 import home from "./home.js";
-import profile from "./profile.js";
+import { systems } from "./systems.js";
-import contracts from "./contracts.js";
+
-import ships from "./ships.js";
+function init_menu(temp_engine) {
-import leaderboard from "./leaderboard.js";
+    temp_engine.add_event("#ldb-link", "click", () => {
-import system from "./system.js";
+        ldb(temp_engine);
-
+    });
-function loged_links(temp_engine, lister) {
+    temp_engine.add_event("#reg-link", "click", () => {
-  $("#links").html(`
+        reg(temp_engine);
-        <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"/>
+    temp_engine.add_event("#login-link", "click", () => {
-        <input type="image" alt="contracts" id="contracts-link" src="/assets/menu/contracts.png"/>
+        login(temp_engine);
-        <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"/>
+    temp_engine.add_event("#systems-link", "click", () => {
-        <input type="image" alt="leaderboard" id="leaderboard-link" src="/assets/menu/leaderboard.png"/>
+        systems(temp_engine);
-  `);
+    });
-
+    temp_engine.add_event(".nav-brand", "click", () => {
-  temp_engine.add_event("#home-link", "click", () => {
+        home(temp_engine);
-    if(lister) lister.stop();
+    });
-    home(temp_engine);
+}
-  });
-
-  temp_engine.add_event("#profile-link", "click", () => {
-    if(lister) lister.stop();
-    profile(temp_engine);
-  });
-
-  temp_engine.add_event("#contracts-link", "click", () => {
-    if(lister) lister.stop();
-    contracts(temp_engine);
-  });
-
-  temp_engine.add_event("#ships-link", "click", () => {
-    if(lister) lister.stop();
-    ships(temp_engine);
-  });
-
-  temp_engine.add_event("#leaderboard-link", "click", () => {
-    if(lister) lister.stop();
-    leaderboard(temp_engine);
-  });
 
-  temp_engine.add_event("#systems-link", "click", () => {
+function loged_links() {
-    if(lister) lister.stop();
+    $(".nav-links").prepend(`
-    system(temp_engine, My.agent.get_agent_system());
+        <li class="nav-link smooth" id="contracts-link">Contracts</li>
-  });
+        <li class="nav-link smooth" id="ships-link">Ships</li>
+    `);
 }
 
-export default (temp_engine, lister) => {
+function show_stats() {
-  if(My.agent) loged_links(temp_engine, lister);
+    $(".stats").html(`
+        <p>Agent name : ${My.agent.name}</p>
+        <p>Credits : ${My.agent.credits}</p>
+        <p>Ships : ${My.agent.ships_cpt}</p>
+        <p>Faction : ${My.agent.faction}</p>
+        <p>HQ : ${My.agent.hq}</p>
+    `);
 }
+
+export default function menu_mod(temp_engine) {
+    init_menu(temp_engine);
+    if (My.agent) {
+        show_stats();
+        loged_links();
+    }
+}

js/controllers/profile.js

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

@@ -0,0 +1,61 @@
+import { Modal } from "../skama_code/ui/modal.js";
+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";
+
+export default function reg(temp_engine) {
+    let active = false;
+    let auth = new Auth(true);
+    let modal = new Modal("reg-modal", temp_engine);
+
+    modal.add_class("ext-modal");
+    temp_engine.after_render((temp_engine) => {
+        menu_mod(temp_engine);
+        modal.load("templates/auth/reg_modal.html");
+        temp_engine.add_event("#ok", "click", () => {
+            home(temp_engine);
+        });
+    
+        temp_engine.add_event("#forget_reg", "click", () => {
+            My.agent = null;
+            auth.unload_token();
+            modal.close();
+            render_reg();
+        });
+    
+        temp_engine.add_event("#val", "click", () => {
+            if (!active) {
+                active = true;
+                let name = $("#in-name").val();
+                let faction = $("#in-faction").val();
+                auth.register({
+                    name: name,
+                    faction: faction
+                });
+            }
+        });
+    
+        temp_engine.add_event("#cancel", "click", () => {
+            $("#in-name").val("");
+            $("#in-faction").val("");
+        });
+    });
+
+    temp_engine.render(`templates/auth/reg.html`);
+
+    auth.done((agent) => {
+        $(".show-token").text(agent.token);
+        modal.show();
+        My.agent = agent;
+        active = false;
+    }).fail((errs) => {
+        $(".errors").html("");
+        errs.forEach(err => {
+            $(".errors").append(`
+                <p>${err}</p>
+            `);
+        });
+        active = false;
+    });
+}

js/controllers/register.js

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

@@ -1,156 +0,0 @@
-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, null);
-    $("body").css("background-image", "url('/assets/spaceships/hangar.png')")
-    modal.load("templates/ships/ships_modal.html");
-
-    Ship.list((ships) => {
-      ships.forEach(ship => {
-        console.log(ship)
-        $(".block-ships").prepend(
-          `
-            <div class="ships-list" data-id="${ship.symbol}">
-              <h5>${ship.symbol}</h5>
-              <img 
-                class="imgShip" 
-                src="/assets/spaceships/${ship.registration.role}.png" 
-                alt="" />
-                <div class="buttonShip">
-                  <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>
-            
-          `
-          )
-      });
-      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-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();
-      });
-      temp_engine.add_event(".nav", "click", (e) => {
-        const id_ship = $(e.target).attr("data-symbol");
-        ships.forEach(ship =>{
-          if(ship.symbol==id_ship)
-          {
-            $(".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();
-      });
-      temp_engine.add_event(".crew", "click", (e) => {
-        const id_ship = $(e.target).attr("data-symbol");
-        ships.forEach(ship =>{
-          if(ship.symbol==id_ship)
-          {
-            $(".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();
-      });
-      temp_engine.add_event(".frame", "click", (e) => {
-        const id_ship = $(e.target).attr("data-symbol");
-        ships.forEach(ship =>{
-          if(ship.symbol==id_ship)
-          {
-            $(".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>`);
-
-          }
-        })
-        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-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();
-      });
-      temp_engine.add_event(".fuel", "click", (e) => {
-        const id_ship = $(e.target).attr("data-symbol");
-        ships.forEach(ship =>{
-          if(ship.symbol==id_ship)
-          {
-            $(".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();
-      });
-      
-    });
-
-    function showSlides(n) {
-      let i;
-      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/ships/ships.html");
-
-};

js/controllers/system.js

@@ -1,103 +1,100 @@
-import menu_mod from "./menu_mod.js";
+import { SystemBuilder } from "../skama_code/api/system.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";
+import menu_mod from "./menu_mod.js"
 
+let canvas; 
+let last_target;
 
-function get_img_from_type(planet)
+let offset = {
-{
+    x: 2,
-    switch(planet.type)
+    y: 2
-    {
+};
-        case "PLANET":
+let max = 100;
-            return ["PLANET.png"];
+let w = (window.innerWidth/10)*9;
-        case "GAS_GIANT": 
+let h = (window.innerHeight/4)*3;
-            return ["GAS_GIANT.png"];
+
-        case "MOON":
+function animate() {
-            return ["MOON.png"];
+    canvas.renderAll();
-        case "ORBITAL_STATION":
+    setTimeout(animate, 1000);
-            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) {
+function draw_planet(planet) {
-    temp_engine.after_render(() => {
+    let shadow = new fabric.Shadow({
-            $("body").css("background-image", "url('/assets/planets/backgroundcanvas.png')")
+        color: "white",
-            let canvas = new CanvasRenderer("sys-canvas", 1200, 700);
+        blur: 5,
-            canvas.resize(window.innerWidth, window.innerHeight);
+        offsetX: 0,
-            SystemBuilder.get(sys_name, (system) => {
+        offsetY: 0,
-                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) => {
+    fabric.Image.fromURL('/assets/planets/planetproto.png', function(img_planet) {
-                    e.target.shadow.blur = 100;
+        //FABRICJS
-                });
+        img_planet.set({
+            selectable: false,
+            shadow: shadow,
+            left: planet.position.x/offset.x + w/2,
+            top: planet.position.y/offset.y+ h/2,
+            name: planet.name,
+            type: planet.type
+        });
+        canvas.add(img_planet);
+      });
+}
 
-                
+function offsetOrbit(planet) {
-                canvas.on("mouse:out", (e) => {
+    if (planet.orbits) {
-                    e.target.shadow.blur = 1;
+        console.log("Orbits");
-                });
+        let x = Math.floor(Math.random() * max - Math.random() * max);
+        let y =  Math.floor(Math.random() * max - Math.random() * max);
+        planet.position.move(new Position(x, y));
+    }
+}
 
-                $(window).on("resize", () => {
+export default function system(system, temp_engine) {
-                    canvas.resize(window.innerWidth, window.innerHeight);
+    temp_engine.after_render((temp_engine) => {
+        $("#sys-name").text(system);
+        menu_mod(temp_engine);
+        canvas = new fabric.Canvas("canvas",{
+            width: w,
+            height: h,
+            backgroundColor:"rgb(7, 18, 41)",
+            renderOnAddRemove: false,
+            hoverCursor :'pointer'
+        });
+        SystemBuilder.get(system, (system) => {
+            system.list_all((planets) => {
+                planets.forEach(planet => {
+                    offsetOrbit(planet);
+                    draw_planet(planet);
                 });
-
+                animate();
-                canvas.start();
-                menu_mod(temp_engine, system);
             }, (err) => {
-                home(temp_engine);
+                console.log(err);
             });
+        });
+        canvas.on('mouse:up', (e) => {
+            if(e.target.shadow.color == "red"){
+                e.target.shadow.color = "white"
+            }
+            else{
+                e.target.shadow.color = "red"
+            }
+            if (last_target) last_target.shadow.color = "white";
+            last_target = e.target;
+            canvas.renderAll();
+        });
+        $(window).on("resize", () => {
+            canvas.setWidth((window.innerWidth/10)*9);
+            canvas.setHeight((window.innerHeight/4)*3);
+            canvas.renderAll();
+        });
+        canvas.on("mouse:wheel", (opt) => {
+            let scale = 1.1;
+            if (opt.e.deltaY < 0) {
+                canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), canvas.getZoom() * scale);
+            } else if (opt.e.deltaY > 0) {
+                canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), canvas.getZoom() / scale);
+            }
+        });
     });
-    temp_engine.render("templates/system/system.html");
+    temp_engine.render("templates/systems/system.html");
 }

js/controllers/systems.js

@@ -0,0 +1,80 @@
+import { SystemBuilder } from "../skama_code/api/system.js";
+import menu_mod from "./menu_mod.js"
+import system from "./system.js"
+
+let canvas; 
+let last_target;
+
+let offset = {
+    x: 2,
+    y: 2
+};
+let max = 100;
+let w = (window.innerWidth/10)*9;
+let h = (window.innerHeight/4)*3;
+
+function animate() {
+    canvas.renderAll();
+    setTimeout(animate, 1000);
+}
+
+function draw_system(system) {
+    let shadow = new fabric.Shadow({
+        color: "white",
+        blur: 5,
+        offsetX: 0,
+        offsetY: 0,
+    });
+
+    fabric.Image.fromURL('/assets/systems/bluesystem.png', function(img_planet) {
+
+        img_planet.set({
+            selectable: false,
+            scaleX: 0.20,
+            scaleY: 0.20,
+            shadow: shadow,
+            left: system.position.x/offset.x + w/2,
+            top: system.position.y/offset.y+ h/2,
+            name: system.name,
+            type: system.type
+        });
+        canvas.add(img_planet);
+      });
+}
+
+export function systems(temp_engine) {
+    temp_engine.after_render((temp_engine) => {
+        menu_mod(temp_engine);
+        canvas = new fabric.Canvas("canvas",{
+            width: w,
+            height: h,
+            backgroundColor:"rgb(7, 18, 41)",
+            renderOnAddRemove: false,
+            hoverCursor :'pointer'
+        });
+        SystemBuilder.list_all((systems) => {
+                systems.forEach(system => {
+                    draw_system(system);
+                });
+                animate();
+            });
+        canvas.on('mouse:up', (e) => {
+            if (e.target) system(e.target.name, temp_engine);
+        });
+        $(window).on("resize", () => {
+            canvas.setWidth((window.innerWidth/10)*9);
+            canvas.setHeight((window.innerHeight/4)*3);
+            canvas.renderAll();
+        });
+        canvas.on("mouse:wheel", (opt) => {
+            console.log(opt.e.clientX);
+            let scale = 1.1;
+            if (opt.e.deltaY < 0) {
+                canvas.zoomToPoint(new fabric.Point(opt.e.clientX / canvas.getZoom(), opt.e.clienY / canvas.getZoom()), canvas.getZoom() * scale);
+            } else if (opt.e.deltaY > 0) {
+                canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), canvas.getZoom() / scale);
+            }
+        });
+    });
+    temp_engine.render("templates/systems/systems.html");
+}

js/index.js

@@ -1,26 +1,9 @@
 // Copyright © 2023 Entreprise SkamKraft
-"use strict";
+'use strict';
 import { TemplateEngine } from "./skama_code/ui/templeting_engine.js";
-import register from "./controllers/register.js";
+import home from "./controllers/home.js";
-import { Auth } from "./skama_code/auth/auth.js";
-import { AgentBuilder } from "./skama_code/api/agent.js";
-import { My } from "./skama_code/commun/my.js";
-import home  from "./controllers/home.js";
 
 let temp_engine = new TemplateEngine("html");
+home(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

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

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;

setup.bat

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