thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Add showPopups property to milestones

Browse source
This commit is contained in:
thepaperpilot 2022-12-04 20:06:21 -06:00
parent 7a1e00b2e8
commit 0f275e3e94
1 changed files with 22 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/features/milestones/milestone.tsx
View file

@ -46,6 +46,7 @@ export interface MilestoneOptions {
optionsDisplay?: CoercableComponent; optionsDisplay?: CoercableComponent;
} }
>; >;
showPopups?: Computable<boolean>;
onComplete?: VoidFunction; onComplete?: VoidFunction;
} }
@ -65,6 +66,7 @@ export type Milestone<T extends MilestoneOptions> = Replace<
style: GetComputableType<T["style"]>; style: GetComputableType<T["style"]>;
classes: GetComputableType<T["classes"]>; classes: GetComputableType<T["classes"]>;
display: GetComputableType<T["display"]>; display: GetComputableType<T["display"]>;
showPopups: GetComputableType<T["showPopups"]>;
} }
>; >;
@ -87,7 +89,25 @@ export function createMilestone<T extends MilestoneOptions>(
milestone.earned = earned; milestone.earned = earned;
milestone.complete = function () { milestone.complete = function () {
const genericMilestone = milestone as GenericMilestone;
earned.value = true; earned.value = true;
genericMilestone.onComplete?.();
if (genericMilestone.display && 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"); processComputable(milestone as T, "visibility");
@ -124,6 +144,7 @@ export function createMilestone<T extends MilestoneOptions>(
processComputable(milestone as T, "style"); processComputable(milestone as T, "style");
processComputable(milestone as T, "classes"); processComputable(milestone as T, "classes");
processComputable(milestone as T, "display"); processComputable(milestone as T, "display");
processComputable(milestone as T, "showPopups");
milestone[GatherProps] = function (this: GenericMilestone) { milestone[GatherProps] = function (this: GenericMilestone) {
const { visibility, display, style, classes, earned, id } = this; const { visibility, display, style, classes, earned, id } = this;
@ -141,7 +162,7 @@ export function createMilestone<T extends MilestoneOptions>(
) { ) {
genericMilestone.earned.value = true; genericMilestone.earned.value = true;
genericMilestone.onComplete?.(); genericMilestone.onComplete?.();
if (genericMilestone.display) { if (genericMilestone.display && unref(genericMilestone.showPopups) === true) {
const display = unref(genericMilestone.display); const display = unref(genericMilestone.display);
const Display = coerceComponent( const Display = coerceComponent(
isCoercableComponent(display) ? display : display.requirement isCoercableComponent(display) ? display : display.requirement