Fixed modules import path

.gitignore

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

LICENSE

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

README.md

@@ -0,0 +1,38 @@
+# Skamcraft
+
+## Norm
+* ``` ; ``` at the end of each line.
+* snack_case for functions and variables.
+* UpperCamelCase for Classes.
+* all in english.
+
+## DONE
+[BETA] = not tested yet = can crash 
+* template engine :
+    * renders a page
+    * renders a fragment in a tag
+    * adds events to DOM
+
+* authentication :
+    * verifie input
+    * registers a new client
+    * auth a client with is token
+    * stores token
+    * retives token from local storage for auth
+
+* agents :
+    * create an agent 
+    * get agent from token (for authentication)
+    * get public agent [BETA]
+    * list a page of agents max : 20
+    * list all agents in the game
+
+* strategy : 
+    * create a set of rules for input checking
+    * user frendly errors messages
+
+## TO DO
+* Documentaion
+* system management
+* waypoint management
+* ship management

css/animation.css

@@ -0,0 +1 @@
+/* Copyright © 2023 Entreprise SkamKraft */

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

@@ -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,130 @@
+/* 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-color: var(--main-back-color);
+    font-family: 'M42';
+    font-size: 7px;
+    margin: 0px;
+    padding: 0px;
+}
+
+/* Main */
+.container {
+    display: flex;
+    margin: 10px;
+    flex-direction: column;
+    align-items: center;
+    border: 4px solid rgba(68, 68, 68, 0.575);
+}
+
+.container .con-title {
+    font-size: 15px;
+    border-bottom: 2px solid black;
+}
+
+/*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(0,0,0);
+    --links-backcolor: rgb(255, 123, 71);
+    --links-border-color: rgb(255, 173, 118);
+    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;
+}
+
+/* General */
+.smooth {
+    padding: 5px;
+    border-radius: 10px;
+}
+
+/* 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;
+}
+
+.my-modal #timer {
+    text-align: center;
+    border: 1px solid black;
+    border-radius: 10px;
+    width: 10%;
+    padding: 5px;
+    margin-bottom: 10px;
+}
+
+.my-modal button {
+    background-color: rgba(0, 0, 0, 0.308);
+    justify-self: center;
+    border: none;
+    border-radius: 5px;
+    width: fit-content;
+    padding: 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,5 @@
+/* Copyright © 2023 Entreprise SkamKraft */
+
+.modal-disable::backdrop {
+    background-color: rgba(0, 0, 0, 0.493);
+}

html/template.html

@@ -1,8 +1,18 @@
-<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>
+  <ul class="nav-links">
-<div id="block-content">
+    <li class="nav-link smooth" id="contracts-link">Contracts</li>
-</div>
+    <li class="nav-link smooth" id="systems-link">System</li>
+    <li class="nav-link smooth" id="ships-link">Ships</li>
+    <li class="nav-link smooth" id="signin-link">Sign in</li>
+    <li class="nav-link smooth" id="signup-link">Sign up</li>
+  </ul>
+</nav>
+<main id="block-content"></main>
+<div id="test"></div>
+<footer>
+  <p>Skamcraft Sarl</p>
+</footer>

html/templates/auth/login.html

@@ -1,19 +0,0 @@
-<!-- Copyright © 2023 Entreprise SkamKraft -->
-<div class="auth-container">
-    <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="base-input" id="in-remember">
-        </div>
-        <div>
-            <button class="base-btn" id="btn-login">Validate</button>
-            <button class="base-btn" id="btn-cancel">Cancel</button>
-        </div>
-        <div>
-            <button class="base-btn" id="btn-register">New agent</button>
-        </div>
-        <div class="errors"></div>
-    </div>
-</div>

html/templates/auth/register.html

@@ -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">Bienvenue sur SkamCraft</p>
-    <img src="/assets/logo/spacetradertitle.png" alt="" width="60%">
+    <p class="con-content">Application client pour l'API Space Tarders.</p>
-    <p>Skamkraft is based on the SpaceTraders API</p>
+</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>