From 3c57886ec850c53b429816c618e4805a92f9f81f Mon Sep 17 00:00:00 2001
From: Julie Winchester <julie.winchester@duke.edu>
Date: Mon, 20 Nov 2023 20:49:18 -0600
Subject: [PATCH] Add configuration setting to show UI elements above stage

---
 src/lang/en.json       | 13 ++++++++++---
 src/scripts/Theatre.js | 26 ++++++++++++++++++++++++--
 src/styles/theatre.css |  8 ++++----
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/lang/en.json b/src/lang/en.json
index 963d54a..692ddf4 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -70,9 +70,16 @@
         "nameFontHint": "Put in the name of the font you want to use. If the font exists in Theatre, it can be used. Requires actors to re-stage or for the GM to resync.",
         "nameFontSize": "Actor Name Size (Experimental)",
         "nameFontSizeHint": "Sets the size of the name font. Note that the sizes may be different depending on your display or font choice. Using huge sizes is not recommended.",
-        "autoHideBottom": "Auto Hide Bottom",
-        "autoHideBottomHint": "Hide bottom UI(player&hotbar) when actor shows on stage.",
-        "suppressMacroHotbar": "Show Player List and Macro Hotbar When Stage is Suppressed",
+        "autoHideBottom": "Hide Bottom UI Elements Automatically",
+        "autoHideBottomHint": "Hide bottom UI elements (players list and macro hotbar) when actor shows on stage.",
+        "suppressMacroHotbar": "Show Bottom UI Elements When Stage Is Suppressed",
+        "suppressMacroHotbarHint": "Only has an effect if Hide Bottom UI Elements Automatically is enabled. Bottom UI elements (players list and macro hotbar) are shown again after hiding if stage is suppressed when actors are on stage.",
+        "showUIAboveStage": "Show UI Elements Above Stage",
+        "showUIAboveStageHint": "Useful mainly if Hide Bottom UI Elements Automatically is disabled. UI elements to show above the stage. Users can interact with UI elements above the stage even when actors are on stage.",
+        "showUIAboveStageNone": "None (Stage Above UI)",
+        "showUIAboveStageLeft": "Players List and Controls",
+        "showUIAboveStageMiddle": "Macro Hotbar",
+        "showUIAboveStageBoth": "Both (UI Above Stage)",
         "removeLabelSheetHeader": "Remove Text Labels From Actor Sheet Header",
         "removeLabelSheetHeaderHint": "Removes text labels from actor sheet header buttons, useful for small screens and mobile devices. Button will still be displayed with icon.",
         "ignoreMessagesToChat": "Ignore Theatre Messages From Chat",
diff --git a/src/scripts/Theatre.js b/src/scripts/Theatre.js
index b3dcc21..d1b3d1e 100644
--- a/src/scripts/Theatre.js
+++ b/src/scripts/Theatre.js
@@ -196,7 +196,13 @@ export class Theatre {
     // set narrator height
     this.settings.narrHeight = game.settings.get(Theatre.SETTINGS, "theatreNarratorHeight");
     this.theatreNarrator.style.top = `calc(${this.settings.narrHeight} - 50px)`;
-
+    // set z-index class for other UI elements
+    const uiAbove = game.settings.get(Theatre.SETTINGS, "showUIAboveStage");
+    const leftAbove = uiAbove == "left" || uiAbove == "both";
+    if (leftAbove) document.getElementById("ui-left").classList.add("z-higher");
+    const middleAbove = uiAbove == "middle" || uiAbove == "both";
+    if (middleAbove) document.getElementById("ui-middle").classList.add("z-higher");
+    
     // set dock canvas hard dimensions after CSS has caclulated it
 
     /**
@@ -497,13 +503,29 @@ export class Theatre {
 
     game.settings.register(Theatre.SETTINGS, "suppressMacroHotbar", {
       name: "Theatre.UI.Settings.suppressMacroHotbar",
-      hint: "",
+      hint: "Theatre.UI.Settings.suppressMacroHotbarHint",
       scope: "world",
       config: true,
       type: Boolean,
       default: true,
     });
 
+    game.settings.register(Theatre.SETTINGS, "showUIAboveStage", {
+      name: "Theatre.UI.Settings.showUIAboveStage",
+      hint: "Theatre.UI.Settings.showUIAboveStageHint",
+      scope: "world",
+      config: true,
+      default: "none",
+      requiresReload: true,
+      type: String,
+      choices: {
+        none: "Theatre.UI.Settings.showUIAboveStageNone",
+        left: "Theatre.UI.Settings.showUIAboveStageLeft",
+        middle: "Theatre.UI.Settings.showUIAboveStageMiddle",
+        both: "Theatre.UI.Settings.showUIAboveStageBoth",
+      }
+    });
+
     game.settings.register(Theatre.SETTINGS, "removeLabelSheetHeader", {
       name: "Theatre.UI.Settings.removeLabelSheetHeader",
       hint: "Theatre.UI.Settings.removeLabelSheetHeaderHint",
diff --git a/src/styles/theatre.css b/src/styles/theatre.css
index 2ecdc53..afce88f 100644
--- a/src/styles/theatre.css
+++ b/src/styles/theatre.css
@@ -1680,10 +1680,6 @@
   bottom: calc(50% - 50px);
 }
 
-#players {
-  z-index: 1;
-}
-
 #players,
 #hotbar {
   transition: opacity 500ms ease 0ms;
@@ -1702,6 +1698,10 @@
   pointer-events: none;
 }
 
+#ui-left.z-higher, #ui-middle.z-higher {
+  z-index: calc(var(--z-index-app) + 1);
+}
+
 @-moz-document url-prefix() {
   .emote-box .emotebar .colorselect {
     padding: 3px;