Merge pull request #990 from curtgrimes/981-readonly-abilities

Fix issue where abilities appeared clickable when they were not

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,6 +61,7 @@ export function Ability({
         setIsDragTarget(false);
         onDrop?.(event);
       }}
+      tabIndex={readonly ? -1 : undefined}
       type="button"
     >
       <Image alt="" path={abilityImageUrl(ability)} />

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
+        />
       ))}
     </>
   );

app/styles/common.css

@@ -807,6 +807,12 @@ dialog::backdrop {
   pointer-events: none;
 }
 
+.build__ability.readonly,
+.build__ability.readonly:active {
+  cursor: default;
+  transform: none;
+}
+
 .build__bottom-row {
   display: flex;
   height: 100%;