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

Vuefy and cleanup HintText

Browse Source
This commit is contained in:
Andrei Andreev 2021-11-18 13:10:08 +03:00
parent 887bcce2d2
commit 4bf04e5aef
13 changed files with 98 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
javascripts/components/achievements/normal/normal-achievement.js
View File

@ -1,9 +1,10 @@
import "../../common/hint-text.js";
import EffectDisplay from "@/components/EffectDisplay";
import HintText from "@/components/HintText";
Vue.component("normal-achievement", {
components: {
EffectDisplay
EffectDisplay,
HintText
},
props: {
/** @type AchievementState */
@ -85,9 +86,9 @@ Vue.component("normal-achievement", {
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
>
<hint-text type="achievements" class="l-hint-text--achievement">
<HintText type="achievements" class="l-hint-text--achievement">
{{ id }}
</hint-text>
</HintText>
<div class="o-achievement__tooltip">
<template v-if="isMouseOver">
<div class="o-achievement__tooltip__name">

9
javascripts/components/achievements/secret/secret-achievement.js
View File

@ -1,6 +1,9 @@
import "../../common/hint-text.js";
import HintText from "@/components/HintText";
Vue.component("secret-achievement", {
components: {
HintText
},
props: {
/** @type SecretAchievementState */
achievement: {
@ -75,9 +78,9 @@ Vue.component("secret-achievement", {
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
>
<hint-text type="achievements" class="l-hint-text--achievement">
<HintText type="achievements" class="l-hint-text--achievement">
S{{ id }}
</hint-text>
</HintText>
<div class="o-achievement__tooltip">
<template v-if="isMouseOver">
<div class="o-achievement__tooltip__name">

9
javascripts/components/celestials/subtabs/ra/alchemy-circle-node.js
View File

@ -1,6 +1,9 @@
import "../../../common/hint-text.js";
import HintText from "@/components/HintText";
Vue.component("alchemy-circle-node", {
components: {
HintText
},
props: {
node: Object,
isFocused: false
@ -62,12 +65,12 @@ Vue.component("alchemy-circle-node", {
:classObject="classObject"
/>
<span v-if="isUnlocked">
<hint-text type="alchemy"
<HintText type="alchemy"
:class="hintClassObject"
class="o-hint-text--alchemy-node l-hint-text--alchemy-node"
>
{{ amount.toFixed(1) }}
</hint-text>
</HintText>
</span>
</div>`
});

9
javascripts/components/challenges/challenge-box.js
View File

@ -1,6 +1,9 @@
import "../common/hint-text.js";
import HintText from "@/components/HintText";
Vue.component("challenge-box", {
components: {
HintText
},
props: {
name: String,
isUnlocked: false,
@ -47,9 +50,9 @@ Vue.component("challenge-box", {
},
template: `
<div class="c-challenge-box l-challenge-box">
<hint-text type="challenges" class="l-hint-text--challenge">
<HintText type="challenges" class="l-hint-text--challenge">
{{ name }}
</hint-text>
</HintText>
<slot name="top" />
<div class="l-challenge-box__fill" />
<button

9
javascripts/components/challenges/eternity-challenge-box.js
View File

@ -1,6 +1,9 @@
import "../common/hint-text.js";
import HintText from "@/components/HintText";
Vue.component("eternity-challenge-box", {
components: {
HintText
},
props: {
name: String,
isUnlocked: false,
@ -51,9 +54,9 @@ Vue.component("eternity-challenge-box", {
},
template: `
<div class="c-challenge-box l-challenge-box c-challenge-box--eternity">
<hint-text type="challenges" class="l-hint-text--challenge">
<HintText type="challenges" class="l-hint-text--challenge">
{{ name }}
</hint-text>
</HintText>
<slot name="top" />
<div class="l-challenge-box__fill" />
<button

14
javascripts/components/common/hint-text.js
View File

@ -1,14 +0,0 @@
Vue.component("hint-text", {
props: {
type: String
},
computed: {
showThisHintText() {
// Accessing the player object in this computed is intentional for the sake of performance.
// Always access the player object in update method and store required stuff in component data.
return player.options.showHintText[this.type];
}
},
template:
`<div v-show="$viewModel.shiftDown || showThisHintText" class="o-hint-text l-hint-text"><slot /></div>`
});

7
javascripts/components/eternity/time-studies/normal-time-study.js
View File

@ -1,12 +1,13 @@
import "../../common/hint-text.js";
import "./time-study.js";
import DescriptionDisplay from "@/components/DescriptionDisplay";
import EffectDisplay from "@/components/EffectDisplay";
import HintText from "@/components/HintText";
Vue.component("normal-time-study", {
components: {
DescriptionDisplay,
EffectDisplay
EffectDisplay,
HintText
},
props: {
setup: Object
@ -47,7 +48,7 @@ Vue.component("normal-time-study", {
},
template: `
<time-study :setup="setup" :showCost="showCost" :showSTCost="showSTCost">
<hint-text type="studies" class="l-hint-text--time-study">{{ hintText }}</hint-text>
<HintText type="studies" class="l-hint-text--time-study">{{ hintText }}</HintText>
<DescriptionDisplay :config="study.config" />
<EffectDisplay
br

7
javascripts/components/eternity/time-studies/triad-time-study.js
View File

@ -1,12 +1,13 @@
import "../../common/hint-text.js";
import "./time-study.js";
import DescriptionDisplay from "@/components/DescriptionDisplay";
import EffectDisplay from "@/components/EffectDisplay";
import HintText from "@/components/HintText";
Vue.component("triad-time-study", {
components: {
DescriptionDisplay,
EffectDisplay
EffectDisplay,
HintText
},
props: {
setup: Object
@ -26,7 +27,7 @@ Vue.component("triad-time-study", {
},
template: `
<time-study :setup="setup" class="o-time-study--triad" :showSTCost="true">
<hint-text type="studies" class="l-hint-text--time-study">T{{ id }}</hint-text>
<HintText type="studies" class="l-hint-text--time-study">T{{ id }}</HintText>
<DescriptionDisplay :config="study.config" />
<EffectDisplay
br

2
javascripts/components/modals/modal-preferred-tree.js
View File

@ -74,7 +74,7 @@ Vue.component("modal-preferred-tree", {
@click="select(name)"
:class="classList(name)"
>
<div v-if="isPreferred(name)" class="l-dim-path-priority o-hint-text">
<div v-if="isPreferred(name)" class="l-dim-path-priority o-dim-path-priority">
{{ isPreferred(name) }}
</div>
<div>

9
javascripts/components/reality/upgrades/imaginary-upgrade-button.js
View File

@ -1,13 +1,14 @@
import "../../common/hint-text.js";
import CostDisplay from "@/components/CostDisplay";
import DescriptionDisplay from "@/components/DescriptionDisplay";
import EffectDisplay from "@/components/EffectDisplay";
import HintText from "@/components/HintText";
Vue.component("imaginary-upgrade-button", {
components: {
DescriptionDisplay,
EffectDisplay,
CostDisplay
CostDisplay,
HintText
},
props: {
upgrade: Object
@ -65,12 +66,12 @@ Vue.component("imaginary-upgrade-button", {
class="l-reality-upgrade-btn c-reality-upgrade-btn"
@click="upgrade.purchase()"
>
<hint-text
<HintText
type="realityUpgrades"
class="l-hint-text--reality-upgrade c-hint-text--reality-upgrade"
>
{{ config.name }}
</hint-text>
</HintText>
<DescriptionDisplay :config="config" />
<DescriptionDisplay
v-if="($viewModel.shiftDown === isAvailableForPurchase) && !isRebuyable"

9
javascripts/components/reality/upgrades/reality-upgrade-button.js
View File

@ -1,13 +1,14 @@
import "../../common/hint-text.js";
import CostDisplay from "@/components/CostDisplay";
import DescriptionDisplay from "@/components/DescriptionDisplay";
import EffectDisplay from "@/components/EffectDisplay";
import HintText from "@/components/HintText";
Vue.component("reality-upgrade-button", {
components: {
DescriptionDisplay,
EffectDisplay,
CostDisplay
CostDisplay,
HintText
},
props: {
upgrade: Object
@ -67,12 +68,12 @@ Vue.component("reality-upgrade-button", {
class="l-reality-upgrade-btn c-reality-upgrade-btn"
@click="upgrade.purchase()"
>
<hint-text
<HintText
type="realityUpgrades"
class="l-hint-text--reality-upgrade c-hint-text--reality-upgrade"
>
{{ config.name }}
</hint-text>
</HintText>
<DescriptionDisplay :config="config" />
<DescriptionDisplay
v-if="($viewModel.shiftDown === isAvailableForPurchase) && !isRebuyable"

8
public/stylesheets/styles.css
View File

@ -1832,7 +1832,7 @@ screen and (max-width: 480px) {
/*#region hint-text*/
.o-hint-text {
.o-dim-path-priority {
font-size: 1.55rem;
color: white;
text-shadow:
@ -1847,12 +1847,6 @@ screen and (max-width: 480px) {
pointer-events: none;
}
.l-hint-text {
position: absolute;
top: -1.6rem;
left: 0;
}
.l-hint-text--challenge {
top: -2.2rem;
}

49
src/components/HintText.vue Normal file
View File

@ -0,0 +1,49 @@
<script>
export default {
props: {
type: {
type: String,
required: true
}
},
computed: {
showThisHintText() {
// Accessing the player object in this computed is intentional for the sake of performance.
// Always access the player object in update method and store required stuff in component data.
return this.$viewModel.shiftDown || player.options.showHintText[this.type];
}
},
};
</script>
<template>
<div
v-show="showThisHintText"
class="o-hint-text l-hint-text"
>
<slot />
</div>
</template>
<style scoped>
.o-hint-text {
font-size: 1.55rem;
color: white;
text-shadow:
-0.1rem -0.1rem 0 black,
-0.1rem -0.1rem 0 black,
0.1rem -0.1rem 0 black,
0.1rem -0.1rem 0 black,
-0.1rem 0.1rem 0 black,
-0.1rem 0.1rem 0 black,
0.1rem 0.1rem 0 black,
0.1rem 0.1rem 0 black;
pointer-events: none;
}
.l-hint-text {
position: absolute;
top: -1.6rem;
left: 0;
}
</style>