thepaperpilot/Planar-Pioneers
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Planar-Pioneers.git synced 2024-11-22 00:21:31 +00:00
Code Issues Releases Activity Actions

New "plane complete" state

Browse source
This commit is contained in:
thepaperpilot 2023-05-18 18:45:29 -05:00
parent 14315932f7
commit 01045a70ee
2 changed files with 86 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/data/main.css
View file

@ -29,3 +29,12 @@
.showNotif .body { .showNotif .body {
filter: drop-shadow(0px 0px 20px var(--foreground)); filter: drop-shadow(0px 0px 20px var(--foreground));
} }
.plane .row {
min-width: 100%;
margin: 0;
}
.plane .col {
margin: 0;
}

72
src/data/planes.tsx
View file

@ -3,7 +3,7 @@ import SpacerVue from "components/layout/Spacer.vue";
import StickyVue from "components/layout/Sticky.vue"; import StickyVue from "components/layout/Sticky.vue";
import { GenericAchievement, createAchievement } from "features/achievements/achievement"; import { GenericAchievement, createAchievement } from "features/achievements/achievement";
import { createBar } from "features/bars/bar"; import { createBar } from "features/bars/bar";
import { BoardNode, getUniqueNodeID } from "features/boards/board"; import { getUniqueNodeID } from "features/boards/board";
import { GenericClickable, createClickable, setupAutoClick } from "features/clickables/clickable"; import { GenericClickable, createClickable, setupAutoClick } from "features/clickables/clickable";
import { createCumulativeConversion, setupPassiveGeneration } from "features/conversion"; import { createCumulativeConversion, setupPassiveGeneration } from "features/conversion";
import { import {
@ -47,7 +47,7 @@ import { createCostRequirement } from "game/requirements";
import Decimal, { DecimalSource, format, formatWhole } from "util/bignum"; import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
import { Direction, WithRequired, camelToTitle } from "util/common"; import { Direction, WithRequired, camelToTitle } from "util/common";
import { Computable, ProcessedComputable, convertComputable } from "util/computed"; import { Computable, ProcessedComputable, convertComputable } from "util/computed";
import { VueFeature, render, renderCol, renderRow, trackHover } from "util/vue"; import { VueFeature, render, renderCol, renderJSX, renderRow, trackHover } from "util/vue";
import { ComputedRef, Ref, computed, ref, unref } from "vue"; import { ComputedRef, Ref, computed, ref, unref } from "vue";
import { useToast } from "vue-toastification"; import { useToast } from "vue-toastification";
import { isEmpowered, isPowered } from "./boardUtils"; import { isEmpowered, isPowered } from "./boardUtils";
@ -195,7 +195,7 @@ export function createPlane(
// Makes cost formula value reactive on n, so nextCost will update as appropriate // Makes cost formula value reactive on n, so nextCost will update as appropriate
let costFormula = Formula.variable(n).times(0); let costFormula = Formula.variable(n).times(0);
let previousGain: DecimalSource = 0; let previousGain: DecimalSource = 0;
let visibility: Computable<boolean> = true; let visibility: ProcessedComputable<boolean> = true;
const nextCost = computed(() => const nextCost = computed(() =>
Decimal.add(difficulty, random() - 0.5) Decimal.add(difficulty, random() - 0.5)
.pow_base(2) .pow_base(2)
@ -303,7 +303,11 @@ export function createPlane(
title, title,
description description
}, },
visibility: upgradeVisibility visibility: computed(
() =>
earnedTreasures.value.length !== length &&
unref(upgradeVisibility)
)
})); }));
prepareFeature({ prepareFeature({
feature: upgrade, feature: upgrade,
@ -455,7 +459,11 @@ export function createPlane(
effectDisplay: unref(effect), effectDisplay: unref(effect),
showAmount: false showAmount: false
}), }),
visibility: repeatableVisibility, visibility: computed(
() =>
earnedTreasures.value.length !== length &&
unref(repeatableVisibility)
),
limit: 100, limit: 100,
bonusAmount: () => bonusAmount: () =>
Decimal.gt(repeatable.amount.value, 0) Decimal.gt(repeatable.amount.value, 0)
@ -566,7 +574,11 @@ export function createPlane(
canClick: () => Decimal.gte(conversion.actualGain.value, 1), canClick: () => Decimal.gte(conversion.actualGain.value, 1),
prestigeResource, prestigeResource,
onClick: conversion.convert, onClick: conversion.convert,
visibility: clickableVisibility visibility: computed(
() =>
earnedTreasures.value.length !== length &&
unref(clickableVisibility)
)
})); }));
const { isHovering } = prepareFeature({ const { isHovering } = prepareFeature({
feature: clickable, feature: clickable,
@ -669,7 +681,9 @@ export function createPlane(
Decimal.sub(xp.value, xpForCurrentLevel.value) Decimal.sub(xp.value, xpForCurrentLevel.value)
.div(Decimal.sub(xpToNextLevel.value, xpForCurrentLevel.value)) .div(Decimal.sub(xpToNextLevel.value, xpForCurrentLevel.value))
.toNumber(), .toNumber(),
visibility: barVisibility, visibility: computed(
() => earnedTreasures.value.length !== length && unref(barVisibility)
),
xp, xp,
display: jsx(() => ( display: jsx(() => (
<span> <span>
@ -811,7 +825,11 @@ export function createPlane(
isEmpowered("diamondRelic") != null ? Decimal.dInf : 1, isEmpowered("diamondRelic") != null ? Decimal.dInf : 1,
requiresPay: () => !isEmpowered("unobtainiumRelic") requiresPay: () => !isEmpowered("unobtainiumRelic")
})), })),
visibility: repeatableVisibility visibility: computed(
() =>
earnedTreasures.value.length !== length &&
unref(repeatableVisibility)
)
})); }));
clickables.push(clickable); clickables.push(clickable);
const isHovering = trackHover(clickable); const isHovering = trackHover(clickable);
@ -875,7 +893,10 @@ export function createPlane(
features.push(clickables); features.push(clickables);
displays[i * 2] = jsx(() => ( displays[i * 2] = jsx(() => (
<> <>
{isVisible(repeatableVisibility) ? ( {isVisible(
earnedTreasures.value.length !== length &&
unref(repeatableVisibility)
) ? (
<div style="margin: 10px"> <div style="margin: 10px">
You have{" "} You have{" "}
<h2 <h2
@ -933,7 +954,10 @@ export function createPlane(
reset.reset(); reset.reset();
} }
}, },
visibility: upgradeVisibility, visibility: computed(
() =>
earnedTreasures.value.length !== length && unref(upgradeVisibility)
),
requirements: createCostRequirement(() => ({ requirements: createCostRequirement(() => ({
resource: noPersist(resource), resource: noPersist(resource),
cost, cost,
@ -1089,7 +1113,7 @@ export function createPlane(
resource: noPersist(resource), resource: noPersist(resource),
cost cost
})), })),
visibility: milestoneVisibility, visibility: computed(() => unref(milestoneVisibility)),
display: { display: {
requirement: `${format(cost)} ${resource.displayName}`, requirement: `${format(cost)} ${resource.displayName}`,
effectDisplay: description effectDisplay: description
@ -1110,8 +1134,8 @@ export function createPlane(
direction: Direction.Down direction: Direction.Down
}); });
features.push([milestone]); features.push([milestone]);
// Wrap milestone.earned so it doesn't get reset visibility = milestone.earned;
visibility = computed(() => milestone.earned.value); displays[i * 2 + 1] = jsx(() => renderJSX(milestone));
} }
const upgrades = findFeatures( const upgrades = findFeatures(
@ -1399,6 +1423,7 @@ export function createPlane(
background, background,
"--background": background "--background": background
}, },
classes: { plane: true },
features, features,
resourceTabCollapsed, resourceTabCollapsed,
links, links,
@ -1432,7 +1457,10 @@ export function createPlane(
direction={Direction.Down} direction={Direction.Down}
style={"width: 300px"} style={"width: 300px"}
> >
<h3>{influences.length} influences</h3> <h3>
{influences.length} influence
{influences.length === 1 ? "" : "s"}
</h3>
</TooltipVue> </TooltipVue>
</span> </span>
)} )}
@ -1446,6 +1474,7 @@ export function createPlane(
</button> </button>
</span> </span>
</StickyVue> </StickyVue>
{earnedTreasures.value.length === length ? null : (
<StickyVue class="nav-container"> <StickyVue class="nav-container">
<span class="nav-segment"> <span class="nav-segment">
<h3 style={`color: ${color}; text-shadow: 0px 0px 10px ${color};`}> <h3 style={`color: ${color}; text-shadow: 0px 0px 10px ${color};`}>
@ -1467,7 +1496,13 @@ export function createPlane(
</span> </span>
) : null} ) : null}
</StickyVue> </StickyVue>
<SpacerVue height="60px" /> )}
<SpacerVue height={earnedTreasures.value.length === length ? "30px" : "60px"} />
{earnedTreasures.value.length === length ? (
<div>
<h1 style="color: var(--layer-color)">Plane Complete!</h1>
</div>
) : null}
{renderableFeatures.value} {renderableFeatures.value}
{earnedTreasures.value.length + 1 < length ? ( {earnedTreasures.value.length + 1 < length ? (
<div> <div>
@ -1483,8 +1518,15 @@ export function createPlane(
<span>{name}</span> <span>{name}</span>
<span style="font-size: large; vertical-align: sub;"> <span style="font-size: large; vertical-align: sub;">
{" "} {" "}
{tier}-tier |{" "}
{earnedTreasures.value.length === length ? (
<span>Plane Complete</span>
) : (
<span>
{earnedTreasures.value.length}/{length} treasures {earnedTreasures.value.length}/{length} treasures
</span> </span>
)}
</span>
</div> </div>
)) ))
}; };