From dd12c81aa704833639f1e48fdff56ace890586c2 Mon Sep 17 00:00:00 2001
From: Patric Stout <github@truebrain.nl>
Date: Tue, 6 Aug 2024 15:27:04 +0200
Subject: [PATCH] feat: ability to set ShipFit in read-only mode (#155)

This prevents the user from changing the fit.
---
 src/components/ShipFit/ShipFit.tsx | 64 +++++++++++++++---------------
 src/components/ShipFit/Slot.tsx    | 52 +++++++++++++++---------
 2 files changed, 65 insertions(+), 51 deletions(-)

diff --git a/src/components/ShipFit/ShipFit.tsx b/src/components/ShipFit/ShipFit.tsx
index 0b137c3..4625bef 100644
--- a/src/components/ShipFit/ShipFit.tsx
+++ b/src/components/ShipFit/ShipFit.tsx
@@ -20,7 +20,7 @@ import styles from "./ShipFit.module.css";
 /**
  * Render a ship fit similar to how it is done in-game.
  */
-export const ShipFit = (props: { withStats?: boolean; isPreview?: boolean }) => {
+export const ShipFit = (props: { withStats?: boolean; isPreview?: boolean; readOnly?: boolean }) => {
   const eveData = useEveData();
   const statistics = useStatistics();
 
@@ -123,28 +123,28 @@ export const ShipFit = (props: { withStats?: boolean; isPreview?: boolean }) =>
         </RingTopItem>
 
         <RingTopItem rotation={-36.5 + (71 / 7) * 0}>
-          <Slot type="High" index={1} fittable={slots.High >= 1} main />
+          <Slot type="High" index={1} fittable={slots.High >= 1} main readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={-36.5 + (71 / 7) * 1}>
-          <Slot type="High" index={2} fittable={slots.High >= 2} />
+          <Slot type="High" index={2} fittable={slots.High >= 2} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={-36.5 + (71 / 7) * 2}>
-          <Slot type="High" index={3} fittable={slots.High >= 3} />
+          <Slot type="High" index={3} fittable={slots.High >= 3} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={-36.5 + (71 / 7) * 3}>
-          <Slot type="High" index={4} fittable={slots.High >= 4} />
+          <Slot type="High" index={4} fittable={slots.High >= 4} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={-36.5 + (71 / 7) * 4}>
-          <Slot type="High" index={5} fittable={slots.High >= 5} />
+          <Slot type="High" index={5} fittable={slots.High >= 5} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={-36.5 + (71 / 7) * 5}>
-          <Slot type="High" index={6} fittable={slots.High >= 6} />
+          <Slot type="High" index={6} fittable={slots.High >= 6} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={-36.5 + (71 / 7) * 6}>
-          <Slot type="High" index={7} fittable={slots.High >= 7} />
+          <Slot type="High" index={7} fittable={slots.High >= 7} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={-36.5 + (71 / 7) * 7}>
-          <Slot type="High" index={8} fittable={slots.High >= 8} />
+          <Slot type="High" index={8} fittable={slots.High >= 8} readOnly={props.readOnly} />
         </RingTopItem>
 
         <RingTopItem rotation={43} background>
@@ -152,28 +152,28 @@ export const ShipFit = (props: { withStats?: boolean; isPreview?: boolean }) =>
         </RingTopItem>
 
         <RingTopItem rotation={53 + (72 / 7) * 0}>
-          <Slot type="Medium" index={1} fittable={slots.Medium >= 1} />
+          <Slot type="Medium" index={1} fittable={slots.Medium >= 1} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={53 + (72 / 7) * 1}>
-          <Slot type="Medium" index={2} fittable={slots.Medium >= 2} />
+          <Slot type="Medium" index={2} fittable={slots.Medium >= 2} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={53 + (72 / 7) * 2}>
-          <Slot type="Medium" index={3} fittable={slots.Medium >= 3} />
+          <Slot type="Medium" index={3} fittable={slots.Medium >= 3} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={53 + (72 / 7) * 3}>
-          <Slot type="Medium" index={4} fittable={slots.Medium >= 4} />
+          <Slot type="Medium" index={4} fittable={slots.Medium >= 4} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={53 + (72 / 7) * 4}>
-          <Slot type="Medium" index={5} fittable={slots.Medium >= 5} />
+          <Slot type="Medium" index={5} fittable={slots.Medium >= 5} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={53 + (72 / 7) * 5}>
-          <Slot type="Medium" index={6} fittable={slots.Medium >= 6} />
+          <Slot type="Medium" index={6} fittable={slots.Medium >= 6} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={53 + (72 / 7) * 6}>
-          <Slot type="Medium" index={7} fittable={slots.Medium >= 7} />
+          <Slot type="Medium" index={7} fittable={slots.Medium >= 7} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={53 + (72 / 7) * 7}>
-          <Slot type="Medium" index={8} fittable={slots.Medium >= 8} />
+          <Slot type="Medium" index={8} fittable={slots.Medium >= 8} readOnly={props.readOnly} />
         </RingTopItem>
 
         <RingTopItem rotation={133} background>
@@ -181,51 +181,51 @@ export const ShipFit = (props: { withStats?: boolean; isPreview?: boolean }) =>
         </RingTopItem>
 
         <RingTopItem rotation={142 + (72 / 7) * 0}>
-          <Slot type="Low" index={1} fittable={slots.Low >= 1} />
+          <Slot type="Low" index={1} fittable={slots.Low >= 1} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={142 + (72 / 7) * 1}>
-          <Slot type="Low" index={2} fittable={slots.Low >= 2} />
+          <Slot type="Low" index={2} fittable={slots.Low >= 2} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={142 + (72 / 7) * 2}>
-          <Slot type="Low" index={3} fittable={slots.Low >= 3} />
+          <Slot type="Low" index={3} fittable={slots.Low >= 3} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={142 + (72 / 7) * 3}>
-          <Slot type="Low" index={4} fittable={slots.Low >= 4} />
+          <Slot type="Low" index={4} fittable={slots.Low >= 4} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={142 + (72 / 7) * 4}>
-          <Slot type="Low" index={5} fittable={slots.Low >= 5} />
+          <Slot type="Low" index={5} fittable={slots.Low >= 5} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={142 + (72 / 7) * 5}>
-          <Slot type="Low" index={6} fittable={slots.Low >= 6} />
+          <Slot type="Low" index={6} fittable={slots.Low >= 6} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={142 + (72 / 7) * 6}>
-          <Slot type="Low" index={7} fittable={slots.Low >= 7} />
+          <Slot type="Low" index={7} fittable={slots.Low >= 7} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={142 + (72 / 7) * 7}>
-          <Slot type="Low" index={8} fittable={slots.Low >= 8} />
+          <Slot type="Low" index={8} fittable={slots.Low >= 8} readOnly={props.readOnly} />
         </RingTopItem>
 
         <RingTopItem rotation={-74 + (21 / 2) * 0}>
-          <Slot type="Rig" index={1} fittable={slots.Rig >= 1} />
+          <Slot type="Rig" index={1} fittable={slots.Rig >= 1} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={-74 + (21 / 2) * 1}>
-          <Slot type="Rig" index={2} fittable={slots.Rig >= 2} />
+          <Slot type="Rig" index={2} fittable={slots.Rig >= 2} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={-74 + (21 / 2) * 2}>
-          <Slot type="Rig" index={3} fittable={slots.Rig >= 3} />
+          <Slot type="Rig" index={3} fittable={slots.Rig >= 3} readOnly={props.readOnly} />
         </RingTopItem>
 
         <RingTopItem rotation={-128 + (38 / 3) * 0}>
-          <Slot type="SubSystem" index={1} fittable={slots.SubSystem >= 1} />
+          <Slot type="SubSystem" index={1} fittable={slots.SubSystem >= 1} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={-128 + (38 / 3) * 1}>
-          <Slot type="SubSystem" index={2} fittable={slots.SubSystem >= 2} />
+          <Slot type="SubSystem" index={2} fittable={slots.SubSystem >= 2} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={-128 + (38 / 3) * 2}>
-          <Slot type="SubSystem" index={3} fittable={slots.SubSystem >= 3} />
+          <Slot type="SubSystem" index={3} fittable={slots.SubSystem >= 3} readOnly={props.readOnly} />
         </RingTopItem>
         <RingTopItem rotation={-128 + (38 / 3) * 3}>
-          <Slot type="SubSystem" index={4} fittable={slots.SubSystem >= 4} />
+          <Slot type="SubSystem" index={4} fittable={slots.SubSystem >= 4} readOnly={props.readOnly} />
         </RingTopItem>
       </RingTop>
 
diff --git a/src/components/ShipFit/Slot.tsx b/src/components/ShipFit/Slot.tsx
index ecc8792..12ed11e 100644
--- a/src/components/ShipFit/Slot.tsx
+++ b/src/components/ShipFit/Slot.tsx
@@ -17,7 +17,13 @@ const stateRotation: Record<string, EsfState[]> = {
   Overload: ["Passive", "Online", "Active", "Overload"],
 };
 
-export const Slot = (props: { type: EsfSlotType; index: number; fittable: boolean; main?: boolean }) => {
+export const Slot = (props: {
+  type: EsfSlotType;
+  index: number;
+  fittable: boolean;
+  main?: boolean;
+  readOnly?: boolean;
+}) => {
   const eveData = useEveData();
   const statistics = useStatistics();
   const fitManager = useFitManager();
@@ -277,28 +283,36 @@ export const Slot = (props: { type: EsfSlotType; index: number; fittable: boolea
 
   return (
     <div className={styles.slotOuter} data-hasitem={module !== undefined}>
-      <div className={styles.slot} onClick={cycleState} data-state={state} onDrop={onDragEnd} onDragOver={onDragOver}>
+      <div
+        className={styles.slot}
+        onClick={props.readOnly !== true ? cycleState : undefined}
+        data-state={state}
+        onDrop={onDragEnd}
+        onDragOver={onDragOver}
+      >
         {svg}
         <div className={imageStyle}>{item}</div>
       </div>
-      <div className={styles.slotOptions}>
-        {module?.charge !== undefined && (
-          <svg viewBox="0 0 20 20" width={20} xmlns="http://www.w3.org/2000/svg" onClick={unfitCharge}>
-            <title>Remove Charge</title>
-            <use href="#uncharge" />
-          </svg>
-        )}
-        <svg viewBox="0 0 20 20" width={20} xmlns="http://www.w3.org/2000/svg" onClick={unfitModule}>
-          <title>Unfit Module</title>
-          <use href="#unfit" />
-        </svg>
-        {module?.max_state !== "Passive" && (
-          <svg viewBox="0 0 20 20" width={20} xmlns="http://www.w3.org/2000/svg" onClick={offlineState}>
-            <title>Put Offline</title>
-            <use href="#offline" />
+      {props.readOnly !== true && (
+        <div className={styles.slotOptions}>
+          {module?.charge !== undefined && (
+            <svg viewBox="0 0 20 20" width={20} xmlns="http://www.w3.org/2000/svg" onClick={unfitCharge}>
+              <title>Remove Charge</title>
+              <use href="#uncharge" />
+            </svg>
+          )}
+          <svg viewBox="0 0 20 20" width={20} xmlns="http://www.w3.org/2000/svg" onClick={unfitModule}>
+            <title>Unfit Module</title>
+            <use href="#unfit" />
           </svg>
-        )}
-      </div>
+          {module?.max_state !== "Passive" && (
+            <svg viewBox="0 0 20 20" width={20} xmlns="http://www.w3.org/2000/svg" onClick={offlineState}>
+              <title>Put Offline</title>
+              <use href="#offline" />
+            </svg>
+          )}
+        </div>
+      )}
     </div>
   );
 };