Update interface.js

interface.js

@@ -13,6 +13,7 @@
   if (!playcanvasUrl) return;
 
   const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
   const id = Math.random().toString(36).substr(2, 8);
 
   // ─── 4. Calcul des ratios (Desktop & Mobile Portrait) ────────────────────────
@@ -73,10 +74,12 @@
       border: none;
       display: block;
     }
-    .pc-fs-btn-${id} {
+
+    /* ── Boutons (fullscreen + help) ── */
+    .pc-fs-btn-${id},
+    .pc-help-btn-${id} {
       position: absolute;
       top: 10px;
-      right: 10px;
       z-index: 10;
       width: 36px;
       height: 36px;
@@ -90,6 +93,46 @@
       cursor: pointer;
       user-select: none;
     }
+    .pc-fs-btn-${id} {
+      right: 10px;
+    }
+    .pc-help-btn-${id} {
+      right: 54px; /* 10px + 36px + 8px de marge */
+    }
+
+    /* ── Panneau d'aide ── */
+    .pc-help-panel-${id} {
+      display: none;
+      position: absolute;
+      top: 54px;
+      right: 10px;
+      z-index: 20;
+      background: #2E2E2EB3;
+      color: #fff;
+      border-radius: 8px;
+      padding: 10px 14px 10px 14px;
+      font-size: 13px;
+      line-height: 1.7;
+      min-width: 220px;
+      max-width: 80%;
+      box-sizing: border-box;
+    }
+    .pc-help-panel-${id}.visible {
+      display: block;
+    }
+    .pc-help-close-${id} {
+      position: absolute;
+      top: 4px;
+      right: 10px;
+      cursor: pointer;
+      font-size: 18px;
+      line-height: 1;
+      color: #fff;
+      user-select: none;
+    }
+    .pc-help-text-${id} {
+      margin-top: 4px;
+    }
   `;
   document.head.appendChild(style);
 
@@ -112,9 +155,45 @@
   fsBtn.className = `pc-fs-btn-${id}`;
   fsBtn.textContent = '⇱';
 
+  const helpBtn = document.createElement('button');
+  helpBtn.className = `pc-help-btn-${id}`;
+  helpBtn.textContent = '?';
+
+  // Panneau d'aide
+  const helpPanel = document.createElement('div');
+  helpPanel.className = `pc-help-panel-${id}`;
+
+  const helpClose = document.createElement('span');
+  helpClose.className = `pc-help-close-${id}`;
+  helpClose.textContent = '×';
+
+  const helpText = document.createElement('div');
+  helpText.className = `pc-help-text-${id}`;
+
+  if (isMobile) {
+    helpText.innerHTML =
+      '- Se déplacer avec les flèches.<br>' +
+      '- Tourner avec un doigt.<br>' +
+      '- Zoomer avec deux doigts.<br>' +
+      '- ⇱ plein écran.<br>' +
+      '- Modifier la qualité avec le menu à gauche.';
+  } else {
+    helpText.innerHTML =
+      '- Se déplacer avec les flèches ou Z, Q, S, D.<br>' +
+      '- Tourner avec clic droit.<br>' +
+      '- Zoomer avec la molette.<br>' +
+      '- ⇱ plein écran.<br>' +
+      '- Modifier la qualité avec le menu à gauche.';
+  }
+
+  helpPanel.appendChild(helpClose);
+  helpPanel.appendChild(helpText);
+
   inner.appendChild(iframe);
   wrapper.appendChild(inner);
+  wrapper.appendChild(helpBtn);
   wrapper.appendChild(fsBtn);
+  wrapper.appendChild(helpPanel);
   scriptTag.parentNode.insertBefore(wrapper, scriptTag.nextSibling);
 
   // ─── 7. État & Helper ────────────────────────────────────────────────────────
@@ -126,6 +205,22 @@
     return (CSS && CSS.supports && CSS.supports('height', '100dvh')) ? '100dvh' : '100vh';
   }
 
+  // ─── Gestion du panneau d'aide ───────────────────────────────────────────────
+  function toggleHelpPanel(e) {
+    e.stopPropagation();
+    helpPanel.classList.toggle('visible');
+  }
+
+  function hideHelpPanel() {
+    helpPanel.classList.remove('visible');
+  }
+
+  helpBtn.addEventListener('click', toggleHelpPanel);
+  helpClose.addEventListener('click', (e) => {
+    e.stopPropagation();
+    hideHelpPanel();
+  });
+
   // ─── 8. Styles Plein Écran ───────────────────────────────────────────────────
   function applyFullscreenStyles() {
     const h = isIOS ? getHeightUnit() : '100vh';
@@ -166,6 +261,7 @@
 
   // ─── 9. Gestionnaires d'événements ───────────────────────────────────────────
   function enterFullscreen() {
+    hideHelpPanel();
     if (isIOS) {
       applyFakeFullscreenStyles();
       document.body.style.overflow = 'hidden';