Page for all systems

css/style.css

@@ -25,6 +25,7 @@ body {
 /* Main */
 .container {
     color: white;
+    background-color: rgba(0, 0, 0, 0.726);
     display: flex;
     margin: 10px;
     width: fit-content;
@@ -36,6 +37,7 @@ body {
 }
 
 .max-container {
+    background-color: rgba(0, 0, 0, 0.726);
     color: white;
     display: flex;
     margin: 10px;

html/template.html

@@ -5,7 +5,7 @@
   </div>
   <div class="stats"></div>
   <ul class="nav-links">
-    <li class="nav-link smooth" id="systems-link">System</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>

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>

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 "./system.js";
+import { systems } from "./systems.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-PU31", temp_engine);
+        systems(temp_engine);
     })
     temp_engine.add_event(".nav-brand", "click", () => {
         home(temp_engine);

js/controllers/system.js

@@ -10,8 +10,8 @@ let offset = {
     y: 2
 };
 let max = 100;
-let w = 1200;
+let w = (window.innerWidth/10)*9;
-let h = 600;
+let h = (window.innerHeight/4)*3;
 
 function animate() {
     canvas.renderAll();
@@ -49,7 +49,7 @@ function offsetOrbit(planet) {
     }
 }
 
-export function system(system, temp_engine) {
+export default function system(system, temp_engine) {
     temp_engine.after_render((temp_engine) => {
         $("#sys-name").text(system);
         menu_mod(temp_engine);
@@ -89,9 +89,9 @@ export function system(system, temp_engine) {
         });
         canvas.on("mouse:wheel", (opt) => {
             let scale = 1.1;
-            if (opt.e.deltaY > 0) {
+            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) {
+            } else if (opt.e.deltaY > 0) {
                 canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), canvas.getZoom() / scale);
             }
         });

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/galaxie1.png', function(img_planet) {
+
+        img_planet.set({
+            selectable: false,
+            scaleX: 0.05,
+            scaleY: 0.05,
+            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");
+}