From 53346708f766b913f501556fa10386d24422b65a Mon Sep 17 00:00:00 2001
From: Patric Stout <github@truebrain.nl>
Date: Fri, 22 Dec 2023 13:45:25 +0100
Subject: [PATCH] feat: show name of fit next to the fit (#44)

---
 src/ShipFitExtended/ShipFitExtended.module.css | 10 ++++++++++
 src/ShipFitExtended/ShipFitExtended.tsx        | 14 ++++++++++++++
 2 files changed, 24 insertions(+)

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 <>
+    <div className={styles.fitNameTitle}>Name</div>
+    <div className={styles.fitNameContent}>{shipSnapshot?.fit?.name}</div>
+  </>
+}
+
 /**
  * Render a ship fit similar to how it is done in-game.
  *
@@ -61,6 +71,10 @@ export const ShipFitExtended = () => {
   return <div className={styles.fit}>
     <ShipFit />
 
+    <div className={styles.fitName}>
+      <FitName />
+    </div>
+
     <div className={styles.cargoHold}>
       <CargoHold />
       <DroneBay />