koule

Author: ProkopRandacek

static/kvh/app.js

@@ -13,6 +13,15 @@ function loadVideo(src) {
 const physicsData = [];
 const main = document.querySelector('main');
 
+// Drag and drop state management
+let dragState = {
+    isDragging: false,
+    draggedBallIndex: -1,
+    dragOffset: { x: 0, y: 0 },
+    lastMousePos: { x: 0, y: 0 },
+    dragStartTime: 0
+};
+
 // Get actual viewport dimensions accounting for mobile quirks
 function getViewportDimensions() {
     const rect = main.getBoundingClientRect();
@@ -22,23 +31,38 @@ function getViewportDimensions() {
     };
 }
 
+// Helper function to find which ball is at a given position
+function findBallAtPosition(x, y) {
+    for (let i = 0; i < physicsData.length; i++) {
+        const data = physicsData[i];
+        const ballCenterX = data.x + data.radius;
+        const ballCenterY = data.y + data.radius;
+        const distance = Math.sqrt(
+            Math.pow(x - ballCenterX, 2) +
+            Math.pow(y - ballCenterY, 2)
+        );
+
+        // Check if click/touch is within the ball's radius
+        if (distance <= data.radius) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+// Helper function to get mouse/touch position relative to main element
+function getRelativePosition(clientX, clientY) {
+    const rect = main.getBoundingClientRect();
+    return {
+        x: clientX - rect.left,
+        y: clientY - rect.top
+    };
+}
+
 // Centralized ball size management
 function getBallRadius() {
     const viewport = getViewportDimensions();
-    const minDimension = Math.min(viewport.width, viewport.height);
-
-    // Better scaling for mobile devices
-    if (minDimension < 400) {
-        // Small mobile screens
-        return Math.max(25, minDimension / 12);
-    } else if (minDimension < 800) {
-        // Larger mobile screens and small tablets
-        return Math.max(30, minDimension / 15);
-    } else {
-        // Desktop and large tablets
-        const k = Math.round(viewport.width / 200);
-        return viewport.width / (2 * k);
-    }
+    return Math.min(viewport.width, viewport.height) / 7.5; // Simplified - 2x bigger everywhere
 }
 
 function setBallSize(video, radius) {
@@ -93,13 +117,18 @@ function updatePhysics() {
         const video = main.children[i];
         const data = physicsData[i];
 
+        // Skip physics updates for the ball being dragged
+        if (dragState.isDragging && dragState.draggedBallIndex === i) {
+            continue;
+        }
+
         data.vy += 0.2;
 
         data.x += data.vx;
         data.y += data.vy;
         data.r += data.vr;
 
-        const maxSpin = 1;
+        const maxSpin = 3; // Increased from 1 to allow more dramatic spinning
         if (data.vr > maxSpin) data.vr = maxSpin;
         if (data.vr < -maxSpin) data.vr = -maxSpin;
 
@@ -109,18 +138,18 @@ function updatePhysics() {
 	const high_update = 1.05;
 	const low_update = 1.0;
 
-        // Use viewport dimensions instead of window dimensions
+        // Simple wall collision with spin effects
         if (centerX - data.radius <= 0 || centerX + data.radius >= viewport.width) {
-            data.vx *= -high_update;
-            data.vy *= low_update;
-            data.vr *= low_update; // trencle
+            data.vx *= -1.1;
+            data.vy += data.vr * 0.5; // Spin affects bounce direction
+            data.vr *= 0.8; // Lose some spin
             data.x = Math.max(0, Math.min(viewport.width - data.radius * 2, data.x));
         }
 
         if (centerY - data.radius <= 0 || centerY + data.radius >= viewport.height) {
-            data.vy *= -high_update;
-            data.vx *= low_update;
-            data.vr *= low_update; // slipy
+            data.vy *= -1.1;
+            data.vx += data.vr * 0.5; // Spin affects bounce direction
+            data.vr *= 0.8; // Lose some spin
             data.y = Math.max(0, Math.min(viewport.height - data.radius * 2, data.y));
         }
 
@@ -131,6 +160,11 @@ function updatePhysics() {
 
     for (let i = 0; i < physicsData.length; i++) {
         for (let j = i + 1; j < physicsData.length; j++) {
+            // Skip collision detection if either ball is being dragged
+            if (dragState.isDragging && (dragState.draggedBallIndex === i || dragState.draggedBallIndex === j)) {
+                continue;
+            }
+
             const ball1 = physicsData[i];
             const ball2 = physicsData[j];
 
@@ -143,59 +177,34 @@ function updatePhysics() {
             const dy = center2Y - center1Y;
             const distance = Math.sqrt(dx * dx + dy * dy);
 
-            const collisionDistance = ball1.radius + ball2.radius;
-            if (distance < collisionDistance) {
-                const overlap = collisionDistance - distance;
+            // Simple collision detection and response
+            if (distance < ball1.radius + ball2.radius) {
+                const overlap = ball1.radius + ball2.radius - distance;
                 const nx = dx / distance;
                 const ny = dy / distance;
-                const separationX = nx * overlap * 0.5;
-                const separationY = ny * overlap * 0.5;
-                ball1.x -= separationX;
-                ball1.y -= separationY;
-                ball2.x += separationX;
-                ball2.y += separationY;
-
-                const speed1 = Math.sqrt(ball1.vx * ball1.vx + ball1.vy * ball1.vy);
-                const speed2 = Math.sqrt(ball2.vx * ball2.vx + ball2.vy * ball2.vy);
-                const areTouching = speed1 < 1 && speed2 < 1;
-
-                if (areTouching) {
-                    const avgSpin = (ball1.vr + ball2.vr) * 1.05;
-                    ball1.vr = avgSpin;
-                    ball2.vr = avgSpin;
-
-                    const separationForce = overlap * 0.05;
-                    ball1.vx -= nx * separationForce;
-                    ball1.vy -= ny * separationForce;
-                    ball2.vx += nx * separationForce;
-                    ball2.vy += ny * separationForce;
-
-                    // Apply upward velocity to the upper ball
-                    const upwardForce = overlap * 0.1;
-                    if (ball1.y <= ball2.y) {
-                        // ball1 is higher
-                        ball1.vy -= upwardForce;
-                    } else {
-                        // ball2 is higher
-                        ball2.vy -= upwardForce;
-                    }
-                } else {
-                    // At least one ball moving fast - collision physics
-                    const dvx = ball2.vx - ball1.vx;
-                    const dvy = ball2.vy - ball1.vy;
-                    const dvn = dvx * nx + dvy * ny;
-
-                    const impulse = -dvn * 0.8;
-                    ball1.vx -= impulse * nx;
-                    ball1.vy -= impulse * ny;
-                    ball2.vx += impulse * nx;
-                    ball2.vy += impulse * ny;
-
-                    // Rotational effects
-                    const tangentialImpulse = impulse * 0.2;
-                    ball1.vr += tangentialImpulse / ball1.radius;
-                    ball2.vr -= tangentialImpulse / ball2.radius;
-                }
+
+                // Separate balls
+                const separation = overlap * 0.5;
+                ball1.x -= nx * separation;
+                ball1.y -= ny * separation;
+                ball2.x += nx * separation;
+                ball2.y += ny * separation;
+
+                // Simple velocity exchange
+                const dvx = ball2.vx - ball1.vx;
+                const dvy = ball2.vy - ball1.vy;
+                const dvn = dvx * nx + dvy * ny;
+
+                const impulse = dvn * 0.8;
+                ball1.vx += impulse * nx;
+                ball1.vy += impulse * ny;
+                ball2.vx -= impulse * nx;
+                ball2.vy -= impulse * ny;
+
+                // Exchange some spin
+                const spinExchange = impulse * 0.3;
+                ball1.vr += spinExchange;
+                ball2.vr -= spinExchange;
             }
         }
     }
@@ -221,47 +230,81 @@ globalThis.addEventListener('orientationchange', function() {
     setTimeout(updateBallRadius, 100);
 });
 
-// Add touch event handling for mobile interaction
+// Simple touch interaction
 function addTouchInteraction() {
     let touchStartTime = 0;
 
     main.addEventListener('touchstart', function(e) {
-        e.preventDefault(); // Prevent scrolling and zooming
+        e.preventDefault();
         touchStartTime = Date.now();
+
+        if (e.touches.length === 1) {
+            const touch = e.touches[0];
+            const pos = getRelativePosition(touch.clientX, touch.clientY);
+            const ballIndex = findBallAtPosition(pos.x, pos.y);
+
+            if (ballIndex !== -1) {
+                dragState.isDragging = true;
+                dragState.draggedBallIndex = ballIndex;
+                dragState.dragOffset = {
+                    x: pos.x - physicsData[ballIndex].x,
+                    y: pos.y - physicsData[ballIndex].y
+                };
+
+                physicsData[ballIndex].vx = 0;
+                physicsData[ballIndex].vy = 0;
+                physicsData[ballIndex].vr = 0;
+                main.children[ballIndex].classList.add('dragging');
+            }
+        }
     }, { passive: false });
 
     main.addEventListener('touchmove', function(e) {
-        e.preventDefault(); // Prevent scrolling
+        e.preventDefault();
+
+        if (dragState.isDragging && e.touches.length === 1) {
+            const touch = e.touches[0];
+            const pos = getRelativePosition(touch.clientX, touch.clientY);
+            const data = physicsData[dragState.draggedBallIndex];
+            const video = main.children[dragState.draggedBallIndex];
+
+            data.x = pos.x - dragState.dragOffset.x;
+            data.y = pos.y - dragState.dragOffset.y;
+
+            const viewport = getViewportDimensions();
+            data.x = Math.max(0, Math.min(viewport.width - data.radius * 2, data.x));
+            data.y = Math.max(0, Math.min(viewport.height - data.radius * 2, data.y));
+
+            video.style.left = data.x + 'px';
+            video.style.top = data.y + 'px';
+        }
     }, { passive: false });
 
     main.addEventListener('touchend', function(e) {
         e.preventDefault();
-        const touchDuration = Date.now() - touchStartTime;
 
-        // If it's a quick tap (less than 200ms), add some energy to nearby balls
-        if (touchDuration < 200 && e.changedTouches.length > 0) {
+        if (dragState.isDragging) {
+            const video = main.children[dragState.draggedBallIndex];
+            video.classList.remove('dragging');
+            dragState.isDragging = false;
+            dragState.draggedBallIndex = -1;
+        } else if (Date.now() - touchStartTime < 200) {
+            // Quick tap - push nearby balls
             const touch = e.changedTouches[0];
-            const rect = main.getBoundingClientRect();
-            const touchX = touch.clientX - rect.left;
-            const touchY = touch.clientY - rect.top;
+            const pos = getRelativePosition(touch.clientX, touch.clientY);
 
-            // Find balls near the touch point and give them a little push
             for (let i = 0; i < physicsData.length; i++) {
                 const data = physicsData[i];
-                const ballCenterX = data.x + data.radius;
-                const ballCenterY = data.y + data.radius;
-                const distance = Math.sqrt(
-                    Math.pow(touchX - ballCenterX, 2) +
-                    Math.pow(touchY - ballCenterY, 2)
-                );
-
-                // If touch is within 100px of ball center, give it a push
+                const dx = pos.x - (data.x + data.radius);
+                const dy = pos.y - (data.y + data.radius);
+                const distance = Math.sqrt(dx * dx + dy * dy);
+
                 if (distance < 100) {
-                    const pushStrength = Math.max(0.5, (100 - distance) / 100 * 3);
-                    const angle = Math.atan2(ballCenterY - touchY, ballCenterX - touchX);
-                    data.vx += Math.cos(angle) * pushStrength;
-                    data.vy += Math.sin(angle) * pushStrength;
-                    data.vr += (Math.random() - 0.5) * 0.2;
+                    const force = (100 - distance) / 100 * 3;
+                    const angle = Math.atan2(dy, dx);
+                    data.vx -= Math.cos(angle) * force;
+                    data.vy -= Math.sin(angle) * force;
+                    data.vr += (Math.random() - 0.5) * 0.3;
                 }
             }
         }
@@ -276,6 +319,66 @@ main.addEventListener('contextmenu', function(e) {
 // Initialize touch interaction
 addTouchInteraction();
 
+// Simple mouse interaction
+function addMouseInteraction() {
+    main.addEventListener('mousedown', function(e) {
+        e.preventDefault();
+
+        const pos = getRelativePosition(e.clientX, e.clientY);
+        const ballIndex = findBallAtPosition(pos.x, pos.y);
+
+        if (ballIndex !== -1) {
+            dragState.isDragging = true;
+            dragState.draggedBallIndex = ballIndex;
+            dragState.dragOffset = {
+                x: pos.x - physicsData[ballIndex].x,
+                y: pos.y - physicsData[ballIndex].y
+            };
+
+            physicsData[ballIndex].vx = 0;
+            physicsData[ballIndex].vy = 0;
+            physicsData[ballIndex].vr = 0;
+            main.children[ballIndex].classList.add('dragging');
+            document.body.style.cursor = 'grabbing';
+        }
+    });
+
+    main.addEventListener('mousemove', function(e) {
+        if (dragState.isDragging) {
+            const pos = getRelativePosition(e.clientX, e.clientY);
+            const data = physicsData[dragState.draggedBallIndex];
+            const video = main.children[dragState.draggedBallIndex];
+
+            data.x = pos.x - dragState.dragOffset.x;
+            data.y = pos.y - dragState.dragOffset.y;
+
+            const viewport = getViewportDimensions();
+            data.x = Math.max(0, Math.min(viewport.width - data.radius * 2, data.x));
+            data.y = Math.max(0, Math.min(viewport.height - data.radius * 2, data.y));
+
+            video.style.left = data.x + 'px';
+            video.style.top = data.y + 'px';
+        } else {
+            const pos = getRelativePosition(e.clientX, e.clientY);
+            const ballIndex = findBallAtPosition(pos.x, pos.y);
+            document.body.style.cursor = ballIndex !== -1 ? 'grab' : 'default';
+        }
+    });
+
+    main.addEventListener('mouseup', function(e) {
+        if (dragState.isDragging) {
+            const video = main.children[dragState.draggedBallIndex];
+            video.classList.remove('dragging');
+            dragState.isDragging = false;
+            dragState.draggedBallIndex = -1;
+            document.body.style.cursor = 'default';
+        }
+    });
+}
+
+// Initialize mouse interaction
+addMouseInteraction();
+
 // Handle mobile viewport changes and prevent scrolling
 function initializeMobileHandling() {
     // Prevent pull-to-refresh on mobile