feat: aggiungi adattamento dinamico del canvas per il menu mobile e migliora la gestione del resize

src/assets/style.css

@@ -579,6 +579,11 @@ body {
         background-color: #12373C;
     }
 
+    /* Sfondo scuro del popup: titoli ed etichette sotto le icone vanno in chiaro */
+    .mobile-popup .menu-container {
+        color: #fff;
+    }
+
     .titolo {
         top: 1px;
         font-size: 12px;

src/js/menu_builder.js

@@ -10,6 +10,25 @@ let data_avvolgibile = null;
 let data_vetri = null;
 let listino = null;
 
+// Mobile verticale: il canvas occupa lo spazio sotto il menu. L'altezza va ricalcolata quando
+// il menu cambia (lista modelli, icone caricate) e quando cambia l'area visibile: sui browser
+// Android innerHeight varia con la barra degli indirizzi e al caricamento può non essere definitiva.
+const adattaCanvasMobile = () => {
+    const menu = document.getElementById('menu-mobile');
+    const canvas = document.getElementById('canvas-container');
+
+    const aggiorna = () => {
+        const altezza = Math.max(0, Math.floor(window.innerHeight - menu.getBoundingClientRect().bottom));
+        canvas.style.height = `${altezza}px`;
+        $('.button-180').css('bottom', altezza / 2);
+    };
+
+    aggiorna();
+    new ResizeObserver(aggiorna).observe(menu);
+    window.addEventListener('resize', aggiorna);
+    window.visualViewport?.addEventListener('resize', aggiorna);
+};
+
 const MenuBuilder = {
     build: async (params, parent_element_id, model, data) => {
 
@@ -44,8 +63,6 @@ const MenuBuilder = {
             $('.opzioni-mobile-menu').remove();
             $('.menu-categorie').remove();
 
-            //console.log($("#menu-mobile").height());
-            $("#canvas-container").height(window.innerHeight - ($('#menu-mobile').height() + 90));
 
             const menuScroll = $(".menu-scroll").html();
             $(".mobile-popup .popup-content").html(menuScroll);
@@ -56,8 +73,6 @@ const MenuBuilder = {
             $(".mobile-popup .popup-content").css('max-height', window.innerHeight * 0.6);
             $(".mobile-popup .popup-content").css('overflow-y', 'auto');
 
-            const canvas_height = $('#canvas-container').height();
-            $('.button-180').css('bottom', canvas_height / 2);
 
             $(".btn-opzioni").on('click', function () {
                 const opzione = $(this).data('opzione');
@@ -108,8 +123,10 @@ const MenuBuilder = {
 
             $('.menu-scroll').height(window.innerHeight - hMisure);
         } else {
-            if(window.innerWidth < window.innerHeight)
+            if(window.innerWidth < window.innerHeight) {
                 container = document.querySelector('.mobile-popup');
+                adattaCanvasMobile();
+            }
         }
 
 

src/js/starter.js

@@ -288,11 +288,12 @@ const start = async () => {
         player.setSize(player.dom.clientWidth, player.dom.clientHeight);
         player.play();
 
-        window.addEventListener('resize', function () {
+        // Il contenitore cambia dimensione anche senza resize della finestra (su mobile l'altezza
-            //console.log(player.dom.clientWidth, player.dom.clientHeight);
+        // dipende dal menu sopra): il renderer segue il contenitore.
+        new ResizeObserver(function () {
             player.setSize(player.dom.clientWidth, player.dom.clientHeight);
             player.render();
-        });
+        }).observe(player.dom);
 
     });