Make challenges display requirements
This commit is contained in:
parent
61bc53f954
commit
44a5b336d6
3 changed files with 14 additions and 12 deletions
|
@ -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 />
|
||||||
|
|
|
@ -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
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue