adds log/linear for day completion bars and removes more unused imports

This commit is contained in:
circle-gon 2022-12-06 01:17:59 +00:00
parent f302d2afab
commit 3bc260b8b8
16 changed files with 128 additions and 94 deletions

View file

@ -7,6 +7,8 @@
"dev": "vite --host",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"typecheck": "vue-tsc --noEmit",
"lint": "eslint --ext .ts,.tsx,.vue --ignore-path .gitignore --fix src",
"test": "vitest run",
"testw": "vitest",
"serve": "vite preview --host"

View file

@ -32,7 +32,11 @@
<Scene :day="main.loreScene.value" />
<br />
You can help continue the <i>advent</i>ure at:
<a href="https://discord.gg/WzejVAx" class="info-modal-discord-link" target="_blank">
<a
href="https://discord.gg/WzejVAx"
class="info-modal-discord-link"
target="_blank"
>
<span class="material-icons info-modal-discord">discord</span>
The Paper Pilot Community
</a>

View file

@ -12,6 +12,7 @@
<hr />
<Toggle :title="autosaveTitle" v-model="autosave" />
<Toggle v-if="projInfo.enablePausing" :title="isPausedTitle" v-model="isPaused" />
<Toggle :title="progressMethodTitle" v-model="usingLog" />
</template>
</Modal>
</template>
@ -47,8 +48,8 @@ const settingFieldsComponent = computed(() => {
return coerceComponent(jsx(() => <>{settingFields.map(render)}</>));
});
const { showTPS, theme, unthrottled } = toRefs(settings);
const { autosave, offlineProd } = toRefs(player);
const { showTPS, theme } = toRefs(settings);
const { autosave, usingLog } = toRefs(player);
const isPaused = computed({
get() {
return player.devSpeed === 0;
@ -58,11 +59,6 @@ const isPaused = computed({
}
});
const offlineProdTitle = jsx(() => (
<span>
Offline Production<Tooltip display="Save-specific">*</Tooltip>
</span>
));
const autosaveTitle = jsx(() => (
<span>
Autosave<Tooltip display="Save-specific">*</Tooltip>
@ -73,6 +69,11 @@ const isPausedTitle = jsx(() => (
Pause game<Tooltip display="Save-specific">*</Tooltip>
</span>
));
const progressMethodTitle = jsx(() => (
<span>
Use log for progress bar<Tooltip display="Save-specific">*</Tooltip>
</span>
));
</script>
<style scoped>

View file

@ -25,12 +25,10 @@ import type {
} from "util/computed";
import { convertComputable, processComputable } from "util/computed";
import { getFirstFeature, render, renderColJSX, renderJSX, VueFeature } from "util/vue";
import { Ref, watch, watchEffect } from "vue";
import { Ref, watchEffect } from "vue";
import { computed, unref } from "vue";
import "./common.css";
import { main } from "./projEntry";
import Spacer from "components/layout/Spacer.vue";
import Modal from "components/Modal.vue";
/** An object that configures a {@link ResetButton} */
export interface ResetButtonOptions extends ClickableOptions {
@ -396,32 +394,36 @@ export function createCollapsibleMilestones(milestones: Record<string, GenericMi
}
export function setUpDailyProgressTracker(options: {
resource: Resource,
goal: DecimalSource,
name: string,
day: number,
color: string,
textColor?: string,
resource: Resource;
goal: DecimalSource;
name: string;
day: number;
color: string;
textColor?: string;
modal?: {
show: Ref<boolean>,
display: VueFeature | CoercableComponent
}
show: Ref<boolean>;
display: VueFeature | CoercableComponent;
};
usingLog?: Ref<boolean>;
}) {
const total = trackTotal(options.resource);
const progressFunc = () => {
if (main.day.value !== options.day) return 1;
let progress = Decimal.add(total.value, 1);
let requirement = options.goal;
if (options.usingLog ?? player.usingLog) {
progress = progress.log10();
requirement = Decimal.log10(requirement);
}
return Decimal.div(progress, requirement);
};
const dayProgress = createBar(() => ({
direction: Direction.Right,
width: 600,
height: 25,
fillStyle: { backgroundColor: options.color },
textStyle: options.textColor ? { color: options.textColor } : undefined,
progress: () =>
main.day.value === options.day
? Decimal.div(
Decimal.add(total.value, 1).log10(),
Decimal.log10(options.goal)
)
: 1,
progress: progressFunc,
display: jsx(() =>
main.day.value === options.day ? (
<>
@ -433,28 +435,36 @@ export function setUpDailyProgressTracker(options: {
)
}));
const trackerDisplay = jsx(() => <>
<div>
{main.day.value === options.day
? <>Reach {formatWhole(options.goal)} total {options.resource.displayName} to complete the day</>
: <>{options.name} Complete!</>
}
{
options.modal
? <> - <button
const trackerDisplay = jsx(() => (
<>
<div>
{main.day.value === options.day ? (
<>
Reach {formatWhole(options.goal)} total {options.resource.displayName} to
complete the day
</>
) : (
<>{options.name} Complete!</>
)}
{options.modal ? (
<>
{" "}
-{" "}
<button
class="button"
style="display: inline-block;"
onClick={() => options.modal!.show.value = true}>
Check Modifiers
</button></>
: undefined
}
</div>
{render(dayProgress)}
{options.modal ? render(options.modal.display) : undefined}
</>);
onClick={() => (options.modal!.show.value = true)}
>
Check Modifiers
</button>
</>
) : undefined}
</div>
{render(dayProgress)}
{options.modal ? render(options.modal.display) : undefined}
</>
));
watchEffect(() => {
if (main.day.value === options.day && Decimal.gte(total.value, options.goal)) {
main.completeDay();
@ -464,5 +474,5 @@ export function setUpDailyProgressTracker(options: {
return {
total,
trackerDisplay
}
}
};
}

View file

@ -5,19 +5,17 @@
import Spacer from "components/layout/Spacer.vue";
import { setUpDailyProgressTracker } from "data/common";
import { main } from "data/projEntry";
import { createBar } from "features/bars/bar";
import { createBuyable, GenericBuyable } from "features/buyable";
import { createClickable } from "features/clickables/clickable";
import { createCumulativeConversion, createPolynomialScaling } from "features/conversion";
import { jsx, showIf } from "features/feature";
import MainDisplay from "features/resources/MainDisplay.vue";
import { createResource, displayResource, trackTotal } from "features/resources/resource";
import { createResource, displayResource } from "features/resources/resource";
import { createUpgrade } from "features/upgrades/upgrade";
import { BaseLayer, createLayer } from "game/layers";
import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
import { Direction } from "util/common";
import { render, renderRow } from "util/vue";
import { unref, watchEffect } from "vue";
import { unref } from "vue";
import trees from "./trees";
const id = "boxes";
@ -71,7 +69,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Carry logs in boxes",
description: "Double log gain and unlock a new elf for training"
},
onPurchase () {
onPurchase() {
main.days[3].recentlyUpdated.value = true;
},
resource: boxes,
@ -82,7 +80,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Carry ash in boxes",
description: "Double ash gain and unlock a new elf for training"
},
onPurchase () {
onPurchase() {
main.days[3].recentlyUpdated.value = true;
},
resource: boxes,
@ -93,7 +91,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Carry coal in boxes",
description: "Double coal gain and unlock a new elf for training"
},
onPurchase () {
onPurchase() {
main.days[3].recentlyUpdated.value = true;
},
resource: boxes,
@ -151,7 +149,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
name,
day,
color
})
});
return {
name,

View file

@ -729,7 +729,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
show: showModifiersModal,
display: modifiersModal
}
})
});
return {
name,

View file

@ -21,7 +21,7 @@ import { createMultiplicativeModifier, createSequentialModifier, Modifier } from
import { persistent } from "game/persistence";
import Decimal, { DecimalSource, formatWhole } from "util/bignum";
import { Direction } from "util/common";
import { render, renderCol, renderRow } from "util/vue";
import { render, renderRow } from "util/vue";
import { computed, ref, Ref, unref, watchEffect } from "vue";
import boxes from "./boxes";
import coal from "./coal";
@ -354,7 +354,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
showCost: !upgrade.bought.value
}),
style: "width: 190px",
onPurchase () {
onPurchase() {
options.onPurchase?.();
elfReset.reset();
}
@ -425,7 +425,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
coal.activeFires.value = Decimal.add(coal.activeFires.value, 1);
}
},
onPurchase () {
onPurchase() {
main.days[4].recentlyUpdated.value = true;
}
});
@ -441,11 +441,17 @@ const layer = createLayer(id, function (this: BaseLayer) {
onAutoPurchase() {
if (bonfireElf.toggle.value) {
coal.activeBonfires.value = Decimal.add(coal.activeBonfires.value, 1);
coal.buildFire.amount.value = Decimal.sub(coal.buildFire.amount.value, unref(this.buyable.cost!));
coal.activeFires.value = Decimal.sub(coal.activeFires.value, unref(this.buyable.cost!));
coal.buildFire.amount.value = Decimal.sub(
coal.buildFire.amount.value,
unref(this.buyable.cost!)
);
coal.activeFires.value = Decimal.sub(
coal.activeFires.value,
unref(this.buyable.cost!)
);
}
},
onPurchase () {
onPurchase() {
main.days[4].recentlyUpdated.value = true;
}
});
@ -463,7 +469,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
coal.activeKilns.value = Decimal.add(coal.activeKilns.value, 1);
}
},
onPurchase () {
onPurchase() {
main.days[4].recentlyUpdated.value = true;
}
});

View file

@ -4,19 +4,16 @@
*/
import Spacer from "components/layout/Spacer.vue";
import { setUpDailyProgressTracker } from "data/common";
import { main } from "data/projEntry";
import { createBar } from "features/bars/bar";
import { BuyableOptions, createBuyable, GenericBuyable } from "features/buyable";
import { createClickable } from "features/clickables/clickable";
import { createCumulativeConversion, createPolynomialScaling } from "features/conversion";
import { jsx, showIf } from "features/feature";
import MainDisplay from "features/resources/MainDisplay.vue";
import { createResource, displayResource, trackTotal } from "features/resources/resource";
import { createResource, displayResource } from "features/resources/resource";
import { BaseLayer, createLayer } from "game/layers";
import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
import { Direction } from "util/common";
import { render, renderCol } from "util/vue";
import { computed, unref, watchEffect } from "vue";
import { computed, unref } from "vue";
import coal from "./coal";
import elves from "./elves";
import trees from "./trees";
@ -165,7 +162,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
name,
day,
color,
textColor: 'var(--feature-foreground)'
textColor: "var(--feature-foreground)"
});
return {

View file

@ -27,13 +27,12 @@ import { persistent } from "game/persistence";
import Decimal, { DecimalSource, format, formatWhole, formatLimit } from "util/bignum";
import { Direction, WithRequired } from "util/common";
import { render, renderRow } from "util/vue";
import { computed, ref, watchEffect } from "vue";
import { computed, ref } from "vue";
import boxes from "./boxes";
import coal from "./coal";
import elves from "./elves";
import paper from "./paper";
import workshop from "./workshop";
const id = "trees";
const day = 1;
@ -681,11 +680,32 @@ const layer = createLayer(id, function (this: BaseLayer) {
style="margin-bottom: 0"
productionDisplay={
Decimal.gt(computedAutoCuttingAmount.value, 0)
? `+${format(ema.value)}/s average<br/>equilibrium: +${formatLimit([
[Decimal.mul(logGain.apply(1), computedAutoCuttingAmount.value), "cutting speed"],
[Decimal.mul(logGain.apply(1), computedAutoPlantingAmount.value), "planting speed"],
[Decimal.mul(logGain.apply(1), Decimal.mul(computedTotalTrees.value, 20)), "forest cap"]
], "/s")}`
? `+${format(ema.value)}/s average<br/>equilibrium: +${formatLimit(
[
[
Decimal.mul(
logGain.apply(1),
computedAutoCuttingAmount.value
),
"cutting speed"
],
[
Decimal.mul(
logGain.apply(1),
computedAutoPlantingAmount.value
),
"planting speed"
],
[
Decimal.mul(
logGain.apply(1),
Decimal.mul(computedTotalTrees.value, 20)
),
"forest cap"
]
],
"/s"
)}`
: undefined
}
/>

View file

@ -18,7 +18,7 @@ import { createHotkey } from "features/hotkey";
import { createMilestone } from "features/milestones/milestone";
import { createResource, displayResource, Resource } from "features/resources/resource";
import { BaseLayer, createLayer } from "game/layers";
import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
import Decimal, { DecimalSource, formatWhole } from "util/bignum";
import { Direction } from "util/common";
import { render } from "util/vue";
import { computed, unref, watchEffect } from "vue";
@ -219,13 +219,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
<div>
<span>The foundation is </span>
<h2 style={`color: ${color}; text-shadow: 0 0 10px ${color}`}>
{ formatWhole( foundationProgress.value ) }
{formatWhole(foundationProgress.value)}
</h2>
% completed
</div>
{Decimal.lt(foundationProgress.value, 100) ? (
<Spacer />
) : null}
{Decimal.lt(foundationProgress.value, 100) ? <Spacer /> : null}
{render(buildFoundation)}
<Spacer />
{milestonesDisplay()}

View file

@ -11,12 +11,7 @@ import { persistent } from "game/persistence";
import type { PlayerData } from "game/player";
import player from "game/player";
import { format, formatTime } from "util/bignum";
import {
Computable,
convertComputable,
processComputable,
ProcessedComputable
} from "util/computed";
import { Computable, convertComputable, ProcessedComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { renderRow, VueFeature } from "util/vue";
import type { Ref } from "vue";

View file

@ -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({

View file

@ -14,7 +14,7 @@
>, <component :is="effectComponent" ref="effectRef"
/></span>
<span v-if="productionComponent">
<br/>
<br />
<component :is="productionComponent" ref="effectRef"
/></span>
</div>

View file

@ -34,6 +34,8 @@ export interface PlayerData {
modVersion: string;
/** A dictionary of layer save data. */
layers: Record<string, LayerData<unknown>>;
/** Whether to use log for progress toward finishing the day, or use linear. */
usingLog: boolean;
}
/** The proxied player that is used to track NaN values. */
@ -65,7 +67,8 @@ const state = reactive<PlayerData>({
keepGoing: false,
modID: "",
modVersion: "",
layers: {}
layers: {},
usingLog: false
});
/** Convert a player save data object into a JSON string. Unwraps refs. */

View file

@ -30,7 +30,7 @@ declare global {
formatTime: (s: number) => string;
toPlaces: (x: DecimalSource, precision: number, maxAccepted: DecimalSource) => string;
formatSmall: (x: DecimalSource, precision?: number) => string;
formatLimit: (list: [DecimalSource, string][], unit: string) => string ;
formatLimit: (list: [DecimalSource, string][], unit: string) => string;
invertOOM: (x: DecimalSource) => Decimal;
}
}

View file

@ -205,4 +205,4 @@ export function formatLimit(list: [DecimalSource, string][], unit: string): stri
}
}
return format(num) + unit + ", limited by " + str;
}
}