feat: replace ? button with hint type icons in ActorPopover

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;