!sumo

gistfile1.txt

/* 
    !sumo pour le live de s17n
    !sumo <angle> <force(0-100)>
    !sumo pour demarrer le jeux
*/










const twitch = document.querySelector("#root > div > div.Layout-sc-1xcs6mc-0.lcpZLv > div > main > div.root-scrollable.scrollable-area.scrollable-area--suppress-scroll-x > div.simplebar-scroll-content > div > div > div.InjectLayout-sc-1i43xsx-0.persistent-player > div > div.Layout-sc-1xcs6mc-0.video-player > div > div.Layout-sc-1xcs6mc-0.video-ref")
//recuperation de la position de la div
const rect = twitch.getBoundingClientRect();
//creation du canvas en absolu
const canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
canvas.style.left = rect.left + 'px';
canvas.style.top = rect.top + 'px';
canvas.style.width = rect.width + 'px';
canvas.style.height = rect.height + 'px';
canvas.style.zIndex = 1000;
canvas.width = rect.width;
canvas.height = rect.height;
//ajout du canvas
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
let isDrawing = false;
let startCoords, endCoords;
//definir la couleur du trait et du texte en blanc
ctx.strokeStyle = '#ffffff';
ctx.fillStyle = '#ffffff';
//definir la taille du trait
ctx.lineWidth = 3;

canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    startCoords = { x: e.clientX - canvas.getBoundingClientRect().left, y: e.clientY - canvas.getBoundingClientRect().top };
});

canvas.addEventListener('mouseup', (e) => {
    if (isDrawing) {
        isDrawing = false;
        endCoords = { x: e.clientX - canvas.getBoundingClientRect().left, y: e.clientY - canvas.getBoundingClientRect().top };

        // Calcul de la force et de la rotation ici
        const dx = endCoords.x - startCoords.x;
        const dy = endCoords.y - startCoords.y;
        let distance = Math.sqrt(dx * dx + dy * dy);
        let angle = Math.atan2(dy, dx);
        angle *= 180 / Math.PI;
        //inverser l'angle
        angle = -angle;
        // Dessiner le vecteur sur le canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.moveTo(startCoords.x, startCoords.y);
        ctx.lineTo(endCoords.x, endCoords.y);
        ctx.stroke();

        console.log('Distance: ' + distance);
        console.log('Angle: ' + angle);
        angle = Math.round(angle);
        distance = Math.round(((distance/ Math.sqrt(canvas.width * canvas.width + canvas.height * canvas.height)) * 100));
        let text = "!sumo " + angle + " " + distance
        //ecriture dans le canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = "30px Arial";
        ctx.fillText(text, 10, 50);

        //coppie dans le presse papier
        navigator.clipboard.writeText(text).then(function() {
            console.log('Async: Copying to clipboard was successful!');
        }, function(err) {
            console.error('Async: Could not copy text: ', err);
        });
    }
});

canvas.addEventListener('mousemove', (e) => {
    if (isDrawing) {
        // Dessiner une ligne temporaire pendant le déplacement
        const currentCoords = { x: e.clientX - canvas.getBoundingClientRect().left, y: e.clientY - canvas.getBoundingClientRect().top };
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.moveTo(startCoords.x, startCoords.y);
        ctx.lineTo(currentCoords.x, currentCoords.y);
        ctx.stroke();
    }
});
document.addEventListener('keydown', (e) => {
    if (e.key === 'm' && e.ctrlKey) {
        canvas.style.display = canvas.style.display === 'none' ? 'block' : 'none';
    }
})