skamkraft.anulax.ch/js/controllers/system.js

import { SystemBuilder } from "../skama_code/api/system.js";
import { Position } from "../skama_code/commun/position.js";
import menu_mod from "./menu_mod.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_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);
    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");
}