profectus/Profectus
Template
1
0
Fork 4
Code Issues 38 Pull requests 6 Projects 2 Releases Packages Wiki Activity Actions

Remove showIf and make visibility properties take booleans

Browse source
This commit is contained in:
thepaperpilot 2023-02-15 20:00:36 -06:00
parent 44be53d475
commit 4a28c2f8f9
29 changed files with 181 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/features/achievements/Achievement.vue
View file

@ -1,9 +1,9 @@
<template>
<div
v-if="unref(visibility) !== Visibility.None"
v-if="isVisible(visibility)"
:style="[
{
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined,
visibility: isHidden(visibility) ? 'hidden' : undefined,
backgroundImage: (earned && image && `url(${image})`) || ''
},
unref(style) ?? []
@ -27,7 +27,7 @@ import "components/common/features.css";
import MarkNode from "components/MarkNode.vue";
import Node from "components/Node.vue";
import type { CoercableComponent } from "features/feature";
import { Visibility } from "features/feature";
import { Visibility, isHidden, isVisible } from "features/feature";
import { computeOptionalComponent, processedPropType } from "util/vue";
import type { StyleValue } from "vue";
import { defineComponent, toRefs, unref } from "vue";
@ -35,7 +35,7 @@ import { defineComponent, toRefs, unref } from "vue";
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility>(Number),
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
display: processedPropType<CoercableComponent>(Object, String, Function),
@ -62,7 +62,9 @@ export default defineComponent({
return {
component: computeOptionalComponent(display),
unref,
Visibility
Visibility,
isVisible,
isHidden
};
}
});

7
src/features/achievements/achievement.tsx
View file

@ -4,6 +4,7 @@ import {
Component,
GatherProps,
getUniqueID,
isVisible,
OptionsFunc,
Replace,
setDefault,
@ -32,7 +33,7 @@ const toast = useToast();
export const AchievementType = Symbol("Achievement");
export interface AchievementOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
shouldEarn?: () => boolean;
display?: Computable<CoercableComponent>;
mark?: Computable<boolean | string>;
@ -66,7 +67,7 @@ export type Achievement<T extends AchievementOptions> = Replace<
export type GenericAchievement = Replace<
Achievement<AchievementOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
}
>;
@ -104,7 +105,7 @@ export function createAchievement<T extends AchievementOptions>(
if (settings.active !== player.id) return;
if (
!genericAchievement.earned.value &&
unref(genericAchievement.visibility) === Visibility.Visible &&
isVisible(genericAchievement.visibility) &&
genericAchievement.shouldEarn?.()
) {
genericAchievement.earned.value = true;

2
src/features/action.tsx
View file

@ -71,7 +71,7 @@ export type GenericAction = Replace<
Action<ActionOptions>,
{
autoStart: ProcessedComputable<boolean>;
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
canClick: ProcessedComputable<boolean>;
}
>;

12
src/features/bars/Bar.vue
View file

@ -1,11 +1,11 @@
<template>
<div
v-if="unref(visibility) !== Visibility.None"
v-if="isVisible(visibility)"
:style="[
{
width: unref(width) + 'px',
height: unref(height) + 'px',
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
visibility: isHidden(visibility) ? 'hidden' : undefined
},
unref(style) ?? {}
]"
@ -44,7 +44,7 @@
<script lang="ts">
import MarkNode from "components/MarkNode.vue";
import Node from "components/Node.vue";
import { CoercableComponent, Visibility } from "features/feature";
import { CoercableComponent, isHidden, isVisible, Visibility } from "features/feature";
import type { DecimalSource } from "util/bignum";
import Decimal from "util/bignum";
import { Direction } from "util/common";
@ -72,7 +72,7 @@ export default defineComponent({
},
display: processedPropType<CoercableComponent>(Object, String, Function),
visibility: {
type: processedPropType<Visibility>(Number),
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
style: processedPropType<StyleValue>(Object, String, Array),
@ -136,7 +136,9 @@ export default defineComponent({
barStyle,
component,
unref,
Visibility
Visibility,
isVisible,
isHidden
};
}
});

4
src/features/bars/bar.ts
View file

@ -22,7 +22,7 @@ import { unref } from "vue";
export const BarType = Symbol("Bar");
export interface BarOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
width: Computable<number>;
height: Computable<number>;
direction: Computable<Direction>;
@ -66,7 +66,7 @@ export type Bar<T extends BarOptions> = Replace<
export type GenericBar = Replace<
Bar<BarOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
}
>;

8
src/features/boards/Board.vue
View file

@ -1,7 +1,7 @@
<template>
<panZoom
v-if="unref(visibility) !== Visibility.None"
v-show="unref(visibility) === Visibility.Visible"
v-if="isVisible(visibility)"
v-show="isHidden(visibility)"
:style="[
{
width,
@ -60,7 +60,7 @@ import type {
} from "features/boards/board";
import { getNodeProperty } from "features/boards/board";
import type { StyleValue } from "features/feature";
import { Visibility } from "features/feature";
import { isHidden, isVisible, Visibility } from "features/feature";
import type { ProcessedComputable } from "util/computed";
import { computed, ref, Ref, toRefs, unref } from "vue";
import BoardLinkVue from "./BoardLink.vue";
@ -70,7 +70,7 @@ const _props = defineProps<{
nodes: Ref<BoardNode[]>;
types: Record<string, GenericNodeType>;
state: Ref<BoardData>;
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
width?: ProcessedComputable<string>;
height?: ProcessedComputable<string>;
style?: ProcessedComputable<StyleValue>;

8
src/features/boards/board.ts
View file

@ -129,7 +129,7 @@ export type GenericNodeType = Replace<
export interface BoardNodeActionOptions {
id: string;
visibility?: NodeComputable<Visibility>;
visibility?: NodeComputable<Visibility | boolean>;
icon: NodeComputable<string>;
fillColor?: NodeComputable<string>;
tooltip: NodeComputable<string>;
@ -155,12 +155,12 @@ export type BoardNodeAction<T extends BoardNodeActionOptions> = Replace<
export type GenericBoardNodeAction = Replace<
BoardNodeAction<BoardNodeActionOptions>,
{
visibility: NodeComputable<Visibility>;
visibility: NodeComputable<Visibility | boolean>;
}
>;
export interface BoardOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
height?: Computable<string>;
width?: Computable<string>;
classes?: Computable<Record<string, boolean>>;
@ -199,7 +199,7 @@ export type Board<T extends BoardOptions> = Replace<
export type GenericBoard = Replace<
Board<BoardOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
state: ProcessedComputable<BoardData>;
links: ProcessedComputable<BoardNodeLink[] | null>;
}

10
src/features/challenges/Challenge.vue
View file

@ -1,9 +1,9 @@
<template>
<div
v-if="unref(visibility) !== Visibility.None"
v-if="isVisible(visibility)"
:style="[
{
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
visibility: isHidden(visibility) ? 'hidden' : undefined
},
notifyStyle,
unref(style) ?? {}
@ -36,7 +36,7 @@ import MarkNode from "components/MarkNode.vue";
import Node from "components/Node.vue";
import type { GenericChallenge } from "features/challenges/challenge";
import type { StyleValue } from "features/feature";
import { jsx, Visibility } from "features/feature";
import { isHidden, isVisible, jsx, Visibility } from "features/feature";
import { getHighNotifyStyle, getNotifyStyle } from "game/notifications";
import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue";
import type { Component, PropType, UnwrapRef } from "vue";
@ -62,7 +62,7 @@ export default defineComponent({
Function
),
visibility: {
type: processedPropType<Visibility>(Number),
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
style: processedPropType<StyleValue>(String, Object, Array),
@ -167,6 +167,8 @@ export default defineComponent({
notifyStyle,
comp,
Visibility,
isVisible,
isHidden,
unref
};
}

18
src/features/challenges/challenge.tsx
View file

@ -2,7 +2,15 @@ import { isArray } from "@vue/shared";
import Toggle from "components/fields/Toggle.vue";
import ChallengeComponent from "features/challenges/Challenge.vue";
import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
import { Component, GatherProps, getUniqueID, jsx, setDefault, Visibility } from "features/feature";
import {
Component,
GatherProps,
getUniqueID,
isVisible,
jsx,
setDefault,
Visibility
} from "features/feature";
import type { GenericReset } from "features/reset";
import type { Resource } from "features/resources/resource";
import { globalBus } from "game/events";
@ -25,7 +33,7 @@ import { computed, unref, watch } from "vue";
export const ChallengeType = Symbol("ChallengeType");
export interface ChallengeOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
canStart?: Computable<boolean>;
reset?: GenericReset;
canComplete?: Computable<boolean | DecimalSource>;
@ -81,7 +89,7 @@ export type Challenge<T extends ChallengeOptions> = Replace<
export type GenericChallenge = Replace<
Challenge<ChallengeOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
canStart: ProcessedComputable<boolean>;
canComplete: ProcessedComputable<boolean | DecimalSource>;
completionLimit: ProcessedComputable<DecimalSource>;
@ -145,7 +153,7 @@ export function createChallenge<T extends ChallengeOptions>(
genericChallenge.reset?.reset();
} else if (
unref(genericChallenge.canStart) &&
unref(genericChallenge.visibility) === Visibility.Visible &&
isVisible(genericChallenge.visibility) &&
!genericChallenge.maxed.value
) {
genericChallenge.reset?.reset();
@ -179,7 +187,7 @@ export function createChallenge<T extends ChallengeOptions>(
};
processComputable(challenge as T, "visibility");
setDefault(challenge, "visibility", Visibility.Visible);
const visibility = challenge.visibility as ProcessedComputable<Visibility>;
const visibility = challenge.visibility as ProcessedComputable<Visibility | boolean>;
challenge.visibility = computed(() => {
if (settings.hideChallenges === true && unref(challenge.maxed)) {
return Visibility.None;

10
src/features/clickables/Clickable.vue
View file

@ -1,8 +1,8 @@
<template>
<button
v-if="unref(visibility) !== Visibility.None"
v-if="isVisible(visibility)"
:style="[
{ visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined },
{ visibility: isHidden(visibility) ? 'hidden' : undefined },
unref(style) ?? []
]"
@click="onClick"
@ -33,7 +33,7 @@ import MarkNode from "components/MarkNode.vue";
import Node from "components/Node.vue";
import type { GenericClickable } from "features/clickables/clickable";
import type { StyleValue } from "features/feature";
import { jsx, Visibility } from "features/feature";
import { isHidden, isVisible, jsx, Visibility } from "features/feature";
import {
coerceComponent,
isCoercableComponent,
@ -55,7 +55,7 @@ export default defineComponent({
required: true
},
visibility: {
type: processedPropType<Visibility>(Number),
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
style: processedPropType<StyleValue>(Object, String, Array),
@ -115,6 +115,8 @@ export default defineComponent({
stop,
comp,
Visibility,
isVisible,
isHidden,
unref
};
}

4
src/features/clickables/clickable.ts
View file

@ -22,7 +22,7 @@ import { computed, unref } from "vue";
export const ClickableType = Symbol("Clickable");
export interface ClickableOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
canClick?: Computable<boolean>;
classes?: Computable<Record<string, boolean>>;
style?: Computable<StyleValue>;
@ -61,7 +61,7 @@ export type Clickable<T extends ClickableOptions> = Replace<
export type GenericClickable = Replace<
Clickable<ClickableOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
canClick: ProcessedComputable<boolean>;
}
>;

19
src/features/feature.ts
View file

@ -1,7 +1,7 @@
import Decimal from "util/bignum";
import { DoNotCache } from "util/computed";
import { DoNotCache, ProcessedComputable } from "util/computed";
import type { CSSProperties, DefineComponent } from "vue";
import { isRef } from "vue";
import { isRef, unref } from "vue";
/**
* A symbol to use as a key for a vue component a feature can be rendered with
@ -67,6 +67,16 @@ export enum Visibility {
None
}
export function isVisible(visibility: ProcessedComputable<Visibility | boolean>) {
const currVisibility = unref(visibility);
return currVisibility !== Visibility.None && currVisibility !== false;
}
export function isHidden(visibility: ProcessedComputable<Visibility | boolean>) {
const currVisibility = unref(visibility);
return currVisibility === Visibility.Hidden;
}
/**
* Takes a function and marks it as JSX so it won't get auto-wrapped into a ComputedRef.
* The function may also return empty string as empty JSX tags cause issues.
@ -76,11 +86,6 @@ export function jsx(func: () => JSX.Element | ""): JSXFunction {
return func as JSXFunction;
}
/** Utility function to convert a boolean value into a Visbility value */
export function showIf(condition: boolean, otherwise = Visibility.None): Visibility {
return condition ? Visibility.Visible : otherwise;
}
/** Utility function to set a property on an object if and only if it doesn't already exist */
export function setDefault<T, K extends keyof T>(
object: T,

10
src/features/grids/Grid.vue
View file

@ -1,8 +1,8 @@
<template>
<div
v-if="unref(visibility) !== Visibility.None"
v-if="isVisible(visibility)"
:style="{
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
visibility: isHidden(visibility) ? 'hidden' : undefined
}"
class="table-grid"
>
@ -19,7 +19,7 @@
<script lang="ts">
import "components/common/table.css";
import themes from "data/themes";
import { Visibility } from "features/feature";
import { isHidden, isVisible, Visibility } from "features/feature";
import type { GridCell } from "features/grids/grid";
import settings from "game/settings";
import { processedPropType } from "util/vue";
@ -29,7 +29,7 @@ import GridCellVue from "./GridCell.vue";
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility>(Number),
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
rows: {
@ -54,7 +54,7 @@ export default defineComponent({
return { visibility, onClick, onHold, display, title, style, canClick, id };
}
return { unref, gatherCellProps, Visibility, mergeAdjacent };
return { unref, gatherCellProps, Visibility, mergeAdjacent, isVisible, isHidden };
}
});
</script>

12
src/features/grids/GridCell.vue
View file

@ -1,10 +1,10 @@
<template>
<button
v-if="unref(visibility) !== Visibility.None"
v-if="isVisible(visibility)"
:class="{ feature: true, tile: true, can: unref(canClick), locked: !unref(canClick) }"
:style="[
{
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
visibility: isHidden(visibility) ? 'hidden' : undefined
},
unref(style) ?? {}
]"
@ -26,7 +26,7 @@
import "components/common/features.css";
import Node from "components/Node.vue";
import type { CoercableComponent, StyleValue } from "features/feature";
import { Visibility } from "features/feature";
import { isHidden, isVisible, Visibility } from "features/feature";
import {
computeComponent,
computeOptionalComponent,
@ -39,7 +39,7 @@ import { defineComponent, toRefs, unref } from "vue";
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility>(Number),
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>,
@ -76,7 +76,9 @@ export default defineComponent({
titleComponent,
component,
Visibility,
unref
unref,
isVisible,
isHidden
};
}
});

10
src/features/grids/grid.ts
View file

@ -171,7 +171,7 @@ function getCellHandler(id: string): ProxyHandler<GenericGrid> {
export interface GridCell {
id: string;
visibility: Visibility;
visibility: Visibility | boolean;
canClick: boolean;
startState: State;
state: State;
@ -184,10 +184,10 @@ export interface GridCell {
}
export interface GridOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
rows: Computable<number>;
cols: Computable<number>;
getVisibility?: CellComputable<Visibility>;
getVisibility?: CellComputable<Visibility | boolean>;
getCanClick?: CellComputable<boolean>;
getStartState: Computable<State> | ((id: string | number) => State);
getStyle?: CellComputable<StyleValue>;
@ -229,8 +229,8 @@ export type Grid<T extends GridOptions> = Replace<
export type GenericGrid = Replace<
Grid<GridOptions>,
{
visibility: ProcessedComputable<Visibility>;
getVisibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
getVisibility: ProcessedComputable<Visibility | boolean>;
getCanClick: ProcessedComputable<boolean>;
}
>;

12
src/features/infoboxes/Infobox.vue
View file

@ -1,11 +1,11 @@
<template>
<div
class="infobox"
v-if="unref(visibility) !== Visibility.None"
v-if="isVisible(visibility)"
:style="[
{
borderColor: unref(color),
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
visibility: isHidden(visibility) ? 'hidden' : undefined
},
unref(style) ?? {}
]"
@ -33,7 +33,7 @@ import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTrans
import Node from "components/Node.vue";
import themes from "data/themes";
import type { CoercableComponent } from "features/feature";
import { Visibility } from "features/feature";
import { isHidden, isVisible, Visibility } from "features/feature";
import settings from "game/settings";
import { computeComponent, processedPropType } from "util/vue";
import type { PropType, Ref, StyleValue } from "vue";
@ -42,7 +42,7 @@ import { computed, defineComponent, toRefs, unref } from "vue";
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility>(Number),
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
display: {
@ -83,7 +83,9 @@ export default defineComponent({
bodyComponent,
stacked,
unref,
Visibility
Visibility,
isVisible,
isHidden
};
}
});

4
src/features/infoboxes/infobox.ts
View file

@ -16,7 +16,7 @@ import { unref } from "vue";
export const InfoboxType = Symbol("Infobox");
export interface InfoboxOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
color?: Computable<string>;
style?: Computable<StyleValue>;
titleStyle?: Computable<StyleValue>;
@ -51,7 +51,7 @@ export type Infobox<T extends InfoboxOptions> = Replace<
export type GenericInfobox = Replace<
Infobox<InfoboxOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
}
>;

12
src/features/milestones/Milestone.vue
View file

@ -1,9 +1,9 @@
<template>
<div
v-if="unref(visibility) !== Visibility.None"
v-if="isVisible(visibility)"
:style="[
{
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
visibility: isHidden(visibility) ? 'hidden' : undefined
},
unref(style) ?? {}
]"
@ -18,7 +18,7 @@
import "components/common/features.css";
import Node from "components/Node.vue";
import type { StyleValue } from "features/feature";
import { jsx, Visibility } 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";
@ -27,7 +27,7 @@ import { defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility>(Number),
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
display: {
@ -92,7 +92,9 @@ export default defineComponent({
return {
comp,
unref,
Visibility
Visibility,
isVisible,
isHidden
};
}
});

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

@ -6,7 +6,15 @@ import type {
Replace,
StyleValue
} from "features/feature";
import { Component, GatherProps, getUniqueID, jsx, setDefault, Visibility } 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";
@ -40,7 +48,7 @@ export enum MilestoneDisplay {
}
export interface MilestoneOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
shouldEarn?: () => boolean;
style?: Computable<StyleValue>;
classes?: Computable<Record<string, boolean>>;
@ -79,7 +87,7 @@ export type Milestone<T extends MilestoneOptions> = Replace<
export type GenericMilestone = Replace<
Milestone<MilestoneOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
}
>;
@ -118,7 +126,7 @@ export function createMilestone<T extends MilestoneOptions>(
processComputable(milestone as T, "visibility");
setDefault(milestone, "visibility", Visibility.Visible);
const visibility = milestone.visibility as ProcessedComputable<Visibility>;
const visibility = milestone.visibility as ProcessedComputable<Visibility | boolean>;
milestone.visibility = computed(() => {
const display = unref((milestone as GenericMilestone).display);
switch (settings.msDisplay) {
@ -163,7 +171,7 @@ export function createMilestone<T extends MilestoneOptions>(
if (settings.active !== player.id) return;
if (
!genericMilestone.earned.value &&
unref(genericMilestone.visibility) === Visibility.Visible &&
isVisible(genericMilestone.visibility) &&
genericMilestone.shouldEarn?.()
) {
genericMilestone.earned.value = true;

4
src/features/repeatable.tsx
View file

@ -45,7 +45,7 @@ export type RepeatableDisplay =
/** An object that configures a {@link Repeatable}. */
export interface RepeatableOptions {
/** Whether this repeatable should be visible. */
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
/** The requirement(s) to increase this repeatable. */
requirements: Requirements;
/** The maximum amount obtainable for this repeatable. */
@ -108,7 +108,7 @@ export type Repeatable<T extends RepeatableOptions> = Replace<
export type GenericRepeatable = Replace<
Repeatable<RepeatableOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
limit: ProcessedComputable<DecimalSource>;
}
>;

14
src/features/tabs/TabButton.vue
View file

@ -1,11 +1,11 @@
<template>
<button
v-if="unref(visibility) !== Visibility.None"
v-if="isVisible(visibility)"
@click="selectTab"
class="tabButton"
:style="[
{
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
visibility: isHidden(visibility) ? 'hidden' : undefined
},
glowColorStyle,
unref(style) ?? {}
@ -21,7 +21,7 @@
<script lang="ts">
import type { CoercableComponent, StyleValue } from "features/feature";
import { Visibility } from "features/feature";
import { isHidden, isVisible, Visibility } from "features/feature";
import { getNotifyStyle } from "game/notifications";
import { computeComponent, processedPropType, unwrapRef } from "util/vue";
import { computed, defineComponent, toRefs, unref } from "vue";
@ -29,7 +29,7 @@ import { computed, defineComponent, toRefs, unref } from "vue";
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility>(Number),
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
display: {
@ -50,7 +50,7 @@ export default defineComponent({
const glowColorStyle = computed(() => {
const color = unwrapRef(glowColor);
if (!color) {
if (color != null) {
return {};
}
if (unref(floating)) {
@ -68,7 +68,9 @@ export default defineComponent({
component,
glowColorStyle,
unref,
Visibility
Visibility,
isVisible,
isHidden
};
}
});

12
src/features/tabs/TabFamily.vue
View file

@ -1,11 +1,11 @@
<template>
<div
v-if="unref(visibility) !== Visibility.None"
v-if="isVisible(visibility)"
class="tab-family-container"
:class="{ ...unref(classes), ...tabClasses }"
:style="[
{
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
visibility: isHidden(visibility) ? 'hidden' : undefined
},
unref(style) ?? [],
tabStyle ?? []
@ -37,7 +37,7 @@
import Sticky from "components/layout/Sticky.vue";
import themes from "data/themes";
import type { CoercableComponent, StyleValue } from "features/feature";
import { Visibility } from "features/feature";
import { isHidden, isVisible, Visibility } from "features/feature";
import type { GenericTab } from "features/tabs/tab";
import TabButton from "features/tabs/TabButton.vue";
import type { GenericTabButton } from "features/tabs/tabFamily";
@ -49,7 +49,7 @@ import { computed, defineComponent, shallowRef, toRefs, unref, watchEffect } fro
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility>(Number),
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
activeTab: {
@ -123,7 +123,9 @@ export default defineComponent({
Visibility,
component,
gatherButtonProps,
unref
unref,
isVisible,
isHidden
};
}
});

26
src/features/tabs/tabFamily.ts
View file

@ -1,5 +1,12 @@
import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
import {
Component,
GatherProps,
getUniqueID,
isVisible,
setDefault,
Visibility
} from "features/feature";
import TabButtonComponent from "features/tabs/TabButton.vue";
import TabFamilyComponent from "features/tabs/TabFamily.vue";
import type { Persistent } from "game/persistence";
@ -20,7 +27,7 @@ export const TabButtonType = Symbol("TabButton");
export const TabFamilyType = Symbol("TabFamily");
export interface TabButtonOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
tab: Computable<GenericTab | CoercableComponent>;
display: Computable<CoercableComponent>;
classes?: Computable<Record<string, boolean>>;
@ -48,12 +55,12 @@ export type TabButton<T extends TabButtonOptions> = Replace<
export type GenericTabButton = Replace<
TabButton<TabButtonOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
}
>;
export interface TabFamilyOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
classes?: Computable<Record<string, boolean>>;
style?: Computable<StyleValue>;
buttonContainerClasses?: Computable<Record<string, boolean>>;
@ -81,7 +88,7 @@ export type TabFamily<T extends TabFamilyOptions> = Replace<
export type GenericTabFamily = Replace<
TabFamily<TabFamilyOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
}
>;
@ -123,15 +130,10 @@ export function createTabFamily<T extends TabFamilyOptions>(
tabFamily.selected = selected;
tabFamily.activeTab = computed(() => {
const tabs = unref(processedTabFamily.tabs);
if (
selected.value in tabs &&
unref(tabs[selected.value].visibility) === Visibility.Visible
) {
if (selected.value in tabs && isVisible(tabs[selected.value].visibility)) {
return unref(tabs[selected.value].tab);
}
const firstTab = Object.values(tabs).find(
tab => unref(tab.visibility) === Visibility.Visible
);
const firstTab = Object.values(tabs).find(tab => isVisible(tab.visibility));
if (firstTab) {
return unref(firstTab.tab);
}

12
src/features/trees/TreeNode.vue
View file

@ -1,7 +1,7 @@
<template>
<div
v-if="unref(visibility) !== Visibility.None"
:style="{ visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined }"
v-if="isVisible(visibility)"
:style="{ visibility: isHidden(visibility) ? 'hidden' : undefined }"
:class="{
treeNode: true,
can: unref(canClick),
@ -37,7 +37,7 @@
import MarkNode from "components/MarkNode.vue";
import Node from "components/Node.vue";
import type { CoercableComponent, StyleValue } from "features/feature";
import { Visibility } from "features/feature";
import { isHidden, isVisible, Visibility } from "features/feature";
import {
computeOptionalComponent,
isCoercableComponent,
@ -51,7 +51,7 @@ export default defineComponent({
props: {
display: processedPropType<CoercableComponent>(Object, String, Function),
visibility: {
type: processedPropType<Visibility>(Number),
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
style: processedPropType<StyleValue>(String, Object, Array),
@ -87,7 +87,9 @@ export default defineComponent({
comp,
unref,
Visibility,
isCoercableComponent
isCoercableComponent,
isVisible,
isHidden
};
}
});

8
src/features/trees/tree.ts
View file

@ -23,7 +23,7 @@ export const TreeNodeType = Symbol("TreeNode");
export const TreeType = Symbol("Tree");
export interface TreeNodeOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
canClick?: Computable<boolean>;
color?: Computable<string>;
display?: Computable<CoercableComponent>;
@ -60,7 +60,7 @@ export type TreeNode<T extends TreeNodeOptions> = Replace<
export type GenericTreeNode = Replace<
TreeNode<TreeNodeOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
canClick: ProcessedComputable<boolean>;
}
>;
@ -141,7 +141,7 @@ export interface TreeBranch extends Omit<Link, "startNode" | "endNode"> {
}
export interface TreeOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
nodes: Computable<GenericTreeNode[][]>;
leftSideNodes?: Computable<GenericTreeNode[]>;
rightSideNodes?: Computable<GenericTreeNode[]>;
@ -175,7 +175,7 @@ export type Tree<T extends TreeOptions> = Replace<
export type GenericTree = Replace<
Tree<TreeOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
}
>;

12
src/features/upgrades/Upgrade.vue
View file

@ -1,9 +1,9 @@
<template>
<button
v-if="unref(visibility) !== Visibility.None"
v-if="isVisible(visibility)"
:style="[
{
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
visibility: isHidden(visibility) ? 'hidden' : undefined
},
unref(style) ?? {}
]"
@ -29,7 +29,7 @@ import "components/common/features.css";
import MarkNode from "components/MarkNode.vue";
import Node from "components/Node.vue";
import type { StyleValue } from "features/feature";
import { jsx, Visibility } from "features/feature";
import { isHidden, isVisible, jsx, Visibility } from "features/feature";
import type { GenericUpgrade } from "features/upgrades/upgrade";
import { displayRequirements, Requirements } from "game/requirements";
import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue";
@ -43,7 +43,7 @@ export default defineComponent({
required: true
},
visibility: {
type: processedPropType<Visibility>(Number),
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
style: processedPropType<StyleValue>(String, Object, Array),
@ -115,7 +115,9 @@ export default defineComponent({
return {
component,
unref,
Visibility
Visibility,
isVisible,
isHidden
};
}
});

4
src/features/upgrades/upgrade.ts
View file

@ -39,7 +39,7 @@ import { computed, unref } from "vue";
export const UpgradeType = Symbol("Upgrade");
export interface UpgradeOptions {
visibility?: Computable<Visibility>;
visibility?: Computable<Visibility | boolean>;
classes?: Computable<Record<string, boolean>>;
style?: Computable<StyleValue>;
display?: Computable<
@ -80,7 +80,7 @@ export type Upgrade<T extends UpgradeOptions> = Replace<
export type GenericUpgrade = Replace<
Upgrade<UpgradeOptions>,
{
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
}
>;

12
src/game/requirements.tsx
View file

@ -1,5 +1,5 @@
import { isArray } from "@vue/shared";
import { CoercableComponent, jsx, setDefault, Visibility } from "features/feature";
import { CoercableComponent, isVisible, jsx, setDefault, Visibility } from "features/feature";
import { displayResource, Resource } from "features/resources/resource";
import Decimal, { DecimalSource } from "lib/break_eternity";
import {
@ -35,7 +35,7 @@ export interface Requirement {
/**
* Whether or not this requirement should be displayed in Vue Features. {@link displayRequirements} will respect this property.
*/
visibility: ProcessedComputable<Visibility.Visible | Visibility.None>;
visibility: ProcessedComputable<Visibility.Visible | Visibility.None | boolean>;
/**
* Whether or not this requirement has been met.
*/
@ -73,7 +73,7 @@ export interface CostRequirementOptions {
/**
* Pass-through to {@link Requirement.visibility}.
*/
visibility?: Computable<Visibility.Visible | Visibility.None>;
visibility?: Computable<Visibility.Visible | Visibility.None | boolean>;
/**
* Pass-through to {@link Requirement.requiresPay}. If not set to false, the default {@link pay} function will remove {@link cost} from {@link resource}.
*/
@ -193,10 +193,10 @@ export function createCostRequirement<T extends CostRequirementOptions>(
* @param feature The feature to check the visibility of
*/
export function createVisibilityRequirement(feature: {
visibility: ProcessedComputable<Visibility>;
visibility: ProcessedComputable<Visibility | boolean>;
}): Requirement {
return createLazyProxy(() => ({
requirementMet: computed(() => unref(feature.visibility) === Visibility.Visible),
requirementMet: computed(() => isVisible(feature.visibility)),
visibility: Visibility.None,
requiresPay: false
}));
@ -256,7 +256,7 @@ export function maxRequirementsMet(requirements: Requirements): DecimalSource {
*/
export function displayRequirements(requirements: Requirements, amount: DecimalSource = 1) {
if (isArray(requirements)) {
requirements = requirements.filter(r => unref(r.visibility) === Visibility.Visible);
requirements = requirements.filter(r => isVisible(r.visibility));
if (requirements.length === 1) {
requirements = requirements[0];
}

15
src/util/vue.tsx
View file

@ -1,7 +1,14 @@
import Col from "components/layout/Column.vue";
import Row from "components/layout/Row.vue";
import type { CoercableComponent, GenericComponent, JSXFunction } from "features/feature";
import { Component as ComponentKey, GatherProps, jsx, Visibility } from "features/feature";
import {
Component as ComponentKey,
GatherProps,
isVisible,
jsx,
Visibility
} from "features/feature";
import settings from "game/settings";
import type { ProcessedComputable } from "util/computed";
import { DoNotCache } from "util/computed";
import type { Component, ComputedRef, DefineComponent, PropType, Ref, ShallowRef } from "vue";
@ -147,7 +154,7 @@ export function setupHoldToClick(
}
export function getFirstFeature<
T extends VueFeature & { visibility: ProcessedComputable<Visibility> }
T extends VueFeature & { visibility: ProcessedComputable<Visibility | boolean> }
>(
features: T[],
filter: (feature: T) => boolean
@ -157,9 +164,7 @@ export function getFirstFeature<
hasCollapsedContent: Ref<boolean>;
} {
const filteredFeatures = computed(() =>
features.filter(
feature => unref(feature.visibility) === Visibility.Visible && filter(feature)
)
features.filter(feature => isVisible(feature.visibility) && filter(feature))
);
return {
firstFeature: computed(() => filteredFeatures.value[0]),