Release Healer Man 0.1.29

src/ui/TalentsPanel.tsx

@@ -26,6 +26,7 @@ export interface TalentTreeView {
 }
 
 export interface TalentsPanelProps {
+  readOnly?: boolean;
   trees: readonly TalentTreeView[];
   ranks: TalentRanks;
   classId: ClassId;
@@ -109,6 +110,7 @@ function TalentsDialog({
   onInvest,
   onReset,
   onClose,
+  readOnly = false,
 }: Omit<TalentsPanelProps, "open" | "onClose"> & { onClose: () => void }) {
   const [activeTreeId, setActiveTreeId] = useState(() => trees[0]?.id ?? "");
   const [detailNodeId, setDetailNodeId] = useState(() => trees[0]?.nodes[0]?.id ?? "");
@@ -167,7 +169,7 @@ function TalentsDialog({
         id: nodeControlId(node.id),
         run: () => {
           setDetailNodeId(node.id);
-          if (!state?.failure) onInvest(node.id);
+          if (!readOnly && !state?.failure) onInvest(node.id);
         },
         neighbors: {
           up: up ? nodeControlId(up.id) : tabControlId(activeTreeId),
@@ -180,7 +182,7 @@ function TalentsDialog({
     return [
       ...tabActions,
       ...nodeActions,
-      { id: "talent-reset", run: onReset, enabled: spent > 0 },
+      { id: "talent-reset", run: onReset, enabled: !readOnly && spent > 0 },
     ];
   }, [activeNodes, activeTreeId, nodeStateById, onInvest, onReset, spent, trees]);
   const controller = useMenuController(actions, {
@@ -219,7 +221,7 @@ function TalentsDialog({
 
   const activateNode = (treeId: string, node: TalentUiNode) => {
     inspectNode(treeId, node.id);
-    if (!nodeStateById.get(node.id)?.failure) onInvest(node.id);
+    if (!readOnly && !nodeStateById.get(node.id)?.failure) onInvest(node.id);
   };
 
   return (
@@ -333,7 +335,7 @@ function TalentsDialog({
                         className={`talent-node ${learned ? "is-learned" : ""} ${maximum ? "is-max" : ""} ${locked ? "is-locked" : ""} ${unavailable ? "is-unavailable" : ""} ${detailNode?.id === node.id ? "is-inspected" : ""}`}
                         style={{ gridColumn: node.column, gridRow: node.row } as CSSProperties}
                         aria-label={label}
-                        aria-disabled={state.failure !== null}
+                        aria-disabled={readOnly || state.failure !== null}
                         aria-describedby={detailNode?.id === node.id ? "talent-node-details" : undefined}
                         title={`${label} — ${talentUiDescriptionForRank(node, state.rank || 1)}`}
                         onFocus={() => inspectNode(tree.id, node.id)}
@@ -429,7 +431,7 @@ function TalentsDialog({
             select={controller.select}
             type="button"
             className="button"
-            disabled={spent <= 0}
+            disabled={readOnly || spent <= 0}
             onClick={onReset}
           >Reset talents</ControllerButton>
         </div>