From 90cfb36b56d024c84c5a4d25039c803b4be318dc Mon Sep 17 00:00:00 2001
From: robert <robert@myemail.cloud>
Date: Sat, 16 May 2026 09:30:35 -0400
Subject: [PATCH] Adds a 'Hide player HP' toggle in the Combat Controls panel
 (on by default) that suppresses health bars for player characters in the
 DisplayView. Setting is persisted in the activeDisplay Firestore doc so it
 survives page reloads and takes effect in real time on the player screen.

---
 src/App.js | 54 ++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index be46dd2..15c75f4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1505,6 +1505,17 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
 
 function InitiativeControls({ campaignId, encounter, encounterPath }) {
   const [showEndConfirm, setShowEndConfirm] = useState(false);
+  const { data: activeDisplayData } = useFirestoreDocument(getPath.activeDisplay());
+  const hidePlayerHp = activeDisplayData?.hidePlayerHp ?? true;
+
+  const handleToggleHidePlayerHp = async () => {
+    if (!db) return;
+    try {
+      await setDoc(doc(db, getPath.activeDisplay()), { hidePlayerHp: !hidePlayerHp }, { merge: true });
+    } catch (err) {
+      console.error("Error toggling hidePlayerHp:", err);
+    }
+  };
 
   const handleStartEncounter = async () => {
     if (!db || !encounter.participants || encounter.participants.length === 0) {
@@ -1676,6 +1687,22 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
             </>
           )}
         </div>
+
+        {/* Display Settings */}
+        <div className="mt-3 pt-3 border-t border-stone-700">
+          <h5 className="text-xs font-semibold text-stone-400 uppercase tracking-wider mb-2">Player Display</h5>
+          <label className="flex items-center justify-between cursor-pointer gap-2">
+            <span className="text-sm text-stone-300">Hide player HP</span>
+            <button
+              role="switch"
+              aria-checked={hidePlayerHp}
+              onClick={handleToggleHidePlayerHp}
+              className={`relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none ${hidePlayerHp ? 'bg-amber-600' : 'bg-stone-600'}`}
+            >
+              <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${hidePlayerHp ? 'translate-x-4' : 'translate-x-0'}`} />
+            </button>
+          </label>
+        </div>
       </div>
 
       <ConfirmationModal
@@ -2299,6 +2326,7 @@ function DisplayView() {
   }
 
   const { name, participants, round, currentTurnParticipantId, isStarted, isPaused } = activeEncounterData;
+  const hidePlayerHp = activeDisplayData?.hidePlayerHp ?? true;
 
   let participantsToRender = [];
   if (participants) {
@@ -2382,19 +2410,21 @@ function DisplayView() {
                   </span>
                 </div>
 
-                <div className="flex justify-between items-center">
-                  <div className="w-full bg-stone-700 rounded-full h-6 md:h-8 relative overflow-hidden border-2 border-stone-600">
-                    <div
-                      className={`h-full rounded-full transition-all ${isDead ? 'bg-red-900' : (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 px-2">
-                        HP: {p.currentHp} / {p.maxHp}
-                      </span>
-                    )}
+                {!(hidePlayerHp && p.type === 'character') && (
+                  <div className="flex justify-between items-center">
+                    <div className="w-full bg-stone-700 rounded-full h-6 md:h-8 relative overflow-hidden border-2 border-stone-600">
+                      <div
+                        className={`h-full rounded-full transition-all ${isDead ? 'bg-red-900' : (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 px-2">
+                          HP: {p.currentHp} / {p.maxHp}
+                        </span>
+                      )}
+                    </div>
                   </div>
-                </div>
+                )}
 
                 {p.conditions?.length > 0 && (
                   <div className="flex flex-wrap gap-1 mt-2">