Nixyri/AntimatterDimensionsSourceCode
1
0
Fork 0
mirror of https://github.com/IvarK/AntimatterDimensionsSourceCode.git synced 2024-09-20 11:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move AD purchase count tooltips to the left

Browse Source
This commit is contained in:
SpectralFlame 2023-06-13 17:30:00 -05:00 committed by cyip92
parent 63c18bf7ec
commit 26e5589fb1
2 changed files with 101 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/tabs/antimatter-dimensions/ClassicAntimatterDimensionRow.vue
View File

@ -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 {
<div class="l-dim-row-multi-button-container">
<PrimaryButton
v-if="!isContinuumActive"
:ach-tooltip="boughtTooltip"
:enabled="isAffordable && !isCapped && isUnlocked"
class="o-primary-btn--buy-ad o-primary-btn--buy-single-ad"
:class="textClass()"
:class="buySingleClass"
@click="buySingle"
>
<div :class="tutorialClass()">
{{ singleText }}
</div>
<div class="purchase-count-tooltip">
{{ boughtTooltip }}
</div>
<div
v-if="hasTutorial"
class="fas fa-circle-exclamation l-notification-icon"
@ -164,16 +174,13 @@ export default {
</PrimaryButton>
<PrimaryButton
:enabled="(isAffordableUntil10 || isContinuumActive) && !isCapped && isUnlocked"
class="o-primary-btn--buy-ad o-primary-btn--buy-dim"
:class="{
'o-primary-btn--buy-10-ad': !isContinuumActive,
'o-primary-btn--continuum-ad o-continuum': isContinuumActive,
'l-dim-row-small-text': isLongText(until10Text) && !isContinuumActive
}"
:ach-tooltip="boughtTooltip"
:class="buyTenClass"
@click="buyUntil10"
>
{{ until10Text }}
<div class="purchase-count-tooltip">
{{ boughtTooltip }}
</div>
</PrimaryButton>
</div>
</div>
@ -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);

52
src/components/tabs/antimatter-dimensions/ModernAntimatterDimensionRow.vue
View File

@ -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"
/>
<div class="l-dim-row-multi-button-container">
<div class="l-dim-row-multi-button-container tooltip-container">
<div class="purchase-count-tooltip">
{{ boughtTooltip }}
</div>
<button
:class="buttonClass()"
@click="buy"
>
<div
v-tooltip="boughtTooltip"
class="button-content l-modern-buy-ad-text"
:class="tutorialClass()"
>
<div :class="buttonTextClass()">
<div>
{{ buttonPrefix }}
</div>
@ -188,6 +187,41 @@ export default {
flex-direction: column;
}
.tooltip-container {
position: relative;
}
.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);
/* Button is 25rem wide, tooltip is 20rem */
transform: translate(calc(-125% - 1rem), -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-non-clickable {
cursor: auto;
}