add disable camera button

src/CameraControl.svelte

@@ -3,6 +3,7 @@
         initCameraControl,
         updateCameraControl,
         cameraInput,
+        resetCameraInput
     } from "./game/cameraControl.js";
 
     let videoContainer;
@@ -34,6 +35,20 @@
         }
     }
 
+    function disableCamera() {
+        if (videoContainer) {
+            const video = videoContainer.querySelector("video");
+            if (video && video.srcObject) {
+                const tracks = video.srcObject.getTracks();
+                tracks.forEach((track) => track.stop());
+            }
+            videoContainer.innerHTML = "";
+        }
+
+        enabled = false;
+        resetCameraInput();
+    }
+
     async function updateLoop() {
         if (!enabled) return;
 
@@ -65,6 +80,11 @@
             <div class:active={zone === "right"}>GO RIGHT</div>
         </div>
     </div>
+    {#if enabled}
+        <button class="disable-btn" onclick={disableCamera}>
+            Disable camera control
+        </button>
+    {/if}
 
     {#if error}
         <p class="error">{error}</p>
@@ -83,7 +103,7 @@
         padding: 16px;
         color: white;
         width: 320px;
-        height: 340px;
+        height: 380px;
     }
 
     .camera-view {
@@ -108,7 +128,7 @@
         transform: scaleX(-1);
     }
 
-    button {
+    .camera-view button {
         position: absolute;
         inset: 50% auto auto 50%;
         transform: translate(-50%, -50%);
@@ -144,4 +164,13 @@
         color: #ffb3b3;
         font-size: 13px;
     }
+
+    .disable-btn {
+        margin-top: 15px;
+        padding: 8px 14px;
+        border: none;
+        border-radius: 999px;
+        cursor: pointer;
+        font-weight: bold;
+    }
 </style>

src/game/cameraControl.js

@@ -11,7 +11,7 @@ let video;
 let faceLandmarker;
 let lastTime = 0;
 
-const DETECTION_INTERVAL = 60;
+const DETECTION_INTERVAL = 80;
 
 export async function initCameraControl() {
   if (cameraInput.active) 
@@ -87,3 +87,14 @@ export function updateCameraControl() {
     cameraInput.zone = 'center';
   }
 }
+
+export function resetCameraInput() {
+  cameraInput.left = false;
+  cameraInput.right = false;
+  cameraInput.active = false;
+  cameraInput.zone = 'center';
+
+  video = null;
+  faceLandmarker = null;
+  lastTime = 0;
+}

src/game/game.js

@@ -1,4 +1,4 @@
-import { updatePlayerPosition, createPlayer } from './player.js';
+import { createPlayer, movePlayer } from './player.js';
 import { initPlatforms, moveWorld } from './platforms.js';
 import { GAME_COLORS, PLATFORMS_GAP } from './constants.js';
 
@@ -37,7 +37,7 @@ export function updateGame() {
     return;
   }
 
-  pendingWorldMove += updatePlayerPosition(player, platforms);
+  pendingWorldMove += movePlayer(player, platforms);
   player.rotation = player.vel.x * 1.5;
 
   if (pendingWorldMove > PLATFORMS_GAP) {

src/game/player.js

@@ -42,7 +42,7 @@ function handleJump(player, platform) {
   return elevationGain;
 }
 
-export function updatePlayerPosition(player, platforms) {
+export function movePlayer(player, platforms) {
 
   // Controls
   player.vel.x = 0;
@@ -50,8 +50,6 @@ export function updatePlayerPosition(player, platforms) {
     player.vel.x = -5;
   } else if (keyIsDown(RIGHT_ARROW) || cameraInput.right) {
     player.vel.x = 5;
-  } else {
-    player.vel.x *= 0.5;
   }