mirror of
https://github.com/thepaperpilot/Planar-Pioneers.git
synced 2024-11-25 01:41:44 +00:00
Merge milestones and achievements
Yay for removing a whole redundant feature!
This commit is contained in:
parent
742d2293d0
commit
7c7fb38dd8
5 changed files with 226 additions and 396 deletions
|
|
@ -1,10 +1,10 @@
|
|||
import Collapsible from "components/layout/Collapsible.vue";
|
||||
import { GenericAchievement } from "features/achievements/achievement";
|
||||
import type { Clickable, ClickableOptions, GenericClickable } from "features/clickables/clickable";
|
||||
import { createClickable } from "features/clickables/clickable";
|
||||
import type { GenericConversion } from "features/conversion";
|
||||
import type { CoercableComponent, JSXFunction, OptionsFunc, Replace } from "features/feature";
|
||||
import { jsx, setDefault } from "features/feature";
|
||||
import { GenericMilestone } from "features/milestones/milestone";
|
||||
import { displayResource, Resource } from "features/resources/resource";
|
||||
import type { GenericTree, GenericTreeNode, TreeNode, TreeNodeOptions } from "features/trees/tree";
|
||||
import { createTreeNode } from "features/trees/tree";
|
||||
|
|
@ -384,35 +384,35 @@ export function colorText(textToColor: string, color = "var(--accent2)"): JSX.El
|
|||
}
|
||||
|
||||
/**
|
||||
* Creates a collapsible display of a list of milestones
|
||||
* @param milestones A dictionary of the milestones to display, inserted in the order from easiest to hardest
|
||||
* Creates a collapsible display of a list of achievements
|
||||
* @param achievements A dictionary of the achievements to display, inserted in the order from easiest to hardest
|
||||
*/
|
||||
export function createCollapsibleMilestones(milestones: Record<string, GenericMilestone>) {
|
||||
// Milestones are typically defined from easiest to hardest, and we want to show hardest first
|
||||
const orderedMilestones = Object.values(milestones).reverse();
|
||||
const collapseMilestones = persistent<boolean>(true, false);
|
||||
const lockedMilestones = computed(() =>
|
||||
orderedMilestones.filter(m => m.earned.value === false)
|
||||
export function createCollapsibleAchievements(achievements: Record<string, GenericAchievement>) {
|
||||
// Achievements are typically defined from easiest to hardest, and we want to show hardest first
|
||||
const orderedAchievements = Object.values(achievements).reverse();
|
||||
const collapseAchievements = persistent<boolean>(true, false);
|
||||
const lockedAchievements = computed(() =>
|
||||
orderedAchievements.filter(m => m.earned.value === false)
|
||||
);
|
||||
const { firstFeature, collapsedContent, hasCollapsedContent } = getFirstFeature(
|
||||
orderedMilestones,
|
||||
orderedAchievements,
|
||||
m => m.earned.value
|
||||
);
|
||||
const display = jsx(() => {
|
||||
const milestonesToDisplay = [...lockedMilestones.value];
|
||||
const achievementsToDisplay = [...lockedAchievements.value];
|
||||
if (firstFeature.value) {
|
||||
milestonesToDisplay.push(firstFeature.value);
|
||||
achievementsToDisplay.push(firstFeature.value);
|
||||
}
|
||||
return renderColJSX(
|
||||
...milestonesToDisplay,
|
||||
...achievementsToDisplay,
|
||||
jsx(() => (
|
||||
<Collapsible
|
||||
collapsed={collapseMilestones}
|
||||
collapsed={collapseAchievements}
|
||||
content={collapsedContent}
|
||||
display={
|
||||
collapseMilestones.value
|
||||
? "Show other completed milestones"
|
||||
: "Hide other completed milestones"
|
||||
collapseAchievements.value
|
||||
? "Show other completed achievements"
|
||||
: "Hide other completed achievements"
|
||||
}
|
||||
v-show={unref(hasCollapsedContent)}
|
||||
/>
|
||||
|
|
@ -420,7 +420,7 @@ export function createCollapsibleMilestones(milestones: Record<string, GenericMi
|
|||
);
|
||||
});
|
||||
return {
|
||||
collapseMilestones,
|
||||
collapseAchievements: collapseAchievements,
|
||||
display
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,24 +13,27 @@
|
|||
achievement: true,
|
||||
locked: !unref(earned),
|
||||
bought: unref(earned),
|
||||
small: unref(small),
|
||||
...unref(classes)
|
||||
}"
|
||||
>
|
||||
<component v-if="component" :is="component" />
|
||||
<component v-if="comp" :is="comp" />
|
||||
<MarkNode :mark="unref(mark)" />
|
||||
<Node :id="id" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script lang="tsx">
|
||||
import "components/common/features.css";
|
||||
import MarkNode from "components/MarkNode.vue";
|
||||
import Node from "components/Node.vue";
|
||||
import type { CoercableComponent } from "features/feature";
|
||||
import { CoercableComponent, jsx } from "features/feature";
|
||||
import { Visibility, isHidden, isVisible } from "features/feature";
|
||||
import { computeOptionalComponent, processedPropType } from "util/vue";
|
||||
import type { StyleValue } from "vue";
|
||||
import { displayRequirements, Requirements } from "game/requirements";
|
||||
import { coerceComponent, computeOptionalComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue";
|
||||
import { Component, shallowRef, StyleValue, UnwrapRef, watchEffect } from "vue";
|
||||
import { defineComponent, toRefs, unref } from "vue";
|
||||
import { GenericAchievement } from "./achievement";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
|
|
@ -38,15 +41,17 @@ export default defineComponent({
|
|||
type: processedPropType<Visibility | boolean>(Number, Boolean),
|
||||
required: true
|
||||
},
|
||||
display: processedPropType<CoercableComponent>(Object, String, Function),
|
||||
display: processedPropType<UnwrapRef<GenericAchievement["display"]>>(Object, String, Function),
|
||||
earned: {
|
||||
type: processedPropType<boolean>(Boolean),
|
||||
required: true
|
||||
},
|
||||
requirements: processedPropType<Requirements>(Object, Array),
|
||||
image: processedPropType<string>(String),
|
||||
style: processedPropType<StyleValue>(String, Object, Array),
|
||||
classes: processedPropType<Record<string, boolean>>(Object),
|
||||
mark: processedPropType<boolean | string>(Boolean, String),
|
||||
small: processedPropType<boolean>(Boolean),
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
|
|
@ -57,10 +62,44 @@ export default defineComponent({
|
|||
MarkNode
|
||||
},
|
||||
setup(props) {
|
||||
const { display } = toRefs(props);
|
||||
const { display, requirements } = toRefs(props);
|
||||
|
||||
const comp = shallowRef<Component | string>("");
|
||||
|
||||
watchEffect(() => {
|
||||
const currDisplay = unwrapRef(display);
|
||||
if (currDisplay == null) {
|
||||
comp.value = "";
|
||||
return;
|
||||
}
|
||||
if (isCoercableComponent(currDisplay)) {
|
||||
comp.value = coerceComponent(currDisplay);
|
||||
return;
|
||||
}
|
||||
const Requirement = currDisplay.requirement ? coerceComponent(currDisplay.requirement, "h3") : displayRequirements(unwrapRef(requirements) ?? []);
|
||||
const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "", "b");
|
||||
const OptionsDisplay = coerceComponent(currDisplay.optionsDisplay || "", "span");
|
||||
comp.value = coerceComponent(
|
||||
jsx(() => (
|
||||
<span>
|
||||
<Requirement />
|
||||
{currDisplay.effectDisplay != null ? (
|
||||
<div>
|
||||
<EffectDisplay />
|
||||
</div>
|
||||
) : null}
|
||||
{currDisplay.optionsDisplay != null ? (
|
||||
<div class="equal-spaced">
|
||||
<OptionsDisplay />
|
||||
</div>
|
||||
) : null}
|
||||
</span>
|
||||
))
|
||||
);
|
||||
});
|
||||
|
||||
return {
|
||||
component: computeOptionalComponent(display),
|
||||
comp,
|
||||
unref,
|
||||
Visibility,
|
||||
isVisible,
|
||||
|
|
@ -78,4 +117,31 @@ export default defineComponent({
|
|||
color: white;
|
||||
text-shadow: 0 0 2px #000000;
|
||||
}
|
||||
|
||||
.achievement:not(.small) {
|
||||
width: calc(100% - 10px);
|
||||
min-width: 120px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
background-color: var(--locked);
|
||||
border-width: 4px;
|
||||
border-radius: 5px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-size: unset;
|
||||
text-shadow: unset;
|
||||
}
|
||||
|
||||
.achievement.done {
|
||||
background-color: var(--bought);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.achievement :deep(.equal-spaced) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.achievement :deep(.equal-spaced > *) {
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { computed } from "@vue/reactivity";
|
||||
import { isArray } from "@vue/shared";
|
||||
import Select from "components/fields/Select.vue";
|
||||
import AchievementComponent from "features/achievements/Achievement.vue";
|
||||
import {
|
||||
CoercableComponent,
|
||||
|
|
@ -6,12 +8,14 @@ import {
|
|||
GatherProps,
|
||||
GenericComponent,
|
||||
getUniqueID,
|
||||
jsx,
|
||||
OptionsFunc,
|
||||
Replace,
|
||||
setDefault,
|
||||
StyleValue,
|
||||
Visibility
|
||||
} from "features/feature";
|
||||
import { globalBus } from "game/events";
|
||||
import "game/notifications";
|
||||
import type { Persistent } from "game/persistence";
|
||||
import { persistent } from "game/persistence";
|
||||
|
|
@ -19,10 +23,12 @@ import player from "game/player";
|
|||
import {
|
||||
createBooleanRequirement,
|
||||
createVisibilityRequirement,
|
||||
displayRequirements,
|
||||
Requirements,
|
||||
requirementsMet
|
||||
} from "game/requirements";
|
||||
import settings from "game/settings";
|
||||
import settings, { registerSettingField } from "game/settings";
|
||||
import { camelToTitle } from "util/common";
|
||||
import type {
|
||||
Computable,
|
||||
GetComputableType,
|
||||
|
|
@ -31,7 +37,7 @@ import type {
|
|||
} from "util/computed";
|
||||
import { processComputable } from "util/computed";
|
||||
import { createLazyProxy } from "util/proxies";
|
||||
import { coerceComponent } from "util/vue";
|
||||
import { coerceComponent, isCoercableComponent } from "util/vue";
|
||||
import { unref, watchEffect } from "vue";
|
||||
import { useToast } from "vue-toastification";
|
||||
|
||||
|
|
@ -40,6 +46,15 @@ const toast = useToast();
|
|||
/** A symbol used to identify {@link Achievement} features. */
|
||||
export const AchievementType = Symbol("Achievement");
|
||||
|
||||
/** Modes for only displaying some achievements. */
|
||||
export enum AchievementDisplay {
|
||||
All = "all",
|
||||
//Last = "last",
|
||||
Configurable = "configurable",
|
||||
Incomplete = "incomplete",
|
||||
None = "none"
|
||||
}
|
||||
|
||||
/**
|
||||
* An object that configures an {@link Achievement}.
|
||||
*/
|
||||
|
|
@ -49,15 +64,29 @@ export interface AchievementOptions {
|
|||
/** The requirement(s) to earn this achievement. Can be left null if using {@link BaseAchievement.complete}. */
|
||||
requirements?: Requirements;
|
||||
/** The display to use for this achievement. */
|
||||
display?: Computable<CoercableComponent>;
|
||||
display?: Computable<
|
||||
| CoercableComponent
|
||||
| {
|
||||
/** Description of the requirement(s) for this achievement. If unspecified then the requirements will be displayed automatically based on {@link requirements}. */
|
||||
requirement?: CoercableComponent;
|
||||
/** Description of what will change (if anything) for achieving this. */
|
||||
effectDisplay?: CoercableComponent;
|
||||
/** Any additional things to display on this achievement, such as a toggle for it's effect. */
|
||||
optionsDisplay?: CoercableComponent;
|
||||
}
|
||||
>;
|
||||
/** Shows a marker on the corner of the feature. */
|
||||
mark?: Computable<boolean | string>;
|
||||
/** Toggles a smaller design for the feature. */
|
||||
small?: Computable<boolean>;
|
||||
/** An image to display as the background for this achievement. */
|
||||
image?: Computable<string>;
|
||||
/** CSS to apply to this feature. */
|
||||
style?: Computable<StyleValue>;
|
||||
/** Dictionary of CSS classes to apply to this feature. */
|
||||
classes?: Computable<Record<string, boolean>>;
|
||||
/** Whether or not to display a notification popup when this achievement is earned. */
|
||||
showPopups?: Computable<boolean>;
|
||||
/** A function that is called when the achievement is completed. */
|
||||
onComplete?: VoidFunction;
|
||||
}
|
||||
|
|
@ -90,6 +119,7 @@ export type Achievement<T extends AchievementOptions> = Replace<
|
|||
image: GetComputableType<T["image"]>;
|
||||
style: GetComputableType<T["style"]>;
|
||||
classes: GetComputableType<T["classes"]>;
|
||||
showPopups: GetComputableTypeWithDefault<T["showPopups"], true>;
|
||||
}
|
||||
>;
|
||||
|
||||
|
|
@ -98,6 +128,7 @@ export type GenericAchievement = Replace<
|
|||
Achievement<AchievementOptions>,
|
||||
{
|
||||
visibility: ProcessedComputable<Visibility | boolean>;
|
||||
showPopups: ProcessedComputable<boolean>;
|
||||
}
|
||||
>;
|
||||
|
||||
|
|
@ -120,8 +151,19 @@ export function createAchievement<T extends AchievementOptions>(
|
|||
earned.value = true;
|
||||
const genericAchievement = achievement as GenericAchievement;
|
||||
genericAchievement.onComplete?.();
|
||||
if (genericAchievement.display != null) {
|
||||
const Display = coerceComponent(unref(genericAchievement.display));
|
||||
if (
|
||||
genericAchievement.display != null &&
|
||||
unref(genericAchievement.showPopups) === true
|
||||
) {
|
||||
const display = unref(genericAchievement.display);
|
||||
let Display;
|
||||
if (isCoercableComponent(display)) {
|
||||
Display = coerceComponent(display);
|
||||
} else if (display.requirement != null) {
|
||||
Display = coerceComponent(display.requirement);
|
||||
} else {
|
||||
Display = displayRequirements(genericAchievement.requirements ?? []);
|
||||
}
|
||||
toast.info(
|
||||
<div>
|
||||
<h3>Achievement earned!</h3>
|
||||
|
|
@ -137,15 +179,69 @@ export function createAchievement<T extends AchievementOptions>(
|
|||
|
||||
processComputable(achievement as T, "visibility");
|
||||
setDefault(achievement, "visibility", Visibility.Visible);
|
||||
const visibility = achievement.visibility as ProcessedComputable<Visibility | boolean>;
|
||||
achievement.visibility = computed(() => {
|
||||
const display = unref((achievement as GenericAchievement).display);
|
||||
switch (settings.msDisplay) {
|
||||
default:
|
||||
case AchievementDisplay.All:
|
||||
return unref(visibility);
|
||||
case AchievementDisplay.Configurable:
|
||||
if (
|
||||
unref(achievement.earned) &&
|
||||
!(
|
||||
display != null &&
|
||||
typeof display == "object" &&
|
||||
"optionsDisplay" in (display as Record<string, unknown>)
|
||||
)
|
||||
) {
|
||||
return Visibility.None;
|
||||
}
|
||||
return unref(visibility);
|
||||
case AchievementDisplay.Incomplete:
|
||||
if (unref(achievement.earned)) {
|
||||
return Visibility.None;
|
||||
}
|
||||
return unref(visibility);
|
||||
case AchievementDisplay.None:
|
||||
return Visibility.None;
|
||||
}
|
||||
});
|
||||
|
||||
processComputable(achievement as T, "display");
|
||||
processComputable(achievement as T, "mark");
|
||||
processComputable(achievement as T, "small");
|
||||
processComputable(achievement as T, "image");
|
||||
processComputable(achievement as T, "style");
|
||||
processComputable(achievement as T, "classes");
|
||||
processComputable(achievement as T, "showPopups");
|
||||
setDefault(achievement, "showPopups", true);
|
||||
|
||||
achievement[GatherProps] = function (this: GenericAchievement) {
|
||||
const { visibility, display, earned, image, style, classes, mark, id } = this;
|
||||
return { visibility, display, earned, image, style: unref(style), classes, mark, id };
|
||||
const {
|
||||
visibility,
|
||||
display,
|
||||
requirements,
|
||||
earned,
|
||||
image,
|
||||
style,
|
||||
classes,
|
||||
mark,
|
||||
small,
|
||||
id
|
||||
} = this;
|
||||
return {
|
||||
visibility,
|
||||
display,
|
||||
requirements,
|
||||
earned,
|
||||
image,
|
||||
style: unref(style),
|
||||
classes,
|
||||
mark,
|
||||
small,
|
||||
id
|
||||
};
|
||||
};
|
||||
|
||||
if (achievement.requirements) {
|
||||
|
|
@ -168,3 +264,34 @@ export function createAchievement<T extends AchievementOptions>(
|
|||
return achievement as unknown as Achievement<T>;
|
||||
});
|
||||
}
|
||||
|
||||
declare module "game/settings" {
|
||||
interface Settings {
|
||||
msDisplay: AchievementDisplay;
|
||||
}
|
||||
}
|
||||
|
||||
globalBus.on("loadSettings", settings => {
|
||||
setDefault(settings, "msDisplay", AchievementDisplay.All);
|
||||
});
|
||||
|
||||
const msDisplayOptions = Object.values(AchievementDisplay).map(option => ({
|
||||
label: camelToTitle(option),
|
||||
value: option
|
||||
}));
|
||||
|
||||
registerSettingField(
|
||||
jsx(() => (
|
||||
<Select
|
||||
title={jsx(() => (
|
||||
<span class="option-title">
|
||||
Show achievements
|
||||
<desc>Select which achievements to display based on criterias.</desc>
|
||||
</span>
|
||||
))}
|
||||
options={msDisplayOptions}
|
||||
onUpdate:modelValue={value => (settings.msDisplay = value as AchievementDisplay)}
|
||||
modelValue={settings.msDisplay}
|
||||
/>
|
||||
))
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,128 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="isVisible(visibility)"
|
||||
:style="[
|
||||
{
|
||||
visibility: isHidden(visibility) ? 'hidden' : undefined
|
||||
},
|
||||
unref(style) ?? {}
|
||||
]"
|
||||
:class="{ feature: true, milestone: true, done: unref(earned), ...unref(classes) }"
|
||||
>
|
||||
<component :is="unref(comp)" />
|
||||
<Node :id="id" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="tsx">
|
||||
import "components/common/features.css";
|
||||
import Node from "components/Node.vue";
|
||||
import type { StyleValue } from "features/feature";
|
||||
import { isHidden, isVisible, jsx, Visibility } from "features/feature";
|
||||
import type { GenericMilestone } from "features/milestones/milestone";
|
||||
import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue";
|
||||
import type { Component, UnwrapRef } from "vue";
|
||||
import { defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
visibility: {
|
||||
type: processedPropType<Visibility | boolean>(Number, Boolean),
|
||||
required: true
|
||||
},
|
||||
display: {
|
||||
type: processedPropType<UnwrapRef<GenericMilestone["display"]>>(
|
||||
String,
|
||||
Object,
|
||||
Function
|
||||
),
|
||||
required: true
|
||||
},
|
||||
style: processedPropType<StyleValue>(String, Object, Array),
|
||||
classes: processedPropType<Record<string, boolean>>(Object),
|
||||
earned: {
|
||||
type: processedPropType<boolean>(Boolean),
|
||||
required: true
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Node
|
||||
},
|
||||
setup(props) {
|
||||
const { display } = toRefs(props);
|
||||
|
||||
const comp = shallowRef<Component | string>("");
|
||||
|
||||
watchEffect(() => {
|
||||
const currDisplay = unwrapRef(display);
|
||||
if (currDisplay == null) {
|
||||
comp.value = "";
|
||||
return;
|
||||
}
|
||||
if (isCoercableComponent(currDisplay)) {
|
||||
comp.value = coerceComponent(currDisplay);
|
||||
return;
|
||||
}
|
||||
const Requirement = coerceComponent(currDisplay.requirement, "h3");
|
||||
const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "", "b");
|
||||
const OptionsDisplay = coerceComponent(currDisplay.optionsDisplay || "", "span");
|
||||
comp.value = coerceComponent(
|
||||
jsx(() => (
|
||||
<span>
|
||||
<Requirement />
|
||||
{currDisplay.effectDisplay != null ? (
|
||||
<div>
|
||||
<EffectDisplay />
|
||||
</div>
|
||||
) : null}
|
||||
{currDisplay.optionsDisplay != null ? (
|
||||
<div class="equal-spaced">
|
||||
<OptionsDisplay />
|
||||
</div>
|
||||
) : null}
|
||||
</span>
|
||||
))
|
||||
);
|
||||
});
|
||||
|
||||
return {
|
||||
comp,
|
||||
unref,
|
||||
Visibility,
|
||||
isVisible,
|
||||
isHidden
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.milestone {
|
||||
width: calc(100% - 10px);
|
||||
min-width: 120px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
background-color: var(--locked);
|
||||
border-width: 4px;
|
||||
border-radius: 5px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.milestone.done {
|
||||
background-color: var(--bought);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.milestone :deep(.equal-spaced) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.milestone :deep(.equal-spaced > *) {
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
import Select from "components/fields/Select.vue";
|
||||
import type {
|
||||
CoercableComponent,
|
||||
GenericComponent,
|
||||
OptionsFunc,
|
||||
Replace,
|
||||
StyleValue
|
||||
} from "features/feature";
|
||||
import {
|
||||
Component,
|
||||
GatherProps,
|
||||
getUniqueID,
|
||||
isVisible,
|
||||
jsx,
|
||||
setDefault,
|
||||
Visibility
|
||||
} from "features/feature";
|
||||
import MilestoneComponent from "features/milestones/Milestone.vue";
|
||||
import { globalBus } from "game/events";
|
||||
import "game/notifications";
|
||||
import type { Persistent } from "game/persistence";
|
||||
import { persistent } from "game/persistence";
|
||||
import player from "game/player";
|
||||
import settings, { registerSettingField } from "game/settings";
|
||||
import { camelToTitle } from "util/common";
|
||||
import type {
|
||||
Computable,
|
||||
GetComputableType,
|
||||
GetComputableTypeWithDefault,
|
||||
ProcessedComputable
|
||||
} from "util/computed";
|
||||
import { processComputable } from "util/computed";
|
||||
import { createLazyProxy } from "util/proxies";
|
||||
import { coerceComponent, isCoercableComponent } from "util/vue";
|
||||
import { computed, unref, watchEffect } from "vue";
|
||||
import { useToast } from "vue-toastification";
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
export const MilestoneType = Symbol("Milestone");
|
||||
|
||||
export enum MilestoneDisplay {
|
||||
All = "all",
|
||||
//Last = "last",
|
||||
Configurable = "configurable",
|
||||
Incomplete = "incomplete",
|
||||
None = "none"
|
||||
}
|
||||
|
||||
export interface MilestoneOptions {
|
||||
visibility?: Computable<Visibility | boolean>;
|
||||
shouldEarn?: () => boolean;
|
||||
style?: Computable<StyleValue>;
|
||||
classes?: Computable<Record<string, boolean>>;
|
||||
display?: Computable<
|
||||
| CoercableComponent
|
||||
| {
|
||||
requirement: CoercableComponent;
|
||||
effectDisplay?: CoercableComponent;
|
||||
optionsDisplay?: CoercableComponent;
|
||||
}
|
||||
>;
|
||||
showPopups?: Computable<boolean>;
|
||||
onComplete?: VoidFunction;
|
||||
}
|
||||
|
||||
export interface BaseMilestone {
|
||||
id: string;
|
||||
earned: Persistent<boolean>;
|
||||
complete: VoidFunction;
|
||||
type: typeof MilestoneType;
|
||||
[Component]: GenericComponent;
|
||||
[GatherProps]: () => Record<string, unknown>;
|
||||
}
|
||||
|
||||
export type Milestone<T extends MilestoneOptions> = Replace<
|
||||
T & BaseMilestone,
|
||||
{
|
||||
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
|
||||
style: GetComputableType<T["style"]>;
|
||||
classes: GetComputableType<T["classes"]>;
|
||||
display: GetComputableType<T["display"]>;
|
||||
showPopups: GetComputableType<T["showPopups"]>;
|
||||
}
|
||||
>;
|
||||
|
||||
export type GenericMilestone = Replace<
|
||||
Milestone<MilestoneOptions>,
|
||||
{
|
||||
visibility: ProcessedComputable<Visibility | boolean>;
|
||||
}
|
||||
>;
|
||||
|
||||
export function createMilestone<T extends MilestoneOptions>(
|
||||
optionsFunc?: OptionsFunc<T, BaseMilestone, GenericMilestone>
|
||||
): Milestone<T> {
|
||||
const earned = persistent<boolean>(false, false);
|
||||
return createLazyProxy(() => {
|
||||
const milestone = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
|
||||
milestone.id = getUniqueID("milestone-");
|
||||
milestone.type = MilestoneType;
|
||||
milestone[Component] = MilestoneComponent as GenericComponent;
|
||||
|
||||
milestone.earned = earned;
|
||||
milestone.complete = function () {
|
||||
const genericMilestone = milestone as GenericMilestone;
|
||||
earned.value = true;
|
||||
genericMilestone.onComplete?.();
|
||||
if (genericMilestone.display != null && unref(genericMilestone.showPopups) === true) {
|
||||
const display = unref(genericMilestone.display);
|
||||
const Display = coerceComponent(
|
||||
isCoercableComponent(display) ? display : display.requirement
|
||||
);
|
||||
toast(
|
||||
<>
|
||||
<h3>Milestone earned!</h3>
|
||||
<div>
|
||||
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
|
||||
{/* @ts-ignore */}
|
||||
<Display />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
processComputable(milestone as T, "visibility");
|
||||
setDefault(milestone, "visibility", Visibility.Visible);
|
||||
const visibility = milestone.visibility as ProcessedComputable<Visibility | boolean>;
|
||||
milestone.visibility = computed(() => {
|
||||
const display = unref((milestone as GenericMilestone).display);
|
||||
switch (settings.msDisplay) {
|
||||
default:
|
||||
case MilestoneDisplay.All:
|
||||
return unref(visibility);
|
||||
case MilestoneDisplay.Configurable:
|
||||
if (
|
||||
unref(milestone.earned) &&
|
||||
!(
|
||||
display != null &&
|
||||
typeof display == "object" &&
|
||||
"optionsDisplay" in (display as Record<string, unknown>)
|
||||
)
|
||||
) {
|
||||
return Visibility.None;
|
||||
}
|
||||
return unref(visibility);
|
||||
case MilestoneDisplay.Incomplete:
|
||||
if (unref(milestone.earned)) {
|
||||
return Visibility.None;
|
||||
}
|
||||
return unref(visibility);
|
||||
case MilestoneDisplay.None:
|
||||
return Visibility.None;
|
||||
}
|
||||
});
|
||||
|
||||
processComputable(milestone as T, "style");
|
||||
processComputable(milestone as T, "classes");
|
||||
processComputable(milestone as T, "display");
|
||||
processComputable(milestone as T, "showPopups");
|
||||
|
||||
milestone[GatherProps] = function (this: GenericMilestone) {
|
||||
const { visibility, display, style, classes, earned, id } = this;
|
||||
return { visibility, display, style: unref(style), classes, earned, id };
|
||||
};
|
||||
|
||||
if (milestone.shouldEarn) {
|
||||
const genericMilestone = milestone as GenericMilestone;
|
||||
watchEffect(() => {
|
||||
if (settings.active !== player.id) return;
|
||||
if (
|
||||
!genericMilestone.earned.value &&
|
||||
isVisible(genericMilestone.visibility) &&
|
||||
genericMilestone.shouldEarn?.()
|
||||
) {
|
||||
genericMilestone.earned.value = true;
|
||||
genericMilestone.onComplete?.();
|
||||
if (
|
||||
genericMilestone.display != null &&
|
||||
unref(genericMilestone.showPopups) === true
|
||||
) {
|
||||
const display = unref(genericMilestone.display);
|
||||
const Display = coerceComponent(
|
||||
isCoercableComponent(display) ? display : display.requirement
|
||||
);
|
||||
toast(
|
||||
<>
|
||||
<h3>Milestone earned!</h3>
|
||||
<div>
|
||||
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
|
||||
{/* @ts-ignore */}
|
||||
<Display />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return milestone as unknown as Milestone<T>;
|
||||
});
|
||||
}
|
||||
|
||||
declare module "game/settings" {
|
||||
interface Settings {
|
||||
msDisplay: MilestoneDisplay;
|
||||
}
|
||||
}
|
||||
|
||||
globalBus.on("loadSettings", settings => {
|
||||
setDefault(settings, "msDisplay", MilestoneDisplay.All);
|
||||
});
|
||||
|
||||
const msDisplayOptions = Object.values(MilestoneDisplay).map(option => ({
|
||||
label: camelToTitle(option),
|
||||
value: option
|
||||
}));
|
||||
|
||||
registerSettingField(
|
||||
jsx(() => (
|
||||
<Select
|
||||
title={jsx(() => (
|
||||
<span class="option-title">
|
||||
Show milestones
|
||||
<desc>Select which milestones to display based on criterias.</desc>
|
||||
</span>
|
||||
))}
|
||||
options={msDisplayOptions}
|
||||
onUpdate:modelValue={value => (settings.msDisplay = value as MilestoneDisplay)}
|
||||
modelValue={settings.msDisplay}
|
||||
/>
|
||||
))
|
||||
);
|
||||
Loading…
Reference in a new issue