feat: replace ? button with hint type icons in ActorPopover

assets/app.js

@@ -1,2 +1,3 @@
+import '@fortawesome/fontawesome-free/css/all.min.css';
 import './bootstrap.js';
 import './styles/app.css';

assets/react/controllers/ActorPopover.jsx

@@ -1,7 +1,13 @@
 import React, { useState } from 'react';
 import { useFloating, useClick, useDismiss, useInteractions, offset, flip, shift } from '@floating-ui/react';
 
-export default function ActorPopover({ actorName }) {
+const HINT_ICONS = {
+    film: 'fa-solid fa-film',
+    character: 'fa-solid fa-masks-theater',
+    award: 'fa-solid fa-trophy',
+};
+
+export default function ActorPopover({ hintType, hintText }) {
     const [isOpen, setIsOpen] = useState(false);
 
     const { refs, floatingStyles, context } = useFloating({
@@ -15,6 +21,8 @@ export default function ActorPopover({ actorName }) {
     const dismiss = useDismiss(context);
     const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
 
+    const iconClass = HINT_ICONS[hintType] || 'fa-solid fa-circle-question';
+
     return (
         <>
             <button
@@ -23,7 +31,7 @@ export default function ActorPopover({ actorName }) {
                 className="popover-trigger"
                 type="button"
             >
-                ?
+                <i className={iconClass}></i>
             </button>
             {isOpen && (
                 <div
@@ -32,7 +40,7 @@ export default function ActorPopover({ actorName }) {
                     {...getFloatingProps()}
                     className="actor-popover"
                 >
-                    <strong>{actorName}</strong>
+                    {hintText}
                 </div>
             )}
         </>

assets/react/controllers/GameGrid.jsx

@@ -30,6 +30,8 @@ export default function GameGrid({ grid, width, middle }) {
                             pos={row.pos}
                             colStart={middle - row.pos}
                             totalWidth={width}
+                            hintType={row.hintType}
+                            hintText={row.hintText}
                         />
                     );
                 })}

assets/react/controllers/GameRow.jsx

@@ -6,7 +6,7 @@ function isLetter(ch) {
     return /[a-zA-Z]/.test(ch);
 }
 
-export default function GameRow({ actorName, pos, colStart, totalWidth }) {
+export default function GameRow({ actorName, pos, colStart, totalWidth, hintType, hintText }) {
     const inputRefs = useRef([]);
     const letters = actorName.split('');
 
@@ -30,7 +30,7 @@ export default function GameRow({ actorName, pos, colStart, totalWidth }) {
     return (
         <tr>
             <td>
-                <ActorPopover actorName={actorName} />
+                <ActorPopover hintType={hintType} hintText={hintText} />
             </td>
             {Array.from({ length: totalWidth + 1 }, (_, colIndex) => {
                 const charIndex = colIndex - colStart;

package-lock.json

@@ -7,6 +7,7 @@
       "name": "ltbxd-actorle",
       "dependencies": {
         "@floating-ui/react": "^0.27",
+        "@fortawesome/fontawesome-free": "^7.2.0",
         "@hotwired/stimulus": "^3.2",
         "@hotwired/turbo": "^7.3",
         "@symfony/stimulus-bundle": "file:vendor/symfony/stimulus-bundle/assets",
@@ -952,6 +953,15 @@
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.2.0.tgz",
+      "integrity": "sha512-3DguDv/oUE+7vjMeTSOjCSG+KeawgVQOHrKRnvUuqYh1mfArrh7s+s8hXW3e4RerBA1+Wh+hBqf8sJNpqNrBWg==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@hotwired/stimulus": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.2.tgz",

package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27",
+    "@fortawesome/fontawesome-free": "^7.2.0",
     "@hotwired/stimulus": "^3.2",
     "@hotwired/turbo": "^7.3",
     "@symfony/stimulus-bundle": "file:vendor/symfony/stimulus-bundle/assets",