Release Healer Man 0.1.37

src/ui/CompanionPanel.tsx

@@ -30,6 +30,10 @@ import { ExperienceBar } from "./ExperienceBar";
 import { BrandMark, FrontSurface } from "./FrontSurface";
 import { ShelvedCompanionPanel } from "@shelvedCompanionPanel";
 import { SHELVED_MODES_ENABLED } from "../app/releaseFeatures";
+import { EditableHudElement } from "./EditableHudElement";
+import { DpsMeterWidget } from "./DpsMeterWidget";
+import { useUiLayoutStore } from "../game/uiLayoutStore";
+import { useDpsMeterStore } from "../game/dpsMeterStore";
 
 function safePercent(current: number, maximum: number): number {
   if (!Number.isFinite(current) || !Number.isFinite(maximum) || maximum <= 0) return 0;
@@ -456,14 +460,21 @@ export function CompanionPanel({ snapshot, send, preferControllerBinds = false }
             </div>
           </article>
         </section>
-        <section className="companion-map-card">
-          <DungeonMapGraphic position={snapshot.game.playerPosition} yaw={snapshot.game.cameraYaw} compact />
-          <div>
-            <span>{snapshot.game.overlay ? "Upper display" : "Current area"}</span>
-            <strong>{snapshot.game.overlay ? overlayName(snapshot.game.overlay, romSkills) : snapshot.game.areaName}</strong>
-            <small>{Math.round(snapshot.game.distanceTravelled)} m explored / {heading} degrees</small>
-          </div>
-        </section>
+        <div className="companion-tactical__overview">
+          <section className="companion-map-card">
+            <DungeonMapGraphic position={snapshot.game.playerPosition} yaw={snapshot.game.cameraYaw} compact />
+            <div>
+              <span>{snapshot.game.overlay ? "Upper display" : "Current area"}</span>
+              <strong>{snapshot.game.overlay ? overlayName(snapshot.game.overlay, romSkills) : snapshot.game.areaName}</strong>
+              <small>{Math.round(snapshot.game.distanceTravelled)} m explored / {heading} degrees</small>
+            </div>
+          </section>
+          {snapshot.game.dpsMeter.display === "companion" && <EditableHudElement id="dps" hostSelector=".companion-panel"
+            elementLayout={snapshot.game.dpsMeter.layout} editing={snapshot.game.dpsMeter.editing}
+            onChange={(update) => send({ name: "editDpsMeter", update })}>
+            <DpsMeterWidget compact snapshot={snapshot.game.dpsMeter.values} width={snapshot.game.dpsMeter.layout.width} />
+          </EditableHudElement>}
+        </div>
         <div className="companion-tactical__actions" style={{ gridColumn: "1 / 3", minWidth: 0 }}>
           <ActionBar
             items={actionItems}
@@ -501,5 +512,7 @@ export function LocalCompanionPanel() {
   useGameStore();
   useCombatStore();
   usePartyStore();
+  useUiLayoutStore();
+  useDpsMeterStore();
   return <CompanionPanel snapshot={currentCompanionSnapshot()} send={executeCompanionCommand} />;
 }