Toy bar gradient

This commit is contained in:
ducdat0507 2022-12-20 16:31:33 +07:00
parent be092fcada
commit a0b147064e
2 changed files with 81 additions and 76 deletions

View file

@ -48,3 +48,18 @@
);
}
}
@keyframes toys-bar {
from {
background: 0 0 / 114px 114px repeat repeating-linear-gradient(-45deg,
#4bdc13 0 10px,
green 10px 20px
);
}
to {
background: 114px 0px / 114px 114px repeat repeating-linear-gradient(-45deg,
#4bdc13 0 10px,
green 10px 20px
);
}
}

View file

@ -51,15 +51,18 @@ const layer = createLayer(id, function (this: BaseLayer) {
const clothes = createResource<DecimalSource>(0, "clothes");
const woodenBlocks = createResource<DecimalSource>(0, " wooden blocks");
const trucks = createResource<DecimalSource>(0, "trucks");
const toyGain = createSequentialModifier(() => [
]);
const toySum = createResource(computed(() => Decimal.add(clothes.value, woodenBlocks.value).add(trucks.value)), "toys");
const toyGain = createSequentialModifier(() => []);
const toySum = createResource(
computed(() => Decimal.add(clothes.value, woodenBlocks.value).add(trucks.value)),
"toys"
);
const clothesCost = computed(() => {
var clothFactor = Decimal.add(1,clothesBuyable.amount.value);
let clothFactor = Decimal.add(1, clothesBuyable.amount.value);
if (milestones.milestone1.earned) {
clothFactor=clothFactor.div(Decimal.div(workshop.foundationProgress.value,100).floor())
clothFactor = clothFactor.div(
Decimal.div(workshop.foundationProgress.value, 100).floor()
);
}
return {
cloth: clothFactor.mul(1e8),
@ -71,17 +74,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
<>
<h3>Make Clothes</h3>
<div>
Click this buyable to make some clothes!
</div>
<div>Click this buyable to make some clothes!</div>
<div>You have {formatWhole(clothes.value)} clothes.</div>
<div>
You have {formatWhole(clothes.value)} clothes.
</div>
<div>
Costs {format(clothesCost.value.cloth)} cloth and requires {format(clothesCost.value.dye)} of red, yellow, and
blue dye
Costs {format(clothesCost.value.cloth)} cloth and requires{" "}
{format(clothesCost.value.dye)} of red, yellow, and blue dye
</div>
</>
)),
@ -96,13 +95,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
onPurchase() {
cloth.cloth.value = Decimal.sub(cloth.cloth.value, clothesCost.value.cloth);
this.amount.value = Decimal.add(this.amount.value, 1);
clothes.value = this.amount.value
},
clothes.value = this.amount.value;
}
})) as GenericBuyable;
const woodenBlocksCost = computed(() => {
var woodFactor = Decimal.add(1,woodenBlocksBuyable.amount.value).pow(5);
let woodFactor = Decimal.add(1, woodenBlocksBuyable.amount.value).pow(5);
if (milestones.milestone1.earned) {
woodFactor=woodFactor.div(Decimal.div(workshop.foundationProgress.value,100).floor())
woodFactor = woodFactor.div(
Decimal.div(workshop.foundationProgress.value, 100).floor()
);
}
return {
wood: woodFactor.mul(1e40)
@ -113,41 +114,34 @@ const layer = createLayer(id, function (this: BaseLayer) {
<>
<h3>Make Wooden Blocks</h3>
<div>
Click this buyable to make some wooden blocks!
</div>
<div>Click this buyable to make some wooden blocks!</div>
<div>
You have {formatWhole(woodenBlocks.value)} wooden blocks.
</div>
<div>You have {formatWhole(woodenBlocks.value)} wooden blocks.</div>
<div>
Costs {format(woodenBlocksCost.value.wood)} logs
</div>
<div>Costs {format(woodenBlocksCost.value.wood)} logs</div>
</>
)),
canPurchase(): boolean {
return (
woodenBlocksCost.value.wood.lte(trees.logs.value)
);
return woodenBlocksCost.value.wood.lte(trees.logs.value);
},
onPurchase() {
trees.logs.value = Decimal.sub(trees.logs.value, woodenBlocksCost.value.wood);
this.amount.value = Decimal.add(this.amount.value, 1);
woodenBlocks.value = this.amount.value
},
woodenBlocks.value = this.amount.value;
}
})) as GenericBuyable;
const trucksCost = computed(() => {
var factor = Decimal.add(1,trucksBuyable.amount.value).pow(3);
var plasticFactor = Decimal.add(1,trucksBuyable.amount.value);
let factor = Decimal.add(1, trucksBuyable.amount.value).pow(3);
let plasticFactor = Decimal.add(1, trucksBuyable.amount.value);
if (milestones.milestone1.earned) {
factor=factor.div(Decimal.div(workshop.foundationProgress.value,100).floor())
plasticFactor=plasticFactor.div(Decimal.div(workshop.foundationProgress.value,100).floor())
factor = factor.div(Decimal.div(workshop.foundationProgress.value, 100).floor());
plasticFactor = plasticFactor.div(
Decimal.div(workshop.foundationProgress.value, 100).floor()
);
}
return {
metal: factor.mul(1e25),
plastic: plasticFactor.mul(1e10)
};
});
const trucksBuyable = createBuyable(() => ({
@ -155,16 +149,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
<>
<h3>Make Trucks</h3>
<div>
Click this buyable to make some trucks!
</div>
<div>Click this buyable to make some trucks!</div>
<div>You have {formatWhole(trucks.value)} trucks.</div>
<div>
You have {formatWhole(trucks.value)} trucks.
</div>
<div>
Costs {format(trucksCost.value.metal)} metal and {format(trucksCost.value.plastic)} plastic
Costs {format(trucksCost.value.metal)} metal and{" "}
{format(trucksCost.value.plastic)} plastic
</div>
</>
)),
@ -178,8 +169,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
metal.metal.value = Decimal.sub(metal.metal.value, trucksCost.value.metal);
plastic.plastic.value = Decimal.sub(plastic.plastic.value, trucksCost.value.plastic);
this.amount.value = Decimal.add(this.amount.value, 1);
trucks.value = this.amount.value
},
trucks.value = this.amount.value;
}
})) as GenericBuyable;
const buyables = [clothesBuyable, woodenBlocksBuyable, trucksBuyable];
const trucksUpgrade1 = createUpgrade(() => ({
@ -189,15 +180,16 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Load logs onto trucks",
description: "Log gain is doubled."
}
}))
}));
const clothesUpgrade1 = createUpgrade(() => ({
resource: noPersist(clothes),
cost: 30,
display: {
title: "Give elves clothes to wear",
description: "Multiply ore per mining operation and auto-smelt purity by the number of clothes you have."
description:
"Multiply ore per mining operation and auto-smelt purity by the number of clothes you have."
}
}))
}));
const woodenBlocksUpgrade1 = createUpgrade(() => ({
resource: noPersist(woodenBlocks),
@ -206,16 +198,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Build wooden towers",
description: "You can now build 2 extra tall workshops!"
}
}))
const row1Upgrades = [
trucksUpgrade1,
clothesUpgrade1,
woodenBlocksUpgrade1
];
}));
const row1Upgrades = [trucksUpgrade1, clothesUpgrade1, woodenBlocksUpgrade1];
const milestone1 = createMilestone(() => ({
display: {
requirement: "10 toys",
effectDisplay: "The cost of making toys is divided by the number of complete workshops you have."
effectDisplay:
"The cost of making toys is divided by the number of complete workshops you have."
},
shouldEarn: () => Decimal.gte(toySum.value, 10)
}));
@ -226,7 +215,7 @@ const row1Upgrades = [
},
shouldEarn: () => Decimal.gte(toySum.value, 100)
}));
const milestones = {milestone1, milestone2}
const milestones = { milestone1, milestone2 };
const { collapseMilestones, display: milestonesDisplay } =
createCollapsibleMilestones(milestones);
@ -255,24 +244,25 @@ const { collapseMilestones, display: milestonesDisplay } =
return;
}
if (Decimal.lt(clothes.value, clothesBuyable.amount.value)) {
clothesBuyable.amount.value = clothes.value
clothesBuyable.amount.value = clothes.value;
}
if (Decimal.lt(woodenBlocks.value, woodenBlocksBuyable.amount.value)) {
woodenBlocksBuyable.amount.value = woodenBlocks.value
woodenBlocksBuyable.amount.value = woodenBlocks.value;
}
if (Decimal.lt(trucks.value, trucksBuyable.amount.value)) {
trucksBuyable.amount.value = trucks.value
trucksBuyable.amount.value = trucks.value;
}
});
const { total: totalToys, trackerDisplay } = setUpDailyProgressTracker({
resource: toySum,
goal: 200,
name,
day,
color: colorDark,
background: {
gradient: "toys-bar",
duration: "15s"
},
modal: {
show: showModifiersModal,
display: modifiersModal