From df43118b8a4f83279499eca25d6d894b9eb2628d Mon Sep 17 00:00:00 2001
From: David espinosa <104380606+davespser@users.noreply.github.com>
Date: Fri, 6 Dec 2024 10:05:41 +0100
Subject: [PATCH] Joypad

---
 js/three-scene.js | 73 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)

diff --git a/js/three-scene.js b/js/three-scene.js
index dcfe6d94..fdd25367 100644
--- a/js/three-scene.js
+++ b/js/three-scene.js
@@ -52,7 +52,80 @@ export function loadThreeScene({ x = 0, y = 0, z = 0, color = 0xff4500, stats =
   cube.position.set(x, y + 0.5, z);
   cube.castShadow = true;
   scene.add(cube);
+// Crear el joypad
+function createJoypad() {
+  const joypadBase = document.createElement("div");
+  joypadBase.style.position = "absolute";
+  joypadBase.style.bottom = `${window.innerHeight * 0.1}px`; // 10% desde el borde inferior
+  joypadBase.style.left = `${window.innerWidth * 0.05}px`; // 5% desde el borde izquierdo
+  joypadBase.style.width = `${window.innerWidth * 0.2}px`; // 20% del ancho de la pantalla
+  joypadBase.style.height = joypadBase.style.width; // Mantener proporción cuadrada
+  joypadBase.style.border = "2px solid white";
+  joypadBase.style.borderRadius = "50%";
+  joypadBase.style.background = "rgba(255, 255, 255, 0.2)";
+  joypadBase.style.touchAction = "none"; // Desactivar desplazamiento táctil predeterminado
+  document.body.appendChild(joypadBase);
 
+  const joypadStick = document.createElement("div");
+  joypadStick.style.position = "absolute";
+  joypadStick.style.width = `${parseFloat(joypadBase.style.width) * 0.4}px`; // 40% del tamaño del joypad base
+  joypadStick.style.height = joypadStick.style.width; // Mantener proporción cuadrada
+  joypadStick.style.background = "white";
+  joypadStick.style.borderRadius = "50%";
+  joypadStick.style.transform = `translate(${parseFloat(joypadBase.style.width) * 0.3}px, ${parseFloat(joypadBase.style.width) * 0.3}px)`; // Centrar stick
+  joypadBase.appendChild(joypadStick);
+
+  let isDragging = false;
+  let startX = 0;
+  let startY = 0;
+
+  // Manejar eventos táctiles
+  joypadBase.addEventListener("touchstart", (event) => {
+    isDragging = true;
+    const touch = event.touches[0];
+    startX = touch.clientX;
+    startY = touch.clientY;
+  });
+
+  joypadBase.addEventListener("touchmove", (event) => {
+    if (!isDragging) return;
+    const touch = event.touches[0];
+    const deltaX = touch.clientX - startX;
+    const deltaY = touch.clientY - startY;
+
+    // Limitar el movimiento del stick al área del joypad
+    const radius = parseFloat(joypadBase.style.width) / 2;
+    const distance = Math.min(Math.sqrt(deltaX ** 2 + deltaY ** 2), radius);
+    const angle = Math.atan2(deltaY, deltaX);
+    const stickX = Math.cos(angle) * distance;
+    const stickY = Math.sin(angle) * distance;
+
+    joypadStick.style.transform = `translate(${stickX + radius}px, ${stickY + radius}px)`;
+
+    // Actualizar la posición del cubo según el movimiento del joypad
+    cube.position.x += stickX * 0.01; // Ajustar sensibilidad según el tamaño del stick
+    cube.position.z += stickY * 0.01;
+  });
+
+  joypadBase.addEventListener("touchend", () => {
+    isDragging = false;
+    joypadStick.style.transform = `translate(${parseFloat(joypadBase.style.width) * 0.3}px, ${parseFloat(joypadBase.style.width) * 0.3}px)`; // Resetear posición del stick
+  });
+
+  // Redimensionar joypad si cambia el tamaño de la pantalla
+  window.addEventListener("resize", () => {
+    joypadBase.style.bottom = `${window.innerHeight * 0.1}px`;
+    joypadBase.style.left = `${window.innerWidth * 0.05}px`;
+    joypadBase.style.width = `${window.innerWidth * 0.2}px`;
+    joypadBase.style.height = joypadBase.style.width;
+    joypadStick.style.width = `${parseFloat(joypadBase.style.width) * 0.4}px`;
+    joypadStick.style.height = joypadStick.style.width;
+    joypadStick.style.transform = `translate(${parseFloat(joypadBase.style.width) * 0.3}px, ${parseFloat(joypadBase.style.width) * 0.3}px)`;
+  });
+}
+
+// Llamar a createJoypad después de cargar la escena
+createJoypad();
   // Mostrar estadísticas
   const statsDiv = document.createElement("div");
   statsDiv.style.position = "absolute";