Ajuste le maintien de demarrage du cube

app.js

@@ -7,7 +7,7 @@ const DEFAULT_BLOCK_DURATION_MS = 180000;
 const DEFAULT_MOVE_LIMIT_MS = 20000;
 const TIME_MODE_INITIAL_CLOCK_MS = 600000;
 const CUBE_TIME_CAP_MS = 120000;
-const CUBE_START_HOLD_MS = 300;
+const CUBE_START_HOLD_MS = 2000;
 
 const PRESETS = {
   fast: {
@@ -584,6 +584,7 @@ function initCubePage() {
     white: createCubeHoldIntent(),
     black: createCubeHoldIntent(),
   };
+  let cubeHoldAnimationFrameId = null;
 
   const openModal = () => toggleModal(refs.helpModal, true);
   const closeModal = () => toggleModal(refs.helpModal, false);
@@ -693,6 +694,7 @@ function initCubePage() {
     clearCubeHoldTimeout(holdIntent);
     holdIntent.armed = true;
     holdIntent.ready = false;
+    holdIntent.startedAt = Date.now();
     holdIntent.pointerId = event.pointerId;
     holdIntent.timeoutId = window.setTimeout(() => {
       holdIntent.timeoutId = null;
@@ -711,6 +713,7 @@ function initCubePage() {
     }
 
     render();
+    ensureCubeHoldAnimation();
   }
 
   function handleCubePressEnd(color, button, event) {
@@ -771,7 +774,44 @@ function initCubePage() {
     clearCubeHoldTimeout(holdIntent);
     holdIntent.armed = false;
     holdIntent.ready = false;
+    holdIntent.startedAt = 0;
     holdIntent.pointerId = null;
+    stopCubeHoldAnimationIfIdle();
+  }
+
+  function ensureCubeHoldAnimation() {
+    if (cubeHoldAnimationFrameId !== null) {
+      return;
+    }
+
+    const tick = () => {
+      cubeHoldAnimationFrameId = null;
+      if (!isCubeHoldAnimating()) {
+        render();
+        return;
+      }
+
+      render();
+      cubeHoldAnimationFrameId = window.requestAnimationFrame(tick);
+    };
+
+    cubeHoldAnimationFrameId = window.requestAnimationFrame(tick);
+  }
+
+  function stopCubeHoldAnimationIfIdle() {
+    if (cubeHoldAnimationFrameId === null || isCubeHoldAnimating()) {
+      return;
+    }
+
+    window.cancelAnimationFrame(cubeHoldAnimationFrameId);
+    cubeHoldAnimationFrameId = null;
+  }
+
+  function isCubeHoldAnimating() {
+    return Object.entries(cubeHoldState).some(([color, holdIntent]) => {
+      const playerState = match.cube.playerState[color];
+      return holdIntent.armed && !holdIntent.ready && !playerState.running && match.cube.times[color] === null;
+    });
   }
 
   function clearCubeHoldTimeout(holdIntent) {
@@ -793,12 +833,16 @@ function initCubePage() {
     const time = match.cube.times[color];
     const holdArmed = holdIntent.armed && !playerState.running && time === null && match.phase === "cube" && !match.result;
     const holdReady = holdIntent.ready && holdArmed;
+    const holdProgress = holdArmed
+      ? Math.min((Date.now() - holdIntent.startedAt) / CUBE_START_HOLD_MS, 1)
+      : 0;
 
     name.textContent = playerName(match, color);
     result.textContent = formatCubePlayerTime(match, color);
     cap.textContent = renderCubeCap(match, time);
     button.classList.toggle("cube-hold-arming", holdArmed && !holdReady);
     button.classList.toggle("cube-hold-ready", holdReady);
+    button.style.setProperty("--cube-hold-progress", `${holdProgress}`);
 
     if (match.result) {
       button.textContent = resultText(match);
@@ -836,15 +880,15 @@ function initCubePage() {
     }
 
     if (holdArmed) {
-      button.textContent = "Maintenez...";
+      button.textContent = "Maintenez 2 s...";
       button.disabled = false;
-      hint.textContent = "Gardez le doigt pose un court instant pour armer le depart.";
+      hint.textContent = "Gardez le doigt pose 2 secondes, jusqu'a la fin de la barre.";
       return;
     }
 
-    button.textContent = "Maintenir pour demarrer";
+    button.textContent = "Maintenir 2 s pour demarrer";
     button.disabled = false;
-    hint.textContent = "Maintenez la grande zone, puis relachez pour lancer votre chrono.";
+    hint.textContent = "Maintenez la grande zone 2 secondes, puis relachez pour lancer votre chrono.";
   }
 
   function render() {
@@ -1787,6 +1831,7 @@ function createCubeHoldIntent() {
   return {
     armed: false,
     ready: false,
+    startedAt: 0,
     pointerId: null,
     timeoutId: null,
   };