diff --git a/src/components/tabs/antimatter-dimensions/ClassicAntimatterDimensionRow.vue b/src/components/tabs/antimatter-dimensions/ClassicAntimatterDimensionRow.vue index e388c50e2..72892d0ae 100644 --- a/src/components/tabs/antimatter-dimensions/ClassicAntimatterDimensionRow.vue +++ b/src/components/tabs/antimatter-dimensions/ClassicAntimatterDimensionRow.vue @@ -53,7 +53,7 @@ export default { return `${prefix} ${format(this.singleCost)} ${suffix}`; }, until10Text() { - if (this.isCapped) return "Capped"; + if (this.isCapped) return "Shattered by Nameless"; if (this.isContinuumActive) return `Continuum: ${this.continuumString}`; const prefix = `Until ${formatInt(10)},${this.showCostTitle(this.until10Cost) ? " Cost" : ""}`; @@ -74,6 +74,20 @@ export default { costUnit() { return `${AntimatterDimension(this.tier - 2).shortDisplayName} AD`; }, + buySingleClass() { + return { + "o-primary-btn--buy-ad o-primary-btn--buy-single-ad tooltip-container": true, + "l-dim-row-small-text": this.isLongText(this.singleText) || !this.showCostTitle(this.singleCost), + }; + }, + buyTenClass() { + return { + "o-primary-btn--buy-ad o-primary-btn--buy-dim tooltip-container": true, + "o-primary-btn--buy-10-ad": !this.isContinuumActive, + "o-primary-btn--continuum-ad o-continuum": this.isContinuumActive, + "l-dim-row-small-text": this.isLongText(this.until10Text) && !this.isContinuumActive + }; + } }, methods: { update() { @@ -117,11 +131,6 @@ export default { isLongText(str) { return str.length > 20; }, - textClass() { - return { - "l-dim-row-small-text": this.isLongText(this.singleText) || !this.showCostTitle(this.singleCost), - }; - }, tutorialClass() { return { "l-glow-container": true, @@ -148,15 +157,16 @@ export default {
{{ singleText }}
+
+ {{ boughtTooltip }} +
{{ until10Text }} +
+ {{ boughtTooltip }} +
@@ -192,6 +199,41 @@ export default { border-radius: var(--var-border-radius, inherit); } +.tooltip-container { + position: relative; + display: inline-block; +} + +.tooltip-container .purchase-count-tooltip { + position: absolute; + width: 20rem; + top: 50%; + font-size: 1.3rem; + line-height: 1.6rem; + color: white; + background: black; + border: 0.1rem solid var(--color-text); + border-radius: var(--var-border-width, 0.5rem); + transform: translate(calc(-100% - 1.5rem), -50%); + padding: 0.5rem; + visibility: hidden; +} + +.tooltip-container:hover .purchase-count-tooltip { + visibility: visible; +} + +.tooltip-container .purchase-count-tooltip::after { + content: ""; + position: absolute; + left: 100%; + top: 50%; + border-top: 0.5rem solid transparent; + border-left: 0.5rem solid var(--color-text); + border-bottom: 0.5rem solid transparent; + transform: translateY(-50%); +} + .o-continuum { border-color: var(--color-laitela--accent); color: var(--color-laitela--accent); diff --git a/src/components/tabs/antimatter-dimensions/ModernAntimatterDimensionRow.vue b/src/components/tabs/antimatter-dimensions/ModernAntimatterDimensionRow.vue index 1290e3cec..dff6ba22a 100644 --- a/src/components/tabs/antimatter-dimensions/ModernAntimatterDimensionRow.vue +++ b/src/components/tabs/antimatter-dimensions/ModernAntimatterDimensionRow.vue @@ -115,14 +115,14 @@ export default { }, buttonClass() { return { - "o-primary-btn": true, - "o-primary-btn--new": true, + "o-primary-btn o-primary-btn--new": true, "o-primary-btn--disabled": (!this.isAffordable && !this.isContinuumActive) || !this.isUnlocked || this.isCapped, "o-non-clickable o-continuum": this.isContinuumActive }; }, - tutorialClass() { + buttonTextClass() { return { + "button-content l-modern-buy-ad-text": true, "tutorial--glow": this.isAffordable && this.hasTutorial }; } @@ -143,16 +143,15 @@ export default { :amount-text="amountDisplay" :rate="rateOfChange" /> -
+
+
+ {{ boughtTooltip }} +