feat: recharge rates for defense in statistics panel (#15)

src/ShipStatistics/Category.tsx

@@ -1,3 +1,4 @@
+import ctlx from "clsx";
 import React from "react";
 
 import styles from "./ShipStatistics.module.css";
@@ -17,8 +18,8 @@ export const Category = (props: {headerLabel: string, headerContent: React.React
   </div>
 }
 
-export const CategoryLine = (props: {children: React.ReactNode}) => {
-  return <div className={styles.line}>
+export const CategoryLine = (props: {className?: string, children: React.ReactNode}) => {
+  return <div className={ctlx(styles.line, props.className )}>
     {props.children}
   </div>
 }

src/ShipStatistics/RechargeRate.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import { useShipAttribute } from '../ShipAttribute';
+
+import styles from "./ShipStatistics.module.css";
+import clsx from "clsx";
+
+export const RechargeRateItem = (props: {name: string, icon: React.ReactNode}) => {
+  const stringValue = useShipAttribute({
+    name: props.name,
+    fixed: 1,
+  });
+
+  if (stringValue == "0.0") {
+    return <span>
+        {props.icon} No Module
+    </span>
+  }
+
+  return <span>
+    {props.icon} {stringValue} hp/s
+  </span>
+}
+
+export const RechargeRate = () => {
+  const [moduleType, setModuleType] = React.useState("passiveShieldRecharge");
+  const [showDropdown, setShowDropdown] = React.useState(false);
+
+  return <span className={styles.rechargeRate}>
+    <div className={styles.rechargeRateDropdown} onClick={() => setShowDropdown((current) => !current)}>
+      ^
+    </div>
+    { showDropdown && <div className={styles.rechargeRateDropdownContent}>
+      <div onClick={() => { setModuleType("armorRepairRate"); setShowDropdown(false); }} className={clsx({[styles.rechargeRateDropdownContentSelected]: moduleType == "armorRepairRate"})}>Armor repair rate</div>
+      <div onClick={() => { setModuleType("hullRepairRate"); setShowDropdown(false); }} className={clsx({[styles.rechargeRateDropdownContentSelected]: moduleType == "hullRepairRate"})}>Hull repair rate</div>
+      <div onClick={() => { setModuleType("passiveShieldRecharge"); setShowDropdown(false); }} className={clsx({[styles.rechargeRateDropdownContentSelected]: moduleType == "passiveShieldRecharge"})}>Passive shield recharge</div>
+      <div onClick={() => { setModuleType("shieldBoostRate"); setShowDropdown(false); }} className={clsx({[styles.rechargeRateDropdownContentSelected]: moduleType == "shieldBoostRate"})}>Shield boost rate</div>
+    </div> }
+    <div onClick={() => setShowDropdown((current) => !current)}>
+      { moduleType == "armorRepairRate" && <RechargeRateItem name="armorRepairRate" icon={<>A</>} /> }
+      { moduleType == "hullRepairRate" && <RechargeRateItem name="hullRepairRate" icon={<>H</>} /> }
+      { moduleType == "passiveShieldRecharge" && <RechargeRateItem name="passiveShieldRecharge" icon={<>P</>} /> }
+      { moduleType == "shieldBoostRate" && <RechargeRateItem name="shieldBoostRate" icon={<>S</>} /> }
+    </div>
+  </span>
+}

src/ShipStatistics/ShipStatistics.module.css

@@ -26,22 +26,46 @@
     max-height: 0px;
 }
 .expanded {
-    max-height: 150px;
+    max-height: 180px;
 }
 
 
 .line {
     display: flex;
+    height: 20px;
     justify-content: space-between;
     line-height: 20px;
-    height: 20px;
     margin: 10px 0px;
 }
 .line > span {
     flex: 1;
     margin: 0px 5px;
 }
 
+.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:last-child {
+    line-height: 15px;
+}
+
+.resistanceHeader {
+    display: inline-block;
+    text-align: center;
+    width: 50px;
+}
+
 .resistance {
     background-color: #252124;
     display: inline-block;
@@ -79,3 +103,34 @@
     background-color: #8c5e19;
 }
 
+.rechargeRate {
+    position: relative;
+}
+
+.rechargeRateDropdown {
+    font-weight: bold;
+    position: absolute;
+    top: -10px;
+}
+
+.rechargeRateDropdownContent {
+    background-color: #111111;
+    line-height: 25px;
+    position: absolute;
+    top: 30px;
+    width: 150px;
+    z-index: 10;
+}
+
+.rechargeRateDropdownContent > div {
+    cursor: pointer;
+    padding: 0px 5px;
+}
+
+.rechargeRateDropdownContentSelected {
+    background-color: #727272;
+}
+
+.rechargeRateDropdownContent > div:hover {
+    background-color: #4e4e4e;
+}

src/ShipStatistics/ShipStatistics.tsx

@@ -3,8 +3,11 @@ import React from "react";
 import { ShipAttribute } from '../ShipAttribute';
 
 import { Category, CategoryLine } from "./Category";
+import { RechargeRate } from "./RechargeRate";
 import { Resistance } from "./Resistance";
 
+import styles from "./ShipStatistics.module.css";
+
 /**
  * Render ship statistics similar to how it is done in-game.
  */
@@ -42,12 +45,23 @@ export const ShipStatistics = () => {
       <span><ShipAttribute name="ehp" fixed={0} /> ehp</span>
     }>
       <CategoryLine>
-        No module
+        <RechargeRate />
+        <span style={{flex: 2}}>
+          <span className={styles.resistanceHeader}>E</span>
+          <span className={styles.resistanceHeader}>T</span>
+          <span className={styles.resistanceHeader}>K</span>
+          <span className={styles.resistanceHeader}>X</span>
+        </span>
       </CategoryLine>
-      <CategoryLine>
-        <span>
-          S
-          <ShipAttribute name="shieldCapacity" fixed={0} /> hp
+      <CategoryLine className={styles.defense}>
+        <span className={styles.defenseShield}>
+          <span>
+            S
+          </span>
+          <span>
+            <ShipAttribute name="shieldCapacity" fixed={0} /> hp<br/>
+            <ShipAttribute name="shieldRechargeRate" fixed={0} divideBy={1000} /> s<br/>
+          </span>
         </span>
         <span style={{flex: 2}}>
           <Resistance name="shieldEmDamageResonance" />
@@ -56,7 +70,7 @@ export const ShipStatistics = () => {
           <Resistance name="shieldExplosiveDamageResonance" />
         </span>
       </CategoryLine>
-      <CategoryLine>
+      <CategoryLine className={styles.defense}>
         <span>
           A
           <ShipAttribute name="armorHP" fixed={0} /> hp
@@ -68,7 +82,7 @@ export const ShipStatistics = () => {
           <Resistance name="armorExplosiveDamageResonance" />
         </span>
       </CategoryLine>
-      <CategoryLine>
+      <CategoryLine className={styles.defense}>
         <span>
           S
           <ShipAttribute name="hp" fixed={0} /> hp