Added notifications on layers updating each other

This commit is contained in:
Chunkybanana 2022-12-05 09:37:56 +00:00
parent 3e5696d35e
commit bad30a9fd0
4 changed files with 34 additions and 4 deletions

View file

@ -35,6 +35,7 @@ const props = defineProps<{
day: number;
symbol: string;
opened: Ref<boolean>;
recentlyUpdated: Ref<boolean>;
shouldNotify: ProcessedComputable<boolean>;
}>();

View file

@ -74,6 +74,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Carry logs in boxes",
description: "Double log gain and unlock a new elf for training"
},
onPurchase () {
main.days[3].recentlyUpdated.value = true;
},
resource: boxes,
cost: 100
}));
@ -82,6 +85,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Carry ash in boxes",
description: "Double ash gain and unlock a new elf for training"
},
onPurchase () {
main.days[3].recentlyUpdated.value = true;
},
resource: boxes,
cost: 1000
}));
@ -90,6 +96,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Carry coal in boxes",
description: "Double coal gain and unlock a new elf for training"
},
onPurchase () {
main.days[3].recentlyUpdated.value = true;
},
resource: boxes,
cost: 4000
}));

View file

@ -286,6 +286,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
hasToggle?: boolean;
toggleDesc?: string;
onAutoPurchase?: VoidFunction;
onPurchase?: VoidFunction; // Will get overriden by the custom onpurchase, but that's fine
} & Partial<ClickableOptions>
) {
const trainingCost = computed(() => Decimal.pow(4, totalElves.value).times(1e6));
@ -353,7 +354,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
showCost: !upgrade.bought.value
}),
style: "width: 190px",
onPurchase: elfReset.reset
onPurchase () {
options.onPurchase?.();
elfReset.reset();
}
};
}) as GenericUpgrade & {
buyProgress: Ref<number>;
@ -420,6 +424,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
if (smallFireElf.toggle.value) {
coal.activeFires.value = Decimal.add(coal.activeFires.value, 1);
}
},
onPurchase () {
main.days[4].recentlyUpdated.value = true;
}
});
const bonfireElf = createElf({
@ -439,6 +446,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
if (bonfireElf.toggle.value) {
coal.activeBonfires.value = Decimal.add(coal.activeBonfires.value, 1);
}
},
onPurchase () {
main.days[4].recentlyUpdated.value = true;
}
});
const kilnElf = createElf({
@ -454,6 +464,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
if (kilnElf.toggle.value) {
coal.activeKilns.value = Decimal.add(coal.activeKilns.value, 1);
}
},
onPurchase () {
main.days[4].recentlyUpdated.value = true;
}
});
const fireElves = [smallFireElf, bonfireElf, kilnElf];

View file

@ -11,7 +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, ProcessedComputable } from "util/computed";
import { Computable, convertComputable, processComputable, ProcessedComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { renderRow, VueFeature } from "util/vue";
import type { Ref } from "vue";
@ -38,6 +38,7 @@ export interface Day extends VueFeature {
story: string;
completedStory: string;
opened: Ref<boolean>;
recentlyUpdated: Ref<boolean>; // Has the tab recieved an update since the player last opened it?
shouldNotify: ProcessedComputable<boolean>;
}
@ -60,24 +61,29 @@ export const main = createLayer("main", function (this: BaseLayer) {
}
): Day {
const opened = persistent<boolean>(false);
const recentlyUpdated = persistent<boolean>(false);
return createLazyProxy(() => {
const day = optionsFunc();
const shouldNotify = convertComputable(day.shouldNotify);
// There's got to be a better way to do this
const shouldNotify = convertComputable(() => unref(convertComputable(day.shouldNotify)) || unref(recentlyUpdated))
return {
...day,
opened,
shouldNotify,
recentlyUpdated,
[Component]: Day as GenericComponent,
[GatherProps]: function (this: Day) {
const { day, layer, symbol, opened, shouldNotify, story, completedStory } =
const { day, layer, symbol, opened, shouldNotify, story, completedStory, recentlyUpdated } =
this;
return {
day,
symbol,
opened,
recentlyUpdated,
shouldNotify,
onOpenLore() {
const completed = main.day.value > day;
@ -91,6 +97,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
showLoreModal.value = true;
},
onOpenLayer() {
recentlyUpdated.value = false;
// 1468 is because two tabs with minWidth of 700px plus the minimized calendar of 60px plus 2 dividers of 4px each
if (window.matchMedia("(min-width: 1468px)").matches) {
// Desktop, allow multiple tabs to be open