feat: add help button

Author: BachoSeven

src/components/Buttons.jsx

@@ -1,14 +1,13 @@
-import { useId } from 'preact/hooks'
-import { LuEye, LuHome, LuLayers, LuVideo } from 'react-icons/lu'
-import { useToggle } from '../lib/hooks.js'
+import { LuEye, LuHome, LuLayers, LuHelpCircle } from 'react-icons/lu'
+import { useState } from 'preact/hooks'
 import { clsx } from '../lib/utils.js'
 import { GridAnimation } from './Animations.jsx'
 import { toChildArray } from 'preact'
 
 const FLOOR_LABELS = ['Piano Terra', '1° Piano', '2° Piano']
 const GROUP_LABELS = ['Edifici A e B', 'Edificio ex-Albergo']
 
-const LayerFloor = ({ label, cameraToViewpoint, data: { viewpoint, visible, toggle } }) => {
+const LayerFloor = ({ label, cameraToViewpoint, data: { viewpoint } }) => {
     return (
         <div class="row">
             <div class="icon" role="button" onClick={() => cameraToViewpoint(viewpoint)}>
@@ -32,9 +31,7 @@ const LayerGroup = ({ label, data: { floors }, cameraToViewpoint }) => {
     )
 }
 
-const CollapsibleIconPanel = ({ children }) => {
-    const [layersPopup, toggleLayersPopup] = useToggle(false)
-
+const CollapsibleIconPanel = ({ layersPopup, toggleLayersPopup, children }) => {
     // extracts jsx nodes from the "children" prop
     const [iconJsx, labelJsx, contentJsx] = toChildArray(children)
 
@@ -75,6 +72,11 @@ const CollapsibleIconButton = ({ onClick, children }) => {
 }
 
 export const Buttons = ({ planimetriaRef, reset, layerToggles: { dip, exdma }, showOnlyRegion }) => {
+    // we only want to have one uncollapsed panel at a time
+    // so we need to keep track of which panel is open
+    // and close it when another one is opened
+    const [layersPopup, setLayersPopup] = useState(null)
+
     const onResetView = () => {
         if (planimetriaRef.current) {
             planimetriaRef.current.animateCameraToViewpoint('home')
@@ -89,7 +91,10 @@ export const Buttons = ({ planimetriaRef, reset, layerToggles: { dip, exdma }, s
 
     return (
         <div class="buttons">
-            <CollapsibleIconPanel>
+            <CollapsibleIconPanel
+                layersPopup={layersPopup === 'layers'}
+                toggleLayersPopup={() => setLayersPopup(layersPopup === 'layers' ? null : 'layers')}
+            >
                 <LuLayers />
                 <div class="label">
                     <div class="fix-text">Livelli</div>
@@ -106,6 +111,30 @@ export const Buttons = ({ planimetriaRef, reset, layerToggles: { dip, exdma }, s
                     <div class="fix-text">Reimposta Vista</div>
                 </div>
             </CollapsibleIconButton>
+            <CollapsibleIconPanel
+                layersPopup={layersPopup === 'help'}
+                toggleLayersPopup={() => setLayersPopup(layersPopup === 'help' ? null : 'help')}
+            >
+                <LuHelpCircle />
+                <div class="label">
+                    <div class="fix-text">Help</div>
+                </div>
+                <div class="content">
+                    <div class="title">Come navigare la mappa</div>
+                    <ul>
+                        <li>Per spostare la mappa, trascina con il mouse o con un dito.</li>
+                        <li>Per zoomare, usa la rotellina del mouse o i gesti di pinch-to-zoom.</li>
+                        <li>Per ruotare, clicca e trascina con il tasto destro del mouse o con due dita.</li>
+                        <li>
+                            Per selezionare un piano, clicca sull'icona dell'occhio corrispondente dentro il
+                            pannello <LuLayers />.
+                        </li>
+                        <li>
+                            Per tornare alla vista iniziale, clicca su <LuHome />.
+                        </li>
+                    </ul>
+                </div>
+            </CollapsibleIconPanel>
         </div>
     )
 }

src/element.jsx

@@ -1,7 +1,5 @@
 import { memo } from 'preact/compat'
 
-import { LuHelpCircle } from 'react-icons/lu'
-
 import { PlanimetrieViewer } from './dm-planimetrie/PlanimetrieViewer.js'
 
 import styles from './element.scss?inline'
@@ -216,13 +214,6 @@ export const Planimetrie = ({ selectedRoom }) => {
                             },
                         }}
                     />
-                    <div className="help-message">
-                        <LuHelpCircle />
-                        <span>
-                            Clicca e trascina per spostarti, trascina col tasto destro per orbitare e usa la
-                            rotellina del mouse per zoomare.
-                        </span>
-                    </div>
                 </div>
             </div>
         </>

src/element.scss

@@ -176,6 +176,7 @@ code {
     }
 
     .tooltip {
+        z-index: 5;
         position: absolute;
         inset: 0;
 
@@ -341,8 +342,8 @@ code {
 
             justify-items: start;
 
-            pointer-events: none;
-
+            pointer-events: auto;
+            max-width: calc(100vw - 2rem);
             .button-group {
                 display: grid;
 
@@ -442,6 +443,14 @@ code {
                     gap: 0.25rem;
 
                     min-width: 15rem;
+                    max-width: 20rem;
+
+                    text-wrap: wrap;
+                    line-height: 1.35;
+
+                    ul {
+                        padding-left: 1.25rem;
+                    }
 
                     .title {
                         display: flex;
@@ -737,22 +746,6 @@ code {
                 }
             }
         }
-
-        .help-message {
-            position: absolute;
-            top: 100%;
-            left: 0;
-
-            width: 100%;
-            padding: 0.25rem 0.125rem;
-
-            color: #444;
-            font-size: 19px;
-
-            display: flex;
-            align-items: center;
-            gap: 0.25rem;
-        }
     }
 }
 
@@ -883,10 +876,6 @@ code {
                     }
                 }
             }
-
-            .help-message {
-                display: none;
-            }
         }
     }
 }