From b572cc2c76ebf747626369b15206bb7955c836a3 Mon Sep 17 00:00:00 2001
From: ducdat0507 <62660527+ducdat0507@users.noreply.github.com>
Date: Sat, 10 Dec 2022 18:35:41 +0700
Subject: [PATCH] Dye text changes
---
src/data/layers/dyes.tsx | 53 +++++++++++++++-----------
src/features/bars/Bar.vue | 17 +++++----
src/features/resources/MainDisplay.vue | 4 +-
3 files changed, 41 insertions(+), 33 deletions(-)
diff --git a/src/data/layers/dyes.tsx b/src/data/layers/dyes.tsx
index 25ccc47..46fdc91 100644
--- a/src/data/layers/dyes.tsx
+++ b/src/data/layers/dyes.tsx
@@ -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)}
</>
))
diff --git a/src/features/bars/Bar.vue b/src/features/bars/Bar.vue
index df140c0..3a7a71f 100644
--- a/src/features/bars/Bar.vue
+++ b/src/features/bars/Bar.vue
@@ -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;
}
diff --git a/src/features/resources/MainDisplay.vue b/src/features/resources/MainDisplay.vue
index 54dfe6d..111c6b6 100644
--- a/src/features/resources/MainDisplay.vue
+++ b/src/features/resources/MainDisplay.vue
@@ -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>