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", "dev": "vite --host",
"build": "vue-tsc --noEmit && vite build", "build": "vue-tsc --noEmit && vite build",
"preview": "vite preview", "preview": "vite preview",
"typecheck": "vue-tsc --noEmit",
"lint": "eslint --ext .ts,.tsx,.vue --ignore-path .gitignore --fix src",
"test": "vitest run", "test": "vitest run",
"testw": "vitest", "testw": "vitest",
"serve": "vite preview --host" "serve": "vite preview --host"

View file

@ -32,7 +32,11 @@
<Scene :day="main.loreScene.value" /> <Scene :day="main.loreScene.value" />
<br /> <br />
You can help continue the <i>advent</i>ure at: 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> <span class="material-icons info-modal-discord">discord</span>
The Paper Pilot Community The Paper Pilot Community
</a> </a>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -14,7 +14,7 @@ import { globalBus } from "game/events";
import "lib/pixi"; import "lib/pixi";
import { processedPropType } from "util/vue"; import { processedPropType } from "util/vue";
import type { PropType } from "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 // TODO get typing support on the Particles component
export default defineComponent({ export default defineComponent({

View file

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

View file

@ -34,6 +34,8 @@ export interface PlayerData {
modVersion: string; modVersion: string;
/** A dictionary of layer save data. */ /** A dictionary of layer save data. */
layers: Record<string, LayerData<unknown>>; 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. */ /** The proxied player that is used to track NaN values. */
@ -65,7 +67,8 @@ const state = reactive<PlayerData>({
keepGoing: false, keepGoing: false,
modID: "", modID: "",
modVersion: "", modVersion: "",
layers: {} layers: {},
usingLog: false
}); });
/** Convert a player save data object into a JSON string. Unwraps refs. */ /** Convert a player save data object into a JSON string. Unwraps refs. */

View file

@ -30,7 +30,7 @@ declare global {
formatTime: (s: number) => string; formatTime: (s: number) => string;
toPlaces: (x: DecimalSource, precision: number, maxAccepted: DecimalSource) => string; toPlaces: (x: DecimalSource, precision: number, maxAccepted: DecimalSource) => string;
formatSmall: (x: DecimalSource, precision?: number) => 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; invertOOM: (x: DecimalSource) => Decimal;
} }
} }