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;
|
2022-07-06 15:09:37 +00:00
|
|
|
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;
|
2023-02-15 03:35:05 +00:00
|
|
|
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>;
|
2022-02-27 19:49:34 +00:00
|
|
|
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;
|
2022-02-27 19:49:34 +00:00
|
|
|
[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"]>;
|
2023-02-15 03:35:05 +00:00
|
|
|
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>;
|
2023-02-15 03:35:05 +00:00
|
|
|
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;
|
2022-02-27 19:49:34 +00:00
|
|
|
|
2023-02-14 19:23:59 +00:00
|
|
|
repeatable.amount = amount;
|
2023-02-15 03:35:05 +00:00
|
|
|
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(
|
2023-02-15 03:35:05 +00:00
|
|
|
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(() =>
|
2022-02-27 19:49:34 +00:00
|
|
|
Decimal.gte(
|
2023-02-14 19:23:59 +00:00
|
|
|
(repeatable as GenericRepeatable).amount.value,
|
2023-02-15 03:35:05 +00:00
|
|
|
unref((repeatable as GenericRepeatable).limit)
|
2022-02-27 19:49:34 +00:00
|
|
|
)
|
|
|
|
);
|
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(() => {
|
2022-02-27 19:49:34 +00:00
|
|
|
const currClasses = unref(classes) || {};
|
2023-02-14 19:23:59 +00:00
|
|
|
if ((repeatable as GenericRepeatable).maxed.value) {
|
2022-02-27 19:49:34 +00:00
|
|
|
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)) {
|
2022-05-11 02:23:05 +00:00
|
|
|
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?.();
|
2022-05-11 02:23:05 +00:00
|
|
|
};
|
2023-02-14 19:23:59 +00:00
|
|
|
processComputable(repeatable as T, "display");
|
|
|
|
const display = repeatable.display;
|
|
|
|
repeatable.display = jsx(() => {
|
2022-02-27 19:49:34 +00:00
|
|
|
// TODO once processComputable types correctly, remove this "as X"
|
2023-02-14 19:23:59 +00:00
|
|
|
const currDisplay = unref(display) as RepeatableDisplay;
|
2022-03-16 16:20:53 +00:00
|
|
|
if (isCoercableComponent(currDisplay)) {
|
2022-03-16 16:24:54 +00:00
|
|
|
const CurrDisplay = coerceComponent(currDisplay);
|
|
|
|
return <CurrDisplay />;
|
2022-03-16 16:20:53 +00:00
|
|
|
}
|
2022-12-31 20:57:09 +00:00
|
|
|
if (currDisplay != null) {
|
2023-02-14 19:23:59 +00:00
|
|
|
const genericRepeatable = repeatable as GenericRepeatable;
|
2022-12-21 03:26:25 +00:00
|
|
|
const Title = coerceComponent(currDisplay.title ?? "", "h3");
|
|
|
|
const Description = coerceComponent(currDisplay.description ?? "");
|
|
|
|
const EffectDisplay = coerceComponent(currDisplay.effectDisplay ?? "");
|
2022-03-11 15:16:19 +00:00
|
|
|
|
2022-02-27 19:49:34 +00:00
|
|
|
return (
|
|
|
|
<span>
|
2022-12-21 03:26:25 +00:00
|
|
|
{currDisplay.title == null ? null : (
|
2022-02-27 19:49:34 +00:00
|
|
|
<div>
|
|
|
|
<Title />
|
|
|
|
</div>
|
2022-12-21 03:26:25 +00:00
|
|
|
)}
|
|
|
|
{currDisplay.description == null ? null : <Description />}
|
2022-07-06 15:09:37 +00:00
|
|
|
{currDisplay.showAmount === false ? null : (
|
|
|
|
<div>
|
|
|
|
<br />
|
2023-02-15 03:35:05 +00:00
|
|
|
{unref(genericRepeatable.limit) === Decimal.dInf ? (
|
2023-02-14 19:23:59 +00:00
|
|
|
<>Amount: {formatWhole(genericRepeatable.amount.value)}</>
|
2022-07-06 15:09:37 +00:00
|
|
|
) : (
|
|
|
|
<>
|
2023-02-14 19:23:59 +00:00
|
|
|
Amount: {formatWhole(genericRepeatable.amount.value)} /{" "}
|
2023-02-15 03:35:05 +00:00
|
|
|
{formatWhole(unref(genericRepeatable.limit))}
|
2022-07-06 15:09:37 +00:00
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)}
|
2022-12-21 03:26:25 +00:00
|
|
|
{currDisplay.effectDisplay == null ? null : (
|
2022-02-27 19:49:34 +00:00
|
|
|
<div>
|
|
|
|
<br />
|
|
|
|
Currently: <EffectDisplay />
|
|
|
|
</div>
|
2022-12-21 03:26:25 +00:00
|
|
|
)}
|
2023-02-14 19:23:59 +00:00
|
|
|
{genericRepeatable.maxed.value ? null : (
|
2022-02-27 19:49:34 +00:00
|
|
|
<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
|
|
|
|
)}
|
2022-02-27 19:49:34 +00:00
|
|
|
</div>
|
2022-12-31 20:57:09 +00:00
|
|
|
)}
|
2022-02-27 19:49:34 +00:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return "";
|
|
|
|
});
|
|
|
|
|
2023-02-14 19:23:59 +00:00
|
|
|
processComputable(repeatable as T, "visibility");
|
|
|
|
setDefault(repeatable, "visibility", Visibility.Visible);
|
2023-02-15 03:35:05 +00:00
|
|
|
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) {
|
2022-02-27 19:49:34 +00:00
|
|
|
const { display, visibility, style, classes, onClick, canClick, small, mark, id } =
|
|
|
|
this;
|
2022-03-13 22:09:09 +00:00
|
|
|
return {
|
|
|
|
display,
|
|
|
|
visibility,
|
|
|
|
style: unref(style),
|
|
|
|
classes,
|
|
|
|
onClick,
|
|
|
|
canClick,
|
|
|
|
small,
|
|
|
|
mark,
|
|
|
|
id
|
|
|
|
};
|
2022-02-27 19:49:34 +00:00
|
|
|
};
|
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
|
|
|
}
|