update: Thu 01 Aug 2024 08:14:42 CEST

cophilot · Aug 1, 2024 · f8c5324 · f8c5324
1 parent 6231d5e
commit f8c5324
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/src/api/BoardScoreTable/BoardScoreTable.tsx b/src/api/BoardScoreTable/BoardScoreTable.tsx
@@ -221,18 +221,42 @@ type FirstRowCellProps = {
 };
 
 function FirstRowCell({ row, helpOn }: FirstRowCellProps) {
-    let inner = row.name;
-    if (row.icon) {
-        inner = <img src={row.icon} alt={row.name} className="row-icon" />;
-        if (helpOn) {
-            inner = (
+    const [showHelp, setShowHelp] = useState(helpOn);
+    const [inner, setInner] = useState(row.name);
+
+    const onIconClick = () => {
+        if (helpOn || showHelp) {
+            return;
+        }
+        setShowHelp(true);
+        setTimeout(() => {
+            setShowHelp(false);
+        }, 2000);
+    };
+
+    useEffect(() => {
+        if (!row.icon) {
+            return;
+        }
+        let newInner = (
+            <img
+                src={row.icon}
+                alt={row.name}
+                className="row-icon"
+                onClick={onIconClick}
+            />
+        );
+        if (helpOn || showHelp) {
+            newInner = (
                 <>
-                    {inner}
+                    {newInner}
                     <p className="row-help">{row.name}</p>
                 </>
             );
         }
-    }
+        setInner(newInner);
+    }, [row.icon, row.name, helpOn, showHelp]);
+
     return <td style={{ fontWeight: 'bold' }}>{inner}</td>;
 }
 

diff --git a/src/games/forest-shuffle/definition.ts b/src/games/forest-shuffle/definition.ts
@@ -20,19 +20,19 @@ export default function getDefinition() {
                 icon: cardIcon,
             },
             {
-                name: 'Cards on top',
+                name: 'Cards top',
                 icon: topIcon,
             },
             {
-                name: 'Cards on right',
+                name: 'Cards right',
                 icon: rightIcon,
             },
             {
                 name: 'Cards below',
                 icon: downIcon,
             },
             {
-                name: 'Cards on left',
+                name: 'Cards left',
                 icon: leftIcon,
             },
             {