auto-accept/js/game.js

60 lines
2.4 KiB
JavaScript
Raw Normal View History

2020-12-17 11:09:22 +00:00
import { Flywheel } from "./flywheel.js";
import { getPathShapeBetweenPoints } from "./svg.js";
export function init(svgEl, crosshairXEl, crosshairYEl) {
let flywheel = new Flywheel();
const segmentCount = window.location.search.substr(1).length ? window.location.search.substr(1) : 4;
// canvas position relative to mouse/screen
// TODO: update on resize:
svgEl.setAttribute('viewBox', '0 0 ' + window.innerWidth + ' ' + window.innerHeight);
let rect = svgEl.getBoundingClientRect();
// let cx = rect.left + rect.width / 2;
// let cy = rect.top + rect.height / 2;
// let center = { 'x': cx, 'y': cy };
// move crosshairs
window.addEventListener('mousemove', function (mousemoveEv) {
let x = mousemoveEv.clientX - rect.left;
let y = mousemoveEv.clientY - rect.top;
crosshairXEl.setAttribute('x1', x)
crosshairXEl.setAttribute('x2', x)
crosshairYEl.setAttribute('y1', y)
crosshairYEl.setAttribute('y2', y)
});
svgEl.addEventListener('mousedown', function (mousedownEv) {
let shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
shapeEl.classList.add('rect');
let p1 = { 'x': mousedownEv.clientX - rect.left, 'y': mousedownEv.clientY - rect.top }
let d = getPathShapeBetweenPoints(p1, p1, segmentCount);
svgEl.appendChild(shapeEl);
shapeEl.setAttribute('d', d);
let mouseMoveEv = function (mousemoveEv) {
let p2 = { 'x': mousemoveEv.clientX - rect.left, 'y': mousemoveEv.clientY - rect.top }
let d = getPathShapeBetweenPoints(p1, p2, segmentCount);
shapeEl.setAttribute('d', d);
};
let mouseUpEv = function () {
console.log('up');
window.removeEventListener('mousemove', mouseMoveEv); // remove itself.
window.removeEventListener('mouseup', mouseUpEv); // remove itself.
shapeEl.classList.add('locked');
//TODO: calculate points
flywheel.add();
setTimeout(function () {
shapeEl.classList.add('hide');
setTimeout(function () {
shapeEl.parentNode.removeChild(shapeEl);
}, 1000);
}, 1000);
};
window.addEventListener('mousemove', mouseMoveEv);
window.addEventListener('mouseup', mouseUpEv);
})
}