Enhanced the tooltip component

client/src/components/seats-widget.js

@@ -47,25 +47,24 @@ export async function createSeatWidget($roomGrid, roomId) {
     // Setup event listeners
     Object.entries(elSeatMap).forEach(([seatId, $seat]) => {
         addTooltipElementListener($hovering => {
-            if ($seat.contains($hovering)) {
-                const occupiedBy = seats[seatId].occupiedBy
-
-                if (occupiedBy.length > 0) {
-                    if (user && occupiedBy[0] === user.id) {
-                        setTooltipText(`Questo è il tuo posto!`)
-                    } else {
-                        setTooltipText(`Occupato da @${occupiedBy[0]}`)
-                    }
+            if (!$seat.contains($hovering)) return false
+
+            const occupiedBy = seats[seatId].occupiedBy
+
+            if (occupiedBy.length > 0) {
+                if (user && occupiedBy[0] === user.id) {
+                    setTooltipText(`Questo è il tuo posto!`)
                 } else {
-                    setTooltipText('Libero')
+                    setTooltipText(`Occupato da @${occupiedBy[0]}`)
                 }
-
-                return true
             } else {
-                resetTooltip()
+                setTooltipText('Libero')
             }
+
+            return true
         })
 
+        // Listener for takeing or leaving a seat
         $seat.addEventListener('click', () => {
             if (!user) {
                 location.href = '/login.html'

client/src/components/tooltip.js

@@ -1,3 +1,14 @@
+// FIXME: Ok questo file è abbastanza self-contained però sarebbe meglio riorganizzarlo un po' in modo da non avere così tante variabili globali
+
+/*
+Un'idea (spastica) sarebbe che `addTooltipElementListener` si aspetta che il callback dell'evento `false` se non ha nulla da mostrare oppure una funzione che riceve come parametro l'elemento della tooltip (in questo modo `setTooltip(callback)` non servirebbe più e setTooltipText(text) diventerebbe una funzione parziale che ritorna una "mounting function").
+
+In questo modo:
+- `setTooltip` non esisterebbe più e ci sarebbero meno "momenti" in cui il testo della tooltip può cambiare.
+- Anche `resetTooltip` non esisterebbe più perché semplicemente la tooltip scomparirebbe se tutti i listener ritornano `false`.
+- `setTooltipText` diventerebbe una funzione "pura rispetto al mondo esterno" (che modifica solo cose nel suo scope) che è sempre meglio di modificare variabili globali.
+*/
+
 const LISTENERS = []
 const $tooltip = document.querySelector('#tooltip')
 
@@ -6,29 +17,58 @@ export function attachTooltip() {
         $tooltip.style.setProperty('--x', 10 + e.pageX + 'px')
         $tooltip.style.setProperty('--y', 10 + e.pageY + 'px')
 
-        LISTENERS.find(listener => listener(e.target))
+        for (const listener of LISTENERS) {
+            if (listener(e.target)) {
+                return
+            }
+        }
+
+        resetTooltip()
     })
 
     resetTooltip()
 }
 
+/**
+ * addTooltipElementListener attaches a listener on the mouse moved event. The listener should return true only if it needs the tooltip to be visible (TODO: change this to return a mounting function), otherwise it should return false.
+ * @param {*} callbackFn
+ */
 export function addTooltipElementListener(callbackFn) {
     LISTENERS.push(callbackFn)
 }
 
+/**
+ * setTooltip shows the tooltip and calls the given callback with the tooltip element to
+ * let the caller modify the tooltip as preferred.
+ */
 export function setTooltip(mountFn) {
     $tooltip.classList.remove('hidden')
+
     mountFn($tooltip)
+
+    RESET_DIRTY = true
 }
 
+let TEXT_BUFFER = null
 export function setTooltipText(text) {
-    $tooltip.classList.remove('hidden')
     setTooltip($t => {
-        $t.innerText = text
+        if (text !== TEXT_BUFFER) {
+            $t.innerText = text
+            TEXT_BUFFER = text
+        }
     })
 }
 
+let RESET_DIRTY = true
 export function resetTooltip() {
+    if (!RESET_DIRTY) return
+
+    TEXT_BUFFER = null
     $tooltip.classList.add('hidden')
-    $tooltip.innerHTML = ''
+
+    while ($tooltip.firstChild) {
+        $tooltip.firstChild.remove()
+    }
+
+    RESET_DIRTY = false
 }

client/src/style.scss

@@ -269,7 +269,7 @@ main {
     }
 
     .room-grid {
-        // To absolutly position a canvas underneat and render grid lines
+        // To absolutely position a canvas underneath and render grid lines
         position: relative;
         z-index: 0;
 
@@ -368,7 +368,8 @@ body {
         background: #666;
         color: #ddd;
 
-        transform: translate(var(--x, -100px), var(--y, -100px));
+        left: var(--x, -100px);
+        top: var(--y, -100px);
 
         z-index: 100;
         user-select: none;