john
/
timekeeper
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

chore: messaging about spare time, energy, and mana

This commit is contained in:
pskfyi 2022-01-13 19:57:35 -08:00 committed by pskfyi
parent 4b895982a0
commit 45fc84b3db
4 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/KeyArtStage.vue
View File

@ -2,12 +2,12 @@
<div class="p-8 relative"> <div class="p-8 relative">
<div class="key-art absolute top-8 left-0 right-0" /> <div class="key-art absolute top-8 left-0 right-0" />
<div <div
class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center" class="absolute top-0 bottom-0 left-0 right-0 flex flex-col items-center justify-center"
:class="`text-${$store.getters.activeTab.darkColor}`"
@click="click" @click="click"
> >
<span <span
class="spare-time flex flex-row items-center font-bold rounded-2xl select-none" class="spare-time flex flex-row items-center font-bold rounded-2xl select-none"
:class="`text-${$store.getters.activeTab.darkColor}`"
> >
<span <span
class="spare-time-value text-3xl md:text-5xl" class="spare-time-value text-3xl md:text-5xl"
@ -15,6 +15,10 @@
/> />
<span class="fas fa-hourglass-half text-xl pl-2 md:text-3xl md:pt-1" /> <span class="fas fa-hourglass-half text-xl pl-2 md:text-3xl md:pt-1" />
</span> </span>
<span class="spare-time-explanation text-sm md:text-lg select-none">
Tap to gain
<b><span class="fas fa-hourglass-half" /> Spare Time</b>
</span>
</div> </div>
</div> </div>
</template> </template>
@ -54,8 +58,14 @@ export default {
} }
.spare-time { .spare-time {
--color: rgba(2555, 255, 255, 0.5); --color: rgba(2555, 255, 255, 0.5);
background: var(--color);
box-shadow: 0px 0px 20px 20px var(--color); box-shadow: 0px 0px 20px 20px var(--color);
background: var(--color);
transition: color 2000ms;
}
.spare-time-explanation {
--color: rgba(2555, 255, 255, 0.2);
box-shadow: 0px 0px 10px 10px var(--color);
background: var(--color);
transition: color 2000ms; transition: color 2000ms;
} }
</style> </style>

2
layouts/default.vue
View File

@ -80,7 +80,7 @@ export default {
</script> </script>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=Roboto+Slab:wght@600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&family=Roboto+Slab:wght@600&display=swap');
html, html,
body, body,

5
pages/TimeMachine.vue
View File

@ -20,6 +20,11 @@
</span> </span>
</div> </div>
<p class="text-lg text-center py-2 border-b-2 border-current">
<b><span class="fas fa-bolt text-base" /> Energy</b>
is generated over time
</p>
<h2 class="text-xl font-semibold text-center pt-8">Upgrades</h2> <h2 class="text-xl font-semibold text-center pt-8">Upgrades</h2>
<responsive-grid class="pt-2 md:pt-4"> <responsive-grid class="pt-2 md:pt-4">

10
pages/TimeMagic.vue
View File

@ -20,9 +20,13 @@
</span> </span>
</div> </div>
<h2 class="font-semibold text-lg text-center pt-4 md:mt-8"> <p class="text-lg text-center py-2 border-b-2 border-current">
Spells coming soon! Tapping to gain
</h2> <b><span class="fas fa-hourglass-half text-base" /> Spare Time</b>
<br class="md:hidden" />
now also gains
<b><span class="fas fa-star text-base" /> Mana</b>
</p>
</div> </div>
</template> </template>