diff --git a/src/ShipFitExtended/ShipFitExtended.module.css b/src/ShipFitExtended/ShipFitExtended.module.css index 125fa1b..fb958bf 100644 --- a/src/ShipFitExtended/ShipFitExtended.module.css +++ b/src/ShipFitExtended/ShipFitExtended.module.css @@ -7,6 +7,16 @@ width: 100%; } +.fitName { + top: 35px; + position: absolute; + left: 0px; +} + +.fitNameTitle { + font-weight: bold; +} + .cpuPg { bottom: 0px; position: absolute; diff --git a/src/ShipFitExtended/ShipFitExtended.tsx b/src/ShipFitExtended/ShipFitExtended.tsx index fe69688..53722ef 100644 --- a/src/ShipFitExtended/ShipFitExtended.tsx +++ b/src/ShipFitExtended/ShipFitExtended.tsx @@ -2,6 +2,7 @@ import React from "react"; import { ShipFit } from "../ShipFit"; import { ShipAttribute } from "../ShipAttribute"; +import { ShipSnapshotContext } from "../ShipSnapshotProvider"; import styles from "./ShipFitExtended.module.css"; @@ -50,6 +51,15 @@ const CpuPg = (props: { title: string, children: React.ReactNode }) => { } +const FitName = () => { + const shipSnapshot = React.useContext(ShipSnapshotContext); + + return <> +
Name
+
{shipSnapshot?.fit?.name}
+ +} + /** * Render a ship fit similar to how it is done in-game. * @@ -61,6 +71,10 @@ export const ShipFitExtended = () => { return
+
+ +
+