thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2025-04-01 21:41:00 +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 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)
@ -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);
}
}