Starting System rendering via canvas

css/style.css

@@ -15,7 +15,7 @@
 }
 
 body {
-    background-color: var(--main-back-color);
+    background-image: url("/assets/img/background.jpg");
     font-family: 'M42';
     font-size: 7px;
     margin: 0px;
@@ -34,7 +34,18 @@ body {
     border: 4px solid rgba(68, 68, 68, 0.575);
 }
 
-.container .con-title {
+.max-container {
+    display: flex;
+    margin: 10px;
+    width: 95%;
+    margin: auto;
+    margin-top: 10px; margin-bottom: 10px;
+    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;
 }
@@ -175,3 +186,8 @@ footer {
     margin-bottom: 10px;
 }
 
+#canvas {
+    width: 100%;
+    border-radius: 10px;
+    background-color: rgba(0, 0, 0, 0.753);
+}

css/ui.css

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

html/template.html

@@ -11,7 +11,6 @@
   </ul>
 </nav>
 <main id="block-content"></main>
-<div id="test"></div>
 <footer>
   <p>Skamcraft Sarl</p>
 </footer>

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>

js/controllers/login.js

@@ -9,8 +9,8 @@ export default function login(temp_engine) {
     let modal = new Modal("login-modal", temp_engine);
 
     function render_login() {
-        temp_engine.render(`templates/login.html`);
-        modal.load("templates/login_modal.html")
+        temp_engine.render(`templates/auth/login.html`);
+        modal.load("templates/auth/login_modal.html")
     }
 
     modal.add_class("ext-modal");

js/controllers/menu_mod.js

@@ -2,6 +2,7 @@ import { My } from "../skama_code/api/agent.js";
 import login from "./login.js";
 import reg from "./reg.js";
 import home from "./home.js";
+import { system } from "./systems.js";
 
 function init_menu(temp_engine) {
     temp_engine.add_event("#reg-link", "click", () => {
@@ -10,6 +11,9 @@ function init_menu(temp_engine) {
     temp_engine.add_event("#login-link", "click", () => {
         login(temp_engine);
     });
+    temp_engine.add_event("#systems-link", "click", () => {
+        system("X1-TT23", temp_engine);
+    })
     temp_engine.add_event(".nav-brand", "click", () => {
         home(temp_engine);
     });
@@ -34,7 +38,6 @@ function show_stats() {
 
 export default function menu_mod(temp_engine) {
     init_menu(temp_engine);
-    console.log(My.agent)
     if(My.agent) {
         show_stats();
         loged_links();

js/controllers/reg.js

@@ -10,8 +10,8 @@ export default function reg(temp_engine) {
     let modal = new Modal("reg-modal", temp_engine);
 
     function render_reg() {
-        temp_engine.render(`templates/reg.html`);
-        modal.load("templates/reg_modal.html")
+        temp_engine.render(`templates/auth/reg.html`);
+        modal.load("templates/auth/reg_modal.html")
     }
 
     modal.add_class("ext-modal");

js/controllers/systems.js

@@ -0,0 +1,15 @@
+import { PlanetBuilder } from "../skama_code/api/planet.js";
+import menu_mod from "./menu_mod.js"
+
+export function systems(temp_engine) {
+
+}
+
+export function system(system, temp_engine) {
+    temp_engine.after_render((temp_engine) => {
+        $("#sys-name").text(system);
+        menu_mod(temp_engine);
+    });
+    temp_engine.render("templates/systems/system.html");
+
+}

js/index.js

@@ -1,7 +1,7 @@
 // Copyright © 2023 Entreprise SkamKraft
 'use strict';
 import { TemplateEngine } from "./skama_code/ui/templeting_engine.js";
-import home from "./scripts/home.js";
+import home from "./controllers/home.js";
 
 let temp_engine = new TemplateEngine("html");
 home(temp_engine);