Added a canvas rendering the system

css/style.css

@@ -24,22 +24,24 @@ body {
 
 /* Main */
 .container {
+    color: white;
     display: flex;
     margin: 10px;
     width: fit-content;
     margin: auto;
-    margin-top: 10px; margin-bottom: 10px;
+    margin-top: 10px; margin-bottom: 30px;
     flex-direction: column;
     align-items: center;
     border: 4px solid rgba(68, 68, 68, 0.575);
 }
 
 .max-container {
+    color: white;
     display: flex;
     margin: 10px;
     width: 95%;
     margin: auto;
-    margin-top: 10px; margin-bottom: 10px;
+    margin-top: 10px; margin-bottom: 30px;
     flex-direction: column;
     align-items: center;
     border: 4px solid rgba(68, 68, 68, 0.575);
@@ -187,7 +189,5 @@ footer {
 }
 
 #canvas {
-    width: 100%;
     border-radius: 10px;
-    background-color: rgba(0, 0, 0, 0.753);
 }

index.html

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/ui.css">
     <link rel="stylesheet" href="css/animation.css">
+    <script src="js/lib/fabric.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>    
     <script type="module" src="js/index.js" defer></script>
   </head>

js/controllers/menu_mod.js

@@ -2,7 +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";
+import { system } from "./system.js";
 
 function init_menu(temp_engine) {
     temp_engine.add_event("#reg-link", "click", () => {
@@ -12,7 +12,7 @@ function init_menu(temp_engine) {
         login(temp_engine);
     });
     temp_engine.add_event("#systems-link", "click", () => {
-        system("X1-TT23", temp_engine);
+        system("X1-PU31", temp_engine);
     })
     temp_engine.add_event(".nav-brand", "click", () => {
         home(temp_engine);

js/controllers/system.js

@@ -0,0 +1,81 @@
+import { PlanetBuilder } from "../skama_code/api/planet.js";
+import { Position } from "../skama_code/commun/position.js";
+import menu_mod from "./menu_mod.js"
+
+let canvas; 
+
+let offset = {
+    x: 2,
+    y: 2
+};
+let max = 40;
+let w = 1200;
+let h = 600;
+
+function animate() {
+    canvas.renderAll();
+    setTimeout(animate, 1000);
+}
+
+function draw_planet(planet) {
+    let shadow = new fabric.Shadow({
+        color: "white",
+        blur: 5,
+        offsetX: 0,
+        offsetY: 0,
+    });
+
+    fabric.Image.fromURL('/assets/planets/planetproto.png', function(img_planet) {
+        //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) {
+    if (planet.orbits) {
+        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));
+    }
+}
+
+export function system(system, temp_engine) {
+    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,
+            defaultCursor :'crosshair',
+            hoverCursor :'pointer'
+        });
+        PlanetBuilder.list_all(system, (planets) => {
+            planets.forEach(planet => {
+                offsetOrbit(planet);
+                draw_planet(planet);
+            });
+            animate();
+        });
+        canvas.on('mouse:up', (e) => {
+            if(e.target.shadow.color == "red"){
+                e.target.shadow.color = "white"
+            }
+            else{
+                e.target.shadow.color = "red"
+            }
+            canvas.renderAll();
+        });
+    });
+    temp_engine.render("templates/systems/system.html");
+}

js/controllers/systems.js

@@ -1,15 +0,0 @@
-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");
-
-}