From 266326c40c4059b2fe9ded19ef96ef2812c84656 Mon Sep 17 00:00:00 2001
From: Davide Passoni <d.passed@libero.it>
Date: Mon, 31 Mar 2025 11:29:00 +0200
Subject: [PATCH] fix: Added callback to close all tooltips on click

---
 .../react/src/ui/components/olbuttongroup.tsx |   9 +-
 .../src/ui/components/olcoalitiontoggle.tsx   | 123 +++++++++---------
 .../react/src/ui/components/oldropdown.tsx    |  15 ++-
 .../react/src/ui/components/ollabeltoggle.tsx |   8 +-
 .../react/src/ui/components/olnumberinput.tsx |   8 +-
 .../react/src/ui/components/olstatebutton.tsx |  20 ++-
 frontend/react/src/ui/components/oltoggle.tsx |   8 +-
 .../react/src/ui/components/olunitsummary.tsx |  40 +++---
 8 files changed, 144 insertions(+), 87 deletions(-)

diff --git a/frontend/react/src/ui/components/olbuttongroup.tsx b/frontend/react/src/ui/components/olbuttongroup.tsx
index 5d5bf819..e23210d4 100644
--- a/frontend/react/src/ui/components/olbuttongroup.tsx
+++ b/frontend/react/src/ui/components/olbuttongroup.tsx
@@ -1,6 +1,6 @@
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { OlTooltip } from "./oltooltip";
 
 export function OlButtonGroup(props: {
@@ -12,6 +12,13 @@ export function OlButtonGroup(props: {
   const [hover, setHover] = useState(false);
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
   var buttonRef = useRef(null);
+
+  useEffect(() => {
+    window.addEventListener("click", (e) => {
+      setHover(false);
+    });
+  }, []);
+
   return (
     <>
       <div
diff --git a/frontend/react/src/ui/components/olcoalitiontoggle.tsx b/frontend/react/src/ui/components/olcoalitiontoggle.tsx
index 4baa88c1..3884036f 100644
--- a/frontend/react/src/ui/components/olcoalitiontoggle.tsx
+++ b/frontend/react/src/ui/components/olcoalitiontoggle.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Coalition } from "../../types/types";
 import { OlTooltip } from "./oltooltip";
 
@@ -15,69 +15,74 @@ export function OlCoalitionToggle(props: {
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
   var buttonRef = useRef(null);
 
+  useEffect(() => {
+    window.addEventListener("click", (e) => {
+      setHover(false);
+    });
+  }, []);
+
   return (
     <>
-    <div
-      className="inline-flex cursor-pointer items-center"
-      onClick={(e) => {
-        e.stopPropagation();
-        props.onClick();
-        props.onClick ?? setHover(false);
-      }}
-      onMouseEnter={() => {
-        setHoverTimeout(
-          window.setTimeout(() => {
-            setHover(true);
-            setHoverTimeout(null);
-          }, 400)
-        );
-      }}
-      onMouseLeave={() => {
-        setHover(false);
-        if (hoverTimeout) {
-          window.clearTimeout(hoverTimeout);
-          setHoverTimeout(null);
-        }
-      }}
-      ref={buttonRef}
-    >
-      <button className="peer sr-only" />
       <div
-        data-flash={props.coalition === undefined}
-        data-coalition={props.coalition ?? "blue"}
-        className={`
-          ${props.className ?? ""}
-          peer relative h-7 w-14 rounded-full bg-gray-200
-          after:absolute after:start-[4px] after:top-0.5 after:h-6 after:w-6
-          after:rounded-full after:border after:border-gray-300 after:bg-white
-          after:transition-all after:content-['']
-          dark:border-gray-600 dark:peer-focus:ring-blue-800
-          data-[coalition='blue']:bg-blue-600
-          data-[coalition='neutral']:bg-gray-400
-          data-[coalition='neutral']:after:translate-x-[50%]
-          data-[coalition='neutral']:after:border-white
-          data-[coalition='red']:bg-red-500
-          data-[coalition='red']:after:translate-x-full
-          data-[coalition='red']:after:border-white
-          peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300
-          rtl:data-[coalition='neutral']:after:-translate-x-[50%]
-          rtl:data-[coalition='red']:after:-translate-x-full
-        `}
-      ></div>
-      {props.showLabel && (
-        <span
+        className="inline-flex cursor-pointer items-center"
+        onClick={(e) => {
+          e.stopPropagation();
+          props.onClick();
+          props.onClick ?? setHover(false);
+        }}
+        onMouseEnter={() => {
+          setHoverTimeout(
+            window.setTimeout(() => {
+              setHover(true);
+              setHoverTimeout(null);
+            }, 400)
+          );
+        }}
+        onMouseLeave={() => {
+          setHover(false);
+          if (hoverTimeout) {
+            window.clearTimeout(hoverTimeout);
+            setHoverTimeout(null);
+          }
+        }}
+        ref={buttonRef}
+      >
+        <button className="peer sr-only" />
+        <div
+          data-flash={props.coalition === undefined}
+          data-coalition={props.coalition ?? "blue"}
           className={`
-            ms-3 overflow-hidden text-ellipsis text-nowrap text-gray-900
-            dark:text-white
-            data-[flash='true']:after:animate-pulse
+            ${props.className ?? ""}
+            peer relative h-7 w-14 rounded-full bg-gray-200
+            after:absolute after:start-[4px] after:top-0.5 after:h-6 after:w-6
+            after:rounded-full after:border after:border-gray-300 after:bg-white
+            after:transition-all after:content-['']
+            dark:border-gray-600 dark:peer-focus:ring-blue-800
+            data-[coalition='blue']:bg-blue-600
+            data-[coalition='neutral']:bg-gray-400
+            data-[coalition='neutral']:after:translate-x-[50%]
+            data-[coalition='neutral']:after:border-white
+            data-[coalition='red']:bg-red-500
+            data-[coalition='red']:after:translate-x-full
+            data-[coalition='red']:after:border-white
+            peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300
+            rtl:data-[coalition='neutral']:after:-translate-x-[50%]
+            rtl:data-[coalition='red']:after:-translate-x-full
           `}
-        >
-          {props.coalition ? `${props.coalition[0].toLocaleUpperCase() + props.coalition.substring(1)}` : "Diff. values"}
-        </span>
-      )}
-      
-    </div>
-    {hover && props.tooltip && (
+        ></div>
+        {props.showLabel && (
+          <span
+            className={`
+              ms-3 overflow-hidden text-ellipsis text-nowrap text-gray-900
+              dark:text-white
+              data-[flash='true']:after:animate-pulse
+            `}
+          >
+            {props.coalition ? `${props.coalition[0].toLocaleUpperCase() + props.coalition.substring(1)}` : "Diff. values"}
+          </span>
+        )}
+      </div>
+      {hover && props.tooltip && (
         <OlTooltip
           buttonRef={buttonRef}
           content={typeof props.tooltip === "string" ? props.tooltip : props.tooltip()}
diff --git a/frontend/react/src/ui/components/oldropdown.tsx b/frontend/react/src/ui/components/oldropdown.tsx
index 1f549406..9ae08823 100644
--- a/frontend/react/src/ui/components/oldropdown.tsx
+++ b/frontend/react/src/ui/components/oldropdown.tsx
@@ -22,6 +22,12 @@ export function OlDropdown(props: {
   var contentRef = useRef(null);
   var buttonRef = props.buttonRef !== undefined ? props.buttonRef : useRef(null);
 
+  useEffect(() => {
+    window.addEventListener("click", (e) => {
+      setHover(false);
+    });
+  }, []);
+
   function setPosition(content: HTMLDivElement, button: HTMLButtonElement) {
     /* Reset the position of the content */
     content.style.left = "0px";
@@ -126,12 +132,9 @@ export function OlDropdown(props: {
               }
             }}
           >
-            {props.leftIcon && (
-              <FontAwesomeIcon
-                icon={props.leftIcon}
-                className={`mr-3`}
-              />
-            )}
+            {props.leftIcon && <FontAwesomeIcon icon={props.leftIcon} className={`
+              mr-3
+            `} />}
             <span className="overflow-hidden text-ellipsis text-nowrap">{props.label ?? ""}</span>
             <svg
               className={`
diff --git a/frontend/react/src/ui/components/ollabeltoggle.tsx b/frontend/react/src/ui/components/ollabeltoggle.tsx
index b983eae9..18fce6cc 100644
--- a/frontend/react/src/ui/components/ollabeltoggle.tsx
+++ b/frontend/react/src/ui/components/ollabeltoggle.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { OlTooltip } from "./oltooltip";
 
 export function OlLabelToggle(props: {
@@ -14,6 +14,12 @@ export function OlLabelToggle(props: {
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
   var buttonRef = useRef(null);
 
+  useEffect(() => {
+    window.addEventListener("click", (e) => {
+      setHover(false);
+    });
+  }, []);
+
   return (
     <>
       <button
diff --git a/frontend/react/src/ui/components/olnumberinput.tsx b/frontend/react/src/ui/components/olnumberinput.tsx
index 15ff7cbb..0f981a4f 100644
--- a/frontend/react/src/ui/components/olnumberinput.tsx
+++ b/frontend/react/src/ui/components/olnumberinput.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useRef, useState } from "react";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
 import { zeroAppend } from "../../other/utils";
 import { OlTooltip } from "./oltooltip";
 
@@ -20,6 +20,12 @@ export function OlNumberInput(props: {
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
   var buttonRef = useRef(null);
 
+  useEffect(() => {
+    window.addEventListener("click", (e) => {
+      setHover(false);
+    });
+  }, []);
+
   return (
     <div
       className={`
diff --git a/frontend/react/src/ui/components/olstatebutton.tsx b/frontend/react/src/ui/components/olstatebutton.tsx
index 3f0c3153..752946a7 100644
--- a/frontend/react/src/ui/components/olstatebutton.tsx
+++ b/frontend/react/src/ui/components/olstatebutton.tsx
@@ -1,7 +1,7 @@
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { faLock, faUnlockAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { OlTooltip } from "./oltooltip";
 import { computeBrightness, setOpacity } from "../../other/utils";
 import { colors } from "../../constants/constants";
@@ -24,6 +24,12 @@ export function OlStateButton(props: {
   const [isMouseHovering, setIsMouseHovering] = useState(false);
   var buttonRef = useRef(null);
 
+  useEffect(() => {
+    window.addEventListener("click", (e) => {
+      setHover(false);
+    });
+  }, []);
+
   const className =
     (props.className ?? "") +
     `
@@ -109,6 +115,12 @@ export function OlRoundStateButton(props: {
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
   var buttonRef = useRef(null);
 
+  useEffect(() => {
+    window.addEventListener("click", (e) => {
+      setHover(false);
+    });
+  }, []);
+
   const className =
     (props.className ?? "") +
     `
@@ -169,6 +181,12 @@ export function OlLockStateButton(props: {
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
   var buttonRef = useRef(null);
 
+  useEffect(() => {
+    window.addEventListener("click", (e) => {
+      setHover(false);
+    });
+  }, []);
+
   const className =
     (props.className ?? "") +
     `
diff --git a/frontend/react/src/ui/components/oltoggle.tsx b/frontend/react/src/ui/components/oltoggle.tsx
index 0500a8c3..ae34abfb 100644
--- a/frontend/react/src/ui/components/oltoggle.tsx
+++ b/frontend/react/src/ui/components/oltoggle.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { OlTooltip } from "./oltooltip";
 
 export function OlToggle(props: {
@@ -12,6 +12,12 @@ export function OlToggle(props: {
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
   var buttonRef = useRef(null);
 
+  useEffect(() => {
+    window.addEventListener("click", (e) => {
+      setHover(false);
+    });
+  }, []);
+
   return (
     <>
       <div
diff --git a/frontend/react/src/ui/components/olunitsummary.tsx b/frontend/react/src/ui/components/olunitsummary.tsx
index 3c366e57..e597c984 100644
--- a/frontend/react/src/ui/components/olunitsummary.tsx
+++ b/frontend/react/src/ui/components/olunitsummary.tsx
@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { UnitBlueprint } from "../../interfaces";
 import { Coalition } from "../../types/types";
-import { getWikipediaImage, getWikipediaSummary } from "../../other/utils";
-import { OlStateButton } from "./olstatebutton";
-import { faImage } from "@fortawesome/free-solid-svg-icons";
+import { getWikipediaImage } from "../../other/utils";
 import { FaQuestionCircle } from "react-icons/fa";
 
 export function OlUnitSummary(props: { blueprint: UnitBlueprint; coalition: Coalition }) {
@@ -12,6 +10,12 @@ export function OlUnitSummary(props: { blueprint: UnitBlueprint; coalition: Coal
   const [hover, setHover] = useState(false);
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
 
+  useEffect(() => {
+    window.addEventListener("click", (e) => {
+      setHover(false);
+    });
+  }, []);
+
   useEffect(() => {
     getWikipediaImage(props.blueprint.label).then((url) => {
       setImageUrl(url);
@@ -63,9 +67,7 @@ export function OlUnitSummary(props: { blueprint: UnitBlueprint; coalition: Coal
         </div>
         {imageUrl && (
           <div className="flex w-full min-w-0 gap-1 text-sm text-gray-500">
-            <FaQuestionCircle
-              className={`my-auto min-w-4`}
-            />
+            <FaQuestionCircle className={`my-auto min-w-4`} />
             <div className={`my-auto max-w-full truncate`}>Hover to show image</div>
           </div>
         )}
@@ -82,17 +84,21 @@ export function OlUnitSummary(props: { blueprint: UnitBlueprint; coalition: Coal
       </div>
       <div className="flex flex-row gap-1 px-2">
         {props.blueprint.abilities?.split(" ").map((ability) => {
-          return <>{ ability.replaceAll(" ", "") !== "" &&
-            <div
-              key={ability}
-              className={`
-                rounded-full bg-olympus-800 px-2 py-0.5 text-xs font-bold
-                dark:text-olympus-50
-              `}
-            >
-              {ability}
-            </div>
-           }</>
+          return (
+            <>
+              {ability.replaceAll(" ", "") !== "" && (
+                <div
+                  key={ability}
+                  className={`
+                    rounded-full bg-olympus-800 px-2 py-0.5 text-xs font-bold
+                    dark:text-olympus-50
+                  `}
+                >
+                  {ability}
+                </div>
+              )}
+            </>
+          );
         })}
 
         <div