diff --git a/src/App.js b/src/App.js index 8bff6a2..d8db51d 100644 --- a/src/App.js +++ b/src/App.js @@ -6,7 +6,8 @@ import { PlusCircle, Users, Swords, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown, UserCheck, UserX, HeartCrack, HeartPulse, Zap, EyeOff, ExternalLink, AlertTriangle, Play as PlayIcon, Pause as PauseIcon, SkipForward as SkipForwardIcon, - StopCircle as StopCircleIcon, Users2, Dices, ChevronUp, ChevronDown, ScrollText + StopCircle as StopCircleIcon, Users2, Dices, ChevronUp, ChevronDown, ScrollText, + Maximize2, Minimize2 } from 'lucide-react'; // Custom CSS for death animation (player view only) @@ -2309,8 +2310,23 @@ function DisplayView() { const [encounterError, setEncounterError] = useState(null); const [campaignBackgroundUrl, setCampaignBackgroundUrl] = useState(''); const [isPlayerDisplayActive, setIsPlayerDisplayActive] = useState(false); + const [isFullscreen, setIsFullscreen] = useState(false); const currentParticipantRef = useRef(null); + useEffect(() => { + const onFsChange = () => setIsFullscreen(!!document.fullscreenElement); + document.addEventListener('fullscreenchange', onFsChange); + return () => document.removeEventListener('fullscreenchange', onFsChange); + }, []); + + const toggleFullscreen = () => { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + } else { + document.exitFullscreen(); + } + }; + useEffect(() => { if (!db) { setEncounterError("Firestore not available."); @@ -2434,6 +2450,13 @@ function DisplayView() { className={`p-4 md:p-8 rounded-xl shadow-2xl ${!campaignBackgroundUrl ? 'bg-stone-950' : ''}`} style={displayStyles} > +

{name}