Profectus-Demo/src/features/repeatable.tsx

246 lines
9.4 KiB
TypeScript
Raw Normal View History

2022-12-31 20:57:09 +00:00
import { isArray } from "@vue/shared";
2022-03-04 03:39:48 +00:00
import ClickableComponent from "features/clickables/Clickable.vue";
2022-12-31 20:57:09 +00:00
import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
2022-06-27 00:17:22 +00:00
import { Component, GatherProps, getUniqueID, jsx, setDefault, Visibility } from "features/feature";
2022-12-31 20:57:09 +00:00
import { DefaultValue, Persistent, persistent } from "game/persistence";
import {
createVisibilityRequirement,
displayRequirements,
2023-02-05 08:51:07 +00:00
maxRequirementsMet,
2022-12-31 20:57:09 +00:00
payRequirements,
Requirements,
requirementsMet
} from "game/requirements";
2022-06-27 00:17:22 +00:00
import type { DecimalSource } from "util/bignum";
2022-12-31 20:57:09 +00:00
import Decimal, { formatWhole } from "util/bignum";
2022-06-27 00:17:22 +00:00
import type {
2022-01-14 04:25:47 +00:00
Computable,
GetComputableType,
GetComputableTypeWithDefault,
ProcessedComputable
2022-03-04 03:39:48 +00:00
} from "util/computed";
2022-06-27 00:17:22 +00:00
import { processComputable } from "util/computed";
2022-03-04 03:39:48 +00:00
import { createLazyProxy } from "util/proxies";
import { coerceComponent, isCoercableComponent } from "util/vue";
2022-06-27 00:17:22 +00:00
import type { Ref } from "vue";
import { computed, unref } from "vue";
2022-01-14 04:25:47 +00:00
2023-02-14 19:23:59 +00:00
export const RepeatableType = Symbol("Repeatable");
2022-01-14 04:25:47 +00:00
2023-02-14 19:23:59 +00:00
export type RepeatableDisplay =
2022-01-14 04:25:47 +00:00
| CoercableComponent
| {
title?: CoercableComponent;
2022-07-07 15:39:45 +00:00
description?: CoercableComponent;
2022-01-14 04:25:47 +00:00
effectDisplay?: CoercableComponent;
showAmount?: boolean;
2022-01-14 04:25:47 +00:00
};
2023-02-14 19:23:59 +00:00
export interface RepeatableOptions {
2022-01-14 04:25:47 +00:00
visibility?: Computable<Visibility>;
2022-12-31 20:57:09 +00:00
requirements: Requirements;
limit?: Computable<DecimalSource>;
initialAmount?: DecimalSource;
2022-01-14 04:25:47 +00:00
classes?: Computable<Record<string, boolean>>;
style?: Computable<StyleValue>;
mark?: Computable<boolean | string>;
small?: Computable<boolean>;
2023-02-05 08:51:07 +00:00
buyMax?: Computable<boolean>;
2023-02-14 19:23:59 +00:00
display?: Computable<RepeatableDisplay>;
2022-12-31 20:57:09 +00:00
onPurchase?: VoidFunction;
2022-01-14 04:25:47 +00:00
}
2023-02-14 19:23:59 +00:00
export interface BaseRepeatable {
2022-01-14 04:25:47 +00:00
id: string;
2022-04-23 23:20:15 +00:00
amount: Persistent<DecimalSource>;
maxed: Ref<boolean>;
2022-01-14 04:25:47 +00:00
canClick: ProcessedComputable<boolean>;
onClick: VoidFunction;
purchase: VoidFunction;
2023-02-14 19:23:59 +00:00
type: typeof RepeatableType;
2022-01-14 04:25:47 +00:00
[Component]: typeof ClickableComponent;
[GatherProps]: () => Record<string, unknown>;
2022-01-14 04:25:47 +00:00
}
2023-02-14 19:23:59 +00:00
export type Repeatable<T extends RepeatableOptions> = Replace<
T & BaseRepeatable,
2022-01-14 04:25:47 +00:00
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
2022-12-31 20:57:09 +00:00
requirements: GetComputableType<T["requirements"]>;
limit: GetComputableTypeWithDefault<T["limit"], Decimal>;
2022-01-14 04:25:47 +00:00
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
mark: GetComputableType<T["mark"]>;
small: GetComputableType<T["small"]>;
2023-02-05 08:51:07 +00:00
buyMax: GetComputableType<T["buyMax"]>;
2022-01-14 04:25:47 +00:00
display: Ref<CoercableComponent>;
}
>;
2023-02-14 19:23:59 +00:00
export type GenericRepeatable = Replace<
Repeatable<RepeatableOptions>,
2022-01-14 04:25:47 +00:00
{
visibility: ProcessedComputable<Visibility>;
limit: ProcessedComputable<DecimalSource>;
2022-01-14 04:25:47 +00:00
}
>;
2023-02-14 19:23:59 +00:00
export function createRepeatable<T extends RepeatableOptions>(
optionsFunc: OptionsFunc<T, BaseRepeatable, GenericRepeatable>
): Repeatable<T> {
2022-04-23 23:20:15 +00:00
const amount = persistent<DecimalSource>(0);
return createLazyProxy(() => {
2023-02-14 19:23:59 +00:00
const repeatable = optionsFunc();
2022-01-14 04:25:47 +00:00
2023-02-14 19:23:59 +00:00
repeatable.id = getUniqueID("repeatable-");
repeatable.type = RepeatableType;
repeatable[Component] = ClickableComponent;
2023-02-14 19:23:59 +00:00
repeatable.amount = amount;
repeatable.amount[DefaultValue] = repeatable.initialAmount ?? 0;
2022-12-31 20:57:09 +00:00
const limitRequirement = {
requirementMet: computed(() =>
2023-02-05 08:51:07 +00:00
Decimal.sub(
unref((repeatable as GenericRepeatable).limit),
2023-02-14 19:23:59 +00:00
(repeatable as GenericRepeatable).amount.value
2022-12-31 20:57:09 +00:00
)
),
requiresPay: false,
visibility: Visibility.None
} as const;
2023-02-14 19:23:59 +00:00
const visibilityRequirement = createVisibilityRequirement(repeatable as GenericRepeatable);
if (isArray(repeatable.requirements)) {
repeatable.requirements.unshift(visibilityRequirement);
repeatable.requirements.push(limitRequirement);
2022-12-31 20:57:09 +00:00
} else {
2023-02-14 19:23:59 +00:00
repeatable.requirements = [
visibilityRequirement,
repeatable.requirements,
limitRequirement
];
2022-01-14 04:25:47 +00:00
}
2022-12-31 20:57:09 +00:00
2023-02-14 19:23:59 +00:00
repeatable.maxed = computed(() =>
Decimal.gte(
2023-02-14 19:23:59 +00:00
(repeatable as GenericRepeatable).amount.value,
unref((repeatable as GenericRepeatable).limit)
)
);
2023-02-14 19:23:59 +00:00
processComputable(repeatable as T, "classes");
const classes = repeatable.classes as
| ProcessedComputable<Record<string, boolean>>
| undefined;
repeatable.classes = computed(() => {
const currClasses = unref(classes) || {};
2023-02-14 19:23:59 +00:00
if ((repeatable as GenericRepeatable).maxed.value) {
currClasses.bought = true;
}
return currClasses;
});
2023-02-14 19:23:59 +00:00
repeatable.canClick = computed(() => requirementsMet(repeatable.requirements));
repeatable.onClick = repeatable.purchase =
repeatable.onClick ??
repeatable.purchase ??
function (this: GenericRepeatable) {
const genericRepeatable = repeatable as GenericRepeatable;
if (!unref(genericRepeatable.canClick)) {
return;
}
2023-02-05 08:51:07 +00:00
payRequirements(
2023-02-14 19:23:59 +00:00
repeatable.requirements,
unref(genericRepeatable.buyMax)
? maxRequirementsMet(genericRepeatable.requirements)
2023-02-05 08:51:07 +00:00
: 1
);
2023-02-14 19:23:59 +00:00
genericRepeatable.amount.value = Decimal.add(genericRepeatable.amount.value, 1);
genericRepeatable.onPurchase?.();
};
2023-02-14 19:23:59 +00:00
processComputable(repeatable as T, "display");
const display = repeatable.display;
repeatable.display = jsx(() => {
// TODO once processComputable types correctly, remove this "as X"
2023-02-14 19:23:59 +00:00
const currDisplay = unref(display) as RepeatableDisplay;
if (isCoercableComponent(currDisplay)) {
2022-03-16 16:24:54 +00:00
const CurrDisplay = coerceComponent(currDisplay);
return <CurrDisplay />;
}
2022-12-31 20:57:09 +00:00
if (currDisplay != null) {
2023-02-14 19:23:59 +00:00
const genericRepeatable = repeatable as GenericRepeatable;
const Title = coerceComponent(currDisplay.title ?? "", "h3");
const Description = coerceComponent(currDisplay.description ?? "");
const EffectDisplay = coerceComponent(currDisplay.effectDisplay ?? "");
return (
<span>
{currDisplay.title == null ? null : (
<div>
<Title />
</div>
)}
{currDisplay.description == null ? null : <Description />}
{currDisplay.showAmount === false ? null : (
<div>
<br />
{unref(genericRepeatable.limit) === Decimal.dInf ? (
2023-02-14 19:23:59 +00:00
<>Amount: {formatWhole(genericRepeatable.amount.value)}</>
) : (
<>
2023-02-14 19:23:59 +00:00
Amount: {formatWhole(genericRepeatable.amount.value)} /{" "}
{formatWhole(unref(genericRepeatable.limit))}
</>
)}
</div>
)}
{currDisplay.effectDisplay == null ? null : (
<div>
<br />
Currently: <EffectDisplay />
</div>
)}
2023-02-14 19:23:59 +00:00
{genericRepeatable.maxed.value ? null : (
<div>
<br />
2023-02-05 08:51:07 +00:00
{displayRequirements(
2023-02-14 19:23:59 +00:00
genericRepeatable.requirements,
unref(genericRepeatable.buyMax)
? maxRequirementsMet(genericRepeatable.requirements)
2023-02-05 08:51:07 +00:00
: 1
)}
</div>
2022-12-31 20:57:09 +00:00
)}
</span>
);
}
return "";
});
2023-02-14 19:23:59 +00:00
processComputable(repeatable as T, "visibility");
setDefault(repeatable, "visibility", Visibility.Visible);
processComputable(repeatable as T, "limit");
setDefault(repeatable, "limit", Decimal.dInf);
2023-02-14 19:23:59 +00:00
processComputable(repeatable as T, "style");
processComputable(repeatable as T, "mark");
processComputable(repeatable as T, "small");
processComputable(repeatable as T, "buyMax");
2022-01-14 04:25:47 +00:00
2023-02-14 19:23:59 +00:00
repeatable[GatherProps] = function (this: GenericRepeatable) {
const { display, visibility, style, classes, onClick, canClick, small, mark, id } =
this;
return {
display,
visibility,
style: unref(style),
classes,
onClick,
canClick,
small,
mark,
id
};
};
2022-01-14 04:25:47 +00:00
2023-02-14 19:23:59 +00:00
return repeatable as unknown as Repeatable<T>;
2022-04-23 23:20:15 +00:00
});
2022-01-14 04:25:47 +00:00
}