From 962c0bd911c3fd8bbd68c7ad953e504839c3cc81 Mon Sep 17 00:00:00 2001
From: robert <robert@myemail.cloud>
Date: Sun, 25 May 2025 23:28:36 -0400
Subject: [PATCH] more slight changes.

---
 src/App.js | 226 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 144 insertions(+), 82 deletions(-)

diff --git a/src/App.js b/src/App.js
index 19877c8..c60d3e2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef } from 'react'; // Added useRef
+import React, { useState, useEffect, useRef } from 'react';
 import { initializeApp } from 'firebase/app';
 import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
-import { getFirestore, doc, setDoc, addDoc, getDoc, getDocs, collection, onSnapshot, updateDoc, deleteDoc, query, writeBatch } from 'firebase/firestore'; // Removed where as it's not used
-import { ArrowLeft, PlusCircle, Users, Swords, Shield, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown, ChevronDown, ChevronUp, UserCheck, UserX, HeartCrack, HeartPulse, Zap, Share2, Copy as CopyIcon } from 'lucide-react';
+import { getFirestore, doc, setDoc, addDoc, getDoc, getDocs, collection, onSnapshot, updateDoc, deleteDoc, query, writeBatch } from 'firebase/firestore';
+import { ArrowLeft, PlusCircle, Users, Swords, Shield, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown, ChevronDown, ChevronUp, UserCheck, UserX, HeartCrack, HeartPulse, Zap, Share2, Copy as CopyIcon, Image as ImageIcon, EyeOff } from 'lucide-react';
 
 // --- Firebase Configuration ---
 const firebaseConfig = {
@@ -24,7 +24,6 @@ const missingKeys = requiredFirebaseConfigKeys.filter(key => !firebaseConfig[key
 if (missingKeys.length > 0) {
   console.error(`CRITICAL: Missing Firebase config values from environment variables: ${missingKeys.join(', ')}`);
   console.error("Firebase cannot be initialized. Please ensure all REACT_APP_FIREBASE_... variables are set in your .env.local file and accessible during the build.");
-  // Fallback: Render a message or allow app to break if Firebase is critical
 } else {
   try {
     app = initializeApp(firebaseConfig);
@@ -32,11 +31,9 @@ if (missingKeys.length > 0) {
     auth = getAuth(app);
   } catch (error) {
     console.error("Error initializing Firebase:", error);
-    // Handle initialization error, perhaps by setting db and auth to null or showing an error UI
   }
 }
 
-
 // --- Firestore Paths ---
 const APP_ID = process.env.REACT_APP_TRACKER_APP_ID || 'ttrpg-initiative-tracker-default';
 const PUBLIC_DATA_PATH = `artifacts/${APP_ID}/public/data`;
@@ -60,10 +57,10 @@ function App() {
   const [directDisplayParams, setDirectDisplayParams] = useState(null); 
 
   useEffect(() => {
-    if (!auth) { // Check if Firebase auth was initialized
+    if (!auth) { 
         setError("Firebase Auth not initialized. Check your Firebase configuration.");
         setIsLoading(false);
-        setIsAuthReady(false); // Explicitly set auth not ready
+        setIsAuthReady(false); 
         return;
     }
     const handleHashChange = () => {
@@ -109,7 +106,7 @@ function App() {
     };
   }, []);
 
-  if (!db || !auth) { // If Firebase failed to init
+  if (!db || !auth) { 
     return (
         <div className="min-h-screen bg-red-900 text-white flex flex-col items-center justify-center p-4">
             <h1 className="text-3xl font-bold">Configuration Error</h1>
@@ -132,48 +129,37 @@ function App() {
     );
   }
 
+  const goToAdminView = () => {
+    setViewMode('admin');
+    setDirectDisplayParams(null);
+    window.location.hash = '';
+  };
+
   return (
     <div className="min-h-screen bg-slate-800 text-slate-100 font-sans">
       {!directDisplayParams && ( 
         <header className="bg-slate-900 p-4 shadow-lg">
           <div className="container mx-auto flex justify-between items-center">
-            <h1 className="text-3xl font-bold text-sky-400">TTRPG Initiative Tracker</h1>
+            <h1 
+              className="text-3xl font-bold text-sky-400 cursor-pointer hover:text-sky-300 transition-colors"
+              onClick={goToAdminView}
+              title="Go to Admin View"
+            >
+              TTRPG Initiative Tracker
+            </h1>
             <div className="flex items-center space-x-4">
               {userId && <span className="text-xs text-slate-400">UID: {userId}</span>}
-              {/* Show Admin View button only if not in display mode */}
-              {viewMode !== 'display' && (
-                 <button
-                    onClick={() => { setViewMode('admin'); setDirectDisplayParams(null); window.location.hash = '';}}
-                    className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${viewMode === 'admin' ? 'bg-sky-500 text-white' : 'bg-slate-700 hover:bg-slate-600'}`}
-                 >
-                    Admin View
-                 </button>
-              )}
-              {/* Show Player Display button only if not in admin mode (or always if header is visible and it's the only option left) */}
-              {viewMode !== 'admin' && (
-                <button
-                    onClick={() => { setViewMode('display'); setDirectDisplayParams(null); window.location.hash = '';}}
-                    className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${viewMode === 'display' ? 'bg-teal-500 text-white' : 'bg-slate-700 hover:bg-slate-600'}`}
-                >
-                    Player Display
-                </button>
-              )}
-              {/* Simpler toggle: always show both if header is visible and style the active one */}
-              {/* The above logic is slightly off for two buttons always present. Let's fix: */}
-              {/* Corrected Header Buttons for Toggling */}
-               <button
-                onClick={() => { setViewMode('admin'); setDirectDisplayParams(null); window.location.hash = '';}}
-                className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${viewMode === 'admin' ? 'bg-sky-500 text-white' : 'bg-slate-700 hover:bg-slate-600'}`}
-                // Hide if current view is display, but allow access from admin
-                style={viewMode === 'display' ? { display: 'none' } : {}} 
-              >
-                Admin View
-              </button>
               <button
-                onClick={() => { setViewMode('display'); setDirectDisplayParams(null); window.location.hash = '';}}
+                onClick={() => { 
+                    if (viewMode === 'display') {
+                        goToAdminView(); 
+                    } else {
+                        setViewMode('display'); 
+                    }
+                }}
                 className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${viewMode === 'display' ? 'bg-teal-500 text-white' : 'bg-slate-700 hover:bg-slate-600'}`}
               >
-                Player Display
+                {viewMode === 'display' ? 'Admin Controls' : 'Player Display'}
               </button>
             </div>
           </div>
@@ -186,11 +172,11 @@ function App() {
         )}
         {!directDisplayParams && viewMode === 'admin' && isAuthReady && userId && <AdminView userId={userId} />}
         {!directDisplayParams && viewMode === 'display' && isAuthReady && <DisplayView />}
-        {!isAuthReady && !error && <p>Authenticating...</p>} {/* Show auth message only if no other error */}
+        {!isAuthReady && !error && <p>Authenticating...</p>} 
       </main>
        {!directDisplayParams && (
          <footer className="bg-slate-900 p-4 text-center text-sm text-slate-400 mt-8">
-          TTRPG Initiative Tracker v0.1.13
+          TTRPG Initiative Tracker v0.1.15 
         </footer>
        )}
     </div>
@@ -205,7 +191,7 @@ function AdminView({ userId }) {
   const [initialActiveInfo, setInitialActiveInfo] = useState(null);
 
   useEffect(() => {
-    if (!db) return; // Guard against Firebase not initialized
+    if (!db) return; 
     const campaignsCollectionRef = collection(db, CAMPAIGNS_COLLECTION);
     const q = query(campaignsCollectionRef); 
     const unsubscribeCampaigns = onSnapshot(q, (snapshot) => {
@@ -239,12 +225,16 @@ function AdminView({ userId }) {
   }, [initialActiveInfo, campaigns, selectedCampaignId]);
 
 
-  const handleCreateCampaign = async (name) => {
+  const handleCreateCampaign = async (name, backgroundUrl) => { 
     if (!db || !name.trim()) return;
     const newCampaignId = generateId();
     try {
       await setDoc(doc(db, CAMPAIGNS_COLLECTION, newCampaignId), {
-        name: name.trim(), ownerId: userId, createdAt: new Date().toISOString(), players: [], 
+        name: name.trim(), 
+        playerDisplayBackgroundUrl: backgroundUrl.trim() || '', 
+        ownerId: userId, 
+        createdAt: new Date().toISOString(), 
+        players: [], 
       });
       setShowCreateCampaignModal(false);
       setSelectedCampaignId(newCampaignId); 
@@ -292,6 +282,7 @@ function AdminView({ userId }) {
             >
               <h3 className="text-xl font-semibold text-white">{campaign.name}</h3>
               <p className="text-xs text-slate-400">ID: {campaign.id}</p>
+              {campaign.playerDisplayBackgroundUrl && <ImageIcon size={14} className="inline-block mr-1 text-slate-400" title="Has custom background"/>}
               <button 
                 onClick={(e) => { 
                   e.stopPropagation(); 
@@ -324,12 +315,23 @@ function AdminView({ userId }) {
 
 function CreateCampaignForm({ onCreate, onCancel }) {
   const [name, setName] = useState('');
+  const [backgroundUrl, setBackgroundUrl] = useState(''); 
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onCreate(name, backgroundUrl); 
+  };
+
   return (
-    <form onSubmit={(e) => { e.preventDefault(); onCreate(name); }} className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-4">
       <div>
         <label htmlFor="campaignName" className="block text-sm font-medium text-slate-300">Campaign Name</label>
         <input type="text" id="campaignName" value={name} onChange={(e) => setName(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" required />
       </div>
+      <div>
+        <label htmlFor="backgroundUrl" className="block text-sm font-medium text-slate-300">Player Display Background URL (Optional)</label>
+        <input type="url" id="backgroundUrl" value={backgroundUrl} onChange={(e) => setBackgroundUrl(e.target.value)} placeholder="https://example.com/image.jpg" className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" />
+      </div>
       <div className="flex justify-end space-x-3">
         <button type="button" onClick={onCancel} className="px-4 py-2 text-sm font-medium text-slate-300 bg-slate-600 hover:bg-slate-500 rounded-md transition-colors">Cancel</button>
         <button type="submit" className="px-4 py-2 text-sm font-medium text-white bg-green-500 hover:bg-green-600 rounded-md transition-colors">Create</button>
@@ -470,9 +472,27 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
   const handleSetEncounterAsActiveDisplay = async (encounterId) => {
     if (!db) return;
     try {
-      await setDoc(doc(db, ACTIVE_DISPLAY_DOC), { activeCampaignId: campaignId, activeEncounterId: encounterId }, { merge: true });
-      console.log("Encounter set as active for DM's main display!"); 
-    } catch (err) { console.error("Error setting active display:", err); }
+      const currentActiveCampaign = activeDisplayInfo?.activeCampaignId;
+      const currentActiveEncounter = activeDisplayInfo?.activeEncounterId;
+
+      if (currentActiveCampaign === campaignId && currentActiveEncounter === encounterId) {
+        // Currently active, so toggle off
+        await updateDoc(doc(db, ACTIVE_DISPLAY_DOC), {
+          activeCampaignId: null, 
+          activeEncounterId: null,
+        });
+        console.log("Encounter display toggled OFF for DM."); 
+      } else {
+        // Not active or different encounter, so set this one as active
+        await setDoc(doc(db, ACTIVE_DISPLAY_DOC), {
+          activeCampaignId: campaignId,
+          activeEncounterId: encounterId,
+        }, { merge: true });
+        console.log("Encounter set as active for DM's main display!");
+      }
+    } catch (err) {
+      console.error("Error toggling active display:", err);
+    }
   };
 
   const handleCopyToClipboard = (encounterId) => {
@@ -504,7 +524,13 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
                   {isDmActiveDisplay && <span className="text-xs text-green-400 font-semibold block mt-1">LIVE ON DM DISPLAY</span>}
                 </div>
                 <div className="flex items-center space-x-2">
-                  <button onClick={() => handleSetEncounterAsActiveDisplay(encounter.id)} className={`p-1 rounded transition-colors ${isDmActiveDisplay ? 'bg-green-500 hover:bg-green-600 text-white' : 'text-teal-400 hover:text-teal-300 bg-slate-600 hover:bg-slate-500'}`} title="Set as DM's Active Display"><Eye size={18} /></button>
+                  <button 
+                    onClick={() => handleSetEncounterAsActiveDisplay(encounter.id)} 
+                    className={`p-1 rounded transition-colors ${isDmActiveDisplay ? 'bg-red-500 hover:bg-red-600 text-white' : 'text-teal-400 hover:text-teal-300 bg-slate-600 hover:bg-slate-500'}`} 
+                    title={isDmActiveDisplay ? "Deactivate DM Display" : "Set as DM's Active Display"}
+                  >
+                    {isDmActiveDisplay ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
                   <button onClick={() => handleCopyToClipboard(encounter.id)} className="p-1 rounded transition-colors text-sky-400 hover:text-sky-300 bg-slate-600 hover:bg-slate-500" title="Copy Share Link for Players"><Share2 size={18} /></button>
                   {copiedLinkEncounterId === encounter.id && <span className="text-xs text-green-400">Copied!</span>}
                   <button onClick={(e) => { e.stopPropagation(); handleDeleteEncounter(encounter.id); }} className="p-1 rounded transition-colors text-red-400 hover:text-red-300 bg-slate-600 hover:bg-slate-500" title="Delete Encounter"><Trash2 size={18} /></button>
@@ -727,7 +753,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
       <ul className="space-y-2">
         {sortedAdminParticipants.map((p, index) => {
           const isCurrentTurn = encounter.isStarted && p.id === encounter.currentTurnParticipantId;
-          const isDraggable = !encounter.isStarted && tiedInitiatives.includes(Number(p.initiative)); // Ensure p.initiative is number for comparison
+          const isDraggable = !encounter.isStarted && tiedInitiatives.includes(Number(p.initiative)); 
           return (
             <li 
               key={p.id} 
@@ -872,15 +898,30 @@ function DisplayView({ campaignIdFromUrl, encounterIdFromUrl }) {
   const [activeEncounterData, setActiveEncounterData] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [campaignBackgroundUrl, setCampaignBackgroundUrl] = useState('');
 
   useEffect(() => {
     if (!db) {
         setError("Firestore not available."); setIsLoading(false); return;
     }
-    setIsLoading(true); setError(null); setActiveEncounterData(null);
+    setIsLoading(true); setError(null); setActiveEncounterData(null); setCampaignBackgroundUrl('');
     let unsubscribeEncounter;
+    let unsubscribeCampaign;
+
+    const fetchCampaignBackground = async (cId) => {
+        if (!cId) return;
+        const campaignDocRef = doc(db, CAMPAIGNS_COLLECTION, cId);
+        unsubscribeCampaign = onSnapshot(campaignDocRef, (docSnap) => {
+            if (docSnap.exists()) {
+                setCampaignBackgroundUrl(docSnap.data().playerDisplayBackgroundUrl || '');
+            }
+        }, (err) => {
+            console.error("Error fetching campaign background:", err);
+        });
+    };
 
     if (campaignIdFromUrl && encounterIdFromUrl) {
+      fetchCampaignBackground(campaignIdFromUrl);
       const encounterPath = `${CAMPAIGNS_COLLECTION}/${campaignIdFromUrl}/encounters/${encounterIdFromUrl}`;
       unsubscribeEncounter = onSnapshot(doc(db, encounterPath), (encDocSnap) => {
         if (encDocSnap.exists()) setActiveEncounterData({ id: encDocSnap.id, ...encDocSnap.data() });
@@ -893,6 +934,7 @@ function DisplayView({ campaignIdFromUrl, encounterIdFromUrl }) {
         if (docSnap.exists()) {
           const { activeCampaignId, activeEncounterId } = docSnap.data();
           if (activeCampaignId && activeEncounterId) {
+            fetchCampaignBackground(activeCampaignId);
             const encounterPath = `${CAMPAIGNS_COLLECTION}/${activeCampaignId}/encounters/${activeEncounterId}`;
             if(unsubscribeEncounter) unsubscribeEncounter(); 
             unsubscribeEncounter = onSnapshot(doc(db, encounterPath), (encDocSnap) => {
@@ -903,9 +945,16 @@ function DisplayView({ campaignIdFromUrl, encounterIdFromUrl }) {
           } else { setActiveEncounterData(null); setIsLoading(false); }
         } else { setActiveEncounterData(null); setIsLoading(false); }
       }, (err) => { console.error("Error fetching active display config:", err); setError("Could not load display configuration."); setIsLoading(false); });
-      return () => { unsubDisplayConfig(); if (unsubscribeEncounter) unsubscribeEncounter(); };
+      return () => { 
+        unsubDisplayConfig(); 
+        if (unsubscribeEncounter) unsubscribeEncounter();
+        if (unsubscribeCampaign) unsubscribeCampaign();
+       };
     }
-    return () => { if (unsubscribeEncounter) unsubscribeEncounter(); };
+    return () => { 
+        if (unsubscribeEncounter) unsubscribeEncounter();
+        if (unsubscribeCampaign) unsubscribeCampaign();
+    };
   }, [campaignIdFromUrl, encounterIdFromUrl]);
 
   if (isLoading) return <div className="text-center py-10 text-2xl text-slate-300">Loading Player Display...</div>;
@@ -915,7 +964,7 @@ function DisplayView({ campaignIdFromUrl, encounterIdFromUrl }) {
   const { name, participants, round, currentTurnParticipantId, isStarted } = activeEncounterData;
   
   let displayParticipants = [];
-  if (participants) { // Ensure participants array exists before trying to sort/filter
+  if (participants) { 
     if (isStarted && activeEncounterData.turnOrderIds?.length > 0 ) {
       displayParticipants = activeEncounterData.turnOrderIds
           .map(id => participants.find(p => p.id === id)).filter(p => p && p.isActive); 
@@ -932,35 +981,48 @@ function DisplayView({ campaignIdFromUrl, encounterIdFromUrl }) {
     }
   }
 
+  const displayStyles = campaignBackgroundUrl ? {
+    backgroundImage: `url(${campaignBackgroundUrl})`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center center',
+    backgroundRepeat: 'no-repeat',
+    minHeight: '100vh' 
+  } : { minHeight: '100vh' };
+
 
   return (
-    <div className="p-4 md:p-8 bg-slate-900 rounded-xl shadow-2xl">
-      <h2 className="text-4xl md:text-5xl font-bold text-center text-amber-400 mb-2">{name}</h2>
-      {isStarted && <p className="text-2xl text-center text-sky-300 mb-6">Round: {round}</p>}
-      {!isStarted && participants?.length > 0 && <p className="text-2xl text-center text-slate-400 mb-6">Awaiting Start</p>}
-      {!isStarted && (!participants || participants.length === 0) && <p className="text-2xl text-slate-500 mb-6">No participants.</p>}
-      {displayParticipants.length === 0 && isStarted && <p className="text-xl text-slate-400">No active participants.</p>}
-      <div className="space-y-4 max-w-3xl mx-auto">
-        {displayParticipants.map(p => (
-          <div key={p.id} className={`p-4 md:p-6 rounded-lg shadow-lg transition-all ${p.id === currentTurnParticipantId && isStarted ? 'bg-green-700 ring-4 ring-green-400 scale-105' : (p.type === 'character' ? 'bg-sky-700' : 'bg-red-700')} ${!p.isActive ? 'opacity-40 grayscale' : ''}`}>
-            <div className="flex justify-between items-center mb-2">
-              <h3 className={`text-2xl md:text-3xl font-bold ${p.id === currentTurnParticipantId && isStarted ? 'text-white' : (p.type === 'character' ? 'text-sky-100' : 'text-red-100')}`}>{p.name}{p.id === currentTurnParticipantId && isStarted && <span className="text-yellow-300 animate-pulse ml-2">(Current)</span>}</h3>
-              <span className={`text-xl md:text-2xl font-semibold ${p.id === currentTurnParticipantId && isStarted ? 'text-green-200' : 'text-slate-200'}`}>Init: {p.initiative}</span>
-            </div>
-            <div className="flex justify-between items-center">
-              <div className="w-full bg-slate-600 rounded-full h-6 md:h-8 relative overflow-hidden border-2 border-slate-500">
-                <div className={`h-full rounded-full transition-all ${p.currentHp <= p.maxHp / 4 ? 'bg-red-500' : (p.currentHp <= p.maxHp / 2 ? 'bg-yellow-500' : 'bg-green-500')}`} style={{ width: `${Math.max(0, (p.currentHp / p.maxHp) * 100)}%` }}></div>
-                {p.type !== 'monster' && ( 
-                    <span className="absolute inset-0 flex items-center justify-center text-xs md:text-sm font-medium text-white mix-blend-difference px-2">
-                    HP: {p.currentHp} / {p.maxHp}
-                    </span>
-                )}
+    <div 
+        className={`p-4 md:p-8 rounded-xl shadow-2xl ${!campaignBackgroundUrl ? 'bg-slate-900' : ''}`}
+        style={displayStyles}
+    >
+      <div className={campaignBackgroundUrl ? 'bg-slate-900 bg-opacity-75 p-4 md:p-6 rounded-lg' : ''}> 
+        <h2 className="text-4xl md:text-5xl font-bold text-center text-amber-400 mb-2">{name}</h2>
+        {isStarted && <p className="text-2xl text-center text-sky-300 mb-6">Round: {round}</p>}
+        {!isStarted && participants?.length > 0 && <p className="text-2xl text-center text-slate-400 mb-6">Awaiting Start</p>}
+        {!isStarted && (!participants || participants.length === 0) && <p className="text-2xl text-slate-500 mb-6">No participants.</p>}
+        {displayParticipants.length === 0 && isStarted && <p className="text-xl text-slate-400">No active participants.</p>}
+        <div className="space-y-4 max-w-3xl mx-auto">
+          {displayParticipants.map(p => (
+            <div key={p.id} className={`p-4 md:p-6 rounded-lg shadow-lg transition-all ${p.id === currentTurnParticipantId && isStarted ? 'bg-green-700 ring-4 ring-green-400 scale-105' : (p.type === 'character' ? 'bg-sky-700' : 'bg-red-700')} ${!p.isActive ? 'opacity-40 grayscale' : ''}`}>
+              <div className="flex justify-between items-center mb-2">
+                <h3 className={`text-2xl md:text-3xl font-bold ${p.id === currentTurnParticipantId && isStarted ? 'text-white' : (p.type === 'character' ? 'text-sky-100' : 'text-red-100')}`}>{p.name}{p.id === currentTurnParticipantId && isStarted && <span className="text-yellow-300 animate-pulse ml-2">(Current)</span>}</h3>
+                <span className={`text-xl md:text-2xl font-semibold ${p.id === currentTurnParticipantId && isStarted ? 'text-green-200' : 'text-slate-200'}`}>Init: {p.initiative}</span>
               </div>
+              <div className="flex justify-between items-center">
+                <div className="w-full bg-slate-600 rounded-full h-6 md:h-8 relative overflow-hidden border-2 border-slate-500">
+                  <div className={`h-full rounded-full transition-all ${p.currentHp <= p.maxHp / 4 ? 'bg-red-500' : (p.currentHp <= p.maxHp / 2 ? 'bg-yellow-500' : 'bg-green-500')}`} style={{ width: `${Math.max(0, (p.currentHp / p.maxHp) * 100)}%` }}></div>
+                  {p.type !== 'monster' && ( 
+                      <span className="absolute inset-0 flex items-center justify-center text-xs md:text-sm font-medium text-white mix-blend-difference px-2">
+                      HP: {p.currentHp} / {p.maxHp}
+                      </span>
+                  )}
+                </div>
+              </div>
+              {p.conditions?.length > 0 && <p className="text-sm text-yellow-300 mt-2">Conditions: {p.conditions.join(', ')}</p>}
+              {!p.isActive && <p className="text-center text-lg font-semibold text-slate-300 mt-2">(Inactive)</p>}
             </div>
-            {p.conditions?.length > 0 && <p className="text-sm text-yellow-300 mt-2">Conditions: {p.conditions.join(', ')}</p>}
-            {!p.isActive && <p className="text-center text-lg font-semibold text-slate-300 mt-2">(Inactive)</p>}
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
     </div>
   );
@@ -989,4 +1051,4 @@ const PlayIcon = ({ size = 24, className = '' }) => <svg xmlns="http://www.w3.or
 const SkipForwardIcon = ({ size = 24, className = '' }) => <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>;
 const StopCircleIcon = ({size=24, className=''}) => <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6"></rect></svg>;
 
-export default App;
\ No newline at end of file
+export default App;