Make challenges display requirements

This commit is contained in:
thepaperpilot 2023-04-03 08:19:58 -05:00
parent 61bc53f954
commit 44a5b336d6
3 changed files with 14 additions and 12 deletions

View file

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

View file

@ -69,7 +69,7 @@ export interface ChallengeOptions {
title?: CoercableComponent; title?: CoercableComponent;
/** The main text that appears in the display. */ /** The main text that appears in the display. */
description: CoercableComponent; 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; goal?: CoercableComponent;
/** A description of what will change upon completing this challenge. */ /** A description of what will change upon completing this challenge. */
reward?: CoercableComponent; reward?: CoercableComponent;
@ -271,7 +271,8 @@ export function createChallenge<T extends ChallengeOptions>(
canStart, canStart,
mark, mark,
id, id,
toggle toggle,
requirements
} = this; } = this;
return { return {
active, active,
@ -285,7 +286,8 @@ export function createChallenge<T extends ChallengeOptions>(
canStart, canStart,
mark, mark,
id, id,
toggle toggle,
requirements
}; };
}; };

View file

@ -42,7 +42,7 @@ export type RepeatableDisplay =
title?: CoercableComponent; title?: CoercableComponent;
/** The main text that appears in the display. */ /** The main text that appears in the display. */
description?: CoercableComponent; 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; effectDisplay?: CoercableComponent;
/** Whether or not to show the current amount of this repeatable at the bottom of the display. */ /** Whether or not to show the current amount of this repeatable at the bottom of the display. */
showAmount?: boolean; showAmount?: boolean;