diff --git a/src/features/challenges/Challenge.vue b/src/features/challenges/Challenge.vue index f64f203..194173c 100644 --- a/src/features/challenges/Challenge.vue +++ b/src/features/challenges/Challenge.vue @@ -38,6 +38,7 @@ import type { GenericChallenge } from "features/challenges/challenge"; import type { StyleValue } from "features/feature"; import { isHidden, isVisible, jsx, Visibility } from "features/feature"; import { getHighNotifyStyle, getNotifyStyle } from "game/notifications"; +import { displayRequirements, Requirements } from "game/requirements"; import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue"; import type { Component, PropType, UnwrapRef } from "vue"; import { computed, defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue"; @@ -61,6 +62,7 @@ export default defineComponent({ Object, Function ), + requirements: processedPropType(Object, Array), visibility: { type: processedPropType(Number, Boolean), required: true @@ -90,7 +92,7 @@ export default defineComponent({ Node }, setup(props) { - const { active, maxed, canComplete, display } = toRefs(props); + const { active, maxed, canComplete, display, requirements } = toRefs(props); const buttonText = computed(() => { if (active.value) { @@ -128,7 +130,7 @@ export default defineComponent({ } const Title = coerceComponent(currDisplay.title || "", "h3"); const Description = coerceComponent(currDisplay.description, "div"); - const Goal = coerceComponent(currDisplay.goal || ""); + const Goal = coerceComponent(currDisplay.goal != null ? currDisplay.goal : jsx(() => displayRequirements(unwrapRef(requirements) ?? [])), "h3"); const Reward = coerceComponent(currDisplay.reward || ""); const EffectDisplay = coerceComponent(currDisplay.effectDisplay || ""); comp.value = coerceComponent( @@ -140,12 +142,10 @@ export default defineComponent({ ) : null} - {currDisplay.goal != null ? ( -
-
- Goal: -
- ) : null} +
+
+ Goal: +
{currDisplay.reward != null ? (

diff --git a/src/features/challenges/challenge.tsx b/src/features/challenges/challenge.tsx index 3a1ba48..c1685db 100644 --- a/src/features/challenges/challenge.tsx +++ b/src/features/challenges/challenge.tsx @@ -69,7 +69,7 @@ export interface ChallengeOptions { title?: CoercableComponent; /** The main text that appears in the display. */ description: CoercableComponent; - /** A description of the current goal for this challenge. */ + /** A description of the current goal for this challenge. If unspecified then the requirements will be displayed automatically based on {@link requirements}. */ goal?: CoercableComponent; /** A description of what will change upon completing this challenge. */ reward?: CoercableComponent; @@ -271,7 +271,8 @@ export function createChallenge( canStart, mark, id, - toggle + toggle, + requirements } = this; return { active, @@ -285,7 +286,8 @@ export function createChallenge( canStart, mark, id, - toggle + toggle, + requirements }; }; diff --git a/src/features/repeatable.tsx b/src/features/repeatable.tsx index ec338eb..df5d0be 100644 --- a/src/features/repeatable.tsx +++ b/src/features/repeatable.tsx @@ -42,7 +42,7 @@ export type RepeatableDisplay = title?: CoercableComponent; /** The main text that appears in the display. */ description?: CoercableComponent; - /** A description of the current effect of this repeatable, bsed off its amount. */ + /** A description of the current effect of this repeatable, based off its amount. */ effectDisplay?: CoercableComponent; /** Whether or not to show the current amount of this repeatable at the bottom of the display. */ showAmount?: boolean;