107 lines
4.2 KiB
JavaScript
107 lines
4.2 KiB
JavaScript
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)
|
|
|
|
}
|
|
} |