skamkraft.anulax.ch/js/TEST_F.JS

let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUEVVU0RPU0FDSEEiLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDI1Mzk4NjUsInN1YiI6ImFnZW50LXRva2VuIn0.QL4rSruHd8pjNczeZQ3S7gof7TRnwZKqQBvkojUXgmzRrWiDZVw65kt1UBns0zHAhZF-m-bvxfUBik01uIzc-_jSO63ZndquPFmv_UY3HBkVK7UKoSaxAp_NveJsE1TOpTotUChlMd1Sv7RuyeR9fso2eN3-mBEoE5ukWmGVDfnOYefuWORhisqIkh4ti3QpaV-obycZ4XGV2ukqkiNdHqR3MQJR99e2nCEZEsarNKTgm6mgn-qCCNv4xQUGwhNbD5_p-jPqQ088vuFCeZi8j6kf7-fmT5sysBxEA5nvNPDIEL1XMuzs7N66WpiP1uc7I1Ph164m2epV9vmEvzthCw";
//décalage
let offset = {
    x: 2,
    y: 2
};
let max = 40;
let min = 35;
let w = 1260;
let h = 830;

const canvas = new fabric.Canvas("canvas",{
    width: w,
    height: h,
    backgroundColor:"rgb(7, 18, 41)",
    renderOnAddRemove: false,
    defaultCursor :'crosshair',
    hoverCursor :'pointer'
});
canvas.renderAll();
let planets = [];

function getAgent() {
    const settings = {
        async: true,
        crossDomain: true,
        url: 'https://api.spacetraders.io/v2/my/agent',
        method: 'GET',
        headers: {
        Accept: 'application/json',
        Authorization: `Bearer ${token}`
        }
    };
    $.ajax(settings).done(function (reponse) {
        let metaSystem = reponse.data.headquarters.split("-");
        getSystem(metaSystem[0] + "-" + metaSystem[1]);
    });
}

function getSystem(system) {
    const settings = {
        async: true,
        crossDomain: true,
        url: `https://api.spacetraders.io/v2/systems/${system}`,
        method: 'GET',
        headers: {
            Accept: 'application/json'
        }
    };

    $.ajax(settings).done(function (response) {
        offsetOrbits(response.data.waypoints);
        drawSystem(response.data.waypoints);
    });
}
function offsetOrbits(waypoints){
    waypoints.forEach((waypoint) => {
        if (waypoint.orbits) {
            let x = Math.floor(Math.random() * max - Math.random() * max);
            let y =  Math.floor(Math.random() * max - Math.random() * max);
            waypoint.orbitaldistance = {
                x: x,
                y: y
            };
            waypoint.rotation = 3;
        }
    });
}
function drawSystem(wayPoints) {
    if(wayPoints) {
        wayPoints.forEach(wayPoint => {
            drawWaypoint(wayPoint);
            //TestPlanetClicked(wayPoint);
        });
    }
}
function drawWaypoint(wayPoint) {
    let shadow = new fabric.Shadow({
        color: "white",
        blur: 5,
        offsetX: 0,
        offsetY: 0,
      });

    fabric.Image.fromURL('http://127.0.0.1:5500/img/planets/planetproto.png', function(planet) {
        //FABRICJS
        planet.set({selectable: false});
        planet.set({shadow: shadow});
        //AJOUT DES PROPRIÉTÉS DES WAYPOINT SUR LES PLANETES
        planet.set({left: wayPoint.x/offset.x + w/2});
        planet.set({top: wayPoint.y/offset.y+ h/2});
        planet.set({name: wayPoint.symbol});
        planet.set({type: wayPoint.type});
        canvas.add(planet);
      });
    planets.push(wayPoint);
}
function movePlanets() {
    planets.forEach(waypoint => {
        if(waypoint.rotation != 0){
        }
    });
}
getAgent();
setTimeout(function animate() {
    movePlanets();
    canvas.renderAll();
    setTimeout(animate, 1000);
}, 10);

canvas.on('mouse:up', function (e) {
    if(e.target.shadow.color == "red"){
        e.target.shadow.color = "white"
    }
    else{
        e.target.shadow.color = "red"
    }
})