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

show charged upgs while holding shift, improve charged upg styling

Browse Source
This commit is contained in:
Omsi 2020-07-20 22:40:34 -07:00
parent 19905cd4f4
commit 502a4b4a4f
3 changed files with 47 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
javascripts/components/infinity/infinity-upgrade-button.js
View File

@ -14,9 +14,12 @@ Vue.component("infinity-upgrade-button", {
};
},
computed: {
shiftDown() {
return ui.view.shiftDown;
},
config() {
const config = this.upgrade.config;
return (this.isCharged || this.showingCharged) ? config.charged : config;
return (this.isCharged || this.showingCharged || (this.shiftDown && this.canBeCharged)) ? config.charged : config;
},
classObject() {
return {
@ -24,7 +27,8 @@ Vue.component("infinity-upgrade-button", {
"o-infinity-upgrade-btn--bought": this.isBought,
"o-infinity-upgrade-btn--available": !this.isBought && this.canBeBought,
"o-infinity-upgrade-btn--unavailable": !this.isBought && !this.canBeBought,
"o-infinity-upgrade-btn--chargeable": !this.isCharged && this.showingCharged && this.canBeCharged,
"o-infinity-upgrade-btn--chargeable": (!this.isCharged && this.showingCharged && this.canBeCharged) ||
(this.shiftDown && this.canBeCharged),
"o-infinity-upgrade-btn--charged": this.isCharged,
};
}

4
javascripts/components/infinity/upgrades/infinity-upgrades-tab.js
View File

@ -48,7 +48,7 @@ Vue.component("infinity-upgrades-tab", {
disChargeClassObject() {
return {
"o-primary-btn--subtab-option": true,
"o-primary-btn--respec-active": this.disCharge
"o-primary-btn--charged-respec-active": this.disCharge
};
},
offlineIpUpgrade: () => InfinityUpgrade.ipOffline
@ -80,7 +80,7 @@ Vue.component("infinity-upgrades-tab", {
:class="disChargeClassObject"
@click="disCharge = !disCharge"
>
Un-charge all upgrades on next Reality ({{ formatInt(chargesUsed) }}/{{ formatInt(totalCharges) }} used)
Un-charge all upgrades on next Reality ({{ formatInt(chargesUsed) }}/{{ formatInt(totalCharges) }} charged)
</primary-button>
</div>
Each upgrade requires the one above it to be purchased first.

51
stylesheets/styles.css
View File

@ -1363,6 +1363,16 @@ screen and (max-width: 480px) {
cursor: default;
}
.o-primary-btn--charged-respec-active {
color: var(--color-teresa--accent);
background-color: var(--color-teresa--base);
}
.o-primary-btn--charged-respec-active:hover {
color: var(--color-teresa--accent);
background-color: var(--color-teresa--base);
}
.o-primary-btn--glyph-trash {
width: 30rem;
height: 4.5rem;
@ -3480,29 +3490,46 @@ screen and (max-width: 480px) {
/*#endregion o-infinity-upgrade-btn--bought*/
.o-infinity-upgrade-btn--chargeable {
background-color: #8596ea;
color: var(--color-teresa--base);
background-color: var(--color-teresa--accent);
animation: a-charged-infinity-upgrade-glow 2s infinite;
}
.t-dark .o-infinity-upgrade-btn--chargeable,
.t-s6 .o-infinity-upgrade-btn--chargeable {
color: var(--color-teresa--base);
background-color: var(--color-teresa--accent);
}
.o-infinity-upgrade-btn--chargeable:hover {
color: var(--color-teresa--base);
}
@keyframes a-charged-infinity-upgrade-glow {
0% { box-shadow: inset 0 0 2rem 0}
13% { box-shadow: inset 0 0 2rem 0.15rem}
25% { box-shadow: inset 0 0 2rem 0.4rem}
38% { box-shadow: inset 0 0 2rem 0.65rem}
50% { box-shadow: inset 0 0 2rem 0.8rem}
63% { box-shadow: inset 0 0 2rem 0.65rem}
75% { box-shadow: inset 0 0 2rem 0.4rem}
88% { box-shadow: inset 0 0 2rem 0.15rem}
100% { box-shadow: inset 0 0 2rem 0}
0% { box-shadow: inset 0 0 2rem 0}
13% { box-shadow: inset 0 0 2rem 0.15rem}
25% { box-shadow: inset 0 0 2rem 0.4rem}
38% { box-shadow: inset 0 0 2rem 0.65rem}
50% { box-shadow: inset 0 0 2rem 0.8rem}
63% { box-shadow: inset 0 0 2rem 0.65rem}
75% { box-shadow: inset 0 0 2rem 0.4rem}
88% { box-shadow: inset 0 0 2rem 0.15rem}
100% { box-shadow: inset 0 0 2rem 0}
}
.o-infinity-upgrade-btn--charged {
background-color: #8596ea;
color: var(--color-teresa--accent);
background-color: var(--color-teresa--base);
}
.t-dark .o-infinity-upgrade-btn--charged,
.t-s6 .o-infinity-upgrade-btn--charged {
background-color: #8596ea;
color: var(--color-teresa--accent);
background-color: var(--color-teresa--base);
}
.o-infinity-upgrade-btn--charged:hover {
color: var(--color-teresa--accent);
}
/*#endregion o-infinity-upgrade-btn*/