Skip to content

Commit

Permalink
feat: ability to set ShipFit in read-only mode
Browse files Browse the repository at this point in the history
This prevents the user from changing the fit.
  • Loading branch information
TrueBrain committed Aug 6, 2024
1 parent 5e0a8f7 commit 18ce19a
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 36 deletions.
64 changes: 32 additions & 32 deletions src/components/ShipFit/ShipFit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -123,109 +123,109 @@ 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>
<RadialMenu type="Medium" />
</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>
<RadialMenu type="Low" />
</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>

Expand Down
8 changes: 4 additions & 4 deletions src/components/ShipFit/Slot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ 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();
Expand Down Expand Up @@ -277,11 +277,11 @@ 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}>
{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>
Expand All @@ -298,7 +298,7 @@ export const Slot = (props: { type: EsfSlotType; index: number; fittable: boolea
<use href="#offline" />
</svg>
)}
</div>
</div>}
</div>
);
};

0 comments on commit 18ce19a

Please sign in to comment.