New source found from dndbeyond.com

ddb_main/components/NumberDisplay/NumberDisplay.tsx

@@ -15,6 +15,7 @@ export interface NumberDisplayProps extends HTMLAttributes<HTMLSpanElement> {
   isModified?: boolean;
   size?: "large";
   numberFallback?: ReactNode;
+  useMph?: boolean;
 }
 
 export const NumberDisplay: FC<NumberDisplayProps> = ({
@@ -23,6 +24,7 @@ export const NumberDisplay: FC<NumberDisplayProps> = ({
   isModified = false,
   size,
   numberFallback = "--",
+  useMph,
   className,
   ...props
 }) => {
@@ -37,6 +39,9 @@ export const NumberDisplay: FC<NumberDisplayProps> = ({
       if (number && number % FEET_IN_MILES === 0) {
         number = number / FEET_IN_MILES;
         label = `mile${Math.abs(number) === 1 ? "" : "s"}`;
+        if (useMph) {
+          label = "mph";
+        }
       } else {
         label = "ft.";
       }

ddb_main/packages/rules-engine/es/engine/Extra/generators.js

@@ -124,7 +124,7 @@ export function generateVehicleMeta(vehicle, ruleData) {
     }
     let type = VehicleAccessors.getType(vehicle);
     let typeName = type === null ? '' : RuleDataUtils.getObjectTypeName(type, ruleData);
-    typeName = typeName ? typeName.toLowerCase() : '';
+    typeName = typeName || '';
     let primaryText = `${size} ${typeName}`.trim();
     let movementTypesText = VehicleAccessors.getMovementNames(vehicle).join(', ');
     metaText.push(`${primaryText}${movementTypesText ? ` (${movementTypesText})` : ''}`.trim());

ddb_main/packages/rules-engine/es/engine/Format/utils.js

@@ -109,12 +109,15 @@ export function stripTooltipTags(str, fallback = '') {
  * Formats the specified number as a distance with the appropriate unit
  * @param distance The distance measured in feet to format
  */
-export function renderDistance(distance) {
+export function renderDistance(distance, useMph) {
     let displayNumber = distance;
     let label = 'ft.';
     if (distance !== 0 && distance % FEET_IN_MILES === 0) {
         displayNumber = CoreUtils.convertFeetToMiles(distance);
         label = `mile${Math.abs(displayNumber) === 1 ? '' : 's'}`;
+        if (useMph) {
+            label = `mph`;
+        }
     }
     return `${displayNumber} ${label}`;
 }

ddb_main/packages/rules-engine/es/engine/Vehicle/constants.js

@@ -25,6 +25,7 @@ export var VehicleConfigurationDisplayTypeEnum;
     VehicleConfigurationDisplayTypeEnum["SHIP"] = "ship";
     VehicleConfigurationDisplayTypeEnum["INFERNAL_WAR_MACHINE"] = "infernal-war-machine";
     VehicleConfigurationDisplayTypeEnum["SPELLJAMMER"] = "spelljammer";
+    VehicleConfigurationDisplayTypeEnum["ELEMENTAL_AIRSHIP"] = "elemental-airship";
 })(VehicleConfigurationDisplayTypeEnum || (VehicleConfigurationDisplayTypeEnum = {}));
 export var VehicleConfigurationPrimaryComponentManageTypeEnum;
 (function (VehicleConfigurationPrimaryComponentManageTypeEnum) {

ddb_main/packages/rules-engine/es/engine/VehicleComponent/constants.js

@@ -2,7 +2,6 @@ export var ComponentAdjustmentEnum;
 (function (ComponentAdjustmentEnum) {
     ComponentAdjustmentEnum["HIT_POINT_SPEED_ADJUSTMENT"] = "speed";
 })(ComponentAdjustmentEnum || (ComponentAdjustmentEnum = {}));
-//TODO new for spelljammers
 export var ComponentCostTypeEnum;
 (function (ComponentCostTypeEnum) {
     ComponentCostTypeEnum["COMPONENT"] = "component";

ddb_main/packages/rules-engine/es/managers/VehicleComponentManager.js

@@ -3,7 +3,7 @@ import { ActionAccessors } from "../engine/Action";
 import { CharacterUtils } from "../engine/Character";
 import { HelperUtils } from "../engine/Helper";
 import { RuleDataAccessors } from "../engine/RuleData";
-import { VehicleConfigurationPrimaryComponentManageTypeEnum } from "../engine/Vehicle";
+import { VehicleConfigurationDisplayTypeEnum, VehicleConfigurationPrimaryComponentManageTypeEnum, } from "../engine/Vehicle";
 import { VehicleComponentAccessors } from "../engine/VehicleComponent";
 import { rulesEngineSelectors } from "../selectors";
 import { BaseManager } from './BaseManager';
@@ -133,7 +133,10 @@ export class VehicleComponentManager extends BaseManager {
     allowComponentProperty() {
         const primaryManageType = this.vehicle.getPrimaryComponentManageType();
         const isPrimaryComponent = this.getIsPrimary();
-        return !(primaryManageType === VehicleConfigurationPrimaryComponentManageTypeEnum.VEHICLE && isPrimaryComponent);
+        const isElementalAirship = this.vehicle.getDisplayType() === VehicleConfigurationDisplayTypeEnum.ELEMENTAL_AIRSHIP;
+        return !(primaryManageType === VehicleConfigurationPrimaryComponentManageTypeEnum.VEHICLE &&
+            isPrimaryComponent &&
+            !isElementalAirship);
     }
     generateVehicleComponentSpeedInfos() {
         const enableSpeeds = this.vehicle.getEnableComponentSpeeds();

ddb_main/packages/rules-engine/es/managers/VehicleManager.js

@@ -119,6 +119,7 @@ export class VehicleManager extends BaseManager {
         this.isSpelljammer = () => this.getDisplayType() === VehicleConfigurationDisplayTypeEnum.SPELLJAMMER;
         this.isInfernalWarMachine = () => this.getDisplayType() === VehicleConfigurationDisplayTypeEnum.INFERNAL_WAR_MACHINE;
         this.isShip = () => this.getDisplayType() === VehicleConfigurationDisplayTypeEnum.SHIP;
+        this.isElementalAirship = () => this.getDisplayType() === VehicleConfigurationDisplayTypeEnum.ELEMENTAL_AIRSHIP;
         // Utils
         this.generateVehicleMeta = () => {
             const ruleData = rulesEngineSelectors.getRuleData(this.state);

ddb_main/tools/js/Shared/components/ExtraRow/ExtraRow.tsx

@@ -7,6 +7,7 @@ import {
   Constants,
   Creature,
   ExtraManager,
+  VehicleManager,
 } from "@dndbeyond/character-rules-engine/es";
 
 import { NumberDisplay } from "~/components/NumberDisplay";
@@ -75,7 +76,7 @@ export const ExtraRow: FC<Props> = ({
       typeName = type;
     }
 
-    let description: string = `${size} ${typeName.toLowerCase()}`.trim();
+    let description: string = `${size} ${typeName}`.trim();
     if (description) {
       metaItems.push(description);
     }
@@ -164,12 +165,27 @@ export const ExtraRow: FC<Props> = ({
 
     const { data, label, showTooltip } = movementInfo;
 
+    let useMph = false;
+    const isVehicle = extra.isVehicle();
+    if (isVehicle) {
+      const vehicleData = extra.getExtraData() as VehicleManager;
+      const displayType = vehicleData?.getDisplayType();
+      const isElementalAirship =
+        displayType ===
+        Constants.VehicleConfigurationDisplayTypeEnum.ELEMENTAL_AIRSHIP;
+      useMph = isElementalAirship;
+    }
+
     let contentNode: React.ReactNode = null;
     if (data !== null) {
       contentNode = (
         <React.Fragment>
           <div className="ct-extra-row__speed-value">
-            <NumberDisplay type="distanceInFt" number={data.speed} />
+            <NumberDisplay
+              type="distanceInFt"
+              number={data.speed}
+              useMph={useMph}
+            />
             {showTooltip && renderAdditionalInfoTooltip()}
           </div>
           {data.movementId !== Constants.MovementTypeEnum.WALK && (

ddb_main/tools/js/Shared/components/VehicleBlock/VehicleBlockAttribute/VehicleBlockAttribute.tsx

@@ -4,6 +4,7 @@ interface Props {
   label: string;
   value: React.ReactNode;
   extraValue: React.ReactNode;
+  displayColon?: boolean;
 }
 export default class VehicleBlockAttribute extends React.PureComponent<Props> {
   static defaultProps = {
@@ -11,11 +12,15 @@ export default class VehicleBlockAttribute extends React.PureComponent<Props> {
   };
 
   render() {
-    const { label, value, extraValue } = this.props;
+    const { label, value, extraValue, displayColon } = this.props;
+
+    const labelDisplay: string = displayColon ? `${label}:` : label;
 
     return (
       <div className="ct-vehicle-block__attribute">
-        <span className="ct-vehicle-block__attribute-label">{label}</span>
+        <span className="ct-vehicle-block__attribute-label">
+          {labelDisplay}
+        </span>
         <span className="ct-vehicle-block__attribute-data">
           <span className="ct-vehicle-block__attribute-data-value">
             {value}

ddb_main/tools/js/Shared/components/VehicleBlock/VehicleBlockComponent/VehicleBlockComponent.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React from "react";
 
 import { ManageIcon } from "@dndbeyond/character-components/es";
@@ -42,6 +43,9 @@ export default class VehicleBlockComponent extends React.PureComponent<Props> {
     const nameLabel: string = name !== null ? name : "";
     const isSpelljammer =
       displayType === Constants.VehicleConfigurationDisplayTypeEnum.SPELLJAMMER;
+    const isElementalAirship =
+      displayType ===
+      Constants.VehicleConfigurationDisplayTypeEnum.ELEMENTAL_AIRSHIP;
 
     let componentCount: string = "";
     if (count > 1) {
@@ -56,8 +60,11 @@ export default class VehicleBlockComponent extends React.PureComponent<Props> {
         requiredCrew ? ` (${requiredCrew} Crew${count > 1 ? " Each" : ""})` : ""
       }`;
     } else {
-      let typesText = FormatUtils.renderNonOxfordCommaList(typeNames);
+      const typesNames = FormatUtils.renderNonOxfordCommaList(typeNames);
-      primaryText = `${typesText}: ${nameLabel} ${componentCount}`;
+      const typeText = `${typesNames}: `;
+      primaryText = `${
+        isElementalAirship ? "" : typeText
+      }${nameLabel} ${componentCount}`;
     }
 
     let callout: React.ReactNode = null;
@@ -79,8 +86,8 @@ export default class VehicleBlockComponent extends React.PureComponent<Props> {
 
     return (
       <div className="ct-vehicle-block-component__actions">
-        {actions.map((action) => (
+        {actions.map((action, idx) => (
-          <VehicleBlockAction action={action} key={action.key} />
+          <VehicleBlockAction action={action} key={idx + action.key} />
         ))}
       </div>
     );
@@ -127,7 +134,14 @@ export default class VehicleBlockComponent extends React.PureComponent<Props> {
     } = this.props;
 
     return (
-      <div className="ct-vehicle-block-component__attributes">
+      <div
+        className={clsx([
+          "ct-vehicle-block-component__attributes",
+          displayType ===
+            Constants.VehicleConfigurationDisplayTypeEnum.ELEMENTAL_AIRSHIP &&
+            "ct-vehicle-block-component__attributes--inline",
+        ])}
+      >
         <VehicleBlockPrimaryAttributes
           armorClassInfo={armorClassInfo}
           hitPointInfo={hitPointInfo}

ddb_main/tools/js/Shared/components/VehicleBlock/VehicleBlockComponents/VehicleBlockComponents.tsx

@@ -69,8 +69,11 @@ export default class VehicleBlockComponents extends React.PureComponent<Props> {
     components = components.filter(
       (component) =>
         !(
+          (component.displayType ===
+            Constants.VehicleConfigurationDisplayTypeEnum.SPELLJAMMER ||
             component.displayType ===
-            Constants.VehicleConfigurationDisplayTypeEnum.SPELLJAMMER &&
+              Constants.VehicleConfigurationDisplayTypeEnum
+                .ELEMENTAL_AIRSHIP) &&
           component.isPrimaryComponent
         )
     );

ddb_main/tools/js/Shared/components/VehicleBlock/VehicleBlockHeader/VehicleBlockHeader.tsx

@@ -15,7 +15,7 @@ export default class VehicleBlockHeader extends React.PureComponent<Props> {
     }
 
     let size: string = sizeName !== null ? sizeName : "";
-    let type: string = typeName !== null ? typeName.toLowerCase() : "";
+    let type: string = typeName !== null ? typeName : "";
 
     return [size, type].join(" ").trim();
   };
@@ -65,14 +65,18 @@ export default class VehicleBlockHeader extends React.PureComponent<Props> {
 
     const typeInfo = this.renderTypeInfo();
     const dimensions = this.renderDimensions();
+    const showMeta =
+      displayType !==
+        Constants.VehicleConfigurationDisplayTypeEnum.SPELLJAMMER &&
+      displayType !==
+        Constants.VehicleConfigurationDisplayTypeEnum.ELEMENTAL_AIRSHIP;
 
     return (
       <div className="ct-vehicle-block__header">
         <div className="ct-vehicle-block__name">
           {name !== null ? name : ""}
         </div>
-        {displayType !==
+        {showMeta && (
-          Constants.VehicleConfigurationDisplayTypeEnum.SPELLJAMMER && (
           <div className="ct-vehicle-block__meta">
             {typeInfo} {dimensions}
           </div>

ddb_main/tools/js/Shared/components/VehicleBlock/VehicleBlockPrimary/VehicleBlockPrimary.tsx

@@ -120,6 +120,7 @@ export default class VehicleBlockPrimary extends React.PureComponent<Props> {
       primaryProperties,
       shouldCoalesce,
       displayType,
+      creatureCapacityInfo,
     } = this.props;
 
     let cargoCapacity: Array<string> = [];
@@ -138,6 +139,11 @@ export default class VehicleBlockPrimary extends React.PureComponent<Props> {
 
     const isSpelljammer =
       displayType === Constants.VehicleConfigurationDisplayTypeEnum.SPELLJAMMER;
+    const isElementalAirship =
+      displayType ===
+      Constants.VehicleConfigurationDisplayTypeEnum.ELEMENTAL_AIRSHIP;
+
+    const showSeperator = !isSpelljammer && !isElementalAirship;
 
     return (
       <>
@@ -164,18 +170,32 @@ export default class VehicleBlockPrimary extends React.PureComponent<Props> {
               extraValue={this.renderEffectiveTravelDistance()}
             />
           )}
+          {!isElementalAirship ? (
             <VehicleBlockAttribute
               label={isSpelljammer ? "Crew" : "Creature Capacity"}
               value={creatureCapacityDescriptions.join(", ")}
             />
+          ) : (
+            creatureCapacityInfo.map((capacity, idx) => (
+              <VehicleBlockAttribute
+                key={capacity.type || "Capacity" + idx}
+                label={capacity.type || "Capacity"}
+                value={capacity.capacity}
+                displayColon={true}
+              />
+            ))
+          )}
           {cargoCapacity.length > 0 && (
             <VehicleBlockAttribute
-              label={isSpelljammer ? "Cargo" : "Cargo Capacity"}
+              label={
+                isSpelljammer || isElementalAirship ? "Cargo" : "Cargo Capacity"
+              }
               value={cargoCapacity.join(", ")}
+              displayColon={isElementalAirship}
             />
           )}
         </div>
-        {!isSpelljammer && <VehicleBlockSeparator displayType={displayType} />}
+        {showSeperator && <VehicleBlockSeparator displayType={displayType} />}
       </>
     );
   };

ddb_main/tools/js/Shared/components/VehicleBlock/VehicleBlockPrimaryAttributes/VehicleBlockPrimaryAttributes.tsx

@@ -110,16 +110,21 @@ export default class VehicleBlockPrimaryAttributes extends React.PureComponent<P
   };
 
   renderSpeedInfo = (
-    modes: Array<VehicleComponentSpeedModeInfo>
+    modes: Array<VehicleComponentSpeedModeInfo>,
+    displayType: Constants.VehicleConfigurationDisplayTypeEnum
   ): React.ReactNode => {
+    const isElementalAirship =
+      displayType ===
+      Constants.VehicleConfigurationDisplayTypeEnum.ELEMENTAL_AIRSHIP;
+
     let speedDisplayStrings: Array<string> = modes.map((mode) => {
       const { value, description, restrictionsText, movementInfo } = mode;
 
       let stringParts: Array<string> = [];
-      if (movementInfo) {
+      if (movementInfo && !isElementalAirship) {
         stringParts.push(`${movementInfo.description} speed`);
       }
-      stringParts.push(FormatUtils.renderDistance(value));
+      stringParts.push(FormatUtils.renderDistance(value, isElementalAirship));
       if (description) {
         stringParts.push(description);
       }
@@ -134,12 +139,16 @@ export default class VehicleBlockPrimaryAttributes extends React.PureComponent<P
   };
 
   renderArmorClassAttribute = (): React.ReactNode => {
-    const { armorClassInfo } = this.props;
+    const { armorClassInfo, displayType } = this.props;
 
     if (armorClassInfo === null) {
       return null;
     }
 
+    const isElementalAirship =
+      displayType ===
+      Constants.VehicleConfigurationDisplayTypeEnum.ELEMENTAL_AIRSHIP;
+
     const { moving, base, description } = armorClassInfo;
 
     let armorClassValue: number | null = base;
@@ -155,7 +164,7 @@ export default class VehicleBlockPrimaryAttributes extends React.PureComponent<P
 
     return (
       <VehicleBlockAttribute
-        label="Armor Class"
+        label={isElementalAirship ? "AC" : "Armor Class"}
         value={
           description
             ? `${armorClassValue} (${description})`
@@ -164,6 +173,7 @@ export default class VehicleBlockPrimaryAttributes extends React.PureComponent<P
             : armorClassValue
         }
         extraValue={motionlessArmorClassValue}
+        displayColon={isElementalAirship}
       />
     );
   };
@@ -206,7 +216,9 @@ export default class VehicleBlockPrimaryAttributes extends React.PureComponent<P
     );
 
     const costValues: Array<string> = sortedCosts.map((cost) => {
-      const value: string = cost.value ? `${cost.value} gp` : "--";
+      const value: string = cost.value
+        ? `${FormatUtils.renderLocaleNumber(cost.value)} GP`
+        : "--";
       const description: string = cost.description
         ? `(${cost.description})`
         : "";
@@ -216,23 +228,31 @@ export default class VehicleBlockPrimaryAttributes extends React.PureComponent<P
 
     const isSpelljammer =
       displayType === Constants.VehicleConfigurationDisplayTypeEnum.SPELLJAMMER;
+    const isElementalAirship =
+      displayType ===
+      Constants.VehicleConfigurationDisplayTypeEnum.ELEMENTAL_AIRSHIP;
 
     return (
       <React.Fragment>
         {armorClassInfo !== null && this.renderArmorClassAttribute()}
         {hitPointInfo !== null && (
           <VehicleBlockAttribute
-            label="Hit Points"
+            label={isElementalAirship ? "HP" : "Hit Points"}
             value={this.renderHitPointInfo()}
             extraValue={
-              !isSpelljammer ? this.renderHitPointThresholdInfo() : undefined
+              !isSpelljammer && !isElementalAirship
+                ? this.renderHitPointThresholdInfo()
+                : undefined
             }
+            displayColon={isElementalAirship}
           />
         )}
-        {isSpelljammer && !!hitPointInfo?.damageThreshold && (
+        {(isSpelljammer || isElementalAirship) &&
+          !!hitPointInfo?.damageThreshold && (
             <VehicleBlockAttribute
-            label="Damage Threshold"
+              label={"Damage Threshold"}
               value={hitPointInfo?.damageThreshold}
+              displayColon={isElementalAirship}
             />
           )}
         {speedInfos.map((speedInfo, idx) => {
@@ -248,7 +268,8 @@ export default class VehicleBlockPrimaryAttributes extends React.PureComponent<P
             <VehicleBlockAttribute
               key={`${speedInfo.type}-${idx}`}
               label={speedAttributeLabel}
-              value={this.renderSpeedInfo(modes)}
+              value={this.renderSpeedInfo(modes, displayType)}
+              displayColon={isElementalAirship}
             />
           );
         })}
@@ -258,7 +279,7 @@ export default class VehicleBlockPrimaryAttributes extends React.PureComponent<P
             value={`Grants ${coverType} Cover`}
           />
         )}
-        {requiredCrew !== null && !isSpelljammer && (
+        {requiredCrew !== null && !isSpelljammer && !isElementalAirship && (
           <VehicleBlockAttribute label="Required Crew" value={requiredCrew} />
         )}
         {isPrimaryComponent &&
@@ -273,7 +294,11 @@ export default class VehicleBlockPrimaryAttributes extends React.PureComponent<P
             />
           )}
         {costValues.length > 0 && (
-          <VehicleBlockAttribute label="Cost" value={costValues.join(", ")} />
+          <VehicleBlockAttribute
+            label="Cost"
+            value={costValues.join(", ")}
+            displayColon={isElementalAirship}
+          />
         )}
       </React.Fragment>
     );

ddb_main/tools/js/Shared/components/VehicleBlock/VehicleBlockSeparator/VehicleBlockSeparator.tsx

@@ -20,6 +20,8 @@ export default class VehicleBlockSeparator extends React.PureComponent<Props> {
         VehicleBlockSeparatorInfernal,
       [Constants.VehicleConfigurationDisplayTypeEnum.SPELLJAMMER]:
         VehicleBlockSeparatorShip,
+      [Constants.VehicleConfigurationDisplayTypeEnum.ELEMENTAL_AIRSHIP]:
+        VehicleBlockSeparatorShip,
     };
 
     //sets Ship style as default

ddb_main/tools/js/Shared/components/VehicleBlock/VehicleBlockShellCap/VehicleBlockShellCap.tsx

@@ -27,6 +27,8 @@ export default class VehicleBlockShellCap extends React.PureComponent<Props> {
         VehicleBlockShellCapInfernal,
       [Constants.VehicleConfigurationDisplayTypeEnum.SPELLJAMMER]:
         VehicleBlockShellCapShip,
+      [Constants.VehicleConfigurationDisplayTypeEnum.ELEMENTAL_AIRSHIP]:
+        VehicleBlockShellCapShip,
     };
 
     //sets Ship style as default

ddb_main/tools/js/Shared/containers/panes/VehiclePane/VehiclePane.tsx

@@ -385,7 +385,7 @@ class VehiclePane extends React.PureComponent<Props, State> {
       return null;
     }
 
-    if (!vehicle.isSpelljammer()) {
+    if (!vehicle.isSpelljammer() && !vehicle.isElementalAirship()) {
       const primaryComponent = vehicle.getPrimaryComponent();
       if (primaryComponent === null) {
         return null;
@@ -442,6 +442,7 @@ class VehiclePane extends React.PureComponent<Props, State> {
       }
       return (
         <VehicleHealthAdjuster
+          key={`${componentName}${componentNumber}`}
           hitPointInfo={componentHitPointInfo}
           onSave={(diff) => this.handleHealthAdjusterSave(diff, component)}
           heading={`Hit Points (${componentName}${componentNumber})`}
@@ -507,7 +508,8 @@ class VehiclePane extends React.PureComponent<Props, State> {
     const primaryComponentManageType = vehicle.getPrimaryComponentManageType();
     const enableConditionTracking = vehicle.getEnableConditionTracking();
     const enableFuelTracking = vehicle.getEnableFuelTracking();
-    const shouldCoalesce = vehicle.isSpelljammer();
+    const shouldCoalesce =
+      vehicle.isSpelljammer() || vehicle.isElementalAirship();
 
     return (
       <React.Fragment>
@@ -550,7 +552,6 @@ class VehiclePane extends React.PureComponent<Props, State> {
 
   renderVehicleName = (): React.ReactNode => {
     const { vehicle } = this.state;
-    const { theme } = this.props;
 
     if (!vehicle) {
       return null; //TODO could render a default empty state

ddb_main/tools/js/Shared/utils/Component/generators.ts

@@ -96,6 +96,7 @@ export function generateVehicleBlockPrimaryProps(
     cargoCapacityInfo: vehicle.getVehicleCargoCapacityInfo(),
     conditionImmunities: vehicle.generateVehicleConditionImmunityNames(),
     creatureCapacityDescriptions: vehicle.getCreatureCapacityDescriptions(),
+    creatureCapacityInfo: vehicle.getCreatureCapacity(),
     damageImmunities: vehicle.generateVehicleDamageImmunityNames(),
     displayType: vehicle.getDisplayType(),
     primaryProperties: deriveVehicleComponentPrimaryPropertiesProps(vehicle),