start work on canvas

html/templates/systems/system.html

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

@@ -2,21 +2,20 @@ 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";
-import { AgentBuilder } from "../skama_code/api/agent.js";
 
 export default function login(temp_engine) {
     const auth = new Auth();
 
     temp_engine.after_render((temp_engine) => {
         menu_mod(temp_engine);
-    
+
         temp_engine.add_event("#btn-login", "click", () => {
             const is_checked = $("#box-remember").is(":checked");
             const token = $("#in-token").val();
             auth.store = is_checked;
             auth.login(token)
         });
-    
+
         temp_engine.add_event("#btn-cancel", "click", () => {
             $("#input-token").val("");
             $("#box-remember").prop("checked", false);

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

js/controllers/system.js

@@ -1,100 +1,12 @@
-import { SystemBuilder } from "../skama_code/api/system.js";
+import { CanvasRenderer } from "../skama_code/rendering/rendering/canvas_render.js";
-import { Position } from "../skama_code/commun/position.js";
+import menu_mod from "./menu_mod.js";
-import menu_mod from "./menu_mod.js"
 
-let canvas; 
+export default function (temp_engine) {
-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_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 default function system(system, temp_engine) {
     temp_engine.after_render((temp_engine) => {
-        $("#sys-name").text(system);
+        console.log("test");
         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();
-            }, (err) => {
-                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/systems/system.html");
+
+    temp_engine.render(`templates/systems/systems.html`);
 }

js/controllers/systems.js

@@ -1,89 +0,0 @@
-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.2,
-      scaleY: 0.2,
-      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",
-    });
-    const system_builder = new SystemBuilder();
-    system_builder.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/skama_code

@@ -1 +1 @@
-Subproject commit 7f516288452f67f345be6b2eb8f4eb1137a7dd43
+Subproject commit cf01c29af1c540e20db39a09b682eb6dadf9f4ca