add new sort option

src/Faction/ui/AugmentationsPage.tsx

@@ -10,6 +10,7 @@ import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
 import { Faction } from "../../Faction/Faction";
 import { PurchaseAugmentationsOrderSetting } from "../../Settings/SettingEnums";
 import { Settings } from "../../Settings/Settings";
+import { hasAugmentationPrereqs } from "../FactionHelpers";
 
 import { StdButton } from "../../ui/React/StdButton";
 import { use } from "../../ui/Context";
@@ -59,6 +60,9 @@ export function AugmentationsPage(props: IProps): React.ReactElement {
       case PurchaseAugmentationsOrderSetting.Reputation: {
         return getAugsSortedByReputation();
       }
+      case PurchaseAugmentationsOrderSetting.Purchasable: {
+        return getAugsSortedByPurchasable();
+      }
       default:
         return getAugsSortedByDefault();
     }
@@ -79,6 +83,41 @@ export function AugmentationsPage(props: IProps): React.ReactElement {
     return augs;
   }
 
+  function getAugsSortedByPurchasable(): string[] {
+    const augs = getAugs();
+    function canBuy(augName: string): boolean {
+      const aug = Augmentations[augName];
+      const moneyCost = aug.baseCost * props.faction.getInfo().augmentationPriceMult;
+      const repCost = aug.baseRepRequirement * props.faction.getInfo().augmentationRepRequirementMult;
+      const hasReq = props.faction.playerReputation >= repCost;
+      const hasRep = hasAugmentationPrereqs(aug);
+      const hasCost =
+        aug.baseCost !== 0 && player.money.gt(aug.baseCost * props.faction.getInfo().augmentationPriceMult);
+      return hasCost && hasReq && hasRep;
+    }
+    const buy = augs.filter(canBuy).sort((augName1, augName2) => {
+      const aug1 = Augmentations[augName1],
+        aug2 = Augmentations[augName2];
+      if (aug1 == null || aug2 == null) {
+        throw new Error("Invalid Augmentation Names");
+      }
+
+      return aug1.baseCost - aug2.baseCost;
+    });
+    const cantBuy = augs
+      .filter((aug) => !canBuy(aug))
+      .sort((augName1, augName2) => {
+        const aug1 = Augmentations[augName1],
+          aug2 = Augmentations[augName2];
+        if (aug1 == null || aug2 == null) {
+          throw new Error("Invalid Augmentation Names");
+        }
+        return aug1.baseRepRequirement - aug2.baseRepRequirement;
+      });
+
+    return buy.concat(cantBuy);
+  }
+
   function getAugsSortedByReputation(): string[] {
     const augs = getAugs();
     augs.sort((augName1, augName2) => {
@@ -148,6 +187,9 @@ export function AugmentationsPage(props: IProps): React.ReactElement {
       <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Cost)}>Sort by Cost</Button>
       <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Reputation)}>Sort by Reputation</Button>
       <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Default)}>Sort by Default Order</Button>
+      <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Purchasable)}>
+        Sort by Purchasable
+      </Button>
       <br />
 
       <Table size="small" padding="none">

src/Faction/ui/PurchaseableAugmentation.tsx

@@ -55,12 +55,14 @@ function Requirements(props: IReqProps): React.ReactElement {
   return (
     <React.Fragment key="f">
       <TableCell key={1}>
-        <Typography color={color}>
+        <Typography>
           <Money money={props.cost} player={props.p} />
         </Typography>
       </TableCell>
       <TableCell key={2}>
-        <Typography color={color}>Requires {Reputation(props.rep)} faction reputation</Typography>
+        <Typography color={props.hasRep ? "primary" : "error"}>
+          Requires {Reputation(props.rep)} faction reputation
+        </Typography>
       </TableCell>
     </React.Fragment>
   );
@@ -78,24 +80,6 @@ export function PurchaseableAugmentation(props: IProps): React.ReactElement {
   const aug = Augmentations[props.augName];
   if (aug == null) throw new Error(`aug ${props.augName} does not exists`);
 
-  function getMoneyCost(): number {
-    return aug.baseCost * props.faction.getInfo().augmentationPriceMult;
-  }
-
-  function getRepCost(): number {
-    return aug.baseRepRequirement * props.faction.getInfo().augmentationRepRequirementMult;
-  }
-
-  // Whether the player has the prerequisite Augmentations
-  function hasPrereqs(): boolean {
-    return hasAugmentationPrereqs(aug);
-  }
-
-  // Whether the player has enough rep for this Augmentation
-  function hasReputation(): boolean {
-    return props.faction.playerReputation >= getRepCost();
-  }
-
   // Whether the player has this augmentations (purchased OR installed)
   function owned(): boolean {
     let owned = false;
@@ -123,10 +107,10 @@ export function PurchaseableAugmentation(props: IProps): React.ReactElement {
     return <></>;
   }
 
-  const moneyCost = getMoneyCost();
-  const repCost = getRepCost();
-  const hasReq = hasPrereqs();
-  const hasRep = hasReputation();
+  const moneyCost = aug.baseCost * props.faction.getInfo().augmentationPriceMult;
+  const repCost = aug.baseRepRequirement * props.faction.getInfo().augmentationRepRequirementMult;
+  const hasReq = hasAugmentationPrereqs(aug);
+  const hasRep = props.faction.playerReputation >= repCost;
   const hasCost = aug.baseCost !== 0 && props.p.money.gt(aug.baseCost * props.faction.getInfo().augmentationPriceMult);
 
   // Determine UI properties

src/Settings/SettingEnums.ts

@@ -96,6 +96,7 @@ export enum PurchaseAugmentationsOrderSetting {
   Cost,
   Default,
   Reputation,
+  Purchasable,
 }
 
 /**