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

Add icon for achievement rewards (fixes #3320)

Browse Source 
Move some achievement CSS classes into scoped
This commit is contained in:
SpectralFlame 2023-06-16 23:03:15 -05:00 committed by cyip92
parent 7872f4b236
commit 53314310c8
3 changed files with 89 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
public/stylesheets/styles.css
View File

@ -3000,42 +3000,17 @@ br {
background-image: url("../images/secret achievements.png");
}
.o-achievement--disabled {
background-color: var(--color-pelle--base);
border-color: var(--color-bad);
}
.o-achievement--locked {
background-color: #a3a3a3;
border-color: var(--color-bad);
}
.o-achievement--unlocked {
background-color: #5ac467;
border-color: #127a20;
}
.o-achievement--waiting {
background-color: #d1d161;
border-color: #acac39;
}
.o-achievement--hidden {
background-color: #555555;
background-image: url("../images/achhidden.png");
border-color: black;
}
.o-achievement--blink {
animation: a-achievement--blink 2s step-start 0s infinite;
}
@keyframes a-achievement--blink {
50% {
visibility: hidden;
}
}
.o-achievement:hover .o-achievement__tooltip {
bottom: 11rem;
opacity: 1;
@ -3201,14 +3176,6 @@ br {
border-color: #388e3c;
}
.t-dark-metro .o-achievement--locked {
background-color: #9e9e9e;
}
.t-dark-metro .o-achievement--waiting {
background-color: #b9b946;
border-color: #7d7d36;
}
/* #endregion t-dark-metro */
@ -3221,20 +3188,6 @@ br {
border-color: #43a047;
}
.t-metro .o-achievement--locked,
.t-inverted-metro .o-achievement--locked,
.t-s8 .o-achievement--locked {
background-color: #9e9e9e;
border-color: var(--color-bad);
}
.t-metro .o-achievement--waiting,
.t-inverted-metro .o-achievement--waiting,
.t-s8 .o-achievement--waiting {
background-color: #ffee58;
border-color: #757575;
}
/* #endregion t-metro t-dark-metro t-s8 */
/* #region t-s1 */
@ -3246,25 +3199,12 @@ br {
/* #endregion t-s1 */
/* #region t-s2 */
.t-s2 .o-achievement--locked {
background-color: rgba(0, 0, 0, 0%);
}
/* #endregion t-s2 */
/* #region t-s5 */
.t-s5 .o-achievement--unlocked {
border-color: #bbbbbb;
}
.t-s5 .o-achievement--locked {
background-color: #222222;
border-color: #000000;
}
/* #endregion t-s5 */
/* #region t-s6 t-s10 */
@ -3283,11 +3223,6 @@ br {
border-color: #666666;
}
.t-s7 .o-achievement--locked {
background-color: #555555;
border-color: #111111;
}
/* #endregion t-s7 */
/* #endregion themes */

86
src/components/tabs/normal-achievements/NormalAchievement.vue
View File

@ -77,6 +77,9 @@ export default {
isPreRealityAchievement() {
return this.realityUnlocked && this.achievement.row <= 13;
},
hasReward() {
return this.config.reward !== undefined && !this.isObscured;
},
// The garble templates themselves can be static, and shouldn't be recreated every render tick
garbledNameTemplate() {
return this.makeGarbledTemplate(this.config.name);
@ -214,6 +217,12 @@ export default {
>
<i :class="indicatorIconClass" />
</div>
<div
v-if="hasReward"
class="o-achievement__reward"
>
<i class="fas fa-star" />
</div>
</div>
</template>
@ -222,4 +231,81 @@ export default {
font-weight: bold;
color: var(--color-accent);
}
.o-achievement--disabled {
background-color: var(--color-pelle--base);
border-color: var(--color-bad);
}
.o-achievement--locked {
background-color: #a3a3a3;
border-color: var(--color-bad);
}
.t-dark-metro .o-achievement--locked {
background-color: #9e9e9e;
}
.t-metro .o-achievement--locked,
.t-inverted-metro .o-achievement--locked,
.t-s8 .o-achievement--locked {
background-color: #9e9e9e;
border-color: var(--color-bad);
}
.t-s2 .o-achievement--locked {
background-color: rgba(0, 0, 0, 0%);
}
.t-s5 .o-achievement--locked {
background-color: #222222;
border-color: #000000;
}
.t-s7 .o-achievement--locked {
background-color: #555555;
border-color: #111111;
}
.o-achievement--waiting {
background-color: #d1d161;
border-color: #acac39;
}
.t-dark-metro .o-achievement--waiting {
background-color: #b9b946;
border-color: #7d7d36;
}
.t-metro .o-achievement--waiting,
.t-inverted-metro .o-achievement--waiting,
.t-s8 .o-achievement--waiting {
background-color: #ffee58;
border-color: #757575;
}
.o-achievement--blink {
animation: a-achievement--blink 2s step-start 0s infinite;
}
@keyframes a-achievement--blink {
50% {
visibility: hidden;
}
}
.o-achievement__reward {
width: 1.5rem;
height: 1.5rem;
position: absolute;
left: 0;
bottom: 0;
font-size: 1rem;
color: black;
background: var(--color-accent);
border-top: var(--var-border-width, 0.2rem) solid var(--color-accent);
border-right: var(--var-border-width, 0.2rem) solid var(--color-accent);
border-top-right-radius: var(--var-border-radius, 0.8rem);
border-bottom-left-radius: var(--var-border-radius, 0.6rem);
}
</style>

3
src/components/tabs/normal-achievements/NormalAchievementsTab.vue
View File

@ -152,6 +152,9 @@ export default {
<div v-html="boostText" />
</span>
</div>
<div class="c-achievements-tab__header c-achievements-tab__header--multipliers">
Achievements with a <i class="fas fa-star" /> icon also give an additional reward.
</div>
<div
v-if="showAutoAchieve"
class="c-achievements-tab__header"