chore: calculate available slots in ShipSnapshotProvider (#39)

More than only ShipFit needs it in the future, so by moving it closer to the calculation makes it easier for other places to use it again.
2023-12-03 17:26:25 +01:00
parent 572b2c9de0
commit d9063bfc32
3 changed files with 86 additions and 61 deletions
--- a/src/ShipFit/ShipFit.tsx
+++ b/src/ShipFit/ShipFit.tsx
@@ -1,6 +1,5 @@
 import React from "react";

-import { EveDataContext } from '../EveDataProvider';
 import { ShipSnapshotContext } from '../ShipSnapshotProvider';

 import { FitLink } from './FitLink';
@@ -19,37 +18,14 @@ export interface ShipFitProps {
 export const ShipFit = (props: ShipFitProps) => {
  const radius = props.radius ?? 365;

-  const eveData = React.useContext(EveDataContext);
  const shipSnapshot = React.useContext(ShipSnapshotContext);
+  const slots = shipSnapshot.slots;

  const scaleStyle = {
    "--radius": `${radius}px`,
    "--scale": `${radius / 365}`
  } as React.CSSProperties;

-  const slots = {
-    "hislot": 0,
-    "medslot": 0,
-    "lowslot": 0,
-    "subsystem": 0,
-    "rig": 0,
-  };
-
-  if (shipSnapshot?.loaded) {
-    slots.hislot = shipSnapshot.hull?.attributes.get(eveData?.attributeMapping?.hiSlots || 0)?.value || 0;
-    slots.medslot = shipSnapshot.hull?.attributes.get(eveData?.attributeMapping?.medSlots || 0)?.value || 0;
-    slots.lowslot = shipSnapshot.hull?.attributes.get(eveData?.attributeMapping?.lowSlots || 0)?.value || 0;
-    slots.subsystem = shipSnapshot.hull?.attributes.get(eveData?.attributeMapping?.maxSubSystems || 0)?.value || 0;
-    slots.rig = shipSnapshot.hull?.attributes.get(eveData?.attributeMapping?.rigSlots || 0)?.value || 0;
-
-    const items = shipSnapshot.items || [];
-    for (const item of items) {
-      slots.hislot += item.attributes.get(eveData?.attributeMapping?.hiSlotModifier || 0)?.value || 0;
-      slots.medslot += item.attributes.get(eveData?.attributeMapping?.medSlotModifier || 0)?.value || 0;
-      slots.lowslot += item.attributes.get(eveData?.attributeMapping?.lowSlotModifier || 0)?.value || 0;
-    }
-  }
-
  return <div className={styles.fit} style={scaleStyle}>
    <div className={styles.outerBand} />
    <div className={styles.innerBand} />
@@ -58,41 +34,41 @@ export const ShipFit = (props: ShipFitProps) => {
    <FitLink />

    <div className={styles.slots}>
-      <Slot type="subsystem" index={1} fittable={slots.subsystem >= 1} rotation="-125deg" />
-      <Slot type="subsystem" index={2} fittable={slots.subsystem >= 2} rotation="-114deg" />
-      <Slot type="subsystem" index={3} fittable={slots.subsystem >= 3} rotation="-103deg" />
-      <Slot type="subsystem" index={4} fittable={slots.subsystem >= 4} rotation="-92deg" />
+      <Slot type="subsystem" index={1} fittable={slots?.subsystem >= 1} rotation="-125deg" />
+      <Slot type="subsystem" index={2} fittable={slots?.subsystem >= 2} rotation="-114deg" />
+      <Slot type="subsystem" index={3} fittable={slots?.subsystem >= 3} rotation="-103deg" />
+      <Slot type="subsystem" index={4} fittable={slots?.subsystem >= 4} rotation="-92deg" />

-      <Slot type="rig" index={1} fittable={slots.rig >= 1} rotation="-73deg" />
-      <Slot type="rig" index={2} fittable={slots.rig >= 2} rotation="-63deg" />
-      <Slot type="rig" index={3} fittable={slots.rig >= 3} rotation="-53deg" />
+      <Slot type="rig" index={1} fittable={slots?.rig >= 1} rotation="-73deg" />
+      <Slot type="rig" index={2} fittable={slots?.rig >= 2} rotation="-63deg" />
+      <Slot type="rig" index={3} fittable={slots?.rig >= 3} rotation="-53deg" />

-      <Slot type="hislot" index={1} fittable={slots.hislot >= 1} rotation="-34deg" />
-      <Slot type="hislot" index={2} fittable={slots.hislot >= 2} rotation="-24deg" />
-      <Slot type="hislot" index={3} fittable={slots.hislot >= 3} rotation="-14deg" />
-      <Slot type="hislot" index={4} fittable={slots.hislot >= 4} rotation="-4deg" />
-      <Slot type="hislot" index={5} fittable={slots.hislot >= 5} rotation="6deg" />
-      <Slot type="hislot" index={6} fittable={slots.hislot >= 6} rotation="16deg" />
-      <Slot type="hislot" index={7} fittable={slots.hislot >= 7} rotation="26deg" />
-      <Slot type="hislot" index={8} fittable={slots.hislot >= 8} rotation="36deg" />
+      <Slot type="hislot" index={1} fittable={slots?.hislot >= 1} rotation="-34deg" />
+      <Slot type="hislot" index={2} fittable={slots?.hislot >= 2} rotation="-24deg" />
+      <Slot type="hislot" index={3} fittable={slots?.hislot >= 3} rotation="-14deg" />
+      <Slot type="hislot" index={4} fittable={slots?.hislot >= 4} rotation="-4deg" />
+      <Slot type="hislot" index={5} fittable={slots?.hislot >= 5} rotation="6deg" />
+      <Slot type="hislot" index={6} fittable={slots?.hislot >= 6} rotation="16deg" />
+      <Slot type="hislot" index={7} fittable={slots?.hislot >= 7} rotation="26deg" />
+      <Slot type="hislot" index={8} fittable={slots?.hislot >= 8} rotation="36deg" />

-      <Slot type="medslot" index={1} fittable={slots.medslot >= 1} rotation="55deg" />
-      <Slot type="medslot" index={2} fittable={slots.medslot >= 2} rotation="65deg" />
-      <Slot type="medslot" index={3} fittable={slots.medslot >= 3} rotation="75deg" />
-      <Slot type="medslot" index={4} fittable={slots.medslot >= 4} rotation="85deg" />
-      <Slot type="medslot" index={5} fittable={slots.medslot >= 5} rotation="95deg" />
-      <Slot type="medslot" index={6} fittable={slots.medslot >= 6} rotation="105deg" />
-      <Slot type="medslot" index={7} fittable={slots.medslot >= 7} rotation="115deg" />
-      <Slot type="medslot" index={8} fittable={slots.medslot >= 8} rotation="125deg" />
+      <Slot type="medslot" index={1} fittable={slots?.medslot >= 1} rotation="55deg" />
+      <Slot type="medslot" index={2} fittable={slots?.medslot >= 2} rotation="65deg" />
+      <Slot type="medslot" index={3} fittable={slots?.medslot >= 3} rotation="75deg" />
+      <Slot type="medslot" index={4} fittable={slots?.medslot >= 4} rotation="85deg" />
+      <Slot type="medslot" index={5} fittable={slots?.medslot >= 5} rotation="95deg" />
+      <Slot type="medslot" index={6} fittable={slots?.medslot >= 6} rotation="105deg" />
+      <Slot type="medslot" index={7} fittable={slots?.medslot >= 7} rotation="115deg" />
+      <Slot type="medslot" index={8} fittable={slots?.medslot >= 8} rotation="125deg" />

-      <Slot type="lowslot" index={1} fittable={slots.lowslot >= 1} rotation="144deg" />
-      <Slot type="lowslot" index={2} fittable={slots.lowslot >= 2} rotation="154deg" />
-      <Slot type="lowslot" index={3} fittable={slots.lowslot >= 3} rotation="164deg" />
-      <Slot type="lowslot" index={4} fittable={slots.lowslot >= 4} rotation="174deg" />
-      <Slot type="lowslot" index={5} fittable={slots.lowslot >= 5} rotation="184deg" />
-      <Slot type="lowslot" index={6} fittable={slots.lowslot >= 6} rotation="194deg" />
-      <Slot type="lowslot" index={7} fittable={slots.lowslot >= 7} rotation="204deg" />
-      <Slot type="lowslot" index={8} fittable={slots.lowslot >= 8} rotation="214deg" />
+      <Slot type="lowslot" index={1} fittable={slots?.lowslot >= 1} rotation="144deg" />
+      <Slot type="lowslot" index={2} fittable={slots?.lowslot >= 2} rotation="154deg" />
+      <Slot type="lowslot" index={3} fittable={slots?.lowslot >= 3} rotation="164deg" />
+      <Slot type="lowslot" index={4} fittable={slots?.lowslot >= 4} rotation="174deg" />
+      <Slot type="lowslot" index={5} fittable={slots?.lowslot >= 5} rotation="184deg" />
+      <Slot type="lowslot" index={6} fittable={slots?.lowslot >= 6} rotation="194deg" />
+      <Slot type="lowslot" index={7} fittable={slots?.lowslot >= 7} rotation="204deg" />
+      <Slot type="lowslot" index={8} fittable={slots?.lowslot >= 8} rotation="214deg" />
    </div>
  </div>
 };
--- a/src/ShipSnapshotProvider/ShipSnapshotProvider.tsx
+++ b/src/ShipSnapshotProvider/ShipSnapshotProvider.tsx
@@ -1,6 +1,7 @@
 import React from "react";

 import { DogmaEngineContext } from '../DogmaEngineProvider';
+import { EveDataContext } from "../EveDataProvider";

 export interface ShipSnapshotItemAttributeEffect {
  operator: string,
@@ -38,10 +39,21 @@ export interface EsiFit {
  }[];
 }

+interface ShipSnapshotSlots {
+  hislot: number;
+  medslot: number;
+  lowslot: number;
+  subsystem: number;
+  rig: number;
+};
+
+export type ShipSnapshotSlotsType = keyof ShipSnapshotSlots;
+
 interface ShipSnapshot {
  loaded?: boolean;
  hull?: ShipSnapshotItem;
  items?: ShipSnapshotItem[];
+  slots: ShipSnapshotSlots;

  fit?: EsiFit;

@@ -52,6 +64,13 @@ interface ShipSnapshot {

 export const ShipSnapshotContext = React.createContext<ShipSnapshot>({
  loaded: undefined,
+  slots: {
+    "hislot": 0,
+    "medslot": 0,
+    "lowslot": 0,
+    "subsystem": 0,
+    "rig": 0,
+  },
  changeHull: () => {},
  changeFit: () => {},
  setItemState: () => {},
@@ -70,8 +89,16 @@ export interface ShipSnapshotProps {
 * Calculates the current attrbitues and applied effects of a ship fit.
 */
 export const ShipSnapshotProvider = (props: ShipSnapshotProps) => {
+  const eveData = React.useContext(EveDataContext);
  const [shipSnapshot, setShipSnapshot] = React.useState<ShipSnapshot>({
    loaded: undefined,
+    slots: {
+      "hislot": 0,
+      "medslot": 0,
+      "lowslot": 0,
+      "subsystem": 0,
+      "rig": 0,
+    },
    changeHull: () => {},
    changeFit: () => {},
    setItemState: () => {},
@@ -80,10 +107,10 @@ export const ShipSnapshotProvider = (props: ShipSnapshotProps) => {
  const dogmaEngine = React.useContext(DogmaEngineContext);

  const setItemState = React.useCallback((flag: number, state: string) => {
-    if (!currentFit) return;
+    if (currentFit === undefined) return;

    setCurrentFit((oldFit: EsiFit | undefined) => {
-      if (!oldFit) return oldFit;
+      if (oldFit === undefined) return undefined;

      return {
        ...oldFit,
@@ -112,20 +139,42 @@ export const ShipSnapshotProvider = (props: ShipSnapshotProps) => {

  React.useEffect(() => {
    if (!dogmaEngine.loaded) return;
-    if (!currentFit || !props.skills) return;
+    if (currentFit === undefined || props.skills === undefined) return;

    const snapshot = dogmaEngine.engine?.calculate(currentFit, props.skills);

+    const slots = {
+      "hislot": 0,
+      "medslot": 0,
+      "lowslot": 0,
+      "subsystem": 0,
+      "rig": 0,
+    };
+
+    slots.hislot = snapshot.hull.attributes.get(eveData?.attributeMapping?.hiSlots || 0)?.value || 0;
+    slots.medslot = snapshot.hull.attributes.get(eveData?.attributeMapping?.medSlots || 0)?.value || 0;
+    slots.lowslot = snapshot.hull.attributes.get(eveData?.attributeMapping?.lowSlots || 0)?.value || 0;
+    slots.subsystem = snapshot.hull.attributes.get(eveData?.attributeMapping?.maxSubSystems || 0)?.value || 0;
+    slots.rig = snapshot.hull?.attributes.get(eveData?.attributeMapping?.rigSlots || 0)?.value || 0;
+
+    const items = snapshot.items;
+    for (const item of items) {
+      slots.hislot += item.attributes.get(eveData?.attributeMapping?.hiSlotModifier || 0)?.value || 0;
+      slots.medslot += item.attributes.get(eveData?.attributeMapping?.medSlotModifier || 0)?.value || 0;
+      slots.lowslot += item.attributes.get(eveData?.attributeMapping?.lowSlotModifier || 0)?.value || 0;
+    }
+
    setShipSnapshot({
      loaded: true,
      hull: snapshot.hull,
      items: snapshot.items,
+      slots,
      fit: currentFit,
      changeHull,
      changeFit: setCurrentFit,
      setItemState,
    });
-  }, [dogmaEngine, currentFit, props.skills, changeHull, setItemState]);
+  }, [eveData, dogmaEngine, currentFit, props.skills, changeHull, setItemState]);

  React.useEffect(() => {
    setCurrentFit(props.fit);
--- a/src/ShipSnapshotProvider/index.ts
+++ b/src/ShipSnapshotProvider/index.ts
@@ -1,2 +1,2 @@
 export { ShipSnapshotContext, ShipSnapshotProvider } from "./ShipSnapshotProvider";
-export type { EsiFit, ShipSnapshotItem, ShipSnapshotItemAttribute, ShipSnapshotItemAttributeEffect } from "./ShipSnapshotProvider";
+export type { EsiFit, ShipSnapshotItem, ShipSnapshotItemAttribute, ShipSnapshotItemAttributeEffect, ShipSnapshotSlotsType } from "./ShipSnapshotProvider";