- {currDisplay.goal != null ? (
-
{currDisplay.reward != null ? (
diff --git a/src/features/challenges/challenge.tsx b/src/features/challenges/challenge.tsx
index 3a1ba48..bba005b 100644
--- a/src/features/challenges/challenge.tsx
+++ b/src/features/challenges/challenge.tsx
@@ -1,6 +1,7 @@
import { isArray } from "@vue/shared";
import Toggle from "components/fields/Toggle.vue";
import ChallengeComponent from "features/challenges/Challenge.vue";
+import { GenericDecorator } from "features/decorators/common";
import type {
CoercableComponent,
GenericComponent,
@@ -11,17 +12,17 @@ import type {
import {
Component,
GatherProps,
+ Visibility,
getUniqueID,
isVisible,
jsx,
- setDefault,
- Visibility
+ setDefault
} from "features/feature";
import type { GenericReset } from "features/reset";
import { globalBus } from "game/events";
import type { Persistent } from "game/persistence";
import { persistent } from "game/persistence";
-import { maxRequirementsMet, Requirements } from "game/requirements";
+import { Requirements, maxRequirementsMet } from "game/requirements";
import settings, { registerSettingField } from "game/settings";
import type { DecimalSource } from "util/bignum";
import Decimal from "util/bignum";
@@ -51,8 +52,6 @@ export interface ChallengeOptions {
reset?: GenericReset;
/** The requirement(s) to complete this challenge. */
requirements: Requirements;
- /** Whether or not completing this challenge should grant multiple completions if requirements met. Requires {@link requirements} to be a requirement or array of requirements with {@link Requirement.canMaximize} true. */
- maximize?: Computable
;
/** The maximum number of times the challenge can be completed. */
completionLimit?: Computable;
/** Shows a marker on the corner of the feature. */
@@ -69,7 +68,7 @@ export interface ChallengeOptions {
title?: CoercableComponent;
/** The main text that appears in the display. */
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;
/** A description of what will change upon completing this challenge. */
reward?: CoercableComponent;
@@ -89,7 +88,7 @@ export interface ChallengeOptions {
* The properties that are added onto a processed {@link ChallengeOptions} to create a {@link Challenge}.
*/
export interface BaseChallenge {
- /** An auto-generated ID for identifying challenges that appear in the DOM. Will not persist between refreshes or updates. */
+ /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
/** The current amount of times this challenge can be completed. */
canComplete: Ref;
@@ -123,7 +122,6 @@ export type Challenge = Replace<
visibility: GetComputableTypeWithDefault;
canStart: GetComputableTypeWithDefault;
requirements: GetComputableType;
- maximize: GetComputableType;
completionLimit: GetComputableTypeWithDefault;
mark: GetComputableTypeWithDefault>;
classes: GetComputableType;
@@ -148,19 +146,30 @@ export type GenericChallenge = Replace<
* @param optionsFunc Challenge options.
*/
export function createChallenge(
- optionsFunc: OptionsFunc
+ optionsFunc: OptionsFunc,
+ ...decorators: GenericDecorator[]
): Challenge {
const completions = persistent(0);
const active = persistent(false, false);
- return createLazyProxy(() => {
- const challenge = optionsFunc();
+ const decoratedData = decorators.reduce(
+ (current, next) => Object.assign(current, next.getPersistentData?.()),
+ {}
+ );
+ return createLazyProxy(feature => {
+ const challenge = optionsFunc.call(feature, feature);
challenge.id = getUniqueID("challenge-");
challenge.type = ChallengeType;
challenge[Component] = ChallengeComponent as GenericComponent;
+ for (const decorator of decorators) {
+ decorator.preConstruct?.(challenge);
+ }
+
challenge.completions = completions;
challenge.active = active;
+ Object.assign(challenge, decoratedData);
+
challenge.completed = computed(() =>
Decimal.gt((challenge as GenericChallenge).completions.value, 0)
);
@@ -198,10 +207,7 @@ export function createChallenge(
}
};
challenge.canComplete = computed(() =>
- Decimal.max(
- maxRequirementsMet((challenge as GenericChallenge).requirements),
- unref((challenge as GenericChallenge).maximize) ? Decimal.dInf : 1
- )
+ maxRequirementsMet((challenge as GenericChallenge).requirements)
);
challenge.complete = function (remainInChallenge?: boolean) {
const genericChallenge = challenge as GenericChallenge;
@@ -242,7 +248,6 @@ export function createChallenge(
processComputable(challenge as T, "canStart");
setDefault(challenge, "canStart", true);
- processComputable(challenge as T, "maximize");
processComputable(challenge as T, "completionLimit");
setDefault(challenge, "completionLimit", 1);
processComputable(challenge as T, "mark");
@@ -258,6 +263,14 @@ export function createChallenge(
});
}
+ for (const decorator of decorators) {
+ decorator.postConstruct?.(challenge);
+ }
+
+ const decoratedProps = decorators.reduce(
+ (current, next) => Object.assign(current, next.getGatheredProps?.(challenge)),
+ {}
+ );
challenge[GatherProps] = function (this: GenericChallenge) {
const {
active,
@@ -271,7 +284,8 @@ export function createChallenge(
canStart,
mark,
id,
- toggle
+ toggle,
+ requirements
} = this;
return {
active,
@@ -285,7 +299,9 @@ export function createChallenge(
canStart,
mark,
id,
- toggle
+ toggle,
+ requirements,
+ ...decoratedProps
};
};
diff --git a/src/features/clickables/clickable.ts b/src/features/clickables/clickable.ts
index b44854b..cfd578e 100644
--- a/src/features/clickables/clickable.ts
+++ b/src/features/clickables/clickable.ts
@@ -1,4 +1,5 @@
import ClickableComponent from "features/clickables/Clickable.vue";
+import { GenericDecorator } from "features/decorators/common";
import type {
CoercableComponent,
GenericComponent,
@@ -6,7 +7,7 @@ import type {
Replace,
StyleValue
} from "features/feature";
-import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
+import { Component, GatherProps, Visibility, getUniqueID, setDefault } from "features/feature";
import type { BaseLayer } from "game/layers";
import type { Unsubscribe } from "nanoevents";
import type {
@@ -19,33 +20,56 @@ import { processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { computed, unref } from "vue";
+/** A symbol used to identify {@link Clickable} features. */
export const ClickableType = Symbol("Clickable");
+/**
+ * An object that configures a {@link Clickable}.
+ */
export interface ClickableOptions {
+ /** Whether this clickable should be visible. */
visibility?: Computable;
+ /** Whether or not the clickable may be clicked. */
canClick?: Computable;
+ /** Dictionary of CSS classes to apply to this feature. */
classes?: Computable>;
+ /** CSS to apply to this feature. */
style?: Computable;
+ /** Shows a marker on the corner of the feature. */
mark?: Computable;
+ /** The display to use for this clickable. */
display?: Computable<
| CoercableComponent
| {
+ /** A header to appear at the top of the display. */
title?: CoercableComponent;
+ /** The main text that appears in the display. */
description: CoercableComponent;
}
>;
+ /** Toggles a smaller design for the feature. */
small?: boolean;
+ /** A function that is called when the clickable is clicked. */
onClick?: (e?: MouseEvent | TouchEvent) => void;
+ /** A function that is called when the clickable is held down. */
onHold?: VoidFunction;
}
+/**
+ * The properties that are added onto a processed {@link ClickableOptions} to create an {@link Clickable}.
+ */
export interface BaseClickable {
+ /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
+ /** A symbol that helps identify features of the same type. */
type: typeof ClickableType;
+ /** The Vue component used to render this feature. */
[Component]: GenericComponent;
+ /** A function to gather the props the vue component requires for this feature. */
[GatherProps]: () => Record;
}
+/** An object that represents a feature that can be clicked or held down. */
export type Clickable = Replace<
T & BaseClickable,
{
@@ -58,6 +82,7 @@ export type Clickable = Replace<
}
>;
+/** A type that matches any valid {@link Clickable} object. */
export type GenericClickable = Replace<
Clickable,
{
@@ -66,15 +91,32 @@ export type GenericClickable = Replace<
}
>;
+/**
+ * Lazily creates a clickable with the given options.
+ * @param optionsFunc Clickable options.
+ */
export function createClickable(
- optionsFunc?: OptionsFunc
+ optionsFunc?: OptionsFunc,
+ ...decorators: GenericDecorator[]
): Clickable {
- return createLazyProxy(() => {
- const clickable = optionsFunc?.() ?? ({} as ReturnType>);
+ const decoratedData = decorators.reduce(
+ (current, next) => Object.assign(current, next.getPersistentData?.()),
+ {}
+ );
+ return createLazyProxy(feature => {
+ const clickable =
+ optionsFunc?.call(feature, feature) ??
+ ({} as ReturnType>);
clickable.id = getUniqueID("clickable-");
clickable.type = ClickableType;
clickable[Component] = ClickableComponent as GenericComponent;
+ for (const decorator of decorators) {
+ decorator.preConstruct?.(clickable);
+ }
+
+ Object.assign(clickable, decoratedData);
+
processComputable(clickable as T, "visibility");
setDefault(clickable, "visibility", Visibility.Visible);
processComputable(clickable as T, "canClick");
@@ -101,6 +143,14 @@ export function createClickable(
};
}
+ for (const decorator of decorators) {
+ decorator.postConstruct?.(clickable);
+ }
+
+ const decoratedProps = decorators.reduce(
+ (current, next) => Object.assign(current, next.getGatheredProps?.(clickable)),
+ {}
+ );
clickable[GatherProps] = function (this: GenericClickable) {
const {
display,
@@ -124,7 +174,8 @@ export function createClickable(
canClick,
small,
mark,
- id
+ id,
+ ...decoratedProps
};
};
@@ -132,6 +183,12 @@ export function createClickable(
});
}
+/**
+ * Utility to auto click a clickable whenever it can be.
+ * @param layer The layer the clickable is apart of
+ * @param clickable The clicker to click automatically
+ * @param autoActive Whether or not the clickable should currently be auto-clicking
+ */
export function setupAutoClick(
layer: BaseLayer,
clickable: GenericClickable,
diff --git a/src/features/conversion.ts b/src/features/conversion.ts
index 1ccf26b..78ad7cd 100644
--- a/src/features/conversion.ts
+++ b/src/features/conversion.ts
@@ -1,12 +1,8 @@
-import type { OptionsFunc, Replace } from "features/feature";
+import type { CoercableComponent, OptionsFunc, Replace } from "features/feature";
import { setDefault } from "features/feature";
import type { Resource } from "features/resources/resource";
import Formula from "game/formulas/formulas";
-import {
- IntegrableFormula,
- InvertibleFormula,
- InvertibleIntegralFormula
-} from "game/formulas/types";
+import { InvertibleFormula, InvertibleIntegralFormula } from "game/formulas/types";
import type { BaseLayer } from "game/layers";
import type { DecimalSource } from "util/bignum";
import Decimal from "util/bignum";
@@ -15,6 +11,8 @@ import { convertComputable, processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import type { Ref } from "vue";
import { computed, unref } from "vue";
+import { GenericDecorator } from "./decorators/common";
+import { createBooleanRequirement } from "game/requirements";
/** An object that configures a {@link Conversion}. */
export interface ConversionOptions {
@@ -22,9 +20,7 @@ export interface ConversionOptions {
* The formula used to determine how much {@link gainResource} should be earned by this converting.
* The passed value will be a Formula representing the {@link baseResource} variable.
*/
- formula: (
- variable: InvertibleFormula & IntegrableFormula & InvertibleIntegralFormula
- ) => InvertibleFormula;
+ formula: (variable: InvertibleIntegralFormula) => InvertibleFormula;
/**
* How much of the output resource the conversion can currently convert for.
* Typically this will be set for you in a conversion constructor.
@@ -123,21 +119,26 @@ export type GenericConversion = Replace<
* @see {@link createIndependentConversion}.
*/
export function createConversion(
- optionsFunc: OptionsFunc
+ optionsFunc: OptionsFunc,
+ ...decorators: GenericDecorator[]
): Conversion {
- return createLazyProxy(() => {
- const conversion = optionsFunc();
+ return createLazyProxy(feature => {
+ const conversion = optionsFunc.call(feature, feature);
+
+ for (const decorator of decorators) {
+ decorator.preConstruct?.(conversion);
+ }
(conversion as GenericConversion).formula = conversion.formula(
Formula.variable(conversion.baseResource)
);
if (conversion.currentGain == null) {
conversion.currentGain = computed(() => {
- let gain = (conversion as GenericConversion).formula.evaluate(
- conversion.baseResource.value
- );
- gain = Decimal.floor(gain).max(0);
-
+ let gain = Decimal.floor(
+ (conversion as GenericConversion).formula.evaluate(
+ conversion.baseResource.value
+ )
+ ).max(0);
if (unref(conversion.buyMax) === false) {
gain = gain.min(1);
}
@@ -187,6 +188,10 @@ export function createConversion(
processComputable(conversion as T, "buyMax");
setDefault(conversion, "buyMax", true);
+ for (const decorator of decorators) {
+ decorator.postConstruct?.(conversion);
+ }
+
return conversion as unknown as Conversion;
});
}
@@ -211,17 +216,18 @@ export function createCumulativeConversion(
export function createIndependentConversion(
optionsFunc: OptionsFunc
): Conversion {
- return createConversion(() => {
- const conversion: S = optionsFunc();
+ return createConversion(feature => {
+ const conversion: S = optionsFunc.call(feature, feature);
setDefault(conversion, "buyMax", false);
if (conversion.currentGain == null) {
conversion.currentGain = computed(() => {
- let gain = (conversion as unknown as GenericConversion).formula.evaluate(
- conversion.baseResource.value
- );
- gain = Decimal.floor(gain).max(conversion.gainResource.value);
+ let gain = Decimal.floor(
+ (conversion as unknown as GenericConversion).formula.evaluate(
+ conversion.baseResource.value
+ )
+ ).max(conversion.gainResource.value);
if (unref(conversion.buyMax) === false) {
gain = gain.min(Decimal.add(conversion.gainResource.value, 1));
}
@@ -235,7 +241,9 @@ export function createIndependentConversion(
conversion.baseResource.value
),
conversion.gainResource.value
- ).max(0);
+ )
+ .floor()
+ .max(0);
if (unref(conversion.buyMax) === false) {
gain = gain.min(1);
@@ -263,13 +271,13 @@ export function createIndependentConversion(
* @param layer The layer this passive generation will be associated with. Typically `this` when calling this function from inside a layer's options function.
* @param conversion The conversion that will determine how much generation there is.
* @param rate A multiplier to multiply against the conversion's currentGain.
- * @param cap A value that should not be passed via passive generation. If null, no cap is applied.
+ * @param cap A value that should not be passed via passive generation.
*/
export function setupPassiveGeneration(
layer: BaseLayer,
conversion: GenericConversion,
rate: Computable = 1,
- cap: Computable = null
+ cap: Computable = Decimal.dInf
): void {
const processedRate = convertComputable(rate);
const processedCap = convertComputable(cap);
@@ -280,8 +288,25 @@ export function setupPassiveGeneration(
conversion.gainResource.value,
Decimal.times(currRate, diff).times(Decimal.ceil(unref(conversion.actualGain)))
)
- .min(unref(processedCap) ?? Decimal.dInf)
+ .min(unref(processedCap))
.max(conversion.gainResource.value);
}
});
}
+
+/**
+ * Creates requirement that is met when the conversion hits a specified gain amount
+ * @param conversion The conversion to check the gain amount of
+ * @param minGainAmount The minimum gain amount that must be met for the requirement to be met
+ */
+export function createCanConvertRequirement(
+ conversion: GenericConversion,
+ minGainAmount: Computable = 1,
+ display?: CoercableComponent
+) {
+ const computedMinGainAmount = convertComputable(minGainAmount);
+ return createBooleanRequirement(
+ () => Decimal.gte(unref(conversion.actualGain), unref(computedMinGainAmount)),
+ display
+ );
+}
diff --git a/src/features/decorators/bonusDecorator.ts b/src/features/decorators/bonusDecorator.ts
new file mode 100644
index 0000000..7ee453d
--- /dev/null
+++ b/src/features/decorators/bonusDecorator.ts
@@ -0,0 +1,117 @@
+import { Replace } from "features/feature";
+import Decimal, { DecimalSource } from "util/bignum";
+import {
+ Computable,
+ GetComputableType,
+ ProcessedComputable,
+ processComputable
+} from "util/computed";
+import { Ref, computed, unref } from "vue";
+import { Decorator } from "./common";
+
+export interface BonusAmountFeatureOptions {
+ bonusAmount: Computable;
+ totalAmount?: Computable;
+}
+export interface BonusCompletionsFeatureOptions {
+ bonusCompletions: Computable;
+ totalCompletions?: Computable;
+}
+
+export interface BaseBonusAmountFeature {
+ amount: Ref;
+ bonusAmount: ProcessedComputable;
+ totalAmount?: Ref;
+}
+export interface BaseBonusCompletionsFeature {
+ completions: Ref;
+ bonusCompletions: ProcessedComputable;
+ totalCompletions?: Ref;
+}
+
+export type BonusAmountFeature = Replace<
+ T,
+ { bonusAmount: GetComputableType }
+>;
+export type BonusCompletionsFeature = Replace<
+ T,
+ { bonusAmount: GetComputableType }
+>;
+
+export type GenericBonusAmountFeature = Replace<
+ BonusAmountFeature,
+ {
+ bonusAmount: ProcessedComputable;
+ totalAmount: ProcessedComputable;
+ }
+>;
+export type GenericBonusCompletionsFeature = Replace<
+ BonusCompletionsFeature,
+ {
+ bonusCompletions: ProcessedComputable;
+ totalCompletions: ProcessedComputable;
+ }
+>;
+
+/**
+ * Allows the addition of "bonus levels" to the decorated feature, with an accompanying "total amount".
+ * To function properly, the `createFeature()` function must have its generic type extended by {@linkcode BonusAmountFeatureOptions}.
+ * Additionally, the base feature must have an `amount` property.
+ * To allow access to the decorated values outside the `createFeature()` function, the output type must be extended by {@linkcode GenericBonusAmountFeature}.
+ * @example ```ts
+ * createRepeatable(() => ({
+ * bonusAmount: noPersist(otherRepeatable.amount),
+ * ...
+ * }), bonusAmountDecorator) as GenericRepeatable & GenericBonusAmountFeature
+ */
+export const bonusAmountDecorator: Decorator<
+ BonusAmountFeatureOptions,
+ BaseBonusAmountFeature,
+ GenericBonusAmountFeature
+> = {
+ postConstruct(feature) {
+ if (feature.amount === undefined) {
+ console.error(
+ `Decorated feature ${feature.id} does not contain the required 'amount' property"`
+ );
+ }
+ processComputable(feature, "bonusAmount");
+ if (feature.totalAmount === undefined) {
+ feature.totalAmount = computed(() =>
+ Decimal.add(
+ unref(feature.amount ?? 0),
+ unref(feature.bonusAmount as ProcessedComputable)
+ )
+ );
+ }
+ }
+};
+
+/**
+ * Allows the addition of "bonus levels" to the decorated feature, with an accompanying "total amount".
+ * To function properly, the `createFeature()` function must have its generic type extended by {@linkcode BonusCompletionFeatureOptions}.
+ * To allow access to the decorated values outside the `createFeature()` function, the output type must be extended by {@linkcode GenericBonusCompletionFeature}.
+ * @example ```ts
+ * createChallenge(() => ({
+ * bonusCompletions: noPersist(otherChallenge.completions),
+ * ...
+ * }), bonusCompletionDecorator) as GenericChallenge & GenericBonusCompletionFeature
+ * ```
+ */
+export const bonusCompletionsDecorator: Decorator<
+ BonusCompletionsFeatureOptions,
+ BaseBonusCompletionsFeature,
+ GenericBonusCompletionsFeature
+> = {
+ postConstruct(feature) {
+ processComputable(feature, "bonusCompletions");
+ if (feature.totalCompletions === undefined) {
+ feature.totalCompletions = computed(() =>
+ Decimal.add(
+ unref(feature.completions ?? 0),
+ unref(feature.bonusCompletions as ProcessedComputable)
+ )
+ );
+ }
+ }
+};
diff --git a/src/features/decorators/common.ts b/src/features/decorators/common.ts
new file mode 100644
index 0000000..07783bb
--- /dev/null
+++ b/src/features/decorators/common.ts
@@ -0,0 +1,59 @@
+import { Replace, OptionsObject } from "../feature";
+import {
+ Computable,
+ GetComputableType,
+ processComputable,
+ ProcessedComputable
+} from "util/computed";
+import { Persistent, State } from "game/persistence";
+
+export type Decorator<
+ FeatureOptions,
+ BaseFeature = object,
+ GenericFeature = BaseFeature,
+ S extends State = State
+> = {
+ getPersistentData?(): Record>;
+ preConstruct?(
+ feature: OptionsObject
+ ): void;
+ postConstruct?(
+ feature: OptionsObject
+ ): void;
+ getGatheredProps?(
+ feature: OptionsObject
+ ): Partial>;
+};
+
+export type GenericDecorator = Decorator;
+
+export interface EffectFeatureOptions {
+ effect: Computable;
+}
+
+export type EffectFeature = Replace<
+ T,
+ { effect: GetComputableType }
+>;
+
+export type GenericEffectFeature = Replace<
+ EffectFeature,
+ { effect: ProcessedComputable }
+>;
+
+/**
+ * Allows the usage of an `effect` field in the decorated feature.
+ * To function properly, the `createFeature()` function must have its generic type extended by {@linkcode EffectFeatureOptions}.
+ * To allow access to the decorated values outside the `createFeature()` function, the output type must be extended by {@linkcode GenericEffectFeature}.
+ * @example ```ts
+ * createRepeatable(() => ({
+ * effect() { return Decimal.pow(2, this.amount); },
+ * ...
+ * }), effectDecorator) as GenericUpgrade & GenericEffectFeature;
+ * ```
+ */
+export const effectDecorator: Decorator = {
+ postConstruct(feature) {
+ processComputable(feature, "effect");
+ }
+};
diff --git a/src/features/feature.ts b/src/features/feature.ts
index d234997..429629a 100644
--- a/src/features/feature.ts
+++ b/src/features/feature.ts
@@ -42,9 +42,9 @@ export type Replace = S & Omit;
* with "this" bound to what the type will eventually be processed into.
* Intended for making lazily evaluated objects.
*/
-export type OptionsFunc, S = R> = () => T &
- Partial &
- ThisType;
+export type OptionsFunc = (obj: R) => OptionsObject;
+
+export type OptionsObject = T & Partial & ThisType;
let id = 0;
/**
diff --git a/src/features/grids/grid.ts b/src/features/grids/grid.ts
index b7899ae..454bbfc 100644
--- a/src/features/grids/grid.ts
+++ b/src/features/grids/grid.ts
@@ -21,14 +21,22 @@ import { createLazyProxy } from "util/proxies";
import type { Ref } from "vue";
import { computed, unref } from "vue";
+/** A symbol used to identify {@link Grid} features. */
export const GridType = Symbol("Grid");
+/** A type representing a computable value for a cell in the grid. */
export type CellComputable = Computable | ((id: string | number, state: State) => T);
+/** Create proxy to more easily get the properties of cells on a grid. */
function createGridProxy(grid: GenericGrid): Record {
return new Proxy({}, getGridHandler(grid)) as Record;
}
+/**
+ * Returns traps for a proxy that will give cell proxies when accessing any numerical key.
+ * @param grid The grid to get the cells from.
+ * @see {@link createGridProxy}
+ */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function getGridHandler(grid: GenericGrid): ProxyHandler> {
const keys = computed(() => {
@@ -86,6 +94,12 @@ function getGridHandler(grid: GenericGrid): ProxyHandler {
const keys = [
"id",
@@ -175,47 +189,90 @@ function getCellHandler(id: string): ProxyHandler {
};
}
+/**
+ * Represents a cell within a grid. These properties will typically be accessed via a cell proxy that calls functions on the grid to get the properties for a specific cell.
+ * @see {@link createGridProxy}
+ */
export interface GridCell {
+ /** A unique identifier for the grid cell. */
id: string;
+ /** Whether this cell should be visible. */
visibility: Visibility | boolean;
+ /** Whether this cell can be clicked. */
canClick: boolean;
+ /** The initial persistent state of this cell. */
startState: State;
+ /** The persistent state of this cell. */
state: State;
+ /** CSS to apply to this feature. */
style?: StyleValue;
+ /** Dictionary of CSS classes to apply to this feature. */
classes?: Record;
+ /** A header to appear at the top of the display. */
title?: CoercableComponent;
+ /** The main text that appears in the display. */
display: CoercableComponent;
+ /** A function that is called when the cell is clicked. */
onClick?: (e?: MouseEvent | TouchEvent) => void;
+ /** A function that is called when the cell is held down. */
onHold?: VoidFunction;
}
+/**
+ * An object that configures a {@link Grid}.
+ */
export interface GridOptions {
+ /** Whether this grid should be visible. */
visibility?: Computable;
+ /** The number of rows in the grid. */
rows: Computable;
+ /** The number of columns in the grid. */
cols: Computable;
+ /** A computable to determine the visibility of a cell. */
getVisibility?: CellComputable;
+ /** A computable to determine if a cell can be clicked. */
getCanClick?: CellComputable;
+ /** A computable to get the initial persistent state of a cell. */
getStartState: Computable | ((id: string | number) => State);
+ /** A computable to get the CSS styles for a cell. */
getStyle?: CellComputable;
+ /** A computable to get the CSS classes for a cell. */
getClasses?: CellComputable>;
+ /** A computable to get the title component for a cell. */
getTitle?: CellComputable;
+ /** A computable to get the display component for a cell. */
getDisplay: CellComputable;
+ /** A function that is called when a cell is clicked. */
onClick?: (id: string | number, state: State, e?: MouseEvent | TouchEvent) => void;
+ /** A function that is called when a cell is held down. */
onHold?: (id: string | number, state: State) => void;
}
+/**
+ * The properties that are added onto a processed {@link BoardOptions} to create a {@link Board}.
+ */
export interface BaseGrid {
+ /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
+ /** Get the auto-generated ID for identifying a specific cell of this grid that appears in the DOM. Will not persist between refreshes or updates. */
getID: (id: string | number, state: State) => string;
+ /** Get the persistent state of the given cell. */
getState: (id: string | number) => State;
+ /** Set the persistent state of the given cell. */
setState: (id: string | number, state: State) => void;
+ /** A dictionary of cells within this grid. */
cells: Record;
+ /** The persistent state of this grid, which is a dictionary of cell states. */
cellState: Persistent>;
+ /** A symbol that helps identify features of the same type. */
type: typeof GridType;
+ /** The Vue component used to render this feature. */
[Component]: GenericComponent;
+ /** A function to gather the props the vue component requires for this feature. */
[GatherProps]: () => Record;
}
+/** An object that represents a feature that is a grid of cells that all behave according to the same rules. */
export type Grid = Replace<
T & BaseGrid,
{
@@ -232,6 +289,7 @@ export type Grid = Replace<
}
>;
+/** A type that matches any valid {@link Grid} object. */
export type GenericGrid = Replace<
Grid,
{
@@ -241,12 +299,16 @@ export type GenericGrid = Replace<
}
>;
+/**
+ * Lazily creates a grid with the given options.
+ * @param optionsFunc Grid options.
+ */
export function createGrid(
optionsFunc: OptionsFunc
): Grid {
const cellState = persistent>({}, false);
- return createLazyProxy(() => {
- const grid = optionsFunc();
+ return createLazyProxy(feature => {
+ const grid = optionsFunc.call(feature, feature);
grid.id = getUniqueID("grid-");
grid[Component] = GridComponent as GenericComponent;
diff --git a/src/features/hotkey.tsx b/src/features/hotkey.tsx
index 595344d..51fafbb 100644
--- a/src/features/hotkey.tsx
+++ b/src/features/hotkey.tsx
@@ -15,20 +15,34 @@ import { createLazyProxy } from "util/proxies";
import { shallowReactive, unref } from "vue";
import Hotkey from "components/Hotkey.vue";
+/** A dictionary of all hotkeys. */
export const hotkeys: Record = shallowReactive({});
+/** A symbol used to identify {@link Hotkey} features. */
export const HotkeyType = Symbol("Hotkey");
+/**
+ * An object that configures a {@link Hotkey}.
+ */
export interface HotkeyOptions {
+ /** Whether or not this hotkey is currently enabled. */
enabled?: Computable;
+ /** The key tied to this hotkey */
key: string;
+ /** The description of this hotkey, to display in the settings. */
description: Computable;
+ /** What to do upon pressing the key. */
onPress: VoidFunction;
}
+/**
+ * The properties that are added onto a processed {@link HotkeyOptions} to create an {@link Hotkey}.
+ */
export interface BaseHotkey {
+ /** A symbol that helps identify features of the same type. */
type: typeof HotkeyType;
}
+/** An object that represents a hotkey shortcut that performs an action upon a key sequence being pressed. */
export type Hotkey = Replace<
T & BaseHotkey,
{
@@ -37,6 +51,7 @@ export type Hotkey = Replace<
}
>;
+/** A type that matches any valid {@link Hotkey} object. */
export type GenericHotkey = Replace<
Hotkey,
{
@@ -46,11 +61,15 @@ export type GenericHotkey = Replace<
const uppercaseNumbers = [")", "!", "@", "#", "$", "%", "^", "&", "*", "("];
+/**
+ * Lazily creates a hotkey with the given options.
+ * @param optionsFunc Hotkey options.
+ */
export function createHotkey(
optionsFunc: OptionsFunc
): Hotkey {
- return createLazyProxy(() => {
- const hotkey = optionsFunc();
+ return createLazyProxy(feature => {
+ const hotkey = optionsFunc.call(feature, feature);
hotkey.type = HotkeyType;
processComputable(hotkey as T, "enabled");
diff --git a/src/features/infoboxes/infobox.ts b/src/features/infoboxes/infobox.ts
index ccd2bd3..551d86c 100644
--- a/src/features/infoboxes/infobox.ts
+++ b/src/features/infoboxes/infobox.ts
@@ -19,27 +19,48 @@ import { processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { unref } from "vue";
+/** A symbol used to identify {@link Infobox} features. */
export const InfoboxType = Symbol("Infobox");
+/**
+ * An object that configures an {@link Infobox}.
+ */
export interface InfoboxOptions {
+ /** Whether this clickable should be visible. */
visibility?: Computable;
+ /** The background color of the Infobox. */
color?: Computable;
+ /** CSS to apply to this feature. */
style?: Computable;
+ /** CSS to apply to the title of the infobox. */
titleStyle?: Computable;
+ /** CSS to apply to the body of the infobox. */
bodyStyle?: Computable;
+ /** Dictionary of CSS classes to apply to this feature. */
classes?: Computable>;
+ /** A header to appear at the top of the display. */
title: Computable;
+ /** The main text that appears in the display. */
display: Computable;
}
+/**
+ * The properties that are added onto a processed {@link InfoboxOptions} to create an {@link Infobox}.
+ */
export interface BaseInfobox {
+ /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
+ /** Whether or not this infobox is collapsed. */
collapsed: Persistent;
+ /** A symbol that helps identify features of the same type. */
type: typeof InfoboxType;
+ /** The Vue component used to render this feature. */
[Component]: GenericComponent;
+ /** A function to gather the props the vue component requires for this feature. */
[GatherProps]: () => Record;
}
+/** An object that represents a feature that displays information in a collapsible way. */
export type Infobox = Replace<
T & BaseInfobox,
{
@@ -54,6 +75,7 @@ export type Infobox = Replace<
}
>;
+/** A type that matches any valid {@link Infobox} object. */
export type GenericInfobox = Replace<
Infobox,
{
@@ -61,12 +83,16 @@ export type GenericInfobox = Replace<
}
>;
+/**
+ * Lazily creates an infobox with the given options.
+ * @param optionsFunc Infobox options.
+ */
export function createInfobox(
optionsFunc: OptionsFunc
): Infobox {
const collapsed = persistent(false, false);
- return createLazyProxy(() => {
- const infobox = optionsFunc();
+ return createLazyProxy(feature => {
+ const infobox = optionsFunc.call(feature, feature);
infobox.id = getUniqueID("infobox-");
infobox.type = InfoboxType;
infobox[Component] = InfoboxComponent as GenericComponent;
diff --git a/src/features/links/Link.vue b/src/features/links/Link.vue
index f7b9580..815f511 100644
--- a/src/features/links/Link.vue
+++ b/src/features/links/Link.vue
@@ -2,7 +2,7 @@
import type { Link } from "features/links/links";
import type { FeatureNode } from "game/layers";
+import { kebabifyObject } from "util/vue";
import { computed, toRefs } from "vue";
const _props = defineProps<{
@@ -54,4 +55,6 @@ const endPosition = computed(() => {
}
return position;
});
+
+const linkProps = computed(() => kebabifyObject(_props.link as unknown as Record));
diff --git a/src/features/links/links.ts b/src/features/links/links.ts
index 77ea0ba..c5603c5 100644
--- a/src/features/links/links.ts
+++ b/src/features/links/links.ts
@@ -7,8 +7,10 @@ import { createLazyProxy } from "util/proxies";
import type { SVGAttributes } from "vue";
import LinksComponent from "./Links.vue";
+/** A symbol used to identify {@link Links} features. */
export const LinksType = Symbol("Links");
+/** Represents a link between two nodes. It will be displayed as an SVG line, and can take any appropriate properties for an SVG line element. */
export interface Link extends SVGAttributes {
startNode: { id: string };
endNode: { id: string };
@@ -16,16 +18,25 @@ export interface Link extends SVGAttributes {
offsetEnd?: Position;
}
+/** An object that configures a {@link Links}. */
export interface LinksOptions {
+ /** The list of links to display. */
links: Computable;
}
+/**
+ * The properties that are added onto a processed {@link LinksOptions} to create an {@link Links}.
+ */
export interface BaseLinks {
+ /** A symbol that helps identify features of the same type. */
type: typeof LinksType;
+ /** The Vue component used to render this feature. */
[Component]: GenericComponent;
+ /** A function to gather the props the vue component requires for this feature. */
[GatherProps]: () => Record;
}
+/** An object that represents a list of links between nodes, which are the elements in the DOM for any renderable feature. */
export type Links = Replace<
T & BaseLinks,
{
@@ -33,6 +44,7 @@ export type Links = Replace<
}
>;
+/** A type that matches any valid {@link Links} object. */
export type GenericLinks = Replace<
Links,
{
@@ -40,11 +52,15 @@ export type GenericLinks = Replace<
}
>;
+/**
+ * Lazily creates links with the given options.
+ * @param optionsFunc Links options.
+ */
export function createLinks(
optionsFunc: OptionsFunc
): Links {
- return createLazyProxy(() => {
- const links = optionsFunc();
+ return createLazyProxy(feature => {
+ const links = optionsFunc.call(feature, feature);
links.type = LinksType;
links[Component] = LinksComponent as GenericComponent;
diff --git a/src/features/particles/Particles.vue b/src/features/particles/Particles.vue
index 1f7de78..6fee1e9 100644
--- a/src/features/particles/Particles.vue
+++ b/src/features/particles/Particles.vue
@@ -14,7 +14,7 @@ import { globalBus } from "game/events";
import "lib/pixi";
import { processedPropType } from "util/vue";
import type { PropType } from "vue";
-import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, unref } from "vue";
+import { defineComponent, nextTick, onBeforeUnmount, onMounted, shallowRef, unref } from "vue";
// TODO get typing support on the Particles component
export default defineComponent({
diff --git a/src/features/particles/particles.tsx b/src/features/particles/particles.tsx
index 0b5b23f..d2797d5 100644
--- a/src/features/particles/particles.tsx
+++ b/src/features/particles/particles.tsx
@@ -8,24 +8,49 @@ import type { Computable, GetComputableType } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { Ref, shallowRef, unref } from "vue";
+/** A symbol used to identify {@link Particles} features. */
export const ParticlesType = Symbol("Particles");
+/**
+ * An object that configures {@link Particles}.
+ */
export interface ParticlesOptions {
+ /** Dictionary of CSS classes to apply to this feature. */
classes?: Computable>;
+ /** CSS to apply to this feature. */
style?: Computable;
+ /** A function that is called when the particles canvas is resized. */
onContainerResized?: (boundingRect: DOMRect) => void;
+ /** A function that is called whenever the particles element is reloaded during development. For restarting particle effects. */
onHotReload?: VoidFunction;
}
+/**
+ * The properties that are added onto a processed {@link ParticlesOptions} to create an {@link Particles}.
+ */
export interface BaseParticles {
+ /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
+ /** The Pixi.JS Application powering this particles canvas. */
app: Ref;
+ /**
+ * A function to asynchronously add an emitter to the canvas.
+ * The returned emitter can then be positioned as appropriate and started.
+ * @see {@link Particles}
+ */
addEmitter: (config: EmitterConfigV3) => Promise;
+ /** A symbol that helps identify features of the same type. */
type: typeof ParticlesType;
+ /** The Vue component used to render this feature. */
[Component]: GenericComponent;
+ /** A function to gather the props the vue component requires for this feature. */
[GatherProps]: () => Record;
}
+/**
+ * An object that represents a feature that display particle effects on the screen.
+ * The config should typically be gotten by designing the effect using the [online particle effect editor](https://pixijs.io/pixi-particles-editor/) and passing it into the {@link upgradeConfig} from @pixi/particle-emitter.
+ */
export type Particles = Replace<
T & BaseParticles,
{
@@ -34,16 +59,23 @@ export type Particles = Replace<
}
>;
+/** A type that matches any valid {@link Particles} object. */
export type GenericParticles = Particles;
+/**
+ * Lazily creates particles with the given options.
+ * @param optionsFunc Particles options.
+ */
export function createParticles(
optionsFunc?: OptionsFunc
): Particles {
- return createLazyProxy(() => {
- const particles = optionsFunc?.() ?? ({} as ReturnType>);
+ return createLazyProxy(feature => {
+ const particles =
+ optionsFunc?.call(feature, feature) ??
+ ({} as ReturnType>);
particles.id = getUniqueID("particles-");
particles.type = ParticlesType;
- particles[Component] = ParticlesComponent;
+ particles[Component] = ParticlesComponent as GenericComponent;
particles.app = shallowRef(null);
particles.addEmitter = (config: EmitterConfigV3): Promise => {
diff --git a/src/features/repeatable.tsx b/src/features/repeatable.tsx
index ec338eb..e82f8eb 100644
--- a/src/features/repeatable.tsx
+++ b/src/features/repeatable.tsx
@@ -7,14 +7,14 @@ import type {
Replace,
StyleValue
} from "features/feature";
-import { Component, GatherProps, getUniqueID, jsx, setDefault, Visibility } from "features/feature";
+import { Component, GatherProps, Visibility, getUniqueID, jsx, setDefault } from "features/feature";
import { DefaultValue, Persistent, persistent } from "game/persistence";
import {
+ Requirements,
createVisibilityRequirement,
displayRequirements,
maxRequirementsMet,
payRequirements,
- Requirements,
requirementsMet
} from "game/requirements";
import type { DecimalSource } from "util/bignum";
@@ -30,6 +30,7 @@ import { createLazyProxy } from "util/proxies";
import { coerceComponent, isCoercableComponent } from "util/vue";
import type { Ref } from "vue";
import { computed, unref } from "vue";
+import { GenericDecorator } from "./decorators/common";
/** A symbol used to identify {@link Repeatable} features. */
export const RepeatableType = Symbol("Repeatable");
@@ -42,7 +43,7 @@ export type RepeatableDisplay =
title?: CoercableComponent;
/** The main text that appears in the display. */
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;
/** Whether or not to show the current amount of this repeatable at the bottom of the display. */
showAmount?: boolean;
@@ -66,8 +67,6 @@ export interface RepeatableOptions {
mark?: Computable;
/** Toggles a smaller design for the feature. */
small?: Computable;
- /** Whether or not clicking this repeatable should attempt to maximize amount based on the requirements met. Requires {@link requirements} to be a requirement or array of requirements with {@link Requirement.canMaximize} true. */
- maximize?: Computable;
/** The display to use for this repeatable. */
display?: Computable;
}
@@ -76,7 +75,7 @@ export interface RepeatableOptions {
* The properties that are added onto a processed {@link RepeatableOptions} to create a {@link Repeatable}.
*/
export interface BaseRepeatable {
- /** An auto-generated ID for identifying features that appear in the DOM. Will not persistent between refreshes or updates. */
+ /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
/** The current amount this repeatable has. */
amount: Persistent;
@@ -86,7 +85,6 @@ export interface BaseRepeatable {
canClick: ProcessedComputable;
/**
* How much amount can be increased by, or 1 if unclickable.
- * Capped at 1 if {@link RepeatableOptions.maximize} is false.
**/
amountToIncrease: Ref;
/** A function that gets called when this repeatable is clicked. */
@@ -110,7 +108,6 @@ export type Repeatable = Replace<
style: GetComputableType;
mark: GetComputableType;
small: GetComputableType;
- maximize: GetComputableType;
display: Ref;
}
>;
@@ -129,19 +126,30 @@ export type GenericRepeatable = Replace<
* @param optionsFunc Repeatable options.
*/
export function createRepeatable(
- optionsFunc: OptionsFunc
+ optionsFunc: OptionsFunc,
+ ...decorators: GenericDecorator[]
): Repeatable {
const amount = persistent(0);
- return createLazyProxy(() => {
- const repeatable = optionsFunc();
+ const decoratedData = decorators.reduce(
+ (current, next) => Object.assign(current, next.getPersistentData?.()),
+ {}
+ );
+ return createLazyProxy, Repeatable>(feature => {
+ const repeatable = optionsFunc.call(feature, feature);
repeatable.id = getUniqueID("repeatable-");
repeatable.type = RepeatableType;
repeatable[Component] = ClickableComponent as GenericComponent;
+ for (const decorator of decorators) {
+ decorator.preConstruct?.(repeatable);
+ }
+
repeatable.amount = amount;
repeatable.amount[DefaultValue] = repeatable.initialAmount ?? 0;
+ Object.assign(repeatable, decoratedData);
+
const limitRequirement = {
requirementMet: computed(() =>
Decimal.sub(
@@ -150,7 +158,8 @@ export function createRepeatable(
)
),
requiresPay: false,
- visibility: Visibility.None
+ visibility: Visibility.None,
+ canMaximize: true
} as const;
const visibilityRequirement = createVisibilityRequirement(repeatable as GenericRepeatable);
if (isArray(repeatable.requirements)) {
@@ -182,9 +191,7 @@ export function createRepeatable(
return currClasses;
});
repeatable.amountToIncrease = computed(() =>
- unref((repeatable as GenericRepeatable).maximize)
- ? maxRequirementsMet(repeatable.requirements)
- : 1
+ Decimal.clampMin(maxRequirementsMet(repeatable.requirements), 1)
);
repeatable.canClick = computed(() => requirementsMet(repeatable.requirements));
const onClick = repeatable.onClick;
@@ -193,8 +200,12 @@ export function createRepeatable(
if (!unref(genericRepeatable.canClick)) {
return;
}
- payRequirements(repeatable.requirements, unref(repeatable.amountToIncrease));
- genericRepeatable.amount.value = Decimal.add(genericRepeatable.amount.value, 1);
+ const amountToIncrease = unref(repeatable.amountToIncrease) ?? 1;
+ payRequirements(repeatable.requirements, amountToIncrease);
+ genericRepeatable.amount.value = Decimal.add(
+ genericRepeatable.amount.value,
+ amountToIncrease
+ );
onClick?.(event);
};
processComputable(repeatable as T, "display");
@@ -223,14 +234,10 @@ export function createRepeatable(
{currDisplay.showAmount === false ? null : (
- {unref(genericRepeatable.limit) === Decimal.dInf ? (
- <>Amount: {formatWhole(genericRepeatable.amount.value)}
- ) : (
- <>
- Amount: {formatWhole(genericRepeatable.amount.value)} /{" "}
- {formatWhole(unref(genericRepeatable.limit))}
-
- )}
+ <>Amount: {formatWhole(genericRepeatable.amount.value)}
+ {Decimal.isFinite(unref(genericRepeatable.limit)) ? (
+ <> / {formatWhole(unref(genericRepeatable.limit))}
+ ) : undefined}
)}
{currDisplay.effectDisplay == null ? null : (
@@ -261,8 +268,15 @@ export function createRepeatable(
processComputable(repeatable as T, "style");
processComputable(repeatable as T, "mark");
processComputable(repeatable as T, "small");
- processComputable(repeatable as T, "maximize");
+ for (const decorator of decorators) {
+ decorator.postConstruct?.(repeatable);
+ }
+
+ const decoratedProps = decorators.reduce(
+ (current, next) => Object.assign(current, next.getGatheredProps?.(repeatable)),
+ {}
+ );
repeatable[GatherProps] = function (this: GenericRepeatable) {
const { display, visibility, style, classes, onClick, canClick, small, mark, id } =
this;
@@ -275,7 +289,8 @@ export function createRepeatable(
canClick,
small,
mark,
- id
+ id,
+ ...decoratedProps
};
};
diff --git a/src/features/reset.ts b/src/features/reset.ts
index 487238c..2b31e64 100644
--- a/src/features/reset.ts
+++ b/src/features/reset.ts
@@ -1,8 +1,9 @@
import type { OptionsFunc, Replace } from "features/feature";
import { getUniqueID } from "features/feature";
import { globalBus } from "game/events";
+import Formula from "game/formulas/formulas";
import type { BaseLayer } from "game/layers";
-import type { NonPersistent, Persistent } from "game/persistence";
+import { NonPersistent, Persistent, SkipPersistence } from "game/persistence";
import { DefaultValue, persistent } from "game/persistence";
import type { Unsubscribe } from "nanoevents";
import Decimal from "util/bignum";
@@ -11,19 +12,32 @@ import { processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { isRef, unref } from "vue";
+/** A symbol used to identify {@link Reset} features. */
export const ResetType = Symbol("Reset");
+/**
+ * An object that configures a {@link Clickable}.
+ */
export interface ResetOptions {
- thingsToReset: Computable[]>;
+ /** List of things to reset. Can include objects which will be recursed over for persistent values. */
+ thingsToReset: Computable;
+ /** A function that is called when the reset is performed. */
onReset?: VoidFunction;
}
+/**
+ * The properties that are added onto a processed {@link ResetOptions} to create an {@link Reset}.
+ */
export interface BaseReset {
+ /** An auto-generated ID for identifying which reset is being performed. Will not persist between refreshes or updates. */
id: string;
+ /** Trigger the reset. */
reset: VoidFunction;
+ /** A symbol that helps identify features of the same type. */
type: typeof ResetType;
}
+/** An object that represents a reset mechanic, which resets progress back to its initial state. */
export type Reset = Replace<
T & BaseReset,
{
@@ -31,19 +45,32 @@ export type Reset = Replace<
}
>;
+/** A type that matches any valid {@link Reset} object. */
export type GenericReset = Reset;
+/**
+ * Lazily creates a reset with the given options.
+ * @param optionsFunc Reset options.
+ */
export function createReset(
optionsFunc: OptionsFunc
): Reset {
- return createLazyProxy(() => {
- const reset = optionsFunc();
+ return createLazyProxy(feature => {
+ const reset = optionsFunc.call(feature, feature);
reset.id = getUniqueID("reset-");
reset.type = ResetType;
reset.reset = function () {
const handleObject = (obj: unknown) => {
- if (obj != null && typeof obj === "object") {
+ if (
+ obj != null &&
+ typeof obj === "object" &&
+ !(obj instanceof Decimal) &&
+ !(obj instanceof Formula)
+ ) {
+ if (SkipPersistence in obj && obj[SkipPersistence] === true) {
+ return;
+ }
if (DefaultValue in obj) {
const persistent = obj as NonPersistent;
persistent.value = persistent[DefaultValue];
@@ -66,6 +93,11 @@ export function createReset(
}
const listeners: Record = {};
+/**
+ * Track the time since the specified reset last occured.
+ * @param layer The layer the reset is attached to
+ * @param reset The reset mechanic to track the time since
+ */
export function trackResetTime(layer: BaseLayer, reset: GenericReset): Persistent {
const resetTime = persistent(new Decimal(0));
globalBus.on("addLayer", layerBeingAdded => {
diff --git a/src/features/resources/resource.ts b/src/features/resources/resource.ts
index 8e203d3..0247a67 100644
--- a/src/features/resources/resource.ts
+++ b/src/features/resources/resource.ts
@@ -8,12 +8,23 @@ import { loadingSave } from "util/save";
import type { ComputedRef, Ref } from "vue";
import { computed, isRef, ref, unref, watch } from "vue";
+/** An object that represents a named and quantifiable resource in the game. */
export interface Resource extends Ref {
+ /** The name of this resource. */
displayName: string;
+ /** When displaying the value of this resource, how many significant digits to display. */
precision: number;
+ /** Whether or not to display very small values using scientific notation, or rounding to 0. */
small?: boolean;
}
+/**
+ * Creates a resource.
+ * @param defaultValue The initial value of the resource
+ * @param displayName The human readable name of this resource
+ * @param precision The number of significant digits to display by default
+ * @param small Whether or not to display very small values or round to 0, by default
+ */
export function createResource(
defaultValue: T,
displayName?: string,
@@ -49,6 +60,7 @@ export function createResource(
return resource as Resource;
}
+/** Returns a reference to the highest amount of the resource ever owned, which is updated automatically. */
export function trackBest(resource: Resource): Ref {
const best = persistent(resource.value);
watch(resource, amount => {
@@ -62,6 +74,7 @@ export function trackBest(resource: Resource): Ref {
return best;
}
+/** Returns a reference to the total amount of the resource gained, updated automatically. "Refunds" count as gain. */
export function trackTotal(resource: Resource): Ref {
const total = persistent(resource.value);
watch(resource, (amount, prevAmount) => {
@@ -77,6 +90,7 @@ export function trackTotal(resource: Resource): Ref {
const tetra8 = new Decimal("10^^8");
const e100 = new Decimal("1e100");
+/** Returns a reference to the amount of resource being gained in terms of orders of magnitude per second, calcualted over the last tick. Useful for situations where the gain rate is increasing very rapidly. */
export function trackOOMPS(
resource: Resource,
pointGain?: ComputedRef
@@ -135,6 +149,7 @@ export function trackOOMPS(
return oompsString;
}
+/** Utility for displaying a resource with the correct precision. */
export function displayResource(resource: Resource, overrideAmount?: DecimalSource): string {
const amount = overrideAmount ?? resource.value;
if (Decimal.eq(resource.precision, 0)) {
@@ -143,6 +158,7 @@ export function displayResource(resource: Resource, overrideAmount?: DecimalSour
return format(amount, resource.precision, resource.small);
}
+/** Utility for unwrapping a resource that may or may not be inside a ref. */
export function unwrapResource(resource: ProcessedComputable): Resource {
if ("displayName" in resource) {
return resource;
diff --git a/src/features/tabs/tab.ts b/src/features/tabs/tab.ts
index 6917009..111f954 100644
--- a/src/features/tabs/tab.ts
+++ b/src/features/tabs/tab.ts
@@ -10,21 +10,39 @@ import TabComponent from "features/tabs/Tab.vue";
import type { Computable, GetComputableType } from "util/computed";
import { createLazyProxy } from "util/proxies";
+/** A symbol used to identify {@link Tab} features. */
export const TabType = Symbol("Tab");
+/**
+ * An object that configures a {@link Tab}.
+ */
export interface TabOptions {
+ /** Dictionary of CSS classes to apply to this feature. */
classes?: Computable>;
+ /** CSS to apply to this feature. */
style?: Computable;
+ /** The display to use for this tab. */
display: Computable;
}
+/**
+ * The properties that are added onto a processed {@link TabOptions} to create an {@link Tab}.
+ */
export interface BaseTab {
+ /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
+ /** A symbol that helps identify features of the same type. */
type: typeof TabType;
+ /** The Vue component used to render this feature. */
[Component]: GenericComponent;
+ /** A function to gather the props the vue component requires for this feature. */
[GatherProps]: () => Record;
}
+/**
+ * An object representing a tab of content in a tabbed interface.
+ * @see {@link TabFamily}
+ */
export type Tab = Replace<
T & BaseTab,
{
@@ -34,13 +52,18 @@ export type Tab = Replace<
}
>;
+/** A type that matches any valid {@link Tab} object. */
export type GenericTab = Tab;
+/**
+ * Lazily creates a tab with the given options.
+ * @param optionsFunc Tab options.
+ */
export function createTab(
optionsFunc: OptionsFunc
): Tab {
- return createLazyProxy(() => {
- const tab = optionsFunc();
+ return createLazyProxy(feature => {
+ const tab = optionsFunc.call(feature, feature);
tab.id = getUniqueID("tab-");
tab.type = TabType;
tab[Component] = TabComponent as GenericComponent;
diff --git a/src/features/tabs/tabFamily.ts b/src/features/tabs/tabFamily.ts
index 32df1e7..aa7fafc 100644
--- a/src/features/tabs/tabFamily.ts
+++ b/src/features/tabs/tabFamily.ts
@@ -29,23 +29,43 @@ import type { Ref } from "vue";
import { computed, unref } from "vue";
import type { GenericTab } from "./tab";
+/** A symbol used to identify {@link TabButton} features. */
export const TabButtonType = Symbol("TabButton");
+/** A symbol used to identify {@link TabFamily} features. */
export const TabFamilyType = Symbol("TabFamily");
+/**
+ * An object that configures a {@link TabButton}.
+ */
export interface TabButtonOptions {
+ /** Whether this tab button should be visible. */
visibility?: Computable;
+ /** The tab to display when this button is clicked. */
tab: Computable;
+ /** The label on this button. */
display: Computable;
+ /** Dictionary of CSS classes to apply to this feature. */
classes?: Computable>;
+ /** CSS to apply to this feature. */
style?: Computable;
+ /** The color of the glow effect to display when this button is active. */
glowColor?: Computable;
}
+/**
+ * The properties that are added onto a processed {@link TabButtonOptions} to create an {@link TabButton}.
+ */
export interface BaseTabButton {
+ /** A symbol that helps identify features of the same type. */
type: typeof TabButtonType;
+ /** The Vue component used to render this feature. */
[Component]: GenericComponent;
}
+/**
+ * An object that represents a button that can be clicked to change tabs in a tabbed interface.
+ * @see {@link TabFamily}
+ */
export type TabButton = Replace<
T & BaseTabButton,
{
@@ -58,6 +78,7 @@ export type TabButton = Replace<
}
>;
+/** A type that matches any valid {@link TabButton} object. */
export type GenericTabButton = Replace<
TabButton,
{
@@ -65,24 +86,46 @@ export type GenericTabButton = Replace<
}
>;
+/**
+ * An object that configures a {@link TabFamily}.
+ */
export interface TabFamilyOptions {
+ /** Whether this tab button should be visible. */
visibility?: Computable;
+ /** Dictionary of CSS classes to apply to this feature. */
classes?: Computable