diff --git a/assets/app.js b/assets/app.js
index 06118dd..6df6e93 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -1,2 +1,3 @@
+import '@fortawesome/fontawesome-free/css/all.min.css';
import './bootstrap.js';
import './styles/app.css';
diff --git a/assets/react/controllers/ActorPopover.jsx b/assets/react/controllers/ActorPopover.jsx
index 3941c4c..f085fd6 100644
--- a/assets/react/controllers/ActorPopover.jsx
+++ b/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 (
<>
{isOpen && (
- {actorName}
+ {hintText}
)}
>
diff --git a/assets/react/controllers/GameGrid.jsx b/assets/react/controllers/GameGrid.jsx
index 5c91d9d..43777f5 100644
--- a/assets/react/controllers/GameGrid.jsx
+++ b/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}
/>
);
})}
diff --git a/assets/react/controllers/GameRow.jsx b/assets/react/controllers/GameRow.jsx
index 8373562..ed85714 100644
--- a/assets/react/controllers/GameRow.jsx
+++ b/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 (
|
-
+
|
{Array.from({ length: totalWidth + 1 }, (_, colIndex) => {
const charIndex = colIndex - colStart;
diff --git a/package-lock.json b/package-lock.json
index aa07821..bf1d618 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index b4e8c67..d501f4b 100644
--- a/package.json
+++ b/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",