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",