auto-accept/www/js/game.js

import { Flywheel } from "./effects.js";
import { getPathShapeBetweenPoints } from "./svg.js";

export class Game {

    constructor(svgEl, crosshairXEl, crosshairYEl) {
        this.flywheel = new Flywheel();
        this.svgEl = svgEl;

        // canvas position relative to mouse/screen
        // TODO: update on resize:
        svgEl.setAttribute('viewBox', '0 0 ' + window.innerWidth + ' ' + window.innerHeight);
        this.rect = svgEl.getBoundingClientRect();

        // move crosshairs
        window.addEventListener('mousemove', function (mousemoveEv) {
            let x = mousemoveEv.clientX - this.rect.left;
            let y = mousemoveEv.clientY - this.rect.top;

            crosshairXEl.setAttribute('x1', x)
            crosshairXEl.setAttribute('x2', x)
            crosshairYEl.setAttribute('y1', y)
            crosshairYEl.setAttribute('y2', y)
        }.bind(this));
        this.loadAnnotation();
    }

    loadAnnotation() {
        let json_request = new Request('/annotation.json');

        fetch(json_request).then(function (response) {
            return response.json();
        }).then((annotation) => {
            let svg_request = new Request('/annotation.svg?id='+annotation.id);

            fetch(svg_request).then(function (response) {
                return response.text()
            }).then((text) => {
                this.addAnnotation(annotation, text);
            })
        }).catch((e) => console.error(e));
    }

    addAnnotation(annotation, svgText) {
        
        //determine position
        const maxX = this.rect.width - annotation.bbox[2];
        const maxY = this.rect.height - annotation.bbox[3];
        const posX = Math.random() * maxX;
        const posY = Math.random() * maxY;
        
        let imgEl = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        imgEl.innerHTML = svgText;
        imgEl.classList.add('img');
        imgEl.setAttribute('transform', `translate(${posX} ${posY})`);
        this.svgEl.appendChild(imgEl);

        let startTrace = function (mousedownEv) {
            // create shape to draw
            let shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            shapeEl.classList.add('rect');
            let p1 = { 'x': mousedownEv.clientX - this.rect.left, 'y': mousedownEv.clientY - this.rect.top }
            let corners = this.flywheel.effects.shape.getAngles();
            let d = getPathShapeBetweenPoints(p1, p1, corners);
            this.svgEl.appendChild(shapeEl);
            shapeEl.setAttribute('d', d);

            let mouseMoveEv = function (mousemoveEv) {
                let p2 = { 'x': mousemoveEv.clientX - this.rect.left, 'y': mousemoveEv.clientY - this.rect.top }
                let d = getPathShapeBetweenPoints(p1, p2, corners);
                shapeEl.setAttribute('d', d);
            }.bind(this);
            let mouseUpEv = function () {
                console.log('up');
                window.removeEventListener('mousemove', mouseMoveEv); // remove itself.
                window.removeEventListener('mouseup', mouseUpEv); // remove itself.
                this.svgEl.removeEventListener('mousedown', startTrace); // remove itself.
                shapeEl.classList.add('locked');
                //TODO: calculate points
                this.flywheel.add();
                this.loadAnnotation();

                // fade out box
                setTimeout(function () {
                    shapeEl.classList.add('hide');
                    // remove shape
                    setTimeout(function () {
                        shapeEl.parentNode.removeChild(shapeEl);
                    }, 1000);
                }, 1000);
                // fade out img
                setTimeout(function () {
                    imgEl.classList.add('hide');
                    // remove shape
                    setTimeout(function () {
                        imgEl.parentNode.removeChild(imgEl);
                    }, 500);
                }, 500);
            }.bind(this);
            window.addEventListener('mousemove', mouseMoveEv);
            window.addEventListener('mouseup', mouseUpEv);
        }.bind(this);

        this.svgEl.addEventListener('mousedown', startTrace)

    }
}