skamkraft.anulax.ch/js/controllers/systems.js

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");
}