thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2024-11-22 00:21:34 +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

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

@ -16,7 +16,7 @@ import { computed, watchEffect } from "vue";
import management from "./management";
import trees from "./trees";
import metal from "./metal";
import plastic from "./plastic"
import plastic from "./plastic";
import { createBuyable, GenericBuyable } from "features/buyable";
import { Resource } from "features/resources/resource";
import { isArray } from "@vue/shared";
@ -39,9 +39,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
</span>
);
}
const sleighProgress = computed(() => sleigh.amount)
const sleighProgress = computed(() => sleigh.amount);
const sleighCost = computed(() => {
let v = sleighProgress.value.value;
const v = sleighProgress.value.value;
return {
wood: Decimal.mul(1e97, Decimal.pow(1.2, v)),
metal: Decimal.mul(1e67, Decimal.pow(1.1, v)),
@ -157,7 +157,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
direction: Direction.Right,
width: 600,
height: 25,
fillStyle: `backgroundColor: ${colorDark}`,
fillStyle: `animation: 15s sleigh-bar linear infinite`,
progress: () =>
main.day.value === day || main.currentlyMastering.value?.name === name
? Decimal.div(sleighProgress.value.value, 100)
@ -213,12 +213,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
<div>
{name}{" "}
<span class="desc">
{formatWhole(sleighProgress.value.value)}% sleigh
</span>
{name} <span class="desc">{formatWhole(sleighProgress.value.value)}% sleigh</span>
</div>
)),
))
};
});

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

@ -78,13 +78,26 @@
);
}
}
@keyframes reindeer-bar {
from {
background: 0 0 / 28px 28px repeat
repeating-linear-gradient(-45deg, brown 0 10px, saddlebrown 10px 20px);
}
to {
background: 28px 0px / 28px 28px repeat
background: 114px 0px / 28px 28px repeat
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);
}
}