thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2024-11-24 17:31:54 +00:00
Code Issues Releases Activity Actions

Dye text changes

Browse source
This commit is contained in:
ducdat0507 2022-12-10 18:35:41 +07:00
parent dd0f59ca46
commit b572cc2c76
3 changed files with 41 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/data/layers/dyes.tsx
View file

@ -4,9 +4,11 @@
*/
import Modal from "components/Modal.vue";
import MainDisplay from "features/resources/MainDisplay.vue";
import Row from "components/layout/Row.vue";
import Spacer from "components/layout/Spacer.vue";
import Sqrt from "components/math/Sqrt.vue";
import { BuyableOptions, GenericBuyable, createBuyable } from "features/buyable";
import { jsx, JSXFunction, Visibility } from "features/feature";
import { jsx, JSXFunction, showIf, Visibility } from "features/feature";
import { createResource, Resource } from "features/resources/resource";
import { globalBus } from "game/events";
import { BaseLayer, createLayer } from "game/layers";
@ -101,9 +103,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
<br/>
Create {format(computedToGenerate.value)} {options.name}{options.dyesToReset.length > 0 ? ", but reset " + options.dyesToReset.map(dye => dye.name).join(", ") : ""}.
<br/>
<br/>
<span class="white-space: pre-wrap">
Currently: {options.listedBoosts.filter(b => unref(b.visible)).map(b => render(jsx(() => <div>{unref(b.desc)}</div>)))}
</span>
<br/>
<div>
Cost: {options.costs.map(c => render(jsx(() =>
<div>
@ -174,7 +178,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
listedBoosts: [
{
visible: true,
desc: computed(() => `Increase effective Oil Pumps by ${format(boosts.red1.value)} (does not impact coal consumption)`)
desc: computed(() => `+${format(boosts.red1.value)} effective Oil Pumps (does not impact coal consumption)`)
}
],
dyesToReset: [],
@ -197,7 +201,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
listedBoosts: [
{
visible: true,
desc: computed(() => `Multiply Paper \& Plastic gain by ${format(boosts.yellow1.value)}`)
desc: computed(() => `x${format(boosts.yellow1.value)} Paper \& Plastic gain`)
}
],
dyesToReset: [],
@ -220,7 +224,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
listedBoosts: [
{
visible: true,
desc: computed(() => `Add ${formatWhole(boosts.blue1.value)} trees to the forest (after all other modifiers).`)
desc: computed(() => `+${formatWhole(boosts.blue1.value)} forest size (after all other modifiers).`)
}
],
dyesToReset: [],
@ -243,11 +247,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
listedBoosts: [
{
visible: true,
desc: computed(() => `Multiply Red and Yellow Dye gain by ${format(boosts.orange1.value)}`)
desc: computed(() => `x${format(boosts.orange1.value)} Red and Yellow Dye gain`)
},
{
visible: true,
desc: computed(() => `Divide Box buyable costs by ${format(boosts.orange2.value)}.`)
desc: computed(() => `/${format(boosts.orange2.value)} Box buyable costs.`)
}
],
dyesToReset: [{
@ -282,11 +286,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
listedBoosts: [
{
visible: true,
desc: computed(() => `Multiply Yellow and Blue Dye gain by ${format(boosts.green1.value)}`)
desc: computed(() => `x${format(boosts.green1.value)} Yellow and Blue Dye gain`)
},
{
visible: true,
desc: computed(() => `Kiln synergy to Coal and Ash gain is ${formatWhole(Decimal.sub(boosts.green2.value, 1).times(100))}% stronger.`)
desc: computed(() => `x${formatWhole(Decimal.sub(boosts.green2.value, 1).times(100))}% Kiln synergy effect.`)
}
],
dyesToReset: [{
@ -321,11 +325,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
listedBoosts: [
{
visible: true,
desc: computed(() => `Multiply Red and Blue Dye gain by ${format(boosts.purple1.value)}`)
desc: computed(() => `x${format(boosts.purple1.value)} Red and Blue Dye gain`)
},
{
visible: true,
desc: computed(() => `Multiply Smelting Speed and Ore Purity by ${format(boosts.purple2.value)}`)
desc: computed(() => `x${format(boosts.purple2.value)} Smelting Speed and Ore Purity`)
}
],
dyesToReset: [{
@ -392,10 +396,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
const upgrades: Record<DyeUpg, GenericUpgrade> = {
blueDyeUpg: createUpgrade(() => ({
visibility: () => (Decimal.add(dyes.orange.amount.value, dyes.green.amount.value).add(dyes.purple.amount.value).gte(1) || upgrades.blueDyeUpg.bought.value) ? Visibility.Visible : Visibility.Hidden,
visibility: () => showIf(Decimal.add(dyes.orange.amount.value, dyes.green.amount.value).add(dyes.purple.amount.value).gte(1) || upgrades.blueDyeUpg.bought.value),
display: {
title: "Is Blue Dye just Water?",
description: "Multiply Log gain by log(Auto Cutting Amount)+1."
description: jsx(() => <>Multiply Log gain by log<sub>10</sub>(Auto Cutting Amount)+1.</>)
},
cost: 1000,
resource: dyes.blue.amount,
@ -405,10 +409,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
}
})),
redDyeUpg: createUpgrade(() => ({
visibility: () => (Decimal.add(dyes.orange.amount.value, dyes.green.amount.value).add(dyes.purple.amount.value).gte(10) || upgrades.redDyeUpg.bought.value) ? Visibility.Visible : Visibility.Hidden,
visibility: () => showIf(Decimal.add(dyes.orange.amount.value, dyes.green.amount.value).add(dyes.purple.amount.value).gte(10) || upgrades.redDyeUpg.bought.value),
display: {
title: "Glistening Paint",
description: "Multiply Ore Purity by log(Cloth)+1."
description: jsx(() => <>Multiply Ore Purity by log<sub>10</sub>(Cloth)+1.</>)
},
cost: 1500,
resource: dyes.red.amount,
@ -418,7 +422,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
}
})),
yellowDyeUpg: createUpgrade(() => ({
visibility: () => (Decimal.add(dyes.orange.amount.value, dyes.green.amount.value).add(dyes.purple.amount.value).gte(100) || upgrades.yellowDyeUpg.bought.value) ? Visibility.Visible : Visibility.Hidden,
visibility: () => showIf(Decimal.add(dyes.orange.amount.value, dyes.green.amount.value).add(dyes.purple.amount.value).gte(100) || upgrades.yellowDyeUpg.bought.value),
display: {
title: "Wetter Dyes",
description: "Double Red, Yellow, and Blue Dye gain, but reset their amounts."
@ -437,7 +441,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
}
})),
yellowDyeUpg2: createUpgrade(() => ({
visibility: () => upgrades.yellowDyeUpg.bought.value ? Visibility.Visible : Visibility.Hidden,
visibility: () => showIf(upgrades.yellowDyeUpg.bought.value),
display: {
title: "Golden Wash",
description: "Halve the Oil cost of Red, Yellow, and Blue Dyes."
@ -450,10 +454,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
}
})),
redDyeUpg2: createUpgrade(() => ({
visibility: () => upgrades.redDyeUpg.bought.value ? Visibility.Visible : Visibility.Hidden,
visibility: () => showIf(upgrades.redDyeUpg.bought.value),
display: {
title: "De Louvre",
description: "Multiply Smelting Speed by sqrt(Refineries+1)"
description: jsx(() => <>Multiply Smelting Speed by <Sqrt>Refineries+1</Sqrt>.</>)
},
cost: 6000,
resource: dyes.red.amount,
@ -463,7 +467,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
}
})),
blueDyeUpg2: createUpgrade(() => ({
visibility: () => upgrades.blueDyeUpg.bought.value ? Visibility.Visible : Visibility.Hidden,
visibility: () => showIf(upgrades.blueDyeUpg.bought.value),
display: {
title: "Hydrophobia",
description: "Raise Red Dye's effect ^1.5."
@ -476,10 +480,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
}
})),
coalUpg: createUpgrade(() => ({
visibility: () => (upgrades.blueDyeUpg2.bought.value && upgrades.redDyeUpg2.bought.value && upgrades.yellowDyeUpg2.bought.value) ? Visibility.Visible : Visibility.Hidden,
visibility: () => showIf(upgrades.blueDyeUpg2.bought.value && upgrades.redDyeUpg2.bought.value && upgrades.yellowDyeUpg2.bought.value),
display: {
title: "Denser Spectrum",
description: "Orange, Green, and Purple Dyes' first effect is raised ^1.2, and Green Dye's second effect is squared."
description: "Orange, Green, and Purple Dyes' first effect is raised ^1.2, and Green Dye's second effect is squared. Buying this resets Red, Yellow, and Blue Dyes.",
},
cost: "5e30",
resource: coal.coal,
@ -542,8 +546,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
<Spacer />
{renderRow(dyes.orange.display, dyes.green.display, dyes.purple.display)}
<Spacer />
{renderRow(upgrades.redDyeUpg, upgrades.yellowDyeUpg, upgrades.blueDyeUpg)}
{renderRow(upgrades.redDyeUpg2, upgrades.yellowDyeUpg2, upgrades.blueDyeUpg2)}
<div class="row" style="vertical-align: top">
{renderCol(upgrades.redDyeUpg, upgrades.redDyeUpg2)}
{renderCol(upgrades.yellowDyeUpg, upgrades.yellowDyeUpg2)}
{renderCol(upgrades.blueDyeUpg, upgrades.blueDyeUpg2)}
</div>
{render(upgrades.coalUpg)}
</>
))

17
src/features/bars/Bar.vue
View file

@ -109,21 +109,21 @@ export default defineComponent({
};
switch (unref(direction)) {
case Direction.Up:
barStyle.clipPath = `inset(${normalizedProgress.value}% 0% 0% 0%)`;
barStyle.width = unwrapRef(width) + 1 + "px";
barStyle.clipPath = `inset(${normalizedProgress.value}% -2px -2px -2px)`;
barStyle.width = unwrapRef(width) + 2 + "px";
break;
case Direction.Down:
barStyle.clipPath = `inset(0% 0% ${normalizedProgress.value}% 0%)`;
barStyle.width = unwrapRef(width) + 1 + "px";
barStyle.clipPath = `inset(-2px -2px ${normalizedProgress.value}% -2px)`;
barStyle.width = unwrapRef(width) + 2 + "px";
break;
case Direction.Right:
barStyle.clipPath = `inset(0% ${normalizedProgress.value}% 0% 0%)`;
barStyle.clipPath = `inset(-2px ${normalizedProgress.value}% -2px -2px)`;
break;
case Direction.Left:
barStyle.clipPath = `inset(0% 0% 0% ${normalizedProgress.value} + '%)`;
barStyle.clipPath = `inset(-2px -2px -2px ${normalizedProgress.value} + '%)`;
break;
case Direction.Default:
barStyle.clipPath = "inset(0% 50% 0% 0%)";
barStyle.clipPath = "inset(-2px 50% -2px -2px)";
break;
}
return barStyle;
@ -146,6 +146,8 @@ export default defineComponent({
.bar {
position: relative;
display: table;
overflow: hidden;
border-radius: 10px;
}
.overlayTextContainer {
@ -166,7 +168,6 @@ export default defineComponent({
border-radius: 10px;
border-color: var(--foreground);
overflow: hidden;
mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
margin: 0;
}

4
src/features/resources/MainDisplay.vue
View file

@ -3,7 +3,7 @@
<div
class="main-display-container"
:class="classes ?? {}"
:style="[{ height: `${(effectRef?.$el.clientHeight ?? 0) + 50}px` }, style ?? {}]"
:style="[{ 'min-height': `${(effectRef?.$el.clientHeight ?? 0) + 50}px` }, style ?? {}]"
>
<div class="main-display">
<span v-if="showPrefix">You have </span>
@ -23,7 +23,7 @@
<div v-else
class="main-display-container"
:class="classes ?? {}"
:style="[{ height: '50px' }, style ?? {}]"
:style="[{ 'min-height': '50px' }, style ?? {}]"
>
<div class="main-display">
<span v-if="showPrefix">You have </span>