diff --git a/package.json b/package.json index 49af3dc..d09f7f9 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "author": "Patric Stout ", "license": "MIT", "dependencies": { - "@eveshipfit/dogma-engine": "^2.2.0", + "@eveshipfit/dogma-engine": "^2.2.1", "clsx": "^2.0.0" }, "devDependencies": { @@ -61,7 +61,7 @@ "typescript-plugin-css-modules": "^5.0.2" }, "peerDependencies": { - "@eveshipfit/dogma-engine": "^2.2.0", + "@eveshipfit/dogma-engine": "^2.2.1", "react": "^18.2.0" }, "main": "dist/cjs/index.js", diff --git a/src/EveDataProvider/EveDataProvider.tsx b/src/EveDataProvider/EveDataProvider.tsx index 4264b4a..e8d3a03 100644 --- a/src/EveDataProvider/EveDataProvider.tsx +++ b/src/EveDataProvider/EveDataProvider.tsx @@ -1,14 +1,13 @@ import React from "react"; import { DogmaAttribute, DogmaEffect, TypeDogma, TypeID } from "./DataTypes"; +import { defaultDataUrl } from "../settings"; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore // eslint-disable-next-line import/extensions import * as esf_pb2 from "./esf_pb2.js"; -const defaultDataUrl = "https://data.eveship.fit/20231115-0/"; - interface DogmaData { loaded?: boolean; typeIDs?: Record; @@ -59,7 +58,7 @@ function isLoaded(dogmaData: DogmaData): boolean | undefined { * ``` */ export const EveDataProvider = (props: DogmaDataProps) => { - const dataUrl = props.dataUrl ?? defaultDataUrl; + const dataUrl = props.dataUrl ?? `${defaultDataUrl}sde/`; const [dogmaData, setDogmaData] = React.useState({}); React.useEffect(() => { diff --git a/src/Icon/Icon.stories.tsx b/src/Icon/Icon.stories.tsx new file mode 100644 index 0000000..f8ea14f --- /dev/null +++ b/src/Icon/Icon.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Icon } from './'; + +const meta: Meta = { + component: Icon, + tags: ['autodocs'], + title: 'Component/Icon', +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + name: "em-resistance", + }, +}; diff --git a/src/Icon/Icon.tsx b/src/Icon/Icon.tsx new file mode 100644 index 0000000..58f4641 --- /dev/null +++ b/src/Icon/Icon.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +import { defaultDataUrl } from "../settings"; + +const iconMapping = { + "align-time": "texture/classes/fitting/statsicons/aligntime.png", + "armor-hp": "texture/classes/fitting/statsicons/armorhp.png", + "armor-repair-rate": "texture/classes/fitting/statsicons/armorrepairrate.png", + "em-resistance": "texture/classes/fitting/statsicons/emresistance.png", + "explosive-resistance": "texture/classes/fitting/statsicons/explosiveresistance.png", + "hull-hp": "texture/classes/fitting/statsicons/structurehp.png", + "hull-repair-rate": "texture/classes/fitting/statsicons/hullrepairrate.png", + "inertia-modifier": "texture/classes/fitting/statsicons/inertiamodifier.png", + "kinetic-resistance": "texture/classes/fitting/statsicons/kineticresistance.png", + "mass": "texture/classes/fitting/statsicons/mass.png", + "maximum-locked-targets": "texture/classes/fitting/statsicons/maximumlockedtargets.png", + "passive-shield-recharge": "texture/classes/fitting/statsicons/passiveshieldrecharge.png", + "scan-resolution": "texture/classes/fitting/statsicons/scanresolution.png", + "sensor-strength": "texture/classes/fitting/statsicons/sensorstrength.png", + "shield-boost-rate": "texture/classes/fitting/statsicons/shieldboostrate.png", + "shield-hp": "texture/classes/fitting/statsicons/shieldhp.png", + "signature-radius": "texture/classes/fitting/statsicons/signatureradius.png", + "thermal-resistance": "texture/classes/fitting/statsicons/thermalresistance.png", + "warp-speed": "texture/classes/fitting/statsicons/warpspeed.png", +} as const; + +export type IconName = keyof typeof iconMapping; + +export interface IconProps { + /** Name of the icon. */ + name: IconName; + /** Size (in pixels) of the icon. */ + size?: number; +} + +/** + * Render a single attribute of a ship's snapshot. + */ +export const Icon = (props: IconProps) => { + const icon = iconMapping[props.name]; + if (icon === undefined) { + return Unknown icon: {props.name}; + } + return +}; diff --git a/src/Icon/index.ts b/src/Icon/index.ts new file mode 100644 index 0000000..4fa7e57 --- /dev/null +++ b/src/Icon/index.ts @@ -0,0 +1 @@ +export { type IconName, Icon } from "./Icon"; diff --git a/src/ShipStatistics/RechargeRate.tsx b/src/ShipStatistics/RechargeRate.tsx index 65a6720..68aa03c 100644 --- a/src/ShipStatistics/RechargeRate.tsx +++ b/src/ShipStatistics/RechargeRate.tsx @@ -4,21 +4,32 @@ import { useShipAttribute } from '../ShipAttribute'; import styles from "./ShipStatistics.module.css"; import clsx from "clsx"; +import { IconName, Icon } from "../Icon"; -export const RechargeRateItem = (props: {name: string, icon: React.ReactNode}) => { +export const RechargeRateItem = (props: {name: string, icon: IconName}) => { const stringValue = useShipAttribute({ name: props.name, fixed: 1, }); if (stringValue == "0.0") { - return - {props.icon} No Module + return + + + + + No Module + } - return - {props.icon} {stringValue} hp/s + return + + + + + {stringValue} hp/s + } @@ -37,10 +48,10 @@ export const RechargeRate = () => {
{ setModuleType("shieldBoostRate"); setShowDropdown(false); }} className={clsx({[styles.rechargeRateDropdownContentSelected]: moduleType == "shieldBoostRate"})}>Shield boost rate
}
setShowDropdown((current) => !current)}> - { moduleType == "armorRepairRate" && A} /> } - { moduleType == "hullRepairRate" && H} /> } - { moduleType == "passiveShieldRecharge" && P} /> } - { moduleType == "shieldBoostRate" && S} /> } + { moduleType == "armorRepairRate" && } + { moduleType == "hullRepairRate" && } + { moduleType == "passiveShieldRecharge" && } + { moduleType == "shieldBoostRate" && }
} diff --git a/src/ShipStatistics/ShipStatistics.module.css b/src/ShipStatistics/ShipStatistics.module.css index 2783827..407bb28 100644 --- a/src/ShipStatistics/ShipStatistics.module.css +++ b/src/ShipStatistics/ShipStatistics.module.css @@ -42,27 +42,38 @@ margin: 0px 5px; } +.statistic { + display: flex; +} +.statistic > span:last-child { + line-height: 24px; + margin-left: 4px; +} + .defense { margin: 20px 0px; } .defense:last-child { margin-bottom: 10px; } + .defenseShield { - display: flex; position: relative; top: -5px; } .defenseShield > span:first-child { line-height: 30px; } +.defenseShield > span:first-child > img { + padding-top: 4px; +} .defenseShield > span:last-child { line-height: 15px; } .resistanceHeader { display: inline-block; - text-align: center; + margin-left: 5px; width: 50px; } diff --git a/src/ShipStatistics/ShipStatistics.tsx b/src/ShipStatistics/ShipStatistics.tsx index b4aee40..5b7fb01 100644 --- a/src/ShipStatistics/ShipStatistics.tsx +++ b/src/ShipStatistics/ShipStatistics.tsx @@ -1,3 +1,4 @@ +import clsx from "clsx"; import React from "react"; import { ShipAttribute } from '../ShipAttribute'; @@ -7,6 +8,7 @@ import { RechargeRate } from "./RechargeRate"; import { Resistance } from "./Resistance"; import styles from "./ShipStatistics.module.css"; +import { Icon } from "../Icon"; /** * Render ship statistics similar to how it is done in-game. @@ -47,16 +49,16 @@ export const ShipStatistics = () => { - E - T - K - X + + + + - + - S + hp
@@ -71,9 +73,13 @@ export const ShipStatistics = () => { - - A - hp + + + + + + hp + @@ -83,9 +89,13 @@ export const ShipStatistics = () => { - - S - hp + + + + + + hp + @@ -100,19 +110,39 @@ export const ShipStatistics = () => { km }> - - points + + + + + + points + - - mm + + + + + + mm + - - m + + + + + + m + - - x + + + + + + x + @@ -121,19 +151,39 @@ export const ShipStatistics = () => { m/s }> - - t + + + + + + t + - - x + + + + + + x + - - AU/s + + + + + + AU/s + - - s + + + + + + s + diff --git a/src/index.ts b/src/index.ts index daa3612..b8fd4be 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,7 @@ export * from './DogmaEngineProvider'; export * from './EveDataProvider'; export * from './FormatEftToEsi'; +export * from './Icon'; export * from './ShipAttribute'; export * from './ShipFit'; export * from './ShipFitExtended'; diff --git a/src/settings.ts b/src/settings.ts new file mode 100644 index 0000000..ff541bc --- /dev/null +++ b/src/settings.ts @@ -0,0 +1 @@ +export const defaultDataUrl = "https://data.eveship.fit/v1.1-20231115/";