standardize css usage for not reached dims, add not reached dim behavior to tds

This commit is contained in:
Omsi 2020-07-20 21:09:51 -07:00
parent c38f0ee8c6
commit 7ebc154315
7 changed files with 37 additions and 31 deletions

View File

@ -99,7 +99,7 @@ Vue.component("antimatter-dim-row", {
},
template:
`<div v-show="showRow" class="c-antimatter-dim-row"
:class="{ 'c-antimatter-dim-row--not-reached': !isUnlocked }">
:class="{ 'c-dim-row--not-reached': !isUnlocked }">
<div class="c-dim-row__label c-dim-row__name">
{{name}} Antimatter Dimension {{formatX(multiplier, 1, 1)}}
</div>

View File

@ -48,7 +48,7 @@ Vue.component("infinity-dim-row", {
return "Unlock";
}
return `Reach ${format(requirement)} AM`;
return `Reach ${formatPostBreak(requirement)} AM`;
},
hardcapPurchases() {
return format(this.hardcap, 1, 1);
@ -103,7 +103,7 @@ Vue.component("infinity-dim-row", {
},
template:
`<div v-show="showRow" class="c-infinity-dim-row"
:class="{ 'c-infinity-dim-row--not-reached': !isUnlocked && !requirementReached }">
:class="{ 'c-dim-row--not-reached': !isUnlocked && !requirementReached }">
<div class="c-dim-row__label c-dim-row__name">
{{name}} Infinity Dimension {{formatX(multiplier, 2, 1)}}
</div>

View File

@ -15,6 +15,7 @@ Vue.component("time-dim-row", {
cost: new Decimal(0),
isAffordable: false,
isAutobuyerOn: false,
realityUnlocked: false
};
},
computed: {
@ -27,7 +28,11 @@ Vue.component("time-dim-row", {
: "";
},
buttonContents() {
if (!this.isUnlocked) return "Purchase the study";
return this.isCapped ? "Capped" : `Cost: ${format(this.cost, 2)} EP`;
},
showRow() {
return this.isUnlocked || this.realityUnlocked;
}
},
watch: {
@ -39,10 +44,8 @@ Vue.component("time-dim-row", {
update() {
const tier = this.tier;
const dimension = TimeDimension(tier);
const isUnlocked = dimension.isUnlocked;
this.isCapped = Enslaved.isRunning && dimension.bought > 0;
this.isUnlocked = isUnlocked;
if (!isUnlocked) return;
this.isUnlocked = dimension.isUnlocked;
this.multiplier.copyFrom(dimension.multiplier);
this.amount.copyFrom(dimension.amount);
if (tier < 8) {
@ -50,7 +53,8 @@ Vue.component("time-dim-row", {
}
this.cost.copyFrom(dimension.cost);
this.isAffordable = dimension.isAffordable;
this.isAutobuyerOn = player.reality.tdbuyers[this.tier - 1];
this.isAutobuyerOn = player.reality.tdbuyers[tier - 1];
this.realityUnlocked = PlayerProgress.realityUnlocked();
},
buyTimeDimension() {
buySingleTimeDimension(this.tier);
@ -59,8 +63,9 @@ Vue.component("time-dim-row", {
buyMaxTimeDimension(this.tier);
},
},
template:
`<div v-show="isUnlocked" class="c-time-dim-row">
template: `
<div v-show="showRow" class="c-time-dim-row"
:class="{ 'c-dim-row--not-reached': !isUnlocked }">
<div class="c-dim-row__label c-dim-row__name">
{{name}} Time Dimension {{formatX(multiplier, 2, 1)}}
</div>
@ -69,7 +74,7 @@ Vue.component("time-dim-row", {
<span class="c-dim-row__label--small" v-if="rateOfChange.neq(0)">{{rateOfChangeDisplay}}</span>
</div>
<primary-button
:enabled="isAffordable && !isCapped"
:enabled="isAffordable && !isCapped && isUnlocked"
class="o-primary-btn--buy-td l-dim-row__button"
@click="buyTimeDimension"
>{{buttonContents}}</primary-button>
@ -81,7 +86,7 @@ Vue.component("time-dim-row", {
/>
<primary-button
v-else
:enabled="isAffordable && !isCapped"
:enabled="isAffordable && !isCapped && isUnlocked"
class="o-primary-btn--buy-td-max l-dim-row__button"
@click="buyMaxTimeDimension"
>Buy Max</primary-button>

View File

@ -104,7 +104,7 @@ Vue.component("new-dimension-row", {
},
template:
`<div v-show="showRow" class="c-antimatter-dim-row"
:class="{ 'c-antimatter-dim-row--not-reached': !isUnlocked }">
:class="{ 'c-dim-row--not-reached': !isUnlocked }">
<div class="c-dim-row__label c-dim-row__name">
{{name}} Antimatter D <span class="c-antimatter-dim-row__multiplier">{{formatX(multiplier, 1, 1)}}</span>
</div>

View File

@ -46,7 +46,7 @@ Vue.component("new-inf-dimension-row", {
return "Unlock";
}
return `Reach ${format(requirement)} AM`;
return `Reach ${formatPostBreak(requirement)} AM`;
},
capTooltip() {
return this.isCapped
@ -97,7 +97,7 @@ Vue.component("new-inf-dimension-row", {
},
template:
`<div v-show="showRow" class="c-infinity-dim-row"
:class="{ 'c-infinity-dim-row--not-reached': !isUnlocked && !requirementReached }">
:class="{ 'c-dim-row--not-reached': !isUnlocked && !requirementReached }">
<div class="c-dim-row__label c-dim-row__name">
{{name}} Infinity D <span class="c-infinity-dim-row__multiplier">{{formatX(multiplier, 2, 1)}}</span>
</div>

View File

@ -15,6 +15,7 @@ Vue.component("new-time-dimension-row", {
cost: new Decimal(0),
isAffordable: false,
isAutobuyerOn: false,
realityUnlocked: false
};
},
computed: {
@ -27,7 +28,11 @@ Vue.component("new-time-dimension-row", {
: "";
},
buttonContents() {
return this.isCapped ? "Capped" : `Cost: ${format(this.cost, 2, 0)} EP`;
if (!this.isUnlocked) return "Purchase the study";
return this.isCapped ? "Capped" : `Cost: ${format(this.cost, 2)} EP`;
},
showRow() {
return this.isUnlocked || this.realityUnlocked;
}
},
watch: {
@ -39,10 +44,8 @@ Vue.component("new-time-dimension-row", {
update() {
const tier = this.tier;
const dimension = TimeDimension(tier);
const isUnlocked = dimension.isUnlocked;
this.isCapped = Enslaved.isRunning && dimension.bought > 0;
this.isUnlocked = isUnlocked;
if (!isUnlocked) return;
this.isUnlocked = dimension.isUnlocked;
this.multiplier.copyFrom(dimension.multiplier);
this.amount.copyFrom(dimension.amount);
if (tier < 8) {
@ -50,7 +53,8 @@ Vue.component("new-time-dimension-row", {
}
this.cost.copyFrom(dimension.cost);
this.isAffordable = dimension.isAffordable;
this.isAutobuyerOn = player.reality.tdbuyers[this.tier - 1];
this.isAutobuyerOn = player.reality.tdbuyers[tier - 1];
this.realityUnlocked = PlayerProgress.realityUnlocked();
},
buyTimeDimension() {
buySingleTimeDimension(this.tier);
@ -59,8 +63,9 @@ Vue.component("new-time-dimension-row", {
buyMaxTimeDimension(this.tier);
},
},
template:
`<div v-show="isUnlocked" class="c-time-dim-row">
template: `
<div v-show="showRow" class="c-time-dim-row"
:class="{ 'c-dim-row--not-reached': !isUnlocked }">
<div class="c-dim-row__label c-dim-row__name">
{{name}} Time D <span class="c-time-dim-row__multiplier">{{formatX(multiplier, 2, 1)}}</span>
</div>
@ -69,7 +74,7 @@ Vue.component("new-time-dimension-row", {
<span class="c-dim-row__label--small" v-if="rateOfChange.neq(0)">{{rateOfChangeDisplay}}</span>
</div>
<primary-button
:enabled="isAffordable && !isCapped"
:enabled="isAffordable && !isCapped && isUnlocked"
class="o-primary-btn--buy-td l-dim-row__button o-primary-btn o-primary-btn--new"
@click="buyTimeDimension"
>{{buttonContents}}</primary-button>
@ -81,7 +86,7 @@ Vue.component("new-time-dimension-row", {
/>
<primary-button
v-else
:enabled="isAffordable && !isCapped"
:enabled="isAffordable && !isCapped && isUnlocked"
class="o-primary-btn--buy-td-max l-dim-row__button"
@click="buyMaxTimeDimension"
>Buy Max</primary-button>

View File

@ -1986,6 +1986,10 @@ screen and (max-width: 480px) {
width: 100%;
}
.c-dim-row--not-reached {
opacity: 0.5;
}
.c-dim-row__name {
width: 40%;
}
@ -2052,10 +2056,6 @@ screen and (max-width: 480px) {
margin-top: 1rem;
}
.c-antimatter-dim-row--not-reached {
opacity: 0.5;
}
.c-antimatter-dim-row__floating-text {
position: absolute;
bottom: 2rem;
@ -2260,10 +2260,6 @@ screen and (max-width: 480px) {
font-size: 1.6rem;
}
.c-infinity-dim-row--not-reached {
opacity: 0.5;
}
/*#endregion c-infinity-dim-row*/
/*#endregion Infinity Dimensions*/