74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
|
// EOC Independent mode joystick — minimal 2D touch/mouse input
|
||
|
|
// No zoom, no momentum, no input pipeline — just raw normalized X/Y
|
||
|
|
|
||
|
|
export class EOCJoystick {
|
||
|
|
constructor(canvas) {
|
||
|
|
this._canvas = canvas;
|
||
|
|
this._ctx = canvas.getContext('2d');
|
||
|
|
this._x = 0.5;
|
||
|
|
this._y = 0.5;
|
||
|
|
this._dragging = false;
|
||
|
|
this._onChange = null;
|
||
|
|
this._bindEvents();
|
||
|
|
this._draw();
|
||
|
|
}
|
||
|
|
|
||
|
|
get x() { return this._x; }
|
||
|
|
get y() { return this._y; }
|
||
|
|
set onChange(fn) { this._onChange = fn; }
|
||
|
|
|
||
|
|
_bindEvents() {
|
||
|
|
this._canvas.addEventListener('pointerdown', e => {
|
||
|
|
e.preventDefault();
|
||
|
|
this._dragging = true;
|
||
|
|
this._canvas.setPointerCapture(e.pointerId);
|
||
|
|
this._update(e);
|
||
|
|
});
|
||
|
|
this._canvas.addEventListener('pointermove', e => {
|
||
|
|
if (this._dragging) this._update(e);
|
||
|
|
});
|
||
|
|
this._canvas.addEventListener('pointerup', e => {
|
||
|
|
this._dragging = false;
|
||
|
|
this._canvas.releasePointerCapture(e.pointerId);
|
||
|
|
});
|
||
|
|
this._canvas.addEventListener('pointercancel', e => {
|
||
|
|
this._dragging = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
_update(e) {
|
||
|
|
const rect = this._canvas.getBoundingClientRect();
|
||
|
|
this._x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
|
||
|
|
this._y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
|
||
|
|
this._draw();
|
||
|
|
this._onChange?.(this._x, this._y);
|
||
|
|
}
|
||
|
|
|
||
|
|
_draw() {
|
||
|
|
const ctx = this._ctx;
|
||
|
|
const w = this._canvas.width;
|
||
|
|
const h = this._canvas.height;
|
||
|
|
ctx.clearRect(0, 0, w, h);
|
||
|
|
// Background
|
||
|
|
ctx.fillStyle = 'rgba(255,255,255,0.05)';
|
||
|
|
ctx.fillRect(0, 0, w, h);
|
||
|
|
// Crosshairs
|
||
|
|
ctx.strokeStyle = 'rgba(255,255,255,0.15)';
|
||
|
|
ctx.lineWidth = 1;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(w / 2, 0); ctx.lineTo(w / 2, h);
|
||
|
|
ctx.moveTo(0, h / 2); ctx.lineTo(w, h / 2);
|
||
|
|
ctx.stroke();
|
||
|
|
// Dot
|
||
|
|
ctx.fillStyle = this._dragging ? '#5ff5ea' : '#4ecdc4';
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(this._x * w, this._y * h, 6, 0, Math.PI * 2);
|
||
|
|
ctx.fill();
|
||
|
|
// Position label
|
||
|
|
ctx.fillStyle = 'rgba(78,205,196,0.5)';
|
||
|
|
ctx.font = '9px monospace';
|
||
|
|
ctx.textAlign = 'right';
|
||
|
|
ctx.fillText(`${this._x.toFixed(2)}, ${this._y.toFixed(2)}`, w - 4, h - 4);
|
||
|
|
}
|
||
|
|
}
|