diff --git a/client/Components/StatBlock.tsx b/client/Components/StatBlock.tsx index 3fe52d54..713570eb 100644 --- a/client/Components/StatBlock.tsx +++ b/client/Components/StatBlock.tsx @@ -19,201 +19,213 @@ export function StatBlockComponent(props: StatBlockProps) { const textEnricher = useContext(TextEnricherContext); const statBlock = props.statBlock; - const modifierTypes = [ - { name: "Saves", data: statBlock.Saves }, - { name: "Skills", data: statBlock.Skills } - ]; - - const keywordSetTypes = [ - { name: "Senses", data: statBlock.Senses }, - { name: "Damage Vulnerabilities", data: statBlock.DamageVulnerabilities }, - { name: "Damage Resistances", data: statBlock.DamageResistances }, - { name: "Damage Immunities", data: statBlock.DamageImmunities }, - { name: "Condition Immunities", data: statBlock.ConditionImmunities }, - { name: "Languages", data: statBlock.Languages } - ]; - - const powerTypes = [ - { name: "Traits", data: statBlock.Traits }, - { name: "Actions", data: statBlock.Actions }, - { name: "Bonus Actions", data: statBlock.BonusActions }, - { name: "Reactions", data: statBlock.Reactions }, - { name: "Legendary Actions", data: statBlock.LegendaryActions }, - { name: "Mythic Actions", data: statBlock.MythicActions } - ]; - - const headerEntries = ( - <> - {props.hideName || ( - - )} - -
- - ); - - const statEntries = ( - <> -
- Armor Class - {statBlock.AC.Value} - - {textEnricher.EnrichText(statBlock.AC.Notes)} - -
+ try { + const modifierTypes = [ + { name: "Saves", data: statBlock.Saves }, + { name: "Skills", data: statBlock.Skills } + ]; + + const keywordSetTypes = [ + { name: "Senses", data: statBlock.Senses }, + { name: "Damage Vulnerabilities", data: statBlock.DamageVulnerabilities }, + { name: "Damage Resistances", data: statBlock.DamageResistances }, + { name: "Damage Immunities", data: statBlock.DamageImmunities }, + { name: "Condition Immunities", data: statBlock.ConditionImmunities }, + { name: "Languages", data: statBlock.Languages } + ]; + + const powerTypes = [ + { name: "Traits", data: statBlock.Traits }, + { name: "Actions", data: statBlock.Actions }, + { name: "Bonus Actions", data: statBlock.BonusActions }, + { name: "Reactions", data: statBlock.Reactions }, + { name: "Legendary Actions", data: statBlock.LegendaryActions }, + { name: "Mythic Actions", data: statBlock.MythicActions } + ]; + + const headerEntries = ( + <> + {props.hideName || ( + + )} -
- Hit Points - {statBlock.HP.Value} - - {textEnricher.EnrichText(statBlock.HP.Notes)} - -
+
+ + ); -
- Speed - - {statBlock.Speed.map((speed, i) => ( - - {speed} - - ))} - -
+ const statEntries = ( + <> +
+ Armor Class + {statBlock.AC.Value} + + {textEnricher.EnrichText(statBlock.AC.Notes)} + +
+ +
+ Hit Points + {statBlock.HP.Value} + + {textEnricher.EnrichText(statBlock.HP.Notes)} + +
-
- {Object.keys(StatBlock.Default().Abilities).map(abilityName => { - const abilityScore = statBlock.Abilities[abilityName]; - const abilityModifier = - textEnricher.GetEnrichedModifierFromAbilityScore(abilityScore); - return ( -
-
{abilityName}
- {abilityScore} - - {abilityModifier} +
+ Speed + + {statBlock.Speed.map((speed, i) => ( + + {speed} -
- ); - })} -
+ ))} + +
-
- -
- {modifierTypes - .filter(modifierType => modifierType.data.length > 0) - .map(modifierType => ( -
- {modifierType.name} - {modifierType.data.map((modifier, i) => ( - - {modifier.Name} - {textEnricher.EnrichModifier(modifier.Modifier)}{" "} +
+ {Object.keys(StatBlock.Default().Abilities).map(abilityName => { + const abilityScore = statBlock.Abilities[abilityName]; + const abilityModifier = + textEnricher.GetEnrichedModifierFromAbilityScore(abilityScore); + return ( +
+
{abilityName}
+ {abilityScore} + + {abilityModifier} - ))} -
- ))} -
+
+ ); + })} +
-
- {keywordSetTypes - .filter(keywordSetType => keywordSetType.data.length > 0) - .map(keywordSetType => ( -
- {keywordSetType.name} - - - {keywordSetType.data.map((keyword, index) => { - return ( - - {keyword} - - ); - })} - - -
- ))} -
+
- {statBlock.Challenge && ( -
- - {statBlock.Player == "player" ? "Level" : "Challenge"} - - {statBlock.Challenge} +
+ {modifierTypes + .filter(modifierType => modifierType.data.length > 0) + .map(modifierType => ( +
+ {modifierType.name} + {modifierType.data.map((modifier, i) => ( + + {modifier.Name} + {textEnricher.EnrichModifier(modifier.Modifier)}{" "} + + ))} +
+ ))}
- )} - -
- - ); - - const actionEntries = powerTypes - .filter(powerType => powerType?.data?.length > 0) - .map(powerType => ( -
-

{powerType.name}

- {powerType.data.map((power, j) => ( -
- {power.Name?.length ? ( - {power.Name} - ) : null} - {power.Usage && {power.Usage}} - - {textEnricher.EnrichText(power.Content)} + +
+ {keywordSetTypes + .filter(keywordSetType => keywordSetType.data.length > 0) + .map(keywordSetType => ( +
+ {keywordSetType.name} + + + {keywordSetType.data.map((keyword, index) => { + return ( + + {keyword} + + ); + })} + + +
+ ))} +
+ + {statBlock.Challenge && ( +
+ + {statBlock.Player == "player" ? "Level" : "Challenge"} + {statBlock.Challenge}
- ))} + )} +
-
- )); + + ); + + const actionEntries = powerTypes + .filter(powerType => powerType?.data?.length > 0) + .map(powerType => ( +
+

{powerType.name}

+ {powerType.data.map((power, j) => ( +
+ {power.Name?.length ? ( + {power.Name} + ) : null} + {power.Usage && {power.Usage}} + + {textEnricher.EnrichText(power.Content)} + +
+ ))} +
+
+ )); - const description = statBlock.Description && ( -
- {textEnricher.EnrichText(statBlock.Description)} -
- ); + const description = statBlock.Description && ( +
+ {textEnricher.EnrichText(statBlock.Description)} +
+ ); - let innerEntries; + let innerEntries; - if (props.isLoading) { + if (props.isLoading) { + return ( +
+ {headerEntries} + +
+ ); + } + if (props.displayMode == "active") { + innerEntries = ( + <> + {actionEntries} + {statEntries} + + ); + } else { + innerEntries = ( + <> + {statEntries} + {actionEntries} + + ); + } return (
{headerEntries} - + {innerEntries} + {description}
); - } - if (props.displayMode == "active") { - innerEntries = ( - <> - {actionEntries} - {statEntries} - - ); - } else { - innerEntries = ( - <> - {statEntries} - {actionEntries} - + } catch (error) { + return ( +
+
+

There was a problem with this StatBlock:

+
{error.toString()}
+

Please open it in the StatBlock Editor to check your JSON

+
+
); } - return ( -
- {headerEntries} - {innerEntries} - {description} -
- ); } diff --git a/client/StatBlockEditor/StatBlockEditor.tsx b/client/StatBlockEditor/StatBlockEditor.tsx index 8882b020..829ec820 100644 --- a/client/StatBlockEditor/StatBlockEditor.tsx +++ b/client/StatBlockEditor/StatBlockEditor.tsx @@ -56,7 +56,7 @@ export class StatBlockEditor extends React.Component< public componentDidCatch(error, info) { this.setState({ editorMode: "json", - renderError: JSON.stringify(error) + renderError: error.toString() }); } @@ -74,9 +74,17 @@ export class StatBlockEditor extends React.Component< const buttons = ( <> -