From 66a198f3f7500463454fb7d4270afea8c4639bf8 Mon Sep 17 00:00:00 2001
From: Curt Grimes <curt@curtgrimes.com>
Date: Mon, 3 Oct 2022 20:35:02 -0700
Subject: [PATCH 1/2] Fix issue where abilities appeared clickable when they
 were not

Issue was introduced in #971.

Fixes #981
---
 app/components/Ability.tsx   | 5 ++++-
 app/components/BuildCard.tsx | 7 ++++++-
 app/styles/common.css        | 6 ++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/components/Ability.tsx b/app/components/Ability.tsx
index eff56de74..ca2ab7b69 100644
--- a/app/components/Ability.tsx
+++ b/app/components/Ability.tsx
@@ -13,6 +13,7 @@ const sizeMap = {
 export function Ability({
   ability,
   size,
+  readonly = false,
   dragStarted = false,
   dropAllowed = false,
   onClick,
@@ -20,6 +21,7 @@ export function Ability({
 }: {
   ability: AbilityWithUnknown;
   size: keyof typeof sizeMap;
+  readonly?: boolean;
   dragStarted?: boolean;
   dropAllowed?: boolean;
   onClick?: () => void;
@@ -44,6 +46,7 @@ export function Ability({
         "is-drag-target": isDragTarget,
         "drag-started": dragStarted,
         "drop-allowed": dropAllowed,
+        readonly,
       })}
       style={
         {
@@ -58,7 +61,7 @@ export function Ability({
         setIsDragTarget(false);
         onDrop?.(event);
       }}
-      type="button"
+      tabIndex={readonly ? -1 : undefined}
     >
       <Image alt="" path={abilityImageUrl(ability)} />
     </button>
diff --git a/app/components/BuildCard.tsx b/app/components/BuildCard.tsx
index a1258051f..cb08b1a30 100644
--- a/app/components/BuildCard.tsx
+++ b/app/components/BuildCard.tsx
@@ -213,7 +213,12 @@ function AbilitiesRowWithGear({
         className="build__gear"
       />
       {abilities.map((ability, i) => (
-        <Ability key={i} ability={ability} size={i === 0 ? "MAIN" : "SUB"} />
+        <Ability
+          key={i}
+          ability={ability}
+          size={i === 0 ? "MAIN" : "SUB"}
+          readonly
+        />
       ))}
     </>
   );
diff --git a/app/styles/common.css b/app/styles/common.css
index 8701f1c88..bb2a26574 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -808,6 +808,12 @@ dialog::backdrop {
   pointer-events: none;
 }
 
+.build__ability.readonly,
+.build__ability.readonly:active {
+  cursor: default;
+  transform: none;
+}
+
 .build__bottom-row {
   display: flex;
   height: 100%;

From 0cb1f5a0fba2ac88ccee6e818740c9bd49b7ef87 Mon Sep 17 00:00:00 2001
From: Curt Grimes <curt@curtgrimes.com>
Date: Tue, 4 Oct 2022 12:16:18 -0700
Subject: [PATCH 2/2] Add back incorrectly removed type="button"

---
 app/components/Ability.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/Ability.tsx b/app/components/Ability.tsx
index ca2ab7b69..19afa513c 100644
--- a/app/components/Ability.tsx
+++ b/app/components/Ability.tsx
@@ -62,6 +62,7 @@ export function Ability({
         onDrop?.(event);
       }}
       tabIndex={readonly ? -1 : undefined}
+      type="button"
     >
       <Image alt="" path={abilityImageUrl(ability)} />
     </button>