thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2025-02-16 09:31:43 +00:00
Code Issues Releases Activity Actions

Sleigh bar gradient

Browse source
This commit is contained in:
ducdat0507 2022-12-24 14:40:40 +07:00
parent de7dffd810
commit 4e3fa0d2ea
2 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/data/layers/sleigh.tsx
View file

@ -3,20 +3,20 @@
* @hidden * @hidden
*/ */
import Spacer from "components/layout/Spacer.vue"; import Spacer from "components/layout/Spacer.vue";
import { createCollapsibleMilestones} from "data/common"; import { createCollapsibleMilestones } from "data/common";
import { main } from "data/projEntry"; import { main } from "data/projEntry";
import { createBar } from "features/bars/bar"; import { createBar } from "features/bars/bar";
import { jsx, showIf } from "features/feature"; import { jsx, showIf } from "features/feature";
import { createMilestone } from "features/milestones/milestone"; import { createMilestone } from "features/milestones/milestone";
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 { Direction } from "util/common";
import { render } from "util/vue"; import { render } from "util/vue";
import { computed, watchEffect } from "vue"; import { computed, watchEffect } from "vue";
import management from "./management"; import management from "./management";
import trees from "./trees"; import trees from "./trees";
import metal from "./metal"; import metal from "./metal";
import plastic from "./plastic" import plastic from "./plastic";
import { createBuyable, GenericBuyable } from "features/buyable"; import { createBuyable, GenericBuyable } from "features/buyable";
import { Resource } from "features/resources/resource"; import { Resource } from "features/resources/resource";
import { isArray } from "@vue/shared"; import { isArray } from "@vue/shared";
@ -39,9 +39,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
</span> </span>
); );
} }
const sleighProgress = computed(() => sleigh.amount) const sleighProgress = computed(() => sleigh.amount);
const sleighCost = computed(() => { const sleighCost = computed(() => {
let v = sleighProgress.value.value; const v = sleighProgress.value.value;
return { return {
wood: Decimal.mul(1e97, Decimal.pow(1.2, v)), wood: Decimal.mul(1e97, Decimal.pow(1.2, v)),
metal: Decimal.mul(1e67, Decimal.pow(1.1, v)), metal: Decimal.mul(1e67, Decimal.pow(1.1, v)),
@ -157,7 +157,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
direction: Direction.Right, direction: Direction.Right,
width: 600, width: 600,
height: 25, height: 25,
fillStyle: `backgroundColor: ${colorDark}`, fillStyle: `animation: 15s sleigh-bar linear infinite`,
progress: () => progress: () =>
main.day.value === day || main.currentlyMastering.value?.name === name main.day.value === day || main.currentlyMastering.value?.name === name
? Decimal.div(sleighProgress.value.value, 100) ? Decimal.div(sleighProgress.value.value, 100)
@ -174,7 +174,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
watchEffect(() => { watchEffect(() => {
if (main.day.value === day && Decimal.gte(sleighProgress.value.value, 100)) { if (main.day.value === day && Decimal.gte(sleighProgress.value.value, 100)) {
main.completeDay(); main.completeDay();
} }
}); });
return { return {
@ -213,12 +213,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
)), )),
minimizedDisplay: jsx(() => ( minimizedDisplay: jsx(() => (
<div> <div>
{name}{" "} {name} <span class="desc">{formatWhole(sleighProgress.value.value)}% sleigh</span>
<span class="desc">
{formatWhole(sleighProgress.value.value)}% sleigh
</span>
</div> </div>
)), ))
}; };
}); });

15
src/data/layers/styles/day-gradients.css
View file

@ -78,13 +78,26 @@
); );
} }
} }
@keyframes reindeer-bar { @keyframes reindeer-bar {
from { from {
background: 0 0 / 28px 28px repeat background: 0 0 / 28px 28px repeat
repeating-linear-gradient(-45deg, brown 0 10px, saddlebrown 10px 20px); repeating-linear-gradient(-45deg, brown 0 10px, saddlebrown 10px 20px);
} }
to { to {
background: 28px 0px / 28px 28px repeat background: 114px 0px / 28px 28px repeat
repeating-linear-gradient(-45deg, brown 0 10px, saddlebrown 10px 20px); repeating-linear-gradient(-45deg, brown 0 10px, saddlebrown 10px 20px);
} }
} }
@keyframes sleigh-bar {
from {
background: 0 0 / 28px 28px repeat
repeating-linear-gradient(-45deg, #D71830 0 10px, #A0A020 10px 20px);
}
to {
background: 114px 0px / 28px 28px repeat
repeating-linear-gradient(-45deg, #D71830 0 10px, #A0A020 10px 20px);
}
}