(function() {
function initGame() {
const container = document.getElementById(‘tension-game-box’);
const load = document.getElementById(‘drag-load’);
const line = document.getElementById(‘cable-line’);
if (!container || !load || !line) return;
let dragging = false;
function updatePosition(clientX, clientY) {
const rect = container.getBoundingClientRect();
let x = clientX – rect.left;
let y = clientY – rect.top;
// Contain within game boundary
x = Math.max(30, Math.min(rect.width – 30, x));
y = Math.max(30, Math.min(rect.height – 30, y));
load.style.left = (x – 30) + ‘px’;
load.style.top = (y – 30) + ‘px’;
line.setAttribute(‘x2’, x);
line.setAttribute(‘y2’, y);
}
// Mouse Events
load.addEventListener(‘mousedown’, function(e) {
dragging = true;
e.preventDefault();
});
window.addEventListener(‘mouseup’, function() {
dragging = false;
});
window.addEventListener(‘mousemove’, function(e) {
if (dragging) {
updatePosition(e.clientX, e.clientY);
}
});
// Touch Events for Mobile Support
load.addEventListener(‘touchstart’, function(e) {
dragging = true;
if (e.touches.length > 0) {
updatePosition(e.touches[0].clientX, e.touches[0].clientY);
}
}, { passive: true });
window.addEventListener(‘touchend’, function() {
dragging = false;
});
window.addEventListener(‘touchmove’, function(e) {
if (dragging && e.touches.length > 0) {
updatePosition(e.touches[0].clientX, e.touches[0].clientY);
}
}, { passive: true });
}
if (document.readyState === ‘loading’) {
document.addEventListener(‘DOMContentLoaded’, initGame);
} else {
initGame();
}
})();
